1+ import * as ReactDOM from 'react-dom' ;
2+ import * as React from 'react' ;
3+ import { Accordion } from '@syncfusion/ej2-navigations' ;
4+ import { Ajax } from '@syncfusion/ej2-base' ;
5+ import { AccordionComponent , AccordionItemDirective , AccordionItemsDirective , ExpandEventArgs } from '@syncfusion/ej2-react-navigations' ;
6+ import { updateSampleSection } from '../common/sample-base' ;
7+ import './accordion.component.css'
8+
9+ function AjaxContent ( ) {
10+ React . useEffect ( ( ) => {
11+ updateSampleSection ( ) ;
12+ } , [ ] )
13+
14+ let acrdnObj : AccordionComponent ;
15+ let nestAcrdn = AccordionComponent ;
16+
17+ function created ( ) : void {
18+ let ajax : Ajax = new Ajax ( './src/accordion/ajax-content.html' , 'GET' , true ) ;
19+ ajax . send ( ) . then ( ) ;
20+ ajax . onSuccess = ( data : string ) : void => {
21+ // Load Accordion content on AJAX success
22+ acrdnObj . items [ 0 ] . content = data ;
23+ // Refreshing Accoridon Component with AJAX content
24+ acrdnObj . refresh ( ) ;
25+ } ;
26+ }
27+
28+ function expand ( e : ExpandEventArgs ) : void {
29+ let checkMaterial : boolean = document . body . classList . contains ( 'material' ) ;
30+ if ( e . isExpanded && [ ] . indexOf . call ( acrdnObj . items , e . item ) === 1 ) {
31+ if ( e . element . querySelectorAll ( '.e-accordion' ) . length > 0 ) {
32+ return ;
33+ }
34+ //Initialize Nested Accordion component
35+ let nestAcrdn : Accordion = new Accordion ( {
36+ expandMode : 'Single' ,
37+ items : [
38+ { header : 'Sensor' , content : '#Sensor_features' } ,
39+ { header : 'Camera' , content : '#Camera_features' } ,
40+ { header : 'Video Recording' , content : '#Video_Rec_features' } ,
41+ ]
42+ } ) ;
43+ //Render initialized Nested Accordion component
44+ nestAcrdn . appendTo ( '#nested_Acc' ) ;
45+ }
46+ }
47+ function networkHeader ( ) {
48+ return (
49+ < div >
50+ Network & Connectivity
51+ </ div >
52+ )
53+ }
54+ function featureheader ( ) {
55+ return (
56+ < div >
57+ Feature
58+ </ div >
59+ )
60+ }
61+ function hardwareheader ( ) {
62+ return (
63+ < div >
64+ Hardware & Software
65+ </ div >
66+ )
67+ }
68+ function HWSW ( ) {
69+ return (
70+ < div id = "Hard_Soft_features" >
71+ < table >
72+ < tbody > < tr >
73+ < th rowSpan = { 3 } > Hardware</ th >
74+ < td rowSpan = { 2 } > Chip</ td >
75+ < td > Apple A11 Bionic chip with 64-bit architecture</ td >
76+ </ tr >
77+ < tr >
78+ < td > Embedded M11 motion coprocessor</ td >
79+ </ tr >
80+ < tr >
81+ < td > Capacity</ td >
82+ < td > 64GB/256GB</ td >
83+ </ tr >
84+ < tr >
85+ < th > Software</ th >
86+ < td > Operating System</ td >
87+ < td > iOS 11</ td >
88+ </ tr >
89+ </ tbody > </ table >
90+ </ div >
91+ )
92+ }
93+ return (
94+ < div className = 'control-pane' >
95+ < div className = 'control-section accordion-control-section' >
96+ < div className = 'product_title' > iPhone X Product Specification </ div >
97+ { /* Render the Accoridon Component */ }
98+ < AccordionComponent expandMode = 'Single' created = { created . bind ( this ) } expanding = { expand . bind ( this ) } ref = { accordion => acrdnObj = accordion } >
99+ < AccordionItemsDirective >
100+ < AccordionItemDirective header = { networkHeader } expanded = { true } />
101+ < AccordionItemDirective header = { featureheader } content = '<div id="nested_Acc"></div>' />
102+ < AccordionItemDirective header = { hardwareheader } content = { HWSW } />
103+ </ AccordionItemsDirective >
104+ </ AccordionComponent >
105+
106+
107+ < div id = "Sensor_features" style = { { display : 'none' } } >
108+ < table >
109+ < tbody > < tr >
110+ < td > Proximity sensor</ td >
111+ < td > Yes</ td >
112+ </ tr >
113+ < tr >
114+ < td > Face ID</ td >
115+ < td > Yes</ td >
116+ </ tr >
117+ < tr >
118+ < td > Accelerometer</ td >
119+ < td > Yes</ td >
120+ </ tr >
121+
122+ </ tbody > </ table >
123+ </ div >
124+ < div id = "Video_Rec_features" style = { { display : 'none' } } >
125+ < table >
126+ < tbody >
127+ < tr >
128+ < th rowSpan = { 6 } > Video Recording</ th >
129+ < td > 4K video recording</ td >
130+ </ tr >
131+ < tr >
132+ < td > 1080p & 720p HD video recording</ td >
133+ </ tr >
134+ < tr >
135+ < td > Optical zoom, 6x digital zoom</ td >
136+ </ tr >
137+ < tr >
138+ < td > Slow motion video support</ td >
139+ </ tr >
140+ < tr >
141+ < td > Take 8MP still photos while recording 4K video</ td >
142+ </ tr >
143+ < tr >
144+ < td > Noise reduction</ td >
145+ </ tr >
146+ </ tbody > </ table >
147+ </ div >
148+ < div id = "Camera_features" style = { { display : 'none' } } >
149+ < table >
150+ < tbody > < tr >
151+ < th rowSpan = { 3 } > Camera</ th >
152+ < td > 12MP wide-angle</ td >
153+ </ tr >
154+ < tr >
155+ < td > Live Photos with stabilization</ td >
156+ </ tr >
157+ < tr >
158+ < td > Body and face detection</ td >
159+ </ tr >
160+ < tr >
161+ < th rowSpan = { 4 } > TrueDepth Camera</ th >
162+ < td > 7MP camera</ td >
163+ </ tr >
164+ < tr >
165+ < td > Animoji</ td >
166+ </ tr >
167+ < tr >
168+ < td > Face detection</ td >
169+ </ tr >
170+ </ tbody > </ table >
171+ </ div >
172+ </ div >
173+ < div id = 'source_link' > Source:
174+ < a href = "https://www.apple.com/iphone-x/specs/" target = '_blank' > www.apple.com/iphone-x/specs/</ a >
175+ </ div >
176+ < div id = "action-description" >
177+ < p >
178+ This sample demonstrates rendering < code > Accordion</ code > content from external source using < code > Ajax</ code > library. The content of panel “Network & Connectivity” is loaded from external element .
179+ </ p >
180+ </ div >
181+ < div id = "description" >
182+ < p >
183+ This sample illustrates the external webpage content loaded inside the Accordion panel by using AJAX library.
184+ </ p >
185+ < p >
186+ More information about Accordion can be found in this < a target = "_blank" href = "https://ej2.syncfusion.com/react/documentation/accordion/getting-started/" >
187+ documentation</ a > section.
188+ </ p >
189+ </ div >
190+ </ div > ) ;
191+ }
192+ export default AjaxContent ;
0 commit comments