@zohodesk/react-cli 1.1.14-exp.3 → 1.1.14-kubernetes

Sign up to get free protection for your applications and to get access to all the features.
Files changed (102) hide show
  1. package/README.md +16 -281
  2. package/bin/cli.js +55 -30
  3. package/docs/CustomChunks.md +9 -12
  4. package/docs/SelectorWeight.md +0 -3
  5. package/docs/ValueReplacer.md +0 -27
  6. package/docs/VariableConversion.md +1 -6
  7. package/lib/common/splitChunks.js +45 -65
  8. package/lib/common/testPattern.js +11 -9
  9. package/lib/common/valueReplacer.js +3 -1
  10. package/lib/configs/resolvers.js +5 -16
  11. package/lib/configs/webpack.css.umd.config.js +2 -3
  12. package/lib/configs/webpack.dev.config.js +5 -15
  13. package/lib/configs/webpack.docs.config.js +3 -14
  14. package/lib/configs/webpack.impact.config.js +2 -8
  15. package/lib/configs/webpack.prod.config.js +5 -15
  16. package/lib/constants.js +3 -3
  17. package/lib/loaderUtils/getCSSLoaders.js +49 -98
  18. package/lib/loaderUtils/windowsModification.js +1 -6
  19. package/lib/loaders/docsLoader.js +7 -18
  20. package/lib/loaders/selectorMappingLoader.js +9 -9
  21. package/lib/pluginUtils/getDevPlugins.js +6 -25
  22. package/lib/pluginUtils/getProdPlugins.js +5 -32
  23. package/lib/pluginUtils/getUMDCSSPlugins.js +1 -1
  24. package/lib/pluginUtils/getUMDComponentPlugins.js +1 -1
  25. package/lib/plugins/EFCPlugin.js +9 -9
  26. package/lib/plugins/EFCTemplatePlugin.js +12 -10
  27. package/lib/plugins/I18NInjectIntoIndexPlugin.js +9 -8
  28. package/lib/plugins/I18nSplitPlugin/I18nDebugPlugin.js +3 -2
  29. package/lib/plugins/I18nSplitPlugin/I18nDownlodLogic.js +13 -30
  30. package/lib/plugins/I18nSplitPlugin/I18nKeysIdentifer.js +7 -2
  31. package/lib/plugins/I18nSplitPlugin/index.js +1 -1
  32. package/lib/plugins/I18nSplitPlugin/utils/propertiesUtils.js +8 -8
  33. package/lib/plugins/ReportGeneratePlugin.js +6 -8
  34. package/lib/plugins/ResourceHintsPlugin.js +3 -13
  35. package/lib/plugins/SelectorPlugin.js +37 -77
  36. package/lib/plugins/{MinifyPlugin.js → UglifyCSSPlugin.js} +3 -3
  37. package/lib/plugins/UnusedFilesFindPlugin.js +5 -7
  38. package/lib/plugins/VariableConversionCollector.js +101 -40
  39. package/lib/plugins/composeCommonPlugin.js +30 -0
  40. package/lib/plugins/index.js +7 -7
  41. package/lib/postcss-plugins/ExcludePlugin.js +1 -1
  42. package/lib/postcss-plugins/RTLSplitPlugin.js +10 -4
  43. package/lib/postcss-plugins/ValueReplacer.js +29 -8
  44. package/lib/postcss-plugins/hoverActivePlugin.js +6 -0
  45. package/lib/postcss-plugins/variableModificationPlugin/ErrorHandler.js +1 -0
  46. package/lib/postcss-plugins/variableModificationPlugin/index.js +38 -94
  47. package/lib/postcss-plugins/variableModifier.js +244 -0
  48. package/lib/schemas/index.js +18 -94
  49. package/lib/servers/devBuild.js +11 -13
  50. package/lib/servers/getCliPath.js +5 -3
  51. package/lib/servers/httpsOptions.js +13 -12
  52. package/lib/servers/nowatchserver.js +55 -62
  53. package/lib/servers/server.js +52 -53
  54. package/lib/utils/cssClassNameGenerate.js +13 -70
  55. package/lib/utils/getOptions.js +28 -35
  56. package/lib/utils/getServerURL.js +9 -1
  57. package/lib/utils/index.js +12 -14
  58. package/lib/utils/initPreCommitHook.js +5 -5
  59. package/lib/utils/pullOrigin.js +3 -3
  60. package/lib/utils/reinstallDependencies.js +3 -3
  61. package/lib/utils/switchBranch.js +2 -4
  62. package/package.json +3 -5
  63. package/templates/docs/all.html +0 -1
  64. package/templates/docs/component.html +0 -1
  65. package/templates/docs/components.html +0 -1
  66. package/templates/docs/css/style.css +169 -136
  67. package/templates/docs/index.html +632 -796
  68. package/.vscode/settings.json +0 -25
  69. package/docs/ComposeMinification.md +0 -13
  70. package/docs/MarkdownParser.md +0 -18
  71. package/docs/ReactLive.md +0 -14
  72. package/docs/patternFiltering.md +0 -57
  73. package/lib/common/buildEs.js +0 -12
  74. package/lib/common/runPreProcess.js +0 -71
  75. package/lib/deprecationLogger.js +0 -40
  76. package/lib/loaderUtils/tests/windowsModification.test.js +0 -10
  77. package/lib/loaders/__test__/markdownLoader.spec.js +0 -145
  78. package/lib/loaders/composeLoader.js +0 -298
  79. package/lib/loaders/markdownLoader.js +0 -71
  80. package/lib/loaders/reactLiveConvertor.js +0 -105
  81. package/lib/logger.js +0 -27
  82. package/lib/plugins/CustomAttributePlugin.js +0 -82
  83. package/lib/plugins/CustomAttributePlugin.md +0 -35
  84. package/lib/plugins/EfcResourceCleanupPlugin.js +0 -43
  85. package/lib/plugins/StatsPlugin.js +0 -82
  86. package/lib/plugins/utils/classHandling.js +0 -35
  87. package/lib/plugins/utils/fileHandling.js +0 -92
  88. package/lib/plugins/utils/tests/fileHandling.test.js +0 -30
  89. package/lib/plugins/variableConvertorUtils.js +0 -133
  90. package/lib/postcss-plugins/EmptyPlugin.js +0 -8
  91. package/lib/postcss-plugins/IncludePlugin.js +0 -23
  92. package/lib/postcss-plugins/SelectorReplace.js +0 -80
  93. package/lib/postcss-plugins/__test__/selectorReplace.test.js +0 -28
  94. package/lib/postcss-plugins/__test__/valueReplacer.spec.js +0 -43
  95. package/lib/servers/requireLocalOrGlobal.js +0 -61
  96. package/lib/utils/deprecationSupport.js +0 -134
  97. package/lib/utils/log.js +0 -11
  98. package/lib/utils/object-manipulation.js +0 -88
  99. package/lib/utils/selectorReplacer.js +0 -47
  100. package/lib/utils/variableConverter.js +0 -104
  101. package/npm-shrinkwrap.json +0 -33485
  102. package/templates/docs/css/markdown.css +0 -202
package/templates/docs/index.html CHANGED
@@ -5,42 +5,38 @@
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 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"
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"
11
9
  rel="stylesheet" />
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">
10
+ <link href="https://supportclientapp.localzoho.com/support/images/support-2.ico" type="IMAGE/X-ICON" rel="SHORTCUT ICON" />
11
+
15
12
  <script src="./js/codemirror.js"></script>
16
13
  <script src="./js/javascript.js"></script>
17
14
  <script src="./js/active-line.js"></script>
18
15
  <script src="./js/matchbrackets.js"></script>
19
16
  <link rel="stylesheet" type="text/css" href="./css/hopscotch.css">
20
- <link rel="stylesheet" href="./css/markdown.css">
21
17
  <title>Zoho Desk - React Components</title>
22
18
  <script>
23
19
 
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
- }
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');
38
33
  }
34
+ }
39
35
  </script>
40
36
  </head>
41
37
 
42
38
  <body>
43
- <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
39
+
44
40
  <div id="react"></div>
45
41
  <div class="iframeCentering">
46
42
  <span class="posAb">Zoho Desk - React Components</span>
@@ -49,62 +45,62 @@
49
45
 
50
46
  <script src="/docs/js/babel.min.js"></script>
51
47
  <script type="text/babel">
52
- window.loadDOC = function (Component, mdata) {
48
+ window.loadDOC = function(Component, mdata) {
53
49
  window.RTLmode = false;
54
50
  var ReactDOM = Component.ReactDOM;
55
51
  window.React = Component.React;
56
52
  window.ReactDOM = Component.ReactDOM;
57
- var React = Component.React;
53
+ var React= Component.React;
58
54
  class Doc extends React.Component {
59
55
  constructor(props) {
60
56
  super(props);
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;
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;
69
65
  }
70
66
  })
71
- }) : null
72
- if (folderNameDefault == '' && groupNameDefault == '') {
73
- folderNameDefault = 'Global'
74
- groupNameDefault = 'General'
67
+ }):null
68
+ if(folderNameDefault== '' && groupNameDefault==''){
69
+ folderNameDefault='Global'
70
+ groupNameDefault='General'
75
71
  }
76
72
  this.state = {
77
- componentObj: props.componentObj,
78
- duplicates: props.duplicates,
73
+ componentObj:props.componentObj,
74
+ duplicates:props.duplicates,
79
75
  search: '',
80
76
  selectedComponent: location.hash,
81
77
  Components: Component,
82
78
  //popUp: '',
83
79
  fullScreenSrc: '',
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
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
103
99
 
104
100
  };
105
101
  this.search = this.search.bind(this);
106
102
  this.clear = this.clear.bind(this);
107
- // this.toggleRemContainer = this.toggleRemContainer.bind(this);
103
+ this.toggleRemContainer = this.toggleRemContainer.bind(this);
108
104
  this.hashChange = this.hashChange.bind(this);
109
105
  //this.popupToggle = this.popupToggle.bind(this);
110
106
  //this.popupToggleDoc = this.popupToggleDoc.bind(this);
@@ -118,144 +114,143 @@
118
114
  this.getFileDetails = this.getFileDetails.bind(this);
119
115
  this.iframeSize = this.iframeSize.bind(this);
120
116
  this.menuOpen = this.menuOpen.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);
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);
136
131
  }
137
132
 
138
- fullView() {
139
- this.setState({ isMenuClose: !this.state.isMenuClose })
133
+ fullView(){
134
+ this.setState({isMenuClose:!this.state.isMenuClose})
140
135
  }
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 });
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});
148
144
  }
149
145
  else {
150
- iframe.contentDocument.documentElement.setAttribute('contenteditable', "true");
151
- this.setState({ isEditMode: true });
152
- }
153
- }
146
+ iframe.contentDocument.documentElement.setAttribute('contenteditable',"true");
147
+ this.setState({isEditMode:true});
148
+ }}
154
149
 
155
150
  }
156
151
 
157
- compList(e) {
158
- if (e == this.state.compList) {
152
+ compList(e){
153
+ if(e == this.state.compList){
159
154
  }
160
- else if (e !== this.state.compList) {
161
- this.setState({ compList: e })
155
+ else if(e !== this.state.compList){
156
+ this.setState({compList:e})
162
157
  }
163
- else {
164
- this.setState({ compList: '' })
158
+ else{
159
+ this.setState({compList:''})
165
160
  }
166
161
  }
167
162
 
168
- getWindow() {
169
- var iframe = document.getElementById('componentIframe')
170
- if (iframe) {
171
- this.setState({ windowSize: { height: iframe.offsetHeight, width: iframe.offsetWidth } })
163
+ getWindow(){
164
+ var iframe=document.getElementById('componentIframe')
165
+ if(iframe){
166
+ this.setState({windowSize:{height:iframe.offsetHeight,width:iframe.offsetWidth}})
172
167
  }
173
168
  }
174
169
 
175
- responseMenu() {
176
- this.setState({ responsiveMenu: !this.state.responsiveMenu })
170
+ responseMenu(){
171
+ this.setState({ responsiveMenu:!this.state.responsiveMenu})
177
172
  }
178
173
 
179
- // toggleRemContainer() {
180
- // this.setState({ isRemOpen: !this.state.isRemOpen });
181
- // }
174
+ toggleRemContainer(){
175
+ this.setState({ isRemOpen: !this.state.isRemOpen });
176
+ }
182
177
 
183
- // calculatePxToRem() {
184
- // let result = Number((this.state.pixelSize / this.state.rootSize).toFixed(4));
185
- // this.setState({ resultRem: result + "rem" });
186
- // }
178
+ calculatePxToRem(){
179
+ let result=Number((this.state.pixelSize/this.state.rootSize).toFixed(4));
180
+ this.setState({resultRem:result+"rem"});
181
+ }
187
182
 
188
- // calculateRemToPx() {
189
- // let result = Number(((Number(parseFloat(this.state.resultRem)) * this.state.rootSize).toFixed(4)));
190
- // this.setState({ pixelSize: result });
191
- // }
183
+ calculateRemToPx(){
184
+ let result=Number(((Number(parseFloat(this.state.resultRem))*this.state.rootSize).toFixed(4)));
185
+ this.setState({pixelSize:result});
186
+ }
192
187
 
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
- // }
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
+ }
197
192
 
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
- // }
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
+ }
202
197
 
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
- // }
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
+ }
207
202
 
208
- toggleFolder(name, e) {
203
+ toggleFolder(name,e){
209
204
  let { viewFolder } = this.state;
210
- if (name == viewFolder) {
211
- name = ''
205
+ if(name == viewFolder){
206
+ name =''
212
207
  }
213
- this.setState({ viewFolder: name });
208
+ this.setState({ viewFolder: name });
214
209
  }
215
210
  hashChange() {
216
211
  let ele = document.getElementById('componentIframe')
217
- if (ele) {
212
+ if(ele){
218
213
  var src = document.getElementById('componentIframe').src;
219
214
  var url = src && src.split('#')[0];
220
215
  document.getElementById('componentIframe').src = url + location.hash;
221
216
  }
222
- this.setState({ selectedComponent: location.hash, infoTab: 'component' });
217
+ this.setState({ selectedComponent: location.hash, infoTab:'component' });
223
218
  }
224
219
  toggleGroup(name) {
225
- let element = name;
220
+ let element=name;
226
221
  let { viewGroup } = this.state;
227
- if (name == viewGroup) {
228
- name = ''
222
+ if(name == viewGroup){
223
+ name =''
229
224
  }
230
- this.setState({ viewGroup: name });
225
+ this.setState({ viewGroup: name });
231
226
  }
232
227
 
233
228
  componentDidMount() {
234
229
  window.addEventListener('hashchange', this.hashChange);
235
230
  onLoader()
236
- let iframeEle = document.getElementById('componentIframe')
237
- iframeEle.contentWindow.addEventListener('resize', this.getWindow)
231
+ let iframeEle=document.getElementById('componentIframe')
232
+ iframeEle.contentWindow.addEventListener('resize',this.getWindow)
238
233
  this.getWindow()
239
- let index = document.getElementsByClassName('iframeCentering')
240
- index ? index[0].style.display = 'none' : null
241
- if (!this.state.selectedComponent) {
242
- this.setState({ infoTab: 'dashboard' })
234
+ let index=document.getElementsByClassName('iframeCentering')
235
+ index ?index[0].style.display='none':null
236
+ if(!this.state.selectedComponent){
237
+ this.setState({infoTab:'dashboard'})
243
238
  }
244
239
  //document.addEventListener('click', this.popupToggleDoc);
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" })
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" })
249
244
  });
250
245
  }
251
246
 
252
- codeview() {
247
+ codeview(){
253
248
 
254
249
  let compName = location.hash != '' ? location.hash.substring(1) : null;
255
250
  let element = document.getElementById('codeView')
256
- if (componentList[compName] && typeof CodeMirror !== 'undefined' && element) {
257
- CodeMirror(element, {
258
- value: '',
251
+ if (componentList[compName] && typeof CodeMirror !== 'undefined' && element ) {
252
+ CodeMirror(element, {
253
+ value:'',
259
254
  lineNumbers: false,
260
255
  styleActiveLine: false,
261
256
  matchBrackets: false,
@@ -266,11 +261,11 @@
266
261
  }
267
262
 
268
263
  componentWillUnmount() {
269
- let iframe = document.getElementById('componentIframe');
264
+ let iframe=document.getElementById('componentIframe');
270
265
  //document.removeEventListener('click', this.popupToggleDoc);
271
- iframe.contentWindow.removeEventListener('resize', this.getWindow)
266
+ iframe.contentWindow.removeEventListener('resize',this.getWindow)
272
267
  window.removeEventListener('hashchange', this.hashChange);
273
- window.removeEventListener('error', this.reloadFrame);
268
+ window.removeEventListener('error',this.reloadFrame);
274
269
  }
275
270
 
276
271
  search(e) {
@@ -306,73 +301,73 @@
306
301
  // item => item.toUpperCase().indexOf(str.toUpperCase()) != -1
307
302
  // );
308
303
 
309
- return list.filter((item) => {
310
- let value = item.split('__')[0]
304
+ return list.filter((item)=>{
305
+ let value = item.split('__')[0]
311
306
 
312
- return value.toUpperCase().indexOf(str.toUpperCase()) != -1
307
+ return value.toUpperCase().indexOf(str.toUpperCase()) != -1
313
308
  })
314
309
  }
315
310
 
316
- onTabinfo(name) {
317
- this.setState({ infoTab: name })
311
+ onTabinfo(name){
312
+ this.setState({infoTab:name})
318
313
  }
319
314
 
320
- reloadFrame() {
315
+ reloadFrame(){
321
316
  let iframeEle = document.getElementById('componentIframe');
322
317
  //this.getWindow()
323
318
  iframeEle.contentDocument.location.reload()
324
- parent.document.getElementById("loadingText").style.display = 'block'
319
+ parent.document.getElementById("loadingText").style.display= 'block'
325
320
  }
326
321
 
327
- getFileDetails() {
322
+ getFileDetails(){
328
323
  this.onTabinfo('changeset')
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" })
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" })
337
332
  });
338
333
  }
339
334
 
340
335
  iframeSize() {
341
- let slider = document.getElementById('myRange')
336
+ let slider=document.getElementById('myRange')
342
337
  let iframe = document.getElementById('componentIframe');
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 }
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}
358
353
  }
359
354
  this.setState(sizes[value]);
360
355
  this.getWindow()
361
356
  }
362
357
 
363
358
  menuOpen() {
364
- this.setState({ isMenuClose: !this.state.isMenuClose })
359
+ this.setState({isMenuClose:!this.state.isMenuClose})
365
360
  }
366
361
 
367
362
  onRtlView(e) {
368
363
  let iframeEle = document.getElementById('componentIframe');
369
364
  let ele = e.target.element || null
370
365
  if (!this.state.isRTL) {
371
- this.setState({ isRTL: true })
366
+ this.setState({isRTL:true})
372
367
  window.RTLmode = true;
373
368
  iframeEle.contentDocument.documentElement.setAttribute('dir', 'rtl');
374
369
  } else {
375
- this.setState({ isRTL: false })
370
+ this.setState({isRTL:false})
376
371
  iframeEle.contentDocument.documentElement.setAttribute('dir', 'ltr');
377
372
  window.RTLmode = false;
378
373
  }
@@ -382,50 +377,29 @@
382
377
  let iframeEle = document.getElementById('componentIframe');
383
378
  let ele = e.target.element || null
384
379
  if (!this.state.isRem) {
385
- this.setState({ isRem: true })
380
+ this.setState({isRem:true})
386
381
  iframeEle.contentDocument.documentElement.classList.add('isRem');
387
382
  } else {
388
- this.setState({ isRem: false })
383
+ this.setState({isRem:false})
389
384
  iframeEle.contentDocument.documentElement.classList.remove('isRem');
390
385
  }
391
386
  }
392
387
 
393
388
 
394
- handleURL() {
395
- this.setState({ viewFolder: 'General', viewGroup: 'Global', infoTab: 'dashboard' })
389
+ handleURL(){
390
+ this.setState({viewFolder:'General',viewGroup:'Global',infoTab:'dashboard'})
396
391
  window.history.pushState("", "", '/docs/');
397
392
  }
398
393
 
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) {
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){
403
398
  return dbList.push(item);
404
399
  }
405
400
  })
406
401
  return dbList
407
402
  }
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
- }
429
403
 
430
404
  render() {
431
405
  const {
@@ -451,45 +425,41 @@
451
425
  duplicates,
452
426
  isEditMode
453
427
  } = this.state;/* Components & componentObj no need in the state access in props itself*/
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 })
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})
468
445
  })
469
- let compObjList = componentsObj
446
+ let compObjList=componentsObj
470
447
 
471
- let dashboardList = [
472
- this.unusedList(mdata) && { name: 'Unused', componentList: this.unusedList(mdata) },
473
- duplicates && { name: 'Duplicates', componentList: duplicates }
448
+ let dashboardList=[
449
+ this.unusedList(mdata) &&{name:'Unused',componentList:this.unusedList(mdata)},
450
+ duplicates && {name:'Duplicates',componentList:duplicates}
474
451
  ]
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 = []
452
+
483
453
  return (
484
454
  <main className="dflex flexrow">
485
- <div className="showToggleLeft" onClick={this.menuOpen}>
455
+ <div className="showToggleLeft" onClick={this.menuOpen}>
486
456
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGOSURBVGhD7ZrBKkVBHIdPSNKV5A3YKSvvYG/BE0jI3tbGxsYGdTeeQnY8gcLOTigba1KE73ewOGUxc8/8/2fUfPXVndOd23ydM92ae6sIeniIT/iZgW94hYsYxTH+9YFd+4pzGMQIvqAmzepCBgzhESpmRxdCmERNuKtH+bCBWpeCgighxpSQEmJECSkhRpSQkJBRvMFTHNcFQ0xDxvAW9f5ztIwxf7Rm8B6tY1z2iEeM22a3jnELEZYxriHCKsY9RFjERIfo4OECT+rR4KSOiQ5JScqYRsgULji7jM/YNqYR8vAz6NIz1KlILI2QfdTz762Ol7SID1zFQeh0j4gtVECbCBEdMox6tufrUTtSRYjokBTfIyJlhOgkJHWEcA+xiBCuIVYRwi3EMkK4hFhHCPMQjwhhGjKN72gdIczvyDYufb80xW2zW1NCSogRJaSEGFFC/n3IBGrCYz3Kh03Uug7qUSC/x0Z7uJaB63iNWpPuTDArqP9IaWJOXqJ+JYtCJym72M9A7QvdFSKq6gtlqbpowcg25wAAAABJRU5ErkJggg==" />
487
457
  </div>
488
458
 
489
- <div className={"menuBar " + (isMenuClose ? "isMenuClose" : "isMenuOpen")}>
459
+ <div className={"menuBar "+(isMenuClose?"isMenuClose":"isMenuOpen")}>
490
460
  <div className="dflex flexcolumn">
491
461
  <div className="flexshrink logoPart dflex">
492
- <img src="./css/desklogo.png" />
462
+ <img src="./css/desklogo.png" />
493
463
  <div className={'home'} onClick={this.handleURL}>
494
464
  <span className='homeIcon'>
495
465
  <svg className='svg'>
@@ -498,7 +468,7 @@
498
468
  </span>
499
469
  </div>
500
470
  </div>
501
- <div className="flexgrow flexbasis sliderContainer">
471
+ <div className="flexgrow flexbasis sliderContainer">
502
472
  <div className="dflex flexcolumn">
503
473
  <div className="flexshrink searchPart">
504
474
  <Search onChange={this.search} value={search} onClear={this.clear} />
@@ -506,13 +476,13 @@
506
476
  <menu className="flexgrow flexbasis scrollY menuContainer" id="leftPanel">
507
477
  {
508
478
  compObjList && Object.keys(compObjList).length && compObjList.map(comp => {
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)
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)
516
486
  })
517
487
  })
518
488
 
@@ -522,9 +492,9 @@
522
492
  componentObj[folderName][grn],
523
493
  search
524
494
  );
525
- if (searchList.length) {
526
- folderCompCount = folderCompCount + 1;
527
- }
495
+ if(searchList.length){
496
+ folderCompCount=folderCompCount+1;
497
+ }
528
498
  return searchList.length ? true : false;
529
499
  }
530
500
  );
@@ -536,7 +506,7 @@
536
506
  this,
537
507
  folderName
538
508
  )}
539
- className={'mainMenu dflex flexrow alignVertical offSelection' + ' ' +
509
+ className={'mainMenu dflex flexrow alignVertical offSelection'+' '+
540
510
  (viewFolder == folderName
541
511
  ? 'mainMenuActive'
542
512
  : '')
@@ -558,8 +528,8 @@
558
528
  }
559
529
  >
560
530
  {
561
- sortList.map((grpName) => {
562
- return (
531
+ sortList.map((grpName)=>{
532
+ return(
563
533
  <ComponentList
564
534
  type={grpName.fName}
565
535
  components={this.filter(
@@ -569,7 +539,7 @@
569
539
  selectedComponent={selectedComponent}
570
540
  toggleGroup={this.toggleGroup}
571
541
  viewGroup={
572
- search ? grpName.fName : viewGroup
542
+ search ? grpName.fName : viewGroup
573
543
  }
574
544
  />)
575
545
  })
@@ -584,18 +554,17 @@
584
554
  }
585
555
  </menu>
586
556
  {
587
- // versionFz != '' &&
588
- // <div className="flexshrink versionPart ">
589
- // <span>Version {versionFz}</span>
590
- // </div>
557
+ versionFz!=''&&
558
+ <div className="flexshrink versionPart ">
559
+ <span>Version {versionFz}</span>
560
+ </div>
591
561
  }
592
- {/*<div className="flexshrink tools" onClick={this.toggleRemContainer}>
562
+ <div className="flexshrink tools" onClick={this.toggleRemContainer}>
593
563
  <img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDE3NC4yNDggMTc0LjI0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTc0LjI0OCAxNzQuMjQ4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxnPgoJPHBhdGggZD0iTTE3My4xNDUsNzMuOTFjLTAuNDEzLTIuNzIyLTIuMjktNC45OTMtNC44ODEtNS45MTJsLTEzLjcyNy00Ljg4MWMtMC44MTItMi4zLTEuNzMzLTQuNTM2LTIuNzU0LTYuNjk5bDYuMjQ3LTEzLjE0NiAgIGMxLjE3OS0yLjQ3OSwwLjg5OS01LjQxMS0wLjcyOS03LjYyOGMtNS4yNjUtNy4xNjEtMTEuNTU2LTEzLjQ1Mi0xOC42OTgtMTguNjkzYy0yLjIxOS0xLjYyOS01LjE0MS0xLjkwNi03LjYyNS0wLjcyNCAgIGwtMTMuMTM4LDYuMjQyYy0yLjE2My0xLjAyMS00LjQwMi0xLjk0LTYuNzA0LTIuNzUybC00Ljg4My0xMy43MjljLTAuOTE5LTIuNTg2LTMuMTg0LTQuNDU4LTUuOS00Ljg3NiAgIGMtOS42NS0xLjQ4My0xNi43OTItMS40ODMtMjYuNDU3LDBjLTIuNzEzLDAuNDE4LTQuOTgxLDIuMjktNS45LDQuODc2bC00Ljg4MywxMy43MjljLTIuMzAyLDAuODEyLTQuNTQxLDEuNzMxLTYuNzAyLDIuNzUyICAgbC0xMy4xNDMtNi4yNDJjLTIuNDc5LTEuMTgxLTUuNDA2LTAuOTA0LTcuNjIzLDAuNzI0Yy03LjE0Miw1LjI0MS0xMy40MzMsMTEuNTMyLTE4LjY5OCwxOC42OTMgICBjLTEuNjI5LDIuMjE3LTEuOTA4LDUuMTQ4LTAuNzI5LDcuNjI4bDYuMjQ3LDEzLjE0NmMtMS4wMjEsMi4xNTktMS45NCw0LjQtMi43NTQsNi42OTlMNS45ODIsNjguMDAzICAgYy0yLjU4OSwwLjkxOS00LjQ2MywzLjE4OS00Ljg3OSw1LjkwN2MtMC43NDksNC45Mi0xLjA5OSw5LjExNS0xLjA5OSwxMy4yMTljMCw0LjA5OCwwLjM1LDguMjk5LDEuMDk5LDEzLjIxOSAgIGMwLjQxMywyLjcyMiwyLjI5LDQuOTkzLDQuODgxLDUuOTEybDEzLjcyNyw0Ljg4MWMwLjgxNCwyLjMwNCwxLjczNiw0LjU0MSwyLjc1NCw2LjcwNGwtNi4yNDcsMTMuMTQxICAgYy0xLjE3OSwyLjQ3OS0wLjg5OSw1LjQxMSwwLjcyNyw3LjYyM2M1LjI1OCw3LjE1NiwxMS41NDksMTMuNDQ3LDE4LjcsMTguNjk4YzIuMjE3LDEuNjI5LDUuMTQ0LDEuOTExLDcuNjI1LDAuNzI0bDEzLjEzOC02LjI0MiAgIGMyLjE2MywxLjAyMSw0LjQwMiwxLjk0LDYuNzA0LDIuNzUybDQuODgzLDEzLjcyOWMwLjkxOSwyLjU4NiwzLjE4NCw0LjQ1OCw1LjksNC44NzZjNC44MjgsMC43NDQsOS4xNTQsMS4xMDQsMTMuMjI4LDEuMTA0ICAgYzQuMDc0LDAsOC40MDEtMC4zNiwxMy4yMjgtMS4xMDRjMi43MTUtMC40MTgsNC45ODEtMi4yOSw1LjktNC44NzZsNC44ODMtMTMuNzI5YzIuMzAyLTAuODEyLDQuNTQxLTEuNzMxLDYuNzA0LTIuNzUyICAgbDEzLjEzOCw2LjI0MmMyLjQ4NCwxLjE4Niw1LjQxMSwwLjkwNCw3LjYyOC0wLjcyNGM3LjE1OS01LjI2LDEzLjQ1LTExLjU1MSwxOC42OTgtMTguNjk4YzEuNjI2LTIuMjEyLDEuOTA2LTUuMTQ0LDAuNzI3LTcuNjIzICAgbC02LjI0Ny0xMy4xNDFjMS4wMjEtMi4xNjMsMS45NDItNC40MDUsMi43NTQtNi43MDRsMTMuNzI3LTQuODgxYzIuNTkxLTAuOTE5LDQuNDY4LTMuMTg5LDQuODgxLTUuOTEyICAgYzAuNzQ5LTQuOTIsMS4wOTktOS4xMiwxLjA5OS0xMy4yMTlTMTczLjg5NCw3OC44MjksMTczLjE0NSw3My45MXogTTE1OC45NDksOTMuNzJsLTEyLjg3OCw0LjU4ICAgYy0yLjI1MSwwLjc5Ny0zLjk4MiwyLjYyNS00LjY2LDQuOTJjLTEuMTUsMy44ODktMi42NjQsNy41NjktNC41MDQsMTAuOTQzYy0xLjE0MiwyLjEtMS4yMTMsNC42MTktMC4xODcsNi43NzdsNS44NDEsMTIuMjg1ICAgYy0yLjgyMiwzLjM4OS01Ljk0Myw2LjUxNS05LjMzNyw5LjMzNGwtMTIuMjgzLTUuODM0Yy0yLjE2MS0xLjAzNi00LjY3Mi0wLjk1My02Ljc3NSwwLjE4NWMtMy4zNzksMS44MzgtNy4wNjEsMy4zNS0xMC45NTMsNC41MDIgICBjLTIuMjksMC42NzYtNC4xMTgsMi40MDYtNC45MTcsNC42NTdsLTQuNTgyLDEyLjg4M2MtNC42NzcsMC40NzYtOC41MDMsMC40NzYtMTMuMTgsMGwtNC41ODItMTIuODgzICAgYy0wLjgtMi4yNDYtMi42MjgtMy45ODItNC45MTctNC42NTdjLTMuODk0LTEuMTUyLTcuNTc5LTIuNjY0LTEwLjk1My00LjUwMmMtMi4xMDMtMS4xNDctNC42MTktMS4yMi02Ljc3NS0wLjE4NWwtMTIuMjgzLDUuODM5ICAgYy0zLjM5MS0yLjgyNS02LjUxMi01Ljk0Ni05LjMzNy05LjMzOWw1Ljg0MS0xMi4yODVjMS4wMjYtMi4xNTksMC45NTUtNC42NzctMC4xODctNi43NzdjLTEuODM1LTMuMzY0LTMuMzUtNy4wNDktNC41MDQtMTAuOTQ4ICAgYy0wLjY3OC0yLjI5LTIuNDExLTQuMTE4LTQuNjYtNC45MTVsLTEyLjg3OC00LjU4Yy0wLjI0My0yLjM0My0wLjM2LTQuNTAyLTAuMzYtNi41OTJzMC4xMTctNC4yNDQsMC4zNi02LjU4N2wxMi44ODEtNC41ODQgICBjMi4yNDgtMC43OTcsMy45NzktMi42MjUsNC42NTctNC45MTVjMS4xNTItMy44ODksMi42NjctNy41NzQsNC41MDQtMTAuOTUzYzEuMTQyLTIuMDk1LDEuMjEzLTQuNjE5LDAuMTg3LTYuNzcybC01Ljg0MS0xMi4yODUgICBjMi44MjctMy4zOTMsNS45NDgtNi41MTksOS4zMzctOS4zMzlsMTIuMjg4LDUuODM5YzIuMTUxLDEuMDM2LDQuNjc3LDAuOTUzLDYuNzc1LTAuMTg1YzMuMzcyLTEuODM4LDcuMDU0LTMuMzUsMTAuOTQ4LTQuNTAyICAgYzIuMjktMC42NzYsNC4xMTgtMi40MTEsNC45MTctNC42NTdsNC41ODItMTIuODgzYzQuNjMzLTAuNDgxLDguNDY2LTAuNDgxLDEzLjE4LDBsNC41ODIsMTIuODgzICAgYzAuOCwyLjI0NiwyLjYyOCwzLjk4Miw0LjkxNyw0LjY1N2MzLjg5NCwxLjE1Miw3LjU3OSwyLjY2NCwxMC45NTMsNC41MDJjMi4xMDMsMS4xNDcsNC42MTQsMS4yMiw2Ljc3NSwwLjE4NWwxMi4yODMtNS44MzkgICBjMy4zODksMi44Miw2LjUxLDUuOTQ2LDkuMzM3LDkuMzM5bC01Ljg0MSwxMi4yODVjLTEuMDI2LDIuMTU0LTAuOTU1LDQuNjc3LDAuMTg3LDYuNzcyYzEuODQzLDMuMzg5LDMuMzU3LDcuMDY5LDQuNTA0LDEwLjk0OCAgIGMwLjY3OCwyLjI5NSwyLjQwOSw0LjEyMyw0LjY2LDQuOTJsMTIuODc4LDQuNThjMC4yNDMsMi4zNDMsMC4zNiw0LjUwMiwwLjM2LDYuNTkyUzE1OS4xOTIsOTEuMzc3LDE1OC45NDksOTMuNzJ6IiBmaWxsPSIjRkZGRkZGIi8+Cgk8cGF0aCBkPSJNODcuMTI0LDUwLjgwMmMtMTkuMDYyLDAtMzQuNTcxLDE1LjUwOC0zNC41NzEsMzQuNTcxczE1LjUwOCwzNC41NzEsMzQuNTcxLDM0LjU3MXMzNC41NzEtMTUuNTA4LDM0LjU3MS0zNC41NzEgICBTMTA2LjE4Niw1MC44MDIsODcuMTI0LDUwLjgwMnogTTg3LjEyNCwxMDUuMDA5Yy0xMC44MjcsMC0xOS42MzYtOC44MDktMTkuNjM2LTE5LjYzNnM4LjgwOS0xOS42MzYsMTkuNjM2LTE5LjYzNiAgIHMxOS42MzYsOC44MDksMTkuNjM2LDE5LjYzNlM5Ny45NTEsMTA1LjAwOSw4Ny4xMjQsMTA1LjAwOXoiIGZpbGw9IiNGRkZGRkYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" />
594
564
  <span>REM Converter</span>
595
565
  </div>
596
- */}
597
566
  </div>
598
- {/* <div className={"slider " + (isRemOpen ? 'sopen' : '')}>
567
+ <div className={"slider "+(isRemOpen?'sopen':'')}>
599
568
  <div className="tools sliderHeader">
600
569
  <img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDE3NC4yNDggMTc0LjI0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTc0LjI0OCAxNzQuMjQ4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxnPgoJPHBhdGggZD0iTTE3My4xNDUsNzMuOTFjLTAuNDEzLTIuNzIyLTIuMjktNC45OTMtNC44ODEtNS45MTJsLTEzLjcyNy00Ljg4MWMtMC44MTItMi4zLTEuNzMzLTQuNTM2LTIuNzU0LTYuNjk5bDYuMjQ3LTEzLjE0NiAgIGMxLjE3OS0yLjQ3OSwwLjg5OS01LjQxMS0wLjcyOS03LjYyOGMtNS4yNjUtNy4xNjEtMTEuNTU2LTEzLjQ1Mi0xOC42OTgtMTguNjkzYy0yLjIxOS0xLjYyOS01LjE0MS0xLjkwNi03LjYyNS0wLjcyNCAgIGwtMTMuMTM4LDYuMjQyYy0yLjE2My0xLjAyMS00LjQwMi0xLjk0LTYuNzA0LTIuNzUybC00Ljg4My0xMy43MjljLTAuOTE5LTIuNTg2LTMuMTg0LTQuNDU4LTUuOS00Ljg3NiAgIGMtOS42NS0xLjQ4My0xNi43OTItMS40ODMtMjYuNDU3LDBjLTIuNzEzLDAuNDE4LTQuOTgxLDIuMjktNS45LDQuODc2bC00Ljg4MywxMy43MjljLTIuMzAyLDAuODEyLTQuNTQxLDEuNzMxLTYuNzAyLDIuNzUyICAgbC0xMy4xNDMtNi4yNDJjLTIuNDc5LTEuMTgxLTUuNDA2LTAuOTA0LTcuNjIzLDAuNzI0Yy03LjE0Miw1LjI0MS0xMy40MzMsMTEuNTMyLTE4LjY5OCwxOC42OTMgICBjLTEuNjI5LDIuMjE3LTEuOTA4LDUuMTQ4LTAuNzI5LDcuNjI4bDYuMjQ3LDEzLjE0NmMtMS4wMjEsMi4xNTktMS45NCw0LjQtMi43NTQsNi42OTlMNS45ODIsNjguMDAzICAgYy0yLjU4OSwwLjkxOS00LjQ2MywzLjE4OS00Ljg3OSw1LjkwN2MtMC43NDksNC45Mi0xLjA5OSw5LjExNS0xLjA5OSwxMy4yMTljMCw0LjA5OCwwLjM1LDguMjk5LDEuMDk5LDEzLjIxOSAgIGMwLjQxMywyLjcyMiwyLjI5LDQuOTkzLDQuODgxLDUuOTEybDEzLjcyNyw0Ljg4MWMwLjgxNCwyLjMwNCwxLjczNiw0LjU0MSwyLjc1NCw2LjcwNGwtNi4yNDcsMTMuMTQxICAgYy0xLjE3OSwyLjQ3OS0wLjg5OSw1LjQxMSwwLjcyNyw3LjYyM2M1LjI1OCw3LjE1NiwxMS41NDksMTMuNDQ3LDE4LjcsMTguNjk4YzIuMjE3LDEuNjI5LDUuMTQ0LDEuOTExLDcuNjI1LDAuNzI0bDEzLjEzOC02LjI0MiAgIGMyLjE2MywxLjAyMSw0LjQwMiwxLjk0LDYuNzA0LDIuNzUybDQuODgzLDEzLjcyOWMwLjkxOSwyLjU4NiwzLjE4NCw0LjQ1OCw1LjksNC44NzZjNC44MjgsMC43NDQsOS4xNTQsMS4xMDQsMTMuMjI4LDEuMTA0ICAgYzQuMDc0LDAsOC40MDEtMC4zNiwxMy4yMjgtMS4xMDRjMi43MTUtMC40MTgsNC45ODEtMi4yOSw1LjktNC44NzZsNC44ODMtMTMuNzI5YzIuMzAyLTAuODEyLDQuNTQxLTEuNzMxLDYuNzA0LTIuNzUyICAgbDEzLjEzOCw2LjI0MmMyLjQ4NCwxLjE4Niw1LjQxMSwwLjkwNCw3LjYyOC0wLjcyNGM3LjE1OS01LjI2LDEzLjQ1LTExLjU1MSwxOC42OTgtMTguNjk4YzEuNjI2LTIuMjEyLDEuOTA2LTUuMTQ0LDAuNzI3LTcuNjIzICAgbC02LjI0Ny0xMy4xNDFjMS4wMjEtMi4xNjMsMS45NDItNC40MDUsMi43NTQtNi43MDRsMTMuNzI3LTQuODgxYzIuNTkxLTAuOTE5LDQuNDY4LTMuMTg5LDQuODgxLTUuOTEyICAgYzAuNzQ5LTQuOTIsMS4wOTktOS4xMiwxLjA5OS0xMy4yMTlTMTczLjg5NCw3OC44MjksMTczLjE0NSw3My45MXogTTE1OC45NDksOTMuNzJsLTEyLjg3OCw0LjU4ICAgYy0yLjI1MSwwLjc5Ny0zLjk4MiwyLjYyNS00LjY2LDQuOTJjLTEuMTUsMy44ODktMi42NjQsNy41NjktNC41MDQsMTAuOTQzYy0xLjE0MiwyLjEtMS4yMTMsNC42MTktMC4xODcsNi43NzdsNS44NDEsMTIuMjg1ICAgYy0yLjgyMiwzLjM4OS01Ljk0Myw2LjUxNS05LjMzNyw5LjMzNGwtMTIuMjgzLTUuODM0Yy0yLjE2MS0xLjAzNi00LjY3Mi0wLjk1My02Ljc3NSwwLjE4NWMtMy4zNzksMS44MzgtNy4wNjEsMy4zNS0xMC45NTMsNC41MDIgICBjLTIuMjksMC42NzYtNC4xMTgsMi40MDYtNC45MTcsNC42NTdsLTQuNTgyLDEyLjg4M2MtNC42NzcsMC40NzYtOC41MDMsMC40NzYtMTMuMTgsMGwtNC41ODItMTIuODgzICAgYy0wLjgtMi4yNDYtMi42MjgtMy45ODItNC45MTctNC42NTdjLTMuODk0LTEuMTUyLTcuNTc5LTIuNjY0LTEwLjk1My00LjUwMmMtMi4xMDMtMS4xNDctNC42MTktMS4yMi02Ljc3NS0wLjE4NWwtMTIuMjgzLDUuODM5ICAgYy0zLjM5MS0yLjgyNS02LjUxMi01Ljk0Ni05LjMzNy05LjMzOWw1Ljg0MS0xMi4yODVjMS4wMjYtMi4xNTksMC45NTUtNC42NzctMC4xODctNi43NzdjLTEuODM1LTMuMzY0LTMuMzUtNy4wNDktNC41MDQtMTAuOTQ4ICAgYy0wLjY3OC0yLjI5LTIuNDExLTQuMTE4LTQuNjYtNC45MTVsLTEyLjg3OC00LjU4Yy0wLjI0My0yLjM0My0wLjM2LTQuNTAyLTAuMzYtNi41OTJzMC4xMTctNC4yNDQsMC4zNi02LjU4N2wxMi44ODEtNC41ODQgICBjMi4yNDgtMC43OTcsMy45NzktMi42MjUsNC42NTctNC45MTVjMS4xNTItMy44ODksMi42NjctNy41NzQsNC41MDQtMTAuOTUzYzEuMTQyLTIuMDk1LDEuMjEzLTQuNjE5LDAuMTg3LTYuNzcybC01Ljg0MS0xMi4yODUgICBjMi44MjctMy4zOTMsNS45NDgtNi41MTksOS4zMzctOS4zMzlsMTIuMjg4LDUuODM5YzIuMTUxLDEuMDM2LDQuNjc3LDAuOTUzLDYuNzc1LTAuMTg1YzMuMzcyLTEuODM4LDcuMDU0LTMuMzUsMTAuOTQ4LTQuNTAyICAgYzIuMjktMC42NzYsNC4xMTgtMi40MTEsNC45MTctNC42NTdsNC41ODItMTIuODgzYzQuNjMzLTAuNDgxLDguNDY2LTAuNDgxLDEzLjE4LDBsNC41ODIsMTIuODgzICAgYzAuOCwyLjI0NiwyLjYyOCwzLjk4Miw0LjkxNyw0LjY1N2MzLjg5NCwxLjE1Miw3LjU3OSwyLjY2NCwxMC45NTMsNC41MDJjMi4xMDMsMS4xNDcsNC42MTQsMS4yMiw2Ljc3NSwwLjE4NWwxMi4yODMtNS44MzkgICBjMy4zODksMi44Miw2LjUxLDUuOTQ2LDkuMzM3LDkuMzM5bC01Ljg0MSwxMi4yODVjLTEuMDI2LDIuMTU0LTAuOTU1LDQuNjc3LDAuMTg3LDYuNzcyYzEuODQzLDMuMzg5LDMuMzU3LDcuMDY5LDQuNTA0LDEwLjk0OCAgIGMwLjY3OCwyLjI5NSwyLjQwOSw0LjEyMyw0LjY2LDQuOTJsMTIuODc4LDQuNThjMC4yNDMsMi4zNDMsMC4zNiw0LjUwMiwwLjM2LDYuNTkyUzE1OS4xOTIsOTEuMzc3LDE1OC45NDksOTMuNzJ6IiBmaWxsPSIjRkZGRkZGIi8+Cgk8cGF0aCBkPSJNODcuMTI0LDUwLjgwMmMtMTkuMDYyLDAtMzQuNTcxLDE1LjUwOC0zNC41NzEsMzQuNTcxczE1LjUwOCwzNC41NzEsMzQuNTcxLDM0LjU3MXMzNC41NzEtMTUuNTA4LDM0LjU3MS0zNC41NzEgICBTMTA2LjE4Niw1MC44MDIsODcuMTI0LDUwLjgwMnogTTg3LjEyNCwxMDUuMDA5Yy0xMC44MjcsMC0xOS42MzYtOC44MDktMTkuNjM2LTE5LjYzNnM4LjgwOS0xOS42MzYsMTkuNjM2LTE5LjYzNiAgIHMxOS42MzYsOC44MDksMTkuNjM2LDE5LjYzNlM5Ny45NTEsMTA1LjAwOSw4Ny4xMjQsMTA1LjAwOXoiIGZpbGw9IiNGRkZGRkYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" />
601
570
  <span className="sliderTitle">REM Converter</span>
@@ -606,17 +575,17 @@
606
575
  <div className="sliderFormContainer">
607
576
  <div className="sliderInputContainer">
608
577
  <label className="sliderInputTitle">Base font-size (in px)</label>
609
- <input type="number" className="sliderInput" min="1" placeholder="Base font-size (in px)" value={rootSize} onChange={this.onChangeBase} />
578
+ <input type="number" className="sliderInput" min="1" placeholder="Base font-size (in px)" value={rootSize} onChange={this.onChangeBase} / >
610
579
  </div>
611
580
  <div className="sliderInputContainer">
612
581
  <label className="sliderInputTitle">PX size to convert</label>
613
- <input type="number" className="sliderInput" placeholder="PX size to convert" value={pixelSize} onChange={this.onChangePixel} />
582
+ <input type="number" className="sliderInput" placeholder="PX size to convert" value={pixelSize} onChange={this.onChangePixel} / >
614
583
  </div>
615
584
  <div className="sliderInputContainer">
616
585
  <label className="sliderInputTitle">Result</label>
617
586
  <div className="sliderResult">
618
- <input type="text" className="sliderInput" placeholder="Result" value={resultRem} onChange={this.onChangeRem} />
619
- <span id="remoutput" className="copyTxtHiden">{resultRem}</span>
587
+ <input type="text" className="sliderInput" placeholder="Result" value={resultRem} onChange={this.onChangeRem} / >
588
+ <span id="remoutput" className="copyTxtHiden">{resultRem}</span>
620
589
  <span className="copyResult" onClick={selectText.bind(this, 'remoutput')}>
621
590
  <img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ4OC4zIDQ4OC4zIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0ODguMyA0ODguMzsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTMxNC4yNSw4NS40aC0yMjdjLTIxLjMsMC0zOC42LDE3LjMtMzguNiwzOC42djMyNS43YzAsMjEuMywxNy4zLDM4LjYsMzguNiwzOC42aDIyN2MyMS4zLDAsMzguNi0xNy4zLDM4LjYtMzguNlYxMjQgICAgQzM1Mi43NSwxMDIuNywzMzUuNDUsODUuNCwzMTQuMjUsODUuNHogTTMyNS43NSw0NDkuNmMwLDYuNC01LjIsMTEuNi0xMS42LDExLjZoLTIyN2MtNi40LDAtMTEuNi01LjItMTEuNi0xMS42VjEyNCAgICBjMC02LjQsNS4yLTExLjYsMTEuNi0xMS42aDIyN2M2LjQsMCwxMS42LDUuMiwxMS42LDExLjZWNDQ5LjZ6IiBmaWxsPSIjRkZGRkZGIi8+CgkJPHBhdGggZD0iTTQwMS4wNSwwaC0yMjdjLTIxLjMsMC0zOC42LDE3LjMtMzguNiwzOC42YzAsNy41LDYsMTMuNSwxMy41LDEzLjVzMTMuNS02LDEzLjUtMTMuNWMwLTYuNCw1LjItMTEuNiwxMS42LTExLjZoMjI3ICAgIGM2LjQsMCwxMS42LDUuMiwxMS42LDExLjZ2MzI1LjdjMCw2LjQtNS4yLDExLjYtMTEuNiwxMS42Yy03LjUsMC0xMy41LDYtMTMuNSwxMy41czYsMTMuNSwxMy41LDEzLjVjMjEuMywwLDM4LjYtMTcuMywzOC42LTM4LjYgICAgVjM4LjZDNDM5LjY1LDE3LjMsNDIyLjM1LDAsNDAxLjA1LDB6IiBmaWxsPSIjRkZGRkZGIi8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==" />
622
591
  </span>
@@ -624,8 +593,7 @@
624
593
  </div>
625
594
  </div>
626
595
  </div>
627
- */}
628
- </div>
596
+ </div>
629
597
  </div>
630
598
  </div>
631
599
  <div className="flexgrow flexbasis">
@@ -640,9 +608,9 @@
640
608
  </div>
641
609
  <div className='flexgrow flexbasis infoTabs dflex'>
642
610
  {
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'}>
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'}>
646
614
  {item.name}
647
615
  </span>
648
616
  )
@@ -653,33 +621,33 @@
653
621
  </div>
654
622
  <div className='flexgrow scrollY'>
655
623
  {
656
- dashboardList.map((item, i) => {
657
- if (this.state.compList == item.name) {
658
- return (
659
- item.componentList.length > 0 ? <ul key={i}>
624
+ dashboardList.map((item,i)=>{
625
+ if(this.state.compList == item.name){
626
+ return(
627
+ item.componentList.length>0?<ul key={i}>
660
628
  {
661
- (item.componentList).map((component, val) => {
662
- if (component !== undefined) {
663
- return (<li key={val} className="compListItem">{component}</li>)
629
+ (item.componentList).map((component,val)=>{
630
+ if(component!== undefined){
631
+ return(<li key={val} className="compListItem">{component}</li>)
664
632
  }
665
633
  })
666
634
  }
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>
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>
676
644
  )
677
645
  }
678
646
  })
679
647
  }
680
648
  </div>
681
649
  </div>
682
- : null
650
+ :null
683
651
  }
684
652
  {
685
653
  compName ?
@@ -687,300 +655,164 @@
687
655
  <div className="dflex flexrow flexbasis alignVertical">
688
656
  <div className="flexshrink"><h1 className="cheadertitle">{compName && compName.split('__')[0]}</h1></div>
689
657
  <div className='flexgrow flexbasis infoTabs dflex'>
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>
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>
700
669
  </div>
701
670
  </div>
702
671
  </div>
703
- : null
672
+ :null
704
673
  }
705
674
 
706
675
  <div className="flexgrow flexbasis cfooter ">
707
676
  <div className="dflex flexcolumn flexbasis">
708
677
  <div className="flexgrow flexbasis ccontent">
678
+ {
679
+ infoTab == 'changeset' ?
680
+ <pre className="authorview">{changeset ? changeset : 'loading....!!!'}</pre>
681
+ :null
682
+ }
709
683
  {
710
684
  infoTab == 'code' ?
711
- <CodeView compName={compName} src={window.componentList ? window.componentList[compName].docs.source : Component[compName].docs.source} />
712
- : null
685
+ <CodeView compName={compName} src={window.componentList ?window.componentList[compName].docs.source:Component[compName].docs.source}/>
686
+ :null
713
687
  }
714
688
  {
715
689
  infoTab == 'src' ?
716
- <CodeView compName={compName + 'src'} src={window.componentList ? window.componentList[propComName].source : Component[propComName].source} />
717
- : null
690
+ <CodeView compName={compName+'src'} src={window.componentList ?window.componentList[propComName].source:Component[propComName].source}/>
691
+ : null
718
692
  }
719
693
  {
720
694
  infoTab == 'component' &&
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>
728
- </div>
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>
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>
771
703
  </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 ?
704
+ <iframe
705
+ id="componentIframe"
706
+ className="iframe"
707
+ src={'/docs/component.html' + location.hash}
708
+ mdata={mdata}
709
+ />
710
+ </section>
711
+ </div>
712
+ <div className={'flexshrink toolOptions'}>
713
+ <div className={'dflex flexrow alignVertical alignHorizontal'}>
714
+
715
+ <div className={'responsive offSelection'}>
716
+ <span className={"responsiveOption iconOption"} onClick={this.reloadFrame}>
717
+ <svg className='svg'>
718
+ <use xlinkHref='#reload'></use>
719
+ </svg>
720
+ </span>
721
+ <a className={'responsiveOption iconOption'} href={'/docs/component.html' + location.hash} target="_blank" >
722
+ <svg className='svg'>
723
+ <use xlinkHref='#newTab'></use>
724
+ </svg>
725
+ </a>
726
+ <span className={'responsiveOption iconOption'+' '+(this.state.isRTL?'activeOption transform':'')} onClick={this.onRtlView}>
727
+ <svg className='svg'>
728
+ <use xlinkHref='#RTL'></use>
729
+ </svg>
730
+ </span>
731
+ <span className={'responsiveOption iconOption textSize'+' '+(this.state.isRem?'activeOption':'')} onClick={this.onREMView} >
732
+ <svg className='svg'>
733
+ <use xlinkHref='#rem'></use>
734
+ </svg>
735
+ </span>
736
+ <span className={'responsiveOption iconOption textSize'+' '+(this.state.isEditMode?'activeOption':'')} onClick={this.toggleEditMode} >
737
+ <svg className='svg'>
738
+ <use xlinkHref='#pencil'></use>
739
+ </svg>
740
+ </span>
741
+ <span className={'responsiveOption iconOption fullScreen'+' '+(this.state.isMenuClose?'activeOption':'')} onClick={this.fullView} >
742
+ <svg className='svg'>
743
+ <use xlinkHref='#fullScreen'></use>
744
+ </svg>
745
+ </span>
746
+ </div>
747
+ <div className={'dflex alignVertical alignHorizontal range'}>
748
+ <input min='1' max='12' type='range' defaultValue='9' step='1' id="myRange" onChange={this.iframeSize} className='rangeInput' />
749
+ <span className='tooltip'>{this.state.device}</span>
750
+ {
751
+ this.state.windowSize?
778
752
  <React.Fragment>
779
753
  <span className='window'>{this.state.windowSize.width}</span>
780
754
  <span className='tooltipVal'>x</span>
781
755
  <span className='window'>{this.state.windowSize.height}</span>
782
- </React.Fragment> : null
783
- }
756
+ </React.Fragment>:null
757
+ }
758
+ </div>
784
759
  </div>
785
760
  </div>
786
761
  </div>
787
- </div>
788
762
  }
789
763
  {
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
-
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) => {
809
775
  return (
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>
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>
818
794
  {
819
- currentCompPropsDescription ? <span className="brR">Props Description</span> : null
795
+ propsObj[value] && propsObj[value].isRequired? '-': 'true'
820
796
  }
821
797
  </div>
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>
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
+
899
810
  </div>
900
811
  );
901
812
  })
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
813
+ }
814
+ </div>
815
+ : null
984
816
  }
985
817
  {
986
818
  infoTab == 'references' ?
@@ -1000,28 +832,7 @@
1000
832
  </li>
1001
833
  );
1002
834
  })
1003
- : mdata[compName].referencedby.map((val, i) => {
1004
- return (
1005
- <li key={i} className='refsLin'>
1006
- <a className="link" href={'#' + val}>
1007
- {val}
1008
- </a>
1009
- </li>
1010
- );
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) => {
835
+ : mdata[compName].referencedby.map((val, i) => {
1025
836
  return (
1026
837
  <li key={i} className='refsLin'>
1027
838
  <a className="link" href={'#' + val}>
@@ -1030,6 +841,27 @@
1030
841
  </li>
1031
842
  );
1032
843
  })
844
+ : null
845
+ }
846
+ </ul>
847
+ <div className='refsBy'>References : </div>
848
+ <ul>
849
+ {
850
+ compName ? compName.indexOf('__') > -1
851
+ ? mdata[
852
+ compName.substring(0, compName.indexOf('_'))
853
+ ] &&
854
+ mdata[
855
+ compName.substring(0, compName.indexOf('_'))
856
+ ].references.map((val, i) => {
857
+ return (
858
+ <li key={i} className='refsLin'>
859
+ <a className="link" href={'#' + val}>
860
+ {val}
861
+ </a>
862
+ </li>
863
+ );
864
+ })
1033
865
  : mdata[compName].references.map((val, i) => {
1034
866
  return (
1035
867
  <li key={i} className='refsLin'>
@@ -1039,7 +871,7 @@
1039
871
  </li>
1040
872
  );
1041
873
  })
1042
- : null
874
+ : null
1043
875
  }
1044
876
  </ul>
1045
877
  </div>
@@ -1088,14 +920,14 @@
1088
920
  render() {
1089
921
  return (
1090
922
  <div className="searchContainer">
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>}
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>}
1099
931
  </div>
1100
932
  );
1101
933
  }
@@ -1108,53 +940,53 @@
1108
940
  toggle: false
1109
941
  };
1110
942
  }
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
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
1117
949
  }
1118
950
 
1119
951
  render() {
1120
- const { components, type, toggleGroup, viewGroup } = this.props;
952
+ const { components, type, toggleGroup,viewGroup } = this.props;
1121
953
  let classNameTab = type == viewGroup ? " selected " : '';
1122
954
 
1123
955
  return (
1124
- <div data-title={type}>
1125
- {
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'}>
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>
1139
965
  {
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
- })}
966
+ components.length>0&&<i className={"flexshrink listCount"}>{(components.filter(function(el) {return el.toLowerCase().indexOf('__') > -1}).length)}</i>
967
+ }
968
+ </div>
969
+ }
970
+ <div className={ viewGroup == type ? 'activeComponent' : 'hide'}>
971
+ {
972
+ components.map((component, i) => {
973
+ let docsComp = component.search('__');
974
+ return (
975
+ <div className={((docsComp == -1) ? "componentMain" : "componentDocs")} key={'component' + i} >
976
+ <a
977
+ href={ docsComp == -1 && type != 'Global'&& type != 'Page' ? 'javascript:void(0);' : '#' + component}
978
+ className={"dflex flexrow flexbasis alignVertical offSelection "+ (this.props.selectedComponent == '#' + component ? 'active' : '') } >
979
+ <i className={"listIcon"}>
980
+ <svg className='svg'>
981
+ <use xlinkHref='#file'></use>
982
+ </svg>
983
+ </i>
984
+ <span className="dotted flexgrow flexbasis listTitle"> {docsComp == -1 ? component : component.split('__')[1]}</span>
985
+ {(components.filter(function(el) {return el.indexOf(component+'__') > -1}).length)>0 && (docsComp == -1) &&<i className={"flexshrink listCount subCount"}>{(components.filter(function(el) {return el.indexOf(component+'__') > -1}).length)}</i>}
986
+ </a>
987
+ </div>
988
+ );
989
+ })}
1158
990
  </div>
1159
991
  </div>
1160
992
  );
@@ -1166,49 +998,56 @@
1166
998
  super(props);
1167
999
 
1168
1000
  }
1169
- componentDidMount() {
1170
- hljs.highlightAll();
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
+ }
1171
1012
  }
1172
1013
 
1173
1014
  render() {
1174
- let { src, compName } = this.props
1015
+ let {src,compName} = this.props
1175
1016
  return (
1176
- <pre className="CodeTag">
1177
- <code class="javascript hljs language-javascript" id="code-block">
1178
- {src}
1179
- </code>
1180
- </pre>
1017
+ <div className={"dflex flexrow flexbasis "}>
1018
+ <textarea className="srcCode" id={compName} defaultValue={src}/>
1019
+ </div>
1181
1020
  );
1182
1021
  }
1183
1022
  }
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;
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;
1191
1030
  this.dupCompList.push(key)
1192
1031
  }
1193
- else {
1194
- this.componentList[key] = comp;
1032
+ else{
1033
+ this.componentList[key]=comp;
1195
1034
  }
1196
- if (gName) {
1197
- if (!this.componentObj[fName]) {
1198
- this.componentObj[fName] = {}
1035
+ if(gName){
1036
+ if(!this.componentObj[fName]){
1037
+ this.componentObj[fName]={}
1199
1038
  }
1200
- if (!this.componentObj[fName][gName]) {
1039
+ if(!this.componentObj[fName][gName]){
1201
1040
  this.componentObj[fName][gName] = [];
1202
1041
  this.componentObj[fName][gName].push(key)
1203
1042
  }
1204
- else {
1043
+ else{
1205
1044
  this.componentObj[fName][gName].push(key)
1206
1045
  }
1207
1046
  }
1208
- return { componentObj: this.componentObj, componentList: this.componentList }
1047
+ return {componentObj:this.componentObj,componentList:this.componentList}
1209
1048
  },
1210
- renderDoc: function (compOBJ, dupCompList) {
1211
- return (
1049
+ renderDoc:function(compOBJ,dupCompList){
1050
+ return(
1212
1051
  ReactDOM.render(
1213
1052
  <Doc
1214
1053
  components={Component}
@@ -1220,52 +1059,52 @@
1220
1059
  )
1221
1060
  }
1222
1061
  }
1223
- var compGroupObj = function (comp, key, compGroup) {
1224
- if (comp == 'React' || comp == 'ReactDOM' || comp == 'renderToStaticMarkup') {
1062
+ var compGroupObj=function(comp,key,compGroup){
1063
+ if (comp == 'React' || comp == 'ReactDOM' || comp =='renderToStaticMarkup') {
1225
1064
  return;
1226
1065
  }
1227
- else if (comp == '_provider') {
1228
- return user.objList(null, null, comp, compGroup[comp])
1066
+ else if(comp=='_provider'){
1067
+ return user.objList(null,null,comp,compGroup[comp])
1229
1068
  }
1230
- else {
1231
- if (compGroup[comp].docs && compGroup[comp].docs.componentGroup) {
1069
+ else{
1070
+ if(compGroup[comp].docs && compGroup[comp].docs.componentGroup ){
1232
1071
  let groupName = compGroup[comp].docs.componentGroup;
1233
1072
  let folderName = compGroup[comp].docs.folderName || "General";
1234
- if (comp == 'default') {
1235
- return user.objList(folderName, groupName, key, compGroup[comp])
1073
+ if(comp=='default'){
1074
+ return user.objList(folderName,groupName,key,compGroup[comp])
1236
1075
  }
1237
- else {
1238
- return user.objList(folderName, groupName, comp, compGroup[comp])
1076
+ else{
1077
+ return user.objList(folderName,groupName,comp,compGroup[comp])
1239
1078
  }
1240
1079
  }
1241
1080
  }
1242
1081
  }
1243
1082
  Promise.all(Object.keys(Component).map((key) => {
1244
- let componentKey = Component[key];
1245
- if (key == 'React' || key == 'ReactDOM' || key == 'renderToStaticMarkup') {
1083
+ let componentKey=Component[key];
1084
+ if (key == 'React' || key == 'ReactDOM' || key=='renderToStaticMarkup') {
1246
1085
  return;
1247
1086
  }
1248
- if (key == '_provider') {
1249
- return compGroupObj(key, null, Component)
1087
+ if(key=='_provider'){
1088
+ return compGroupObj(key,null,Component)
1250
1089
  }
1251
- try {
1252
- return (
1253
- componentKey && componentKey.then((res) => {
1090
+ try{
1091
+ return(
1092
+ componentKey && componentKey.then((res)=>{
1254
1093
  let compList;
1255
- Object.keys(res).forEach((comp) => {
1256
- let compGroup = res[comp];
1257
- Object.keys(compGroup).forEach((comps) => {
1258
- compGroupObj(comps, key, compGroup)
1094
+ Object.keys(res).forEach((comp)=>{
1095
+ let compGroup=res[comp];
1096
+ Object.keys(compGroup).forEach((comps)=>{
1097
+ compGroupObj(comps,key,compGroup)
1259
1098
  })
1260
1099
  })
1261
1100
  })
1262
1101
  )
1263
- } catch (error) {
1264
- compGroupObj(key, null, Component)
1102
+ }catch(error){
1103
+ compGroupObj(key,null,Component)
1265
1104
  }
1266
- })).then(() => {
1267
- window.componentList = user.componentList
1268
- user.renderDoc(user.componentObj, user.dupCompList)
1105
+ })).then(()=>{
1106
+ window.componentList=user.componentList
1107
+ user.renderDoc(user.componentObj,user.dupCompList)
1269
1108
  })
1270
1109
  };
1271
1110
  var onLoader = function () {
@@ -1289,9 +1128,9 @@
1289
1128
 
1290
1129
  var redraw = false;
1291
1130
 
1292
- var pane = document.getElementById('resize');
1293
- var ghostpane = document.getElementById('ghostpane');
1294
- function setBounds(element, x, y, w, h) {
1131
+ var pane = document.getElementById( 'resize' );
1132
+ var ghostpane = document.getElementById( 'ghostpane' );
1133
+ function setBounds( element, x, y, w, h ) {
1295
1134
  element.style.left = x + 'px';
1296
1135
  element.style.top = y + 'px';
1297
1136
  element.style.width = w + 'px';
@@ -1309,35 +1148,35 @@
1309
1148
  }
1310
1149
 
1311
1150
  // Mouse events
1312
- pane && pane.addEventListener('mousedown', onMouseDown);
1313
- pane && document.addEventListener('mousemove', onMove);
1314
- pane && document.addEventListener('mouseup', onUp);
1151
+ pane && pane.addEventListener( 'mousedown', onMouseDown );
1152
+ pane && document.addEventListener( 'mousemove', onMove );
1153
+ pane && document.addEventListener( 'mouseup', onUp );
1315
1154
 
1316
1155
  // Touch events
1317
- pane && pane.addEventListener('touchstart', onTouchDown);
1318
- pane && document.addEventListener('touchmove', onTouchMove);
1319
- pane && document.addEventListener('touchend', onTouchEnd);
1156
+ pane && pane.addEventListener( 'touchstart', onTouchDown );
1157
+ pane && document.addEventListener( 'touchmove', onTouchMove );
1158
+ pane && document.addEventListener( 'touchend', onTouchEnd );
1320
1159
 
1321
- function onTouchDown(e) {
1322
- onDown(e.touches[0]);
1160
+ function onTouchDown( e ) {
1161
+ onDown( e.touches[ 0 ] );
1323
1162
  e.preventDefault();
1324
1163
  }
1325
1164
 
1326
- function onTouchMove(e) {
1327
- onMove(e.touches[0]);
1165
+ function onTouchMove( e ) {
1166
+ onMove( e.touches[ 0 ] );
1328
1167
  }
1329
1168
 
1330
- function onTouchEnd(e) {
1331
- if (e.touches.length == 0) onUp(e.changedTouches[0]);
1169
+ function onTouchEnd( e ) {
1170
+ if ( e.touches.length == 0 ) onUp( e.changedTouches[ 0 ] );
1332
1171
  }
1333
1172
 
1334
- function onMouseDown(e) {
1335
- onDown(e);
1173
+ function onMouseDown( e ) {
1174
+ onDown( e );
1336
1175
  e.preventDefault();
1337
1176
  }
1338
1177
 
1339
- function onDown(e) {
1340
- calc(e);
1178
+ function onDown( e ) {
1179
+ calc( e );
1341
1180
 
1342
1181
  var isResizing = onRightEdge || onBottomEdge || onTopEdge || onLeftEdge;
1343
1182
 
@@ -1361,7 +1200,7 @@
1361
1200
  return x > 0 && x < b.width && y > 0 && y < b.height && y < 30;
1362
1201
  }
1363
1202
 
1364
- function calc(e) {
1203
+ function calc( e ) {
1365
1204
  b = pane.getBoundingClientRect();
1366
1205
  x = e.clientX - b.left;
1367
1206
  y = e.clientY - b.top;
@@ -1377,8 +1216,8 @@
1377
1216
 
1378
1217
  var e;
1379
1218
 
1380
- function onMove(ee) {
1381
- calc(ee);
1219
+ function onMove( ee ) {
1220
+ calc( ee );
1382
1221
 
1383
1222
  e = ee;
1384
1223
 
@@ -1386,34 +1225,34 @@
1386
1225
  }
1387
1226
 
1388
1227
  function animate() {
1389
- requestAnimationFrame(animate);
1228
+ requestAnimationFrame( animate );
1390
1229
 
1391
- if (!redraw) return;
1230
+ if ( !redraw ) return;
1392
1231
 
1393
1232
  redraw = false;
1394
1233
 
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';
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';
1399
1238
 
1400
- if (clicked.onLeftEdge) {
1239
+ if ( clicked.onLeftEdge ) {
1401
1240
  var currentWidth = Math.max(
1402
1241
  clicked.cx - e.clientX + clicked.w,
1403
1242
  minWidth
1404
1243
  );
1405
- if (currentWidth > minWidth) {
1244
+ if ( currentWidth > minWidth ) {
1406
1245
  pane.style.width = currentWidth + 'px';
1407
1246
  // pane.style.left = e.clientX + 'px';
1408
1247
  }
1409
1248
  }
1410
1249
 
1411
- if (clicked.onTopEdge) {
1250
+ if ( clicked.onTopEdge ) {
1412
1251
  var currentHeight = Math.max(
1413
1252
  clicked.cy - e.clientY + clicked.h,
1414
1253
  minHeight
1415
1254
  );
1416
- if (currentHeight > minHeight) {
1255
+ if ( currentHeight > minHeight ) {
1417
1256
  pane.style.height = currentHeight + 'px';
1418
1257
  pane.style.top = e.clientY + 'px';
1419
1258
  }
@@ -1424,7 +1263,7 @@
1424
1263
  return;
1425
1264
  }
1426
1265
 
1427
- if (clicked && clicked.isMoving) {
1266
+ if ( clicked && clicked.isMoving ) {
1428
1267
  if (
1429
1268
  b.top < FULLSCREEN_MARGINS ||
1430
1269
  b.left < FULLSCREEN_MARGINS ||
@@ -1432,17 +1271,17 @@
1432
1271
  b.bottom > window.innerHeight - FULLSCREEN_MARGINS
1433
1272
  ) {
1434
1273
  // hintFull();
1435
- setBounds(ghostpane, 0, 0, window.innerWidth, window.innerHeight);
1274
+ setBounds( ghostpane, 0, 0, window.innerWidth, window.innerHeight );
1436
1275
  ghostpane.style.opacity = 0.2;
1437
- } else if (b.top < MARGINS) {
1276
+ } else if ( b.top < MARGINS ) {
1438
1277
  // hintTop();
1439
- setBounds(ghostpane, 0, 0, window.innerWidth, window.innerHeight / 2);
1278
+ setBounds( ghostpane, 0, 0, window.innerWidth, window.innerHeight / 2 );
1440
1279
  ghostpane.style.opacity = 0.2;
1441
- } else if (b.left < MARGINS) {
1280
+ } else if ( b.left < MARGINS ) {
1442
1281
  // hintLeft();
1443
- setBounds(ghostpane, 0, 0, window.innerWidth / 2, window.innerHeight);
1282
+ setBounds( ghostpane, 0, 0, window.innerWidth / 2, window.innerHeight );
1444
1283
  ghostpane.style.opacity = 0.2;
1445
- } else if (b.right > rightScreenEdge) {
1284
+ } else if ( b.right > rightScreenEdge ) {
1446
1285
  // hintRight();
1447
1286
  setBounds(
1448
1287
  ghostpane,
@@ -1452,7 +1291,7 @@
1452
1291
  window.innerHeight
1453
1292
  );
1454
1293
  ghostpane.style.opacity = 0.2;
1455
- } else if (b.bottom > bottomScreenEdge) {
1294
+ } else if ( b.bottom > bottomScreenEdge ) {
1456
1295
  // hintBottom();
1457
1296
  setBounds(
1458
1297
  ghostpane,
@@ -1466,11 +1305,11 @@
1466
1305
  hintHide();
1467
1306
  }
1468
1307
 
1469
- if (preSnapped) {
1308
+ if ( preSnapped ) {
1470
1309
  setBounds(
1471
1310
  pane,
1472
1311
  e.clientX - preSnapped.width / 2,
1473
- e.clientY - Math.min(clicked.y, preSnapped.height),
1312
+ e.clientY - Math.min( clicked.y, preSnapped.height ),
1474
1313
  preSnapped.width,
1475
1314
  preSnapped.height
1476
1315
  );
@@ -1487,15 +1326,15 @@
1487
1326
  // This code executes when mouse moves without clicking
1488
1327
 
1489
1328
  // style cursor
1490
- if ((onRightEdge && onBottomEdge) || (onLeftEdge && onTopEdge)) {
1329
+ if ( ( onRightEdge && onBottomEdge ) || ( onLeftEdge && onTopEdge ) ) {
1491
1330
  pane.style.cursor = 'nwse-resize';
1492
- } else if ((onRightEdge && onTopEdge) || (onBottomEdge && onLeftEdge)) {
1331
+ } else if ( ( onRightEdge && onTopEdge ) || ( onBottomEdge && onLeftEdge ) ) {
1493
1332
  pane.style.cursor = 'nesw-resize';
1494
- } else if (onRightEdge || onLeftEdge) {
1333
+ } else if ( onRightEdge || onLeftEdge ) {
1495
1334
  pane.style.cursor = 'ew-resize';
1496
- } else if (onBottomEdge || onTopEdge) {
1335
+ } else if ( onBottomEdge || onTopEdge ) {
1497
1336
  pane.style.cursor = 'ns-resize';
1498
- } else if (canMove()) {
1337
+ } else if ( canMove() ) {
1499
1338
  pane.style.cursor = 'move';
1500
1339
  } else {
1501
1340
  pane.style.cursor = 'default';
@@ -1504,10 +1343,10 @@
1504
1343
 
1505
1344
  animate();
1506
1345
 
1507
- function onUp(e) {
1508
- calc(e);
1346
+ function onUp( e ) {
1347
+ calc( e );
1509
1348
 
1510
- if (clicked && clicked.isMoving) {
1349
+ if ( clicked && clicked.isMoving ) {
1511
1350
  // Snap
1512
1351
  var snapped = {
1513
1352
  width: b.width,
@@ -1521,17 +1360,17 @@
1521
1360
  b.bottom > window.innerHeight - FULLSCREEN_MARGINS
1522
1361
  ) {
1523
1362
  // hintFull();
1524
- setBounds(pane, 0, 0, window.innerWidth, window.innerHeight);
1363
+ setBounds( pane, 0, 0, window.innerWidth, window.innerHeight );
1525
1364
  preSnapped = snapped;
1526
- } else if (b.top < MARGINS) {
1365
+ } else if ( b.top < MARGINS ) {
1527
1366
  // hintTop();
1528
- setBounds(pane, 0, 0, window.innerWidth, window.innerHeight / 2);
1367
+ setBounds( pane, 0, 0, window.innerWidth, window.innerHeight / 2 );
1529
1368
  preSnapped = snapped;
1530
- } else if (b.left < MARGINS) {
1369
+ } else if ( b.left < MARGINS ) {
1531
1370
  // hintLeft();
1532
- setBounds(pane, 0, 0, window.innerWidth / 2, window.innerHeight);
1371
+ setBounds( pane, 0, 0, window.innerWidth / 2, window.innerHeight );
1533
1372
  preSnapped = snapped;
1534
- } else if (b.right > rightScreenEdge) {
1373
+ } else if ( b.right > rightScreenEdge ) {
1535
1374
  // hintRight();
1536
1375
  setBounds(
1537
1376
  pane,
@@ -1541,7 +1380,7 @@
1541
1380
  window.innerHeight
1542
1381
  );
1543
1382
  preSnapped = snapped;
1544
- } else if (b.bottom > bottomScreenEdge) {
1383
+ } else if ( b.bottom > bottomScreenEdge ) {
1545
1384
  // hintBottom();
1546
1385
  setBounds(
1547
1386
  pane,
@@ -1566,100 +1405,97 @@
1566
1405
  <script type="text/javascript">
1567
1406
  var html =
1568
1407
  "<body><script src='/docs/js/vendor.js'><\/script><script src='/docs/js/main.js'><\/script><script src='/docs/js/moduleStats.js'><\/script> <script> if(typeof mdata==\"undefined\"){mdata={};}parent.loadDOC(Component, mdata) <\/script> <\/body>";
1569
- var iframe = document.getElementById('ifm');
1408
+ var iframe = document.getElementById( 'ifm' );
1570
1409
  var frameDoc = iframe.document;
1571
- if (iframe.contentWindow) {
1410
+ if ( iframe.contentWindow ) {
1572
1411
  frameDoc = iframe.contentWindow.document;
1573
1412
  frameDoc.open();
1574
- frameDoc.writeln(html);
1413
+ frameDoc.writeln( html );
1575
1414
  frameDoc.close();
1576
1415
  } else {
1577
1416
  }
1578
1417
  </script>
1579
1418
  <div style="visibility: hidden;height: 0;width: 0;height:0">
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" />
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"/>
1588
1428
  </symbol>
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" />
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
+ />
1592
1436
 
1593
1437
  </symbol>
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" />
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"/>
1597
1440
  </symbol>
1598
1441
  <symbol id='newTab' x="0px" y="0px" viewBox="0 0 26 26" enableBackground='new 0 0 26 26'>
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" />
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"/>
1603
1444
  </symbol>
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" />
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"/>
1608
1451
  </symbol>
1609
1452
  <symbol id="rem" enableBackground="new 0 0 458.353 458.353" viewBox="0 0 458.353 458.353">
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" />
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"/>
1614
1455
  </symbol>
1615
1456
  <symbol id='fullScreen' viewBox="0 0 18 18">
1616
- <path
1617
- d="M4.5 11H3v4h4v-1.5H4.5V11zM3 7h1.5V4.5H7V3H3v4zm10.5 6.5H11V15h4v-4h-1.5v2.5zM11 3v1.5h2.5V7H15V3h-4z" />
1457
+ <path d="M4.5 11H3v4h4v-1.5H4.5V11zM3 7h1.5V4.5H7V3H3v4zm10.5 6.5H11V15h4v-4h-1.5v2.5zM11 3v1.5h2.5V7H15V3h-4z"/>
1618
1458
  </symbol>
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" />
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"/>
1623
1461
  </symbol>
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" />
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"/>
1640
1468
  </symbol>
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
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
1653
1489
  c-55.832,0-87.972,39.974-88.29,40.378l-31.42-24.756c1.79-2.271,44.687-55.622,119.71-55.622s117.92,53.352,119.71,55.622
1654
1490
  L344.29,381.5L344.354,381.58z M437.02,437.02C485.371,388.668,512,324.38,512,256s-26.629-132.667-74.98-181.02
1655
1491
  C388.667,26.629,324.38,0,256,0S123.333,26.629,74.98,74.98C26.629,123.333,0,187.62,0,256s26.629,132.668,74.98,181.02
1656
1492
  C123.333,485.371,187.62,512,256,512S388.667,485.371,437.02,437.02z M472,256c0,119.103-96.897,216-216,216S40,375.103,40,256
1657
1493
  S136.897,40,256,40S472,136.897,472,256z M168,212.122c17.673,0,32-14.327,32-32s-14.327-32-32-32s-32,14.327-32,32
1658
1494
  S150.327,212.122,168,212.122z M344,212.122c17.673,0,32-14.327,32-32s-14.327-32-32-32s-32,14.327-32,32
1659
- S326.327,212.122,344,212.122z' />
1660
- </svg>
1495
+ S326.327,212.122,344,212.122z'
1496
+ />
1497
+ </svg>
1661
1498
  </svg>
1662
1499
  </div>
1663
1500
  </body>
1664
-
1665
- </html>
1501
+ </html>