@zohodesk/react-cli 1.1.10 → 1.1.11

Sign up to get free protection for your applications and to get access to all the features.
Files changed (17) hide show
  1. package/README.md +58 -10
  2. package/bin/cli.js +1 -1
  3. package/lib/common/runPreProcess.js +19 -14
  4. package/lib/configs/webpack.css.umd.config.js +3 -2
  5. package/lib/configs/webpack.dev.config.js +3 -0
  6. package/lib/configs/webpack.docs.config.js +2 -0
  7. package/lib/configs/webpack.impact.config.js +2 -0
  8. package/lib/configs/webpack.prod.config.js +3 -0
  9. package/lib/loaderUtils/getCSSLoaders.js +3 -2
  10. package/lib/logger.js +7 -0
  11. package/lib/schemas/index.js +2 -1
  12. package/lib/utils/cssClassNameGenerate.js +38 -5
  13. package/lib/utils/getOptions.js +16 -1
  14. package/npm-shrinkwrap.json +2 -2
  15. package/package.json +1 -1
  16. package/templates/docs/css/style.css +136 -169
  17. package/templates/docs/index.html +795 -632
package/templates/docs/index.html CHANGED
@@ -5,10 +5,13 @@
5
5
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
7
  <link rel=stylesheet href="./css/style.css">
8
- <link href="https://fonts.googleapis.com/css?family=Frank+Ruhl+Libre|Lemonada|Lora|Open+Sans+Condensed:300|PT+Sans+Narrow|Slabo+27px|Source+Sans+Pro"
8
+ <link rel="stylesheet" href="https://webfonts.zoho.com/css?family=Poppins:400,600,700">
9
+ <link
10
+ href="https://fonts.googleapis.com/css?family=Frank+Ruhl+Libre|Lemonada|Lora|Open+Sans+Condensed:300|PT+Sans+Narrow|Slabo+27px|Source+Sans+Pro"
9
11
  rel="stylesheet" />
10
- <link href="https://supportclientapp.localzoho.com/support/images/support-2.ico" type="IMAGE/X-ICON" rel="SHORTCUT ICON" />
11
-
12
+ <link href="https://supportclientapp.localzoho.com/support/images/support-2.ico" type="IMAGE/X-ICON"
13
+ rel="SHORTCUT ICON" />
14
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/github-dark.min.css">
12
15
  <script src="./js/codemirror.js"></script>
13
16
  <script src="./js/javascript.js"></script>
14
17
  <script src="./js/active-line.js"></script>
@@ -18,26 +21,26 @@
18
21
  <title>Zoho Desk - React Components</title>
19
22
  <script>
20
23
 
21
- function selectText(containerid) {
22
- if (document.selection) {
23
- // IE
24
- var range = document.body.createTextRange();
25
- range.moveToElementText(document.getElementById(containerid));
26
- range.select();
27
- document.execCommand('copy');
28
- } else if (window.getSelection) {
29
- var range = document.createRange();
30
- range.selectNode(document.getElementById(containerid));
31
- window.getSelection().removeAllRanges();
32
- window.getSelection().addRange(range);
33
- document.execCommand('copy');
24
+ function selectText(containerid) {
25
+ if (document.selection) {
26
+ // IE
27
+ var range = document.body.createTextRange();
28
+ range.moveToElementText(document.getElementById(containerid));
29
+ range.select();
30
+ document.execCommand('copy');
31
+ } else if (window.getSelection) {
32
+ var range = document.createRange();
33
+ range.selectNode(document.getElementById(containerid));
34
+ window.getSelection().removeAllRanges();
35
+ window.getSelection().addRange(range);
36
+ document.execCommand('copy');
37
+ }
34
38
  }
35
- }
36
39
  </script>
37
40
  </head>
38
41
 
39
42
  <body>
40
-
43
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
41
44
  <div id="react"></div>
42
45
  <div class="iframeCentering">
43
46
  <span class="posAb">Zoho Desk - React Components</span>
@@ -46,62 +49,62 @@
46
49
 
47
50
  <script src="/docs/js/babel.min.js"></script>
48
51
  <script type="text/babel">
49
- window.loadDOC = function(Component, mdata) {
52
+ window.loadDOC = function (Component, mdata) {
50
53
  window.RTLmode = false;
51
54
  var ReactDOM = Component.ReactDOM;
52
55
  window.React = Component.React;
53
56
  window.ReactDOM = Component.ReactDOM;
54
- var React= Component.React;
57
+ var React = Component.React;
55
58
  class Doc extends React.Component {
56
59
  constructor(props) {
57
60
  super(props);
58
- let folderNameDefault='';
59
- let groupNameDefault='';
60
- (location.hash && props.componentObj )? Object.keys(props.componentObj).map((flName)=>{
61
- let fname=props.componentObj[flName]
62
- Object.keys(fname).map((grName)=>{
63
- if((fname[grName].indexOf(location.hash.substring(1)) > -1)){
64
- folderNameDefault=flName;
65
- groupNameDefault=grName;
61
+ let folderNameDefault = '';
62
+ let groupNameDefault = '';
63
+ (location.hash && props.componentObj) ? Object.keys(props.componentObj).map((flName) => {
64
+ let fname = props.componentObj[flName]
65
+ Object.keys(fname).map((grName) => {
66
+ if ((fname[grName].indexOf(location.hash.substring(1)) > -1)) {
67
+ folderNameDefault = flName;
68
+ groupNameDefault = grName;
66
69
  }
67
70
  })
68
- }):null
69
- if(folderNameDefault== '' && groupNameDefault==''){
70
- folderNameDefault='Global'
71
- groupNameDefault='General'
71
+ }) : null
72
+ if (folderNameDefault == '' && groupNameDefault == '') {
73
+ folderNameDefault = 'Global'
74
+ groupNameDefault = 'General'
72
75
  }
73
76
  this.state = {
74
- componentObj:props.componentObj,
75
- duplicates:props.duplicates,
77
+ componentObj: props.componentObj,
78
+ duplicates: props.duplicates,
76
79
  search: '',
77
80
  selectedComponent: location.hash,
78
81
  Components: Component,
79
82
  //popUp: '',
80
83
  fullScreenSrc: '',
81
- viewGroup:groupNameDefault,
82
- viewFolder:folderNameDefault,
83
- moreInform:false,
84
- infoTab:'component',
85
- changeset:null,
86
- version:'',
87
- frameWidth:'100%',
88
- isMenuClose:false,
89
- isRTL:false,
90
- isRem:true,
91
- isRemOpen:false,
92
- rootSize:16,
93
- pixelSize:16,
94
- resultRem:'1rem',
95
- responsiveMenu:false,
96
- device:'LAPTOP_M',
97
- compList:'Unused',
98
- windowSize:{height:0,width:0},
99
- isEditMode:false
84
+ viewGroup: groupNameDefault,
85
+ viewFolder: folderNameDefault,
86
+ moreInform: false,
87
+ infoTab: 'component',
88
+ changeset: null,
89
+ version: '',
90
+ frameWidth: '100%',
91
+ isMenuClose: false,
92
+ isRTL: false,
93
+ isRem: true,
94
+ isRemOpen: false,
95
+ rootSize: 16,
96
+ pixelSize: 16,
97
+ resultRem: '1rem',
98
+ responsiveMenu: false,
99
+ device: 'LAPTOP_M',
100
+ compList: 'Unused',
101
+ windowSize: { height: 0, width: 0 },
102
+ isEditMode: false
100
103
 
101
104
  };
102
105
  this.search = this.search.bind(this);
103
106
  this.clear = this.clear.bind(this);
104
- this.toggleRemContainer = this.toggleRemContainer.bind(this);
107
+ // this.toggleRemContainer = this.toggleRemContainer.bind(this);
105
108
  this.hashChange = this.hashChange.bind(this);
106
109
  //this.popupToggle = this.popupToggle.bind(this);
107
110
  //this.popupToggleDoc = this.popupToggleDoc.bind(this);
@@ -115,143 +118,144 @@
115
118
  this.getFileDetails = this.getFileDetails.bind(this);
116
119
  this.iframeSize = this.iframeSize.bind(this);
117
120
  this.menuOpen = this.menuOpen.bind(this);
118
- this.onRtlView=this.onRtlView.bind(this);
119
- this.onREMView=this.onREMView.bind(this);
120
- this.toggleEditMode=this.toggleEditMode.bind(this);
121
- this.calculatePxToRem=this.calculatePxToRem.bind(this);
122
- this.calculateRemToPx=this.calculateRemToPx.bind(this);
123
- this.onChangeRem=this.onChangeRem.bind(this);
124
- this.onChangePixel=this.onChangePixel.bind(this);
125
- this.onChangeBase=this.onChangeBase.bind(this);
126
- this.responseMenu=this.responseMenu.bind(this);
127
- this.getWindow=this.getWindow.bind(this);
128
- this.fullView=this.fullView.bind(this);
129
- this.handleURL=this.handleURL.bind(this);
130
- this.compList=this.compList.bind(this);
131
- this.unusedList=this.unusedList.bind(this);
121
+ this.onRtlView = this.onRtlView.bind(this);
122
+ this.onREMView = this.onREMView.bind(this);
123
+ this.toggleEditMode = this.toggleEditMode.bind(this);
124
+ // this.calculatePxToRem = this.calculatePxToRem.bind(this);
125
+ // this.calculateRemToPx = this.calculateRemToPx.bind(this);
126
+ // this.onChangeRem = this.onChangeRem.bind(this);
127
+ // this.onChangePixel = this.onChangePixel.bind(this);
128
+ // this.onChangeBase = this.onChangeBase.bind(this);
129
+ this.responseMenu = this.responseMenu.bind(this);
130
+ this.getWindow = this.getWindow.bind(this);
131
+ this.fullView = this.fullView.bind(this);
132
+ this.handleURL = this.handleURL.bind(this);
133
+ this.compList = this.compList.bind(this);
134
+ this.unusedList = this.unusedList.bind(this);
135
+ this.getHookType = this.getHookType.bind(this);
132
136
  }
133
137
 
134
- fullView(){
135
- this.setState({isMenuClose:!this.state.isMenuClose})
138
+ fullView() {
139
+ this.setState({ isMenuClose: !this.state.isMenuClose })
136
140
  }
137
- toggleEditMode(){
138
- var iframe=document.getElementById('componentIframe');
139
- if(iframe){
140
- var currentMode=iframe.contentDocument.documentElement.getAttribute('contenteditable');
141
- if(currentMode=="true")
142
- {
143
- iframe.contentDocument.documentElement.setAttribute('contenteditable',"false");
144
- this.setState({isEditMode:false});
141
+ toggleEditMode() {
142
+ var iframe = document.getElementById('componentIframe');
143
+ if (iframe) {
144
+ var currentMode = iframe.contentDocument.documentElement.getAttribute('contenteditable');
145
+ if (currentMode == "true") {
146
+ iframe.contentDocument.documentElement.setAttribute('contenteditable', "false");
147
+ this.setState({ isEditMode: false });
145
148
  }
146
149
  else {
147
- iframe.contentDocument.documentElement.setAttribute('contenteditable',"true");
148
- this.setState({isEditMode:true});
149
- }}
150
+ iframe.contentDocument.documentElement.setAttribute('contenteditable', "true");
151
+ this.setState({ isEditMode: true });
152
+ }
153
+ }
150
154
 
151
155
  }
152
156
 
153
- compList(e){
154
- if(e == this.state.compList){
157
+ compList(e) {
158
+ if (e == this.state.compList) {
155
159
  }
156
- else if(e !== this.state.compList){
157
- this.setState({compList:e})
160
+ else if (e !== this.state.compList) {
161
+ this.setState({ compList: e })
158
162
  }
159
- else{
160
- this.setState({compList:''})
163
+ else {
164
+ this.setState({ compList: '' })
161
165
  }
162
166
  }
163
167
 
164
- getWindow(){
165
- var iframe=document.getElementById('componentIframe')
166
- if(iframe){
167
- this.setState({windowSize:{height:iframe.offsetHeight,width:iframe.offsetWidth}})
168
+ getWindow() {
169
+ var iframe = document.getElementById('componentIframe')
170
+ if (iframe) {
171
+ this.setState({ windowSize: { height: iframe.offsetHeight, width: iframe.offsetWidth } })
168
172
  }
169
173
  }
170
174
 
171
- responseMenu(){
172
- this.setState({ responsiveMenu:!this.state.responsiveMenu})
175
+ responseMenu() {
176
+ this.setState({ responsiveMenu: !this.state.responsiveMenu })
173
177
  }
174
178
 
175
- toggleRemContainer(){
176
- this.setState({ isRemOpen: !this.state.isRemOpen });
177
- }
179
+ // toggleRemContainer() {
180
+ // this.setState({ isRemOpen: !this.state.isRemOpen });
181
+ // }
178
182
 
179
- calculatePxToRem(){
180
- let result=Number((this.state.pixelSize/this.state.rootSize).toFixed(4));
181
- this.setState({resultRem:result+"rem"});
182
- }
183
+ // calculatePxToRem() {
184
+ // let result = Number((this.state.pixelSize / this.state.rootSize).toFixed(4));
185
+ // this.setState({ resultRem: result + "rem" });
186
+ // }
183
187
 
184
- calculateRemToPx(){
185
- let result=Number(((Number(parseFloat(this.state.resultRem))*this.state.rootSize).toFixed(4)));
186
- this.setState({pixelSize:result});
187
- }
188
+ // calculateRemToPx() {
189
+ // let result = Number(((Number(parseFloat(this.state.resultRem)) * this.state.rootSize).toFixed(4)));
190
+ // this.setState({ pixelSize: result });
191
+ // }
188
192
 
189
- onChangeBase(e) {
190
- let result=Number((this.state.pixelSize/e.target.value ).toFixed(4));
191
- this.setState({ rootSize: e.target.value,resultRem:result+"rem" });
192
- }
193
+ // onChangeBase(e) {
194
+ // let result = Number((this.state.pixelSize / e.target.value).toFixed(4));
195
+ // this.setState({ rootSize: e.target.value, resultRem: result + "rem" });
196
+ // }
193
197
 
194
- onChangePixel(e) {
195
- let result=Number((e.target.value/this.state.rootSize).toFixed(4));
196
- this.setState({ pixelSize: e.target.value ,resultRem:result+"rem" });
197
- }
198
+ // onChangePixel(e) {
199
+ // let result = Number((e.target.value / this.state.rootSize).toFixed(4));
200
+ // this.setState({ pixelSize: e.target.value, resultRem: result + "rem" });
201
+ // }
198
202
 
199
- onChangeRem(e) {
200
- let result=Number(((Number(parseFloat(e.target.value))*this.state.rootSize).toFixed(4)));
201
- this.setState({ resultRem: e.target.value,pixelSize:result});
202
- }
203
+ // onChangeRem(e) {
204
+ // let result = Number(((Number(parseFloat(e.target.value)) * this.state.rootSize).toFixed(4)));
205
+ // this.setState({ resultRem: e.target.value, pixelSize: result });
206
+ // }
203
207
 
204
- toggleFolder(name,e){
208
+ toggleFolder(name, e) {
205
209
  let { viewFolder } = this.state;
206
- if(name == viewFolder){
207
- name =''
210
+ if (name == viewFolder) {
211
+ name = ''
208
212
  }
209
- this.setState({ viewFolder: name });
213
+ this.setState({ viewFolder: name });
210
214
  }
211
215
  hashChange() {
212
216
  let ele = document.getElementById('componentIframe')
213
- if(ele){
217
+ if (ele) {
214
218
  var src = document.getElementById('componentIframe').src;
215
219
  var url = src && src.split('#')[0];
216
220
  document.getElementById('componentIframe').src = url + location.hash;
217
221
  }
218
- this.setState({ selectedComponent: location.hash, infoTab:'component' });
222
+ this.setState({ selectedComponent: location.hash, infoTab: 'component' });
219
223
  }
220
224
  toggleGroup(name) {
221
- let element=name;
225
+ let element = name;
222
226
  let { viewGroup } = this.state;
223
- if(name == viewGroup){
224
- name =''
227
+ if (name == viewGroup) {
228
+ name = ''
225
229
  }
226
- this.setState({ viewGroup: name });
230
+ this.setState({ viewGroup: name });
227
231
  }
228
232
 
229
233
  componentDidMount() {
230
234
  window.addEventListener('hashchange', this.hashChange);
231
235
  onLoader()
232
- let iframeEle=document.getElementById('componentIframe')
233
- iframeEle.contentWindow.addEventListener('resize',this.getWindow)
236
+ let iframeEle = document.getElementById('componentIframe')
237
+ iframeEle.contentWindow.addEventListener('resize', this.getWindow)
234
238
  this.getWindow()
235
- let index=document.getElementsByClassName('iframeCentering')
236
- index ?index[0].style.display='none':null
237
- if(!this.state.selectedComponent){
238
- this.setState({infoTab:'dashboard'})
239
+ let index = document.getElementsByClassName('iframeCentering')
240
+ index ? index[0].style.display = 'none' : null
241
+ if (!this.state.selectedComponent) {
242
+ this.setState({ infoTab: 'dashboard' })
239
243
  }
240
244
  //document.addEventListener('click', this.popupToggleDoc);
241
- fetch('/cli/version').then((res)=>{return res.json()}).then((response)=>{
242
- (response && response.version) ? this.setState({version : response.version }) : this.setState({version : "version get failure" })
243
- }).catch(function(err) {
244
- this.setState({changeset : "Error accured" })
245
+ fetch('/cli/version').then((res) => { return res.json() }).then((response) => {
246
+ (response && response.version) ? this.setState({ version: response.version }) : this.setState({ version: "version get failure" })
247
+ }).catch(function (err) {
248
+ this.setState({ changeset: "Error accured" })
245
249
  });
246
250
  }
247
251
 
248
- codeview(){
252
+ codeview() {
249
253
 
250
254
  let compName = location.hash != '' ? location.hash.substring(1) : null;
251
255
  let element = document.getElementById('codeView')
252
- if (componentList[compName] && typeof CodeMirror !== 'undefined' && element ) {
253
- CodeMirror(element, {
254
- value:'',
256
+ if (componentList[compName] && typeof CodeMirror !== 'undefined' && element) {
257
+ CodeMirror(element, {
258
+ value: '',
255
259
  lineNumbers: false,
256
260
  styleActiveLine: false,
257
261
  matchBrackets: false,
@@ -262,11 +266,11 @@
262
266
  }
263
267
 
264
268
  componentWillUnmount() {
265
- let iframe=document.getElementById('componentIframe');
269
+ let iframe = document.getElementById('componentIframe');
266
270
  //document.removeEventListener('click', this.popupToggleDoc);
267
- iframe.contentWindow.removeEventListener('resize',this.getWindow)
271
+ iframe.contentWindow.removeEventListener('resize', this.getWindow)
268
272
  window.removeEventListener('hashchange', this.hashChange);
269
- window.removeEventListener('error',this.reloadFrame);
273
+ window.removeEventListener('error', this.reloadFrame);
270
274
  }
271
275
 
272
276
  search(e) {
@@ -302,73 +306,73 @@
302
306
  // item => item.toUpperCase().indexOf(str.toUpperCase()) != -1
303
307
  // );
304
308
 
305
- return list.filter((item)=>{
306
- let value = item.split('__')[0]
309
+ return list.filter((item) => {
310
+ let value = item.split('__')[0]
307
311
 
308
- return value.toUpperCase().indexOf(str.toUpperCase()) != -1
312
+ return value.toUpperCase().indexOf(str.toUpperCase()) != -1
309
313
  })
310
314
  }
311
315
 
312
- onTabinfo(name){
313
- this.setState({infoTab:name})
316
+ onTabinfo(name) {
317
+ this.setState({ infoTab: name })
314
318
  }
315
319
 
316
- reloadFrame(){
320
+ reloadFrame() {
317
321
  let iframeEle = document.getElementById('componentIframe');
318
322
  //this.getWindow()
319
323
  iframeEle.contentDocument.location.reload()
320
- parent.document.getElementById("loadingText").style.display= 'block'
324
+ parent.document.getElementById("loadingText").style.display = 'block'
321
325
  }
322
326
 
323
- getFileDetails(){
327
+ getFileDetails() {
324
328
  this.onTabinfo('changeset')
325
- let compName = location.hash != '' ? location.hash.substring(1) : null;
326
- let compNameSub= window.componentList?window.componentList[compName].docs.filePath :Component[compName].docs.filePath || ''
327
- let name = compNameSub ? compNameSub.split('__')[0] : '';
328
- let propComName = name.replace("docs","/").split('/')[0]+name.split("docs")[1]
329
- fetch('/author/get?componentName='+propComName+'.js').then((res)=>{return res.json()}).then((response)=>{
330
- (response && response.stdout) ? this.setState({changeset : response.stdout }) : this.setState({changeset : "response is empty" })
331
- }).catch(function(err) {
332
- this.setState({changeset : "Error accured" })
329
+ let compName = location.hash != '' ? location.hash.substring(1) : null;
330
+ let compNameSub = window.componentList ? window.componentList[compName].docs.filePath : Component[compName].docs.filePath || ''
331
+ let name = compNameSub ? compNameSub.split('__')[0] : '';
332
+ let propComName = name.replace("docs", "/").split('/')[0] + name.split("docs")[1]
333
+ fetch('/author/get?componentName=' + propComName + '.js').then((res) => { return res.json() }).then((response) => {
334
+ (response && response.stdout) ? this.setState({ changeset: response.stdout }) : this.setState({ changeset: "response is empty" })
335
+ }).catch(function (err) {
336
+ this.setState({ changeset: "Error accured" })
333
337
  });
334
338
  }
335
339
 
336
340
  iframeSize() {
337
- let slider=document.getElementById('myRange')
341
+ let slider = document.getElementById('myRange')
338
342
  let iframe = document.getElementById('componentIframe');
339
- let value=slider.value;
340
- let borderSize=30;
341
- let sizes={
342
- '1':{device:'MOBILE_XS',frameWidth:320+borderSize},
343
- '2':{device:'MOBILE_S',frameWidth:360+borderSize},
344
- '3':{device:'MOBILE_M',frameWidth:375.04+borderSize},
345
- '4':{device:'MOBILE',frameWidth:480+borderSize},
346
- '5':{device:'TABLET_S',frameWidth:640+borderSize},
347
- '6':{device:'TABLET_M',frameWidth:720+borderSize},
348
- '7':{device:'TABLET',frameWidth:768+borderSize},
349
- '8':{device:'LAPTOP_S',frameWidth:1024+borderSize},
350
- '9':{device:'LAPTOP_M',frameWidth:1280+borderSize},
351
- '10':{device:'LAPTOP',frameWidth:1440+borderSize},
352
- '11':{device:'MONITOR_M',frameWidth:1600+borderSize},
353
- '12':{device:'MONITOR',frameWidth:1920+borderSize}
343
+ let value = slider.value;
344
+ let borderSize = 30;
345
+ let sizes = {
346
+ '1': { device: 'MOBILE_XS', frameWidth: 320 + borderSize },
347
+ '2': { device: 'MOBILE_S', frameWidth: 360 + borderSize },
348
+ '3': { device: 'MOBILE_M', frameWidth: 375.04 + borderSize },
349
+ '4': { device: 'MOBILE', frameWidth: 480 + borderSize },
350
+ '5': { device: 'TABLET_S', frameWidth: 640 + borderSize },
351
+ '6': { device: 'TABLET_M', frameWidth: 720 + borderSize },
352
+ '7': { device: 'TABLET', frameWidth: 768 + borderSize },
353
+ '8': { device: 'LAPTOP_S', frameWidth: 1024 + borderSize },
354
+ '9': { device: 'LAPTOP_M', frameWidth: 1280 + borderSize },
355
+ '10': { device: 'LAPTOP', frameWidth: 1440 + borderSize },
356
+ '11': { device: 'MONITOR_M', frameWidth: 1600 + borderSize },
357
+ '12': { device: 'MONITOR', frameWidth: 1920 + borderSize }
354
358
  }
355
359
  this.setState(sizes[value]);
356
360
  this.getWindow()
357
361
  }
358
362
 
359
363
  menuOpen() {
360
- this.setState({isMenuClose:!this.state.isMenuClose})
364
+ this.setState({ isMenuClose: !this.state.isMenuClose })
361
365
  }
362
366
 
363
367
  onRtlView(e) {
364
368
  let iframeEle = document.getElementById('componentIframe');
365
369
  let ele = e.target.element || null
366
370
  if (!this.state.isRTL) {
367
- this.setState({isRTL:true})
371
+ this.setState({ isRTL: true })
368
372
  window.RTLmode = true;
369
373
  iframeEle.contentDocument.documentElement.setAttribute('dir', 'rtl');
370
374
  } else {
371
- this.setState({isRTL:false})
375
+ this.setState({ isRTL: false })
372
376
  iframeEle.contentDocument.documentElement.setAttribute('dir', 'ltr');
373
377
  window.RTLmode = false;
374
378
  }
@@ -378,29 +382,50 @@
378
382
  let iframeEle = document.getElementById('componentIframe');
379
383
  let ele = e.target.element || null
380
384
  if (!this.state.isRem) {
381
- this.setState({isRem:true})
385
+ this.setState({ isRem: true })
382
386
  iframeEle.contentDocument.documentElement.classList.add('isRem');
383
387
  } else {
384
- this.setState({isRem:false})
388
+ this.setState({ isRem: false })
385
389
  iframeEle.contentDocument.documentElement.classList.remove('isRem');
386
390
  }
387
391
  }
388
392
 
389
393
 
390
- handleURL(){
391
- this.setState({viewFolder:'General',viewGroup:'Global',infoTab:'dashboard'})
394
+ handleURL() {
395
+ this.setState({ viewFolder: 'General', viewGroup: 'Global', infoTab: 'dashboard' })
392
396
  window.history.pushState("", "", '/docs/');
393
397
  }
394
398
 
395
- unusedList(mdata){
396
- let dbList=[];
397
- Object.keys(mdata).map((item,i)=>{
398
- if(mdata[item].references.length<=0 && mdata[item].referencedby.length<=0){
399
+ unusedList(mdata) {
400
+ let dbList = [];
401
+ Object.keys(mdata).map((item, i) => {
402
+ if (mdata[item].references.length <= 0 && mdata[item].referencedby.length <= 0) {
399
403
  return dbList.push(item);
400
404
  }
401
405
  })
402
406
  return dbList
403
407
  }
408
+ getHookType(propInfo, value) {
409
+ if (propInfo[value]) {
410
+ if (propInfo[value].hookType) {
411
+ let hookType = propInfo[value].hookType;
412
+
413
+ if (hookType.includes("union")) {
414
+ hookType = hookType.replace("union", 'oneOfType ');
415
+ }
416
+
417
+ if (hookType.includes("enum")) {
418
+ hookType = hookType.replace("enum", "oneOf ");
419
+ }
420
+
421
+ return hookType;
422
+ } else {
423
+ return '';
424
+ }
425
+ } else {
426
+ return '';
427
+ }
428
+ }
404
429
 
405
430
  render() {
406
431
  const {
@@ -426,41 +451,45 @@
426
451
  duplicates,
427
452
  isEditMode
428
453
  } = this.state;/* Components & componentObj no need in the state access in props itself*/
429
- let devices=[{device:'MOBILE',sizes:['XS','S','M','D']},{device:'TABLET',sizes:['S','M','D']},{device:'LAPTOP',sizes:[,'S','M','D']},{device:'MONITOR',sizes:['M','D']}]
430
- let compValue='compValue';
431
- let reactCliVersion =version.split(' ').filter(function(el){return el.toLowerCase().indexOf("fz-react-cli@") > -1;});
432
- let versionFz = reactCliVersion.length?reactCliVersion[0].substring(reactCliVersion[0].indexOf('@')+1,reactCliVersion[0].length) : '';
433
- let compName =location.hash != '' ? location.hash.substring(1) : null;
434
- let propComName = compName ? compName.split('__')[0] : '';
435
- let propsObj = window.componentList && window.componentList[propComName] &&
436
- window.componentList[propComName].propTypes ||
437
- (Components &&
438
- Components[propComName] &&
439
- Components[propComName].propTypes) ||
440
- {};
441
- let currentCompProps = Object.keys(propsObj) || [];
442
- let currentCompPropsDescription = window.componentList && window.componentList[propComName] && window.componentList[propComName].propsDescription || (Components[propComName] && Components[propComName].propsDescription) || {};
443
- let currentCompDefault = Window.componentList && window.componentList[propComName] && window.componentList[propComName].defaultProps || (Components[propComName] && Components[propComName].defaultProps) || {};
444
- let componentsObj=componentObj && this.filter(Object.keys(componentObj),'').map((item,i)=>{
445
- return ({key:item,value:componentObj[item],length:Object.keys(componentObj[item]).length})
454
+ let devices = [{ device: 'MOBILE', sizes: ['XS', 'S', 'M', 'D'] }, { device: 'TABLET', sizes: ['S', 'M', 'D'] }, { device: 'LAPTOP', sizes: [, 'S', 'M', 'D'] }, { device: 'MONITOR', sizes: ['M', 'D'] }]
455
+ let compValue = 'compValue';
456
+ let reactCliVersion = version.split(' ').filter(function (el) { return el.toLowerCase().indexOf("fz-react-cli@") > -1; });
457
+ //let versionFz = reactCliVersion.length ? reactCliVersion[0].substring(reactCliVersion[0].indexOf('@') + 1, reactCliVersion[0].length) : '';
458
+ let compName = location.hash != '' ? location.hash.substring(1) : null;
459
+ let propComName = compName;
460
+
461
+ let propsObj = Window.componentList && window.componentList[propComName] && window.componentList[propComName].docs.propTypes || (Components[propComName] && Components[propComName].docs.propTypes) || {};
462
+ let currentCompProps = propsObj;
463
+ let defaultProps = Window.componentList && window.componentList[propComName] && window.componentList[propComName].docs.defaultProps || (Components[propComName] && Components[propComName].docs.defaultProps) || {};
464
+ let currentCompPropsDescription = window.componentList && window.componentList[propComName] && window.componentList[propComName].docs.propsDescription || (Components[propComName] && Components[propComName].docs.propsDescription) || {};
465
+ let currentCompDefault = Window.componentList && window.componentList[propComName] && window.componentList[propComName].docs.defaultProps || (Components[propComName] && Components[propComName].docs.defaultProps) || {};
466
+ let componentsObj = componentObj && this.filter(Object.keys(componentObj), '').map((item, i) => {
467
+ return ({ key: item, value: componentObj[item], length: Object.keys(componentObj[item]).length })
446
468
  })
447
- let compObjList=componentsObj
469
+ let compObjList = componentsObj
448
470
 
449
- let dashboardList=[
450
- this.unusedList(mdata) &&{name:'Unused',componentList:this.unusedList(mdata)},
451
- duplicates && {name:'Duplicates',componentList:duplicates}
471
+ let dashboardList = [
472
+ this.unusedList(mdata) && { name: 'Unused', componentList: this.unusedList(mdata) },
473
+ duplicates && { name: 'Duplicates', componentList: duplicates }
452
474
  ]
453
-
475
+ let defaultPropsArray = []
476
+ let currentDefaultPropsArray = []
477
+ defaultProps.length && defaultProps.forEach((value) => {
478
+ currentDefaultPropsArray.push(value)
479
+ })
480
+ let _propTypesToDefaultPropsArray = []
481
+ let propsDesArray = []
482
+ let _propTypesToPropsDesArray = []
454
483
  return (
455
484
  <main className="dflex flexrow">
456
- <div className="showToggleLeft" onClick={this.menuOpen}>
485
+ <div className="showToggleLeft" onClick={this.menuOpen}>
457
486
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGOSURBVGhD7ZrBKkVBHIdPSNKV5A3YKSvvYG/BE0jI3tbGxsYGdTeeQnY8gcLOTigba1KE73ewOGUxc8/8/2fUfPXVndOd23ydM92ae6sIeniIT/iZgW94hYsYxTH+9YFd+4pzGMQIvqAmzepCBgzhESpmRxdCmERNuKtH+bCBWpeCgighxpSQEmJECSkhRpSQkJBRvMFTHNcFQ0xDxvAW9f5ztIwxf7Rm8B6tY1z2iEeM22a3jnELEZYxriHCKsY9RFjERIfo4OECT+rR4KSOiQ5JScqYRsgULji7jM/YNqYR8vAz6NIz1KlILI2QfdTz762Ol7SID1zFQeh0j4gtVECbCBEdMox6tufrUTtSRYjokBTfIyJlhOgkJHWEcA+xiBCuIVYRwi3EMkK4hFhHCPMQjwhhGjKN72gdIczvyDYufb80xW2zW1NCSogRJaSEGFFC/n3IBGrCYz3Kh03Uug7qUSC/x0Z7uJaB63iNWpPuTDArqP9IaWJOXqJ+JYtCJym72M9A7QvdFSKq6gtlqbpowcg25wAAAABJRU5ErkJggg==" />
458
487
  </div>
459
488
 
460
- <div className={"menuBar "+(isMenuClose?"isMenuClose":"isMenuOpen")}>
489
+ <div className={"menuBar " + (isMenuClose ? "isMenuClose" : "isMenuOpen")}>
461
490
  <div className="dflex flexcolumn">
462
491
  <div className="flexshrink logoPart dflex">
463
- <img src="./css/desklogo.png" />
492
+ <img src="./css/desklogo.png" />
464
493
  <div className={'home'} onClick={this.handleURL}>
465
494
  <span className='homeIcon'>
466
495
  <svg className='svg'>
@@ -469,7 +498,7 @@
469
498
  </span>
470
499
  </div>
471
500
  </div>
472
- <div className="flexgrow flexbasis sliderContainer">
501
+ <div className="flexgrow flexbasis sliderContainer">
473
502
  <div className="dflex flexcolumn">
474
503
  <div className="flexshrink searchPart">
475
504
  <Search onChange={this.search} value={search} onClear={this.clear} />
@@ -477,13 +506,13 @@
477
506
  <menu className="flexgrow flexbasis scrollY menuContainer" id="leftPanel">
478
507
  {
479
508
  compObjList && Object.keys(compObjList).length && compObjList.map(comp => {
480
- let folderName=comp.key
481
- let folderCompCount=0;
482
- let sortList=this.filter(Object.keys(componentObj[folderName]),'').map(grpName=>{
483
- return({
484
- fName:grpName,
485
- components:componentObj[folderName][grpName],
486
- length:(componentObj[folderName][grpName].filter(function(el) {return el.toLowerCase().indexOf('__') > -1}).length)
509
+ let folderName = comp.key
510
+ let folderCompCount = 0;
511
+ let sortList = this.filter(Object.keys(componentObj[folderName]), '').map(grpName => {
512
+ return ({
513
+ fName: grpName,
514
+ components: componentObj[folderName][grpName],
515
+ length: (componentObj[folderName][grpName].filter(function (el) { return el.toLowerCase().indexOf('__') > -1 }).length)
487
516
  })
488
517
  })
489
518
 
@@ -493,9 +522,9 @@
493
522
  componentObj[folderName][grn],
494
523
  search
495
524
  );
496
- if(searchList.length){
497
- folderCompCount=folderCompCount+1;
498
- }
525
+ if (searchList.length) {
526
+ folderCompCount = folderCompCount + 1;
527
+ }
499
528
  return searchList.length ? true : false;
500
529
  }
501
530
  );
@@ -507,7 +536,7 @@
507
536
  this,
508
537
  folderName
509
538
  )}
510
- className={'mainMenu dflex flexrow alignVertical offSelection'+' '+
539
+ className={'mainMenu dflex flexrow alignVertical offSelection' + ' ' +
511
540
  (viewFolder == folderName
512
541
  ? 'mainMenuActive'
513
542
  : '')
@@ -529,8 +558,8 @@
529
558
  }
530
559
  >
531
560
  {
532
- sortList.map((grpName)=>{
533
- return(
561
+ sortList.map((grpName) => {
562
+ return (
534
563
  <ComponentList
535
564
  type={grpName.fName}
536
565
  components={this.filter(
@@ -540,7 +569,7 @@
540
569
  selectedComponent={selectedComponent}
541
570
  toggleGroup={this.toggleGroup}
542
571
  viewGroup={
543
- search ? grpName.fName : viewGroup
572
+ search ? grpName.fName : viewGroup
544
573
  }
545
574
  />)
546
575
  })
@@ -555,17 +584,18 @@
555
584
  }
556
585
  </menu>
557
586
  {
558
- versionFz!=''&&
559
- <div className="flexshrink versionPart ">
560
- <span>Version {versionFz}</span>
561
- </div>
587
+ // versionFz != '' &&
588
+ // <div className="flexshrink versionPart ">
589
+ // <span>Version {versionFz}</span>
590
+ // </div>
562
591
  }
563
- <div className="flexshrink tools" onClick={this.toggleRemContainer}>
592
+ {/*<div className="flexshrink tools" onClick={this.toggleRemContainer}>
564
593
  <img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDE3NC4yNDggMTc0LjI0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTc0LjI0OCAxNzQuMjQ4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxnPgoJPHBhdGggZD0iTTE3My4xNDUsNzMuOTFjLTAuNDEzLTIuNzIyLTIuMjktNC45OTMtNC44ODEtNS45MTJsLTEzLjcyNy00Ljg4MWMtMC44MTItMi4zLTEuNzMzLTQuNTM2LTIuNzU0LTYuNjk5bDYuMjQ3LTEzLjE0NiAgIGMxLjE3OS0yLjQ3OSwwLjg5OS01LjQxMS0wLjcyOS03LjYyOGMtNS4yNjUtNy4xNjEtMTEuNTU2LTEzLjQ1Mi0xOC42OTgtMTguNjkzYy0yLjIxOS0xLjYyOS01LjE0MS0xLjkwNi03LjYyNS0wLjcyNCAgIGwtMTMuMTM4LDYuMjQyYy0yLjE2My0xLjAyMS00LjQwMi0xLjk0LTYuNzA0LTIuNzUybC00Ljg4My0xMy43MjljLTAuOTE5LTIuNTg2LTMuMTg0LTQuNDU4LTUuOS00Ljg3NiAgIGMtOS42NS0xLjQ4My0xNi43OTItMS40ODMtMjYuNDU3LDBjLTIuNzEzLDAuNDE4LTQuOTgxLDIuMjktNS45LDQuODc2bC00Ljg4MywxMy43MjljLTIuMzAyLDAuODEyLTQuNTQxLDEuNzMxLTYuNzAyLDIuNzUyICAgbC0xMy4xNDMtNi4yNDJjLTIuNDc5LTEuMTgxLTUuNDA2LTAuOTA0LTcuNjIzLDAuNzI0Yy03LjE0Miw1LjI0MS0xMy40MzMsMTEuNTMyLTE4LjY5OCwxOC42OTMgICBjLTEuNjI5LDIuMjE3LTEuOTA4LDUuMTQ4LTAuNzI5LDcuNjI4bDYuMjQ3LDEzLjE0NmMtMS4wMjEsMi4xNTktMS45NCw0LjQtMi43NTQsNi42OTlMNS45ODIsNjguMDAzICAgYy0yLjU4OSwwLjkxOS00LjQ2MywzLjE4OS00Ljg3OSw1LjkwN2MtMC43NDksNC45Mi0xLjA5OSw5LjExNS0xLjA5OSwxMy4yMTljMCw0LjA5OCwwLjM1LDguMjk5LDEuMDk5LDEzLjIxOSAgIGMwLjQxMywyLjcyMiwyLjI5LDQuOTkzLDQuODgxLDUuOTEybDEzLjcyNyw0Ljg4MWMwLjgxNCwyLjMwNCwxLjczNiw0LjU0MSwyLjc1NCw2LjcwNGwtNi4yNDcsMTMuMTQxICAgYy0xLjE3OSwyLjQ3OS0wLjg5OSw1LjQxMSwwLjcyNyw3LjYyM2M1LjI1OCw3LjE1NiwxMS41NDksMTMuNDQ3LDE4LjcsMTguNjk4YzIuMjE3LDEuNjI5LDUuMTQ0LDEuOTExLDcuNjI1LDAuNzI0bDEzLjEzOC02LjI0MiAgIGMyLjE2MywxLjAyMSw0LjQwMiwxLjk0LDYuNzA0LDIuNzUybDQuODgzLDEzLjcyOWMwLjkxOSwyLjU4NiwzLjE4NCw0LjQ1OCw1LjksNC44NzZjNC44MjgsMC43NDQsOS4xNTQsMS4xMDQsMTMuMjI4LDEuMTA0ICAgYzQuMDc0LDAsOC40MDEtMC4zNiwxMy4yMjgtMS4xMDRjMi43MTUtMC40MTgsNC45ODEtMi4yOSw1LjktNC44NzZsNC44ODMtMTMuNzI5YzIuMzAyLTAuODEyLDQuNTQxLTEuNzMxLDYuNzA0LTIuNzUyICAgbDEzLjEzOCw2LjI0MmMyLjQ4NCwxLjE4Niw1LjQxMSwwLjkwNCw3LjYyOC0wLjcyNGM3LjE1OS01LjI2LDEzLjQ1LTExLjU1MSwxOC42OTgtMTguNjk4YzEuNjI2LTIuMjEyLDEuOTA2LTUuMTQ0LDAuNzI3LTcuNjIzICAgbC02LjI0Ny0xMy4xNDFjMS4wMjEtMi4xNjMsMS45NDItNC40MDUsMi43NTQtNi43MDRsMTMuNzI3LTQuODgxYzIuNTkxLTAuOTE5LDQuNDY4LTMuMTg5LDQuODgxLTUuOTEyICAgYzAuNzQ5LTQuOTIsMS4wOTktOS4xMiwxLjA5OS0xMy4yMTlTMTczLjg5NCw3OC44MjksMTczLjE0NSw3My45MXogTTE1OC45NDksOTMuNzJsLTEyLjg3OCw0LjU4ICAgYy0yLjI1MSwwLjc5Ny0zLjk4MiwyLjYyNS00LjY2LDQuOTJjLTEuMTUsMy44ODktMi42NjQsNy41NjktNC41MDQsMTAuOTQzYy0xLjE0MiwyLjEtMS4yMTMsNC42MTktMC4xODcsNi43NzdsNS44NDEsMTIuMjg1ICAgYy0yLjgyMiwzLjM4OS01Ljk0Myw2LjUxNS05LjMzNyw5LjMzNGwtMTIuMjgzLTUuODM0Yy0yLjE2MS0xLjAzNi00LjY3Mi0wLjk1My02Ljc3NSwwLjE4NWMtMy4zNzksMS44MzgtNy4wNjEsMy4zNS0xMC45NTMsNC41MDIgICBjLTIuMjksMC42NzYtNC4xMTgsMi40MDYtNC45MTcsNC42NTdsLTQuNTgyLDEyLjg4M2MtNC42NzcsMC40NzYtOC41MDMsMC40NzYtMTMuMTgsMGwtNC41ODItMTIuODgzICAgYy0wLjgtMi4yNDYtMi42MjgtMy45ODItNC45MTctNC42NTdjLTMuODk0LTEuMTUyLTcuNTc5LTIuNjY0LTEwLjk1My00LjUwMmMtMi4xMDMtMS4xNDctNC42MTktMS4yMi02Ljc3NS0wLjE4NWwtMTIuMjgzLDUuODM5ICAgYy0zLjM5MS0yLjgyNS02LjUxMi01Ljk0Ni05LjMzNy05LjMzOWw1Ljg0MS0xMi4yODVjMS4wMjYtMi4xNTksMC45NTUtNC42NzctMC4xODctNi43NzdjLTEuODM1LTMuMzY0LTMuMzUtNy4wNDktNC41MDQtMTAuOTQ4ICAgYy0wLjY3OC0yLjI5LTIuNDExLTQuMTE4LTQuNjYtNC45MTVsLTEyLjg3OC00LjU4Yy0wLjI0My0yLjM0My0wLjM2LTQuNTAyLTAuMzYtNi41OTJzMC4xMTctNC4yNDQsMC4zNi02LjU4N2wxMi44ODEtNC41ODQgICBjMi4yNDgtMC43OTcsMy45NzktMi42MjUsNC42NTctNC45MTVjMS4xNTItMy44ODksMi42NjctNy41NzQsNC41MDQtMTAuOTUzYzEuMTQyLTIuMDk1LDEuMjEzLTQuNjE5LDAuMTg3LTYuNzcybC01Ljg0MS0xMi4yODUgICBjMi44MjctMy4zOTMsNS45NDgtNi41MTksOS4zMzctOS4zMzlsMTIuMjg4LDUuODM5YzIuMTUxLDEuMDM2LDQuNjc3LDAuOTUzLDYuNzc1LTAuMTg1YzMuMzcyLTEuODM4LDcuMDU0LTMuMzUsMTAuOTQ4LTQuNTAyICAgYzIuMjktMC42NzYsNC4xMTgtMi40MTEsNC45MTctNC42NTdsNC41ODItMTIuODgzYzQuNjMzLTAuNDgxLDguNDY2LTAuNDgxLDEzLjE4LDBsNC41ODIsMTIuODgzICAgYzAuOCwyLjI0NiwyLjYyOCwzLjk4Miw0LjkxNyw0LjY1N2MzLjg5NCwxLjE1Miw3LjU3OSwyLjY2NCwxMC45NTMsNC41MDJjMi4xMDMsMS4xNDcsNC42MTQsMS4yMiw2Ljc3NSwwLjE4NWwxMi4yODMtNS44MzkgICBjMy4zODksMi44Miw2LjUxLDUuOTQ2LDkuMzM3LDkuMzM5bC01Ljg0MSwxMi4yODVjLTEuMDI2LDIuMTU0LTAuOTU1LDQuNjc3LDAuMTg3LDYuNzcyYzEuODQzLDMuMzg5LDMuMzU3LDcuMDY5LDQuNTA0LDEwLjk0OCAgIGMwLjY3OCwyLjI5NSwyLjQwOSw0LjEyMyw0LjY2LDQuOTJsMTIuODc4LDQuNThjMC4yNDMsMi4zNDMsMC4zNiw0LjUwMiwwLjM2LDYuNTkyUzE1OS4xOTIsOTEuMzc3LDE1OC45NDksOTMuNzJ6IiBmaWxsPSIjRkZGRkZGIi8+Cgk8cGF0aCBkPSJNODcuMTI0LDUwLjgwMmMtMTkuMDYyLDAtMzQuNTcxLDE1LjUwOC0zNC41NzEsMzQuNTcxczE1LjUwOCwzNC41NzEsMzQuNTcxLDM0LjU3MXMzNC41NzEtMTUuNTA4LDM0LjU3MS0zNC41NzEgICBTMTA2LjE4Niw1MC44MDIsODcuMTI0LDUwLjgwMnogTTg3LjEyNCwxMDUuMDA5Yy0xMC44MjcsMC0xOS42MzYtOC44MDktMTkuNjM2LTE5LjYzNnM4LjgwOS0xOS42MzYsMTkuNjM2LTE5LjYzNiAgIHMxOS42MzYsOC44MDksMTkuNjM2LDE5LjYzNlM5Ny45NTEsMTA1LjAwOSw4Ny4xMjQsMTA1LjAwOXoiIGZpbGw9IiNGRkZGRkYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" />
565
594
  <span>REM Converter</span>
566
595
  </div>
596
+ */}
567
597
  </div>
568
- <div className={"slider "+(isRemOpen?'sopen':'')}>
598
+ {/* <div className={"slider " + (isRemOpen ? 'sopen' : '')}>
569
599
  <div className="tools sliderHeader">
570
600
  <img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDE3NC4yNDggMTc0LjI0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTc0LjI0OCAxNzQuMjQ4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxnPgoJPHBhdGggZD0iTTE3My4xNDUsNzMuOTFjLTAuNDEzLTIuNzIyLTIuMjktNC45OTMtNC44ODEtNS45MTJsLTEzLjcyNy00Ljg4MWMtMC44MTItMi4zLTEuNzMzLTQuNTM2LTIuNzU0LTYuNjk5bDYuMjQ3LTEzLjE0NiAgIGMxLjE3OS0yLjQ3OSwwLjg5OS01LjQxMS0wLjcyOS03LjYyOGMtNS4yNjUtNy4xNjEtMTEuNTU2LTEzLjQ1Mi0xOC42OTgtMTguNjkzYy0yLjIxOS0xLjYyOS01LjE0MS0xLjkwNi03LjYyNS0wLjcyNCAgIGwtMTMuMTM4LDYuMjQyYy0yLjE2My0xLjAyMS00LjQwMi0xLjk0LTYuNzA0LTIuNzUybC00Ljg4My0xMy43MjljLTAuOTE5LTIuNTg2LTMuMTg0LTQuNDU4LTUuOS00Ljg3NiAgIGMtOS42NS0xLjQ4My0xNi43OTItMS40ODMtMjYuNDU3LDBjLTIuNzEzLDAuNDE4LTQuOTgxLDIuMjktNS45LDQuODc2bC00Ljg4MywxMy43MjljLTIuMzAyLDAuODEyLTQuNTQxLDEuNzMxLTYuNzAyLDIuNzUyICAgbC0xMy4xNDMtNi4yNDJjLTIuNDc5LTEuMTgxLTUuNDA2LTAuOTA0LTcuNjIzLDAuNzI0Yy03LjE0Miw1LjI0MS0xMy40MzMsMTEuNTMyLTE4LjY5OCwxOC42OTMgICBjLTEuNjI5LDIuMjE3LTEuOTA4LDUuMTQ4LTAuNzI5LDcuNjI4bDYuMjQ3LDEzLjE0NmMtMS4wMjEsMi4xNTktMS45NCw0LjQtMi43NTQsNi42OTlMNS45ODIsNjguMDAzICAgYy0yLjU4OSwwLjkxOS00LjQ2MywzLjE4OS00Ljg3OSw1LjkwN2MtMC43NDksNC45Mi0xLjA5OSw5LjExNS0xLjA5OSwxMy4yMTljMCw0LjA5OCwwLjM1LDguMjk5LDEuMDk5LDEzLjIxOSAgIGMwLjQxMywyLjcyMiwyLjI5LDQuOTkzLDQuODgxLDUuOTEybDEzLjcyNyw0Ljg4MWMwLjgxNCwyLjMwNCwxLjczNiw0LjU0MSwyLjc1NCw2LjcwNGwtNi4yNDcsMTMuMTQxICAgYy0xLjE3OSwyLjQ3OS0wLjg5OSw1LjQxMSwwLjcyNyw3LjYyM2M1LjI1OCw3LjE1NiwxMS41NDksMTMuNDQ3LDE4LjcsMTguNjk4YzIuMjE3LDEuNjI5LDUuMTQ0LDEuOTExLDcuNjI1LDAuNzI0bDEzLjEzOC02LjI0MiAgIGMyLjE2MywxLjAyMSw0LjQwMiwxLjk0LDYuNzA0LDIuNzUybDQuODgzLDEzLjcyOWMwLjkxOSwyLjU4NiwzLjE4NCw0LjQ1OCw1LjksNC44NzZjNC44MjgsMC43NDQsOS4xNTQsMS4xMDQsMTMuMjI4LDEuMTA0ICAgYzQuMDc0LDAsOC40MDEtMC4zNiwxMy4yMjgtMS4xMDRjMi43MTUtMC40MTgsNC45ODEtMi4yOSw1LjktNC44NzZsNC44ODMtMTMuNzI5YzIuMzAyLTAuODEyLDQuNTQxLTEuNzMxLDYuNzA0LTIuNzUyICAgbDEzLjEzOCw2LjI0MmMyLjQ4NCwxLjE4Niw1LjQxMSwwLjkwNCw3LjYyOC0wLjcyNGM3LjE1OS01LjI2LDEzLjQ1LTExLjU1MSwxOC42OTgtMTguNjk4YzEuNjI2LTIuMjEyLDEuOTA2LTUuMTQ0LDAuNzI3LTcuNjIzICAgbC02LjI0Ny0xMy4xNDFjMS4wMjEtMi4xNjMsMS45NDItNC40MDUsMi43NTQtNi43MDRsMTMuNzI3LTQuODgxYzIuNTkxLTAuOTE5LDQuNDY4LTMuMTg5LDQuODgxLTUuOTEyICAgYzAuNzQ5LTQuOTIsMS4wOTktOS4xMiwxLjA5OS0xMy4yMTlTMTczLjg5NCw3OC44MjksMTczLjE0NSw3My45MXogTTE1OC45NDksOTMuNzJsLTEyLjg3OCw0LjU4ICAgYy0yLjI1MSwwLjc5Ny0zLjk4MiwyLjYyNS00LjY2LDQuOTJjLTEuMTUsMy44ODktMi42NjQsNy41NjktNC41MDQsMTAuOTQzYy0xLjE0MiwyLjEtMS4yMTMsNC42MTktMC4xODcsNi43NzdsNS44NDEsMTIuMjg1ICAgYy0yLjgyMiwzLjM4OS01Ljk0Myw2LjUxNS05LjMzNyw5LjMzNGwtMTIuMjgzLTUuODM0Yy0yLjE2MS0xLjAzNi00LjY3Mi0wLjk1My02Ljc3NSwwLjE4NWMtMy4zNzksMS44MzgtNy4wNjEsMy4zNS0xMC45NTMsNC41MDIgICBjLTIuMjksMC42NzYtNC4xMTgsMi40MDYtNC45MTcsNC42NTdsLTQuNTgyLDEyLjg4M2MtNC42NzcsMC40NzYtOC41MDMsMC40NzYtMTMuMTgsMGwtNC41ODItMTIuODgzICAgYy0wLjgtMi4yNDYtMi42MjgtMy45ODItNC45MTctNC42NTdjLTMuODk0LTEuMTUyLTcuNTc5LTIuNjY0LTEwLjk1My00LjUwMmMtMi4xMDMtMS4xNDctNC42MTktMS4yMi02Ljc3NS0wLjE4NWwtMTIuMjgzLDUuODM5ICAgYy0zLjM5MS0yLjgyNS02LjUxMi01Ljk0Ni05LjMzNy05LjMzOWw1Ljg0MS0xMi4yODVjMS4wMjYtMi4xNTksMC45NTUtNC42NzctMC4xODctNi43NzdjLTEuODM1LTMuMzY0LTMuMzUtNy4wNDktNC41MDQtMTAuOTQ4ICAgYy0wLjY3OC0yLjI5LTIuNDExLTQuMTE4LTQuNjYtNC45MTVsLTEyLjg3OC00LjU4Yy0wLjI0My0yLjM0My0wLjM2LTQuNTAyLTAuMzYtNi41OTJzMC4xMTctNC4yNDQsMC4zNi02LjU4N2wxMi44ODEtNC41ODQgICBjMi4yNDgtMC43OTcsMy45NzktMi42MjUsNC42NTctNC45MTVjMS4xNTItMy44ODksMi42NjctNy41NzQsNC41MDQtMTAuOTUzYzEuMTQyLTIuMDk1LDEuMjEzLTQuNjE5LDAuMTg3LTYuNzcybC01Ljg0MS0xMi4yODUgICBjMi44MjctMy4zOTMsNS45NDgtNi41MTksOS4zMzctOS4zMzlsMTIuMjg4LDUuODM5YzIuMTUxLDEuMDM2LDQuNjc3LDAuOTUzLDYuNzc1LTAuMTg1YzMuMzcyLTEuODM4LDcuMDU0LTMuMzUsMTAuOTQ4LTQuNTAyICAgYzIuMjktMC42NzYsNC4xMTgtMi40MTEsNC45MTctNC42NTdsNC41ODItMTIuODgzYzQuNjMzLTAuNDgxLDguNDY2LTAuNDgxLDEzLjE4LDBsNC41ODIsMTIuODgzICAgYzAuOCwyLjI0NiwyLjYyOCwzLjk4Miw0LjkxNyw0LjY1N2MzLjg5NCwxLjE1Miw3LjU3OSwyLjY2NCwxMC45NTMsNC41MDJjMi4xMDMsMS4xNDcsNC42MTQsMS4yMiw2Ljc3NSwwLjE4NWwxMi4yODMtNS44MzkgICBjMy4zODksMi44Miw2LjUxLDUuOTQ2LDkuMzM3LDkuMzM5bC01Ljg0MSwxMi4yODVjLTEuMDI2LDIuMTU0LTAuOTU1LDQuNjc3LDAuMTg3LDYuNzcyYzEuODQzLDMuMzg5LDMuMzU3LDcuMDY5LDQuNTA0LDEwLjk0OCAgIGMwLjY3OCwyLjI5NSwyLjQwOSw0LjEyMyw0LjY2LDQuOTJsMTIuODc4LDQuNThjMC4yNDMsMi4zNDMsMC4zNiw0LjUwMiwwLjM2LDYuNTkyUzE1OS4xOTIsOTEuMzc3LDE1OC45NDksOTMuNzJ6IiBmaWxsPSIjRkZGRkZGIi8+Cgk8cGF0aCBkPSJNODcuMTI0LDUwLjgwMmMtMTkuMDYyLDAtMzQuNTcxLDE1LjUwOC0zNC41NzEsMzQuNTcxczE1LjUwOCwzNC41NzEsMzQuNTcxLDM0LjU3MXMzNC41NzEtMTUuNTA4LDM0LjU3MS0zNC41NzEgICBTMTA2LjE4Niw1MC44MDIsODcuMTI0LDUwLjgwMnogTTg3LjEyNCwxMDUuMDA5Yy0xMC44MjcsMC0xOS42MzYtOC44MDktMTkuNjM2LTE5LjYzNnM4LjgwOS0xOS42MzYsMTkuNjM2LTE5LjYzNiAgIHMxOS42MzYsOC44MDksMTkuNjM2LDE5LjYzNlM5Ny45NTEsMTA1LjAwOSw4Ny4xMjQsMTA1LjAwOXoiIGZpbGw9IiNGRkZGRkYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" />
571
601
  <span className="sliderTitle">REM Converter</span>
@@ -576,17 +606,17 @@
576
606
  <div className="sliderFormContainer">
577
607
  <div className="sliderInputContainer">
578
608
  <label className="sliderInputTitle">Base font-size (in px)</label>
579
- <input type="number" className="sliderInput" min="1" placeholder="Base font-size (in px)" value={rootSize} onChange={this.onChangeBase} / >
609
+ <input type="number" className="sliderInput" min="1" placeholder="Base font-size (in px)" value={rootSize} onChange={this.onChangeBase} />
580
610
  </div>
581
611
  <div className="sliderInputContainer">
582
612
  <label className="sliderInputTitle">PX size to convert</label>
583
- <input type="number" className="sliderInput" placeholder="PX size to convert" value={pixelSize} onChange={this.onChangePixel} / >
613
+ <input type="number" className="sliderInput" placeholder="PX size to convert" value={pixelSize} onChange={this.onChangePixel} />
584
614
  </div>
585
615
  <div className="sliderInputContainer">
586
616
  <label className="sliderInputTitle">Result</label>
587
617
  <div className="sliderResult">
588
- <input type="text" className="sliderInput" placeholder="Result" value={resultRem} onChange={this.onChangeRem} / >
589
- <span id="remoutput" className="copyTxtHiden">{resultRem}</span>
618
+ <input type="text" className="sliderInput" placeholder="Result" value={resultRem} onChange={this.onChangeRem} />
619
+ <span id="remoutput" className="copyTxtHiden">{resultRem}</span>
590
620
  <span className="copyResult" onClick={selectText.bind(this, 'remoutput')}>
591
621
  <img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ4OC4zIDQ4OC4zIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0ODguMyA0ODguMzsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTMxNC4yNSw4NS40aC0yMjdjLTIxLjMsMC0zOC42LDE3LjMtMzguNiwzOC42djMyNS43YzAsMjEuMywxNy4zLDM4LjYsMzguNiwzOC42aDIyN2MyMS4zLDAsMzguNi0xNy4zLDM4LjYtMzguNlYxMjQgICAgQzM1Mi43NSwxMDIuNywzMzUuNDUsODUuNCwzMTQuMjUsODUuNHogTTMyNS43NSw0NDkuNmMwLDYuNC01LjIsMTEuNi0xMS42LDExLjZoLTIyN2MtNi40LDAtMTEuNi01LjItMTEuNi0xMS42VjEyNCAgICBjMC02LjQsNS4yLTExLjYsMTEuNi0xMS42aDIyN2M2LjQsMCwxMS42LDUuMiwxMS42LDExLjZWNDQ5LjZ6IiBmaWxsPSIjRkZGRkZGIi8+CgkJPHBhdGggZD0iTTQwMS4wNSwwaC0yMjdjLTIxLjMsMC0zOC42LDE3LjMtMzguNiwzOC42YzAsNy41LDYsMTMuNSwxMy41LDEzLjVzMTMuNS02LDEzLjUtMTMuNWMwLTYuNCw1LjItMTEuNiwxMS42LTExLjZoMjI3ICAgIGM2LjQsMCwxMS42LDUuMiwxMS42LDExLjZ2MzI1LjdjMCw2LjQtNS4yLDExLjYtMTEuNiwxMS42Yy03LjUsMC0xMy41LDYtMTMuNSwxMy41czYsMTMuNSwxMy41LDEzLjVjMjEuMywwLDM4LjYtMTcuMywzOC42LTM4LjYgICAgVjM4LjZDNDM5LjY1LDE3LjMsNDIyLjM1LDAsNDAxLjA1LDB6IiBmaWxsPSIjRkZGRkZGIi8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==" />
592
622
  </span>
@@ -594,7 +624,8 @@
594
624
  </div>
595
625
  </div>
596
626
  </div>
597
- </div>
627
+ */}
628
+ </div>
598
629
  </div>
599
630
  </div>
600
631
  <div className="flexgrow flexbasis">
@@ -609,9 +640,9 @@
609
640
  </div>
610
641
  <div className='flexgrow flexbasis infoTabs dflex'>
611
642
  {
612
- dashboardList.map((item,i)=>{
613
- return(
614
- <span key={i} onClick={this.compList.bind(this,item.name)} className={this.state.compList == item.name ? 'dotted infoactive' : 'dotted'}>
643
+ dashboardList.map((item, i) => {
644
+ return (
645
+ <span key={i} onClick={this.compList.bind(this, item.name)} className={this.state.compList == item.name ? 'dotted infoactive' : 'dotted'}>
615
646
  {item.name}
616
647
  </span>
617
648
  )
@@ -622,33 +653,33 @@
622
653
  </div>
623
654
  <div className='flexgrow scrollY'>
624
655
  {
625
- dashboardList.map((item,i)=>{
626
- if(this.state.compList == item.name){
627
- return(
628
- item.componentList.length>0?<ul key={i}>
656
+ dashboardList.map((item, i) => {
657
+ if (this.state.compList == item.name) {
658
+ return (
659
+ item.componentList.length > 0 ? <ul key={i}>
629
660
  {
630
- (item.componentList).map((component,val)=>{
631
- if(component!== undefined){
632
- return(<li key={val} className="compListItem">{component}</li>)
661
+ (item.componentList).map((component, val) => {
662
+ if (component !== undefined) {
663
+ return (<li key={val} className="compListItem">{component}</li>)
633
664
  }
634
665
  })
635
666
  }
636
- </ul>:
637
- <div className='dflex alignHorizontal alignVertical flexcolumn'>
638
- <span className='smileIcon'>
639
- <svg className='svg'>
640
- <use xlinkHref='#smileIcon'></use>
641
- </svg>
642
- </span>
643
- <div>{'Sorry! there is no '+this.state.compList +' components'}</div>
644
- </div>
667
+ </ul> :
668
+ <div className='dflex alignHorizontal alignVertical flexcolumn'>
669
+ <span className='smileIcon'>
670
+ <svg className='svg'>
671
+ <use xlinkHref='#smileIcon'></use>
672
+ </svg>
673
+ </span>
674
+ <div>{'Sorry! there is no ' + this.state.compList + ' components'}</div>
675
+ </div>
645
676
  )
646
677
  }
647
678
  })
648
679
  }
649
680
  </div>
650
681
  </div>
651
- :null
682
+ : null
652
683
  }
653
684
  {
654
685
  compName ?
@@ -656,164 +687,300 @@
656
687
  <div className="dflex flexrow flexbasis alignVertical">
657
688
  <div className="flexshrink"><h1 className="cheadertitle">{compName && compName.split('__')[0]}</h1></div>
658
689
  <div className='flexgrow flexbasis infoTabs dflex'>
659
- <span onClick={this.onTabinfo.bind(this,'component')} className={infoTab == 'component' ? 'dotted infoactive' : 'dotted'}>Component view</span>
660
- <span onClick={this.onTabinfo.bind(this,'proptypes')} className={infoTab == 'proptypes' ? 'dotted infoactive' : 'dotted'}>PropTypes</span>
661
- <span onClick={this.onTabinfo.bind(this,'code')} className={infoTab == 'code' ? 'dotted infoactive' : 'dotted'}>Docs Code</span>
662
- {
663
- /*
664
- <span onClick={this.onTabinfo.bind(this,'src')} className={infoTab == 'src' ? 'dotted infoactive' : 'dotted'}>Source</span>
665
- <span onClick={this.onTabinfo.bind(this,'visual')} className={infoTab == 'visual' ? 'dotted infoactive' : 'dotted'}>Visual Design</span>
666
- */
667
- }
668
- <span onClick={this.onTabinfo.bind(this,'references')}className={infoTab=='references' ? 'dotted infoactive' : 'dotted'}>References</span>
669
- <span onClick={this.getFileDetails} className={infoTab == 'changeset' ? 'dotted infoactive' : 'dotted'}>Author</span>
690
+ <span onClick={this.onTabinfo.bind(this, 'component')} className={infoTab == 'component' ? 'dotted infoactive' : 'dotted'}>Component view</span>
691
+ <span onClick={this.onTabinfo.bind(this, 'proptypes')} className={infoTab == 'proptypes' ? 'dotted infoactive' : 'dotted'}>PropTypes</span>
692
+ <span onClick={this.onTabinfo.bind(this, 'code')} className={infoTab == 'code' ? 'dotted infoactive' : 'dotted'}>Docs Code</span>
693
+ {
694
+ /*
695
+ <span onClick={this.onTabinfo.bind(this,'src')} className={infoTab == 'src' ? 'dotted infoactive' : 'dotted'}>Source</span>
696
+ <span onClick={this.onTabinfo.bind(this,'visual')} className={infoTab == 'visual' ? 'dotted infoactive' : 'dotted'}>Visual Design</span>
697
+ */
698
+ }
699
+ <span onClick={this.onTabinfo.bind(this, 'references')} className={infoTab == 'references' ? 'dotted infoactive' : 'dotted'}>References</span>
670
700
  </div>
671
701
  </div>
672
702
  </div>
673
- :null
703
+ : null
674
704
  }
675
705
 
676
706
  <div className="flexgrow flexbasis cfooter ">
677
707
  <div className="dflex flexcolumn flexbasis">
678
708
  <div className="flexgrow flexbasis ccontent">
679
- {
680
- infoTab == 'changeset' ?
681
- <pre className="authorview">{changeset ? changeset : 'loading....!!!'}</pre>
682
- :null
683
- }
684
709
  {
685
710
  infoTab == 'code' ?
686
- <CodeView compName={compName} src={window.componentList ?window.componentList[compName].docs.source:Component[compName].docs.source}/>
687
- :null
711
+ <CodeView compName={compName} src={window.componentList ? window.componentList[compName].docs.source : Component[compName].docs.source} />
712
+ : null
688
713
  }
689
714
  {
690
715
  infoTab == 'src' ?
691
- <CodeView compName={compName+'src'} src={window.componentList ?window.componentList[propComName].source:Component[propComName].source}/>
692
- : null
716
+ <CodeView compName={compName + 'src'} src={window.componentList ? window.componentList[propComName].source : Component[propComName].source} />
717
+ : null
693
718
  }
694
719
  {
695
720
  infoTab == 'component' &&
696
- <div className='dflex flexcolumn'>
697
- <div className={'flexgrow flexshrink flexbasis toolarea'}>
698
- <section id="resize" style={{"width":((frameWidth)+'px')}} className={"dflex flexcolumn flexbasis iframeSection"+" "+(frameWidth<481?'section':'')}>
699
- <span className="loadingText" id='loadingText'>
700
- <div className="lds-ripple">
701
- <div></div>
702
- <div></div>
703
- </div>
704
- </span>
705
- <iframe
706
- id="componentIframe"
707
- className="iframe"
708
- src={'/docs/component.html' + location.hash}
709
- mdata={mdata}
710
- />
711
- </section>
712
- </div>
713
- <div className={'flexshrink toolOptions'}>
714
- <div className={'dflex flexrow alignVertical alignHorizontal'}>
715
-
716
- <div className={'responsive offSelection'}>
717
- <span className={"responsiveOption iconOption"} onClick={this.reloadFrame}>
718
- <svg className='svg'>
719
- <use xlinkHref='#reload'></use>
720
- </svg>
721
- </span>
722
- <a className={'responsiveOption iconOption'} href={'/docs/component.html' + location.hash} target="_blank" >
723
- <svg className='svg'>
724
- <use xlinkHref='#newTab'></use>
725
- </svg>
726
- </a>
727
- <span className={'responsiveOption iconOption'+' '+(this.state.isRTL?'activeOption transform':'')} onClick={this.onRtlView}>
728
- <svg className='svg'>
729
- <use xlinkHref='#RTL'></use>
730
- </svg>
731
- </span>
732
- <span className={'responsiveOption iconOption textSize'+' '+(this.state.isRem?'activeOption':'')} onClick={this.onREMView} >
733
- <svg className='svg'>
734
- <use xlinkHref='#rem'></use>
735
- </svg>
736
- </span>
737
- <span className={'responsiveOption iconOption textSize'+' '+(this.state.isEditMode?'activeOption':'')} onClick={this.toggleEditMode} >
738
- <svg className='svg'>
739
- <use xlinkHref='#pencil'></use>
740
- </svg>
741
- </span>
742
- <span className={'responsiveOption iconOption fullScreen'+' '+(this.state.isMenuClose?'activeOption':'')} onClick={this.fullView} >
743
- <svg className='svg'>
744
- <use xlinkHref='#fullScreen'></use>
745
- </svg>
746
- </span>
721
+ <div className='dflex flexcolumn'>
722
+ <div className={'flexgrow flexshrink flexbasis toolarea'}>
723
+ <section id="resize" style={{ "width": ((frameWidth) + 'px') }} className={"dflex flexcolumn flexbasis iframeSection" + " " + (frameWidth < 481 ? 'section' : '')}>
724
+ <span className="loadingText" id='loadingText'>
725
+ <div className="lds-ripple">
726
+ <div></div>
727
+ <div></div>
747
728
  </div>
748
- <div className={'dflex alignVertical alignHorizontal range'}>
749
- <input min='1' max='12' type='range' defaultValue='9' step='1' id="myRange" onChange={this.iframeSize} className='rangeInput' />
750
- <span className='tooltip'>{this.state.device}</span>
751
- {
752
- this.state.windowSize?
729
+ </span>
730
+ <iframe
731
+ id="componentIframe"
732
+ className="iframe"
733
+ src={'/docs/component.html' + location.hash}
734
+ mdata={mdata}
735
+ />
736
+ </section>
737
+ </div>
738
+ <div className={'flexshrink toolOptions'}>
739
+ <div className={'dflex flexrow alignVertical alignHorizontal'}>
740
+
741
+ <div className={'responsive offSelection'}>
742
+ <span className={"responsiveOption iconOption"} onClick={this.reloadFrame}>
743
+ <svg className='svg'>
744
+ <use xlinkHref='#reload'></use>
745
+ </svg>
746
+ </span>
747
+ <a className={'responsiveOption iconOption'} href={'/docs/component.html' + location.hash} target="_blank" >
748
+ <svg className='svg'>
749
+ <use xlinkHref='#newTab'></use>
750
+ </svg>
751
+ </a>
752
+ <span className={'responsiveOption iconOption' + ' ' + (this.state.isRTL ? 'activeOption transform' : '')} onClick={this.onRtlView}>
753
+ <svg className='svg'>
754
+ <use xlinkHref='#RTL'></use>
755
+ </svg>
756
+ </span>
757
+ <span className={'responsiveOption iconOption textSize' + ' ' + (this.state.isRem ? 'activeOption' : '')} onClick={this.onREMView} >
758
+ <svg className='svg'>
759
+ <use xlinkHref='#rem'></use>
760
+ </svg>
761
+ </span>
762
+ <span className={'responsiveOption iconOption textSize' + ' ' + (this.state.isEditMode ? 'activeOption' : '')} onClick={this.toggleEditMode} >
763
+ <svg className='svg'>
764
+ <use xlinkHref='#pencil'></use>
765
+ </svg>
766
+ </span>
767
+ <span className={'responsiveOption iconOption fullScreen' + ' ' + (this.state.isMenuClose ? 'activeOption' : '')} onClick={this.fullView} >
768
+ <svg className='svg'>
769
+ <use xlinkHref='#fullScreen'></use>
770
+ </svg>
771
+ </span>
772
+ </div>
773
+ <div className={'dflex alignVertical alignHorizontal range'}>
774
+ <input min='1' max='12' type='range' defaultValue='9' step='1' id="myRange" onChange={this.iframeSize} className='rangeInput' />
775
+ <span className='tooltip'>{this.state.device}</span>
776
+ {
777
+ this.state.windowSize ?
753
778
  <React.Fragment>
754
779
  <span className='window'>{this.state.windowSize.width}</span>
755
780
  <span className='tooltipVal'>x</span>
756
781
  <span className='window'>{this.state.windowSize.height}</span>
757
- </React.Fragment>:null
758
- }
759
- </div>
782
+ </React.Fragment> : null
783
+ }
760
784
  </div>
761
785
  </div>
762
786
  </div>
787
+ </div>
763
788
  }
764
789
  {
765
- infoTab == 'proptypes' ?
766
- <div className="propsTable">
767
- <div className="tableHeader">
768
- <span className="brR">PropsName</span>
769
- <span className="brR">Type</span>
770
- <span className="brR">isRequired</span>
771
- <span className="brR ">Default Props</span>
772
- <span className="brR ">Description</span>
773
- </div>
774
- {
775
- currentCompProps.map((value, i) => {
790
+ infoTab === 'proptypes' ? (
791
+ propsObj.length ?
792
+ (
793
+ currentCompProps.map((result, i) => {
794
+ const currentDefaultProps = defaultProps[i] || { "undefined": '' };
795
+ const _defaultProps = Object.keys(currentDefaultProps)[0].split('_')[0];
796
+ defaultPropsArray.push(_defaultProps);
797
+ const compName = Object.keys(result)[0];
798
+ const _propTypes = Object.keys(result)[0].split('_')[0];
799
+ const _propTypesToDefaultProps = _propTypes + '_defaultProps';
800
+ const propInfo = result[compName];
801
+ _propTypesToDefaultPropsArray.push(defaultPropsArray.includes(_propTypes) ? _propTypesToDefaultProps : "undefined");
802
+
803
+ const currentPropDes = currentCompPropsDescription[i] || { "undefined": '' };
804
+ const _propDes = Object.keys(currentPropDes)[0].split('_')[0];
805
+ propsDesArray.push(_propDes);
806
+ const _propTypesToPropsDes = _propTypes + '_propsDescription';
807
+ _propTypesToPropsDesArray.push(propsDesArray.includes(_propTypes) ? _propTypesToPropsDes : "undefined");
808
+
776
809
  return (
777
- <div
778
- className={
779
- currentCompProps.length - 1 == i
780
- ? 'tableHeaderNB'
781
- : 'tableHeader'
782
- }
783
- key={i}
784
- >
785
- <span>
786
- <div>{value}</div>
787
- </span>
788
- <span>
789
- <div>
790
- {propsObj[value] && propsObj[value].hookType}
791
- </div>
792
- </span>
793
- <span>
794
- <div>
810
+ <div className='propsTableContainer'>
811
+ <div className="compName">{compName.split('_')[0]}</div>
812
+ <div className="propsTable" key={compName}>
813
+ <div className="tableHeader">
814
+ <span className="brR">PropsName</span>
815
+ <span className="brR">Type</span>
816
+ <span className="brR">isRequired</span>
817
+ <span className="brR">Default Props</span>
795
818
  {
796
- propsObj[value] && propsObj[value].isRequired? '-': 'true'
819
+ currentCompPropsDescription ? <span className="brR">Props Description</span> : null
797
820
  }
798
821
  </div>
799
- </span>
800
- <span className="defaultProps">
801
- <div className="bn">
802
- {JSON.stringify(currentCompDefault[value] || '')}
803
- </div>
804
- </span>
805
- <span className="defaultProps">
806
- <div className="bn">
807
- {JSON.stringify(currentCompPropsDescription[value] || '')}
808
- </div>
809
- </span>
810
-
822
+ {Object.keys(propInfo).sort().map((value, j) => (
823
+ <div
824
+ className={'tableHeader'}
825
+ key={`${i}-${j}`}
826
+ >
827
+ <span>
828
+ <div >{value}</div>
829
+ </span>
830
+ <span>
831
+ {(() => {
832
+ const hookInfo = propInfo[value];
833
+ const hookType = hookInfo && hookInfo.hookType;
834
+
835
+ if (!hookType) return null;
836
+
837
+ let typeTagClass = 'typeTag';
838
+
839
+ if (hookType === 'string') {
840
+ typeTagClass += ' stringType';
841
+ } else if (hookType === 'bool') {
842
+ typeTagClass += ' boolType';
843
+ } else if (hookType === 'func') {
844
+ typeTagClass += ' funcType';
845
+ } else if (hookType.includes('union') || hookType.includes('enum')) {
846
+ typeTagClass += ' oneOfType';
847
+ } else if (hookType === 'object') {
848
+ typeTagClass += ' objectType';
849
+ } else if (hookType === 'element') {
850
+ typeTagClass += ' elementType';
851
+ } else if (hookType === 'array') {
852
+ typeTagClass += ' arrayType';
853
+ } else if (hookType === 'shape') {
854
+ typeTagClass += ' shapeType';
855
+ } else if (hookType === 'number') {
856
+ typeTagClass += ' numberType';
857
+ }
858
+ return <div className={typeTagClass}>{this.getHookType(propInfo, value)}</div>;
859
+ })()}
860
+ </span>
861
+ <span>
862
+ {
863
+ propInfo[value] && propInfo[value].isRequired ? (
864
+ <input type="checkbox" disabled></input>
865
+ ) : (
866
+ <input type="checkbox" onclick="return false" checked></input>
867
+ )
868
+ }
869
+ </span>
870
+ <span>
871
+ <div>
872
+ {_propTypesToDefaultPropsArray[i] !== 'undefined'
873
+ ? JSON.stringify(
874
+ currentDefaultPropsArray.find(
875
+ (element) => Object.keys(element)[0] === _propTypesToDefaultPropsArray[i]
876
+ )[_propTypesToDefaultProps][value]
877
+ ) || '-'
878
+ : ''}
879
+ </div>
880
+ </span>
881
+ {
882
+ currentCompPropsDescription ? (
883
+ <span>
884
+ <div>
885
+ {
886
+ _propTypesToPropsDesArray[i] !== 'undefined'
887
+ ? currentCompPropsDescription.find(
888
+ (element) => Object.keys(element)[0] === _propTypesToPropsDesArray[i]
889
+ )[_propTypesToPropsDes][value] || '-'
890
+ : '-'
891
+ }
892
+ </div>
893
+ </span>
894
+ ) : null
895
+ }
896
+ </div>
897
+ ))}
898
+ </div>
811
899
  </div>
812
900
  );
813
901
  })
814
- }
815
- </div>
816
- : null
902
+ ) : (
903
+ <div className='propsTableContainer'>
904
+ <div className="compName">{compName.split('_')[1].split('__')[0]}</div>
905
+ <div className="propsTable">
906
+ <div className="tableHeader">
907
+ <span className="brR">PropsName</span>
908
+ <span className="brR">Type</span>
909
+ <span className="brR">isRequired</span>
910
+ <span className="brR">Default Props</span>
911
+ {
912
+ Object.keys(currentCompPropsDescription).length > 0 ? <span className="brR">Props Description</span> : null
913
+ }
914
+ </div>
915
+ {
916
+ Object.keys(currentCompProps).sort().map((result, i) => {
917
+ return (
918
+ <div
919
+ className={'tableHeader'}
920
+ key={`${i}`}
921
+ >
922
+ <span>
923
+ <div>{result}</div>
924
+ </span>
925
+ <span>
926
+ {(() => {
927
+ const hookInfo = propsObj[result];
928
+ const hookType = hookInfo && hookInfo.hookType;
929
+
930
+ if (!hookType) return null;
931
+
932
+ let typeTagClass = 'typeTag';
933
+
934
+ if (hookType === 'string') {
935
+ typeTagClass += ' stringType';
936
+ } else if (hookType === 'bool') {
937
+ typeTagClass += ' boolType';
938
+ } else if (hookType === 'func') {
939
+ typeTagClass += ' funcType';
940
+ } else if (hookType.includes('union') || hookType.includes('enum')) {
941
+ typeTagClass += ' oneOfType';
942
+ } else if (hookType === 'object') {
943
+ typeTagClass += ' objectType';
944
+ } else if (hookType === 'element') {
945
+ typeTagClass += ' elementType';
946
+ } else if (hookType === 'array') {
947
+ typeTagClass += ' arrayType';
948
+ } else if (hookType === 'shape') {
949
+ typeTagClass += ' shapeType';
950
+ } else if (hookType === 'number') {
951
+ typeTagClass += ' numberType';
952
+ }
953
+ return <div className={typeTagClass}>{this.getHookType(propsObj, result)}</div>;
954
+ })()}
955
+ </span>
956
+ <span>
957
+ {
958
+ propsObj[result] && propsObj[result].isRequired ? (
959
+ <input type="checkbox" disabled></input>
960
+ ) : (
961
+ <input type="checkbox" onclick="return false" checked></input>
962
+ )
963
+ }
964
+ </span>
965
+ <span>
966
+ <div>{JSON.stringify(defaultProps[result]) || '-'}</div>
967
+ </span>
968
+ {
969
+ Object.keys(currentCompPropsDescription).length > 0 ? (
970
+ <span>
971
+ <div>{currentCompPropsDescription[result] || '-'}</div>
972
+ </span>
973
+ ) : null
974
+ }
975
+ </div>
976
+ );
977
+ })
978
+
979
+ }
980
+ </div>
981
+ </div>
982
+ )
983
+ ) : null
817
984
  }
818
985
  {
819
986
  infoTab == 'references' ?
@@ -833,28 +1000,7 @@
833
1000
  </li>
834
1001
  );
835
1002
  })
836
- : mdata[compName].referencedby.map((val, i) => {
837
- return (
838
- <li key={i} className='refsLin'>
839
- <a className="link" href={'#' + val}>
840
- {val}
841
- </a>
842
- </li>
843
- );
844
- })
845
- : null
846
- }
847
- </ul>
848
- <div className='refsBy'>References : </div>
849
- <ul>
850
- {
851
- compName ? compName.indexOf('__') > -1
852
- ? mdata[
853
- compName.substring(0, compName.indexOf('_'))
854
- ] &&
855
- mdata[
856
- compName.substring(0, compName.indexOf('_'))
857
- ].references.map((val, i) => {
1003
+ : mdata[compName].referencedby.map((val, i) => {
858
1004
  return (
859
1005
  <li key={i} className='refsLin'>
860
1006
  <a className="link" href={'#' + val}>
@@ -863,6 +1009,27 @@
863
1009
  </li>
864
1010
  );
865
1011
  })
1012
+ : null
1013
+ }
1014
+ </ul>
1015
+ <div className='refsBy'>References : </div>
1016
+ <ul>
1017
+ {
1018
+ compName ? compName.indexOf('__') > -1
1019
+ ? mdata[
1020
+ compName.substring(0, compName.indexOf('_'))
1021
+ ] &&
1022
+ mdata[
1023
+ compName.substring(0, compName.indexOf('_'))
1024
+ ].references.map((val, i) => {
1025
+ return (
1026
+ <li key={i} className='refsLin'>
1027
+ <a className="link" href={'#' + val}>
1028
+ {val}
1029
+ </a>
1030
+ </li>
1031
+ );
1032
+ })
866
1033
  : mdata[compName].references.map((val, i) => {
867
1034
  return (
868
1035
  <li key={i} className='refsLin'>
@@ -872,7 +1039,7 @@
872
1039
  </li>
873
1040
  );
874
1041
  })
875
- : null
1042
+ : null
876
1043
  }
877
1044
  </ul>
878
1045
  </div>
@@ -921,14 +1088,14 @@
921
1088
  render() {
922
1089
  return (
923
1090
  <div className="searchContainer">
924
- <input
925
- type="text"
926
- onChange={this.props.onChange}
927
- placeholder="Search"
928
- className="inputSearch" value={this.props.value}
929
- />
930
- {this.props.value.length>=1&&
931
- <span className="searchClose" onClick={this.props.onClear}><img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIxMi45ODIgMjEyLjk4MiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjEyLjk4MiAyMTIuOTgyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxnIGlkPSJDbG9zZSI+Cgk8cGF0aCBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7IiBkPSJNMTMxLjgwNCwxMDYuNDkxbDc1LjkzNi03NS45MzZjNi45OS02Ljk5LDYuOTktMTguMzIzLDAtMjUuMzEyICAgYy02Ljk5LTYuOTktMTguMzIyLTYuOTktMjUuMzEyLDBsLTc1LjkzNyw3NS45MzdMMzAuNTU0LDUuMjQyYy02Ljk5LTYuOTktMTguMzIyLTYuOTktMjUuMzEyLDBjLTYuOTg5LDYuOTktNi45ODksMTguMzIzLDAsMjUuMzEyICAgbDc1LjkzNyw3NS45MzZMNS4yNDIsMTgyLjQyN2MtNi45ODksNi45OS02Ljk4OSwxOC4zMjMsMCwyNS4zMTJjNi45OSw2Ljk5LDE4LjMyMiw2Ljk5LDI1LjMxMiwwbDc1LjkzNy03NS45MzdsNzUuOTM3LDc1LjkzNyAgIGM2Ljk4OSw2Ljk5LDE4LjMyMiw2Ljk5LDI1LjMxMiwwYzYuOTktNi45OSw2Ljk5LTE4LjMyMiwwLTI1LjMxMkwxMzEuODA0LDEwNi40OTF6IiBmaWxsPSIjRkZGRkZGIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==" /></span>}
1091
+ <input
1092
+ type="text"
1093
+ onChange={this.props.onChange}
1094
+ placeholder="Search"
1095
+ className="inputSearch" value={this.props.value}
1096
+ />
1097
+ {this.props.value.length >= 1 &&
1098
+ <span className="searchClose" onClick={this.props.onClear}><img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIxMi45ODIgMjEyLjk4MiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjEyLjk4MiAyMTIuOTgyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxnIGlkPSJDbG9zZSI+Cgk8cGF0aCBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7IiBkPSJNMTMxLjgwNCwxMDYuNDkxbDc1LjkzNi03NS45MzZjNi45OS02Ljk5LDYuOTktMTguMzIzLDAtMjUuMzEyICAgYy02Ljk5LTYuOTktMTguMzIyLTYuOTktMjUuMzEyLDBsLTc1LjkzNyw3NS45MzdMMzAuNTU0LDUuMjQyYy02Ljk5LTYuOTktMTguMzIyLTYuOTktMjUuMzEyLDBjLTYuOTg5LDYuOTktNi45ODksMTguMzIzLDAsMjUuMzEyICAgbDc1LjkzNyw3NS45MzZMNS4yNDIsMTgyLjQyN2MtNi45ODksNi45OS02Ljk4OSwxOC4zMjMsMCwyNS4zMTJjNi45OSw2Ljk5LDE4LjMyMiw2Ljk5LDI1LjMxMiwwbDc1LjkzNy03NS45MzdsNzUuOTM3LDc1LjkzNyAgIGM2Ljk4OSw2Ljk5LDE4LjMyMiw2Ljk5LDI1LjMxMiwwYzYuOTktNi45OSw2Ljk5LTE4LjMyMiwwLTI1LjMxMkwxMzEuODA0LDEwNi40OTF6IiBmaWxsPSIjRkZGRkZGIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==" /></span>}
932
1099
  </div>
933
1100
  );
934
1101
  }
@@ -941,53 +1108,53 @@
941
1108
  toggle: false
942
1109
  };
943
1110
  }
944
- componentDidMount(){
945
- let {type,viewGroup}=this.props;
946
- let element=document.getElementById(type);
947
- viewGroup==type && element ?
948
- element.scrollIntoView(true) && element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"})
949
- :null
1111
+ componentDidMount() {
1112
+ let { type, viewGroup } = this.props;
1113
+ let element = document.getElementById(type);
1114
+ viewGroup == type && element ?
1115
+ element.scrollIntoView(true) && element.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" })
1116
+ : null
950
1117
  }
951
1118
 
952
1119
  render() {
953
- const { components, type, toggleGroup,viewGroup } = this.props;
1120
+ const { components, type, toggleGroup, viewGroup } = this.props;
954
1121
  let classNameTab = type == viewGroup ? " selected " : '';
955
1122
 
956
1123
  return (
957
- <div data-title={type}>
958
- {
959
- components.length>0&& <div className={"listItem dflex flexrow flexbasis alignVertical offSelection "+ classNameTab} onClick={toggleGroup.bind(this,type)} id={type}>
960
- <i className={"flexshrink listIcon"}>
961
- <svg className='svg'>
962
- <use xlinkHref='#folder'></use>
963
- </svg>
964
- </i>
965
- <span className="dotted flexgrow flexbasis listTitle">{type}</span>
966
- {
967
- components.length>0&&<i className={"flexshrink listCount"}>{(components.filter(function(el) {return el.toLowerCase().indexOf('__') > -1}).length)}</i>
968
- }
969
- </div>
970
- }
971
- <div className={ viewGroup == type ? 'activeComponent' : 'hide'}>
1124
+ <div data-title={type}>
972
1125
  {
973
- components.map((component, i) => {
974
- let docsComp = component.search('__');
975
- return (
976
- <div className={((docsComp == -1) ? "componentMain" : "componentDocs")} key={'component' + i} >
977
- <a
978
- href={ docsComp == -1 && type != 'Global'&& type != 'Page' ? 'javascript:void(0);' : '#' + component}
979
- className={"dflex flexrow flexbasis alignVertical offSelection "+ (this.props.selectedComponent == '#' + component ? 'active' : '') } >
980
- <i className={"listIcon"}>
981
- <svg className='svg'>
982
- <use xlinkHref='#file'></use>
983
- </svg>
984
- </i>
985
- <span className="dotted flexgrow flexbasis listTitle"> {docsComp == -1 ? component : component.split('__')[1]}</span>
986
- {(components.filter(function(el) {return el.indexOf(component+'__') > -1}).length)>0 && (docsComp == -1) &&<i className={"flexshrink listCount subCount"}>{(components.filter(function(el) {return el.indexOf(component+'__') > -1}).length)}</i>}
987
- </a>
988
- </div>
989
- );
990
- })}
1126
+ components.length > 0 && <div className={"listItem dflex flexrow flexbasis alignVertical offSelection " + classNameTab} onClick={toggleGroup.bind(this, type)} id={type}>
1127
+ <i className={"flexshrink listIcon"}>
1128
+ <svg className='svg'>
1129
+ <use xlinkHref='#folder'></use>
1130
+ </svg>
1131
+ </i>
1132
+ <span className="dotted flexgrow flexbasis listTitle">{type}</span>
1133
+ {
1134
+ components.length > 0 && <i className={"flexshrink listCount"}>{(components.filter(function (el) { return el.toLowerCase().indexOf('__') > -1 }).length)}</i>
1135
+ }
1136
+ </div>
1137
+ }
1138
+ <div className={viewGroup == type ? 'activeComponent' : 'hide'}>
1139
+ {
1140
+ components.map((component, i) => {
1141
+ let docsComp = component.search('__');
1142
+ return (
1143
+ <div className={((docsComp == -1) ? "componentMain" : "componentDocs")} key={'component' + i} >
1144
+ <a
1145
+ href={docsComp == -1 && type != 'Global' && type != 'Page' ? 'javascript:void(0);' : '#' + component}
1146
+ className={"dflex flexrow flexbasis alignVertical offSelection " + (this.props.selectedComponent == '#' + component ? 'active' : '')} >
1147
+ <i className={"listIcon"}>
1148
+ <svg className='svg'>
1149
+ <use xlinkHref='#file'></use>
1150
+ </svg>
1151
+ </i>
1152
+ <span className="dotted flexgrow flexbasis listTitle"> {docsComp == -1 ? component : component.split('__')[1]}</span>
1153
+ {(components.filter(function (el) { return el.indexOf(component + '__') > -1 }).length) > 0 && (docsComp == -1) && <i className={"flexshrink listCount subCount"}>{(components.filter(function (el) { return el.indexOf(component + '__') > -1 }).length)}</i>}
1154
+ </a>
1155
+ </div>
1156
+ );
1157
+ })}
991
1158
  </div>
992
1159
  </div>
993
1160
  );
@@ -999,56 +1166,49 @@
999
1166
  super(props);
1000
1167
 
1001
1168
  }
1002
- componentDidMount(){
1003
- let {compName,src} = this.props
1004
- let element = document.getElementById(compName)
1005
- if (componentList[compName] && typeof CodeMirror !== 'undefined' && element ) {
1006
- CodeMirror.fromTextArea(element, {
1007
- lineNumbers: false,
1008
- styleActiveLine: false,
1009
- matchBrackets: false,
1010
- theme: 'blackboard'
1011
- });
1012
- }
1169
+ componentDidMount() {
1170
+ hljs.highlightAll();
1013
1171
  }
1014
1172
 
1015
1173
  render() {
1016
- let {src,compName} = this.props
1174
+ let { src, compName } = this.props
1017
1175
  return (
1018
- <div className={"dflex flexrow flexbasis "}>
1019
- <textarea className="srcCode" id={compName} defaultValue={src}/>
1020
- </div>
1176
+ <pre className="CodeTag">
1177
+ <code class="javascript hljs language-javascript" id="code-block">
1178
+ {src}
1179
+ </code>
1180
+ </pre>
1021
1181
  );
1022
1182
  }
1023
1183
  }
1024
- var user={
1025
- componentObj:{},
1026
- componentList:{},
1027
- dupCompList:[],
1028
- objList:function(fName,gName,key,comp){
1029
- if(this.componentList[key]){
1030
- this.componentList[key]=comp;
1184
+ var user = {
1185
+ componentObj: {},
1186
+ componentList: {},
1187
+ dupCompList: [],
1188
+ objList: function (fName, gName, key, comp) {
1189
+ if (this.componentList[key]) {
1190
+ this.componentList[key] = comp;
1031
1191
  this.dupCompList.push(key)
1032
1192
  }
1033
- else{
1034
- this.componentList[key]=comp;
1193
+ else {
1194
+ this.componentList[key] = comp;
1035
1195
  }
1036
- if(gName){
1037
- if(!this.componentObj[fName]){
1038
- this.componentObj[fName]={}
1196
+ if (gName) {
1197
+ if (!this.componentObj[fName]) {
1198
+ this.componentObj[fName] = {}
1039
1199
  }
1040
- if(!this.componentObj[fName][gName]){
1200
+ if (!this.componentObj[fName][gName]) {
1041
1201
  this.componentObj[fName][gName] = [];
1042
1202
  this.componentObj[fName][gName].push(key)
1043
1203
  }
1044
- else{
1204
+ else {
1045
1205
  this.componentObj[fName][gName].push(key)
1046
1206
  }
1047
1207
  }
1048
- return {componentObj:this.componentObj,componentList:this.componentList}
1208
+ return { componentObj: this.componentObj, componentList: this.componentList }
1049
1209
  },
1050
- renderDoc:function(compOBJ,dupCompList){
1051
- return(
1210
+ renderDoc: function (compOBJ, dupCompList) {
1211
+ return (
1052
1212
  ReactDOM.render(
1053
1213
  <Doc
1054
1214
  components={Component}
@@ -1060,52 +1220,52 @@
1060
1220
  )
1061
1221
  }
1062
1222
  }
1063
- var compGroupObj=function(comp,key,compGroup){
1064
- if (comp == 'React' || comp == 'ReactDOM' || comp =='renderToStaticMarkup') {
1223
+ var compGroupObj = function (comp, key, compGroup) {
1224
+ if (comp == 'React' || comp == 'ReactDOM' || comp == 'renderToStaticMarkup') {
1065
1225
  return;
1066
1226
  }
1067
- else if(comp=='_provider'){
1068
- return user.objList(null,null,comp,compGroup[comp])
1227
+ else if (comp == '_provider') {
1228
+ return user.objList(null, null, comp, compGroup[comp])
1069
1229
  }
1070
- else{
1071
- if(compGroup[comp].docs && compGroup[comp].docs.componentGroup ){
1230
+ else {
1231
+ if (compGroup[comp].docs && compGroup[comp].docs.componentGroup) {
1072
1232
  let groupName = compGroup[comp].docs.componentGroup;
1073
1233
  let folderName = compGroup[comp].docs.folderName || "General";
1074
- if(comp=='default'){
1075
- return user.objList(folderName,groupName,key,compGroup[comp])
1234
+ if (comp == 'default') {
1235
+ return user.objList(folderName, groupName, key, compGroup[comp])
1076
1236
  }
1077
- else{
1078
- return user.objList(folderName,groupName,comp,compGroup[comp])
1237
+ else {
1238
+ return user.objList(folderName, groupName, comp, compGroup[comp])
1079
1239
  }
1080
1240
  }
1081
1241
  }
1082
1242
  }
1083
1243
  Promise.all(Object.keys(Component).map((key) => {
1084
- let componentKey=Component[key];
1085
- if (key == 'React' || key == 'ReactDOM' || key=='renderToStaticMarkup') {
1244
+ let componentKey = Component[key];
1245
+ if (key == 'React' || key == 'ReactDOM' || key == 'renderToStaticMarkup') {
1086
1246
  return;
1087
1247
  }
1088
- if(key=='_provider'){
1089
- return compGroupObj(key,null,Component)
1248
+ if (key == '_provider') {
1249
+ return compGroupObj(key, null, Component)
1090
1250
  }
1091
- try{
1092
- return(
1093
- componentKey && componentKey.then((res)=>{
1251
+ try {
1252
+ return (
1253
+ componentKey && componentKey.then((res) => {
1094
1254
  let compList;
1095
- Object.keys(res).forEach((comp)=>{
1096
- let compGroup=res[comp];
1097
- Object.keys(compGroup).forEach((comps)=>{
1098
- compGroupObj(comps,key,compGroup)
1255
+ Object.keys(res).forEach((comp) => {
1256
+ let compGroup = res[comp];
1257
+ Object.keys(compGroup).forEach((comps) => {
1258
+ compGroupObj(comps, key, compGroup)
1099
1259
  })
1100
1260
  })
1101
1261
  })
1102
1262
  )
1103
- }catch(error){
1104
- compGroupObj(key,null,Component)
1263
+ } catch (error) {
1264
+ compGroupObj(key, null, Component)
1105
1265
  }
1106
- })).then(()=>{
1107
- window.componentList=user.componentList
1108
- user.renderDoc(user.componentObj,user.dupCompList)
1266
+ })).then(() => {
1267
+ window.componentList = user.componentList
1268
+ user.renderDoc(user.componentObj, user.dupCompList)
1109
1269
  })
1110
1270
  };
1111
1271
  var onLoader = function () {
@@ -1129,9 +1289,9 @@
1129
1289
 
1130
1290
  var redraw = false;
1131
1291
 
1132
- var pane = document.getElementById( 'resize' );
1133
- var ghostpane = document.getElementById( 'ghostpane' );
1134
- function setBounds( element, x, y, w, h ) {
1292
+ var pane = document.getElementById('resize');
1293
+ var ghostpane = document.getElementById('ghostpane');
1294
+ function setBounds(element, x, y, w, h) {
1135
1295
  element.style.left = x + 'px';
1136
1296
  element.style.top = y + 'px';
1137
1297
  element.style.width = w + 'px';
@@ -1149,35 +1309,35 @@
1149
1309
  }
1150
1310
 
1151
1311
  // Mouse events
1152
- pane && pane.addEventListener( 'mousedown', onMouseDown );
1153
- pane && document.addEventListener( 'mousemove', onMove );
1154
- pane && document.addEventListener( 'mouseup', onUp );
1312
+ pane && pane.addEventListener('mousedown', onMouseDown);
1313
+ pane && document.addEventListener('mousemove', onMove);
1314
+ pane && document.addEventListener('mouseup', onUp);
1155
1315
 
1156
1316
  // Touch events
1157
- pane && pane.addEventListener( 'touchstart', onTouchDown );
1158
- pane && document.addEventListener( 'touchmove', onTouchMove );
1159
- pane && document.addEventListener( 'touchend', onTouchEnd );
1317
+ pane && pane.addEventListener('touchstart', onTouchDown);
1318
+ pane && document.addEventListener('touchmove', onTouchMove);
1319
+ pane && document.addEventListener('touchend', onTouchEnd);
1160
1320
 
1161
- function onTouchDown( e ) {
1162
- onDown( e.touches[ 0 ] );
1321
+ function onTouchDown(e) {
1322
+ onDown(e.touches[0]);
1163
1323
  e.preventDefault();
1164
1324
  }
1165
1325
 
1166
- function onTouchMove( e ) {
1167
- onMove( e.touches[ 0 ] );
1326
+ function onTouchMove(e) {
1327
+ onMove(e.touches[0]);
1168
1328
  }
1169
1329
 
1170
- function onTouchEnd( e ) {
1171
- if ( e.touches.length == 0 ) onUp( e.changedTouches[ 0 ] );
1330
+ function onTouchEnd(e) {
1331
+ if (e.touches.length == 0) onUp(e.changedTouches[0]);
1172
1332
  }
1173
1333
 
1174
- function onMouseDown( e ) {
1175
- onDown( e );
1334
+ function onMouseDown(e) {
1335
+ onDown(e);
1176
1336
  e.preventDefault();
1177
1337
  }
1178
1338
 
1179
- function onDown( e ) {
1180
- calc( e );
1339
+ function onDown(e) {
1340
+ calc(e);
1181
1341
 
1182
1342
  var isResizing = onRightEdge || onBottomEdge || onTopEdge || onLeftEdge;
1183
1343
 
@@ -1201,7 +1361,7 @@
1201
1361
  return x > 0 && x < b.width && y > 0 && y < b.height && y < 30;
1202
1362
  }
1203
1363
 
1204
- function calc( e ) {
1364
+ function calc(e) {
1205
1365
  b = pane.getBoundingClientRect();
1206
1366
  x = e.clientX - b.left;
1207
1367
  y = e.clientY - b.top;
@@ -1217,8 +1377,8 @@
1217
1377
 
1218
1378
  var e;
1219
1379
 
1220
- function onMove( ee ) {
1221
- calc( ee );
1380
+ function onMove(ee) {
1381
+ calc(ee);
1222
1382
 
1223
1383
  e = ee;
1224
1384
 
@@ -1226,34 +1386,34 @@
1226
1386
  }
1227
1387
 
1228
1388
  function animate() {
1229
- requestAnimationFrame( animate );
1389
+ requestAnimationFrame(animate);
1230
1390
 
1231
- if ( !redraw ) return;
1391
+ if (!redraw) return;
1232
1392
 
1233
1393
  redraw = false;
1234
1394
 
1235
- if ( clicked && clicked.isResizing ) {
1236
- if ( clicked.onRightEdge ) pane.style.width = Math.max( x, minWidth ) + 'px';
1237
- if ( clicked.onBottomEdge )
1238
- pane.style.height = Math.max( y, minHeight ) + 'px';
1395
+ if (clicked && clicked.isResizing) {
1396
+ if (clicked.onRightEdge) pane.style.width = Math.max(x, minWidth) + 'px';
1397
+ if (clicked.onBottomEdge)
1398
+ pane.style.height = Math.max(y, minHeight) + 'px';
1239
1399
 
1240
- if ( clicked.onLeftEdge ) {
1400
+ if (clicked.onLeftEdge) {
1241
1401
  var currentWidth = Math.max(
1242
1402
  clicked.cx - e.clientX + clicked.w,
1243
1403
  minWidth
1244
1404
  );
1245
- if ( currentWidth > minWidth ) {
1405
+ if (currentWidth > minWidth) {
1246
1406
  pane.style.width = currentWidth + 'px';
1247
1407
  // pane.style.left = e.clientX + 'px';
1248
1408
  }
1249
1409
  }
1250
1410
 
1251
- if ( clicked.onTopEdge ) {
1411
+ if (clicked.onTopEdge) {
1252
1412
  var currentHeight = Math.max(
1253
1413
  clicked.cy - e.clientY + clicked.h,
1254
1414
  minHeight
1255
1415
  );
1256
- if ( currentHeight > minHeight ) {
1416
+ if (currentHeight > minHeight) {
1257
1417
  pane.style.height = currentHeight + 'px';
1258
1418
  pane.style.top = e.clientY + 'px';
1259
1419
  }
@@ -1264,7 +1424,7 @@
1264
1424
  return;
1265
1425
  }
1266
1426
 
1267
- if ( clicked && clicked.isMoving ) {
1427
+ if (clicked && clicked.isMoving) {
1268
1428
  if (
1269
1429
  b.top < FULLSCREEN_MARGINS ||
1270
1430
  b.left < FULLSCREEN_MARGINS ||
@@ -1272,17 +1432,17 @@
1272
1432
  b.bottom > window.innerHeight - FULLSCREEN_MARGINS
1273
1433
  ) {
1274
1434
  // hintFull();
1275
- setBounds( ghostpane, 0, 0, window.innerWidth, window.innerHeight );
1435
+ setBounds(ghostpane, 0, 0, window.innerWidth, window.innerHeight);
1276
1436
  ghostpane.style.opacity = 0.2;
1277
- } else if ( b.top < MARGINS ) {
1437
+ } else if (b.top < MARGINS) {
1278
1438
  // hintTop();
1279
- setBounds( ghostpane, 0, 0, window.innerWidth, window.innerHeight / 2 );
1439
+ setBounds(ghostpane, 0, 0, window.innerWidth, window.innerHeight / 2);
1280
1440
  ghostpane.style.opacity = 0.2;
1281
- } else if ( b.left < MARGINS ) {
1441
+ } else if (b.left < MARGINS) {
1282
1442
  // hintLeft();
1283
- setBounds( ghostpane, 0, 0, window.innerWidth / 2, window.innerHeight );
1443
+ setBounds(ghostpane, 0, 0, window.innerWidth / 2, window.innerHeight);
1284
1444
  ghostpane.style.opacity = 0.2;
1285
- } else if ( b.right > rightScreenEdge ) {
1445
+ } else if (b.right > rightScreenEdge) {
1286
1446
  // hintRight();
1287
1447
  setBounds(
1288
1448
  ghostpane,
@@ -1292,7 +1452,7 @@
1292
1452
  window.innerHeight
1293
1453
  );
1294
1454
  ghostpane.style.opacity = 0.2;
1295
- } else if ( b.bottom > bottomScreenEdge ) {
1455
+ } else if (b.bottom > bottomScreenEdge) {
1296
1456
  // hintBottom();
1297
1457
  setBounds(
1298
1458
  ghostpane,
@@ -1306,11 +1466,11 @@
1306
1466
  hintHide();
1307
1467
  }
1308
1468
 
1309
- if ( preSnapped ) {
1469
+ if (preSnapped) {
1310
1470
  setBounds(
1311
1471
  pane,
1312
1472
  e.clientX - preSnapped.width / 2,
1313
- e.clientY - Math.min( clicked.y, preSnapped.height ),
1473
+ e.clientY - Math.min(clicked.y, preSnapped.height),
1314
1474
  preSnapped.width,
1315
1475
  preSnapped.height
1316
1476
  );
@@ -1327,15 +1487,15 @@
1327
1487
  // This code executes when mouse moves without clicking
1328
1488
 
1329
1489
  // style cursor
1330
- if ( ( onRightEdge && onBottomEdge ) || ( onLeftEdge && onTopEdge ) ) {
1490
+ if ((onRightEdge && onBottomEdge) || (onLeftEdge && onTopEdge)) {
1331
1491
  pane.style.cursor = 'nwse-resize';
1332
- } else if ( ( onRightEdge && onTopEdge ) || ( onBottomEdge && onLeftEdge ) ) {
1492
+ } else if ((onRightEdge && onTopEdge) || (onBottomEdge && onLeftEdge)) {
1333
1493
  pane.style.cursor = 'nesw-resize';
1334
- } else if ( onRightEdge || onLeftEdge ) {
1494
+ } else if (onRightEdge || onLeftEdge) {
1335
1495
  pane.style.cursor = 'ew-resize';
1336
- } else if ( onBottomEdge || onTopEdge ) {
1496
+ } else if (onBottomEdge || onTopEdge) {
1337
1497
  pane.style.cursor = 'ns-resize';
1338
- } else if ( canMove() ) {
1498
+ } else if (canMove()) {
1339
1499
  pane.style.cursor = 'move';
1340
1500
  } else {
1341
1501
  pane.style.cursor = 'default';
@@ -1344,10 +1504,10 @@
1344
1504
 
1345
1505
  animate();
1346
1506
 
1347
- function onUp( e ) {
1348
- calc( e );
1507
+ function onUp(e) {
1508
+ calc(e);
1349
1509
 
1350
- if ( clicked && clicked.isMoving ) {
1510
+ if (clicked && clicked.isMoving) {
1351
1511
  // Snap
1352
1512
  var snapped = {
1353
1513
  width: b.width,
@@ -1361,17 +1521,17 @@
1361
1521
  b.bottom > window.innerHeight - FULLSCREEN_MARGINS
1362
1522
  ) {
1363
1523
  // hintFull();
1364
- setBounds( pane, 0, 0, window.innerWidth, window.innerHeight );
1524
+ setBounds(pane, 0, 0, window.innerWidth, window.innerHeight);
1365
1525
  preSnapped = snapped;
1366
- } else if ( b.top < MARGINS ) {
1526
+ } else if (b.top < MARGINS) {
1367
1527
  // hintTop();
1368
- setBounds( pane, 0, 0, window.innerWidth, window.innerHeight / 2 );
1528
+ setBounds(pane, 0, 0, window.innerWidth, window.innerHeight / 2);
1369
1529
  preSnapped = snapped;
1370
- } else if ( b.left < MARGINS ) {
1530
+ } else if (b.left < MARGINS) {
1371
1531
  // hintLeft();
1372
- setBounds( pane, 0, 0, window.innerWidth / 2, window.innerHeight );
1532
+ setBounds(pane, 0, 0, window.innerWidth / 2, window.innerHeight);
1373
1533
  preSnapped = snapped;
1374
- } else if ( b.right > rightScreenEdge ) {
1534
+ } else if (b.right > rightScreenEdge) {
1375
1535
  // hintRight();
1376
1536
  setBounds(
1377
1537
  pane,
@@ -1381,7 +1541,7 @@
1381
1541
  window.innerHeight
1382
1542
  );
1383
1543
  preSnapped = snapped;
1384
- } else if ( b.bottom > bottomScreenEdge ) {
1544
+ } else if (b.bottom > bottomScreenEdge) {
1385
1545
  // hintBottom();
1386
1546
  setBounds(
1387
1547
  pane,
@@ -1406,97 +1566,100 @@
1406
1566
  <script type="text/javascript">
1407
1567
  var html =
1408
1568
  "<body><script src='/docs/js/vendor.js'><\/script><script src='/docs/js/main.js'><\/script><script src='/docs/js/moduleStats.js'><\/script> <script> if(typeof mdata==\"undefined\"){mdata={};}parent.loadDOC(Component, mdata) <\/script> <\/body>";
1409
- var iframe = document.getElementById( 'ifm' );
1569
+ var iframe = document.getElementById('ifm');
1410
1570
  var frameDoc = iframe.document;
1411
- if ( iframe.contentWindow ) {
1571
+ if (iframe.contentWindow) {
1412
1572
  frameDoc = iframe.contentWindow.document;
1413
1573
  frameDoc.open();
1414
- frameDoc.writeln( html );
1574
+ frameDoc.writeln(html);
1415
1575
  frameDoc.close();
1416
1576
  } else {
1417
1577
  }
1418
1578
  </script>
1419
1579
  <div style="visibility: hidden;height: 0;width: 0;height:0">
1420
- <svg
1421
- xmlSpace="preserve"
1422
- version="1.1"
1423
- xmlns="http://www.w3.org/2000/svg"
1424
- xmlnsXlink="http://www.w3.org/1999/xlink"
1425
- >
1426
- <symbol id="home" x="0px" y="0px" viewBox="0 0 495.398 495.398" fill='#FFFFFF' enableBackground="new 0 0 495.398 495.398">
1427
- <path d="M487.083,225.514l-75.08-75.08V63.704c0-15.682-12.708-28.391-28.413-28.391c-15.669,0-28.377,12.709-28.377,28.391 v29.941L299.31,37.74c-27.639-27.624-75.694-27.575-103.27,0.05L8.312,225.514c-11.082,11.104-11.082,29.071,0,40.158 c11.087,11.101,29.089,11.101,40.172,0l187.71-187.729c6.115-6.083,16.893-6.083,22.976-0.018l187.742,187.747 c5.567,5.551,12.825,8.312,20.081,8.312c7.271,0,14.541-2.764,20.091-8.312C498.17,254.586,498.17,236.619,487.083,225.514z"/>
1428
- <path d="M257.561,131.836c-5.454-5.451-14.285-5.451-19.723,0L72.712,296.913c-2.607,2.606-4.085,6.164-4.085,9.877v120.401 c0,28.253,22.908,51.16,51.16,51.16h81.754v-126.61h92.299v126.61h81.755c28.251,0,51.159-22.907,51.159-51.159V306.79 c0-3.713-1.465-7.271-4.085-9.877L257.561,131.836z"/>
1580
+ <svg xmlSpace="preserve" version="1.1" xmlns="http://www.w3.org/2000/svg"
1581
+ xmlnsXlink="http://www.w3.org/1999/xlink">
1582
+ <symbol id="home" x="0px" y="0px" viewBox="0 0 495.398 495.398" fill='#FFFFFF'
1583
+ enableBackground="new 0 0 495.398 495.398">
1584
+ <path
1585
+ d="M487.083,225.514l-75.08-75.08V63.704c0-15.682-12.708-28.391-28.413-28.391c-15.669,0-28.377,12.709-28.377,28.391 v29.941L299.31,37.74c-27.639-27.624-75.694-27.575-103.27,0.05L8.312,225.514c-11.082,11.104-11.082,29.071,0,40.158 c11.087,11.101,29.089,11.101,40.172,0l187.71-187.729c6.115-6.083,16.893-6.083,22.976-0.018l187.742,187.747 c5.567,5.551,12.825,8.312,20.081,8.312c7.271,0,14.541-2.764,20.091-8.312C498.17,254.586,498.17,236.619,487.083,225.514z" />
1586
+ <path
1587
+ d="M257.561,131.836c-5.454-5.451-14.285-5.451-19.723,0L72.712,296.913c-2.607,2.606-4.085,6.164-4.085,9.877v120.401 c0,28.253,22.908,51.16,51.16,51.16h81.754v-126.61h92.299v126.61h81.755c28.251,0,51.159-22.907,51.159-51.159V306.79 c0-3.713-1.465-7.271-4.085-9.877L257.561,131.836z" />
1429
1588
  </symbol>
1430
- <symbol
1431
- id='bottomArrow'
1432
- viewBox="0 0 792 792"
1433
- >
1434
- <polygon
1435
- points="580.802,369.604 580.802,369.604 211.198,0 184.802,26.396 554.405,396 184.802,765.604 211.198,792 607.198,396"
1436
- />
1589
+ <symbol id='bottomArrow' viewBox="0 0 792 792">
1590
+ <polygon
1591
+ points="580.802,369.604 580.802,369.604 211.198,0 184.802,26.396 554.405,396 184.802,765.604 211.198,792 607.198,396" />
1437
1592
 
1438
1593
  </symbol>
1439
- <symbol id="reload" viewBox="0 0 28.265 28.265">
1440
- <path d="M14.133,28.265c-7.061,0-12.805-5.75-12.805-12.809c0-7.06,5.744-12.807,12.805-12.807c0.469,0,0.943,0.027,1.414,0.08 v-2.07c0-0.266,0.164-0.508,0.406-0.611c0.252-0.098,0.531-0.043,0.723,0.148l4.537,4.547c0.258,0.258,0.258,0.67,0,0.932 l-4.535,4.557c-0.193,0.188-0.473,0.246-0.725,0.143c-0.242-0.104-0.406-0.344-0.406-0.609V7.47 c-0.469-0.086-0.941-0.125-1.414-0.125c-4.473,0-8.113,3.639-8.113,8.111c0,4.471,3.641,8.113,8.113,8.113s8.111-3.643,8.111-8.113 c0-0.363,0.295-0.66,0.662-0.66h3.369c0.365,0,0.662,0.297,0.662,0.66C26.937,22.515,21.189,28.265,14.133,28.265z"/>
1594
+ <symbol id="reload" viewBox="0 0 28.265 28.265">
1595
+ <path
1596
+ d="M14.133,28.265c-7.061,0-12.805-5.75-12.805-12.809c0-7.06,5.744-12.807,12.805-12.807c0.469,0,0.943,0.027,1.414,0.08 v-2.07c0-0.266,0.164-0.508,0.406-0.611c0.252-0.098,0.531-0.043,0.723,0.148l4.537,4.547c0.258,0.258,0.258,0.67,0,0.932 l-4.535,4.557c-0.193,0.188-0.473,0.246-0.725,0.143c-0.242-0.104-0.406-0.344-0.406-0.609V7.47 c-0.469-0.086-0.941-0.125-1.414-0.125c-4.473,0-8.113,3.639-8.113,8.111c0,4.471,3.641,8.113,8.113,8.113s8.111-3.643,8.111-8.113 c0-0.363,0.295-0.66,0.662-0.66h3.369c0.365,0,0.662,0.297,0.662,0.66C26.937,22.515,21.189,28.265,14.133,28.265z" />
1441
1597
  </symbol>
1442
1598
  <symbol id='newTab' x="0px" y="0px" viewBox="0 0 26 26" enableBackground='new 0 0 26 26'>
1443
- <path d="M18,17.759v3.366C18,22.159,17.159,23,16.125,23H4.875C3.841,23,3,22.159,3,21.125V9.875C3,8.841,3.841,8,4.875,8h3.429l3.001-3h-6.43C2.182,5,0,7.182,0,9.875v11.25C0,23.818,2.182,26,4.875,26h11.25C18.818,26,21,23.818,21,21.125v-6.367L18,17.759z"/>
1444
- <path d="M22.581,0H12.322c-1.886,0.002-1.755,0.51-0.76,1.504l3.22,3.22l-5.52,5.519c-1.145,1.144-1.144,2.998,0,4.141l2.41,2.411c1.144,1.141,2.996,1.142,4.14-0.001l5.52-5.52l3.16,3.16c1.101,1.1,1.507,1.129,1.507-0.757L26,3.419C25.999-0.018,26.024-0.001,22.581,0z"/>
1599
+ <path
1600
+ d="M18,17.759v3.366C18,22.159,17.159,23,16.125,23H4.875C3.841,23,3,22.159,3,21.125V9.875C3,8.841,3.841,8,4.875,8h3.429l3.001-3h-6.43C2.182,5,0,7.182,0,9.875v11.25C0,23.818,2.182,26,4.875,26h11.25C18.818,26,21,23.818,21,21.125v-6.367L18,17.759z" />
1601
+ <path
1602
+ d="M22.581,0H12.322c-1.886,0.002-1.755,0.51-0.76,1.504l3.22,3.22l-5.52,5.519c-1.145,1.144-1.144,2.998,0,4.141l2.41,2.411c1.144,1.141,2.996,1.142,4.14-0.001l5.52-5.52l3.16,3.16c1.101,1.1,1.507,1.129,1.507-0.757L26,3.419C25.999-0.018,26.024-0.001,22.581,0z" />
1445
1603
  </symbol>
1446
- <symbol id='RTL'
1447
- width="13" height="16"
1448
- viewBox="0 0 13 16"
1449
- fill="none"
1450
- >
1451
- <path d="M12.2415 0.318399H3.92167C3.37879 0.318399 2.87197 0.404799 2.39552 0.575999C1.92097 0.747199 1.50527 0.984 1.15221 1.2848C0.799141 1.5856 0.518208 1.936 0.311304 2.3376C0.104401 2.7392 0 3.1632 0 3.616C0 4.0736 0.104401 4.5008 0.311304 4.9024C0.518208 5.3024 0.799141 5.6528 1.15221 5.9552C1.50527 6.2576 1.92097 6.4928 2.39552 6.664C2.87007 6.8352 3.37879 6.9216 3.92167 6.9216H4.89735V10.6368C4.89735 10.7504 4.9448 10.8464 5.04161 10.9264C5.13842 11.0064 5.25231 11.048 5.38518 11.048C5.52565 11.048 5.64334 11.008 5.73825 10.9264C5.83316 10.8464 5.88251 10.7488 5.88251 10.6368V1.1408H8.81902V10.6368C8.81902 10.7504 8.86648 10.8464 8.96328 10.9264C9.06009 11.0064 9.17398 11.048 9.30686 11.048C9.44163 11.048 9.55552 11.008 9.65043 10.9264C9.74534 10.8448 9.79469 10.7488 9.79469 10.6368V1.1408H12.2434C12.3781 1.1408 12.492 1.1008 12.5869 1.0192C12.6818 0.9376 12.7312 0.841599 12.7312 0.729599C12.7312 0.615999 12.6837 0.52 12.5869 0.44C12.4901 0.36 12.3762 0.318399 12.2415 0.318399ZM4.89735 6.0992H3.92167C3.51356 6.0992 3.13013 6.0336 2.77326 5.9024C2.4164 5.7712 2.1051 5.5936 1.84125 5.3696C1.5774 5.1472 1.3686 4.8848 1.21485 4.584C1.06109 4.2832 0.985164 3.96 0.985164 3.616C0.985164 3.2768 1.06109 2.9584 1.21485 2.656C1.3686 2.3552 1.5774 2.0928 1.84125 1.8704C2.1051 1.648 2.4164 1.4704 2.77326 1.3376C3.13013 1.2064 3.51356 1.1408 3.92167 1.1408H4.89735V6.0992ZM11.2658 13.5232H2.16205L3.29147 12.5792C3.38638 12.4992 3.43574 12.4 3.43574 12.2848C3.43574 12.1696 3.38828 12.0704 3.29147 11.9904C3.19656 11.9104 3.07887 11.8688 2.9422 11.8688C2.80553 11.8688 2.68785 11.9088 2.59294 11.9904L0.630201 13.6448C0.535291 13.7248 0.485938 13.824 0.485938 13.9392C0.485938 14.0544 0.533393 14.1536 0.630201 14.2336L2.59104 15.8784C2.64229 15.9216 2.69734 15.952 2.75808 15.9712C2.81882 15.9904 2.87767 16 2.93461 16C2.99915 16 3.05989 15.9904 3.12064 15.9712C3.18138 15.952 3.23642 15.9216 3.28768 15.8784C3.38259 15.7984 3.43194 15.7008 3.43194 15.5888C3.43194 15.4752 3.38448 15.3792 3.28768 15.2992L2.15825 14.3552H11.2639C11.3987 14.3552 11.5126 14.3152 11.6075 14.2336C11.7024 14.1536 11.7517 14.0528 11.7517 13.936C11.7517 13.8224 11.7043 13.7264 11.6075 13.6464C11.5145 13.5632 11.4006 13.5232 11.2658 13.5232Z" fill="white"/>
1604
+ <symbol id='RTL' width="13" height="16" viewBox="0 0 13 16" fill="none">
1605
+ <path
1606
+ d="M12.2415 0.318399H3.92167C3.37879 0.318399 2.87197 0.404799 2.39552 0.575999C1.92097 0.747199 1.50527 0.984 1.15221 1.2848C0.799141 1.5856 0.518208 1.936 0.311304 2.3376C0.104401 2.7392 0 3.1632 0 3.616C0 4.0736 0.104401 4.5008 0.311304 4.9024C0.518208 5.3024 0.799141 5.6528 1.15221 5.9552C1.50527 6.2576 1.92097 6.4928 2.39552 6.664C2.87007 6.8352 3.37879 6.9216 3.92167 6.9216H4.89735V10.6368C4.89735 10.7504 4.9448 10.8464 5.04161 10.9264C5.13842 11.0064 5.25231 11.048 5.38518 11.048C5.52565 11.048 5.64334 11.008 5.73825 10.9264C5.83316 10.8464 5.88251 10.7488 5.88251 10.6368V1.1408H8.81902V10.6368C8.81902 10.7504 8.86648 10.8464 8.96328 10.9264C9.06009 11.0064 9.17398 11.048 9.30686 11.048C9.44163 11.048 9.55552 11.008 9.65043 10.9264C9.74534 10.8448 9.79469 10.7488 9.79469 10.6368V1.1408H12.2434C12.3781 1.1408 12.492 1.1008 12.5869 1.0192C12.6818 0.9376 12.7312 0.841599 12.7312 0.729599C12.7312 0.615999 12.6837 0.52 12.5869 0.44C12.4901 0.36 12.3762 0.318399 12.2415 0.318399ZM4.89735 6.0992H3.92167C3.51356 6.0992 3.13013 6.0336 2.77326 5.9024C2.4164 5.7712 2.1051 5.5936 1.84125 5.3696C1.5774 5.1472 1.3686 4.8848 1.21485 4.584C1.06109 4.2832 0.985164 3.96 0.985164 3.616C0.985164 3.2768 1.06109 2.9584 1.21485 2.656C1.3686 2.3552 1.5774 2.0928 1.84125 1.8704C2.1051 1.648 2.4164 1.4704 2.77326 1.3376C3.13013 1.2064 3.51356 1.1408 3.92167 1.1408H4.89735V6.0992ZM11.2658 13.5232H2.16205L3.29147 12.5792C3.38638 12.4992 3.43574 12.4 3.43574 12.2848C3.43574 12.1696 3.38828 12.0704 3.29147 11.9904C3.19656 11.9104 3.07887 11.8688 2.9422 11.8688C2.80553 11.8688 2.68785 11.9088 2.59294 11.9904L0.630201 13.6448C0.535291 13.7248 0.485938 13.824 0.485938 13.9392C0.485938 14.0544 0.533393 14.1536 0.630201 14.2336L2.59104 15.8784C2.64229 15.9216 2.69734 15.952 2.75808 15.9712C2.81882 15.9904 2.87767 16 2.93461 16C2.99915 16 3.05989 15.9904 3.12064 15.9712C3.18138 15.952 3.23642 15.9216 3.28768 15.8784C3.38259 15.7984 3.43194 15.7008 3.43194 15.5888C3.43194 15.4752 3.38448 15.3792 3.28768 15.2992L2.15825 14.3552H11.2639C11.3987 14.3552 11.5126 14.3152 11.6075 14.2336C11.7024 14.1536 11.7517 14.0528 11.7517 13.936C11.7517 13.8224 11.7043 13.7264 11.6075 13.6464C11.5145 13.5632 11.4006 13.5232 11.2658 13.5232Z"
1607
+ fill="white" />
1452
1608
  </symbol>
1453
1609
  <symbol id="rem" enableBackground="new 0 0 458.353 458.353" viewBox="0 0 458.353 458.353">
1454
- <path d="m415.382 200.529h42.971l-57.294-57.294-57.294 57.294h42.971v171.882h-42.971l57.294 57.294 57.294-57.294h-42.971z"/>
1455
- <path d="m343.765 85.941v-85.941h-343.765v85.941h28.647v-57.294h128.912v401.059h-71.618v28.647h171.882v-28.647h-71.618v-401.059h128.912v57.294z"/>
1610
+ <path
1611
+ d="m415.382 200.529h42.971l-57.294-57.294-57.294 57.294h42.971v171.882h-42.971l57.294 57.294 57.294-57.294h-42.971z" />
1612
+ <path
1613
+ d="m343.765 85.941v-85.941h-343.765v85.941h28.647v-57.294h128.912v401.059h-71.618v28.647h171.882v-28.647h-71.618v-401.059h128.912v57.294z" />
1456
1614
  </symbol>
1457
1615
  <symbol id='fullScreen' viewBox="0 0 18 18">
1458
- <path d="M4.5 11H3v4h4v-1.5H4.5V11zM3 7h1.5V4.5H7V3H3v4zm10.5 6.5H11V15h4v-4h-1.5v2.5zM11 3v1.5h2.5V7H15V3h-4z"/>
1616
+ <path
1617
+ d="M4.5 11H3v4h4v-1.5H4.5V11zM3 7h1.5V4.5H7V3H3v4zm10.5 6.5H11V15h4v-4h-1.5v2.5zM11 3v1.5h2.5V7H15V3h-4z" />
1459
1618
  </symbol>
1460
- <symbol id='folder' viewBox="0 0 60 60" >
1461
- <path d="M56.98,11.5H28.02V6.52c0-1.665-1.354-3.02-3.02-3.02H3.02C1.354,3.5,0,4.854,0,6.52V20.5v2v30.98 c0,1.665,1.354,3.02,3.02,3.02H56.98c1.665,0,3.02-1.354,3.02-3.02V22.5v-2v-5.98C60,12.854,58.646,11.5,56.98,11.5z M58,53.48 c0,0.563-0.457,1.02-1.02,1.02H3.02C2.457,54.5,2,54.043,2,53.48V22.5h56V53.48z M2,20.5V6.52C2,5.957,2.457,5.5,3.02,5.5H25 c0.562,0,1.02,0.457,1.02,1.02v6.98H56.98c0.563,0,1.02,0.457,1.02,1.02v5.98H2z" fill="#FFFFFF"/>
1619
+ <symbol id='folder' viewBox="0 0 60 60">
1620
+ <path
1621
+ d="M56.98,11.5H28.02V6.52c0-1.665-1.354-3.02-3.02-3.02H3.02C1.354,3.5,0,4.854,0,6.52V20.5v2v30.98 c0,1.665,1.354,3.02,3.02,3.02H56.98c1.665,0,3.02-1.354,3.02-3.02V22.5v-2v-5.98C60,12.854,58.646,11.5,56.98,11.5z M58,53.48 c0,0.563-0.457,1.02-1.02,1.02H3.02C2.457,54.5,2,54.043,2,53.48V22.5h56V53.48z M2,20.5V6.52C2,5.957,2.457,5.5,3.02,5.5H25 c0.562,0,1.02,0.457,1.02,1.02v6.98H56.98c0.563,0,1.02,0.457,1.02,1.02v5.98H2z"
1622
+ fill="#FFFFFF" />
1462
1623
  </symbol>
1463
- <symbol id='file' viewBox="0 0 512 512" >
1464
- <path d="M405.333,42.667h-44.632c-4.418-12.389-16.147-21.333-30.035-21.333h-32.219C288.427,8.042,272.677,0,256,0 s-32.427,8.042-42.448,21.333h-32.219c-13.888,0-25.617,8.944-30.035,21.333h-44.631C83.135,42.667,64,61.802,64,85.333v384 C64,492.865,83.135,512,106.667,512h298.667C428.865,512,448,492.865,448,469.333v-384C448,61.802,428.865,42.667,405.333,42.667 z M170.667,53.333c0-5.885,4.781-10.667,10.667-10.667h37.917c3.792,0,7.302-2.021,9.219-5.302 c5.844-10.042,16.135-16.031,27.531-16.031s21.688,5.99,27.531,16.031c1.917,3.281,5.427,5.302,9.219,5.302h37.917 c5.885,0,10.667,4.781,10.667,10.667V64c0,11.76-9.573,21.333-21.333,21.333H192c-11.76,0-21.333-9.573-21.333-21.333V53.333z M426.667,469.333c0,11.76-9.573,21.333-21.333,21.333H106.667c-11.76,0-21.333-9.573-21.333-21.333v-384 c0-11.76,9.573-21.333,21.333-21.333h42.667c0,23.531,19.135,42.667,42.667,42.667h128c23.531,0,42.667-19.135,42.667-42.667 h42.667c11.76,0,21.333,9.573,21.333,21.333V469.333z" fill="#FFFFFF"/>
1465
- <path d="M352,234.667H160c-5.896,0-10.667,4.771-10.667,10.667c0,5.896,4.771,10.667,10.667,10.667h192 c5.896,0,10.667-4.771,10.667-10.667C362.667,239.438,357.896,234.667,352,234.667z" fill="#FFFFFF"/>
1466
- <path d="M352,277.333H160c-5.896,0-10.667,4.771-10.667,10.667s4.771,10.667,10.667,10.667h192 c5.896,0,10.667-4.771,10.667-10.667S357.896,277.333,352,277.333z" fill="#FFFFFF"/>
1467
- <path d="M352,320H160c-5.896,0-10.667,4.771-10.667,10.667c0,5.896,4.771,10.667,10.667,10.667h192 c5.896,0,10.667-4.771,10.667-10.667C362.667,324.771,357.896,320,352,320z" fill="#FFFFFF"/>
1468
- <path d="M266.667,362.667H160c-5.896,0-10.667,4.771-10.667,10.667c0,5.896,4.771,10.667,10.667,10.667h106.667 c5.896,0,10.667-4.771,10.667-10.667C277.333,367.438,272.563,362.667,266.667,362.667z" fill="#FFFFFF"/>
1624
+ <symbol id='file' viewBox="0 0 512 512">
1625
+ <path
1626
+ d="M405.333,42.667h-44.632c-4.418-12.389-16.147-21.333-30.035-21.333h-32.219C288.427,8.042,272.677,0,256,0 s-32.427,8.042-42.448,21.333h-32.219c-13.888,0-25.617,8.944-30.035,21.333h-44.631C83.135,42.667,64,61.802,64,85.333v384 C64,492.865,83.135,512,106.667,512h298.667C428.865,512,448,492.865,448,469.333v-384C448,61.802,428.865,42.667,405.333,42.667 z M170.667,53.333c0-5.885,4.781-10.667,10.667-10.667h37.917c3.792,0,7.302-2.021,9.219-5.302 c5.844-10.042,16.135-16.031,27.531-16.031s21.688,5.99,27.531,16.031c1.917,3.281,5.427,5.302,9.219,5.302h37.917 c5.885,0,10.667,4.781,10.667,10.667V64c0,11.76-9.573,21.333-21.333,21.333H192c-11.76,0-21.333-9.573-21.333-21.333V53.333z M426.667,469.333c0,11.76-9.573,21.333-21.333,21.333H106.667c-11.76,0-21.333-9.573-21.333-21.333v-384 c0-11.76,9.573-21.333,21.333-21.333h42.667c0,23.531,19.135,42.667,42.667,42.667h128c23.531,0,42.667-19.135,42.667-42.667 h42.667c11.76,0,21.333,9.573,21.333,21.333V469.333z"
1627
+ fill="#FFFFFF" />
1628
+ <path
1629
+ d="M352,234.667H160c-5.896,0-10.667,4.771-10.667,10.667c0,5.896,4.771,10.667,10.667,10.667h192 c5.896,0,10.667-4.771,10.667-10.667C362.667,239.438,357.896,234.667,352,234.667z"
1630
+ fill="#FFFFFF" />
1631
+ <path
1632
+ d="M352,277.333H160c-5.896,0-10.667,4.771-10.667,10.667s4.771,10.667,10.667,10.667h192 c5.896,0,10.667-4.771,10.667-10.667S357.896,277.333,352,277.333z"
1633
+ fill="#FFFFFF" />
1634
+ <path
1635
+ d="M352,320H160c-5.896,0-10.667,4.771-10.667,10.667c0,5.896,4.771,10.667,10.667,10.667h192 c5.896,0,10.667-4.771,10.667-10.667C362.667,324.771,357.896,320,352,320z"
1636
+ fill="#FFFFFF" />
1637
+ <path
1638
+ d="M266.667,362.667H160c-5.896,0-10.667,4.771-10.667,10.667c0,5.896,4.771,10.667,10.667,10.667h106.667 c5.896,0,10.667-4.771,10.667-10.667C277.333,367.438,272.563,362.667,266.667,362.667z"
1639
+ fill="#FFFFFF" />
1469
1640
  </symbol>
1470
- <symbol id="pencil" viewBox="0 0 512 512">
1471
- <g>
1472
- <polygon points="85.333,282.64 85.333,362.64 165.333,362.64 378.667,149.307 298.667,69.307 "/>
1473
- <path d="M441.707,56.08L391.893,6.267c-8.32-8.32-21.867-8.32-30.187,0L320,47.973l80,80l41.707-41.707
1474
- C450.027,77.947,450.027,64.4,441.707,56.08z"/>
1475
- </g>
1476
- <g >
1477
- <rect y="426.64" width="512" height="85.333"/>
1478
- </g>
1479
- </symbol>
1480
- <svg
1481
- x='0px'
1482
- y='0px'
1483
- viewBox='0 0 512 512'
1484
- enableBackground= 'new 0 0 512 512'
1485
- id='smileIcon'
1486
- >
1487
- <path
1488
- fill= '#f00'
1489
- d='M344.354,381.58c-1.33-1.651-33.207-40.458-88.354-40.458
1641
+ <symbol id="pencil" viewBox="0 0 512 512">
1642
+ <g>
1643
+ <polygon points="85.333,282.64 85.333,362.64 165.333,362.64 378.667,149.307 298.667,69.307 " />
1644
+ <path d="M441.707,56.08L391.893,6.267c-8.32-8.32-21.867-8.32-30.187,0L320,47.973l80,80l41.707-41.707
1645
+ C450.027,77.947,450.027,64.4,441.707,56.08z" />
1646
+ </g>
1647
+ <g>
1648
+ <rect y="426.64" width="512" height="85.333" />
1649
+ </g>
1650
+ </symbol>
1651
+ <svg x='0px' y='0px' viewBox='0 0 512 512' enableBackground='new 0 0 512 512' id='smileIcon'>
1652
+ <path fill='#f00' d='M344.354,381.58c-1.33-1.651-33.207-40.458-88.354-40.458
1490
1653
  c-55.832,0-87.972,39.974-88.29,40.378l-31.42-24.756c1.79-2.271,44.687-55.622,119.71-55.622s117.92,53.352,119.71,55.622
1491
1654
  L344.29,381.5L344.354,381.58z M437.02,437.02C485.371,388.668,512,324.38,512,256s-26.629-132.667-74.98-181.02
1492
1655
  C388.667,26.629,324.38,0,256,0S123.333,26.629,74.98,74.98C26.629,123.333,0,187.62,0,256s26.629,132.668,74.98,181.02
1493
1656
  C123.333,485.371,187.62,512,256,512S388.667,485.371,437.02,437.02z M472,256c0,119.103-96.897,216-216,216S40,375.103,40,256
1494
1657
  S136.897,40,256,40S472,136.897,472,256z M168,212.122c17.673,0,32-14.327,32-32s-14.327-32-32-32s-32,14.327-32,32
1495
1658
  S150.327,212.122,168,212.122z M344,212.122c17.673,0,32-14.327,32-32s-14.327-32-32-32s-32,14.327-32,32
1496
- S326.327,212.122,344,212.122z'
1497
- />
1498
- </svg>
1659
+ S326.327,212.122,344,212.122z' />
1660
+ </svg>
1499
1661
  </svg>
1500
1662
  </div>
1501
1663
  </body>
1502
- </html>
1664
+
1665
+ </html>