@zohodesk/react-cli 1.1.6 → 1.1.8-exp.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (134) hide show
  1. package/.eslintignore +7 -7
  2. package/.eslintrc.js +180 -180
  3. package/.prettierrc +6 -6
  4. package/Changelog.md +1019 -1019
  5. package/README.md +1293 -1244
  6. package/bin/cli.js +497 -497
  7. package/docs/ComposeMinification.md +13 -13
  8. package/docs/CustomChunks.md +29 -26
  9. package/docs/DevServerPort.md +39 -39
  10. package/docs/DevStart.md +18 -18
  11. package/docs/HoverActive.md +12 -12
  12. package/docs/InstallNode.md +28 -28
  13. package/docs/MarkdownParser.md +18 -0
  14. package/docs/ReactLive.md +13 -13
  15. package/docs/SelectorWeight.md +8 -8
  16. package/docs/TODOS.md +10 -10
  17. package/docs/ValueReplacer.md +60 -60
  18. package/docs/VariableConversion.md +729 -729
  19. package/docs/patternFiltering.md +56 -56
  20. package/docs/warnings_while_install.txt +35 -35
  21. package/files/eslintrc.js +62 -62
  22. package/files/prettierrc.js +3 -3
  23. package/lib/common/splitChunks.js +65 -45
  24. package/lib/common/testPattern.js +9 -9
  25. package/lib/configs/webpack.css.umd.config.js +4 -4
  26. package/lib/configs/webpack.dev.config.js +24 -3
  27. package/lib/configs/webpack.docs.config.js +22 -3
  28. package/lib/configs/webpack.impact.config.js +4 -2
  29. package/lib/configs/webpack.prod.config.js +6 -3
  30. package/lib/deprecationLogger.js +41 -0
  31. package/lib/loaderUtils/configsAssetsLoaders.js +33 -33
  32. package/lib/loaderUtils/getCSSLoaders.js +77 -56
  33. package/lib/loaders/__test__/markdownLoader.spec.js +145 -0
  34. package/lib/loaders/docsLoader.js +3 -0
  35. package/lib/loaders/markdownLoader.js +71 -0
  36. package/lib/loaders/workerLoader.js +9 -9
  37. package/lib/pluginUtils/getDevPlugins.js +8 -7
  38. package/lib/pluginUtils/getProdPlugins.js +6 -6
  39. package/lib/plugins/CustomAttributePlugin.md +35 -35
  40. package/lib/plugins/EFCPlugin.md +6 -6
  41. package/lib/plugins/I18NInjectIntoIndexPlugin.js +4 -4
  42. package/lib/plugins/I18nSplitPlugin/I18nDownlodLogic.js +38 -38
  43. package/lib/plugins/I18nSplitPlugin/I18nFilesEmitter.js +30 -30
  44. package/lib/plugins/I18nSplitPlugin/I18nKeysIdentifer.js +8 -8
  45. package/lib/plugins/I18nSplitPlugin/I18nSplit.md +95 -95
  46. package/lib/plugins/I18nSplitPlugin/README.md +25 -25
  47. package/lib/plugins/I18nSplitPlugin/index.js +57 -57
  48. package/lib/plugins/ResourceHintsPlugin.js +30 -20
  49. package/lib/plugins/RtlSplitPlugin/RtlCssPlugin.js +6 -6
  50. package/lib/plugins/RtlSplitPlugin/RtrSplit.md +30 -30
  51. package/lib/plugins/SelectorPlugin.js +29 -29
  52. package/lib/plugins/ServiceWorkerPlugin.js +9 -9
  53. package/lib/plugins/TPHashMappingPlugin.js +4 -4
  54. package/lib/plugins/VariableConversionCollector.js +59 -59
  55. package/lib/plugins/utils/fileHandling.js +35 -42
  56. package/lib/plugins/variableConvertorUtils.js +9 -9
  57. package/lib/postcss-plugins/RTLSplitPlugin.js +10 -10
  58. package/lib/postcss-plugins/__test__/test1Input.css +38 -38
  59. package/lib/postcss-plugins/__test__/test1Output.css +38 -38
  60. package/lib/postcss-plugins/hoverActivePlugin.js +3 -3
  61. package/lib/schemas/index.js +23 -36
  62. package/lib/sh/pre-commit.sh +34 -34
  63. package/lib/sh/reportPublish.sh +45 -45
  64. package/lib/utils/buildstats.html +148 -148
  65. package/lib/utils/cssClassNameGenerate.js +13 -13
  66. package/lib/utils/deprecationSupport.js +144 -0
  67. package/lib/utils/getOptions.js +18 -78
  68. package/lib/utils/resultSchema.json +73 -73
  69. package/npm-shrinkwrap.json +33393 -33393
  70. package/npm8.md +9 -9
  71. package/package.json +123 -122
  72. package/postpublish.js +8 -8
  73. package/result.json +1 -0
  74. package/templates/app/.eslintrc.js +140 -140
  75. package/templates/app/README.md +12 -12
  76. package/templates/app/app/index.html +24 -24
  77. package/templates/app/app/properties/ApplicationResources_en_US.properties +1 -1
  78. package/templates/app/app/properties/i18nkeys.json +3 -3
  79. package/templates/app/docs/all.html +69 -69
  80. package/templates/app/mockapi/index.js +18 -18
  81. package/templates/app/package.json +37 -37
  82. package/templates/app/src/actions/SampleActions/index.js +37 -37
  83. package/templates/app/src/actions/index.js +65 -65
  84. package/templates/app/src/appUrls.js +19 -19
  85. package/templates/app/src/components/Alert/Alert.js +134 -134
  86. package/templates/app/src/components/Alert/Alert.module.css +79 -79
  87. package/templates/app/src/components/FreezeLayer/FreezeLayer.css +37 -37
  88. package/templates/app/src/components/FreezeLayer/FreezeLayer.js +84 -84
  89. package/templates/app/src/components/Sample/Sample.module.css +11 -11
  90. package/templates/app/src/components/Sample/SampleList.js +61 -61
  91. package/templates/app/src/components/Slider/Slider.css +41 -41
  92. package/templates/app/src/components/Slider/Slider.js +55 -55
  93. package/templates/app/src/containers/AlertContainer/index.js +15 -15
  94. package/templates/app/src/containers/AppContainer/index.js +96 -96
  95. package/templates/app/src/containers/AppContainer/index.module.css +27 -27
  96. package/templates/app/src/containers/CustomMatch/index.js +65 -65
  97. package/templates/app/src/containers/DevTools/index.js +10 -10
  98. package/templates/app/src/containers/Header/index.js +67 -67
  99. package/templates/app/src/containers/Header/index.module.css +43 -43
  100. package/templates/app/src/containers/Redirect/index.js +63 -63
  101. package/templates/app/src/containers/Redirector/index.js +47 -47
  102. package/templates/app/src/containers/SampleListContainer/ListContainer.js +42 -42
  103. package/templates/app/src/containers/SampleListContainer/ListContainer.module.css +3 -3
  104. package/templates/app/src/historyChange.js +5 -5
  105. package/templates/app/src/index.html +10 -10
  106. package/templates/app/src/index.js +24 -24
  107. package/templates/app/src/middleware/PromiseMiddleware.js +59 -59
  108. package/templates/app/src/reducers/alertData.js +11 -11
  109. package/templates/app/src/reducers/index.js +6 -6
  110. package/templates/app/src/reducers/samples.js +19 -19
  111. package/templates/app/src/store/configureStore.dev.js +51 -51
  112. package/templates/app/src/store/configureStore.js +5 -5
  113. package/templates/app/src/store/configureStore.prod.js +26 -26
  114. package/templates/app/src/util/Common.js +5 -5
  115. package/templates/app/src/util/RequestAPI.js +132 -132
  116. package/templates/docs/all.html +250 -249
  117. package/templates/docs/component.html +179 -178
  118. package/templates/docs/components.html +222 -221
  119. package/templates/docs/css/b.min.css +6 -6
  120. package/templates/docs/css/component.css +42 -42
  121. package/templates/docs/css/componentTest.css +6 -6
  122. package/templates/docs/css/hopscotch.css +585 -585
  123. package/templates/docs/css/markdown.css +202 -0
  124. package/templates/docs/css/style.css +1022 -1022
  125. package/templates/docs/impactReportTemplate.html +154 -154
  126. package/templates/docs/index.html +1502 -1501
  127. package/templates/docs/js/active-line.js +72 -72
  128. package/templates/docs/js/b.min.js +7 -7
  129. package/templates/docs/js/codemirror.js +9680 -9680
  130. package/templates/docs/js/designTokens.js +334 -334
  131. package/templates/docs/js/j.min.js +4 -4
  132. package/templates/docs/js/javascript.js +874 -874
  133. package/templates/docs/js/matchbrackets.js +145 -145
  134. package/unittest/index.html +37 -0
package/templates/docs/index.html CHANGED
@@ -1,1501 +1,1502 @@
1
- <!DOCTYPE html>
2
- <html dir="ltr">
3
-
4
- <head>
5
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
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"
9
- rel="stylesheet" />
10
- <link href="https://supportclientapp.localzoho.com/support/images/support-2.ico" type="IMAGE/X-ICON" rel="SHORTCUT ICON" />
11
-
12
- <script src="./js/codemirror.js"></script>
13
- <script src="./js/javascript.js"></script>
14
- <script src="./js/active-line.js"></script>
15
- <script src="./js/matchbrackets.js"></script>
16
- <link rel="stylesheet" type="text/css" href="./css/hopscotch.css">
17
- <title>Zoho Desk - React Components</title>
18
- <script>
19
-
20
- function selectText(containerid) {
21
- if (document.selection) {
22
- // IE
23
- var range = document.body.createTextRange();
24
- range.moveToElementText(document.getElementById(containerid));
25
- range.select();
26
- document.execCommand('copy');
27
- } else if (window.getSelection) {
28
- var range = document.createRange();
29
- range.selectNode(document.getElementById(containerid));
30
- window.getSelection().removeAllRanges();
31
- window.getSelection().addRange(range);
32
- document.execCommand('copy');
33
- }
34
- }
35
- </script>
36
- </head>
37
-
38
- <body>
39
-
40
- <div id="react"></div>
41
- <div class="iframeCentering">
42
- <span class="posAb">Zoho Desk - React Components</span>
43
- <iframe src="about:blank" id="ifm"></iframe>
44
- </div>
45
-
46
- <script src="/docs/js/babel.min.js"></script>
47
- <script type="text/babel">
48
- window.loadDOC = function(Component, mdata) {
49
- window.RTLmode = false;
50
- var ReactDOM = Component.ReactDOM;
51
- window.React = Component.React;
52
- window.ReactDOM = Component.ReactDOM;
53
- var React= Component.React;
54
- class Doc extends React.Component {
55
- constructor(props) {
56
- super(props);
57
- let folderNameDefault='';
58
- let groupNameDefault='';
59
- (location.hash && props.componentObj )? Object.keys(props.componentObj).map((flName)=>{
60
- let fname=props.componentObj[flName]
61
- Object.keys(fname).map((grName)=>{
62
- if((fname[grName].indexOf(location.hash.substring(1)) > -1)){
63
- folderNameDefault=flName;
64
- groupNameDefault=grName;
65
- }
66
- })
67
- }):null
68
- if(folderNameDefault== '' && groupNameDefault==''){
69
- folderNameDefault='Global'
70
- groupNameDefault='General'
71
- }
72
- this.state = {
73
- componentObj:props.componentObj,
74
- duplicates:props.duplicates,
75
- search: '',
76
- selectedComponent: location.hash,
77
- Components: Component,
78
- //popUp: '',
79
- fullScreenSrc: '',
80
- viewGroup:groupNameDefault,
81
- viewFolder:folderNameDefault,
82
- moreInform:false,
83
- infoTab:'component',
84
- changeset:null,
85
- version:'',
86
- frameWidth:'100%',
87
- isMenuClose:false,
88
- isRTL:false,
89
- isRem:true,
90
- isRemOpen:false,
91
- rootSize:16,
92
- pixelSize:16,
93
- resultRem:'1rem',
94
- responsiveMenu:false,
95
- device:'LAPTOP_M',
96
- compList:'Unused',
97
- windowSize:{height:0,width:0},
98
- isEditMode:false
99
-
100
- };
101
- this.search = this.search.bind(this);
102
- this.clear = this.clear.bind(this);
103
- this.toggleRemContainer = this.toggleRemContainer.bind(this);
104
- this.hashChange = this.hashChange.bind(this);
105
- //this.popupToggle = this.popupToggle.bind(this);
106
- //this.popupToggleDoc = this.popupToggleDoc.bind(this);
107
- this.removeClose = this.removeClose.bind(this);
108
- //this.fullScreenSrcToggle = this.fullScreenSrcToggle.bind(this);
109
- this.toggleFolder = this.toggleFolder.bind(this);
110
- this.toggleGroup = this.toggleGroup.bind(this);
111
- this.onTabinfo = this.onTabinfo.bind(this);
112
- this.codeview = this.codeview.bind(this);
113
- this.reloadFrame = this.reloadFrame.bind(this);
114
- this.getFileDetails = this.getFileDetails.bind(this);
115
- this.iframeSize = this.iframeSize.bind(this);
116
- this.menuOpen = this.menuOpen.bind(this);
117
- this.onRtlView=this.onRtlView.bind(this);
118
- this.onREMView=this.onREMView.bind(this);
119
- this.toggleEditMode=this.toggleEditMode.bind(this);
120
- this.calculatePxToRem=this.calculatePxToRem.bind(this);
121
- this.calculateRemToPx=this.calculateRemToPx.bind(this);
122
- this.onChangeRem=this.onChangeRem.bind(this);
123
- this.onChangePixel=this.onChangePixel.bind(this);
124
- this.onChangeBase=this.onChangeBase.bind(this);
125
- this.responseMenu=this.responseMenu.bind(this);
126
- this.getWindow=this.getWindow.bind(this);
127
- this.fullView=this.fullView.bind(this);
128
- this.handleURL=this.handleURL.bind(this);
129
- this.compList=this.compList.bind(this);
130
- this.unusedList=this.unusedList.bind(this);
131
- }
132
-
133
- fullView(){
134
- this.setState({isMenuClose:!this.state.isMenuClose})
135
- }
136
- toggleEditMode(){
137
- var iframe=document.getElementById('componentIframe');
138
- if(iframe){
139
- var currentMode=iframe.contentDocument.documentElement.getAttribute('contenteditable');
140
- if(currentMode=="true")
141
- {
142
- iframe.contentDocument.documentElement.setAttribute('contenteditable',"false");
143
- this.setState({isEditMode:false});
144
- }
145
- else {
146
- iframe.contentDocument.documentElement.setAttribute('contenteditable',"true");
147
- this.setState({isEditMode:true});
148
- }}
149
-
150
- }
151
-
152
- compList(e){
153
- if(e == this.state.compList){
154
- }
155
- else if(e !== this.state.compList){
156
- this.setState({compList:e})
157
- }
158
- else{
159
- this.setState({compList:''})
160
- }
161
- }
162
-
163
- getWindow(){
164
- var iframe=document.getElementById('componentIframe')
165
- if(iframe){
166
- this.setState({windowSize:{height:iframe.offsetHeight,width:iframe.offsetWidth}})
167
- }
168
- }
169
-
170
- responseMenu(){
171
- this.setState({ responsiveMenu:!this.state.responsiveMenu})
172
- }
173
-
174
- toggleRemContainer(){
175
- this.setState({ isRemOpen: !this.state.isRemOpen });
176
- }
177
-
178
- calculatePxToRem(){
179
- let result=Number((this.state.pixelSize/this.state.rootSize).toFixed(4));
180
- this.setState({resultRem:result+"rem"});
181
- }
182
-
183
- calculateRemToPx(){
184
- let result=Number(((Number(parseFloat(this.state.resultRem))*this.state.rootSize).toFixed(4)));
185
- this.setState({pixelSize:result});
186
- }
187
-
188
- onChangeBase(e) {
189
- let result=Number((this.state.pixelSize/e.target.value ).toFixed(4));
190
- this.setState({ rootSize: e.target.value,resultRem:result+"rem" });
191
- }
192
-
193
- onChangePixel(e) {
194
- let result=Number((e.target.value/this.state.rootSize).toFixed(4));
195
- this.setState({ pixelSize: e.target.value ,resultRem:result+"rem" });
196
- }
197
-
198
- onChangeRem(e) {
199
- let result=Number(((Number(parseFloat(e.target.value))*this.state.rootSize).toFixed(4)));
200
- this.setState({ resultRem: e.target.value,pixelSize:result});
201
- }
202
-
203
- toggleFolder(name,e){
204
- let { viewFolder } = this.state;
205
- if(name == viewFolder){
206
- name =''
207
- }
208
- this.setState({ viewFolder: name });
209
- }
210
- hashChange() {
211
- let ele = document.getElementById('componentIframe')
212
- if(ele){
213
- var src = document.getElementById('componentIframe').src;
214
- var url = src && src.split('#')[0];
215
- document.getElementById('componentIframe').src = url + location.hash;
216
- }
217
- this.setState({ selectedComponent: location.hash, infoTab:'component' });
218
- }
219
- toggleGroup(name) {
220
- let element=name;
221
- let { viewGroup } = this.state;
222
- if(name == viewGroup){
223
- name =''
224
- }
225
- this.setState({ viewGroup: name });
226
- }
227
-
228
- componentDidMount() {
229
- window.addEventListener('hashchange', this.hashChange);
230
- onLoader()
231
- let iframeEle=document.getElementById('componentIframe')
232
- iframeEle.contentWindow.addEventListener('resize',this.getWindow)
233
- this.getWindow()
234
- let index=document.getElementsByClassName('iframeCentering')
235
- index ?index[0].style.display='none':null
236
- if(!this.state.selectedComponent){
237
- this.setState({infoTab:'dashboard'})
238
- }
239
- //document.addEventListener('click', this.popupToggleDoc);
240
- fetch('/cli/version').then((res)=>{return res.json()}).then((response)=>{
241
- (response && response.version) ? this.setState({version : response.version }) : this.setState({version : "version get failure" })
242
- }).catch(function(err) {
243
- this.setState({changeset : "Error accured" })
244
- });
245
- }
246
-
247
- codeview(){
248
-
249
- let compName = location.hash != '' ? location.hash.substring(1) : null;
250
- let element = document.getElementById('codeView')
251
- if (componentList[compName] && typeof CodeMirror !== 'undefined' && element ) {
252
- CodeMirror(element, {
253
- value:'',
254
- lineNumbers: false,
255
- styleActiveLine: false,
256
- matchBrackets: false,
257
- theme: 'blackboard',
258
- });
259
- }
260
-
261
- }
262
-
263
- componentWillUnmount() {
264
- let iframe=document.getElementById('componentIframe');
265
- //document.removeEventListener('click', this.popupToggleDoc);
266
- iframe.contentWindow.removeEventListener('resize',this.getWindow)
267
- window.removeEventListener('hashchange', this.hashChange);
268
- window.removeEventListener('error',this.reloadFrame);
269
- }
270
-
271
- search(e) {
272
- this.setState({ search: e.target.value });
273
- }
274
-
275
- clear(e) {
276
- this.setState({ search: '' });
277
- }
278
-
279
- // popupToggleDoc() {
280
- // this.setState({ popUp: ''});
281
- // }
282
-
283
- // fullScreenSrcToggle(select) {
284
- // this.setState({ fullScreenSrc: select });
285
- // this.popupToggleDoc();
286
- // }
287
-
288
- removeClose(e) {
289
- e.stopPropagation && e.stopPropagation();
290
- e.nativeEvent.stopImmediatePropagation &&
291
- e.nativeEvent.stopImmediatePropagation();
292
- }
293
-
294
- filter(list, str) {
295
- list = list.sort((a, b) => {
296
- var at = a.toLowerCase();
297
- var bt = b.toLowerCase();
298
- return at > bt ? 1 : at < bt ? -1 : 0;
299
- });
300
- // return list.filter(
301
- // item => item.toUpperCase().indexOf(str.toUpperCase()) != -1
302
- // );
303
-
304
- return list.filter((item)=>{
305
- let value = item.split('__')[0]
306
-
307
- return value.toUpperCase().indexOf(str.toUpperCase()) != -1
308
- })
309
- }
310
-
311
- onTabinfo(name){
312
- this.setState({infoTab:name})
313
- }
314
-
315
- reloadFrame(){
316
- let iframeEle = document.getElementById('componentIframe');
317
- //this.getWindow()
318
- iframeEle.contentDocument.location.reload()
319
- parent.document.getElementById("loadingText").style.display= 'block'
320
- }
321
-
322
- getFileDetails(){
323
- this.onTabinfo('changeset')
324
- let compName = location.hash != '' ? location.hash.substring(1) : null;
325
- let compNameSub= window.componentList?window.componentList[compName].docs.filePath :Component[compName].docs.filePath || ''
326
- let name = compNameSub ? compNameSub.split('__')[0] : '';
327
- let propComName = name.replace("docs","/").split('/')[0]+name.split("docs")[1]
328
- fetch('/author/get?componentName='+propComName+'.js').then((res)=>{return res.json()}).then((response)=>{
329
- (response && response.stdout) ? this.setState({changeset : response.stdout }) : this.setState({changeset : "response is empty" })
330
- }).catch(function(err) {
331
- this.setState({changeset : "Error accured" })
332
- });
333
- }
334
-
335
- iframeSize() {
336
- let slider=document.getElementById('myRange')
337
- let iframe = document.getElementById('componentIframe');
338
- let value=slider.value;
339
- let borderSize=30;
340
- let sizes={
341
- '1':{device:'MOBILE_XS',frameWidth:320+borderSize},
342
- '2':{device:'MOBILE_S',frameWidth:360+borderSize},
343
- '3':{device:'MOBILE_M',frameWidth:375.04+borderSize},
344
- '4':{device:'MOBILE',frameWidth:480+borderSize},
345
- '5':{device:'TABLET_S',frameWidth:640+borderSize},
346
- '6':{device:'TABLET_M',frameWidth:720+borderSize},
347
- '7':{device:'TABLET',frameWidth:768+borderSize},
348
- '8':{device:'LAPTOP_S',frameWidth:1024+borderSize},
349
- '9':{device:'LAPTOP_M',frameWidth:1280+borderSize},
350
- '10':{device:'LAPTOP',frameWidth:1440+borderSize},
351
- '11':{device:'MONITOR_M',frameWidth:1600+borderSize},
352
- '12':{device:'MONITOR',frameWidth:1920+borderSize}
353
- }
354
- this.setState(sizes[value]);
355
- this.getWindow()
356
- }
357
-
358
- menuOpen() {
359
- this.setState({isMenuClose:!this.state.isMenuClose})
360
- }
361
-
362
- onRtlView(e) {
363
- let iframeEle = document.getElementById('componentIframe');
364
- let ele = e.target.element || null
365
- if (!this.state.isRTL) {
366
- this.setState({isRTL:true})
367
- window.RTLmode = true;
368
- iframeEle.contentDocument.documentElement.setAttribute('dir', 'rtl');
369
- } else {
370
- this.setState({isRTL:false})
371
- iframeEle.contentDocument.documentElement.setAttribute('dir', 'ltr');
372
- window.RTLmode = false;
373
- }
374
- }
375
-
376
- onREMView(e) {
377
- let iframeEle = document.getElementById('componentIframe');
378
- let ele = e.target.element || null
379
- if (!this.state.isRem) {
380
- this.setState({isRem:true})
381
- iframeEle.contentDocument.documentElement.classList.add('isRem');
382
- } else {
383
- this.setState({isRem:false})
384
- iframeEle.contentDocument.documentElement.classList.remove('isRem');
385
- }
386
- }
387
-
388
-
389
- handleURL(){
390
- this.setState({viewFolder:'General',viewGroup:'Global',infoTab:'dashboard'})
391
- window.history.pushState("", "", '/docs/');
392
- }
393
-
394
- unusedList(mdata){
395
- let dbList=[];
396
- Object.keys(mdata).map((item,i)=>{
397
- if(mdata[item].references.length<=0 && mdata[item].referencedby.length<=0){
398
- return dbList.push(item);
399
- }
400
- })
401
- return dbList
402
- }
403
-
404
- render() {
405
- const {
406
- Components,
407
- componentObj,
408
- search,
409
- selectedComponent,
410
- //popUp,
411
- viewGroup,
412
- viewFolder,
413
- moreInform,
414
- infoTab,
415
- changeset,
416
- version,
417
- frameWidth,
418
- isMenuClose,
419
- isRTL,
420
- isRem,
421
- isRemOpen,
422
- rootSize,
423
- pixelSize,
424
- resultRem,
425
- duplicates,
426
- isEditMode
427
- } = this.state;/* Components & componentObj no need in the state access in props itself*/
428
- 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']}]
429
- let compValue='compValue';
430
- let reactCliVersion =version.split(' ').filter(function(el){return el.toLowerCase().indexOf("fz-react-cli@") > -1;});
431
- let versionFz = reactCliVersion.length?reactCliVersion[0].substring(reactCliVersion[0].indexOf('@')+1,reactCliVersion[0].length) : '';
432
- let compName =location.hash != '' ? location.hash.substring(1) : null;
433
- let propComName = compName ? compName.split('__')[0] : '';
434
- let propsObj = window.componentList && window.componentList[propComName] &&
435
- window.componentList[propComName].propTypes ||
436
- (Components &&
437
- Components[propComName] &&
438
- Components[propComName].propTypes) ||
439
- {};
440
- let currentCompProps = Object.keys(propsObj) || [];
441
- let currentCompPropsDescription = window.componentList && window.componentList[propComName] && window.componentList[propComName].propsDescription || (Components[propComName] && Components[propComName].propsDescription) || {};
442
- let currentCompDefault = Window.componentList && window.componentList[propComName] && window.componentList[propComName].defaultProps || (Components[propComName] && Components[propComName].defaultProps) || {};
443
- let componentsObj=componentObj && this.filter(Object.keys(componentObj),'').map((item,i)=>{
444
- return ({key:item,value:componentObj[item],length:Object.keys(componentObj[item]).length})
445
- })
446
- let compObjList=componentsObj
447
-
448
- let dashboardList=[
449
- this.unusedList(mdata) &&{name:'Unused',componentList:this.unusedList(mdata)},
450
- duplicates && {name:'Duplicates',componentList:duplicates}
451
- ]
452
-
453
- return (
454
- <main className="dflex flexrow">
455
- <div className="showToggleLeft" onClick={this.menuOpen}>
456
- <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGOSURBVGhD7ZrBKkVBHIdPSNKV5A3YKSvvYG/BE0jI3tbGxsYGdTeeQnY8gcLOTigba1KE73ewOGUxc8/8/2fUfPXVndOd23ydM92ae6sIeniIT/iZgW94hYsYxTH+9YFd+4pzGMQIvqAmzepCBgzhESpmRxdCmERNuKtH+bCBWpeCgighxpSQEmJECSkhRpSQkJBRvMFTHNcFQ0xDxvAW9f5ztIwxf7Rm8B6tY1z2iEeM22a3jnELEZYxriHCKsY9RFjERIfo4OECT+rR4KSOiQ5JScqYRsgULji7jM/YNqYR8vAz6NIz1KlILI2QfdTz762Ol7SID1zFQeh0j4gtVECbCBEdMox6tufrUTtSRYjokBTfIyJlhOgkJHWEcA+xiBCuIVYRwi3EMkK4hFhHCPMQjwhhGjKN72gdIczvyDYufb80xW2zW1NCSogRJaSEGFFC/n3IBGrCYz3Kh03Uug7qUSC/x0Z7uJaB63iNWpPuTDArqP9IaWJOXqJ+JYtCJym72M9A7QvdFSKq6gtlqbpowcg25wAAAABJRU5ErkJggg==" />
457
- </div>
458
-
459
- <div className={"menuBar "+(isMenuClose?"isMenuClose":"isMenuOpen")}>
460
- <div className="dflex flexcolumn">
461
- <div className="flexshrink logoPart dflex">
462
- <img src="./css/desklogo.png" />
463
- <div className={'home'} onClick={this.handleURL}>
464
- <span className='homeIcon'>
465
- <svg className='svg'>
466
- <use xlinkHref='#home'></use>
467
- </svg>
468
- </span>
469
- </div>
470
- </div>
471
- <div className="flexgrow flexbasis sliderContainer">
472
- <div className="dflex flexcolumn">
473
- <div className="flexshrink searchPart">
474
- <Search onChange={this.search} value={search} onClear={this.clear} />
475
- </div>
476
- <menu className="flexgrow flexbasis scrollY menuContainer" id="leftPanel">
477
- {
478
- compObjList && Object.keys(compObjList).length && compObjList.map(comp => {
479
- let folderName=comp.key
480
- let folderCompCount=0;
481
- let sortList=this.filter(Object.keys(componentObj[folderName]),'').map(grpName=>{
482
- return({
483
- fName:grpName,
484
- components:componentObj[folderName][grpName],
485
- length:(componentObj[folderName][grpName].filter(function(el) {return el.toLowerCase().indexOf('__') > -1}).length)
486
- })
487
- })
488
-
489
- let outcomp = Object.keys(componentObj[folderName]).sort().map(
490
- grn => {
491
- let searchList = this.filter(
492
- componentObj[folderName][grn],
493
- search
494
- );
495
- if(searchList.length){
496
- folderCompCount=folderCompCount+1;
497
- }
498
- return searchList.length ? true : false;
499
- }
500
- );
501
- if (outcomp.indexOf(true) != -1) {
502
- return (
503
- <div>
504
- <div
505
- onClick={this.toggleFolder.bind(
506
- this,
507
- folderName
508
- )}
509
- className={'mainMenu dflex flexrow alignVertical offSelection'+' '+
510
- (viewFolder == folderName
511
- ? 'mainMenuActive'
512
- : '')
513
- }
514
- >
515
- <span className={'flexgrow mainMenutitle dotted'}>{folderName}</span>
516
- <span className={'flexshrink mainMenuCount'}>{folderCompCount}</span>
517
- <i className={'flexshrink mainMenuArrow'}>
518
- <svg className='svg'>
519
- <use xlinkHref='#bottomArrow'></use>
520
- </svg>
521
- </i>
522
- </div>
523
- <div
524
- className={
525
- viewFolder == folderName || search
526
- ? 'folderOpen'
527
- : 'hide'
528
- }
529
- >
530
- {
531
- sortList.map((grpName)=>{
532
- return(
533
- <ComponentList
534
- type={grpName.fName}
535
- components={this.filter(
536
- componentObj[folderName][grpName.fName],
537
- search
538
- )}
539
- selectedComponent={selectedComponent}
540
- toggleGroup={this.toggleGroup}
541
- viewGroup={
542
- search ? grpName.fName : viewGroup
543
- }
544
- />)
545
- })
546
- }
547
- </div>
548
- </div>
549
- );
550
- } else {
551
- return null;
552
- }
553
- })
554
- }
555
- </menu>
556
- {
557
- versionFz!=''&&
558
- <div className="flexshrink versionPart ">
559
- <span>Version {versionFz}</span>
560
- </div>
561
- }
562
- <div className="flexshrink tools" onClick={this.toggleRemContainer}>
563
- <img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDE3NC4yNDggMTc0LjI0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTc0LjI0OCAxNzQuMjQ4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxnPgoJPHBhdGggZD0iTTE3My4xNDUsNzMuOTFjLTAuNDEzLTIuNzIyLTIuMjktNC45OTMtNC44ODEtNS45MTJsLTEzLjcyNy00Ljg4MWMtMC44MTItMi4zLTEuNzMzLTQuNTM2LTIuNzU0LTYuNjk5bDYuMjQ3LTEzLjE0NiAgIGMxLjE3OS0yLjQ3OSwwLjg5OS01LjQxMS0wLjcyOS03LjYyOGMtNS4yNjUtNy4xNjEtMTEuNTU2LTEzLjQ1Mi0xOC42OTgtMTguNjkzYy0yLjIxOS0xLjYyOS01LjE0MS0xLjkwNi03LjYyNS0wLjcyNCAgIGwtMTMuMTM4LDYuMjQyYy0yLjE2My0xLjAyMS00LjQwMi0xLjk0LTYuNzA0LTIuNzUybC00Ljg4My0xMy43MjljLTAuOTE5LTIuNTg2LTMuMTg0LTQuNDU4LTUuOS00Ljg3NiAgIGMtOS42NS0xLjQ4My0xNi43OTItMS40ODMtMjYuNDU3LDBjLTIuNzEzLDAuNDE4LTQuOTgxLDIuMjktNS45LDQuODc2bC00Ljg4MywxMy43MjljLTIuMzAyLDAuODEyLTQuNTQxLDEuNzMxLTYuNzAyLDIuNzUyICAgbC0xMy4xNDMtNi4yNDJjLTIuNDc5LTEuMTgxLTUuNDA2LTAuOTA0LTcuNjIzLDAuNzI0Yy03LjE0Miw1LjI0MS0xMy40MzMsMTEuNTMyLTE4LjY5OCwxOC42OTMgICBjLTEuNjI5LDIuMjE3LTEuOTA4LDUuMTQ4LTAuNzI5LDcuNjI4bDYuMjQ3LDEzLjE0NmMtMS4wMjEsMi4xNTktMS45NCw0LjQtMi43NTQsNi42OTlMNS45ODIsNjguMDAzICAgYy0yLjU4OSwwLjkxOS00LjQ2MywzLjE4OS00Ljg3OSw1LjkwN2MtMC43NDksNC45Mi0xLjA5OSw5LjExNS0xLjA5OSwxMy4yMTljMCw0LjA5OCwwLjM1LDguMjk5LDEuMDk5LDEzLjIxOSAgIGMwLjQxMywyLjcyMiwyLjI5LDQuOTkzLDQuODgxLDUuOTEybDEzLjcyNyw0Ljg4MWMwLjgxNCwyLjMwNCwxLjczNiw0LjU0MSwyLjc1NCw2LjcwNGwtNi4yNDcsMTMuMTQxICAgYy0xLjE3OSwyLjQ3OS0wLjg5OSw1LjQxMSwwLjcyNyw3LjYyM2M1LjI1OCw3LjE1NiwxMS41NDksMTMuNDQ3LDE4LjcsMTguNjk4YzIuMjE3LDEuNjI5LDUuMTQ0LDEuOTExLDcuNjI1LDAuNzI0bDEzLjEzOC02LjI0MiAgIGMyLjE2MywxLjAyMSw0LjQwMiwxLjk0LDYuNzA0LDIuNzUybDQuODgzLDEzLjcyOWMwLjkxOSwyLjU4NiwzLjE4NCw0LjQ1OCw1LjksNC44NzZjNC44MjgsMC43NDQsOS4xNTQsMS4xMDQsMTMuMjI4LDEuMTA0ICAgYzQuMDc0LDAsOC40MDEtMC4zNiwxMy4yMjgtMS4xMDRjMi43MTUtMC40MTgsNC45ODEtMi4yOSw1LjktNC44NzZsNC44ODMtMTMuNzI5YzIuMzAyLTAuODEyLDQuNTQxLTEuNzMxLDYuNzA0LTIuNzUyICAgbDEzLjEzOCw2LjI0MmMyLjQ4NCwxLjE4Niw1LjQxMSwwLjkwNCw3LjYyOC0wLjcyNGM3LjE1OS01LjI2LDEzLjQ1LTExLjU1MSwxOC42OTgtMTguNjk4YzEuNjI2LTIuMjEyLDEuOTA2LTUuMTQ0LDAuNzI3LTcuNjIzICAgbC02LjI0Ny0xMy4xNDFjMS4wMjEtMi4xNjMsMS45NDItNC40MDUsMi43NTQtNi43MDRsMTMuNzI3LTQuODgxYzIuNTkxLTAuOTE5LDQuNDY4LTMuMTg5LDQuODgxLTUuOTEyICAgYzAuNzQ5LTQuOTIsMS4wOTktOS4xMiwxLjA5OS0xMy4yMTlTMTczLjg5NCw3OC44MjksMTczLjE0NSw3My45MXogTTE1OC45NDksOTMuNzJsLTEyLjg3OCw0LjU4ICAgYy0yLjI1MSwwLjc5Ny0zLjk4MiwyLjYyNS00LjY2LDQuOTJjLTEuMTUsMy44ODktMi42NjQsNy41NjktNC41MDQsMTAuOTQzYy0xLjE0MiwyLjEtMS4yMTMsNC42MTktMC4xODcsNi43NzdsNS44NDEsMTIuMjg1ICAgYy0yLjgyMiwzLjM4OS01Ljk0Myw2LjUxNS05LjMzNyw5LjMzNGwtMTIuMjgzLTUuODM0Yy0yLjE2MS0xLjAzNi00LjY3Mi0wLjk1My02Ljc3NSwwLjE4NWMtMy4zNzksMS44MzgtNy4wNjEsMy4zNS0xMC45NTMsNC41MDIgICBjLTIuMjksMC42NzYtNC4xMTgsMi40MDYtNC45MTcsNC42NTdsLTQuNTgyLDEyLjg4M2MtNC42NzcsMC40NzYtOC41MDMsMC40NzYtMTMuMTgsMGwtNC41ODItMTIuODgzICAgYy0wLjgtMi4yNDYtMi42MjgtMy45ODItNC45MTctNC42NTdjLTMuODk0LTEuMTUyLTcuNTc5LTIuNjY0LTEwLjk1My00LjUwMmMtMi4xMDMtMS4xNDctNC42MTktMS4yMi02Ljc3NS0wLjE4NWwtMTIuMjgzLDUuODM5ICAgYy0zLjM5MS0yLjgyNS02LjUxMi01Ljk0Ni05LjMzNy05LjMzOWw1Ljg0MS0xMi4yODVjMS4wMjYtMi4xNTksMC45NTUtNC42NzctMC4xODctNi43NzdjLTEuODM1LTMuMzY0LTMuMzUtNy4wNDktNC41MDQtMTAuOTQ4ICAgYy0wLjY3OC0yLjI5LTIuNDExLTQuMTE4LTQuNjYtNC45MTVsLTEyLjg3OC00LjU4Yy0wLjI0My0yLjM0My0wLjM2LTQuNTAyLTAuMzYtNi41OTJzMC4xMTctNC4yNDQsMC4zNi02LjU4N2wxMi44ODEtNC41ODQgICBjMi4yNDgtMC43OTcsMy45NzktMi42MjUsNC42NTctNC45MTVjMS4xNTItMy44ODksMi42NjctNy41NzQsNC41MDQtMTAuOTUzYzEuMTQyLTIuMDk1LDEuMjEzLTQuNjE5LDAuMTg3LTYuNzcybC01Ljg0MS0xMi4yODUgICBjMi44MjctMy4zOTMsNS45NDgtNi41MTksOS4zMzctOS4zMzlsMTIuMjg4LDUuODM5YzIuMTUxLDEuMDM2LDQuNjc3LDAuOTUzLDYuNzc1LTAuMTg1YzMuMzcyLTEuODM4LDcuMDU0LTMuMzUsMTAuOTQ4LTQuNTAyICAgYzIuMjktMC42NzYsNC4xMTgtMi40MTEsNC45MTctNC42NTdsNC41ODItMTIuODgzYzQuNjMzLTAuNDgxLDguNDY2LTAuNDgxLDEzLjE4LDBsNC41ODIsMTIuODgzICAgYzAuOCwyLjI0NiwyLjYyOCwzLjk4Miw0LjkxNyw0LjY1N2MzLjg5NCwxLjE1Miw3LjU3OSwyLjY2NCwxMC45NTMsNC41MDJjMi4xMDMsMS4xNDcsNC42MTQsMS4yMiw2Ljc3NSwwLjE4NWwxMi4yODMtNS44MzkgICBjMy4zODksMi44Miw2LjUxLDUuOTQ2LDkuMzM3LDkuMzM5bC01Ljg0MSwxMi4yODVjLTEuMDI2LDIuMTU0LTAuOTU1LDQuNjc3LDAuMTg3LDYuNzcyYzEuODQzLDMuMzg5LDMuMzU3LDcuMDY5LDQuNTA0LDEwLjk0OCAgIGMwLjY3OCwyLjI5NSwyLjQwOSw0LjEyMyw0LjY2LDQuOTJsMTIuODc4LDQuNThjMC4yNDMsMi4zNDMsMC4zNiw0LjUwMiwwLjM2LDYuNTkyUzE1OS4xOTIsOTEuMzc3LDE1OC45NDksOTMuNzJ6IiBmaWxsPSIjRkZGRkZGIi8+Cgk8cGF0aCBkPSJNODcuMTI0LDUwLjgwMmMtMTkuMDYyLDAtMzQuNTcxLDE1LjUwOC0zNC41NzEsMzQuNTcxczE1LjUwOCwzNC41NzEsMzQuNTcxLDM0LjU3MXMzNC41NzEtMTUuNTA4LDM0LjU3MS0zNC41NzEgICBTMTA2LjE4Niw1MC44MDIsODcuMTI0LDUwLjgwMnogTTg3LjEyNCwxMDUuMDA5Yy0xMC44MjcsMC0xOS42MzYtOC44MDktMTkuNjM2LTE5LjYzNnM4LjgwOS0xOS42MzYsMTkuNjM2LTE5LjYzNiAgIHMxOS42MzYsOC44MDksMTkuNjM2LDE5LjYzNlM5Ny45NTEsMTA1LjAwOSw4Ny4xMjQsMTA1LjAwOXoiIGZpbGw9IiNGRkZGRkYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" />
564
- <span>REM Converter</span>
565
- </div>
566
- </div>
567
- <div className={"slider "+(isRemOpen?'sopen':'')}>
568
- <div className="tools sliderHeader">
569
- <img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDE3NC4yNDggMTc0LjI0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTc0LjI0OCAxNzQuMjQ4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxnPgoJPHBhdGggZD0iTTE3My4xNDUsNzMuOTFjLTAuNDEzLTIuNzIyLTIuMjktNC45OTMtNC44ODEtNS45MTJsLTEzLjcyNy00Ljg4MWMtMC44MTItMi4zLTEuNzMzLTQuNTM2LTIuNzU0LTYuNjk5bDYuMjQ3LTEzLjE0NiAgIGMxLjE3OS0yLjQ3OSwwLjg5OS01LjQxMS0wLjcyOS03LjYyOGMtNS4yNjUtNy4xNjEtMTEuNTU2LTEzLjQ1Mi0xOC42OTgtMTguNjkzYy0yLjIxOS0xLjYyOS01LjE0MS0xLjkwNi03LjYyNS0wLjcyNCAgIGwtMTMuMTM4LDYuMjQyYy0yLjE2My0xLjAyMS00LjQwMi0xLjk0LTYuNzA0LTIuNzUybC00Ljg4My0xMy43MjljLTAuOTE5LTIuNTg2LTMuMTg0LTQuNDU4LTUuOS00Ljg3NiAgIGMtOS42NS0xLjQ4My0xNi43OTItMS40ODMtMjYuNDU3LDBjLTIuNzEzLDAuNDE4LTQuOTgxLDIuMjktNS45LDQuODc2bC00Ljg4MywxMy43MjljLTIuMzAyLDAuODEyLTQuNTQxLDEuNzMxLTYuNzAyLDIuNzUyICAgbC0xMy4xNDMtNi4yNDJjLTIuNDc5LTEuMTgxLTUuNDA2LTAuOTA0LTcuNjIzLDAuNzI0Yy03LjE0Miw1LjI0MS0xMy40MzMsMTEuNTMyLTE4LjY5OCwxOC42OTMgICBjLTEuNjI5LDIuMjE3LTEuOTA4LDUuMTQ4LTAuNzI5LDcuNjI4bDYuMjQ3LDEzLjE0NmMtMS4wMjEsMi4xNTktMS45NCw0LjQtMi43NTQsNi42OTlMNS45ODIsNjguMDAzICAgYy0yLjU4OSwwLjkxOS00LjQ2MywzLjE4OS00Ljg3OSw1LjkwN2MtMC43NDksNC45Mi0xLjA5OSw5LjExNS0xLjA5OSwxMy4yMTljMCw0LjA5OCwwLjM1LDguMjk5LDEuMDk5LDEzLjIxOSAgIGMwLjQxMywyLjcyMiwyLjI5LDQuOTkzLDQuODgxLDUuOTEybDEzLjcyNyw0Ljg4MWMwLjgxNCwyLjMwNCwxLjczNiw0LjU0MSwyLjc1NCw2LjcwNGwtNi4yNDcsMTMuMTQxICAgYy0xLjE3OSwyLjQ3OS0wLjg5OSw1LjQxMSwwLjcyNyw3LjYyM2M1LjI1OCw3LjE1NiwxMS41NDksMTMuNDQ3LDE4LjcsMTguNjk4YzIuMjE3LDEuNjI5LDUuMTQ0LDEuOTExLDcuNjI1LDAuNzI0bDEzLjEzOC02LjI0MiAgIGMyLjE2MywxLjAyMSw0LjQwMiwxLjk0LDYuNzA0LDIuNzUybDQuODgzLDEzLjcyOWMwLjkxOSwyLjU4NiwzLjE4NCw0LjQ1OCw1LjksNC44NzZjNC44MjgsMC43NDQsOS4xNTQsMS4xMDQsMTMuMjI4LDEuMTA0ICAgYzQuMDc0LDAsOC40MDEtMC4zNiwxMy4yMjgtMS4xMDRjMi43MTUtMC40MTgsNC45ODEtMi4yOSw1LjktNC44NzZsNC44ODMtMTMuNzI5YzIuMzAyLTAuODEyLDQuNTQxLTEuNzMxLDYuNzA0LTIuNzUyICAgbDEzLjEzOCw2LjI0MmMyLjQ4NCwxLjE4Niw1LjQxMSwwLjkwNCw3LjYyOC0wLjcyNGM3LjE1OS01LjI2LDEzLjQ1LTExLjU1MSwxOC42OTgtMTguNjk4YzEuNjI2LTIuMjEyLDEuOTA2LTUuMTQ0LDAuNzI3LTcuNjIzICAgbC02LjI0Ny0xMy4xNDFjMS4wMjEtMi4xNjMsMS45NDItNC40MDUsMi43NTQtNi43MDRsMTMuNzI3LTQuODgxYzIuNTkxLTAuOTE5LDQuNDY4LTMuMTg5LDQuODgxLTUuOTEyICAgYzAuNzQ5LTQuOTIsMS4wOTktOS4xMiwxLjA5OS0xMy4yMTlTMTczLjg5NCw3OC44MjksMTczLjE0NSw3My45MXogTTE1OC45NDksOTMuNzJsLTEyLjg3OCw0LjU4ICAgYy0yLjI1MSwwLjc5Ny0zLjk4MiwyLjYyNS00LjY2LDQuOTJjLTEuMTUsMy44ODktMi42NjQsNy41NjktNC41MDQsMTAuOTQzYy0xLjE0MiwyLjEtMS4yMTMsNC42MTktMC4xODcsNi43NzdsNS44NDEsMTIuMjg1ICAgYy0yLjgyMiwzLjM4OS01Ljk0Myw2LjUxNS05LjMzNyw5LjMzNGwtMTIuMjgzLTUuODM0Yy0yLjE2MS0xLjAzNi00LjY3Mi0wLjk1My02Ljc3NSwwLjE4NWMtMy4zNzksMS44MzgtNy4wNjEsMy4zNS0xMC45NTMsNC41MDIgICBjLTIuMjksMC42NzYtNC4xMTgsMi40MDYtNC45MTcsNC42NTdsLTQuNTgyLDEyLjg4M2MtNC42NzcsMC40NzYtOC41MDMsMC40NzYtMTMuMTgsMGwtNC41ODItMTIuODgzICAgYy0wLjgtMi4yNDYtMi42MjgtMy45ODItNC45MTctNC42NTdjLTMuODk0LTEuMTUyLTcuNTc5LTIuNjY0LTEwLjk1My00LjUwMmMtMi4xMDMtMS4xNDctNC42MTktMS4yMi02Ljc3NS0wLjE4NWwtMTIuMjgzLDUuODM5ICAgYy0zLjM5MS0yLjgyNS02LjUxMi01Ljk0Ni05LjMzNy05LjMzOWw1Ljg0MS0xMi4yODVjMS4wMjYtMi4xNTksMC45NTUtNC42NzctMC4xODctNi43NzdjLTEuODM1LTMuMzY0LTMuMzUtNy4wNDktNC41MDQtMTAuOTQ4ICAgYy0wLjY3OC0yLjI5LTIuNDExLTQuMTE4LTQuNjYtNC45MTVsLTEyLjg3OC00LjU4Yy0wLjI0My0yLjM0My0wLjM2LTQuNTAyLTAuMzYtNi41OTJzMC4xMTctNC4yNDQsMC4zNi02LjU4N2wxMi44ODEtNC41ODQgICBjMi4yNDgtMC43OTcsMy45NzktMi42MjUsNC42NTctNC45MTVjMS4xNTItMy44ODksMi42NjctNy41NzQsNC41MDQtMTAuOTUzYzEuMTQyLTIuMDk1LDEuMjEzLTQuNjE5LDAuMTg3LTYuNzcybC01Ljg0MS0xMi4yODUgICBjMi44MjctMy4zOTMsNS45NDgtNi41MTksOS4zMzctOS4zMzlsMTIuMjg4LDUuODM5YzIuMTUxLDEuMDM2LDQuNjc3LDAuOTUzLDYuNzc1LTAuMTg1YzMuMzcyLTEuODM4LDcuMDU0LTMuMzUsMTAuOTQ4LTQuNTAyICAgYzIuMjktMC42NzYsNC4xMTgtMi40MTEsNC45MTctNC42NTdsNC41ODItMTIuODgzYzQuNjMzLTAuNDgxLDguNDY2LTAuNDgxLDEzLjE4LDBsNC41ODIsMTIuODgzICAgYzAuOCwyLjI0NiwyLjYyOCwzLjk4Miw0LjkxNyw0LjY1N2MzLjg5NCwxLjE1Miw3LjU3OSwyLjY2NCwxMC45NTMsNC41MDJjMi4xMDMsMS4xNDcsNC42MTQsMS4yMiw2Ljc3NSwwLjE4NWwxMi4yODMtNS44MzkgICBjMy4zODksMi44Miw2LjUxLDUuOTQ2LDkuMzM3LDkuMzM5bC01Ljg0MSwxMi4yODVjLTEuMDI2LDIuMTU0LTAuOTU1LDQuNjc3LDAuMTg3LDYuNzcyYzEuODQzLDMuMzg5LDMuMzU3LDcuMDY5LDQuNTA0LDEwLjk0OCAgIGMwLjY3OCwyLjI5NSwyLjQwOSw0LjEyMyw0LjY2LDQuOTJsMTIuODc4LDQuNThjMC4yNDMsMi4zNDMsMC4zNiw0LjUwMiwwLjM2LDYuNTkyUzE1OS4xOTIsOTEuMzc3LDE1OC45NDksOTMuNzJ6IiBmaWxsPSIjRkZGRkZGIi8+Cgk8cGF0aCBkPSJNODcuMTI0LDUwLjgwMmMtMTkuMDYyLDAtMzQuNTcxLDE1LjUwOC0zNC41NzEsMzQuNTcxczE1LjUwOCwzNC41NzEsMzQuNTcxLDM0LjU3MXMzNC41NzEtMTUuNTA4LDM0LjU3MS0zNC41NzEgICBTMTA2LjE4Niw1MC44MDIsODcuMTI0LDUwLjgwMnogTTg3LjEyNCwxMDUuMDA5Yy0xMC44MjcsMC0xOS42MzYtOC44MDktMTkuNjM2LTE5LjYzNnM4LjgwOS0xOS42MzYsMTkuNjM2LTE5LjYzNiAgIHMxOS42MzYsOC44MDksMTkuNjM2LDE5LjYzNlM5Ny45NTEsMTA1LjAwOSw4Ny4xMjQsMTA1LjAwOXoiIGZpbGw9IiNGRkZGRkYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" />
570
- <span className="sliderTitle">REM Converter</span>
571
- <span className="searchClose" onClick={this.toggleRemContainer}>
572
- <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==" />
573
- </span>
574
- </div>
575
- <div className="sliderFormContainer">
576
- <div className="sliderInputContainer">
577
- <label className="sliderInputTitle">Base font-size (in px)</label>
578
- <input type="number" className="sliderInput" min="1" placeholder="Base font-size (in px)" value={rootSize} onChange={this.onChangeBase} / >
579
- </div>
580
- <div className="sliderInputContainer">
581
- <label className="sliderInputTitle">PX size to convert</label>
582
- <input type="number" className="sliderInput" placeholder="PX size to convert" value={pixelSize} onChange={this.onChangePixel} / >
583
- </div>
584
- <div className="sliderInputContainer">
585
- <label className="sliderInputTitle">Result</label>
586
- <div className="sliderResult">
587
- <input type="text" className="sliderInput" placeholder="Result" value={resultRem} onChange={this.onChangeRem} / >
588
- <span id="remoutput" className="copyTxtHiden">{resultRem}</span>
589
- <span className="copyResult" onClick={selectText.bind(this, 'remoutput')}>
590
- <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==" />
591
- </span>
592
- </div>
593
- </div>
594
- </div>
595
- </div>
596
- </div>
597
- </div>
598
- </div>
599
- <div className="flexgrow flexbasis">
600
- <div id="container" className="dflex flexcolumn flexbasis">
601
- {
602
- infoTab == 'dashboard' ?
603
- <div className='dflex flexcolumn'>
604
- <div className="flexshrink cheader">
605
- <div className="dflex flexrow flexbasis alignVertical">
606
- <div className="flexshrink">
607
- <h1 className="cheadertitle">{'Dashboard'}</h1>
608
- </div>
609
- <div className='flexgrow flexbasis infoTabs dflex'>
610
- {
611
- dashboardList.map((item,i)=>{
612
- return(
613
- <span key={i} onClick={this.compList.bind(this,item.name)} className={this.state.compList == item.name ? 'dotted infoactive' : 'dotted'}>
614
- {item.name}
615
- </span>
616
- )
617
- })
618
- }
619
- </div>
620
- </div>
621
- </div>
622
- <div className='flexgrow scrollY'>
623
- {
624
- dashboardList.map((item,i)=>{
625
- if(this.state.compList == item.name){
626
- return(
627
- item.componentList.length>0?<ul key={i}>
628
- {
629
- (item.componentList).map((component,val)=>{
630
- if(component!== undefined){
631
- return(<li key={val} className="compListItem">{component}</li>)
632
- }
633
- })
634
- }
635
- </ul>:
636
- <div className='dflex alignHorizontal alignVertical flexcolumn'>
637
- <span className='smileIcon'>
638
- <svg className='svg'>
639
- <use xlinkHref='#smileIcon'></use>
640
- </svg>
641
- </span>
642
- <div>{'Sorry! there is no '+this.state.compList +' components'}</div>
643
- </div>
644
- )
645
- }
646
- })
647
- }
648
- </div>
649
- </div>
650
- :null
651
- }
652
- {
653
- compName ?
654
- <div className="flexshrink cheader">
655
- <div className="dflex flexrow flexbasis alignVertical">
656
- <div className="flexshrink"><h1 className="cheadertitle">{compName && compName.split('__')[0]}</h1></div>
657
- <div className='flexgrow flexbasis infoTabs dflex'>
658
- <span onClick={this.onTabinfo.bind(this,'component')} className={infoTab == 'component' ? 'dotted infoactive' : 'dotted'}>Component view</span>
659
- <span onClick={this.onTabinfo.bind(this,'proptypes')} className={infoTab == 'proptypes' ? 'dotted infoactive' : 'dotted'}>PropTypes</span>
660
- <span onClick={this.onTabinfo.bind(this,'code')} className={infoTab == 'code' ? 'dotted infoactive' : 'dotted'}>Docs Code</span>
661
- {
662
- /*
663
- <span onClick={this.onTabinfo.bind(this,'src')} className={infoTab == 'src' ? 'dotted infoactive' : 'dotted'}>Source</span>
664
- <span onClick={this.onTabinfo.bind(this,'visual')} className={infoTab == 'visual' ? 'dotted infoactive' : 'dotted'}>Visual Design</span>
665
- */
666
- }
667
- <span onClick={this.onTabinfo.bind(this,'references')}className={infoTab=='references' ? 'dotted infoactive' : 'dotted'}>References</span>
668
- <span onClick={this.getFileDetails} className={infoTab == 'changeset' ? 'dotted infoactive' : 'dotted'}>Author</span>
669
- </div>
670
- </div>
671
- </div>
672
- :null
673
- }
674
-
675
- <div className="flexgrow flexbasis cfooter ">
676
- <div className="dflex flexcolumn flexbasis">
677
- <div className="flexgrow flexbasis ccontent">
678
- {
679
- infoTab == 'changeset' ?
680
- <pre className="authorview">{changeset ? changeset : 'loading....!!!'}</pre>
681
- :null
682
- }
683
- {
684
- infoTab == 'code' ?
685
- <CodeView compName={compName} src={window.componentList ?window.componentList[compName].docs.source:Component[compName].docs.source}/>
686
- :null
687
- }
688
- {
689
- infoTab == 'src' ?
690
- <CodeView compName={compName+'src'} src={window.componentList ?window.componentList[propComName].source:Component[propComName].source}/>
691
- : null
692
- }
693
- {
694
- infoTab == 'component' &&
695
- <div className='dflex flexcolumn'>
696
- <div className={'flexgrow flexshrink flexbasis toolarea'}>
697
- <section id="resize" style={{"width":((frameWidth)+'px')}} className={"dflex flexcolumn flexbasis iframeSection"+" "+(frameWidth<481?'section':'')}>
698
- <span className="loadingText" id='loadingText'>
699
- <div className="lds-ripple">
700
- <div></div>
701
- <div></div>
702
- </div>
703
- </span>
704
- <iframe
705
- id="componentIframe"
706
- className="iframe"
707
- src={'/docs/component.html' + location.hash}
708
- mdata={mdata}
709
- />
710
- </section>
711
- </div>
712
- <div className={'flexshrink toolOptions'}>
713
- <div className={'dflex flexrow alignVertical alignHorizontal'}>
714
-
715
- <div className={'responsive offSelection'}>
716
- <span className={"responsiveOption iconOption"} onClick={this.reloadFrame}>
717
- <svg className='svg'>
718
- <use xlinkHref='#reload'></use>
719
- </svg>
720
- </span>
721
- <a className={'responsiveOption iconOption'} href={'/docs/component.html' + location.hash} target="_blank" >
722
- <svg className='svg'>
723
- <use xlinkHref='#newTab'></use>
724
- </svg>
725
- </a>
726
- <span className={'responsiveOption iconOption'+' '+(this.state.isRTL?'activeOption transform':'')} onClick={this.onRtlView}>
727
- <svg className='svg'>
728
- <use xlinkHref='#RTL'></use>
729
- </svg>
730
- </span>
731
- <span className={'responsiveOption iconOption textSize'+' '+(this.state.isRem?'activeOption':'')} onClick={this.onREMView} >
732
- <svg className='svg'>
733
- <use xlinkHref='#rem'></use>
734
- </svg>
735
- </span>
736
- <span className={'responsiveOption iconOption textSize'+' '+(this.state.isEditMode?'activeOption':'')} onClick={this.toggleEditMode} >
737
- <svg className='svg'>
738
- <use xlinkHref='#pencil'></use>
739
- </svg>
740
- </span>
741
- <span className={'responsiveOption iconOption fullScreen'+' '+(this.state.isMenuClose?'activeOption':'')} onClick={this.fullView} >
742
- <svg className='svg'>
743
- <use xlinkHref='#fullScreen'></use>
744
- </svg>
745
- </span>
746
- </div>
747
- <div className={'dflex alignVertical alignHorizontal range'}>
748
- <input min='1' max='12' type='range' defaultValue='9' step='1' id="myRange" onChange={this.iframeSize} className='rangeInput' />
749
- <span className='tooltip'>{this.state.device}</span>
750
- {
751
- this.state.windowSize?
752
- <React.Fragment>
753
- <span className='window'>{this.state.windowSize.width}</span>
754
- <span className='tooltipVal'>x</span>
755
- <span className='window'>{this.state.windowSize.height}</span>
756
- </React.Fragment>:null
757
- }
758
- </div>
759
- </div>
760
- </div>
761
- </div>
762
- }
763
- {
764
- infoTab == 'proptypes' ?
765
- <div className="propsTable">
766
- <div className="tableHeader">
767
- <span className="brR">PropsName</span>
768
- <span className="brR">Type</span>
769
- <span className="brR">isRequired</span>
770
- <span className="brR ">Default Props</span>
771
- <span className="brR ">Description</span>
772
- </div>
773
- {
774
- currentCompProps.map((value, i) => {
775
- return (
776
- <div
777
- className={
778
- currentCompProps.length - 1 == i
779
- ? 'tableHeaderNB'
780
- : 'tableHeader'
781
- }
782
- key={i}
783
- >
784
- <span>
785
- <div>{value}</div>
786
- </span>
787
- <span>
788
- <div>
789
- {propsObj[value] && propsObj[value].hookType}
790
- </div>
791
- </span>
792
- <span>
793
- <div>
794
- {
795
- propsObj[value] && propsObj[value].isRequired? '-': 'true'
796
- }
797
- </div>
798
- </span>
799
- <span className="defaultProps">
800
- <div className="bn">
801
- {JSON.stringify(currentCompDefault[value] || '')}
802
- </div>
803
- </span>
804
- <span className="defaultProps">
805
- <div className="bn">
806
- {JSON.stringify(currentCompPropsDescription[value] || '')}
807
- </div>
808
- </span>
809
-
810
- </div>
811
- );
812
- })
813
- }
814
- </div>
815
- : null
816
- }
817
- {
818
- infoTab == 'references' ?
819
- <div className="referContainer">
820
- <div className='refsBy'>ReferencedBy :</div>
821
- <ul>
822
- {
823
- compName ?
824
- compName.indexOf('__') > -1 ?
825
- mdata[compName.substring(0, compName.indexOf('_'))] &&
826
- mdata[compName.substring(0, compName.indexOf('_'))].referencedby.map((val, i) => {
827
- return (
828
- <li key={i} className='refsLin'>
829
- <a className="link" href={'#' + val}>
830
- {val}
831
- </a>
832
- </li>
833
- );
834
- })
835
- : mdata[compName].referencedby.map((val, i) => {
836
- return (
837
- <li key={i} className='refsLin'>
838
- <a className="link" href={'#' + val}>
839
- {val}
840
- </a>
841
- </li>
842
- );
843
- })
844
- : null
845
- }
846
- </ul>
847
- <div className='refsBy'>References : </div>
848
- <ul>
849
- {
850
- compName ? compName.indexOf('__') > -1
851
- ? mdata[
852
- compName.substring(0, compName.indexOf('_'))
853
- ] &&
854
- mdata[
855
- compName.substring(0, compName.indexOf('_'))
856
- ].references.map((val, i) => {
857
- return (
858
- <li key={i} className='refsLin'>
859
- <a className="link" href={'#' + val}>
860
- {val}
861
- </a>
862
- </li>
863
- );
864
- })
865
- : mdata[compName].references.map((val, i) => {
866
- return (
867
- <li key={i} className='refsLin'>
868
- <a className="link" href={'#' + val}>
869
- {val}
870
- </a>
871
- </li>
872
- );
873
- })
874
- : null
875
- }
876
- </ul>
877
- </div>
878
- : null
879
- }
880
- {
881
- /*infoTab == 'visual' ?
882
- <div>
883
- {
884
- Component[propComName] &&
885
- Component[propComName].docs &&
886
- Component[propComName].docs.images &&
887
- Component[propComName].docs.images.map(image => {
888
- return (
889
- <div className="psdContainer">
890
- <div className="imageContainer">
891
- <img className="psdImage" src={image.view} />
892
- </div>
893
- <div>
894
- <a className="psdLink" href={image.psd} target="_blank" download>
895
- Download PSD
896
- </a>
897
- </div>
898
- <div>
899
- <a className="psdLink" href={image.view} target="_blank" download>
900
- Download Image
901
- </a>
902
- </div>
903
- </div>
904
- );
905
- })
906
- }
907
- </div>
908
- : null */
909
- }
910
- </div>
911
- </div>
912
- </div>
913
- </div>
914
- </div>
915
- </main>
916
- );
917
- }
918
- }
919
- class Search extends React.Component {
920
- render() {
921
- return (
922
- <div className="searchContainer">
923
- <input
924
- type="text"
925
- onChange={this.props.onChange}
926
- placeholder="Search"
927
- className="inputSearch" value={this.props.value}
928
- />
929
- {this.props.value.length>=1&&
930
- <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>}
931
- </div>
932
- );
933
- }
934
- }
935
-
936
- class ComponentList extends React.Component {
937
- constructor(props) {
938
- super(props);
939
- this.state = {
940
- toggle: false
941
- };
942
- }
943
- componentDidMount(){
944
- let {type,viewGroup}=this.props;
945
- let element=document.getElementById(type);
946
- viewGroup==type && element ?
947
- element.scrollIntoView(true) && element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"})
948
- :null
949
- }
950
-
951
- render() {
952
- const { components, type, toggleGroup,viewGroup } = this.props;
953
- let classNameTab = type == viewGroup ? " selected " : '';
954
-
955
- return (
956
- <div data-title={type}>
957
- {
958
- components.length>0&& <div className={"listItem dflex flexrow flexbasis alignVertical offSelection "+ classNameTab} onClick={toggleGroup.bind(this,type)} id={type}>
959
- <i className={"flexshrink listIcon"}>
960
- <svg className='svg'>
961
- <use xlinkHref='#folder'></use>
962
- </svg>
963
- </i>
964
- <span className="dotted flexgrow flexbasis listTitle">{type}</span>
965
- {
966
- components.length>0&&<i className={"flexshrink listCount"}>{(components.filter(function(el) {return el.toLowerCase().indexOf('__') > -1}).length)}</i>
967
- }
968
- </div>
969
- }
970
- <div className={ viewGroup == type ? 'activeComponent' : 'hide'}>
971
- {
972
- components.map((component, i) => {
973
- let docsComp = component.search('__');
974
- return (
975
- <div className={((docsComp == -1) ? "componentMain" : "componentDocs")} key={'component' + i} >
976
- <a
977
- href={ docsComp == -1 && type != 'Global'&& type != 'Page' ? 'javascript:void(0);' : '#' + component}
978
- className={"dflex flexrow flexbasis alignVertical offSelection "+ (this.props.selectedComponent == '#' + component ? 'active' : '') } >
979
- <i className={"listIcon"}>
980
- <svg className='svg'>
981
- <use xlinkHref='#file'></use>
982
- </svg>
983
- </i>
984
- <span className="dotted flexgrow flexbasis listTitle"> {docsComp == -1 ? component : component.split('__')[1]}</span>
985
- {(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>}
986
- </a>
987
- </div>
988
- );
989
- })}
990
- </div>
991
- </div>
992
- );
993
- }
994
- }
995
-
996
- class CodeView extends React.Component {
997
- constructor(props) {
998
- super(props);
999
-
1000
- }
1001
- componentDidMount(){
1002
- let {compName,src} = this.props
1003
- let element = document.getElementById(compName)
1004
- if (componentList[compName] && typeof CodeMirror !== 'undefined' && element ) {
1005
- CodeMirror.fromTextArea(element, {
1006
- lineNumbers: false,
1007
- styleActiveLine: false,
1008
- matchBrackets: false,
1009
- theme: 'blackboard'
1010
- });
1011
- }
1012
- }
1013
-
1014
- render() {
1015
- let {src,compName} = this.props
1016
- return (
1017
- <div className={"dflex flexrow flexbasis "}>
1018
- <textarea className="srcCode" id={compName} defaultValue={src}/>
1019
- </div>
1020
- );
1021
- }
1022
- }
1023
- var user={
1024
- componentObj:{},
1025
- componentList:{},
1026
- dupCompList:[],
1027
- objList:function(fName,gName,key,comp){
1028
- if(this.componentList[key]){
1029
- this.componentList[key]=comp;
1030
- this.dupCompList.push(key)
1031
- }
1032
- else{
1033
- this.componentList[key]=comp;
1034
- }
1035
- if(gName){
1036
- if(!this.componentObj[fName]){
1037
- this.componentObj[fName]={}
1038
- }
1039
- if(!this.componentObj[fName][gName]){
1040
- this.componentObj[fName][gName] = [];
1041
- this.componentObj[fName][gName].push(key)
1042
- }
1043
- else{
1044
- this.componentObj[fName][gName].push(key)
1045
- }
1046
- }
1047
- return {componentObj:this.componentObj,componentList:this.componentList}
1048
- },
1049
- renderDoc:function(compOBJ,dupCompList){
1050
- return(
1051
- ReactDOM.render(
1052
- <Doc
1053
- components={Component}
1054
- componentObj={compOBJ}
1055
- duplicates={dupCompList}
1056
- />,
1057
- react
1058
- )
1059
- )
1060
- }
1061
- }
1062
- var compGroupObj=function(comp,key,compGroup){
1063
- if (comp == 'React' || comp == 'ReactDOM' || comp =='renderToStaticMarkup') {
1064
- return;
1065
- }
1066
- else if(comp=='_provider'){
1067
- return user.objList(null,null,comp,compGroup[comp])
1068
- }
1069
- else{
1070
- if(compGroup[comp].docs && compGroup[comp].docs.componentGroup ){
1071
- let groupName = compGroup[comp].docs.componentGroup;
1072
- let folderName = compGroup[comp].docs.folderName || "General";
1073
- if(comp=='default'){
1074
- return user.objList(folderName,groupName,key,compGroup[comp])
1075
- }
1076
- else{
1077
- return user.objList(folderName,groupName,comp,compGroup[comp])
1078
- }
1079
- }
1080
- }
1081
- }
1082
- Promise.all(Object.keys(Component).map((key) => {
1083
- let componentKey=Component[key];
1084
- if (key == 'React' || key == 'ReactDOM' || key=='renderToStaticMarkup') {
1085
- return;
1086
- }
1087
- if(key=='_provider'){
1088
- return compGroupObj(key,null,Component)
1089
- }
1090
- try{
1091
- return(
1092
- componentKey && componentKey.then((res)=>{
1093
- let compList;
1094
- Object.keys(res).forEach((comp)=>{
1095
- let compGroup=res[comp];
1096
- Object.keys(compGroup).forEach((comps)=>{
1097
- compGroupObj(comps,key,compGroup)
1098
- })
1099
- })
1100
- })
1101
- )
1102
- }catch(error){
1103
- compGroupObj(key,null,Component)
1104
- }
1105
- })).then(()=>{
1106
- window.componentList=user.componentList
1107
- user.renderDoc(user.componentObj,user.dupCompList)
1108
- })
1109
- };
1110
- var onLoader = function () {
1111
- // Minimum resizable area
1112
- var minWidth = 60;
1113
- var minHeight = 40;
1114
-
1115
- // Thresholds
1116
- var FULLSCREEN_MARGINS = -10;
1117
- var MARGINS = 15;
1118
-
1119
- // End of what's configurable.
1120
- var clicked = null;
1121
- var onRightEdge, onBottomEdge, onLeftEdge, onTopEdge;
1122
-
1123
- var rightScreenEdge, bottomScreenEdge;
1124
-
1125
- var preSnapped;
1126
-
1127
- var b, x, y;
1128
-
1129
- var redraw = false;
1130
-
1131
- var pane = document.getElementById( 'resize' );
1132
- var ghostpane = document.getElementById( 'ghostpane' );
1133
- function setBounds( element, x, y, w, h ) {
1134
- element.style.left = x + 'px';
1135
- element.style.top = y + 'px';
1136
- element.style.width = w + 'px';
1137
- element.style.height = h + 'px';
1138
- }
1139
-
1140
- function hintHide() {
1141
- //setBounds(ghostpane, b.left, b.top, b.width, b.height);
1142
- //ghostpane.style.opacity = 0;
1143
- // var b = ghostpane.getBoundingClientRect();
1144
- // ghostpane.style.top = b.top + b.height / 2;
1145
- // ghostpane.style.left = b.left + b.width / 2;
1146
- // ghostpane.style.width = 0;
1147
- // ghostpane.style.height = 0;
1148
- }
1149
-
1150
- // Mouse events
1151
- pane && pane.addEventListener( 'mousedown', onMouseDown );
1152
- pane && document.addEventListener( 'mousemove', onMove );
1153
- pane && document.addEventListener( 'mouseup', onUp );
1154
-
1155
- // Touch events
1156
- pane && pane.addEventListener( 'touchstart', onTouchDown );
1157
- pane && document.addEventListener( 'touchmove', onTouchMove );
1158
- pane && document.addEventListener( 'touchend', onTouchEnd );
1159
-
1160
- function onTouchDown( e ) {
1161
- onDown( e.touches[ 0 ] );
1162
- e.preventDefault();
1163
- }
1164
-
1165
- function onTouchMove( e ) {
1166
- onMove( e.touches[ 0 ] );
1167
- }
1168
-
1169
- function onTouchEnd( e ) {
1170
- if ( e.touches.length == 0 ) onUp( e.changedTouches[ 0 ] );
1171
- }
1172
-
1173
- function onMouseDown( e ) {
1174
- onDown( e );
1175
- e.preventDefault();
1176
- }
1177
-
1178
- function onDown( e ) {
1179
- calc( e );
1180
-
1181
- var isResizing = onRightEdge || onBottomEdge || onTopEdge || onLeftEdge;
1182
-
1183
- clicked = {
1184
- x: x,
1185
- y: y,
1186
- cx: e.clientX,
1187
- cy: e.clientY,
1188
- w: b.width,
1189
- h: b.height,
1190
- isResizing: isResizing,
1191
- isMoving: !isResizing && canMove(),
1192
- onTopEdge: onTopEdge,
1193
- onLeftEdge: onLeftEdge,
1194
- onRightEdge: onRightEdge,
1195
- onBottomEdge: onBottomEdge
1196
- };
1197
- }
1198
-
1199
- function canMove() {
1200
- return x > 0 && x < b.width && y > 0 && y < b.height && y < 30;
1201
- }
1202
-
1203
- function calc( e ) {
1204
- b = pane.getBoundingClientRect();
1205
- x = e.clientX - b.left;
1206
- y = e.clientY - b.top;
1207
-
1208
- onTopEdge = y < MARGINS;
1209
- onLeftEdge = x < MARGINS;
1210
- onRightEdge = x >= b.width - MARGINS;
1211
- onBottomEdge = y >= b.height - MARGINS;
1212
-
1213
- rightScreenEdge = window.innerWidth - MARGINS;
1214
- bottomScreenEdge = window.innerHeight - MARGINS;
1215
- }
1216
-
1217
- var e;
1218
-
1219
- function onMove( ee ) {
1220
- calc( ee );
1221
-
1222
- e = ee;
1223
-
1224
- redraw = true;
1225
- }
1226
-
1227
- function animate() {
1228
- requestAnimationFrame( animate );
1229
-
1230
- if ( !redraw ) return;
1231
-
1232
- redraw = false;
1233
-
1234
- if ( clicked && clicked.isResizing ) {
1235
- if ( clicked.onRightEdge ) pane.style.width = Math.max( x, minWidth ) + 'px';
1236
- if ( clicked.onBottomEdge )
1237
- pane.style.height = Math.max( y, minHeight ) + 'px';
1238
-
1239
- if ( clicked.onLeftEdge ) {
1240
- var currentWidth = Math.max(
1241
- clicked.cx - e.clientX + clicked.w,
1242
- minWidth
1243
- );
1244
- if ( currentWidth > minWidth ) {
1245
- pane.style.width = currentWidth + 'px';
1246
- // pane.style.left = e.clientX + 'px';
1247
- }
1248
- }
1249
-
1250
- if ( clicked.onTopEdge ) {
1251
- var currentHeight = Math.max(
1252
- clicked.cy - e.clientY + clicked.h,
1253
- minHeight
1254
- );
1255
- if ( currentHeight > minHeight ) {
1256
- pane.style.height = currentHeight + 'px';
1257
- pane.style.top = e.clientY + 'px';
1258
- }
1259
- }
1260
-
1261
- hintHide();
1262
-
1263
- return;
1264
- }
1265
-
1266
- if ( clicked && clicked.isMoving ) {
1267
- if (
1268
- b.top < FULLSCREEN_MARGINS ||
1269
- b.left < FULLSCREEN_MARGINS ||
1270
- b.right > window.innerWidth - FULLSCREEN_MARGINS ||
1271
- b.bottom > window.innerHeight - FULLSCREEN_MARGINS
1272
- ) {
1273
- // hintFull();
1274
- setBounds( ghostpane, 0, 0, window.innerWidth, window.innerHeight );
1275
- ghostpane.style.opacity = 0.2;
1276
- } else if ( b.top < MARGINS ) {
1277
- // hintTop();
1278
- setBounds( ghostpane, 0, 0, window.innerWidth, window.innerHeight / 2 );
1279
- ghostpane.style.opacity = 0.2;
1280
- } else if ( b.left < MARGINS ) {
1281
- // hintLeft();
1282
- setBounds( ghostpane, 0, 0, window.innerWidth / 2, window.innerHeight );
1283
- ghostpane.style.opacity = 0.2;
1284
- } else if ( b.right > rightScreenEdge ) {
1285
- // hintRight();
1286
- setBounds(
1287
- ghostpane,
1288
- window.innerWidth / 2,
1289
- 0,
1290
- window.innerWidth / 2,
1291
- window.innerHeight
1292
- );
1293
- ghostpane.style.opacity = 0.2;
1294
- } else if ( b.bottom > bottomScreenEdge ) {
1295
- // hintBottom();
1296
- setBounds(
1297
- ghostpane,
1298
- 0,
1299
- window.innerHeight / 2,
1300
- window.innerWidth,
1301
- window.innerWidth / 2
1302
- );
1303
- ghostpane.style.opacity = 0.2;
1304
- } else {
1305
- hintHide();
1306
- }
1307
-
1308
- if ( preSnapped ) {
1309
- setBounds(
1310
- pane,
1311
- e.clientX - preSnapped.width / 2,
1312
- e.clientY - Math.min( clicked.y, preSnapped.height ),
1313
- preSnapped.width,
1314
- preSnapped.height
1315
- );
1316
- return;
1317
- }
1318
-
1319
- // moving
1320
- pane.style.top = e.clientY - clicked.y + 'px';
1321
- //pane.style.left = e.clientX - clicked.x + 'px';
1322
-
1323
- return;
1324
- }
1325
-
1326
- // This code executes when mouse moves without clicking
1327
-
1328
- // style cursor
1329
- if ( ( onRightEdge && onBottomEdge ) || ( onLeftEdge && onTopEdge ) ) {
1330
- pane.style.cursor = 'nwse-resize';
1331
- } else if ( ( onRightEdge && onTopEdge ) || ( onBottomEdge && onLeftEdge ) ) {
1332
- pane.style.cursor = 'nesw-resize';
1333
- } else if ( onRightEdge || onLeftEdge ) {
1334
- pane.style.cursor = 'ew-resize';
1335
- } else if ( onBottomEdge || onTopEdge ) {
1336
- pane.style.cursor = 'ns-resize';
1337
- } else if ( canMove() ) {
1338
- pane.style.cursor = 'move';
1339
- } else {
1340
- pane.style.cursor = 'default';
1341
- }
1342
- }
1343
-
1344
- animate();
1345
-
1346
- function onUp( e ) {
1347
- calc( e );
1348
-
1349
- if ( clicked && clicked.isMoving ) {
1350
- // Snap
1351
- var snapped = {
1352
- width: b.width,
1353
- height: b.height
1354
- };
1355
-
1356
- if (
1357
- b.top < FULLSCREEN_MARGINS ||
1358
- b.left < FULLSCREEN_MARGINS ||
1359
- b.right > window.innerWidth - FULLSCREEN_MARGINS ||
1360
- b.bottom > window.innerHeight - FULLSCREEN_MARGINS
1361
- ) {
1362
- // hintFull();
1363
- setBounds( pane, 0, 0, window.innerWidth, window.innerHeight );
1364
- preSnapped = snapped;
1365
- } else if ( b.top < MARGINS ) {
1366
- // hintTop();
1367
- setBounds( pane, 0, 0, window.innerWidth, window.innerHeight / 2 );
1368
- preSnapped = snapped;
1369
- } else if ( b.left < MARGINS ) {
1370
- // hintLeft();
1371
- setBounds( pane, 0, 0, window.innerWidth / 2, window.innerHeight );
1372
- preSnapped = snapped;
1373
- } else if ( b.right > rightScreenEdge ) {
1374
- // hintRight();
1375
- setBounds(
1376
- pane,
1377
- window.innerWidth / 2,
1378
- 0,
1379
- window.innerWidth / 2,
1380
- window.innerHeight
1381
- );
1382
- preSnapped = snapped;
1383
- } else if ( b.bottom > bottomScreenEdge ) {
1384
- // hintBottom();
1385
- setBounds(
1386
- pane,
1387
- 0,
1388
- window.innerHeight / 2,
1389
- window.innerWidth,
1390
- window.innerWidth / 2
1391
- );
1392
- preSnapped = snapped;
1393
- } else {
1394
- preSnapped = null;
1395
- }
1396
-
1397
- hintHide();
1398
- }
1399
-
1400
- clicked = null;
1401
- }
1402
- };
1403
-
1404
- </script>
1405
- <script type="text/javascript">
1406
- var html =
1407
- "<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>";
1408
- var iframe = document.getElementById( 'ifm' );
1409
- var frameDoc = iframe.document;
1410
- if ( iframe.contentWindow ) {
1411
- frameDoc = iframe.contentWindow.document;
1412
- frameDoc.open();
1413
- frameDoc.writeln( html );
1414
- frameDoc.close();
1415
- } else {
1416
- }
1417
- </script>
1418
- <div style="visibility: hidden;height: 0;width: 0;height:0">
1419
- <svg
1420
- xmlSpace="preserve"
1421
- version="1.1"
1422
- xmlns="http://www.w3.org/2000/svg"
1423
- xmlnsXlink="http://www.w3.org/1999/xlink"
1424
- >
1425
- <symbol id="home" x="0px" y="0px" viewBox="0 0 495.398 495.398" fill='#FFFFFF' enableBackground="new 0 0 495.398 495.398">
1426
- <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"/>
1427
- <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"/>
1428
- </symbol>
1429
- <symbol
1430
- id='bottomArrow'
1431
- viewBox="0 0 792 792"
1432
- >
1433
- <polygon
1434
- 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"
1435
- />
1436
-
1437
- </symbol>
1438
- <symbol id="reload" viewBox="0 0 28.265 28.265">
1439
- <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"/>
1440
- </symbol>
1441
- <symbol id='newTab' x="0px" y="0px" viewBox="0 0 26 26" enableBackground='new 0 0 26 26'>
1442
- <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"/>
1443
- <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"/>
1444
- </symbol>
1445
- <symbol id='RTL'
1446
- width="13" height="16"
1447
- viewBox="0 0 13 16"
1448
- fill="none"
1449
- >
1450
- <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"/>
1451
- </symbol>
1452
- <symbol id="rem" enableBackground="new 0 0 458.353 458.353" viewBox="0 0 458.353 458.353">
1453
- <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"/>
1454
- <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"/>
1455
- </symbol>
1456
- <symbol id='fullScreen' viewBox="0 0 18 18">
1457
- <path d="M4.5 11H3v4h4v-1.5H4.5V11zM3 7h1.5V4.5H7V3H3v4zm10.5 6.5H11V15h4v-4h-1.5v2.5zM11 3v1.5h2.5V7H15V3h-4z"/>
1458
- </symbol>
1459
- <symbol id='folder' viewBox="0 0 60 60" >
1460
- <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"/>
1461
- </symbol>
1462
- <symbol id='file' viewBox="0 0 512 512" >
1463
- <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"/>
1464
- <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"/>
1465
- <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"/>
1466
- <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"/>
1467
- <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"/>
1468
- </symbol>
1469
- <symbol id="pencil" viewBox="0 0 512 512">
1470
- <g>
1471
- <polygon points="85.333,282.64 85.333,362.64 165.333,362.64 378.667,149.307 298.667,69.307 "/>
1472
- <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
1473
- C450.027,77.947,450.027,64.4,441.707,56.08z"/>
1474
- </g>
1475
- <g >
1476
- <rect y="426.64" width="512" height="85.333"/>
1477
- </g>
1478
- </symbol>
1479
- <svg
1480
- x='0px'
1481
- y='0px'
1482
- viewBox='0 0 512 512'
1483
- enableBackground= 'new 0 0 512 512'
1484
- id='smileIcon'
1485
- >
1486
- <path
1487
- fill= '#f00'
1488
- d='M344.354,381.58c-1.33-1.651-33.207-40.458-88.354-40.458
1489
- 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
1490
- 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
1491
- 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
1492
- 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
1493
- 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
1494
- 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
1495
- S326.327,212.122,344,212.122z'
1496
- />
1497
- </svg>
1498
- </svg>
1499
- </div>
1500
- </body>
1501
- </html>
1
+ <!DOCTYPE html>
2
+ <html dir="ltr">
3
+
4
+ <head>
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
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"
9
+ rel="stylesheet" />
10
+ <link href="https://supportclientapp.localzoho.com/support/images/support-2.ico" type="IMAGE/X-ICON" rel="SHORTCUT ICON" />
11
+
12
+ <script src="./js/codemirror.js"></script>
13
+ <script src="./js/javascript.js"></script>
14
+ <script src="./js/active-line.js"></script>
15
+ <script src="./js/matchbrackets.js"></script>
16
+ <link rel="stylesheet" type="text/css" href="./css/hopscotch.css">
17
+ <link rel="stylesheet" href="./css/markdown.css">
18
+ <title>Zoho Desk - React Components</title>
19
+ <script>
20
+
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');
34
+ }
35
+ }
36
+ </script>
37
+ </head>
38
+
39
+ <body>
40
+
41
+ <div id="react"></div>
42
+ <div class="iframeCentering">
43
+ <span class="posAb">Zoho Desk - React Components</span>
44
+ <iframe src="about:blank" id="ifm"></iframe>
45
+ </div>
46
+
47
+ <script src="/docs/js/babel.min.js"></script>
48
+ <script type="text/babel">
49
+ window.loadDOC = function(Component, mdata) {
50
+ window.RTLmode = false;
51
+ var ReactDOM = Component.ReactDOM;
52
+ window.React = Component.React;
53
+ window.ReactDOM = Component.ReactDOM;
54
+ var React= Component.React;
55
+ class Doc extends React.Component {
56
+ constructor(props) {
57
+ 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;
66
+ }
67
+ })
68
+ }):null
69
+ if(folderNameDefault== '' && groupNameDefault==''){
70
+ folderNameDefault='Global'
71
+ groupNameDefault='General'
72
+ }
73
+ this.state = {
74
+ componentObj:props.componentObj,
75
+ duplicates:props.duplicates,
76
+ search: '',
77
+ selectedComponent: location.hash,
78
+ Components: Component,
79
+ //popUp: '',
80
+ 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
100
+
101
+ };
102
+ this.search = this.search.bind(this);
103
+ this.clear = this.clear.bind(this);
104
+ this.toggleRemContainer = this.toggleRemContainer.bind(this);
105
+ this.hashChange = this.hashChange.bind(this);
106
+ //this.popupToggle = this.popupToggle.bind(this);
107
+ //this.popupToggleDoc = this.popupToggleDoc.bind(this);
108
+ this.removeClose = this.removeClose.bind(this);
109
+ //this.fullScreenSrcToggle = this.fullScreenSrcToggle.bind(this);
110
+ this.toggleFolder = this.toggleFolder.bind(this);
111
+ this.toggleGroup = this.toggleGroup.bind(this);
112
+ this.onTabinfo = this.onTabinfo.bind(this);
113
+ this.codeview = this.codeview.bind(this);
114
+ this.reloadFrame = this.reloadFrame.bind(this);
115
+ this.getFileDetails = this.getFileDetails.bind(this);
116
+ this.iframeSize = this.iframeSize.bind(this);
117
+ 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);
132
+ }
133
+
134
+ fullView(){
135
+ this.setState({isMenuClose:!this.state.isMenuClose})
136
+ }
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});
145
+ }
146
+ else {
147
+ iframe.contentDocument.documentElement.setAttribute('contenteditable',"true");
148
+ this.setState({isEditMode:true});
149
+ }}
150
+
151
+ }
152
+
153
+ compList(e){
154
+ if(e == this.state.compList){
155
+ }
156
+ else if(e !== this.state.compList){
157
+ this.setState({compList:e})
158
+ }
159
+ else{
160
+ this.setState({compList:''})
161
+ }
162
+ }
163
+
164
+ getWindow(){
165
+ var iframe=document.getElementById('componentIframe')
166
+ if(iframe){
167
+ this.setState({windowSize:{height:iframe.offsetHeight,width:iframe.offsetWidth}})
168
+ }
169
+ }
170
+
171
+ responseMenu(){
172
+ this.setState({ responsiveMenu:!this.state.responsiveMenu})
173
+ }
174
+
175
+ toggleRemContainer(){
176
+ this.setState({ isRemOpen: !this.state.isRemOpen });
177
+ }
178
+
179
+ calculatePxToRem(){
180
+ let result=Number((this.state.pixelSize/this.state.rootSize).toFixed(4));
181
+ this.setState({resultRem:result+"rem"});
182
+ }
183
+
184
+ calculateRemToPx(){
185
+ let result=Number(((Number(parseFloat(this.state.resultRem))*this.state.rootSize).toFixed(4)));
186
+ this.setState({pixelSize:result});
187
+ }
188
+
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
+
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
+
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
+
204
+ toggleFolder(name,e){
205
+ let { viewFolder } = this.state;
206
+ if(name == viewFolder){
207
+ name =''
208
+ }
209
+ this.setState({ viewFolder: name });
210
+ }
211
+ hashChange() {
212
+ let ele = document.getElementById('componentIframe')
213
+ if(ele){
214
+ var src = document.getElementById('componentIframe').src;
215
+ var url = src && src.split('#')[0];
216
+ document.getElementById('componentIframe').src = url + location.hash;
217
+ }
218
+ this.setState({ selectedComponent: location.hash, infoTab:'component' });
219
+ }
220
+ toggleGroup(name) {
221
+ let element=name;
222
+ let { viewGroup } = this.state;
223
+ if(name == viewGroup){
224
+ name =''
225
+ }
226
+ this.setState({ viewGroup: name });
227
+ }
228
+
229
+ componentDidMount() {
230
+ window.addEventListener('hashchange', this.hashChange);
231
+ onLoader()
232
+ let iframeEle=document.getElementById('componentIframe')
233
+ iframeEle.contentWindow.addEventListener('resize',this.getWindow)
234
+ 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
+ }
240
+ //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
+ });
246
+ }
247
+
248
+ codeview(){
249
+
250
+ let compName = location.hash != '' ? location.hash.substring(1) : null;
251
+ let element = document.getElementById('codeView')
252
+ if (componentList[compName] && typeof CodeMirror !== 'undefined' && element ) {
253
+ CodeMirror(element, {
254
+ value:'',
255
+ lineNumbers: false,
256
+ styleActiveLine: false,
257
+ matchBrackets: false,
258
+ theme: 'blackboard',
259
+ });
260
+ }
261
+
262
+ }
263
+
264
+ componentWillUnmount() {
265
+ let iframe=document.getElementById('componentIframe');
266
+ //document.removeEventListener('click', this.popupToggleDoc);
267
+ iframe.contentWindow.removeEventListener('resize',this.getWindow)
268
+ window.removeEventListener('hashchange', this.hashChange);
269
+ window.removeEventListener('error',this.reloadFrame);
270
+ }
271
+
272
+ search(e) {
273
+ this.setState({ search: e.target.value });
274
+ }
275
+
276
+ clear(e) {
277
+ this.setState({ search: '' });
278
+ }
279
+
280
+ // popupToggleDoc() {
281
+ // this.setState({ popUp: ''});
282
+ // }
283
+
284
+ // fullScreenSrcToggle(select) {
285
+ // this.setState({ fullScreenSrc: select });
286
+ // this.popupToggleDoc();
287
+ // }
288
+
289
+ removeClose(e) {
290
+ e.stopPropagation && e.stopPropagation();
291
+ e.nativeEvent.stopImmediatePropagation &&
292
+ e.nativeEvent.stopImmediatePropagation();
293
+ }
294
+
295
+ filter(list, str) {
296
+ list = list.sort((a, b) => {
297
+ var at = a.toLowerCase();
298
+ var bt = b.toLowerCase();
299
+ return at > bt ? 1 : at < bt ? -1 : 0;
300
+ });
301
+ // return list.filter(
302
+ // item => item.toUpperCase().indexOf(str.toUpperCase()) != -1
303
+ // );
304
+
305
+ return list.filter((item)=>{
306
+ let value = item.split('__')[0]
307
+
308
+ return value.toUpperCase().indexOf(str.toUpperCase()) != -1
309
+ })
310
+ }
311
+
312
+ onTabinfo(name){
313
+ this.setState({infoTab:name})
314
+ }
315
+
316
+ reloadFrame(){
317
+ let iframeEle = document.getElementById('componentIframe');
318
+ //this.getWindow()
319
+ iframeEle.contentDocument.location.reload()
320
+ parent.document.getElementById("loadingText").style.display= 'block'
321
+ }
322
+
323
+ getFileDetails(){
324
+ 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" })
333
+ });
334
+ }
335
+
336
+ iframeSize() {
337
+ let slider=document.getElementById('myRange')
338
+ 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}
354
+ }
355
+ this.setState(sizes[value]);
356
+ this.getWindow()
357
+ }
358
+
359
+ menuOpen() {
360
+ this.setState({isMenuClose:!this.state.isMenuClose})
361
+ }
362
+
363
+ onRtlView(e) {
364
+ let iframeEle = document.getElementById('componentIframe');
365
+ let ele = e.target.element || null
366
+ if (!this.state.isRTL) {
367
+ this.setState({isRTL:true})
368
+ window.RTLmode = true;
369
+ iframeEle.contentDocument.documentElement.setAttribute('dir', 'rtl');
370
+ } else {
371
+ this.setState({isRTL:false})
372
+ iframeEle.contentDocument.documentElement.setAttribute('dir', 'ltr');
373
+ window.RTLmode = false;
374
+ }
375
+ }
376
+
377
+ onREMView(e) {
378
+ let iframeEle = document.getElementById('componentIframe');
379
+ let ele = e.target.element || null
380
+ if (!this.state.isRem) {
381
+ this.setState({isRem:true})
382
+ iframeEle.contentDocument.documentElement.classList.add('isRem');
383
+ } else {
384
+ this.setState({isRem:false})
385
+ iframeEle.contentDocument.documentElement.classList.remove('isRem');
386
+ }
387
+ }
388
+
389
+
390
+ handleURL(){
391
+ this.setState({viewFolder:'General',viewGroup:'Global',infoTab:'dashboard'})
392
+ window.history.pushState("", "", '/docs/');
393
+ }
394
+
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
+ return dbList.push(item);
400
+ }
401
+ })
402
+ return dbList
403
+ }
404
+
405
+ render() {
406
+ const {
407
+ Components,
408
+ componentObj,
409
+ search,
410
+ selectedComponent,
411
+ //popUp,
412
+ viewGroup,
413
+ viewFolder,
414
+ moreInform,
415
+ infoTab,
416
+ changeset,
417
+ version,
418
+ frameWidth,
419
+ isMenuClose,
420
+ isRTL,
421
+ isRem,
422
+ isRemOpen,
423
+ rootSize,
424
+ pixelSize,
425
+ resultRem,
426
+ duplicates,
427
+ isEditMode
428
+ } = 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})
446
+ })
447
+ let compObjList=componentsObj
448
+
449
+ let dashboardList=[
450
+ this.unusedList(mdata) &&{name:'Unused',componentList:this.unusedList(mdata)},
451
+ duplicates && {name:'Duplicates',componentList:duplicates}
452
+ ]
453
+
454
+ return (
455
+ <main className="dflex flexrow">
456
+ <div className="showToggleLeft" onClick={this.menuOpen}>
457
+ <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGOSURBVGhD7ZrBKkVBHIdPSNKV5A3YKSvvYG/BE0jI3tbGxsYGdTeeQnY8gcLOTigba1KE73ewOGUxc8/8/2fUfPXVndOd23ydM92ae6sIeniIT/iZgW94hYsYxTH+9YFd+4pzGMQIvqAmzepCBgzhESpmRxdCmERNuKtH+bCBWpeCgighxpSQEmJECSkhRpSQkJBRvMFTHNcFQ0xDxvAW9f5ztIwxf7Rm8B6tY1z2iEeM22a3jnELEZYxriHCKsY9RFjERIfo4OECT+rR4KSOiQ5JScqYRsgULji7jM/YNqYR8vAz6NIz1KlILI2QfdTz762Ol7SID1zFQeh0j4gtVECbCBEdMox6tufrUTtSRYjokBTfIyJlhOgkJHWEcA+xiBCuIVYRwi3EMkK4hFhHCPMQjwhhGjKN72gdIczvyDYufb80xW2zW1NCSogRJaSEGFFC/n3IBGrCYz3Kh03Uug7qUSC/x0Z7uJaB63iNWpPuTDArqP9IaWJOXqJ+JYtCJym72M9A7QvdFSKq6gtlqbpowcg25wAAAABJRU5ErkJggg==" />
458
+ </div>
459
+
460
+ <div className={"menuBar "+(isMenuClose?"isMenuClose":"isMenuOpen")}>
461
+ <div className="dflex flexcolumn">
462
+ <div className="flexshrink logoPart dflex">
463
+ <img src="./css/desklogo.png" />
464
+ <div className={'home'} onClick={this.handleURL}>
465
+ <span className='homeIcon'>
466
+ <svg className='svg'>
467
+ <use xlinkHref='#home'></use>
468
+ </svg>
469
+ </span>
470
+ </div>
471
+ </div>
472
+ <div className="flexgrow flexbasis sliderContainer">
473
+ <div className="dflex flexcolumn">
474
+ <div className="flexshrink searchPart">
475
+ <Search onChange={this.search} value={search} onClear={this.clear} />
476
+ </div>
477
+ <menu className="flexgrow flexbasis scrollY menuContainer" id="leftPanel">
478
+ {
479
+ 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)
487
+ })
488
+ })
489
+
490
+ let outcomp = Object.keys(componentObj[folderName]).sort().map(
491
+ grn => {
492
+ let searchList = this.filter(
493
+ componentObj[folderName][grn],
494
+ search
495
+ );
496
+ if(searchList.length){
497
+ folderCompCount=folderCompCount+1;
498
+ }
499
+ return searchList.length ? true : false;
500
+ }
501
+ );
502
+ if (outcomp.indexOf(true) != -1) {
503
+ return (
504
+ <div>
505
+ <div
506
+ onClick={this.toggleFolder.bind(
507
+ this,
508
+ folderName
509
+ )}
510
+ className={'mainMenu dflex flexrow alignVertical offSelection'+' '+
511
+ (viewFolder == folderName
512
+ ? 'mainMenuActive'
513
+ : '')
514
+ }
515
+ >
516
+ <span className={'flexgrow mainMenutitle dotted'}>{folderName}</span>
517
+ <span className={'flexshrink mainMenuCount'}>{folderCompCount}</span>
518
+ <i className={'flexshrink mainMenuArrow'}>
519
+ <svg className='svg'>
520
+ <use xlinkHref='#bottomArrow'></use>
521
+ </svg>
522
+ </i>
523
+ </div>
524
+ <div
525
+ className={
526
+ viewFolder == folderName || search
527
+ ? 'folderOpen'
528
+ : 'hide'
529
+ }
530
+ >
531
+ {
532
+ sortList.map((grpName)=>{
533
+ return(
534
+ <ComponentList
535
+ type={grpName.fName}
536
+ components={this.filter(
537
+ componentObj[folderName][grpName.fName],
538
+ search
539
+ )}
540
+ selectedComponent={selectedComponent}
541
+ toggleGroup={this.toggleGroup}
542
+ viewGroup={
543
+ search ? grpName.fName : viewGroup
544
+ }
545
+ />)
546
+ })
547
+ }
548
+ </div>
549
+ </div>
550
+ );
551
+ } else {
552
+ return null;
553
+ }
554
+ })
555
+ }
556
+ </menu>
557
+ {
558
+ versionFz!=''&&
559
+ <div className="flexshrink versionPart ">
560
+ <span>Version {versionFz}</span>
561
+ </div>
562
+ }
563
+ <div className="flexshrink tools" onClick={this.toggleRemContainer}>
564
+ <img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDE3NC4yNDggMTc0LjI0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTc0LjI0OCAxNzQuMjQ4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxnPgoJPHBhdGggZD0iTTE3My4xNDUsNzMuOTFjLTAuNDEzLTIuNzIyLTIuMjktNC45OTMtNC44ODEtNS45MTJsLTEzLjcyNy00Ljg4MWMtMC44MTItMi4zLTEuNzMzLTQuNTM2LTIuNzU0LTYuNjk5bDYuMjQ3LTEzLjE0NiAgIGMxLjE3OS0yLjQ3OSwwLjg5OS01LjQxMS0wLjcyOS03LjYyOGMtNS4yNjUtNy4xNjEtMTEuNTU2LTEzLjQ1Mi0xOC42OTgtMTguNjkzYy0yLjIxOS0xLjYyOS01LjE0MS0xLjkwNi03LjYyNS0wLjcyNCAgIGwtMTMuMTM4LDYuMjQyYy0yLjE2My0xLjAyMS00LjQwMi0xLjk0LTYuNzA0LTIuNzUybC00Ljg4My0xMy43MjljLTAuOTE5LTIuNTg2LTMuMTg0LTQuNDU4LTUuOS00Ljg3NiAgIGMtOS42NS0xLjQ4My0xNi43OTItMS40ODMtMjYuNDU3LDBjLTIuNzEzLDAuNDE4LTQuOTgxLDIuMjktNS45LDQuODc2bC00Ljg4MywxMy43MjljLTIuMzAyLDAuODEyLTQuNTQxLDEuNzMxLTYuNzAyLDIuNzUyICAgbC0xMy4xNDMtNi4yNDJjLTIuNDc5LTEuMTgxLTUuNDA2LTAuOTA0LTcuNjIzLDAuNzI0Yy03LjE0Miw1LjI0MS0xMy40MzMsMTEuNTMyLTE4LjY5OCwxOC42OTMgICBjLTEuNjI5LDIuMjE3LTEuOTA4LDUuMTQ4LTAuNzI5LDcuNjI4bDYuMjQ3LDEzLjE0NmMtMS4wMjEsMi4xNTktMS45NCw0LjQtMi43NTQsNi42OTlMNS45ODIsNjguMDAzICAgYy0yLjU4OSwwLjkxOS00LjQ2MywzLjE4OS00Ljg3OSw1LjkwN2MtMC43NDksNC45Mi0xLjA5OSw5LjExNS0xLjA5OSwxMy4yMTljMCw0LjA5OCwwLjM1LDguMjk5LDEuMDk5LDEzLjIxOSAgIGMwLjQxMywyLjcyMiwyLjI5LDQuOTkzLDQuODgxLDUuOTEybDEzLjcyNyw0Ljg4MWMwLjgxNCwyLjMwNCwxLjczNiw0LjU0MSwyLjc1NCw2LjcwNGwtNi4yNDcsMTMuMTQxICAgYy0xLjE3OSwyLjQ3OS0wLjg5OSw1LjQxMSwwLjcyNyw3LjYyM2M1LjI1OCw3LjE1NiwxMS41NDksMTMuNDQ3LDE4LjcsMTguNjk4YzIuMjE3LDEuNjI5LDUuMTQ0LDEuOTExLDcuNjI1LDAuNzI0bDEzLjEzOC02LjI0MiAgIGMyLjE2MywxLjAyMSw0LjQwMiwxLjk0LDYuNzA0LDIuNzUybDQuODgzLDEzLjcyOWMwLjkxOSwyLjU4NiwzLjE4NCw0LjQ1OCw1LjksNC44NzZjNC44MjgsMC43NDQsOS4xNTQsMS4xMDQsMTMuMjI4LDEuMTA0ICAgYzQuMDc0LDAsOC40MDEtMC4zNiwxMy4yMjgtMS4xMDRjMi43MTUtMC40MTgsNC45ODEtMi4yOSw1LjktNC44NzZsNC44ODMtMTMuNzI5YzIuMzAyLTAuODEyLDQuNTQxLTEuNzMxLDYuNzA0LTIuNzUyICAgbDEzLjEzOCw2LjI0MmMyLjQ4NCwxLjE4Niw1LjQxMSwwLjkwNCw3LjYyOC0wLjcyNGM3LjE1OS01LjI2LDEzLjQ1LTExLjU1MSwxOC42OTgtMTguNjk4YzEuNjI2LTIuMjEyLDEuOTA2LTUuMTQ0LDAuNzI3LTcuNjIzICAgbC02LjI0Ny0xMy4xNDFjMS4wMjEtMi4xNjMsMS45NDItNC40MDUsMi43NTQtNi43MDRsMTMuNzI3LTQuODgxYzIuNTkxLTAuOTE5LDQuNDY4LTMuMTg5LDQuODgxLTUuOTEyICAgYzAuNzQ5LTQuOTIsMS4wOTktOS4xMiwxLjA5OS0xMy4yMTlTMTczLjg5NCw3OC44MjksMTczLjE0NSw3My45MXogTTE1OC45NDksOTMuNzJsLTEyLjg3OCw0LjU4ICAgYy0yLjI1MSwwLjc5Ny0zLjk4MiwyLjYyNS00LjY2LDQuOTJjLTEuMTUsMy44ODktMi42NjQsNy41NjktNC41MDQsMTAuOTQzYy0xLjE0MiwyLjEtMS4yMTMsNC42MTktMC4xODcsNi43NzdsNS44NDEsMTIuMjg1ICAgYy0yLjgyMiwzLjM4OS01Ljk0Myw2LjUxNS05LjMzNyw5LjMzNGwtMTIuMjgzLTUuODM0Yy0yLjE2MS0xLjAzNi00LjY3Mi0wLjk1My02Ljc3NSwwLjE4NWMtMy4zNzksMS44MzgtNy4wNjEsMy4zNS0xMC45NTMsNC41MDIgICBjLTIuMjksMC42NzYtNC4xMTgsMi40MDYtNC45MTcsNC42NTdsLTQuNTgyLDEyLjg4M2MtNC42NzcsMC40NzYtOC41MDMsMC40NzYtMTMuMTgsMGwtNC41ODItMTIuODgzICAgYy0wLjgtMi4yNDYtMi42MjgtMy45ODItNC45MTctNC42NTdjLTMuODk0LTEuMTUyLTcuNTc5LTIuNjY0LTEwLjk1My00LjUwMmMtMi4xMDMtMS4xNDctNC42MTktMS4yMi02Ljc3NS0wLjE4NWwtMTIuMjgzLDUuODM5ICAgYy0zLjM5MS0yLjgyNS02LjUxMi01Ljk0Ni05LjMzNy05LjMzOWw1Ljg0MS0xMi4yODVjMS4wMjYtMi4xNTksMC45NTUtNC42NzctMC4xODctNi43NzdjLTEuODM1LTMuMzY0LTMuMzUtNy4wNDktNC41MDQtMTAuOTQ4ICAgYy0wLjY3OC0yLjI5LTIuNDExLTQuMTE4LTQuNjYtNC45MTVsLTEyLjg3OC00LjU4Yy0wLjI0My0yLjM0My0wLjM2LTQuNTAyLTAuMzYtNi41OTJzMC4xMTctNC4yNDQsMC4zNi02LjU4N2wxMi44ODEtNC41ODQgICBjMi4yNDgtMC43OTcsMy45NzktMi42MjUsNC42NTctNC45MTVjMS4xNTItMy44ODksMi42NjctNy41NzQsNC41MDQtMTAuOTUzYzEuMTQyLTIuMDk1LDEuMjEzLTQuNjE5LDAuMTg3LTYuNzcybC01Ljg0MS0xMi4yODUgICBjMi44MjctMy4zOTMsNS45NDgtNi41MTksOS4zMzctOS4zMzlsMTIuMjg4LDUuODM5YzIuMTUxLDEuMDM2LDQuNjc3LDAuOTUzLDYuNzc1LTAuMTg1YzMuMzcyLTEuODM4LDcuMDU0LTMuMzUsMTAuOTQ4LTQuNTAyICAgYzIuMjktMC42NzYsNC4xMTgtMi40MTEsNC45MTctNC42NTdsNC41ODItMTIuODgzYzQuNjMzLTAuNDgxLDguNDY2LTAuNDgxLDEzLjE4LDBsNC41ODIsMTIuODgzICAgYzAuOCwyLjI0NiwyLjYyOCwzLjk4Miw0LjkxNyw0LjY1N2MzLjg5NCwxLjE1Miw3LjU3OSwyLjY2NCwxMC45NTMsNC41MDJjMi4xMDMsMS4xNDcsNC42MTQsMS4yMiw2Ljc3NSwwLjE4NWwxMi4yODMtNS44MzkgICBjMy4zODksMi44Miw2LjUxLDUuOTQ2LDkuMzM3LDkuMzM5bC01Ljg0MSwxMi4yODVjLTEuMDI2LDIuMTU0LTAuOTU1LDQuNjc3LDAuMTg3LDYuNzcyYzEuODQzLDMuMzg5LDMuMzU3LDcuMDY5LDQuNTA0LDEwLjk0OCAgIGMwLjY3OCwyLjI5NSwyLjQwOSw0LjEyMyw0LjY2LDQuOTJsMTIuODc4LDQuNThjMC4yNDMsMi4zNDMsMC4zNiw0LjUwMiwwLjM2LDYuNTkyUzE1OS4xOTIsOTEuMzc3LDE1OC45NDksOTMuNzJ6IiBmaWxsPSIjRkZGRkZGIi8+Cgk8cGF0aCBkPSJNODcuMTI0LDUwLjgwMmMtMTkuMDYyLDAtMzQuNTcxLDE1LjUwOC0zNC41NzEsMzQuNTcxczE1LjUwOCwzNC41NzEsMzQuNTcxLDM0LjU3MXMzNC41NzEtMTUuNTA4LDM0LjU3MS0zNC41NzEgICBTMTA2LjE4Niw1MC44MDIsODcuMTI0LDUwLjgwMnogTTg3LjEyNCwxMDUuMDA5Yy0xMC44MjcsMC0xOS42MzYtOC44MDktMTkuNjM2LTE5LjYzNnM4LjgwOS0xOS42MzYsMTkuNjM2LTE5LjYzNiAgIHMxOS42MzYsOC44MDksMTkuNjM2LDE5LjYzNlM5Ny45NTEsMTA1LjAwOSw4Ny4xMjQsMTA1LjAwOXoiIGZpbGw9IiNGRkZGRkYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" />
565
+ <span>REM Converter</span>
566
+ </div>
567
+ </div>
568
+ <div className={"slider "+(isRemOpen?'sopen':'')}>
569
+ <div className="tools sliderHeader">
570
+ <img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDE3NC4yNDggMTc0LjI0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTc0LjI0OCAxNzQuMjQ4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxnPgoJPHBhdGggZD0iTTE3My4xNDUsNzMuOTFjLTAuNDEzLTIuNzIyLTIuMjktNC45OTMtNC44ODEtNS45MTJsLTEzLjcyNy00Ljg4MWMtMC44MTItMi4zLTEuNzMzLTQuNTM2LTIuNzU0LTYuNjk5bDYuMjQ3LTEzLjE0NiAgIGMxLjE3OS0yLjQ3OSwwLjg5OS01LjQxMS0wLjcyOS03LjYyOGMtNS4yNjUtNy4xNjEtMTEuNTU2LTEzLjQ1Mi0xOC42OTgtMTguNjkzYy0yLjIxOS0xLjYyOS01LjE0MS0xLjkwNi03LjYyNS0wLjcyNCAgIGwtMTMuMTM4LDYuMjQyYy0yLjE2My0xLjAyMS00LjQwMi0xLjk0LTYuNzA0LTIuNzUybC00Ljg4My0xMy43MjljLTAuOTE5LTIuNTg2LTMuMTg0LTQuNDU4LTUuOS00Ljg3NiAgIGMtOS42NS0xLjQ4My0xNi43OTItMS40ODMtMjYuNDU3LDBjLTIuNzEzLDAuNDE4LTQuOTgxLDIuMjktNS45LDQuODc2bC00Ljg4MywxMy43MjljLTIuMzAyLDAuODEyLTQuNTQxLDEuNzMxLTYuNzAyLDIuNzUyICAgbC0xMy4xNDMtNi4yNDJjLTIuNDc5LTEuMTgxLTUuNDA2LTAuOTA0LTcuNjIzLDAuNzI0Yy03LjE0Miw1LjI0MS0xMy40MzMsMTEuNTMyLTE4LjY5OCwxOC42OTMgICBjLTEuNjI5LDIuMjE3LTEuOTA4LDUuMTQ4LTAuNzI5LDcuNjI4bDYuMjQ3LDEzLjE0NmMtMS4wMjEsMi4xNTktMS45NCw0LjQtMi43NTQsNi42OTlMNS45ODIsNjguMDAzICAgYy0yLjU4OSwwLjkxOS00LjQ2MywzLjE4OS00Ljg3OSw1LjkwN2MtMC43NDksNC45Mi0xLjA5OSw5LjExNS0xLjA5OSwxMy4yMTljMCw0LjA5OCwwLjM1LDguMjk5LDEuMDk5LDEzLjIxOSAgIGMwLjQxMywyLjcyMiwyLjI5LDQuOTkzLDQuODgxLDUuOTEybDEzLjcyNyw0Ljg4MWMwLjgxNCwyLjMwNCwxLjczNiw0LjU0MSwyLjc1NCw2LjcwNGwtNi4yNDcsMTMuMTQxICAgYy0xLjE3OSwyLjQ3OS0wLjg5OSw1LjQxMSwwLjcyNyw3LjYyM2M1LjI1OCw3LjE1NiwxMS41NDksMTMuNDQ3LDE4LjcsMTguNjk4YzIuMjE3LDEuNjI5LDUuMTQ0LDEuOTExLDcuNjI1LDAuNzI0bDEzLjEzOC02LjI0MiAgIGMyLjE2MywxLjAyMSw0LjQwMiwxLjk0LDYuNzA0LDIuNzUybDQuODgzLDEzLjcyOWMwLjkxOSwyLjU4NiwzLjE4NCw0LjQ1OCw1LjksNC44NzZjNC44MjgsMC43NDQsOS4xNTQsMS4xMDQsMTMuMjI4LDEuMTA0ICAgYzQuMDc0LDAsOC40MDEtMC4zNiwxMy4yMjgtMS4xMDRjMi43MTUtMC40MTgsNC45ODEtMi4yOSw1LjktNC44NzZsNC44ODMtMTMuNzI5YzIuMzAyLTAuODEyLDQuNTQxLTEuNzMxLDYuNzA0LTIuNzUyICAgbDEzLjEzOCw2LjI0MmMyLjQ4NCwxLjE4Niw1LjQxMSwwLjkwNCw3LjYyOC0wLjcyNGM3LjE1OS01LjI2LDEzLjQ1LTExLjU1MSwxOC42OTgtMTguNjk4YzEuNjI2LTIuMjEyLDEuOTA2LTUuMTQ0LDAuNzI3LTcuNjIzICAgbC02LjI0Ny0xMy4xNDFjMS4wMjEtMi4xNjMsMS45NDItNC40MDUsMi43NTQtNi43MDRsMTMuNzI3LTQuODgxYzIuNTkxLTAuOTE5LDQuNDY4LTMuMTg5LDQuODgxLTUuOTEyICAgYzAuNzQ5LTQuOTIsMS4wOTktOS4xMiwxLjA5OS0xMy4yMTlTMTczLjg5NCw3OC44MjksMTczLjE0NSw3My45MXogTTE1OC45NDksOTMuNzJsLTEyLjg3OCw0LjU4ICAgYy0yLjI1MSwwLjc5Ny0zLjk4MiwyLjYyNS00LjY2LDQuOTJjLTEuMTUsMy44ODktMi42NjQsNy41NjktNC41MDQsMTAuOTQzYy0xLjE0MiwyLjEtMS4yMTMsNC42MTktMC4xODcsNi43NzdsNS44NDEsMTIuMjg1ICAgYy0yLjgyMiwzLjM4OS01Ljk0Myw2LjUxNS05LjMzNyw5LjMzNGwtMTIuMjgzLTUuODM0Yy0yLjE2MS0xLjAzNi00LjY3Mi0wLjk1My02Ljc3NSwwLjE4NWMtMy4zNzksMS44MzgtNy4wNjEsMy4zNS0xMC45NTMsNC41MDIgICBjLTIuMjksMC42NzYtNC4xMTgsMi40MDYtNC45MTcsNC42NTdsLTQuNTgyLDEyLjg4M2MtNC42NzcsMC40NzYtOC41MDMsMC40NzYtMTMuMTgsMGwtNC41ODItMTIuODgzICAgYy0wLjgtMi4yNDYtMi42MjgtMy45ODItNC45MTctNC42NTdjLTMuODk0LTEuMTUyLTcuNTc5LTIuNjY0LTEwLjk1My00LjUwMmMtMi4xMDMtMS4xNDctNC42MTktMS4yMi02Ljc3NS0wLjE4NWwtMTIuMjgzLDUuODM5ICAgYy0zLjM5MS0yLjgyNS02LjUxMi01Ljk0Ni05LjMzNy05LjMzOWw1Ljg0MS0xMi4yODVjMS4wMjYtMi4xNTksMC45NTUtNC42NzctMC4xODctNi43NzdjLTEuODM1LTMuMzY0LTMuMzUtNy4wNDktNC41MDQtMTAuOTQ4ICAgYy0wLjY3OC0yLjI5LTIuNDExLTQuMTE4LTQuNjYtNC45MTVsLTEyLjg3OC00LjU4Yy0wLjI0My0yLjM0My0wLjM2LTQuNTAyLTAuMzYtNi41OTJzMC4xMTctNC4yNDQsMC4zNi02LjU4N2wxMi44ODEtNC41ODQgICBjMi4yNDgtMC43OTcsMy45NzktMi42MjUsNC42NTctNC45MTVjMS4xNTItMy44ODksMi42NjctNy41NzQsNC41MDQtMTAuOTUzYzEuMTQyLTIuMDk1LDEuMjEzLTQuNjE5LDAuMTg3LTYuNzcybC01Ljg0MS0xMi4yODUgICBjMi44MjctMy4zOTMsNS45NDgtNi41MTksOS4zMzctOS4zMzlsMTIuMjg4LDUuODM5YzIuMTUxLDEuMDM2LDQuNjc3LDAuOTUzLDYuNzc1LTAuMTg1YzMuMzcyLTEuODM4LDcuMDU0LTMuMzUsMTAuOTQ4LTQuNTAyICAgYzIuMjktMC42NzYsNC4xMTgtMi40MTEsNC45MTctNC42NTdsNC41ODItMTIuODgzYzQuNjMzLTAuNDgxLDguNDY2LTAuNDgxLDEzLjE4LDBsNC41ODIsMTIuODgzICAgYzAuOCwyLjI0NiwyLjYyOCwzLjk4Miw0LjkxNyw0LjY1N2MzLjg5NCwxLjE1Miw3LjU3OSwyLjY2NCwxMC45NTMsNC41MDJjMi4xMDMsMS4xNDcsNC42MTQsMS4yMiw2Ljc3NSwwLjE4NWwxMi4yODMtNS44MzkgICBjMy4zODksMi44Miw2LjUxLDUuOTQ2LDkuMzM3LDkuMzM5bC01Ljg0MSwxMi4yODVjLTEuMDI2LDIuMTU0LTAuOTU1LDQuNjc3LDAuMTg3LDYuNzcyYzEuODQzLDMuMzg5LDMuMzU3LDcuMDY5LDQuNTA0LDEwLjk0OCAgIGMwLjY3OCwyLjI5NSwyLjQwOSw0LjEyMyw0LjY2LDQuOTJsMTIuODc4LDQuNThjMC4yNDMsMi4zNDMsMC4zNiw0LjUwMiwwLjM2LDYuNTkyUzE1OS4xOTIsOTEuMzc3LDE1OC45NDksOTMuNzJ6IiBmaWxsPSIjRkZGRkZGIi8+Cgk8cGF0aCBkPSJNODcuMTI0LDUwLjgwMmMtMTkuMDYyLDAtMzQuNTcxLDE1LjUwOC0zNC41NzEsMzQuNTcxczE1LjUwOCwzNC41NzEsMzQuNTcxLDM0LjU3MXMzNC41NzEtMTUuNTA4LDM0LjU3MS0zNC41NzEgICBTMTA2LjE4Niw1MC44MDIsODcuMTI0LDUwLjgwMnogTTg3LjEyNCwxMDUuMDA5Yy0xMC44MjcsMC0xOS42MzYtOC44MDktMTkuNjM2LTE5LjYzNnM4LjgwOS0xOS42MzYsMTkuNjM2LTE5LjYzNiAgIHMxOS42MzYsOC44MDksMTkuNjM2LDE5LjYzNlM5Ny45NTEsMTA1LjAwOSw4Ny4xMjQsMTA1LjAwOXoiIGZpbGw9IiNGRkZGRkYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" />
571
+ <span className="sliderTitle">REM Converter</span>
572
+ <span className="searchClose" onClick={this.toggleRemContainer}>
573
+ <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==" />
574
+ </span>
575
+ </div>
576
+ <div className="sliderFormContainer">
577
+ <div className="sliderInputContainer">
578
+ <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} / >
580
+ </div>
581
+ <div className="sliderInputContainer">
582
+ <label className="sliderInputTitle">PX size to convert</label>
583
+ <input type="number" className="sliderInput" placeholder="PX size to convert" value={pixelSize} onChange={this.onChangePixel} / >
584
+ </div>
585
+ <div className="sliderInputContainer">
586
+ <label className="sliderInputTitle">Result</label>
587
+ <div className="sliderResult">
588
+ <input type="text" className="sliderInput" placeholder="Result" value={resultRem} onChange={this.onChangeRem} / >
589
+ <span id="remoutput" className="copyTxtHiden">{resultRem}</span>
590
+ <span className="copyResult" onClick={selectText.bind(this, 'remoutput')}>
591
+ <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
+ </span>
593
+ </div>
594
+ </div>
595
+ </div>
596
+ </div>
597
+ </div>
598
+ </div>
599
+ </div>
600
+ <div className="flexgrow flexbasis">
601
+ <div id="container" className="dflex flexcolumn flexbasis">
602
+ {
603
+ infoTab == 'dashboard' ?
604
+ <div className='dflex flexcolumn'>
605
+ <div className="flexshrink cheader">
606
+ <div className="dflex flexrow flexbasis alignVertical">
607
+ <div className="flexshrink">
608
+ <h1 className="cheadertitle">{'Dashboard'}</h1>
609
+ </div>
610
+ <div className='flexgrow flexbasis infoTabs dflex'>
611
+ {
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'}>
615
+ {item.name}
616
+ </span>
617
+ )
618
+ })
619
+ }
620
+ </div>
621
+ </div>
622
+ </div>
623
+ <div className='flexgrow scrollY'>
624
+ {
625
+ dashboardList.map((item,i)=>{
626
+ if(this.state.compList == item.name){
627
+ return(
628
+ item.componentList.length>0?<ul key={i}>
629
+ {
630
+ (item.componentList).map((component,val)=>{
631
+ if(component!== undefined){
632
+ return(<li key={val} className="compListItem">{component}</li>)
633
+ }
634
+ })
635
+ }
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>
645
+ )
646
+ }
647
+ })
648
+ }
649
+ </div>
650
+ </div>
651
+ :null
652
+ }
653
+ {
654
+ compName ?
655
+ <div className="flexshrink cheader">
656
+ <div className="dflex flexrow flexbasis alignVertical">
657
+ <div className="flexshrink"><h1 className="cheadertitle">{compName && compName.split('__')[0]}</h1></div>
658
+ <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>
670
+ </div>
671
+ </div>
672
+ </div>
673
+ :null
674
+ }
675
+
676
+ <div className="flexgrow flexbasis cfooter ">
677
+ <div className="dflex flexcolumn flexbasis">
678
+ <div className="flexgrow flexbasis ccontent">
679
+ {
680
+ infoTab == 'changeset' ?
681
+ <pre className="authorview">{changeset ? changeset : 'loading....!!!'}</pre>
682
+ :null
683
+ }
684
+ {
685
+ infoTab == 'code' ?
686
+ <CodeView compName={compName} src={window.componentList ?window.componentList[compName].docs.source:Component[compName].docs.source}/>
687
+ :null
688
+ }
689
+ {
690
+ infoTab == 'src' ?
691
+ <CodeView compName={compName+'src'} src={window.componentList ?window.componentList[propComName].source:Component[propComName].source}/>
692
+ : null
693
+ }
694
+ {
695
+ 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>
747
+ </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?
753
+ <React.Fragment>
754
+ <span className='window'>{this.state.windowSize.width}</span>
755
+ <span className='tooltipVal'>x</span>
756
+ <span className='window'>{this.state.windowSize.height}</span>
757
+ </React.Fragment>:null
758
+ }
759
+ </div>
760
+ </div>
761
+ </div>
762
+ </div>
763
+ }
764
+ {
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) => {
776
+ 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>
795
+ {
796
+ propsObj[value] && propsObj[value].isRequired? '-': 'true'
797
+ }
798
+ </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
+
811
+ </div>
812
+ );
813
+ })
814
+ }
815
+ </div>
816
+ : null
817
+ }
818
+ {
819
+ infoTab == 'references' ?
820
+ <div className="referContainer">
821
+ <div className='refsBy'>ReferencedBy :</div>
822
+ <ul>
823
+ {
824
+ compName ?
825
+ compName.indexOf('__') > -1 ?
826
+ mdata[compName.substring(0, compName.indexOf('_'))] &&
827
+ mdata[compName.substring(0, compName.indexOf('_'))].referencedby.map((val, i) => {
828
+ return (
829
+ <li key={i} className='refsLin'>
830
+ <a className="link" href={'#' + val}>
831
+ {val}
832
+ </a>
833
+ </li>
834
+ );
835
+ })
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) => {
858
+ return (
859
+ <li key={i} className='refsLin'>
860
+ <a className="link" href={'#' + val}>
861
+ {val}
862
+ </a>
863
+ </li>
864
+ );
865
+ })
866
+ : mdata[compName].references.map((val, i) => {
867
+ return (
868
+ <li key={i} className='refsLin'>
869
+ <a className="link" href={'#' + val}>
870
+ {val}
871
+ </a>
872
+ </li>
873
+ );
874
+ })
875
+ : null
876
+ }
877
+ </ul>
878
+ </div>
879
+ : null
880
+ }
881
+ {
882
+ /*infoTab == 'visual' ?
883
+ <div>
884
+ {
885
+ Component[propComName] &&
886
+ Component[propComName].docs &&
887
+ Component[propComName].docs.images &&
888
+ Component[propComName].docs.images.map(image => {
889
+ return (
890
+ <div className="psdContainer">
891
+ <div className="imageContainer">
892
+ <img className="psdImage" src={image.view} />
893
+ </div>
894
+ <div>
895
+ <a className="psdLink" href={image.psd} target="_blank" download>
896
+ Download PSD
897
+ </a>
898
+ </div>
899
+ <div>
900
+ <a className="psdLink" href={image.view} target="_blank" download>
901
+ Download Image
902
+ </a>
903
+ </div>
904
+ </div>
905
+ );
906
+ })
907
+ }
908
+ </div>
909
+ : null */
910
+ }
911
+ </div>
912
+ </div>
913
+ </div>
914
+ </div>
915
+ </div>
916
+ </main>
917
+ );
918
+ }
919
+ }
920
+ class Search extends React.Component {
921
+ render() {
922
+ return (
923
+ <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>}
932
+ </div>
933
+ );
934
+ }
935
+ }
936
+
937
+ class ComponentList extends React.Component {
938
+ constructor(props) {
939
+ super(props);
940
+ this.state = {
941
+ toggle: false
942
+ };
943
+ }
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
950
+ }
951
+
952
+ render() {
953
+ const { components, type, toggleGroup,viewGroup } = this.props;
954
+ let classNameTab = type == viewGroup ? " selected " : '';
955
+
956
+ 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'}>
972
+ {
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
+ })}
991
+ </div>
992
+ </div>
993
+ );
994
+ }
995
+ }
996
+
997
+ class CodeView extends React.Component {
998
+ constructor(props) {
999
+ super(props);
1000
+
1001
+ }
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
+ }
1013
+ }
1014
+
1015
+ render() {
1016
+ let {src,compName} = this.props
1017
+ return (
1018
+ <div className={"dflex flexrow flexbasis "}>
1019
+ <textarea className="srcCode" id={compName} defaultValue={src}/>
1020
+ </div>
1021
+ );
1022
+ }
1023
+ }
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;
1031
+ this.dupCompList.push(key)
1032
+ }
1033
+ else{
1034
+ this.componentList[key]=comp;
1035
+ }
1036
+ if(gName){
1037
+ if(!this.componentObj[fName]){
1038
+ this.componentObj[fName]={}
1039
+ }
1040
+ if(!this.componentObj[fName][gName]){
1041
+ this.componentObj[fName][gName] = [];
1042
+ this.componentObj[fName][gName].push(key)
1043
+ }
1044
+ else{
1045
+ this.componentObj[fName][gName].push(key)
1046
+ }
1047
+ }
1048
+ return {componentObj:this.componentObj,componentList:this.componentList}
1049
+ },
1050
+ renderDoc:function(compOBJ,dupCompList){
1051
+ return(
1052
+ ReactDOM.render(
1053
+ <Doc
1054
+ components={Component}
1055
+ componentObj={compOBJ}
1056
+ duplicates={dupCompList}
1057
+ />,
1058
+ react
1059
+ )
1060
+ )
1061
+ }
1062
+ }
1063
+ var compGroupObj=function(comp,key,compGroup){
1064
+ if (comp == 'React' || comp == 'ReactDOM' || comp =='renderToStaticMarkup') {
1065
+ return;
1066
+ }
1067
+ else if(comp=='_provider'){
1068
+ return user.objList(null,null,comp,compGroup[comp])
1069
+ }
1070
+ else{
1071
+ if(compGroup[comp].docs && compGroup[comp].docs.componentGroup ){
1072
+ let groupName = compGroup[comp].docs.componentGroup;
1073
+ let folderName = compGroup[comp].docs.folderName || "General";
1074
+ if(comp=='default'){
1075
+ return user.objList(folderName,groupName,key,compGroup[comp])
1076
+ }
1077
+ else{
1078
+ return user.objList(folderName,groupName,comp,compGroup[comp])
1079
+ }
1080
+ }
1081
+ }
1082
+ }
1083
+ Promise.all(Object.keys(Component).map((key) => {
1084
+ let componentKey=Component[key];
1085
+ if (key == 'React' || key == 'ReactDOM' || key=='renderToStaticMarkup') {
1086
+ return;
1087
+ }
1088
+ if(key=='_provider'){
1089
+ return compGroupObj(key,null,Component)
1090
+ }
1091
+ try{
1092
+ return(
1093
+ componentKey && componentKey.then((res)=>{
1094
+ let compList;
1095
+ Object.keys(res).forEach((comp)=>{
1096
+ let compGroup=res[comp];
1097
+ Object.keys(compGroup).forEach((comps)=>{
1098
+ compGroupObj(comps,key,compGroup)
1099
+ })
1100
+ })
1101
+ })
1102
+ )
1103
+ }catch(error){
1104
+ compGroupObj(key,null,Component)
1105
+ }
1106
+ })).then(()=>{
1107
+ window.componentList=user.componentList
1108
+ user.renderDoc(user.componentObj,user.dupCompList)
1109
+ })
1110
+ };
1111
+ var onLoader = function () {
1112
+ // Minimum resizable area
1113
+ var minWidth = 60;
1114
+ var minHeight = 40;
1115
+
1116
+ // Thresholds
1117
+ var FULLSCREEN_MARGINS = -10;
1118
+ var MARGINS = 15;
1119
+
1120
+ // End of what's configurable.
1121
+ var clicked = null;
1122
+ var onRightEdge, onBottomEdge, onLeftEdge, onTopEdge;
1123
+
1124
+ var rightScreenEdge, bottomScreenEdge;
1125
+
1126
+ var preSnapped;
1127
+
1128
+ var b, x, y;
1129
+
1130
+ var redraw = false;
1131
+
1132
+ var pane = document.getElementById( 'resize' );
1133
+ var ghostpane = document.getElementById( 'ghostpane' );
1134
+ function setBounds( element, x, y, w, h ) {
1135
+ element.style.left = x + 'px';
1136
+ element.style.top = y + 'px';
1137
+ element.style.width = w + 'px';
1138
+ element.style.height = h + 'px';
1139
+ }
1140
+
1141
+ function hintHide() {
1142
+ //setBounds(ghostpane, b.left, b.top, b.width, b.height);
1143
+ //ghostpane.style.opacity = 0;
1144
+ // var b = ghostpane.getBoundingClientRect();
1145
+ // ghostpane.style.top = b.top + b.height / 2;
1146
+ // ghostpane.style.left = b.left + b.width / 2;
1147
+ // ghostpane.style.width = 0;
1148
+ // ghostpane.style.height = 0;
1149
+ }
1150
+
1151
+ // Mouse events
1152
+ pane && pane.addEventListener( 'mousedown', onMouseDown );
1153
+ pane && document.addEventListener( 'mousemove', onMove );
1154
+ pane && document.addEventListener( 'mouseup', onUp );
1155
+
1156
+ // Touch events
1157
+ pane && pane.addEventListener( 'touchstart', onTouchDown );
1158
+ pane && document.addEventListener( 'touchmove', onTouchMove );
1159
+ pane && document.addEventListener( 'touchend', onTouchEnd );
1160
+
1161
+ function onTouchDown( e ) {
1162
+ onDown( e.touches[ 0 ] );
1163
+ e.preventDefault();
1164
+ }
1165
+
1166
+ function onTouchMove( e ) {
1167
+ onMove( e.touches[ 0 ] );
1168
+ }
1169
+
1170
+ function onTouchEnd( e ) {
1171
+ if ( e.touches.length == 0 ) onUp( e.changedTouches[ 0 ] );
1172
+ }
1173
+
1174
+ function onMouseDown( e ) {
1175
+ onDown( e );
1176
+ e.preventDefault();
1177
+ }
1178
+
1179
+ function onDown( e ) {
1180
+ calc( e );
1181
+
1182
+ var isResizing = onRightEdge || onBottomEdge || onTopEdge || onLeftEdge;
1183
+
1184
+ clicked = {
1185
+ x: x,
1186
+ y: y,
1187
+ cx: e.clientX,
1188
+ cy: e.clientY,
1189
+ w: b.width,
1190
+ h: b.height,
1191
+ isResizing: isResizing,
1192
+ isMoving: !isResizing && canMove(),
1193
+ onTopEdge: onTopEdge,
1194
+ onLeftEdge: onLeftEdge,
1195
+ onRightEdge: onRightEdge,
1196
+ onBottomEdge: onBottomEdge
1197
+ };
1198
+ }
1199
+
1200
+ function canMove() {
1201
+ return x > 0 && x < b.width && y > 0 && y < b.height && y < 30;
1202
+ }
1203
+
1204
+ function calc( e ) {
1205
+ b = pane.getBoundingClientRect();
1206
+ x = e.clientX - b.left;
1207
+ y = e.clientY - b.top;
1208
+
1209
+ onTopEdge = y < MARGINS;
1210
+ onLeftEdge = x < MARGINS;
1211
+ onRightEdge = x >= b.width - MARGINS;
1212
+ onBottomEdge = y >= b.height - MARGINS;
1213
+
1214
+ rightScreenEdge = window.innerWidth - MARGINS;
1215
+ bottomScreenEdge = window.innerHeight - MARGINS;
1216
+ }
1217
+
1218
+ var e;
1219
+
1220
+ function onMove( ee ) {
1221
+ calc( ee );
1222
+
1223
+ e = ee;
1224
+
1225
+ redraw = true;
1226
+ }
1227
+
1228
+ function animate() {
1229
+ requestAnimationFrame( animate );
1230
+
1231
+ if ( !redraw ) return;
1232
+
1233
+ redraw = false;
1234
+
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';
1239
+
1240
+ if ( clicked.onLeftEdge ) {
1241
+ var currentWidth = Math.max(
1242
+ clicked.cx - e.clientX + clicked.w,
1243
+ minWidth
1244
+ );
1245
+ if ( currentWidth > minWidth ) {
1246
+ pane.style.width = currentWidth + 'px';
1247
+ // pane.style.left = e.clientX + 'px';
1248
+ }
1249
+ }
1250
+
1251
+ if ( clicked.onTopEdge ) {
1252
+ var currentHeight = Math.max(
1253
+ clicked.cy - e.clientY + clicked.h,
1254
+ minHeight
1255
+ );
1256
+ if ( currentHeight > minHeight ) {
1257
+ pane.style.height = currentHeight + 'px';
1258
+ pane.style.top = e.clientY + 'px';
1259
+ }
1260
+ }
1261
+
1262
+ hintHide();
1263
+
1264
+ return;
1265
+ }
1266
+
1267
+ if ( clicked && clicked.isMoving ) {
1268
+ if (
1269
+ b.top < FULLSCREEN_MARGINS ||
1270
+ b.left < FULLSCREEN_MARGINS ||
1271
+ b.right > window.innerWidth - FULLSCREEN_MARGINS ||
1272
+ b.bottom > window.innerHeight - FULLSCREEN_MARGINS
1273
+ ) {
1274
+ // hintFull();
1275
+ setBounds( ghostpane, 0, 0, window.innerWidth, window.innerHeight );
1276
+ ghostpane.style.opacity = 0.2;
1277
+ } else if ( b.top < MARGINS ) {
1278
+ // hintTop();
1279
+ setBounds( ghostpane, 0, 0, window.innerWidth, window.innerHeight / 2 );
1280
+ ghostpane.style.opacity = 0.2;
1281
+ } else if ( b.left < MARGINS ) {
1282
+ // hintLeft();
1283
+ setBounds( ghostpane, 0, 0, window.innerWidth / 2, window.innerHeight );
1284
+ ghostpane.style.opacity = 0.2;
1285
+ } else if ( b.right > rightScreenEdge ) {
1286
+ // hintRight();
1287
+ setBounds(
1288
+ ghostpane,
1289
+ window.innerWidth / 2,
1290
+ 0,
1291
+ window.innerWidth / 2,
1292
+ window.innerHeight
1293
+ );
1294
+ ghostpane.style.opacity = 0.2;
1295
+ } else if ( b.bottom > bottomScreenEdge ) {
1296
+ // hintBottom();
1297
+ setBounds(
1298
+ ghostpane,
1299
+ 0,
1300
+ window.innerHeight / 2,
1301
+ window.innerWidth,
1302
+ window.innerWidth / 2
1303
+ );
1304
+ ghostpane.style.opacity = 0.2;
1305
+ } else {
1306
+ hintHide();
1307
+ }
1308
+
1309
+ if ( preSnapped ) {
1310
+ setBounds(
1311
+ pane,
1312
+ e.clientX - preSnapped.width / 2,
1313
+ e.clientY - Math.min( clicked.y, preSnapped.height ),
1314
+ preSnapped.width,
1315
+ preSnapped.height
1316
+ );
1317
+ return;
1318
+ }
1319
+
1320
+ // moving
1321
+ pane.style.top = e.clientY - clicked.y + 'px';
1322
+ //pane.style.left = e.clientX - clicked.x + 'px';
1323
+
1324
+ return;
1325
+ }
1326
+
1327
+ // This code executes when mouse moves without clicking
1328
+
1329
+ // style cursor
1330
+ if ( ( onRightEdge && onBottomEdge ) || ( onLeftEdge && onTopEdge ) ) {
1331
+ pane.style.cursor = 'nwse-resize';
1332
+ } else if ( ( onRightEdge && onTopEdge ) || ( onBottomEdge && onLeftEdge ) ) {
1333
+ pane.style.cursor = 'nesw-resize';
1334
+ } else if ( onRightEdge || onLeftEdge ) {
1335
+ pane.style.cursor = 'ew-resize';
1336
+ } else if ( onBottomEdge || onTopEdge ) {
1337
+ pane.style.cursor = 'ns-resize';
1338
+ } else if ( canMove() ) {
1339
+ pane.style.cursor = 'move';
1340
+ } else {
1341
+ pane.style.cursor = 'default';
1342
+ }
1343
+ }
1344
+
1345
+ animate();
1346
+
1347
+ function onUp( e ) {
1348
+ calc( e );
1349
+
1350
+ if ( clicked && clicked.isMoving ) {
1351
+ // Snap
1352
+ var snapped = {
1353
+ width: b.width,
1354
+ height: b.height
1355
+ };
1356
+
1357
+ if (
1358
+ b.top < FULLSCREEN_MARGINS ||
1359
+ b.left < FULLSCREEN_MARGINS ||
1360
+ b.right > window.innerWidth - FULLSCREEN_MARGINS ||
1361
+ b.bottom > window.innerHeight - FULLSCREEN_MARGINS
1362
+ ) {
1363
+ // hintFull();
1364
+ setBounds( pane, 0, 0, window.innerWidth, window.innerHeight );
1365
+ preSnapped = snapped;
1366
+ } else if ( b.top < MARGINS ) {
1367
+ // hintTop();
1368
+ setBounds( pane, 0, 0, window.innerWidth, window.innerHeight / 2 );
1369
+ preSnapped = snapped;
1370
+ } else if ( b.left < MARGINS ) {
1371
+ // hintLeft();
1372
+ setBounds( pane, 0, 0, window.innerWidth / 2, window.innerHeight );
1373
+ preSnapped = snapped;
1374
+ } else if ( b.right > rightScreenEdge ) {
1375
+ // hintRight();
1376
+ setBounds(
1377
+ pane,
1378
+ window.innerWidth / 2,
1379
+ 0,
1380
+ window.innerWidth / 2,
1381
+ window.innerHeight
1382
+ );
1383
+ preSnapped = snapped;
1384
+ } else if ( b.bottom > bottomScreenEdge ) {
1385
+ // hintBottom();
1386
+ setBounds(
1387
+ pane,
1388
+ 0,
1389
+ window.innerHeight / 2,
1390
+ window.innerWidth,
1391
+ window.innerWidth / 2
1392
+ );
1393
+ preSnapped = snapped;
1394
+ } else {
1395
+ preSnapped = null;
1396
+ }
1397
+
1398
+ hintHide();
1399
+ }
1400
+
1401
+ clicked = null;
1402
+ }
1403
+ };
1404
+
1405
+ </script>
1406
+ <script type="text/javascript">
1407
+ var html =
1408
+ "<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' );
1410
+ var frameDoc = iframe.document;
1411
+ if ( iframe.contentWindow ) {
1412
+ frameDoc = iframe.contentWindow.document;
1413
+ frameDoc.open();
1414
+ frameDoc.writeln( html );
1415
+ frameDoc.close();
1416
+ } else {
1417
+ }
1418
+ </script>
1419
+ <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"/>
1429
+ </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
+ />
1437
+
1438
+ </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"/>
1441
+ </symbol>
1442
+ <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"/>
1445
+ </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"/>
1452
+ </symbol>
1453
+ <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"/>
1456
+ </symbol>
1457
+ <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"/>
1459
+ </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"/>
1462
+ </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"/>
1469
+ </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
1490
+ 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
+ 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
+ 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
+ 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
+ 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
+ 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>
1499
+ </svg>
1500
+ </div>
1501
+ </body>
1502
+ </html>