@zohodesk/react-cli 1.1.14-kubernetes → 1.1.15

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