@zohodesk/react-cli 0.0.1-beta.17 → 0.0.1-beta.171

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (292) hide show
  1. package/.eslintignore +1 -0
  2. package/.eslintrc.js +49 -10
  3. package/.prettierrc +6 -0
  4. package/CHANGELOG.md +5 -0
  5. package/README.md +859 -0
  6. package/bin/cli.js +215 -46
  7. package/cert/Tsicsezwild-22-23.crt +37 -0
  8. package/cert/Tsicsezwild-22-23.key +27 -0
  9. package/docs/CustomChunks.md +26 -0
  10. package/docs/DevStart.md +18 -0
  11. package/docs/HoverActive.md +12 -0
  12. package/docs/InstallNode.md +28 -0
  13. package/docs/TODOS.md +10 -0
  14. package/docs/ValueReplacer.md +60 -0
  15. package/docs/warnings_while_install.txt +35 -0
  16. package/files/eslintrc.js +62 -0
  17. package/files/prettierrc.js +3 -0
  18. package/lib/babel/cmjs-plugins-presets.js +24 -0
  19. package/lib/babel/es-plugins-presets.js +34 -0
  20. package/lib/common/getEntries.js +33 -46
  21. package/lib/common/getPublicPathConfig.js +40 -0
  22. package/lib/common/index.js +24 -19
  23. package/lib/common/splitChunks.js +110 -25
  24. package/lib/common/sslcertUpdater.js +59 -0
  25. package/lib/common/templateParameters.js +25 -0
  26. package/lib/common/testPattern.js +69 -0
  27. package/lib/common/valueReplacer.js +55 -0
  28. package/lib/configs/jest.config.js +31 -27
  29. package/lib/configs/libAlias.js +31 -0
  30. package/lib/configs/webpack.component.umd.config.js +46 -53
  31. package/lib/configs/webpack.css.umd.config.js +47 -46
  32. package/lib/configs/webpack.dev.config.js +99 -84
  33. package/lib/configs/webpack.docs.config.js +65 -57
  34. package/lib/configs/webpack.impact.config.js +109 -0
  35. package/lib/configs/webpack.prod.config.js +147 -104
  36. package/lib/hooks/docsProptypeHook.js +32 -38
  37. package/lib/jest/commitedFilesResult.js +144 -71
  38. package/lib/jest/coverageCollector.js +68 -35
  39. package/lib/jest/jsonMaker.js +54 -0
  40. package/lib/jest/preProcessors/cssPreprocessor.js +16 -18
  41. package/lib/jest/preProcessors/jsPreprocessor.js +5 -6
  42. package/lib/jest/preProcessors/otherFilesPreprocessor.js +5 -6
  43. package/lib/jest/result.js +92 -42
  44. package/lib/jest/run.js +75 -28
  45. package/lib/jest/setup.js +103 -102
  46. package/lib/loaderUtils/configsAssetsLoaders.js +117 -0
  47. package/lib/loaderUtils/getCSSLoaders.js +113 -0
  48. package/lib/loaderUtils/getDevJsLoaders.js +35 -23
  49. package/lib/loaderUtils/index.js +14 -7
  50. package/lib/loaders/docsLoader.js +15 -15
  51. package/lib/loaders/docsPropsLoader.js +14 -17
  52. package/lib/loaders/fileBountryLoader.js +17 -0
  53. package/lib/loaders/fileLoader.js +47 -38
  54. package/lib/loaders/scriptInstrumentLoader.js +23 -20
  55. package/lib/loaders/selectorMappingLoader.js +75 -0
  56. package/lib/loaders/workerLoader.js +136 -0
  57. package/lib/middlewares/HMRMiddleware.js +90 -72
  58. package/lib/middlewares/SSTMiddleware.js +21 -0
  59. package/lib/pluginUtils/getDevPlugins.js +177 -30
  60. package/lib/pluginUtils/getDocsPlugins.js +36 -15
  61. package/lib/pluginUtils/getLibraryImactPlugins.js +23 -0
  62. package/lib/pluginUtils/getLibraryPlugins.js +8 -10
  63. package/lib/pluginUtils/getProdPlugins.js +244 -37
  64. package/lib/pluginUtils/getServerPlugins.js +8 -11
  65. package/lib/pluginUtils/getUMDCSSPlugins.js +14 -18
  66. package/lib/pluginUtils/getUMDComponentPlugins.js +14 -9
  67. package/lib/pluginUtils/index.js +36 -43
  68. package/lib/plugins/CdnChangePlugin.js +77 -0
  69. package/lib/plugins/CleanupStatsPlugin.js +28 -0
  70. package/lib/plugins/EFCPlugin.js +241 -0
  71. package/lib/plugins/EFCPlugin.md +6 -0
  72. package/lib/plugins/EFCTemplatePlugin.js +151 -0
  73. package/lib/plugins/I18NInjectIntoIndexPlugin.js +141 -0
  74. package/lib/plugins/I18nSplitPlugin/I18nDebugPlugin.js +60 -0
  75. package/lib/plugins/I18nSplitPlugin/I18nDependency.js +44 -0
  76. package/lib/plugins/I18nSplitPlugin/I18nDownlodLogic.js +266 -0
  77. package/lib/plugins/I18nSplitPlugin/I18nFilesEmitter.js +183 -0
  78. package/lib/plugins/I18nSplitPlugin/I18nKeysIdentifer.js +100 -0
  79. package/lib/plugins/I18nSplitPlugin/I18nSplit.md +95 -0
  80. package/lib/plugins/I18nSplitPlugin/README.md +25 -0
  81. package/lib/plugins/I18nSplitPlugin/index.js +185 -0
  82. package/lib/plugins/I18nSplitPlugin/utils/collectI18nKeys.js +64 -0
  83. package/lib/plugins/I18nSplitPlugin/utils/getI18nFileUrlPathTemplate.js +13 -0
  84. package/lib/plugins/I18nSplitPlugin/utils/getI18nKeysFormModules.js +26 -0
  85. package/lib/plugins/I18nSplitPlugin/utils/hashUtils.js +40 -0
  86. package/lib/plugins/I18nSplitPlugin/utils/index.js +31 -0
  87. package/lib/plugins/I18nSplitPlugin/utils/propertiesUtils.js +112 -0
  88. package/lib/plugins/ManifestPlugin.js +86 -0
  89. package/lib/plugins/ModuleStatsPlugin.js +98 -97
  90. package/lib/plugins/OptimizeJSPlugin.js +41 -0
  91. package/lib/plugins/PublicPathCallbackPlugin.js +63 -0
  92. package/lib/plugins/PublicPathChangePlugin.js +226 -0
  93. package/lib/plugins/ReportGeneratePlugin.js +181 -0
  94. package/lib/plugins/RequireVariablePublicPlugin.js +30 -0
  95. package/lib/plugins/ResourceHintsPlugin.js +67 -0
  96. package/lib/plugins/RtlSplitPlugin/OverwriteCssPathForRTL.js +80 -0
  97. package/lib/plugins/RtlSplitPlugin/RtlCssPlugin.js +82 -0
  98. package/lib/plugins/RtlSplitPlugin/RtrSplit.md +30 -0
  99. package/lib/plugins/RtlSplitPlugin/replaceCssDirTemplate.js +26 -0
  100. package/lib/plugins/ScriptInstrumentPlugin.js +22 -37
  101. package/lib/plugins/ServiceWorkerPlugin.js +107 -0
  102. package/lib/plugins/ShadowDOMSupportPlugin.js +270 -0
  103. package/lib/plugins/SourceMapHookPlugin.js +25 -59
  104. package/lib/plugins/TPHashMappingPlugin.js +67 -0
  105. package/lib/plugins/UglifyCSSPlugin.js +39 -0
  106. package/lib/plugins/UnusedFilesFindPlugin.js +150 -97
  107. package/lib/plugins/index.js +127 -37
  108. package/lib/plugins/libraryImpactPlugin.js +190 -0
  109. package/lib/plugins/webpackwatchrunplugin.js +26 -0
  110. package/lib/postcss-plugins/ExcludePlugin.js +23 -0
  111. package/lib/postcss-plugins/RTLSplitPlugin.js +138 -0
  112. package/lib/postcss-plugins/ValueReplacer.js +46 -0
  113. package/lib/postcss-plugins/__test__/hoverActivePlugin.spec.js +22 -0
  114. package/lib/postcss-plugins/__test__/test1Input.css +39 -0
  115. package/lib/postcss-plugins/__test__/test1Output.css +39 -0
  116. package/lib/postcss-plugins/hoverActivePlugin.js +368 -0
  117. package/lib/postcss-plugins/variableModifier.js +243 -0
  118. package/lib/schemas/index.js +541 -65
  119. package/lib/servers/clusterHubServer.js +22 -26
  120. package/lib/servers/devBuild.js +102 -0
  121. package/lib/servers/docsServer.js +3 -5
  122. package/lib/servers/docsServerCore.js +94 -79
  123. package/lib/servers/getCliPath.js +28 -0
  124. package/lib/servers/helpServer.js +19 -21
  125. package/lib/servers/httpsOptions.js +18 -0
  126. package/lib/servers/impactServer.js +123 -115
  127. package/lib/servers/mockserver.js +44 -0
  128. package/lib/servers/nowatchserver.js +200 -0
  129. package/lib/servers/scrServer.js +147 -0
  130. package/lib/servers/server.js +134 -132
  131. package/lib/servers/ssServer.js +106 -70
  132. package/lib/sh/reportPublish.sh +16 -10
  133. package/lib/templates/CoverageScriptTemplate.js +45 -18
  134. package/lib/templates/WMSTemplate.js +17 -18
  135. package/lib/templates/linterConstant.js +10 -0
  136. package/lib/utils/babelPresets.js +12 -4
  137. package/lib/utils/buildstats.html +148 -0
  138. package/lib/utils/clean.js +12 -11
  139. package/lib/utils/copy.js +16 -109
  140. package/lib/utils/copyTimezones.js +21 -0
  141. package/lib/utils/createEventStream.js +24 -19
  142. package/lib/utils/cssClassNameGenerate.js +77 -0
  143. package/lib/utils/cssURLReplacer.js +136 -0
  144. package/lib/utils/dependencyPostPublish.js +42 -0
  145. package/lib/utils/fileUtils.js +125 -0
  146. package/lib/utils/folderIterator.js +47 -0
  147. package/lib/utils/getComponents.js +126 -0
  148. package/lib/utils/getCurrentBranch.js +11 -17
  149. package/lib/utils/getDependenciesImpactList.js +151 -0
  150. package/lib/utils/getHash.js +26 -0
  151. package/lib/utils/getIp.js +20 -0
  152. package/lib/utils/getOptions.js +113 -28
  153. package/lib/utils/getServerURL.js +25 -8
  154. package/lib/utils/index.js +283 -68
  155. package/lib/utils/init.js +2 -2
  156. package/lib/utils/initPreCommitHook.js +47 -27
  157. package/lib/utils/jsonHelper.js +106 -0
  158. package/lib/utils/libraryImpactConfig.js +63 -0
  159. package/lib/utils/lint/addScripts.js +27 -0
  160. package/lib/utils/lint/checkExistingConfig.js +67 -0
  161. package/lib/utils/lint/copyConfigs.js +24 -0
  162. package/lib/utils/lint/index.js +54 -0
  163. package/lib/utils/lint/lintScripts.js +11 -0
  164. package/lib/utils/lint/lintSetup.js +31 -0
  165. package/lib/utils/lint/lintStagedPreCommitHook.js +7 -0
  166. package/lib/utils/lint/question.js +30 -0
  167. package/lib/utils/lintReporter.js +142 -0
  168. package/lib/utils/mailSender.js +16 -25
  169. package/lib/utils/pullOrigin.js +28 -0
  170. package/lib/utils/reinstallDependencies.js +133 -0
  171. package/lib/utils/removeAttributes.js +25 -23
  172. package/lib/utils/repoClone.js +59 -63
  173. package/lib/utils/request.js +64 -77
  174. package/lib/utils/resultSchema.json +73 -0
  175. package/lib/utils/rtl.js +59 -0
  176. package/lib/utils/setEnvVariables.js +13 -0
  177. package/lib/utils/ssTestHack.js +48 -0
  178. package/lib/utils/switchBranch.js +28 -0
  179. package/lib/utils/urlConcat.js +22 -0
  180. package/lib/utils/useExitCleanup.js +55 -0
  181. package/npm8.md +9 -0
  182. package/package.json +96 -64
  183. package/postpublish.js +6 -0
  184. package/templates/app/.eslintrc.js +140 -0
  185. package/templates/app/README.md +12 -12
  186. package/templates/app/app/index.html +24 -8
  187. package/templates/app/app/properties/ApplicationResources_en_US.properties +1 -1
  188. package/templates/app/app/properties/i18nkeys.json +3 -3
  189. package/templates/app/docs/all.html +69 -69
  190. package/templates/app/mockapi/index.js +18 -13
  191. package/templates/app/package.json +37 -17
  192. package/templates/app/src/actions/SampleActions/index.js +37 -0
  193. package/templates/app/src/actions/index.js +65 -0
  194. package/templates/app/src/appUrls.js +19 -0
  195. package/templates/app/src/components/Alert/Alert.js +134 -0
  196. package/templates/app/src/components/Alert/Alert.module.css +79 -0
  197. package/templates/app/src/components/FreezeLayer/FreezeLayer.css +37 -0
  198. package/templates/app/src/components/FreezeLayer/FreezeLayer.js +84 -0
  199. package/templates/app/src/components/Sample/Sample.module.css +11 -0
  200. package/templates/app/src/components/Sample/SampleList.js +61 -0
  201. package/templates/app/src/components/Slider/Slider.css +41 -0
  202. package/templates/app/src/components/Slider/Slider.js +55 -0
  203. package/templates/app/src/containers/AlertContainer/index.js +15 -0
  204. package/templates/app/src/containers/AppContainer/index.js +96 -0
  205. package/templates/app/src/containers/AppContainer/index.module.css +27 -0
  206. package/templates/app/src/containers/CustomMatch/index.js +65 -0
  207. package/templates/app/src/containers/DevTools/index.js +10 -0
  208. package/templates/app/src/containers/Header/index.js +67 -0
  209. package/templates/app/src/containers/Header/index.module.css +43 -0
  210. package/templates/app/src/containers/Redirect/index.js +63 -0
  211. package/templates/app/src/containers/Redirector/index.js +47 -0
  212. package/templates/app/src/containers/SampleListContainer/ListContainer.js +42 -0
  213. package/templates/app/src/containers/SampleListContainer/ListContainer.module.css +3 -0
  214. package/templates/app/src/historyChange.js +5 -0
  215. package/templates/app/src/index.html +10 -0
  216. package/templates/app/src/index.js +24 -0
  217. package/templates/app/src/middleware/PromiseMiddleware.js +59 -0
  218. package/templates/app/src/reducers/alertData.js +11 -0
  219. package/templates/app/src/reducers/index.js +6 -0
  220. package/templates/app/src/reducers/samples.js +19 -0
  221. package/templates/app/src/store/configureStore.dev.js +51 -0
  222. package/templates/app/src/store/configureStore.js +5 -0
  223. package/templates/app/src/store/configureStore.prod.js +26 -0
  224. package/templates/app/src/util/Common.js +5 -0
  225. package/templates/app/src/util/RequestAPI.js +132 -0
  226. package/templates/appold/README.md +12 -0
  227. package/templates/appold/app/index.html +8 -0
  228. package/templates/appold/app/properties/ApplicationResources_en_US.properties +1 -0
  229. package/templates/appold/app/properties/i18nkeys.json +3 -0
  230. package/templates/appold/docs/all.html +69 -0
  231. package/templates/appold/mockapi/index.js +13 -0
  232. package/templates/{app → appold}/mockapi/tickets.json +0 -0
  233. package/templates/appold/package.json +17 -0
  234. package/templates/appold/src/components/Text/Text.css +0 -0
  235. package/templates/appold/src/components/Text/Text.js +23 -0
  236. package/templates/appold/src/components/Text/__tests__/Text.spec.js +30 -0
  237. package/templates/appold/src/components/Text/docs/Text__default.docs.js +16 -0
  238. package/templates/appold/src/components/docs.js +1 -0
  239. package/templates/appold/src/components/index.js +5 -0
  240. package/templates/appold/src/index.js +13 -0
  241. package/templates/docs/all.html +1 -1
  242. package/templates/docs/component.html +110 -69
  243. package/templates/docs/components.html +221 -0
  244. package/templates/docs/css/component.css +12 -14
  245. package/templates/docs/css/componentTest.css +7 -0
  246. package/templates/docs/css/style.css +150 -206
  247. package/templates/docs/impactReportTemplate.html +154 -0
  248. package/templates/docs/index.html +1482 -1336
  249. package/templates/library/src/index.js +0 -0
  250. package/.npmignore +0 -3
  251. package/cert/cert.pem +0 -129
  252. package/cert/key.pem +0 -27
  253. package/lib/common/getInsertAt.js +0 -36
  254. package/lib/common/getInsertIntoFunction.js +0 -13
  255. package/lib/configs/webpack.server.config.js +0 -93
  256. package/lib/plugins/ChunkManifestReplacePlugin.js +0 -94
  257. package/lib/plugins/RuntimePublicPathPlugin.js +0 -46
  258. package/lib/rmcntrlm.sh +0 -14
  259. package/lib/servers/nodeServer.js +0 -238
  260. package/lib/templates/HMRTemplate.js +0 -256
  261. package/lib/templates/publicPathTemplate.js +0 -16
  262. package/lib/utils/setConfig.js +0 -14
  263. package/node_modules/history/CHANGES.md +0 -395
  264. package/node_modules/history/DOMUtils.js +0 -3
  265. package/node_modules/history/ExecutionEnvironment.js +0 -3
  266. package/node_modules/history/LICENSE +0 -21
  267. package/node_modules/history/LocationUtils.js +0 -3
  268. package/node_modules/history/PathUtils.js +0 -3
  269. package/node_modules/history/README.md +0 -282
  270. package/node_modules/history/cjs/history.js +0 -933
  271. package/node_modules/history/cjs/history.min.js +0 -1
  272. package/node_modules/history/createBrowserHistory.js +0 -3
  273. package/node_modules/history/createHashHistory.js +0 -3
  274. package/node_modules/history/createMemoryHistory.js +0 -3
  275. package/node_modules/history/createTransitionManager.js +0 -3
  276. package/node_modules/history/es/DOMUtils.js +0 -7
  277. package/node_modules/history/es/ExecutionEnvironment.js +0 -7
  278. package/node_modules/history/es/LocationUtils.js +0 -7
  279. package/node_modules/history/es/PathUtils.js +0 -7
  280. package/node_modules/history/es/createBrowserHistory.js +0 -7
  281. package/node_modules/history/es/createHashHistory.js +0 -7
  282. package/node_modules/history/es/createMemoryHistory.js +0 -7
  283. package/node_modules/history/es/createTransitionManager.js +0 -7
  284. package/node_modules/history/es/warnAboutDeprecatedESMImport.js +0 -35
  285. package/node_modules/history/esm/history.js +0 -904
  286. package/node_modules/history/index.js +0 -7
  287. package/node_modules/history/package.json +0 -134
  288. package/node_modules/history/umd/history.js +0 -1059
  289. package/node_modules/history/umd/history.min.js +0 -1
  290. package/node_modules/history/warnAboutDeprecatedCJSRequire.js +0 -35
  291. package/templates/app/.npmignore +0 -9
  292. package/templates/library/.npmignore +0 -9
package/templates/docs/index.html CHANGED
@@ -1,1347 +1,1493 @@
1
1
  <!DOCTYPE html>
2
- <html>
2
+ <html dir="ltr">
3
3
 
4
4
  <head>
5
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <link rel=stylesheet href="./css/style.css">
8
- <link href="https://fonts.googleapis.com/css?family=Frank+Ruhl+Libre|Lemonada|Lora|Open+Sans+Condensed:300|PT+Sans+Narrow|Slabo+27px|Source+Sans+Pro"
9
- rel="stylesheet" />
10
- <link href="https://supportclientapp.localzoho.com/support/images/support-2.ico" type="IMAGE/X-ICON" rel="SHORTCUT ICON" />
11
-
12
- <script src="./js/codemirror.js"></script>
13
- <script src="./js/javascript.js"></script>
14
- <script src="./js/active-line.js"></script>
15
- <script src="./js/matchbrackets.js"></script>
16
- <link rel="stylesheet" type="text/css" href="./css/hopscotch.css">
17
- <title>Zoho Desk - React Components</title>
18
- <script>
19
-
20
- function selectText(containerid) {
21
- if (document.selection) {
22
- // IE
23
- var range = document.body.createTextRange();
24
- range.moveToElementText(document.getElementById(containerid));
25
- range.select();
26
- document.execCommand('copy');
27
- } else if (window.getSelection) {
28
- var range = document.createRange();
29
- range.selectNode(document.getElementById(containerid));
30
- window.getSelection().removeAllRanges();
31
- window.getSelection().addRange(range);
32
- document.execCommand('copy');
33
- }
34
- }
35
- </script>
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <link rel=stylesheet href="./css/style.css">
8
+ <link href="https://fonts.googleapis.com/css?family=Frank+Ruhl+Libre|Lemonada|Lora|Open+Sans+Condensed:300|PT+Sans+Narrow|Slabo+27px|Source+Sans+Pro"
9
+ rel="stylesheet" />
10
+ <link href="https://supportclientapp.localzoho.com/support/images/support-2.ico" type="IMAGE/X-ICON" rel="SHORTCUT ICON" />
11
+
12
+ <script src="./js/codemirror.js"></script>
13
+ <script src="./js/javascript.js"></script>
14
+ <script src="./js/active-line.js"></script>
15
+ <script src="./js/matchbrackets.js"></script>
16
+ <link rel="stylesheet" type="text/css" href="./css/hopscotch.css">
17
+ <title>Zoho Desk - React Components</title>
18
+ <script>
19
+
20
+ function selectText(containerid) {
21
+ if (document.selection) {
22
+ // IE
23
+ var range = document.body.createTextRange();
24
+ range.moveToElementText(document.getElementById(containerid));
25
+ range.select();
26
+ document.execCommand('copy');
27
+ } else if (window.getSelection) {
28
+ var range = document.createRange();
29
+ range.selectNode(document.getElementById(containerid));
30
+ window.getSelection().removeAllRanges();
31
+ window.getSelection().addRange(range);
32
+ document.execCommand('copy');
33
+ }
34
+ }
35
+ </script>
36
36
  </head>
37
37
 
38
38
  <body>
39
- <div id="react"></div>
40
- <div class="iframeCentering">
41
- <span class="posAb">Zoho Desk - React Components</span>
42
- <iframe src="about:blank" id="ifm"></iframe>
43
- </div>
44
-
45
- <script src="/docs/js/babel.min.js"></script>
46
- <script type="text/babel">
47
- window.loadDOC = function(Component, mdata) {
48
- window.RTLmode = false;
49
- var ReactDOM = Component.ReactDOM;
50
- var React = Component.React;
51
- class Doc extends React.Component {
52
- constructor(props) {
53
- super(props);
54
- this.state = {
55
- componentObj:props.componentObj,
56
- search: '',
57
- selectedComponent: location.hash,
58
- Components: Component,
59
- popUp: '',
60
- fullScreenSrc: '',
61
- viewGroup:'Global',
62
- viewFolder:'General',
63
- moreInform:false,
64
- infoTab:'component',
65
- changeset:null,
66
- version:'',
67
- frameWidth:'100%',
68
- isMenuClose:false,
69
- isRTL:false,
70
- isRem:true,
71
- isRemOpen:false,
72
- rootSize:16,
73
- pixelSize:16,
74
- resultRem:'1rem'
75
-
76
- };
77
- this.search = this.search.bind(this);
78
- this.clear = this.clear.bind(this);
79
- this.toggleRemContainer = this.toggleRemContainer.bind(this);
80
- this.hashChange = this.hashChange.bind(this);
81
- this.popupToggle = this.popupToggle.bind(this);
82
- this.popupToggleDoc = this.popupToggleDoc.bind(this);
83
- this.removeClose = this.removeClose.bind(this);
84
- this.fullScreenSrcToggle = this.fullScreenSrcToggle.bind(this);
85
- this.toggleFolder = this.toggleFolder.bind(this);
86
- this.toggleGroup = this.toggleGroup.bind(this);
87
- this.onTabinfo = this.onTabinfo.bind(this);
88
- this.codeview = this.codeview.bind(this);
89
- this.reloadFrame = this.reloadFrame.bind(this);
90
- this.getFileDetails = this.getFileDetails.bind(this);
91
- this.iframeSize = this.iframeSize.bind(this);
92
- this.menuOpen = this.menuOpen.bind(this);
93
- this.onRtlView=this.onRtlView.bind(this);
94
- this.onREMView=this.onREMView.bind(this);
95
- this.calculatePxToRem=this.calculatePxToRem.bind(this);
96
- this.calculateRemToPx=this.calculateRemToPx.bind(this);
97
- this.onChangeRem=this.onChangeRem.bind(this);
98
- this.onChangePixel=this.onChangePixel.bind(this);
99
- this.onChangeBase=this.onChangeBase.bind(this);
100
-
101
- }
102
-
103
-
104
-
105
- toggleRemContainer()
106
- {
107
- this.setState({ isRemOpen: !this.state.isRemOpen });
108
- }
109
-
110
-
111
-
112
-
113
- calculatePxToRem()
114
- {
115
- let result=Number((this.state.pixelSize/this.state.rootSize).toFixed(4));
116
- this.setState({resultRem:result+"rem"});
117
- }
118
- calculateRemToPx()
119
- {
120
- let result=Number(((Number(parseFloat(this.state.resultRem))*this.state.rootSize).toFixed(4)));
121
- this.setState({pixelSize:result});
122
- }
123
- onChangeBase(e) {
124
- let result=Number((this.state.pixelSize/e.target.value ).toFixed(4));
125
- this.setState({ rootSize: e.target.value,resultRem:result+"rem" });
126
- }
127
- onChangePixel(e) {
128
- let result=Number((e.target.value/this.state.rootSize).toFixed(4));
129
- this.setState({ pixelSize: e.target.value ,resultRem:result+"rem" });
130
- }
131
- onChangeRem(e) {
132
- let result=Number(((Number(parseFloat(e.target.value))*this.state.rootSize).toFixed(4)));
133
- this.setState({ resultRem: e.target.value,pixelSize:result});
134
- }
135
- toggleFolder(name){
136
- let { viewFolder } = this.state;
137
- if(name == viewFolder)
138
- {
139
- name =''
140
- }
141
- this.setState({ viewFolder: name });
142
- }
143
- hashChange() {
144
- let ele = document.getElementById('componentIframe')
145
- if(ele){
146
- var src = document.getElementById('componentIframe').src;
147
- var url = src && src.split('#')[0];
148
- document.getElementById('componentIframe').src = url + location.hash;
149
- }
150
-
151
- this.setState({ selectedComponent: location.hash, infoTab:'component' });
152
- }
153
-
154
- toggleGroup(name) {
155
- let { viewGroup } = this.state;
156
- if(name == viewGroup)
157
- {
158
- name =''
159
- }
160
- this.setState({ viewGroup: name });
161
- }
162
-
163
- componentDidMount() {
164
- window.addEventListener('hashchange', this.hashChange);
165
- document.addEventListener('click', this.popupToggleDoc);
166
- fetch('/cli/version').then((res)=>{return res.json()}).then((response)=>{
167
- (response && response.version) ? this.setState({version : response.version }) : this.setState({version : "version get failure" })
168
- }).catch(function(err) {
169
- this.setState({changeset : "Error accured" })
170
- });
171
-
172
- }
173
-
174
- codeview()
175
- {
176
-
177
- let compName = location.hash != '' ? location.hash.substring(1) : null;
178
- let element = document.getElementById('codeView')
179
- if (Component[compName] && typeof CodeMirror !== 'undefined' && element ) {
180
- CodeMirror(element, {
181
- value:'',
182
- lineNumbers: false,
183
- styleActiveLine: false,
184
- matchBrackets: false,
185
- theme: 'blackboard',
186
- });
187
- }
188
-
189
- }
190
-
191
- componentWillUnmount() {
192
- document.removeEventListener('click', this.popupToggleDoc);
193
- }
194
- componentWillUnmount() {
195
- window.removeEventListener('hashchange', this.hashChange);
196
- }
197
- search(e) {
198
- this.setState({ search: e.target.value });
199
- }
200
- clear(e) {
201
- this.setState({ search: '' });
202
- }
203
- popupToggleDoc() {
204
- this.setState({ popUp: '' });
205
- }
206
- fullScreenSrcToggle(select) {
207
- this.setState({ fullScreenSrc: select });
208
- this.popupToggleDoc();
209
- }
210
- popupToggle(popup, e) {
211
- this.setState({ popUp: popup });
212
- e.stopPropagation && e.stopPropagation();
213
- e.nativeEvent.stopImmediatePropagation &&
214
- e.nativeEvent.stopImmediatePropagation();
215
- }
216
- removeClose(e) {
217
- e.stopPropagation && e.stopPropagation();
218
- e.nativeEvent.stopImmediatePropagation &&
219
- e.nativeEvent.stopImmediatePropagation();
220
- }
221
- filter(list, str) {
222
- list = list.sort((a, b) => {
223
- var at = a.toLowerCase();
224
- var bt = b.toLowerCase();
225
- return at > bt ? 1 : at < bt ? -1 : 0;
226
- });
227
- // return list.filter(
228
- // item => item.toUpperCase().indexOf(str.toUpperCase()) != -1
229
- // );
230
-
231
- return list.filter((item)=>{
232
- let value = item.split('__')[0]
233
-
234
- return value.toUpperCase().indexOf(str.toUpperCase()) != -1
235
- })
236
- }
237
-
238
- onTabinfo(name)
239
- {
240
- this.setState({infoTab:name})
241
- }
242
- reloadFrame()
243
- {
244
- let iframeEle = document.getElementById('componentIframe');
245
- iframeEle.contentDocument.location.reload()
246
- parent.document.getElementById("loadingText").style.display= 'block'
247
- }
248
-
249
- getFileDetails()
250
- {
251
- this.onTabinfo('changeset')
252
- let compName = location.hash != '' ? location.hash.substring(1) : null;
253
- let compNameSub= Component[compName].docs.filePath || ''
254
- let namee = compNameSub ? compNameSub.split('__')[0] : '';
255
- let propComName = namee.replace("/docs/","/")
256
- fetch('/author/get?componentName='+propComName+'.js').then((res)=>{return res.json()}).then((response)=>{
257
- (response && response.stdout) ? this.setState({changeset : response.stdout }) : this.setState({changeset : "response is empty" })
258
- }).catch(function(err) {
259
- this.setState({changeset : "Error accured" })
260
- });
261
- }
262
- iframeSize(type) {
263
-
264
- if (type == 'mobile') {
265
- this.setState({frameWidth:'350px'})
266
- this.setState({isMenuClose:false})
267
- } else if (type == 'tab') {
268
- this.setState({frameWidth:'798px'})
269
- this.setState({isMenuClose:false})
270
- } else if (type == 'desktop') {
271
- this.setState({frameWidth:'1010px'})
272
- this.setState({isMenuClose:false})
273
- } else if (type == 'full') {
274
- this.setState({frameWidth:'100%'})
275
- this.setState({isMenuClose:true})
276
- } else {
277
- this.setState({frameWidth:'100%'})
278
- this.setState({isMenuClose:false})
279
- }
280
- }
281
- menuOpen()
282
- {
283
- this.setState({isMenuClose:!this.state.isMenuClose})
284
- }
285
- onRtlView(e) {
286
- let iframeEle = document.getElementById('componentIframe');
287
- let ele = e.target.element || null
288
- if (!this.state.isRTL) {
289
- this.setState({isRTL:true})
290
- window.RTLmode = true;
291
- iframeEle.contentDocument.documentElement.setAttribute('dir', 'rtl');
292
- } else {
293
- this.setState({isRTL:false})
294
- iframeEle.contentDocument.documentElement.setAttribute('dir', 'ltr');
295
- window.RTLmode = false;
296
- }
297
- }
298
- onREMView(e) {
299
- let iframeEle = document.getElementById('componentIframe');
300
- let ele = e.target.element || null
301
- if (!this.state.isRem) {
302
- this.setState({isRem:true})
303
- iframeEle.contentDocument.documentElement.classList.add('isRem');
304
- } else {
305
- this.setState({isRem:false})
306
- iframeEle.contentDocument.documentElement.classList.remove('isRem');
307
- }
308
- }
309
-
310
- render() {
311
- const {
312
- Components,
313
- componentObj,
314
- search,
315
- selectedComponent,
316
- popUp,
317
- viewGroup,
318
- viewFolder,
319
- moreInform,
320
- infoTab,
321
- changeset,
322
- version,
323
- frameWidth,
324
- isMenuClose,
325
- isRTL,
326
- isRem,
327
- isRemOpen,
328
- rootSize,
329
- pixelSize,
330
- resultRem
331
-
332
-
333
- } = this.state;/* Components & componentObj no need in the state access in props itself*/
334
-
335
- let reactCliVersion =version.split(' ').filter(function(el){return el.toLowerCase().indexOf("fz-react-cli@") > -1;});
336
- let versionFz = reactCliVersion.length?reactCliVersion[0].substring(reactCliVersion[0].indexOf('@')+1,reactCliVersion[0].length) : '';
337
- let compName = location.hash != '' ? location.hash.substring(1) : null;
338
- let propComName = compName ? compName.split('__')[0] : '';
339
- let propsObj =
340
- (Components &&
341
- Components[propComName] &&
342
- Components[propComName].propTypes) ||
343
- {};
344
- let currentCompProps = Object.keys(propsObj) || [];
345
- let currentCompDefault =
346
- (Components[propComName] && Components[propComName].defaultProps) || {};
347
- return (
348
- <main className="dflex flexrow">
349
- {location.hash && <div className={"rtlChkDis offSelection "+(isRTL?'rtlChkSel':'')} onClick={this.onRtlView} id="rtl"> {isRTL?'Disable':'Enable'} RTL </div>}
350
- {location.hash && <div className={"rtlChkDis remCheckButton offSelection "+(isRem?'rtlChkSel':'')} onClick={this.onREMView} id="rem"> {isRem?'Disable':'Enable'} REM </div>}
351
-
352
- <div
353
- className="showToggleLeft"
354
- onClick={this.menuOpen}
355
- ><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGOSURBVGhD7ZrBKkVBHIdPSNKV5A3YKSvvYG/BE0jI3tbGxsYGdTeeQnY8gcLOTigba1KE73ewOGUxc8/8/2fUfPXVndOd23ydM92ae6sIeniIT/iZgW94hYsYxTH+9YFd+4pzGMQIvqAmzepCBgzhESpmRxdCmERNuKtH+bCBWpeCgighxpSQEmJECSkhRpSQkJBRvMFTHNcFQ0xDxvAW9f5ztIwxf7Rm8B6tY1z2iEeM22a3jnELEZYxriHCKsY9RFjERIfo4OECT+rR4KSOiQ5JScqYRsgULji7jM/YNqYR8vAz6NIz1KlILI2QfdTz762Ol7SID1zFQeh0j4gtVECbCBEdMox6tufrUTtSRYjokBTfIyJlhOgkJHWEcA+xiBCuIVYRwi3EMkK4hFhHCPMQjwhhGjKN72gdIczvyDYufb80xW2zW1NCSogRJaSEGFFC/n3IBGrCYz3Kh03Uug7qUSC/x0Z7uJaB63iNWpPuTDArqP9IaWJOXqJ+JYtCJym72M9A7QvdFSKq6gtlqbpowcg25wAAAABJRU5ErkJggg==" />
356
- </div>
357
-
358
- <div className={"menuBar "+(isMenuClose?"isMenuClose":"isMenuOpen")}>
359
- <div className="dflex flexcolumn">
360
- <div className="flexshrink logoPart"><img src="./css/desklogo.png" />
361
- </div>
362
- <div className="flexgrow flexbasis sliderContainer">
363
- <div className="dflex flexcolumn">
364
- <div className="flexshrink searchPart">
365
- <Search onChange={this.search} value={search} onClear={this.clear} />
366
- </div>
367
- <menu className="flexgrow flexbasis scrollY menuContainer" id="leftPanel">
368
- {componentObj &&
369
- Object.keys(componentObj).length &&
370
- Object.keys(componentObj).map(folderName => {
371
- let folderCompCount=0;
372
- let outcomp = Object.keys(componentObj[folderName]).map(
373
- grn => {
374
- let searchList = this.filter(
375
- componentObj[folderName][grn],
376
- search
377
- );
378
- if(searchList.length){
379
- folderCompCount=folderCompCount+1;
380
- }
381
- return searchList.length ? true : false;
382
- }
383
- );
384
- if (outcomp.indexOf(true) != -1) {
385
- return (
386
- <div>
387
- <div
388
- onClick={this.toggleFolder.bind(
389
- this,
390
- folderName
391
- )}
392
- className={'mainMenu dflex flexrow alignVertical offSelection'+' '+
393
- (viewFolder == folderName
394
- ? 'mainMenuActive'
395
- : '')
396
- }
397
- >
398
- <span className={'flexgrow mainMenutitle dotted'}>{folderName}</span>
399
- <span className={'flexshrink mainMenuCount'}>{folderCompCount}</span>
400
- <i className={'flexshrink mainMenuArrow'}><svg version="1.1" xmlns="http://www.w3.org/2000/svg"
401
- viewBox="0 0 792 792" ><g><g id="Rectangle_5_copy"><g><polygon 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
402
- 607.198,396 " className="arrowPath"/></g></g></g>
403
- </svg></i>
404
- </div>
405
- <div
406
- className={
407
- viewFolder == folderName || search
408
- ? 'folderOpen'
409
- : 'hide'
410
- }
411
- >
412
- {Object.keys(componentObj[folderName]).map(
413
- groupName => {
414
- return (
415
- <ComponentList
416
- type={groupName}
417
- components={this.filter(
418
- componentObj[folderName][groupName],
419
- search
420
- )}
421
- selectedComponent={selectedComponent}
422
- toggleGroup={this.toggleGroup}
423
- viewGroup={
424
- search ? groupName : viewGroup
425
- }
426
- />
427
- );
428
- }
429
- )}
430
- </div>
431
- </div>
432
- );
433
- } else {
434
- return null;
435
- }
436
- })}
437
- </menu>
438
- {versionFz!=''&&<div className="flexshrink versionPart ">
439
- <span>Version {versionFz}</span>
440
- </div>}
441
- <div className="flexshrink tools" onClick={this.toggleRemContainer}>
442
- <img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDE3NC4yNDggMTc0LjI0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTc0LjI0OCAxNzQuMjQ4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxnPgoJPHBhdGggZD0iTTE3My4xNDUsNzMuOTFjLTAuNDEzLTIuNzIyLTIuMjktNC45OTMtNC44ODEtNS45MTJsLTEzLjcyNy00Ljg4MWMtMC44MTItMi4zLTEuNzMzLTQuNTM2LTIuNzU0LTYuNjk5bDYuMjQ3LTEzLjE0NiAgIGMxLjE3OS0yLjQ3OSwwLjg5OS01LjQxMS0wLjcyOS03LjYyOGMtNS4yNjUtNy4xNjEtMTEuNTU2LTEzLjQ1Mi0xOC42OTgtMTguNjkzYy0yLjIxOS0xLjYyOS01LjE0MS0xLjkwNi03LjYyNS0wLjcyNCAgIGwtMTMuMTM4LDYuMjQyYy0yLjE2My0xLjAyMS00LjQwMi0xLjk0LTYuNzA0LTIuNzUybC00Ljg4My0xMy43MjljLTAuOTE5LTIuNTg2LTMuMTg0LTQuNDU4LTUuOS00Ljg3NiAgIGMtOS42NS0xLjQ4My0xNi43OTItMS40ODMtMjYuNDU3LDBjLTIuNzEzLDAuNDE4LTQuOTgxLDIuMjktNS45LDQuODc2bC00Ljg4MywxMy43MjljLTIuMzAyLDAuODEyLTQuNTQxLDEuNzMxLTYuNzAyLDIuNzUyICAgbC0xMy4xNDMtNi4yNDJjLTIuNDc5LTEuMTgxLTUuNDA2LTAuOTA0LTcuNjIzLDAuNzI0Yy03LjE0Miw1LjI0MS0xMy40MzMsMTEuNTMyLTE4LjY5OCwxOC42OTMgICBjLTEuNjI5LDIuMjE3LTEuOTA4LDUuMTQ4LTAuNzI5LDcuNjI4bDYuMjQ3LDEzLjE0NmMtMS4wMjEsMi4xNTktMS45NCw0LjQtMi43NTQsNi42OTlMNS45ODIsNjguMDAzICAgYy0yLjU4OSwwLjkxOS00LjQ2MywzLjE4OS00Ljg3OSw1LjkwN2MtMC43NDksNC45Mi0xLjA5OSw5LjExNS0xLjA5OSwxMy4yMTljMCw0LjA5OCwwLjM1LDguMjk5LDEuMDk5LDEzLjIxOSAgIGMwLjQxMywyLjcyMiwyLjI5LDQuOTkzLDQuODgxLDUuOTEybDEzLjcyNyw0Ljg4MWMwLjgxNCwyLjMwNCwxLjczNiw0LjU0MSwyLjc1NCw2LjcwNGwtNi4yNDcsMTMuMTQxICAgYy0xLjE3OSwyLjQ3OS0wLjg5OSw1LjQxMSwwLjcyNyw3LjYyM2M1LjI1OCw3LjE1NiwxMS41NDksMTMuNDQ3LDE4LjcsMTguNjk4YzIuMjE3LDEuNjI5LDUuMTQ0LDEuOTExLDcuNjI1LDAuNzI0bDEzLjEzOC02LjI0MiAgIGMyLjE2MywxLjAyMSw0LjQwMiwxLjk0LDYuNzA0LDIuNzUybDQuODgzLDEzLjcyOWMwLjkxOSwyLjU4NiwzLjE4NCw0LjQ1OCw1LjksNC44NzZjNC44MjgsMC43NDQsOS4xNTQsMS4xMDQsMTMuMjI4LDEuMTA0ICAgYzQuMDc0LDAsOC40MDEtMC4zNiwxMy4yMjgtMS4xMDRjMi43MTUtMC40MTgsNC45ODEtMi4yOSw1LjktNC44NzZsNC44ODMtMTMuNzI5YzIuMzAyLTAuODEyLDQuNTQxLTEuNzMxLDYuNzA0LTIuNzUyICAgbDEzLjEzOCw2LjI0MmMyLjQ4NCwxLjE4Niw1LjQxMSwwLjkwNCw3LjYyOC0wLjcyNGM3LjE1OS01LjI2LDEzLjQ1LTExLjU1MSwxOC42OTgtMTguNjk4YzEuNjI2LTIuMjEyLDEuOTA2LTUuMTQ0LDAuNzI3LTcuNjIzICAgbC02LjI0Ny0xMy4xNDFjMS4wMjEtMi4xNjMsMS45NDItNC40MDUsMi43NTQtNi43MDRsMTMuNzI3LTQuODgxYzIuNTkxLTAuOTE5LDQuNDY4LTMuMTg5LDQuODgxLTUuOTEyICAgYzAuNzQ5LTQuOTIsMS4wOTktOS4xMiwxLjA5OS0xMy4yMTlTMTczLjg5NCw3OC44MjksMTczLjE0NSw3My45MXogTTE1OC45NDksOTMuNzJsLTEyLjg3OCw0LjU4ICAgYy0yLjI1MSwwLjc5Ny0zLjk4MiwyLjYyNS00LjY2LDQuOTJjLTEuMTUsMy44ODktMi42NjQsNy41NjktNC41MDQsMTAuOTQzYy0xLjE0MiwyLjEtMS4yMTMsNC42MTktMC4xODcsNi43NzdsNS44NDEsMTIuMjg1ICAgYy0yLjgyMiwzLjM4OS01Ljk0Myw2LjUxNS05LjMzNyw5LjMzNGwtMTIuMjgzLTUuODM0Yy0yLjE2MS0xLjAzNi00LjY3Mi0wLjk1My02Ljc3NSwwLjE4NWMtMy4zNzksMS44MzgtNy4wNjEsMy4zNS0xMC45NTMsNC41MDIgICBjLTIuMjksMC42NzYtNC4xMTgsMi40MDYtNC45MTcsNC42NTdsLTQuNTgyLDEyLjg4M2MtNC42NzcsMC40NzYtOC41MDMsMC40NzYtMTMuMTgsMGwtNC41ODItMTIuODgzICAgYy0wLjgtMi4yNDYtMi42MjgtMy45ODItNC45MTctNC42NTdjLTMuODk0LTEuMTUyLTcuNTc5LTIuNjY0LTEwLjk1My00LjUwMmMtMi4xMDMtMS4xNDctNC42MTktMS4yMi02Ljc3NS0wLjE4NWwtMTIuMjgzLDUuODM5ICAgYy0zLjM5MS0yLjgyNS02LjUxMi01Ljk0Ni05LjMzNy05LjMzOWw1Ljg0MS0xMi4yODVjMS4wMjYtMi4xNTksMC45NTUtNC42NzctMC4xODctNi43NzdjLTEuODM1LTMuMzY0LTMuMzUtNy4wNDktNC41MDQtMTAuOTQ4ICAgYy0wLjY3OC0yLjI5LTIuNDExLTQuMTE4LTQuNjYtNC45MTVsLTEyLjg3OC00LjU4Yy0wLjI0My0yLjM0My0wLjM2LTQuNTAyLTAuMzYtNi41OTJzMC4xMTctNC4yNDQsMC4zNi02LjU4N2wxMi44ODEtNC41ODQgICBjMi4yNDgtMC43OTcsMy45NzktMi42MjUsNC42NTctNC45MTVjMS4xNTItMy44ODksMi42NjctNy41NzQsNC41MDQtMTAuOTUzYzEuMTQyLTIuMDk1LDEuMjEzLTQuNjE5LDAuMTg3LTYuNzcybC01Ljg0MS0xMi4yODUgICBjMi44MjctMy4zOTMsNS45NDgtNi41MTksOS4zMzctOS4zMzlsMTIuMjg4LDUuODM5YzIuMTUxLDEuMDM2LDQuNjc3LDAuOTUzLDYuNzc1LTAuMTg1YzMuMzcyLTEuODM4LDcuMDU0LTMuMzUsMTAuOTQ4LTQuNTAyICAgYzIuMjktMC42NzYsNC4xMTgtMi40MTEsNC45MTctNC42NTdsNC41ODItMTIuODgzYzQuNjMzLTAuNDgxLDguNDY2LTAuNDgxLDEzLjE4LDBsNC41ODIsMTIuODgzICAgYzAuOCwyLjI0NiwyLjYyOCwzLjk4Miw0LjkxNyw0LjY1N2MzLjg5NCwxLjE1Miw3LjU3OSwyLjY2NCwxMC45NTMsNC41MDJjMi4xMDMsMS4xNDcsNC42MTQsMS4yMiw2Ljc3NSwwLjE4NWwxMi4yODMtNS44MzkgICBjMy4zODksMi44Miw2LjUxLDUuOTQ2LDkuMzM3LDkuMzM5bC01Ljg0MSwxMi4yODVjLTEuMDI2LDIuMTU0LTAuOTU1LDQuNjc3LDAuMTg3LDYuNzcyYzEuODQzLDMuMzg5LDMuMzU3LDcuMDY5LDQuNTA0LDEwLjk0OCAgIGMwLjY3OCwyLjI5NSwyLjQwOSw0LjEyMyw0LjY2LDQuOTJsMTIuODc4LDQuNThjMC4yNDMsMi4zNDMsMC4zNiw0LjUwMiwwLjM2LDYuNTkyUzE1OS4xOTIsOTEuMzc3LDE1OC45NDksOTMuNzJ6IiBmaWxsPSIjRkZGRkZGIi8+Cgk8cGF0aCBkPSJNODcuMTI0LDUwLjgwMmMtMTkuMDYyLDAtMzQuNTcxLDE1LjUwOC0zNC41NzEsMzQuNTcxczE1LjUwOCwzNC41NzEsMzQuNTcxLDM0LjU3MXMzNC41NzEtMTUuNTA4LDM0LjU3MS0zNC41NzEgICBTMTA2LjE4Niw1MC44MDIsODcuMTI0LDUwLjgwMnogTTg3LjEyNCwxMDUuMDA5Yy0xMC44MjcsMC0xOS42MzYtOC44MDktMTkuNjM2LTE5LjYzNnM4LjgwOS0xOS42MzYsMTkuNjM2LTE5LjYzNiAgIHMxOS42MzYsOC44MDksMTkuNjM2LDE5LjYzNlM5Ny45NTEsMTA1LjAwOSw4Ny4xMjQsMTA1LjAwOXoiIGZpbGw9IiNGRkZGRkYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" /><span>REM Converter</span>
443
- </div>
444
- </div>
445
- <div className={"slider "+(isRemOpen?'sopen':'')}>
446
- <div className="tools sliderHeader">
447
- <img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDE3NC4yNDggMTc0LjI0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTc0LjI0OCAxNzQuMjQ4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxnPgoJPHBhdGggZD0iTTE3My4xNDUsNzMuOTFjLTAuNDEzLTIuNzIyLTIuMjktNC45OTMtNC44ODEtNS45MTJsLTEzLjcyNy00Ljg4MWMtMC44MTItMi4zLTEuNzMzLTQuNTM2LTIuNzU0LTYuNjk5bDYuMjQ3LTEzLjE0NiAgIGMxLjE3OS0yLjQ3OSwwLjg5OS01LjQxMS0wLjcyOS03LjYyOGMtNS4yNjUtNy4xNjEtMTEuNTU2LTEzLjQ1Mi0xOC42OTgtMTguNjkzYy0yLjIxOS0xLjYyOS01LjE0MS0xLjkwNi03LjYyNS0wLjcyNCAgIGwtMTMuMTM4LDYuMjQyYy0yLjE2My0xLjAyMS00LjQwMi0xLjk0LTYuNzA0LTIuNzUybC00Ljg4My0xMy43MjljLTAuOTE5LTIuNTg2LTMuMTg0LTQuNDU4LTUuOS00Ljg3NiAgIGMtOS42NS0xLjQ4My0xNi43OTItMS40ODMtMjYuNDU3LDBjLTIuNzEzLDAuNDE4LTQuOTgxLDIuMjktNS45LDQuODc2bC00Ljg4MywxMy43MjljLTIuMzAyLDAuODEyLTQuNTQxLDEuNzMxLTYuNzAyLDIuNzUyICAgbC0xMy4xNDMtNi4yNDJjLTIuNDc5LTEuMTgxLTUuNDA2LTAuOTA0LTcuNjIzLDAuNzI0Yy03LjE0Miw1LjI0MS0xMy40MzMsMTEuNTMyLTE4LjY5OCwxOC42OTMgICBjLTEuNjI5LDIuMjE3LTEuOTA4LDUuMTQ4LTAuNzI5LDcuNjI4bDYuMjQ3LDEzLjE0NmMtMS4wMjEsMi4xNTktMS45NCw0LjQtMi43NTQsNi42OTlMNS45ODIsNjguMDAzICAgYy0yLjU4OSwwLjkxOS00LjQ2MywzLjE4OS00Ljg3OSw1LjkwN2MtMC43NDksNC45Mi0xLjA5OSw5LjExNS0xLjA5OSwxMy4yMTljMCw0LjA5OCwwLjM1LDguMjk5LDEuMDk5LDEzLjIxOSAgIGMwLjQxMywyLjcyMiwyLjI5LDQuOTkzLDQuODgxLDUuOTEybDEzLjcyNyw0Ljg4MWMwLjgxNCwyLjMwNCwxLjczNiw0LjU0MSwyLjc1NCw2LjcwNGwtNi4yNDcsMTMuMTQxICAgYy0xLjE3OSwyLjQ3OS0wLjg5OSw1LjQxMSwwLjcyNyw3LjYyM2M1LjI1OCw3LjE1NiwxMS41NDksMTMuNDQ3LDE4LjcsMTguNjk4YzIuMjE3LDEuNjI5LDUuMTQ0LDEuOTExLDcuNjI1LDAuNzI0bDEzLjEzOC02LjI0MiAgIGMyLjE2MywxLjAyMSw0LjQwMiwxLjk0LDYuNzA0LDIuNzUybDQuODgzLDEzLjcyOWMwLjkxOSwyLjU4NiwzLjE4NCw0LjQ1OCw1LjksNC44NzZjNC44MjgsMC43NDQsOS4xNTQsMS4xMDQsMTMuMjI4LDEuMTA0ICAgYzQuMDc0LDAsOC40MDEtMC4zNiwxMy4yMjgtMS4xMDRjMi43MTUtMC40MTgsNC45ODEtMi4yOSw1LjktNC44NzZsNC44ODMtMTMuNzI5YzIuMzAyLTAuODEyLDQuNTQxLTEuNzMxLDYuNzA0LTIuNzUyICAgbDEzLjEzOCw2LjI0MmMyLjQ4NCwxLjE4Niw1LjQxMSwwLjkwNCw3LjYyOC0wLjcyNGM3LjE1OS01LjI2LDEzLjQ1LTExLjU1MSwxOC42OTgtMTguNjk4YzEuNjI2LTIuMjEyLDEuOTA2LTUuMTQ0LDAuNzI3LTcuNjIzICAgbC02LjI0Ny0xMy4xNDFjMS4wMjEtMi4xNjMsMS45NDItNC40MDUsMi43NTQtNi43MDRsMTMuNzI3LTQuODgxYzIuNTkxLTAuOTE5LDQuNDY4LTMuMTg5LDQuODgxLTUuOTEyICAgYzAuNzQ5LTQuOTIsMS4wOTktOS4xMiwxLjA5OS0xMy4yMTlTMTczLjg5NCw3OC44MjksMTczLjE0NSw3My45MXogTTE1OC45NDksOTMuNzJsLTEyLjg3OCw0LjU4ICAgYy0yLjI1MSwwLjc5Ny0zLjk4MiwyLjYyNS00LjY2LDQuOTJjLTEuMTUsMy44ODktMi42NjQsNy41NjktNC41MDQsMTAuOTQzYy0xLjE0MiwyLjEtMS4yMTMsNC42MTktMC4xODcsNi43NzdsNS44NDEsMTIuMjg1ICAgYy0yLjgyMiwzLjM4OS01Ljk0Myw2LjUxNS05LjMzNyw5LjMzNGwtMTIuMjgzLTUuODM0Yy0yLjE2MS0xLjAzNi00LjY3Mi0wLjk1My02Ljc3NSwwLjE4NWMtMy4zNzksMS44MzgtNy4wNjEsMy4zNS0xMC45NTMsNC41MDIgICBjLTIuMjksMC42NzYtNC4xMTgsMi40MDYtNC45MTcsNC42NTdsLTQuNTgyLDEyLjg4M2MtNC42NzcsMC40NzYtOC41MDMsMC40NzYtMTMuMTgsMGwtNC41ODItMTIuODgzICAgYy0wLjgtMi4yNDYtMi42MjgtMy45ODItNC45MTctNC42NTdjLTMuODk0LTEuMTUyLTcuNTc5LTIuNjY0LTEwLjk1My00LjUwMmMtMi4xMDMtMS4xNDctNC42MTktMS4yMi02Ljc3NS0wLjE4NWwtMTIuMjgzLDUuODM5ICAgYy0zLjM5MS0yLjgyNS02LjUxMi01Ljk0Ni05LjMzNy05LjMzOWw1Ljg0MS0xMi4yODVjMS4wMjYtMi4xNTksMC45NTUtNC42NzctMC4xODctNi43NzdjLTEuODM1LTMuMzY0LTMuMzUtNy4wNDktNC41MDQtMTAuOTQ4ICAgYy0wLjY3OC0yLjI5LTIuNDExLTQuMTE4LTQuNjYtNC45MTVsLTEyLjg3OC00LjU4Yy0wLjI0My0yLjM0My0wLjM2LTQuNTAyLTAuMzYtNi41OTJzMC4xMTctNC4yNDQsMC4zNi02LjU4N2wxMi44ODEtNC41ODQgICBjMi4yNDgtMC43OTcsMy45NzktMi42MjUsNC42NTctNC45MTVjMS4xNTItMy44ODksMi42NjctNy41NzQsNC41MDQtMTAuOTUzYzEuMTQyLTIuMDk1LDEuMjEzLTQuNjE5LDAuMTg3LTYuNzcybC01Ljg0MS0xMi4yODUgICBjMi44MjctMy4zOTMsNS45NDgtNi41MTksOS4zMzctOS4zMzlsMTIuMjg4LDUuODM5YzIuMTUxLDEuMDM2LDQuNjc3LDAuOTUzLDYuNzc1LTAuMTg1YzMuMzcyLTEuODM4LDcuMDU0LTMuMzUsMTAuOTQ4LTQuNTAyICAgYzIuMjktMC42NzYsNC4xMTgtMi40MTEsNC45MTctNC42NTdsNC41ODItMTIuODgzYzQuNjMzLTAuNDgxLDguNDY2LTAuNDgxLDEzLjE4LDBsNC41ODIsMTIuODgzICAgYzAuOCwyLjI0NiwyLjYyOCwzLjk4Miw0LjkxNyw0LjY1N2MzLjg5NCwxLjE1Miw3LjU3OSwyLjY2NCwxMC45NTMsNC41MDJjMi4xMDMsMS4xNDcsNC42MTQsMS4yMiw2Ljc3NSwwLjE4NWwxMi4yODMtNS44MzkgICBjMy4zODksMi44Miw2LjUxLDUuOTQ2LDkuMzM3LDkuMzM5bC01Ljg0MSwxMi4yODVjLTEuMDI2LDIuMTU0LTAuOTU1LDQuNjc3LDAuMTg3LDYuNzcyYzEuODQzLDMuMzg5LDMuMzU3LDcuMDY5LDQuNTA0LDEwLjk0OCAgIGMwLjY3OCwyLjI5NSwyLjQwOSw0LjEyMyw0LjY2LDQuOTJsMTIuODc4LDQuNThjMC4yNDMsMi4zNDMsMC4zNiw0LjUwMiwwLjM2LDYuNTkyUzE1OS4xOTIsOTEuMzc3LDE1OC45NDksOTMuNzJ6IiBmaWxsPSIjRkZGRkZGIi8+Cgk8cGF0aCBkPSJNODcuMTI0LDUwLjgwMmMtMTkuMDYyLDAtMzQuNTcxLDE1LjUwOC0zNC41NzEsMzQuNTcxczE1LjUwOCwzNC41NzEsMzQuNTcxLDM0LjU3MXMzNC41NzEtMTUuNTA4LDM0LjU3MS0zNC41NzEgICBTMTA2LjE4Niw1MC44MDIsODcuMTI0LDUwLjgwMnogTTg3LjEyNCwxMDUuMDA5Yy0xMC44MjcsMC0xOS42MzYtOC44MDktMTkuNjM2LTE5LjYzNnM4LjgwOS0xOS42MzYsMTkuNjM2LTE5LjYzNiAgIHMxOS42MzYsOC44MDksMTkuNjM2LDE5LjYzNlM5Ny45NTEsMTA1LjAwOSw4Ny4xMjQsMTA1LjAwOXoiIGZpbGw9IiNGRkZGRkYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" />
448
- <span className="sliderTitle">REM Converter</span>
449
- <span className="searchClose" onClick={this.toggleRemContainer}>
450
- <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==" />
451
- </span>
452
-
453
- </div>
454
- <div className="sliderFormContainer">
455
- <div className="sliderInputContainer">
456
- <label className="sliderInputTitle">Base font-size (in px)</label>
457
- <input type="number" className="sliderInput" min="1" placeholder="Base font-size (in px)" value={rootSize} onChange={this.onChangeBase} / >
458
- </div>
459
- <div className="sliderInputContainer">
460
- <label className="sliderInputTitle">PX size to convert</label>
461
- <input type="number" className="sliderInput" placeholder="PX size to convert" value={pixelSize} onChange={this.onChangePixel} / >
462
- </div>
463
- <div className="sliderInputContainer">
464
- <label className="sliderInputTitle">Result</label>
465
- <div className="sliderResult">
466
- <input type="text" className="sliderInput" placeholder="Result" value={resultRem} onChange={this.onChangeRem} / >
467
- <span id="remoutput" className="copyTxtHiden">{resultRem}</span>
468
- <span className="copyResult" onClick={selectText.bind(this, 'remoutput')}><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==" /></span>
469
- </div>
470
- </div>
471
-
472
-
473
-
474
-
475
-
476
-
477
-
478
- </div>
479
-
480
- </div>
481
-
482
- </div>
483
- </div>
484
- </div>
485
-
486
-
487
-
488
-
489
- <div className="flexgrow flexbasis">
490
- <container id="container" className="dflex flexcolumn flexbasis">
491
-
492
- {compName ?
493
- <div className="flexshrink cheader">
494
-
495
-
496
-
497
- <div className="dflex flexrow flexbasis alignVertical">
498
- <div className="flexshrink"><h1 className="cheadertitle">{compName && compName.split('__')[0]}</h1></div>
499
- <div className='flexgrow flexbasis infoTabs dflex'>
500
- <span onClick={this.onTabinfo.bind(this,'component')} className={infoTab == 'component' ? 'dotted infoactive' : 'dotted'}>Component view</span>
501
- <span onClick={this.onTabinfo.bind(this,'proptypes')} className={infoTab == 'proptypes' ? 'dotted infoactive' : 'dotted'}>PropTypes</span>
502
- <span onClick={this.onTabinfo.bind(this,'code')} className={infoTab == 'code' ? 'dotted infoactive' : 'dotted'}>Docs Code</span>
503
- { /* <span onClick={this.onTabinfo.bind(this,'src')} className={infoTab == 'src' ? 'dotted infoactive' : 'dotted'}>Source</span> */}
504
- <span onClick={this.onTabinfo.bind(this,'references')}className={infoTab=='references' ? 'dotted infoactive' : 'dotted'}>References</span>
505
- <span onClick={this.onTabinfo.bind(this,'visual')} className={infoTab == 'visual' ? 'dotted infoactive' : 'dotted'}>Visual Design</span>
506
- <span onClick={this.getFileDetails} className={infoTab == 'changeset' ? 'dotted infoactive' : 'dotted'}>Author</span>
507
- </div>
508
-
509
- <a className="newTab flexshrink" href={'/docs/component.html' + location.hash} target="_blank" >
510
- Open in New Tab
511
- <svg x="0px" y="0px" viewBox="0 0 26 26" style={{enableBackground:'new 0 0 26 26'}} xmlSpace="preserve">
512
- <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"/>
513
-
514
- <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"/>
515
- </svg>
516
- </a>
517
- </div>
518
- </div>
519
-
520
-
521
- :null}
522
-
523
-
524
-
525
-
526
- <div className="flexgrow flexbasis cfooter ">
527
- <div className="dflex flexcolumn flexbasis">
528
- <div className="flexgrow flexbasis scrollY ccontent">
529
- {infoTab == 'changeset' ?
530
-
531
- <pre className="authorview">{changeset ? changeset : 'loading....!!!'}</pre>
532
-
533
- :null}
534
-
535
- {infoTab == 'code' ?
536
-
537
- <CodeView compName={compName} src={Component[compName].docs.source}/>
538
-
539
- :null}
540
-
541
-
542
- {infoTab == 'src' ?
543
-
544
- <CodeView compName={compName+'src'} src={Component[propComName].source}/>
545
39
 
546
- : null}
547
- {infoTab == 'component' &&
548
- <section id="resize" style={{"width":frameWidth}} className={"dflex flexcolumn flexbasis iframeSection"}>
549
- <span className="loadingText" id='loadingText'><div className="lds-ripple"><div></div><div></div></div></span>
550
- <iframe
551
- id="componentIframe"
552
- className="iframe"
553
- src={'/docs/component.html' + location.hash}
554
-
555
- />
556
-
557
- <div className={"responsive offSelection "}>
558
- <span className={"responsiveMenu"} onClick={this.reloadFrame}>
559
- <svg
560
- xmlns="http://www.w3.org/2000/svg"
561
- xmlnsXlink="http://www.w3.org/1999/xlink"
562
- version="1.1" id="Capa_1"
563
-
564
- viewBox="0 0 28.265 28.265"
565
-
566
- className={"relaodIfr"}>
567
- <g>
568
- <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"/>
569
- </g>
570
- </svg>
571
- </span>
572
- <span className={"responsiveMenu"} onClick={()=>this.iframeSize('mobile')}>
573
- <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
574
- viewBox="0 0 503.604 503.604" >
575
- <g>
576
- <g>
577
- <path d="M337.324,0H167.192c-28.924,0-53.5,23.584-53.5,52.5v398.664c0,28.916,24.056,52.44,52.98,52.44l170.412-0.184
578
- c28.92,0,52.58-23.528,52.58-52.448l0.248-398.5C389.908,23.452,366.364,0,337.324,0z M227.68,31.476h49.36
579
- c4.336,0,7.868,3.52,7.868,7.868c0,4.348-3.532,7.868-7.868,7.868h-49.36c-4.348,0-7.868-3.52-7.868-7.868
580
- C219.812,34.996,223.332,31.476,227.68,31.476z M198.02,33.98c2.916-2.912,8.224-2.952,11.136,0c1.46,1.456,2.324,3.5,2.324,5.588
581
- c0,2.048-0.864,4.088-2.324,5.548c-1.452,1.46-3.504,2.32-5.548,2.32c-2.084,0-4.088-0.86-5.588-2.32
582
- c-1.452-1.456-2.28-3.5-2.28-5.548C195.736,37.48,196.568,35.436,198.02,33.98z M250.772,488.008
583
- c-12.984,0-23.544-10.568-23.544-23.548c0-12.984,10.56-23.548,23.544-23.548s23.544,10.564,23.544,23.548
584
- C274.316,477.44,263.752,488.008,250.772,488.008z M365.488,424.908H141.232V74.756h224.256V424.908z"/>
585
- </g>
586
- </g>
587
- </svg>
588
-
589
-
590
-
591
- </span>
592
- <span className={"responsiveMenu"} onClick={()=>this.iframeSize('tab')}>
593
- <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
594
- viewBox="0 0 503.592 503.592">
595
- <g>
596
- <g>
597
- <path d="M428.636,27.852C428.636,12.508,416.144,0,400.792,0H102.66C87.312,0,74.828,12.504,74.828,27.852l0.132,447.892
598
- c0,15.352,12.488,27.848,27.832,27.848h298.136c15.352,0,27.836-12.496,27.836-27.848L428.636,27.852z M232.36,31.472h38.884
599
- c4.36,0,7.868,3.52,7.868,7.868c0,4.344-3.508,7.872-7.868,7.872H232.36c-4.348,0-7.868-3.524-7.868-7.872
600
- S228.012,31.472,232.36,31.472z M202.964,33.912c2.916-2.948,8.184-2.948,11.136,0c1.452,1.46,2.324,3.504,2.324,5.552
601
- c0,2.08-0.872,4.084-2.324,5.544c-1.46,1.496-3.504,2.324-5.584,2.324c-2.084,0-4.096-0.828-5.552-2.324
602
- c-1.452-1.456-2.316-3.464-2.316-5.544C200.648,37.416,201.516,35.372,202.964,33.912z M250.216,488.128
603
- c-12.98,0-23.544-10.564-23.544-23.544c0-12.984,10.568-23.548,23.544-23.548c12.988,0,23.544,10.564,23.544,23.548
604
- S263.208,488.128,250.216,488.128z M94.424,424.904V74.752h314.744v350.152H94.424z"/>
605
- </g>
606
- </g>
607
- </svg>
608
- </span>
609
- <span className={"responsiveMenu"} onClick={()=>this.iframeSize('desktop')}>
610
-
611
- <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
612
- viewBox="0 0 503.588 503.588" >
613
- <g>
614
- <g>
615
- <path d="M499.312,375.728h-23.256v-260.76c0-17.776-14.72-30.384-32.492-30.384H59.556c-17.784,0-32.016,12.604-32.016,30.384
616
- v260.756H3.8c-2.172,0-3.8-0.204-3.8,1.968v3.664c0,19.724,15.904,37.648,35.62,37.648h431.86
617
- c19.728,0,36.108-17.924,36.108-37.648v-3.664C503.592,375.524,501.484,375.728,499.312,375.728z M246.008,96.676
618
- c2.912-2.952,8.18-2.952,11.092,0c1.492,1.452,2.32,3.5,2.32,5.548c0,2.084-0.828,4.092-2.32,5.584
619
- c-1.46,1.456-3.464,2.28-5.544,2.28s-4.092-0.824-5.548-2.28c-1.5-1.496-2.324-3.504-2.324-5.584
620
- C243.688,100.136,244.512,98.128,246.008,96.676z M452.444,359.988h-401.3V119.996h401.3V359.988z"/>
621
- </g>
622
- </g>
623
-
624
- </svg>
625
-
626
-
627
-
628
-
629
- </span>
630
-
631
- <span className={"responsiveMenu"} onClick={()=>this.iframeSize('default')}>
632
- <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
633
- viewBox="0 0 503.588 503.588" >
634
- <g>
635
- <g>
636
- <path d="M492.128,76.714H11.676C5.168,76.714,0,80.238,0,86.75v27.276V354.25v27.512c0,6.512,5.168,13.632,11.676,13.632h196.84
637
- v15.74H59.132c-4.348,0-7.868,3.524-7.868,7.868c0,4.344,3.52,7.872,7.868,7.872h387.404c4.344,0,7.868-3.528,7.868-7.872
638
- s-3.524-7.868-7.868-7.868H295.072v-15.74h197.056c6.508,0,11.46-7.12,11.46-13.632V354.25V114.03V86.754
639
- C503.588,80.238,498.636,76.714,492.128,76.714z M257.448,379.27c-1.452,1.456-3.5,2.288-5.54,2.288
640
- c-2.084,0-4.096-0.832-5.552-2.288c-1.496-1.496-2.32-3.5-2.32-5.58c0-2.092,0.824-4.092,2.28-5.556
641
- c2.952-2.952,8.224-2.952,11.132,0c1.46,1.46,2.328,3.46,2.328,5.556C259.776,375.774,258.908,377.774,257.448,379.27z
642
- M15.732,356.05V116.058h472.112V356.05H15.732z"/>
643
- </g>
644
- </g>
645
-
646
- </svg>
647
- </span>
648
- <span className={"responsiveMenu"} onClick={()=>this.iframeSize('full')}>
649
-
650
- <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 473.083 473.083" >
651
- <g>
652
- <path style={{fill: '#020202'}} d="M330.406,213.107c-1.407-0.588-3.041-0.263-4.115,0.821l-15.018,15.024l-32.595-32.588
653
- c-6.189-6.191-16.216-6.191-22.407,0c-6.189,6.189-6.189,16.216,0,22.405l32.597,32.589L273.833,266.4
654
- c-1.082,1.083-1.4,2.708-0.819,4.116c0.588,1.407,1.965,2.336,3.497,2.336h52.456c1.006,0,1.965-0.403,2.678-1.114
655
- c0.704-0.695,1.106-1.672,1.106-2.662l-0.008-52.472C332.744,215.072,331.823,213.695,330.406,213.107z" />
656
- <path style={{fill: '#020202'}} d="M194.793,196.365l-32.595,32.588l-15.017-15.024c-1.076-1.084-2.708-1.409-4.117-0.821
657
- c-1.416,0.588-2.336,1.965-2.336,3.497l-0.008,52.472c0,0.99,0.402,1.967,1.107,2.662c0.711,0.711,1.67,1.114,2.676,1.114h52.458
658
- c1.53,0,2.909-0.929,3.497-2.336c0.58-1.408,0.263-3.033-0.821-4.116l-15.033-15.041L217.2,218.77
659
- c6.189-6.189,6.189-16.216,0-22.405C211.01,190.174,200.983,190.174,194.793,196.365z" />
660
- <path style={{fill: '#020202'}} d="M267.126,153.995c4.053,0,8.108-1.546,11.203-4.641l32.595-32.589l15.019,15.026
661
- c1.076,1.082,2.708,1.406,4.116,0.818c1.415-0.588,2.336-1.964,2.336-3.497l0.008-52.472c0-0.99-0.402-1.965-1.106-2.661
662
- c-0.711-0.712-1.672-1.114-2.678-1.114h-52.456c-1.532,0-2.909,0.929-3.497,2.337c-0.58,1.409-0.263,3.033,0.821,4.117
663
- l15.032,15.04l-32.595,32.587c-6.191,6.189-6.191,16.217,0,22.407C259.019,152.449,263.072,153.995,267.126,153.995z" />
664
- <path style={{fill: '#020202'}} d="M142.715,132.611c1.409,0.588,3.041,0.264,4.117-0.818l15.017-15.026l32.597,32.589
665
- c3.095,3.095,7.148,4.641,11.203,4.641c4.055,0,8.108-1.546,11.203-4.641c6.19-6.19,6.19-16.218,0-22.407l-32.596-32.587
666
- l15.033-15.04c1.084-1.084,1.401-2.708,0.821-4.117c-0.588-1.408-1.965-2.337-3.497-2.337h-52.458
667
- c-1.004,0-1.965,0.402-2.676,1.114c-0.704,0.696-1.106,1.671-1.106,2.661l0.008,52.472
668
- C140.379,130.647,141.3,132.023,142.715,132.611z" />
669
- <path style={{fill: '#020202'}} d="M434.431,13.91H38.654C17.338,13.91,0,31.256,0,52.566V321.16c0,21.309,17.338,38.654,38.654,38.654
670
- h132.682v51.822h-20.937c-13.13,0-23.768,10.646-23.768,23.769c0,13.121,10.638,23.768,23.768,23.768h172.317
671
- c13.13,0,23.768-10.646,23.768-23.768c0-13.122-10.638-23.769-23.768-23.769H301.78v-51.822h132.65
672
- c21.315,0,38.653-17.346,38.653-38.654V52.566C473.083,31.256,455.746,13.91,434.431,13.91z M377.974,336.047
673
- c-5.958,0-10.77-4.813-10.77-10.754c0-5.958,4.813-10.771,10.77-10.771c5.942,0,10.754,4.813,10.754,10.771
674
- C388.728,331.235,383.916,336.047,377.974,336.047z M425.51,338.631c-7.381,0-13.354-5.973-13.354-13.338
675
- c0-7.381,5.974-13.355,13.354-13.355c7.365,0,13.338,5.974,13.338,13.355C438.848,332.658,432.875,338.631,425.51,338.631z
676
- M441.393,298.46H31.69V52.566c0-3.838,3.126-6.964,6.963-6.964h395.777c3.838,0,6.962,3.126,6.962,6.964V298.46z" />
677
- </g>
678
-
679
- </svg>
680
-
681
- </span>
682
-
683
- </div>
684
- </section>
685
- }
686
-
687
-
688
- {infoTab == 'proptypes' ?
689
-
690
- <div className="propsTable">
691
- <div className="tableHeader">
692
- <span className="brR">PropsName</span>
693
- <span className="brR">Type</span>
694
- <span className="brR">isRequired</span>
695
- <span className="brR ">Default Props</span>
696
- </div>
697
- {currentCompProps.map((value, i) => {
698
- return (
699
- <div
700
- className={
701
- currentCompProps.length - 1 == i
702
- ? 'tableHeaderNB'
703
- : 'tableHeader'
704
- }
705
- >
706
- <span>
707
- <div>{value}</div>
708
- </span>
709
- <span>
710
- <div>
711
- {propsObj[value] && propsObj[value].hookType}
712
- </div>
713
- </span>
714
- <span>
715
- <div>
716
- {propsObj[value] && propsObj[value].isRequired
717
- ? '-'
718
- : 'true'}
719
- </div>
720
- </span>
721
- <span className="defaultProps">
722
- <div className="bn">
723
- {JSON.stringify(currentCompDefault[value])}
724
- </div>
725
- </span>
726
- </div>
727
- );
728
- })}
729
- </div>
730
- : null }
731
-
732
-
733
-
734
-
735
-
736
- {infoTab == 'references' ?
737
-
738
- <div className="referContainer">
739
- <div className='refsBy'>ReferencedBy :</div>
740
- <ul>
741
-
742
- {compName
743
- ? compName.indexOf('__') > -1
744
- ? mdata[
745
- compName.substring(0, compName.indexOf('_'))
746
- ] &&
747
- mdata[
748
- compName.substring(0, compName.indexOf('_'))
749
- ].referencedby.map((val, i) => {
750
- return (
751
- <li key={i} className='refsLin'>
752
- <a className="link" href={'#' + val}>
753
- {val}
754
- </a>
755
- </li>
756
- );
757
- })
758
- : mdata[compName].referencedby.map((val, i) => {
759
- return (
760
- <li key={i} className='refsLin'>
761
- <a className="link" href={'#' + val}>
762
- {val}
763
- </a>
764
- </li>
765
- );
766
- })
767
- : null}
768
- </ul>
769
-
770
-
771
-
772
- <div className='refsBy'>References : </div>
773
- <ul>
774
- {compName
775
- ? compName.indexOf('__') > -1
776
- ? mdata[
777
- compName.substring(0, compName.indexOf('_'))
778
- ] &&
779
- mdata[
780
- compName.substring(0, compName.indexOf('_'))
781
- ].references.map((val, i) => {
782
- return (
783
- <li key={i} className='refsLin'>
784
- <a className="link" href={'#' + val}>
785
- {val}
786
- </a>
787
- </li>
788
- );
789
- })
790
- : mdata[compName].references.map((val, i) => {
791
- return (
792
- <li key={i} className='refsLin'>
793
- <a className="link" href={'#' + val}>
794
- {val}
795
- </a>
796
- </li>
797
- );
798
- })
799
- : null}
800
- </ul>
801
- </div>
802
- : null
803
- }
804
- {infoTab == 'visual' ?
805
- <div>
806
-
807
- {Component[propComName] &&
808
- Component[propComName].docs &&
809
- Component[propComName].docs.images &&
810
- Component[propComName].docs.images.map(image => {
811
- return (
812
- <div className="psdContainer">
813
- <div className="imageContainer">
814
- <img className="psdImage" src={image.view} />
815
- </div>
816
-
817
- <div>
818
- <a className="psdLink" href={image.psd} target="_blank" download>
819
- Download PSD
820
- </a>
821
- </div>
822
- <div>
823
- <a className="psdLink" href={image.view} target="_blank" download>
824
- Download Image
825
- </a>
826
- </div>
827
- </div>
828
- );
829
- })}
830
-
831
- </div> : null }
832
-
833
- </div>
834
-
835
- </div>
836
- </div>
837
-
838
-
839
- </container>
840
- </div>
841
-
842
- </main>
843
- );
844
- }
845
- }
846
- class Search extends React.Component {
847
- render() {
848
- return (
849
- <div className="searchContainer">
850
- <input
851
- type="text"
852
- onChange={this.props.onChange}
853
- placeholder="Search"
854
- className="inputSearch" value={this.props.value}
855
- />
856
- {this.props.value.length>=1&&
857
- <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>}
858
- </div>
859
- );
860
- }
861
- }
862
- class ComponentList extends React.Component {
863
- constructor(props) {
864
- super(props);
865
- this.state = {
866
- toggle: false
867
- };
868
- }
869
-
870
- render() {
871
- const { components, type, toggleGroup,viewGroup } = this.props;
872
- let classNameTab = type == viewGroup ? " selected " : '';
873
- return (
874
- <div data-title={type}>
875
- {components.length>0&& <div className={"listItem dflex flexrow flexbasis alignVertical offSelection "+ classNameTab} onClick={toggleGroup.bind(this,type)}>
876
- <i className={"flexshrink listIcon"}> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60" >
877
- <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"/>
878
- </svg>
879
- </i>
880
- <span className="dotted flexgrow flexbasis listTitle">{type}</span>
881
- {components.length>0&&<i className={"flexshrink listCount"}>{components.length-(components.filter(function(el) {return el.toLowerCase().indexOf('__') > -1}).length)}</i>}
882
- </div>
883
-
884
- }
885
-
886
- <div className={ viewGroup == type ? 'activeComponent' : 'hide'}>
887
- {components.map((component, i) => {
888
- let docsComp = component.search('__');
889
- return (
890
- <div className={((docsComp == -1) ? "componentMain" : "componentDocs")} key={'component' + i} >
891
-
892
- <a
893
- href={ docsComp == -1 && type != 'Global'&& type != 'Page' ? 'javascript:void(0);' : '#' + component}
894
- className={"dflex flexrow flexbasis alignVertical offSelection "+ (this.props.selectedComponent == '#' + component ? 'active' : '') } >
895
-
896
-
897
- <i className={"listIcon"}> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 512 512" >
898
- <g>
899
- <g>
900
- <g>
901
- <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"/>
902
- <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"/>
903
- <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"/>
904
- <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"/>
905
- <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"/>
40
+ <div id="react"></div>
41
+ <div class="iframeCentering">
42
+ <span class="posAb">Zoho Desk - React Components</span>
43
+ <iframe src="about:blank" id="ifm"></iframe>
44
+ </div>
45
+
46
+ <script src="/docs/js/babel.min.js"></script>
47
+ <script type="text/babel">
48
+ window.loadDOC = function(Component, mdata) {
49
+ window.RTLmode = false;
50
+ var ReactDOM = Component.ReactDOM;
51
+ window.React = Component.React;
52
+ window.ReactDOM = Component.ReactDOM;
53
+ var React= Component.React;
54
+ class Doc extends React.Component {
55
+ constructor(props) {
56
+ super(props);
57
+ let folderNameDefault='';
58
+ let groupNameDefault='';
59
+ (location.hash && props.componentObj )? Object.keys(props.componentObj).map((flName)=>{
60
+ let fname=props.componentObj[flName]
61
+ Object.keys(fname).map((grName)=>{
62
+ if((fname[grName].indexOf(location.hash.substring(1)) > -1)){
63
+ folderNameDefault=flName;
64
+ groupNameDefault=grName;
65
+ }
66
+ })
67
+ }):null
68
+ if(folderNameDefault== '' && groupNameDefault==''){
69
+ folderNameDefault='Global'
70
+ groupNameDefault='General'
71
+ }
72
+ this.state = {
73
+ componentObj:props.componentObj,
74
+ duplicates:props.duplicates,
75
+ search: '',
76
+ selectedComponent: location.hash,
77
+ Components: Component,
78
+ //popUp: '',
79
+ fullScreenSrc: '',
80
+ viewGroup:groupNameDefault,
81
+ viewFolder:folderNameDefault,
82
+ moreInform:false,
83
+ infoTab:'component',
84
+ changeset:null,
85
+ version:'',
86
+ frameWidth:'100%',
87
+ isMenuClose:false,
88
+ isRTL:false,
89
+ isRem:true,
90
+ isRemOpen:false,
91
+ rootSize:16,
92
+ pixelSize:16,
93
+ resultRem:'1rem',
94
+ responsiveMenu:false,
95
+ device:'LAPTOP_M',
96
+ compList:'Unused',
97
+ windowSize:{height:0,width:0},
98
+ isEditMode:false
99
+
100
+ };
101
+ this.search = this.search.bind(this);
102
+ this.clear = this.clear.bind(this);
103
+ this.toggleRemContainer = this.toggleRemContainer.bind(this);
104
+ this.hashChange = this.hashChange.bind(this);
105
+ //this.popupToggle = this.popupToggle.bind(this);
106
+ //this.popupToggleDoc = this.popupToggleDoc.bind(this);
107
+ this.removeClose = this.removeClose.bind(this);
108
+ //this.fullScreenSrcToggle = this.fullScreenSrcToggle.bind(this);
109
+ this.toggleFolder = this.toggleFolder.bind(this);
110
+ this.toggleGroup = this.toggleGroup.bind(this);
111
+ this.onTabinfo = this.onTabinfo.bind(this);
112
+ this.codeview = this.codeview.bind(this);
113
+ this.reloadFrame = this.reloadFrame.bind(this);
114
+ this.getFileDetails = this.getFileDetails.bind(this);
115
+ this.iframeSize = this.iframeSize.bind(this);
116
+ this.menuOpen = this.menuOpen.bind(this);
117
+ this.onRtlView=this.onRtlView.bind(this);
118
+ this.onREMView=this.onREMView.bind(this);
119
+ this.toggleEditMode=this.toggleEditMode.bind(this);
120
+ this.calculatePxToRem=this.calculatePxToRem.bind(this);
121
+ this.calculateRemToPx=this.calculateRemToPx.bind(this);
122
+ this.onChangeRem=this.onChangeRem.bind(this);
123
+ this.onChangePixel=this.onChangePixel.bind(this);
124
+ this.onChangeBase=this.onChangeBase.bind(this);
125
+ this.responseMenu=this.responseMenu.bind(this);
126
+ this.getWindow=this.getWindow.bind(this);
127
+ this.fullView=this.fullView.bind(this);
128
+ this.handleURL=this.handleURL.bind(this);
129
+ this.compList=this.compList.bind(this);
130
+ this.unusedList=this.unusedList.bind(this);
131
+ }
132
+
133
+ fullView(){
134
+ this.setState({isMenuClose:!this.state.isMenuClose})
135
+ }
136
+ toggleEditMode(){
137
+ var iframe=document.getElementById('componentIframe');
138
+ if(iframe){
139
+ var currentMode=iframe.contentDocument.documentElement.getAttribute('contenteditable');
140
+ if(currentMode=="true")
141
+ {
142
+ iframe.contentDocument.documentElement.setAttribute('contenteditable',"false");
143
+ this.setState({isEditMode:false});
144
+ }
145
+ else {
146
+ iframe.contentDocument.documentElement.setAttribute('contenteditable',"true");
147
+ this.setState({isEditMode:true});
148
+ }}
149
+
150
+ }
151
+
152
+ compList(e){
153
+ if(e == this.state.compList){
154
+ }
155
+ else if(e !== this.state.compList){
156
+ this.setState({compList:e})
157
+ }
158
+ else{
159
+ this.setState({compList:''})
160
+ }
161
+ }
162
+
163
+ getWindow(){
164
+ var iframe=document.getElementById('componentIframe')
165
+ if(iframe){
166
+ this.setState({windowSize:{height:iframe.offsetHeight,width:iframe.offsetWidth}})
167
+ }
168
+ }
169
+
170
+ responseMenu(){
171
+ this.setState({ responsiveMenu:!this.state.responsiveMenu})
172
+ }
173
+
174
+ toggleRemContainer(){
175
+ this.setState({ isRemOpen: !this.state.isRemOpen });
176
+ }
177
+
178
+ calculatePxToRem(){
179
+ let result=Number((this.state.pixelSize/this.state.rootSize).toFixed(4));
180
+ this.setState({resultRem:result+"rem"});
181
+ }
182
+
183
+ calculateRemToPx(){
184
+ let result=Number(((Number(parseFloat(this.state.resultRem))*this.state.rootSize).toFixed(4)));
185
+ this.setState({pixelSize:result});
186
+ }
187
+
188
+ onChangeBase(e) {
189
+ let result=Number((this.state.pixelSize/e.target.value ).toFixed(4));
190
+ this.setState({ rootSize: e.target.value,resultRem:result+"rem" });
191
+ }
192
+
193
+ onChangePixel(e) {
194
+ let result=Number((e.target.value/this.state.rootSize).toFixed(4));
195
+ this.setState({ pixelSize: e.target.value ,resultRem:result+"rem" });
196
+ }
197
+
198
+ onChangeRem(e) {
199
+ let result=Number(((Number(parseFloat(e.target.value))*this.state.rootSize).toFixed(4)));
200
+ this.setState({ resultRem: e.target.value,pixelSize:result});
201
+ }
202
+
203
+ toggleFolder(name,e){
204
+ let { viewFolder } = this.state;
205
+ if(name == viewFolder){
206
+ name =''
207
+ }
208
+ this.setState({ viewFolder: name });
209
+ }
210
+ hashChange() {
211
+ let ele = document.getElementById('componentIframe')
212
+ if(ele){
213
+ var src = document.getElementById('componentIframe').src;
214
+ var url = src && src.split('#')[0];
215
+ document.getElementById('componentIframe').src = url + location.hash;
216
+ }
217
+ this.setState({ selectedComponent: location.hash, infoTab:'component' });
218
+ }
219
+ toggleGroup(name) {
220
+ let element=name;
221
+ let { viewGroup } = this.state;
222
+ if(name == viewGroup){
223
+ name =''
224
+ }
225
+ this.setState({ viewGroup: name });
226
+ }
227
+
228
+ componentDidMount() {
229
+ window.addEventListener('hashchange', this.hashChange);
230
+ onLoader()
231
+ let iframeEle=document.getElementById('componentIframe')
232
+ iframeEle.contentWindow.addEventListener('resize',this.getWindow)
233
+ this.getWindow()
234
+ let index=document.getElementsByClassName('iframeCentering')
235
+ index ?index[0].style.display='none':null
236
+ if(!this.state.selectedComponent){
237
+ this.setState({infoTab:'dashboard'})
238
+ }
239
+ //document.addEventListener('click', this.popupToggleDoc);
240
+ fetch('/cli/version').then((res)=>{return res.json()}).then((response)=>{
241
+ (response && response.version) ? this.setState({version : response.version }) : this.setState({version : "version get failure" })
242
+ }).catch(function(err) {
243
+ this.setState({changeset : "Error accured" })
244
+ });
245
+ }
246
+
247
+ codeview(){
248
+
249
+ let compName = location.hash != '' ? location.hash.substring(1) : null;
250
+ let element = document.getElementById('codeView')
251
+ if (componentList[compName] && typeof CodeMirror !== 'undefined' && element ) {
252
+ CodeMirror(element, {
253
+ value:'',
254
+ lineNumbers: false,
255
+ styleActiveLine: false,
256
+ matchBrackets: false,
257
+ theme: 'blackboard',
258
+ });
259
+ }
260
+
261
+ }
262
+
263
+ componentWillUnmount() {
264
+ let iframe=document.getElementById('componentIframe');
265
+ //document.removeEventListener('click', this.popupToggleDoc);
266
+ iframe.contentWindow.removeEventListener('resize',this.getWindow)
267
+ window.removeEventListener('hashchange', this.hashChange);
268
+ window.removeEventListener('error',this.reloadFrame);
269
+ }
270
+
271
+ search(e) {
272
+ this.setState({ search: e.target.value });
273
+ }
274
+
275
+ clear(e) {
276
+ this.setState({ search: '' });
277
+ }
278
+
279
+ // popupToggleDoc() {
280
+ // this.setState({ popUp: ''});
281
+ // }
282
+
283
+ // fullScreenSrcToggle(select) {
284
+ // this.setState({ fullScreenSrc: select });
285
+ // this.popupToggleDoc();
286
+ // }
287
+
288
+ removeClose(e) {
289
+ e.stopPropagation && e.stopPropagation();
290
+ e.nativeEvent.stopImmediatePropagation &&
291
+ e.nativeEvent.stopImmediatePropagation();
292
+ }
293
+
294
+ filter(list, str) {
295
+ list = list.sort((a, b) => {
296
+ var at = a.toLowerCase();
297
+ var bt = b.toLowerCase();
298
+ return at > bt ? 1 : at < bt ? -1 : 0;
299
+ });
300
+ // return list.filter(
301
+ // item => item.toUpperCase().indexOf(str.toUpperCase()) != -1
302
+ // );
303
+
304
+ return list.filter((item)=>{
305
+ let value = item.split('__')[0]
306
+
307
+ return value.toUpperCase().indexOf(str.toUpperCase()) != -1
308
+ })
309
+ }
310
+
311
+ onTabinfo(name){
312
+ this.setState({infoTab:name})
313
+ }
314
+
315
+ reloadFrame(){
316
+ let iframeEle = document.getElementById('componentIframe');
317
+ //this.getWindow()
318
+ iframeEle.contentDocument.location.reload()
319
+ parent.document.getElementById("loadingText").style.display= 'block'
320
+ }
321
+
322
+ getFileDetails(){
323
+ this.onTabinfo('changeset')
324
+ let compName = location.hash != '' ? location.hash.substring(1) : null;
325
+ let compNameSub= window.componentList?window.componentList[compName].docs.filePath :Component[compName].docs.filePath || ''
326
+ let name = compNameSub ? compNameSub.split('__')[0] : '';
327
+ let propComName = name.replace("docs","/").split('/')[0]+name.split("docs")[1]
328
+ fetch('/author/get?componentName='+propComName+'.js').then((res)=>{return res.json()}).then((response)=>{
329
+ (response && response.stdout) ? this.setState({changeset : response.stdout }) : this.setState({changeset : "response is empty" })
330
+ }).catch(function(err) {
331
+ this.setState({changeset : "Error accured" })
332
+ });
333
+ }
334
+
335
+ iframeSize() {
336
+ let slider=document.getElementById('myRange')
337
+ let iframe = document.getElementById('componentIframe');
338
+ let value=slider.value;
339
+ let borderSize=30;
340
+ let sizes={
341
+ '1':{device:'MOBILE_XS',frameWidth:320+borderSize},
342
+ '2':{device:'MOBILE_S',frameWidth:360+borderSize},
343
+ '3':{device:'MOBILE_M',frameWidth:375.04+borderSize},
344
+ '4':{device:'MOBILE',frameWidth:480+borderSize},
345
+ '5':{device:'TABLET_S',frameWidth:640+borderSize},
346
+ '6':{device:'TABLET_M',frameWidth:720+borderSize},
347
+ '7':{device:'TABLET',frameWidth:768+borderSize},
348
+ '8':{device:'LAPTOP_S',frameWidth:1024+borderSize},
349
+ '9':{device:'LAPTOP_M',frameWidth:1280+borderSize},
350
+ '10':{device:'LAPTOP',frameWidth:1440+borderSize},
351
+ '11':{device:'MONITOR_M',frameWidth:1600+borderSize},
352
+ '12':{device:'MONITOR',frameWidth:1920+borderSize}
353
+ }
354
+ this.setState(sizes[value]);
355
+ this.getWindow()
356
+ }
357
+
358
+ menuOpen() {
359
+ this.setState({isMenuClose:!this.state.isMenuClose})
360
+ }
361
+
362
+ onRtlView(e) {
363
+ let iframeEle = document.getElementById('componentIframe');
364
+ let ele = e.target.element || null
365
+ if (!this.state.isRTL) {
366
+ this.setState({isRTL:true})
367
+ window.RTLmode = true;
368
+ iframeEle.contentDocument.documentElement.setAttribute('dir', 'rtl');
369
+ } else {
370
+ this.setState({isRTL:false})
371
+ iframeEle.contentDocument.documentElement.setAttribute('dir', 'ltr');
372
+ window.RTLmode = false;
373
+ }
374
+ }
375
+
376
+ onREMView(e) {
377
+ let iframeEle = document.getElementById('componentIframe');
378
+ let ele = e.target.element || null
379
+ if (!this.state.isRem) {
380
+ this.setState({isRem:true})
381
+ iframeEle.contentDocument.documentElement.classList.add('isRem');
382
+ } else {
383
+ this.setState({isRem:false})
384
+ iframeEle.contentDocument.documentElement.classList.remove('isRem');
385
+ }
386
+ }
387
+
388
+
389
+ handleURL(){
390
+ this.setState({viewFolder:'General',viewGroup:'Global',infoTab:'dashboard'})
391
+ window.history.pushState("", "", '/docs/');
392
+ }
393
+
394
+ unusedList(mdata){
395
+ let dbList=[];
396
+ Object.keys(mdata).map((item,i)=>{
397
+ if(mdata[item].references.length<=0 && mdata[item].referencedby.length<=0){
398
+ return dbList.push(item);
399
+ }
400
+ })
401
+ return dbList
402
+ }
403
+
404
+ render() {
405
+ const {
406
+ Components,
407
+ componentObj,
408
+ search,
409
+ selectedComponent,
410
+ //popUp,
411
+ viewGroup,
412
+ viewFolder,
413
+ moreInform,
414
+ infoTab,
415
+ changeset,
416
+ version,
417
+ frameWidth,
418
+ isMenuClose,
419
+ isRTL,
420
+ isRem,
421
+ isRemOpen,
422
+ rootSize,
423
+ pixelSize,
424
+ resultRem,
425
+ duplicates,
426
+ isEditMode
427
+ } = this.state;/* Components & componentObj no need in the state access in props itself*/
428
+ let devices=[{device:'MOBILE',sizes:['XS','S','M','D']},{device:'TABLET',sizes:['S','M','D']},{device:'LAPTOP',sizes:[,'S','M','D']},{device:'MONITOR',sizes:['M','D']}]
429
+ let compValue='compValue';
430
+ let reactCliVersion =version.split(' ').filter(function(el){return el.toLowerCase().indexOf("fz-react-cli@") > -1;});
431
+ let versionFz = reactCliVersion.length?reactCliVersion[0].substring(reactCliVersion[0].indexOf('@')+1,reactCliVersion[0].length) : '';
432
+ let compName =location.hash != '' ? location.hash.substring(1) : null;
433
+ let propComName = compName ? compName.split('__')[0] : '';
434
+ let propsObj = window.componentList && window.componentList[propComName] &&
435
+ window.componentList[propComName].propTypes ||
436
+ (Components &&
437
+ Components[propComName] &&
438
+ Components[propComName].propTypes) ||
439
+ {};
440
+ let currentCompProps = Object.keys(propsObj) || [];
441
+ let currentCompDefault = Window.componentList && window.componentList[propComName] && window.componentList[propComName].defaultProps || (Components[propComName] && Components[propComName].defaultProps) || {};
442
+ let componentsObj=componentObj && this.filter(Object.keys(componentObj),'').map((item,i)=>{
443
+ return ({key:item,value:componentObj[item],length:Object.keys(componentObj[item]).length})
444
+ })
445
+ let compObjList=componentsObj
446
+
447
+ let dashboardList=[
448
+ this.unusedList(mdata) &&{name:'Unused',componentList:this.unusedList(mdata)},
449
+ duplicates && {name:'Duplicates',componentList:duplicates}
450
+ ]
451
+
452
+ return (
453
+ <main className="dflex flexrow">
454
+ <div className="showToggleLeft" onClick={this.menuOpen}>
455
+ <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGOSURBVGhD7ZrBKkVBHIdPSNKV5A3YKSvvYG/BE0jI3tbGxsYGdTeeQnY8gcLOTigba1KE73ewOGUxc8/8/2fUfPXVndOd23ydM92ae6sIeniIT/iZgW94hYsYxTH+9YFd+4pzGMQIvqAmzepCBgzhESpmRxdCmERNuKtH+bCBWpeCgighxpSQEmJECSkhRpSQkJBRvMFTHNcFQ0xDxvAW9f5ztIwxf7Rm8B6tY1z2iEeM22a3jnELEZYxriHCKsY9RFjERIfo4OECT+rR4KSOiQ5JScqYRsgULji7jM/YNqYR8vAz6NIz1KlILI2QfdTz762Ol7SID1zFQeh0j4gtVECbCBEdMox6tufrUTtSRYjokBTfIyJlhOgkJHWEcA+xiBCuIVYRwi3EMkK4hFhHCPMQjwhhGjKN72gdIczvyDYufb80xW2zW1NCSogRJaSEGFFC/n3IBGrCYz3Kh03Uug7qUSC/x0Z7uJaB63iNWpPuTDArqP9IaWJOXqJ+JYtCJym72M9A7QvdFSKq6gtlqbpowcg25wAAAABJRU5ErkJggg==" />
456
+ </div>
457
+
458
+ <div className={"menuBar "+(isMenuClose?"isMenuClose":"isMenuOpen")}>
459
+ <div className="dflex flexcolumn">
460
+ <div className="flexshrink logoPart dflex">
461
+ <img src="./css/desklogo.png" />
462
+ <div className={'home'} onClick={this.handleURL}>
463
+ <span className='homeIcon'>
464
+ <svg className='svg'>
465
+ <use xlinkHref='#home'></use>
466
+ </svg>
467
+ </span>
468
+ </div>
469
+ </div>
470
+ <div className="flexgrow flexbasis sliderContainer">
471
+ <div className="dflex flexcolumn">
472
+ <div className="flexshrink searchPart">
473
+ <Search onChange={this.search} value={search} onClear={this.clear} />
474
+ </div>
475
+ <menu className="flexgrow flexbasis scrollY menuContainer" id="leftPanel">
476
+ {
477
+ compObjList && Object.keys(compObjList).length && compObjList.map(comp => {
478
+ let folderName=comp.key
479
+ let folderCompCount=0;
480
+ let sortList=this.filter(Object.keys(componentObj[folderName]),'').map(grpName=>{
481
+ return({
482
+ fName:grpName,
483
+ components:componentObj[folderName][grpName],
484
+ length:(componentObj[folderName][grpName].filter(function(el) {return el.toLowerCase().indexOf('__') > -1}).length)
485
+ })
486
+ })
487
+
488
+ let outcomp = Object.keys(componentObj[folderName]).sort().map(
489
+ grn => {
490
+ let searchList = this.filter(
491
+ componentObj[folderName][grn],
492
+ search
493
+ );
494
+ if(searchList.length){
495
+ folderCompCount=folderCompCount+1;
496
+ }
497
+ return searchList.length ? true : false;
498
+ }
499
+ );
500
+ if (outcomp.indexOf(true) != -1) {
501
+ return (
502
+ <div>
503
+ <div
504
+ onClick={this.toggleFolder.bind(
505
+ this,
506
+ folderName
507
+ )}
508
+ className={'mainMenu dflex flexrow alignVertical offSelection'+' '+
509
+ (viewFolder == folderName
510
+ ? 'mainMenuActive'
511
+ : '')
512
+ }
513
+ >
514
+ <span className={'flexgrow mainMenutitle dotted'}>{folderName}</span>
515
+ <span className={'flexshrink mainMenuCount'}>{folderCompCount}</span>
516
+ <i className={'flexshrink mainMenuArrow'}>
517
+ <svg className='svg'>
518
+ <use xlinkHref='#bottomArrow'></use>
519
+ </svg>
520
+ </i>
521
+ </div>
522
+ <div
523
+ className={
524
+ viewFolder == folderName || search
525
+ ? 'folderOpen'
526
+ : 'hide'
527
+ }
528
+ >
529
+ {
530
+ sortList.map((grpName)=>{
531
+ return(
532
+ <ComponentList
533
+ type={grpName.fName}
534
+ components={this.filter(
535
+ componentObj[folderName][grpName.fName],
536
+ search
537
+ )}
538
+ selectedComponent={selectedComponent}
539
+ toggleGroup={this.toggleGroup}
540
+ viewGroup={
541
+ search ? grpName.fName : viewGroup
542
+ }
543
+ />)
544
+ })
545
+ }
546
+ </div>
547
+ </div>
548
+ );
549
+ } else {
550
+ return null;
551
+ }
552
+ })
553
+ }
554
+ </menu>
555
+ {
556
+ versionFz!=''&&
557
+ <div className="flexshrink versionPart ">
558
+ <span>Version {versionFz}</span>
559
+ </div>
560
+ }
561
+ <div className="flexshrink tools" onClick={this.toggleRemContainer}>
562
+ <img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDE3NC4yNDggMTc0LjI0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTc0LjI0OCAxNzQuMjQ4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxnPgoJPHBhdGggZD0iTTE3My4xNDUsNzMuOTFjLTAuNDEzLTIuNzIyLTIuMjktNC45OTMtNC44ODEtNS45MTJsLTEzLjcyNy00Ljg4MWMtMC44MTItMi4zLTEuNzMzLTQuNTM2LTIuNzU0LTYuNjk5bDYuMjQ3LTEzLjE0NiAgIGMxLjE3OS0yLjQ3OSwwLjg5OS01LjQxMS0wLjcyOS03LjYyOGMtNS4yNjUtNy4xNjEtMTEuNTU2LTEzLjQ1Mi0xOC42OTgtMTguNjkzYy0yLjIxOS0xLjYyOS01LjE0MS0xLjkwNi03LjYyNS0wLjcyNCAgIGwtMTMuMTM4LDYuMjQyYy0yLjE2My0xLjAyMS00LjQwMi0xLjk0LTYuNzA0LTIuNzUybC00Ljg4My0xMy43MjljLTAuOTE5LTIuNTg2LTMuMTg0LTQuNDU4LTUuOS00Ljg3NiAgIGMtOS42NS0xLjQ4My0xNi43OTItMS40ODMtMjYuNDU3LDBjLTIuNzEzLDAuNDE4LTQuOTgxLDIuMjktNS45LDQuODc2bC00Ljg4MywxMy43MjljLTIuMzAyLDAuODEyLTQuNTQxLDEuNzMxLTYuNzAyLDIuNzUyICAgbC0xMy4xNDMtNi4yNDJjLTIuNDc5LTEuMTgxLTUuNDA2LTAuOTA0LTcuNjIzLDAuNzI0Yy03LjE0Miw1LjI0MS0xMy40MzMsMTEuNTMyLTE4LjY5OCwxOC42OTMgICBjLTEuNjI5LDIuMjE3LTEuOTA4LDUuMTQ4LTAuNzI5LDcuNjI4bDYuMjQ3LDEzLjE0NmMtMS4wMjEsMi4xNTktMS45NCw0LjQtMi43NTQsNi42OTlMNS45ODIsNjguMDAzICAgYy0yLjU4OSwwLjkxOS00LjQ2MywzLjE4OS00Ljg3OSw1LjkwN2MtMC43NDksNC45Mi0xLjA5OSw5LjExNS0xLjA5OSwxMy4yMTljMCw0LjA5OCwwLjM1LDguMjk5LDEuMDk5LDEzLjIxOSAgIGMwLjQxMywyLjcyMiwyLjI5LDQuOTkzLDQuODgxLDUuOTEybDEzLjcyNyw0Ljg4MWMwLjgxNCwyLjMwNCwxLjczNiw0LjU0MSwyLjc1NCw2LjcwNGwtNi4yNDcsMTMuMTQxICAgYy0xLjE3OSwyLjQ3OS0wLjg5OSw1LjQxMSwwLjcyNyw3LjYyM2M1LjI1OCw3LjE1NiwxMS41NDksMTMuNDQ3LDE4LjcsMTguNjk4YzIuMjE3LDEuNjI5LDUuMTQ0LDEuOTExLDcuNjI1LDAuNzI0bDEzLjEzOC02LjI0MiAgIGMyLjE2MywxLjAyMSw0LjQwMiwxLjk0LDYuNzA0LDIuNzUybDQuODgzLDEzLjcyOWMwLjkxOSwyLjU4NiwzLjE4NCw0LjQ1OCw1LjksNC44NzZjNC44MjgsMC43NDQsOS4xNTQsMS4xMDQsMTMuMjI4LDEuMTA0ICAgYzQuMDc0LDAsOC40MDEtMC4zNiwxMy4yMjgtMS4xMDRjMi43MTUtMC40MTgsNC45ODEtMi4yOSw1LjktNC44NzZsNC44ODMtMTMuNzI5YzIuMzAyLTAuODEyLDQuNTQxLTEuNzMxLDYuNzA0LTIuNzUyICAgbDEzLjEzOCw2LjI0MmMyLjQ4NCwxLjE4Niw1LjQxMSwwLjkwNCw3LjYyOC0wLjcyNGM3LjE1OS01LjI2LDEzLjQ1LTExLjU1MSwxOC42OTgtMTguNjk4YzEuNjI2LTIuMjEyLDEuOTA2LTUuMTQ0LDAuNzI3LTcuNjIzICAgbC02LjI0Ny0xMy4xNDFjMS4wMjEtMi4xNjMsMS45NDItNC40MDUsMi43NTQtNi43MDRsMTMuNzI3LTQuODgxYzIuNTkxLTAuOTE5LDQuNDY4LTMuMTg5LDQuODgxLTUuOTEyICAgYzAuNzQ5LTQuOTIsMS4wOTktOS4xMiwxLjA5OS0xMy4yMTlTMTczLjg5NCw3OC44MjksMTczLjE0NSw3My45MXogTTE1OC45NDksOTMuNzJsLTEyLjg3OCw0LjU4ICAgYy0yLjI1MSwwLjc5Ny0zLjk4MiwyLjYyNS00LjY2LDQuOTJjLTEuMTUsMy44ODktMi42NjQsNy41NjktNC41MDQsMTAuOTQzYy0xLjE0MiwyLjEtMS4yMTMsNC42MTktMC4xODcsNi43NzdsNS44NDEsMTIuMjg1ICAgYy0yLjgyMiwzLjM4OS01Ljk0Myw2LjUxNS05LjMzNyw5LjMzNGwtMTIuMjgzLTUuODM0Yy0yLjE2MS0xLjAzNi00LjY3Mi0wLjk1My02Ljc3NSwwLjE4NWMtMy4zNzksMS44MzgtNy4wNjEsMy4zNS0xMC45NTMsNC41MDIgICBjLTIuMjksMC42NzYtNC4xMTgsMi40MDYtNC45MTcsNC42NTdsLTQuNTgyLDEyLjg4M2MtNC42NzcsMC40NzYtOC41MDMsMC40NzYtMTMuMTgsMGwtNC41ODItMTIuODgzICAgYy0wLjgtMi4yNDYtMi42MjgtMy45ODItNC45MTctNC42NTdjLTMuODk0LTEuMTUyLTcuNTc5LTIuNjY0LTEwLjk1My00LjUwMmMtMi4xMDMtMS4xNDctNC42MTktMS4yMi02Ljc3NS0wLjE4NWwtMTIuMjgzLDUuODM5ICAgYy0zLjM5MS0yLjgyNS02LjUxMi01Ljk0Ni05LjMzNy05LjMzOWw1Ljg0MS0xMi4yODVjMS4wMjYtMi4xNTksMC45NTUtNC42NzctMC4xODctNi43NzdjLTEuODM1LTMuMzY0LTMuMzUtNy4wNDktNC41MDQtMTAuOTQ4ICAgYy0wLjY3OC0yLjI5LTIuNDExLTQuMTE4LTQuNjYtNC45MTVsLTEyLjg3OC00LjU4Yy0wLjI0My0yLjM0My0wLjM2LTQuNTAyLTAuMzYtNi41OTJzMC4xMTctNC4yNDQsMC4zNi02LjU4N2wxMi44ODEtNC41ODQgICBjMi4yNDgtMC43OTcsMy45NzktMi42MjUsNC42NTctNC45MTVjMS4xNTItMy44ODksMi42NjctNy41NzQsNC41MDQtMTAuOTUzYzEuMTQyLTIuMDk1LDEuMjEzLTQuNjE5LDAuMTg3LTYuNzcybC01Ljg0MS0xMi4yODUgICBjMi44MjctMy4zOTMsNS45NDgtNi41MTksOS4zMzctOS4zMzlsMTIuMjg4LDUuODM5YzIuMTUxLDEuMDM2LDQuNjc3LDAuOTUzLDYuNzc1LTAuMTg1YzMuMzcyLTEuODM4LDcuMDU0LTMuMzUsMTAuOTQ4LTQuNTAyICAgYzIuMjktMC42NzYsNC4xMTgtMi40MTEsNC45MTctNC42NTdsNC41ODItMTIuODgzYzQuNjMzLTAuNDgxLDguNDY2LTAuNDgxLDEzLjE4LDBsNC41ODIsMTIuODgzICAgYzAuOCwyLjI0NiwyLjYyOCwzLjk4Miw0LjkxNyw0LjY1N2MzLjg5NCwxLjE1Miw3LjU3OSwyLjY2NCwxMC45NTMsNC41MDJjMi4xMDMsMS4xNDcsNC42MTQsMS4yMiw2Ljc3NSwwLjE4NWwxMi4yODMtNS44MzkgICBjMy4zODksMi44Miw2LjUxLDUuOTQ2LDkuMzM3LDkuMzM5bC01Ljg0MSwxMi4yODVjLTEuMDI2LDIuMTU0LTAuOTU1LDQuNjc3LDAuMTg3LDYuNzcyYzEuODQzLDMuMzg5LDMuMzU3LDcuMDY5LDQuNTA0LDEwLjk0OCAgIGMwLjY3OCwyLjI5NSwyLjQwOSw0LjEyMyw0LjY2LDQuOTJsMTIuODc4LDQuNThjMC4yNDMsMi4zNDMsMC4zNiw0LjUwMiwwLjM2LDYuNTkyUzE1OS4xOTIsOTEuMzc3LDE1OC45NDksOTMuNzJ6IiBmaWxsPSIjRkZGRkZGIi8+Cgk8cGF0aCBkPSJNODcuMTI0LDUwLjgwMmMtMTkuMDYyLDAtMzQuNTcxLDE1LjUwOC0zNC41NzEsMzQuNTcxczE1LjUwOCwzNC41NzEsMzQuNTcxLDM0LjU3MXMzNC41NzEtMTUuNTA4LDM0LjU3MS0zNC41NzEgICBTMTA2LjE4Niw1MC44MDIsODcuMTI0LDUwLjgwMnogTTg3LjEyNCwxMDUuMDA5Yy0xMC44MjcsMC0xOS42MzYtOC44MDktMTkuNjM2LTE5LjYzNnM4LjgwOS0xOS42MzYsMTkuNjM2LTE5LjYzNiAgIHMxOS42MzYsOC44MDksMTkuNjM2LDE5LjYzNlM5Ny45NTEsMTA1LjAwOSw4Ny4xMjQsMTA1LjAwOXoiIGZpbGw9IiNGRkZGRkYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" />
563
+ <span>REM Converter</span>
564
+ </div>
565
+ </div>
566
+ <div className={"slider "+(isRemOpen?'sopen':'')}>
567
+ <div className="tools sliderHeader">
568
+ <img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDE3NC4yNDggMTc0LjI0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTc0LjI0OCAxNzQuMjQ4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxnPgoJPHBhdGggZD0iTTE3My4xNDUsNzMuOTFjLTAuNDEzLTIuNzIyLTIuMjktNC45OTMtNC44ODEtNS45MTJsLTEzLjcyNy00Ljg4MWMtMC44MTItMi4zLTEuNzMzLTQuNTM2LTIuNzU0LTYuNjk5bDYuMjQ3LTEzLjE0NiAgIGMxLjE3OS0yLjQ3OSwwLjg5OS01LjQxMS0wLjcyOS03LjYyOGMtNS4yNjUtNy4xNjEtMTEuNTU2LTEzLjQ1Mi0xOC42OTgtMTguNjkzYy0yLjIxOS0xLjYyOS01LjE0MS0xLjkwNi03LjYyNS0wLjcyNCAgIGwtMTMuMTM4LDYuMjQyYy0yLjE2My0xLjAyMS00LjQwMi0xLjk0LTYuNzA0LTIuNzUybC00Ljg4My0xMy43MjljLTAuOTE5LTIuNTg2LTMuMTg0LTQuNDU4LTUuOS00Ljg3NiAgIGMtOS42NS0xLjQ4My0xNi43OTItMS40ODMtMjYuNDU3LDBjLTIuNzEzLDAuNDE4LTQuOTgxLDIuMjktNS45LDQuODc2bC00Ljg4MywxMy43MjljLTIuMzAyLDAuODEyLTQuNTQxLDEuNzMxLTYuNzAyLDIuNzUyICAgbC0xMy4xNDMtNi4yNDJjLTIuNDc5LTEuMTgxLTUuNDA2LTAuOTA0LTcuNjIzLDAuNzI0Yy03LjE0Miw1LjI0MS0xMy40MzMsMTEuNTMyLTE4LjY5OCwxOC42OTMgICBjLTEuNjI5LDIuMjE3LTEuOTA4LDUuMTQ4LTAuNzI5LDcuNjI4bDYuMjQ3LDEzLjE0NmMtMS4wMjEsMi4xNTktMS45NCw0LjQtMi43NTQsNi42OTlMNS45ODIsNjguMDAzICAgYy0yLjU4OSwwLjkxOS00LjQ2MywzLjE4OS00Ljg3OSw1LjkwN2MtMC43NDksNC45Mi0xLjA5OSw5LjExNS0xLjA5OSwxMy4yMTljMCw0LjA5OCwwLjM1LDguMjk5LDEuMDk5LDEzLjIxOSAgIGMwLjQxMywyLjcyMiwyLjI5LDQuOTkzLDQuODgxLDUuOTEybDEzLjcyNyw0Ljg4MWMwLjgxNCwyLjMwNCwxLjczNiw0LjU0MSwyLjc1NCw2LjcwNGwtNi4yNDcsMTMuMTQxICAgYy0xLjE3OSwyLjQ3OS0wLjg5OSw1LjQxMSwwLjcyNyw3LjYyM2M1LjI1OCw3LjE1NiwxMS41NDksMTMuNDQ3LDE4LjcsMTguNjk4YzIuMjE3LDEuNjI5LDUuMTQ0LDEuOTExLDcuNjI1LDAuNzI0bDEzLjEzOC02LjI0MiAgIGMyLjE2MywxLjAyMSw0LjQwMiwxLjk0LDYuNzA0LDIuNzUybDQuODgzLDEzLjcyOWMwLjkxOSwyLjU4NiwzLjE4NCw0LjQ1OCw1LjksNC44NzZjNC44MjgsMC43NDQsOS4xNTQsMS4xMDQsMTMuMjI4LDEuMTA0ICAgYzQuMDc0LDAsOC40MDEtMC4zNiwxMy4yMjgtMS4xMDRjMi43MTUtMC40MTgsNC45ODEtMi4yOSw1LjktNC44NzZsNC44ODMtMTMuNzI5YzIuMzAyLTAuODEyLDQuNTQxLTEuNzMxLDYuNzA0LTIuNzUyICAgbDEzLjEzOCw2LjI0MmMyLjQ4NCwxLjE4Niw1LjQxMSwwLjkwNCw3LjYyOC0wLjcyNGM3LjE1OS01LjI2LDEzLjQ1LTExLjU1MSwxOC42OTgtMTguNjk4YzEuNjI2LTIuMjEyLDEuOTA2LTUuMTQ0LDAuNzI3LTcuNjIzICAgbC02LjI0Ny0xMy4xNDFjMS4wMjEtMi4xNjMsMS45NDItNC40MDUsMi43NTQtNi43MDRsMTMuNzI3LTQuODgxYzIuNTkxLTAuOTE5LDQuNDY4LTMuMTg5LDQuODgxLTUuOTEyICAgYzAuNzQ5LTQuOTIsMS4wOTktOS4xMiwxLjA5OS0xMy4yMTlTMTczLjg5NCw3OC44MjksMTczLjE0NSw3My45MXogTTE1OC45NDksOTMuNzJsLTEyLjg3OCw0LjU4ICAgYy0yLjI1MSwwLjc5Ny0zLjk4MiwyLjYyNS00LjY2LDQuOTJjLTEuMTUsMy44ODktMi42NjQsNy41NjktNC41MDQsMTAuOTQzYy0xLjE0MiwyLjEtMS4yMTMsNC42MTktMC4xODcsNi43NzdsNS44NDEsMTIuMjg1ICAgYy0yLjgyMiwzLjM4OS01Ljk0Myw2LjUxNS05LjMzNyw5LjMzNGwtMTIuMjgzLTUuODM0Yy0yLjE2MS0xLjAzNi00LjY3Mi0wLjk1My02Ljc3NSwwLjE4NWMtMy4zNzksMS44MzgtNy4wNjEsMy4zNS0xMC45NTMsNC41MDIgICBjLTIuMjksMC42NzYtNC4xMTgsMi40MDYtNC45MTcsNC42NTdsLTQuNTgyLDEyLjg4M2MtNC42NzcsMC40NzYtOC41MDMsMC40NzYtMTMuMTgsMGwtNC41ODItMTIuODgzICAgYy0wLjgtMi4yNDYtMi42MjgtMy45ODItNC45MTctNC42NTdjLTMuODk0LTEuMTUyLTcuNTc5LTIuNjY0LTEwLjk1My00LjUwMmMtMi4xMDMtMS4xNDctNC42MTktMS4yMi02Ljc3NS0wLjE4NWwtMTIuMjgzLDUuODM5ICAgYy0zLjM5MS0yLjgyNS02LjUxMi01Ljk0Ni05LjMzNy05LjMzOWw1Ljg0MS0xMi4yODVjMS4wMjYtMi4xNTksMC45NTUtNC42NzctMC4xODctNi43NzdjLTEuODM1LTMuMzY0LTMuMzUtNy4wNDktNC41MDQtMTAuOTQ4ICAgYy0wLjY3OC0yLjI5LTIuNDExLTQuMTE4LTQuNjYtNC45MTVsLTEyLjg3OC00LjU4Yy0wLjI0My0yLjM0My0wLjM2LTQuNTAyLTAuMzYtNi41OTJzMC4xMTctNC4yNDQsMC4zNi02LjU4N2wxMi44ODEtNC41ODQgICBjMi4yNDgtMC43OTcsMy45NzktMi42MjUsNC42NTctNC45MTVjMS4xNTItMy44ODksMi42NjctNy41NzQsNC41MDQtMTAuOTUzYzEuMTQyLTIuMDk1LDEuMjEzLTQuNjE5LDAuMTg3LTYuNzcybC01Ljg0MS0xMi4yODUgICBjMi44MjctMy4zOTMsNS45NDgtNi41MTksOS4zMzctOS4zMzlsMTIuMjg4LDUuODM5YzIuMTUxLDEuMDM2LDQuNjc3LDAuOTUzLDYuNzc1LTAuMTg1YzMuMzcyLTEuODM4LDcuMDU0LTMuMzUsMTAuOTQ4LTQuNTAyICAgYzIuMjktMC42NzYsNC4xMTgtMi40MTEsNC45MTctNC42NTdsNC41ODItMTIuODgzYzQuNjMzLTAuNDgxLDguNDY2LTAuNDgxLDEzLjE4LDBsNC41ODIsMTIuODgzICAgYzAuOCwyLjI0NiwyLjYyOCwzLjk4Miw0LjkxNyw0LjY1N2MzLjg5NCwxLjE1Miw3LjU3OSwyLjY2NCwxMC45NTMsNC41MDJjMi4xMDMsMS4xNDcsNC42MTQsMS4yMiw2Ljc3NSwwLjE4NWwxMi4yODMtNS44MzkgICBjMy4zODksMi44Miw2LjUxLDUuOTQ2LDkuMzM3LDkuMzM5bC01Ljg0MSwxMi4yODVjLTEuMDI2LDIuMTU0LTAuOTU1LDQuNjc3LDAuMTg3LDYuNzcyYzEuODQzLDMuMzg5LDMuMzU3LDcuMDY5LDQuNTA0LDEwLjk0OCAgIGMwLjY3OCwyLjI5NSwyLjQwOSw0LjEyMyw0LjY2LDQuOTJsMTIuODc4LDQuNThjMC4yNDMsMi4zNDMsMC4zNiw0LjUwMiwwLjM2LDYuNTkyUzE1OS4xOTIsOTEuMzc3LDE1OC45NDksOTMuNzJ6IiBmaWxsPSIjRkZGRkZGIi8+Cgk8cGF0aCBkPSJNODcuMTI0LDUwLjgwMmMtMTkuMDYyLDAtMzQuNTcxLDE1LjUwOC0zNC41NzEsMzQuNTcxczE1LjUwOCwzNC41NzEsMzQuNTcxLDM0LjU3MXMzNC41NzEtMTUuNTA4LDM0LjU3MS0zNC41NzEgICBTMTA2LjE4Niw1MC44MDIsODcuMTI0LDUwLjgwMnogTTg3LjEyNCwxMDUuMDA5Yy0xMC44MjcsMC0xOS42MzYtOC44MDktMTkuNjM2LTE5LjYzNnM4LjgwOS0xOS42MzYsMTkuNjM2LTE5LjYzNiAgIHMxOS42MzYsOC44MDksMTkuNjM2LDE5LjYzNlM5Ny45NTEsMTA1LjAwOSw4Ny4xMjQsMTA1LjAwOXoiIGZpbGw9IiNGRkZGRkYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" />
569
+ <span className="sliderTitle">REM Converter</span>
570
+ <span className="searchClose" onClick={this.toggleRemContainer}>
571
+ <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==" />
572
+ </span>
573
+ </div>
574
+ <div className="sliderFormContainer">
575
+ <div className="sliderInputContainer">
576
+ <label className="sliderInputTitle">Base font-size (in px)</label>
577
+ <input type="number" className="sliderInput" min="1" placeholder="Base font-size (in px)" value={rootSize} onChange={this.onChangeBase} / >
578
+ </div>
579
+ <div className="sliderInputContainer">
580
+ <label className="sliderInputTitle">PX size to convert</label>
581
+ <input type="number" className="sliderInput" placeholder="PX size to convert" value={pixelSize} onChange={this.onChangePixel} / >
582
+ </div>
583
+ <div className="sliderInputContainer">
584
+ <label className="sliderInputTitle">Result</label>
585
+ <div className="sliderResult">
586
+ <input type="text" className="sliderInput" placeholder="Result" value={resultRem} onChange={this.onChangeRem} / >
587
+ <span id="remoutput" className="copyTxtHiden">{resultRem}</span>
588
+ <span className="copyResult" onClick={selectText.bind(this, 'remoutput')}>
589
+ <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==" />
590
+ </span>
591
+ </div>
592
+ </div>
593
+ </div>
594
+ </div>
595
+ </div>
596
+ </div>
597
+ </div>
598
+ <div className="flexgrow flexbasis">
599
+ <div id="container" className="dflex flexcolumn flexbasis">
600
+ {
601
+ infoTab == 'dashboard' ?
602
+ <div className='dflex flexcolumn'>
603
+ <div className="flexshrink cheader">
604
+ <div className="dflex flexrow flexbasis alignVertical">
605
+ <div className="flexshrink">
606
+ <h1 className="cheadertitle">{'Dashboard'}</h1>
607
+ </div>
608
+ <div className='flexgrow flexbasis infoTabs dflex'>
609
+ {
610
+ dashboardList.map((item,i)=>{
611
+ return(
612
+ <span key={i} onClick={this.compList.bind(this,item.name)} className={this.state.compList == item.name ? 'dotted infoactive' : 'dotted'}>
613
+ {item.name}
614
+ </span>
615
+ )
616
+ })
617
+ }
618
+ </div>
619
+ </div>
620
+ </div>
621
+ <div className='flexgrow scrollY'>
622
+ {
623
+ dashboardList.map((item,i)=>{
624
+ if(this.state.compList == item.name){
625
+ return(
626
+ item.componentList.length>0?<ul key={i}>
627
+ {
628
+ (item.componentList).map((component,val)=>{
629
+ if(component!== undefined){
630
+ return(<li key={val} className="compListItem">{component}</li>)
631
+ }
632
+ })
633
+ }
634
+ </ul>:
635
+ <div className='dflex alignHorizontal alignVertical flexcolumn'>
636
+ <span className='smileIcon'>
637
+ <svg className='svg'>
638
+ <use xlinkHref='#smileIcon'></use>
639
+ </svg>
640
+ </span>
641
+ <div>{'Sorry! there is no '+this.state.compList +' components'}</div>
642
+ </div>
643
+ )
644
+ }
645
+ })
646
+ }
647
+ </div>
648
+ </div>
649
+ :null
650
+ }
651
+ {
652
+ compName ?
653
+ <div className="flexshrink cheader">
654
+ <div className="dflex flexrow flexbasis alignVertical">
655
+ <div className="flexshrink"><h1 className="cheadertitle">{compName && compName.split('__')[0]}</h1></div>
656
+ <div className='flexgrow flexbasis infoTabs dflex'>
657
+ <span onClick={this.onTabinfo.bind(this,'component')} className={infoTab == 'component' ? 'dotted infoactive' : 'dotted'}>Component view</span>
658
+ <span onClick={this.onTabinfo.bind(this,'proptypes')} className={infoTab == 'proptypes' ? 'dotted infoactive' : 'dotted'}>PropTypes</span>
659
+ <span onClick={this.onTabinfo.bind(this,'code')} className={infoTab == 'code' ? 'dotted infoactive' : 'dotted'}>Docs Code</span>
660
+ {
661
+ /*
662
+ <span onClick={this.onTabinfo.bind(this,'src')} className={infoTab == 'src' ? 'dotted infoactive' : 'dotted'}>Source</span>
663
+ <span onClick={this.onTabinfo.bind(this,'visual')} className={infoTab == 'visual' ? 'dotted infoactive' : 'dotted'}>Visual Design</span>
664
+ */
665
+ }
666
+ <span onClick={this.onTabinfo.bind(this,'references')}className={infoTab=='references' ? 'dotted infoactive' : 'dotted'}>References</span>
667
+ <span onClick={this.getFileDetails} className={infoTab == 'changeset' ? 'dotted infoactive' : 'dotted'}>Author</span>
668
+ </div>
669
+ </div>
670
+ </div>
671
+ :null
672
+ }
673
+
674
+ <div className="flexgrow flexbasis cfooter ">
675
+ <div className="dflex flexcolumn flexbasis">
676
+ <div className="flexgrow flexbasis ccontent">
677
+ {
678
+ infoTab == 'changeset' ?
679
+ <pre className="authorview">{changeset ? changeset : 'loading....!!!'}</pre>
680
+ :null
681
+ }
682
+ {
683
+ infoTab == 'code' ?
684
+ <CodeView compName={compName} src={window.componentList ?window.componentList[compName].docs.source:Component[compName].docs.source}/>
685
+ :null
686
+ }
687
+ {
688
+ infoTab == 'src' ?
689
+ <CodeView compName={compName+'src'} src={window.componentList ?window.componentList[propComName].source:Component[propComName].source}/>
690
+ : null
691
+ }
692
+ {
693
+ infoTab == 'component' &&
694
+ <div className='dflex flexcolumn'>
695
+ <div className={'flexgrow flexshrink flexbasis toolarea'}>
696
+ <section id="resize" style={{"width":((frameWidth)+'px')}} className={"dflex flexcolumn flexbasis iframeSection"+" "+(frameWidth<481?'section':'')}>
697
+ <span className="loadingText" id='loadingText'>
698
+ <div className="lds-ripple">
699
+ <div></div>
700
+ <div></div>
701
+ </div>
702
+ </span>
703
+ <iframe
704
+ id="componentIframe"
705
+ className="iframe"
706
+ src={'/docs/component.html' + location.hash}
707
+ mdata={mdata}
708
+ />
709
+ </section>
710
+ </div>
711
+ <div className={'flexshrink toolOptions'}>
712
+ <div className={'dflex flexrow alignVertical alignHorizontal'}>
713
+
714
+ <div className={'responsive offSelection'}>
715
+ <span className={"responsiveOption iconOption"} onClick={this.reloadFrame}>
716
+ <svg className='svg'>
717
+ <use xlinkHref='#reload'></use>
718
+ </svg>
719
+ </span>
720
+ <a className={'responsiveOption iconOption'} href={'/docs/component.html' + location.hash} target="_blank" >
721
+ <svg className='svg'>
722
+ <use xlinkHref='#newTab'></use>
723
+ </svg>
724
+ </a>
725
+ <span className={'responsiveOption iconOption'+' '+(this.state.isRTL?'activeOption transform':'')} onClick={this.onRtlView}>
726
+ <svg className='svg'>
727
+ <use xlinkHref='#RTL'></use>
728
+ </svg>
729
+ </span>
730
+ <span className={'responsiveOption iconOption textSize'+' '+(this.state.isRem?'activeOption':'')} onClick={this.onREMView} >
731
+ <svg className='svg'>
732
+ <use xlinkHref='#rem'></use>
733
+ </svg>
734
+ </span>
735
+ <span className={'responsiveOption iconOption textSize'+' '+(this.state.isEditMode?'activeOption':'')} onClick={this.toggleEditMode} >
736
+ <svg className='svg'>
737
+ <use xlinkHref='#pencil'></use>
738
+ </svg>
739
+ </span>
740
+ <span className={'responsiveOption iconOption fullScreen'+' '+(this.state.isMenuClose?'activeOption':'')} onClick={this.fullView} >
741
+ <svg className='svg'>
742
+ <use xlinkHref='#fullScreen'></use>
743
+ </svg>
744
+ </span>
745
+ </div>
746
+ <div className={'dflex alignVertical alignHorizontal range'}>
747
+ <input min='1' max='12' type='range' defaultValue='9' step='1' id="myRange" onChange={this.iframeSize} className='rangeInput' />
748
+ <span className='tooltip'>{this.state.device}</span>
749
+ {
750
+ this.state.windowSize?
751
+ <React.Fragment>
752
+ <span className='window'>{this.state.windowSize.width}</span>
753
+ <span className='tooltipVal'>x</span>
754
+ <span className='window'>{this.state.windowSize.height}</span>
755
+ </React.Fragment>:null
756
+ }
757
+ </div>
758
+ </div>
759
+ </div>
760
+ </div>
761
+ }
762
+ {
763
+ infoTab == 'proptypes' ?
764
+ <div className="propsTable">
765
+ <div className="tableHeader">
766
+ <span className="brR">PropsName</span>
767
+ <span className="brR">Type</span>
768
+ <span className="brR">isRequired</span>
769
+ <span className="brR ">Default Props</span>
770
+ </div>
771
+ {
772
+ currentCompProps.map((value, i) => {
773
+ return (
774
+ <div
775
+ className={
776
+ currentCompProps.length - 1 == i
777
+ ? 'tableHeaderNB'
778
+ : 'tableHeader'
779
+ }
780
+ key={i}
781
+ >
782
+ <span>
783
+ <div>{value}</div>
784
+ </span>
785
+ <span>
786
+ <div>
787
+ {propsObj[value] && propsObj[value].hookType}
788
+ </div>
789
+ </span>
790
+ <span>
791
+ <div>
792
+ {
793
+ propsObj[value] && propsObj[value].isRequired? '-': 'true'
794
+ }
795
+ </div>
796
+ </span>
797
+ <span className="defaultProps">
798
+ <div className="bn">
799
+ {JSON.stringify(currentCompDefault[value])}
800
+ </div>
801
+ </span>
802
+ </div>
803
+ );
804
+ })
805
+ }
806
+ </div>
807
+ : null
808
+ }
809
+ {
810
+ infoTab == 'references' ?
811
+ <div className="referContainer">
812
+ <div className='refsBy'>ReferencedBy :</div>
813
+ <ul>
814
+ {
815
+ compName ?
816
+ compName.indexOf('__') > -1 ?
817
+ mdata[compName.substring(0, compName.indexOf('_'))] &&
818
+ mdata[compName.substring(0, compName.indexOf('_'))].referencedby.map((val, i) => {
819
+ return (
820
+ <li key={i} className='refsLin'>
821
+ <a className="link" href={'#' + val}>
822
+ {val}
823
+ </a>
824
+ </li>
825
+ );
826
+ })
827
+ : mdata[compName].referencedby.map((val, i) => {
828
+ return (
829
+ <li key={i} className='refsLin'>
830
+ <a className="link" href={'#' + val}>
831
+ {val}
832
+ </a>
833
+ </li>
834
+ );
835
+ })
836
+ : null
837
+ }
838
+ </ul>
839
+ <div className='refsBy'>References : </div>
840
+ <ul>
841
+ {
842
+ compName ? compName.indexOf('__') > -1
843
+ ? mdata[
844
+ compName.substring(0, compName.indexOf('_'))
845
+ ] &&
846
+ mdata[
847
+ compName.substring(0, compName.indexOf('_'))
848
+ ].references.map((val, i) => {
849
+ return (
850
+ <li key={i} className='refsLin'>
851
+ <a className="link" href={'#' + val}>
852
+ {val}
853
+ </a>
854
+ </li>
855
+ );
856
+ })
857
+ : mdata[compName].references.map((val, i) => {
858
+ return (
859
+ <li key={i} className='refsLin'>
860
+ <a className="link" href={'#' + val}>
861
+ {val}
862
+ </a>
863
+ </li>
864
+ );
865
+ })
866
+ : null
867
+ }
868
+ </ul>
869
+ </div>
870
+ : null
871
+ }
872
+ {
873
+ /*infoTab == 'visual' ?
874
+ <div>
875
+ {
876
+ Component[propComName] &&
877
+ Component[propComName].docs &&
878
+ Component[propComName].docs.images &&
879
+ Component[propComName].docs.images.map(image => {
880
+ return (
881
+ <div className="psdContainer">
882
+ <div className="imageContainer">
883
+ <img className="psdImage" src={image.view} />
884
+ </div>
885
+ <div>
886
+ <a className="psdLink" href={image.psd} target="_blank" download>
887
+ Download PSD
888
+ </a>
889
+ </div>
890
+ <div>
891
+ <a className="psdLink" href={image.view} target="_blank" download>
892
+ Download Image
893
+ </a>
894
+ </div>
895
+ </div>
896
+ );
897
+ })
898
+ }
899
+ </div>
900
+ : null */
901
+ }
902
+ </div>
903
+ </div>
904
+ </div>
905
+ </div>
906
+ </div>
907
+ </main>
908
+ );
909
+ }
910
+ }
911
+ class Search extends React.Component {
912
+ render() {
913
+ return (
914
+ <div className="searchContainer">
915
+ <input
916
+ type="text"
917
+ onChange={this.props.onChange}
918
+ placeholder="Search"
919
+ className="inputSearch" value={this.props.value}
920
+ />
921
+ {this.props.value.length>=1&&
922
+ <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
+ </div>
924
+ );
925
+ }
926
+ }
927
+
928
+ class ComponentList extends React.Component {
929
+ constructor(props) {
930
+ super(props);
931
+ this.state = {
932
+ toggle: false
933
+ };
934
+ }
935
+ componentDidMount(){
936
+ let {type,viewGroup}=this.props;
937
+ let element=document.getElementById(type);
938
+ viewGroup==type && element ?
939
+ element.scrollIntoView(true) && element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"})
940
+ :null
941
+ }
942
+
943
+ render() {
944
+ const { components, type, toggleGroup,viewGroup } = this.props;
945
+ let classNameTab = type == viewGroup ? " selected " : '';
946
+
947
+ return (
948
+ <div data-title={type}>
949
+ {
950
+ components.length>0&& <div className={"listItem dflex flexrow flexbasis alignVertical offSelection "+ classNameTab} onClick={toggleGroup.bind(this,type)} id={type}>
951
+ <i className={"flexshrink listIcon"}>
952
+ <svg className='svg'>
953
+ <use xlinkHref='#folder'></use>
954
+ </svg>
955
+ </i>
956
+ <span className="dotted flexgrow flexbasis listTitle">{type}</span>
957
+ {
958
+ components.length>0&&<i className={"flexshrink listCount"}>{(components.filter(function(el) {return el.toLowerCase().indexOf('__') > -1}).length)}</i>
959
+ }
960
+ </div>
961
+ }
962
+ <div className={ viewGroup == type ? 'activeComponent' : 'hide'}>
963
+ {
964
+ components.map((component, i) => {
965
+ let docsComp = component.search('__');
966
+ return (
967
+ <div className={((docsComp == -1) ? "componentMain" : "componentDocs")} key={'component' + i} >
968
+ <a
969
+ href={ docsComp == -1 && type != 'Global'&& type != 'Page' ? 'javascript:void(0);' : '#' + component}
970
+ className={"dflex flexrow flexbasis alignVertical offSelection "+ (this.props.selectedComponent == '#' + component ? 'active' : '') } >
971
+ <i className={"listIcon"}>
972
+ <svg className='svg'>
973
+ <use xlinkHref='#file'></use>
974
+ </svg>
975
+ </i>
976
+ <span className="dotted flexgrow flexbasis listTitle"> {docsComp == -1 ? component : component.split('__')[1]}</span>
977
+ {(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>}
978
+ </a>
979
+ </div>
980
+ );
981
+ })}
982
+ </div>
983
+ </div>
984
+ );
985
+ }
986
+ }
987
+
988
+ class CodeView extends React.Component {
989
+ constructor(props) {
990
+ super(props);
991
+
992
+ }
993
+ componentDidMount(){
994
+ let {compName,src} = this.props
995
+ let element = document.getElementById(compName)
996
+ if (componentList[compName] && typeof CodeMirror !== 'undefined' && element ) {
997
+ CodeMirror.fromTextArea(element, {
998
+ lineNumbers: false,
999
+ styleActiveLine: false,
1000
+ matchBrackets: false,
1001
+ theme: 'blackboard'
1002
+ });
1003
+ }
1004
+ }
1005
+
1006
+ render() {
1007
+ let {src,compName} = this.props
1008
+ return (
1009
+ <div className={"dflex flexrow flexbasis "}>
1010
+ <textarea className="srcCode" id={compName} defaultValue={src}/>
1011
+ </div>
1012
+ );
1013
+ }
1014
+ }
1015
+ var user={
1016
+ componentObj:{},
1017
+ componentList:{},
1018
+ dupCompList:[],
1019
+ objList:function(fName,gName,key,comp){
1020
+ if(this.componentList[key]){
1021
+ this.componentList[key]=comp;
1022
+ this.dupCompList.push(key)
1023
+ }
1024
+ else{
1025
+ this.componentList[key]=comp;
1026
+ }
1027
+ if(gName){
1028
+ if(!this.componentObj[fName]){
1029
+ this.componentObj[fName]={}
1030
+ }
1031
+ if(!this.componentObj[fName][gName]){
1032
+ this.componentObj[fName][gName] = [];
1033
+ this.componentObj[fName][gName].push(key)
1034
+ }
1035
+ else{
1036
+ this.componentObj[fName][gName].push(key)
1037
+ }
1038
+ }
1039
+ return {componentObj:this.componentObj,componentList:this.componentList}
1040
+ },
1041
+ renderDoc:function(compOBJ,dupCompList){
1042
+ return(
1043
+ ReactDOM.render(
1044
+ <Doc
1045
+ components={Component}
1046
+ componentObj={compOBJ}
1047
+ duplicates={dupCompList}
1048
+ />,
1049
+ react
1050
+ )
1051
+ )
1052
+ }
1053
+ }
1054
+ var compGroupObj=function(comp,key,compGroup){
1055
+ if (comp == 'React' || comp == 'ReactDOM' || comp =='renderToStaticMarkup') {
1056
+ return;
1057
+ }
1058
+ else if(comp=='_provider'){
1059
+ return user.objList(null,null,comp,compGroup[comp])
1060
+ }
1061
+ else{
1062
+ if(compGroup[comp].docs && compGroup[comp].docs.componentGroup ){
1063
+ let groupName = compGroup[comp].docs.componentGroup;
1064
+ let folderName = compGroup[comp].docs.folderName || "General";
1065
+ if(comp=='default'){
1066
+ return user.objList(folderName,groupName,key,compGroup[comp])
1067
+ }
1068
+ else{
1069
+ return user.objList(folderName,groupName,comp,compGroup[comp])
1070
+ }
1071
+ }
1072
+ }
1073
+ }
1074
+ Promise.all(Object.keys(Component).map((key) => {
1075
+ let componentKey=Component[key];
1076
+ if (key == 'React' || key == 'ReactDOM' || key=='renderToStaticMarkup') {
1077
+ return;
1078
+ }
1079
+ if(key=='_provider'){
1080
+ return compGroupObj(key,null,Component)
1081
+ }
1082
+ try{
1083
+ return(
1084
+ componentKey && componentKey.then((res)=>{
1085
+ let compList;
1086
+ Object.keys(res).forEach((comp)=>{
1087
+ let compGroup=res[comp];
1088
+ Object.keys(compGroup).forEach((comps)=>{
1089
+ compGroupObj(comps,key,compGroup)
1090
+ })
1091
+ })
1092
+ })
1093
+ )
1094
+ }catch(error){
1095
+ compGroupObj(key,null,Component)
1096
+ }
1097
+ })).then(()=>{
1098
+ window.componentList=user.componentList
1099
+ user.renderDoc(user.componentObj,user.dupCompList)
1100
+ })
1101
+ };
1102
+ var onLoader = function () {
1103
+ // Minimum resizable area
1104
+ var minWidth = 60;
1105
+ var minHeight = 40;
1106
+
1107
+ // Thresholds
1108
+ var FULLSCREEN_MARGINS = -10;
1109
+ var MARGINS = 15;
1110
+
1111
+ // End of what's configurable.
1112
+ var clicked = null;
1113
+ var onRightEdge, onBottomEdge, onLeftEdge, onTopEdge;
1114
+
1115
+ var rightScreenEdge, bottomScreenEdge;
1116
+
1117
+ var preSnapped;
1118
+
1119
+ var b, x, y;
1120
+
1121
+ var redraw = false;
1122
+
1123
+ var pane = document.getElementById( 'resize' );
1124
+ var ghostpane = document.getElementById( 'ghostpane' );
1125
+ function setBounds( element, x, y, w, h ) {
1126
+ element.style.left = x + 'px';
1127
+ element.style.top = y + 'px';
1128
+ element.style.width = w + 'px';
1129
+ element.style.height = h + 'px';
1130
+ }
1131
+
1132
+ function hintHide() {
1133
+ //setBounds(ghostpane, b.left, b.top, b.width, b.height);
1134
+ //ghostpane.style.opacity = 0;
1135
+ // var b = ghostpane.getBoundingClientRect();
1136
+ // ghostpane.style.top = b.top + b.height / 2;
1137
+ // ghostpane.style.left = b.left + b.width / 2;
1138
+ // ghostpane.style.width = 0;
1139
+ // ghostpane.style.height = 0;
1140
+ }
1141
+
1142
+ // Mouse events
1143
+ pane && pane.addEventListener( 'mousedown', onMouseDown );
1144
+ pane && document.addEventListener( 'mousemove', onMove );
1145
+ pane && document.addEventListener( 'mouseup', onUp );
1146
+
1147
+ // Touch events
1148
+ pane && pane.addEventListener( 'touchstart', onTouchDown );
1149
+ pane && document.addEventListener( 'touchmove', onTouchMove );
1150
+ pane && document.addEventListener( 'touchend', onTouchEnd );
1151
+
1152
+ function onTouchDown( e ) {
1153
+ onDown( e.touches[ 0 ] );
1154
+ e.preventDefault();
1155
+ }
1156
+
1157
+ function onTouchMove( e ) {
1158
+ onMove( e.touches[ 0 ] );
1159
+ }
1160
+
1161
+ function onTouchEnd( e ) {
1162
+ if ( e.touches.length == 0 ) onUp( e.changedTouches[ 0 ] );
1163
+ }
1164
+
1165
+ function onMouseDown( e ) {
1166
+ onDown( e );
1167
+ e.preventDefault();
1168
+ }
1169
+
1170
+ function onDown( e ) {
1171
+ calc( e );
1172
+
1173
+ var isResizing = onRightEdge || onBottomEdge || onTopEdge || onLeftEdge;
1174
+
1175
+ clicked = {
1176
+ x: x,
1177
+ y: y,
1178
+ cx: e.clientX,
1179
+ cy: e.clientY,
1180
+ w: b.width,
1181
+ h: b.height,
1182
+ isResizing: isResizing,
1183
+ isMoving: !isResizing && canMove(),
1184
+ onTopEdge: onTopEdge,
1185
+ onLeftEdge: onLeftEdge,
1186
+ onRightEdge: onRightEdge,
1187
+ onBottomEdge: onBottomEdge
1188
+ };
1189
+ }
1190
+
1191
+ function canMove() {
1192
+ return x > 0 && x < b.width && y > 0 && y < b.height && y < 30;
1193
+ }
1194
+
1195
+ function calc( e ) {
1196
+ b = pane.getBoundingClientRect();
1197
+ x = e.clientX - b.left;
1198
+ y = e.clientY - b.top;
1199
+
1200
+ onTopEdge = y < MARGINS;
1201
+ onLeftEdge = x < MARGINS;
1202
+ onRightEdge = x >= b.width - MARGINS;
1203
+ onBottomEdge = y >= b.height - MARGINS;
1204
+
1205
+ rightScreenEdge = window.innerWidth - MARGINS;
1206
+ bottomScreenEdge = window.innerHeight - MARGINS;
1207
+ }
1208
+
1209
+ var e;
1210
+
1211
+ function onMove( ee ) {
1212
+ calc( ee );
1213
+
1214
+ e = ee;
1215
+
1216
+ redraw = true;
1217
+ }
1218
+
1219
+ function animate() {
1220
+ requestAnimationFrame( animate );
1221
+
1222
+ if ( !redraw ) return;
1223
+
1224
+ redraw = false;
1225
+
1226
+ if ( clicked && clicked.isResizing ) {
1227
+ if ( clicked.onRightEdge ) pane.style.width = Math.max( x, minWidth ) + 'px';
1228
+ if ( clicked.onBottomEdge )
1229
+ pane.style.height = Math.max( y, minHeight ) + 'px';
1230
+
1231
+ if ( clicked.onLeftEdge ) {
1232
+ var currentWidth = Math.max(
1233
+ clicked.cx - e.clientX + clicked.w,
1234
+ minWidth
1235
+ );
1236
+ if ( currentWidth > minWidth ) {
1237
+ pane.style.width = currentWidth + 'px';
1238
+ // pane.style.left = e.clientX + 'px';
1239
+ }
1240
+ }
1241
+
1242
+ if ( clicked.onTopEdge ) {
1243
+ var currentHeight = Math.max(
1244
+ clicked.cy - e.clientY + clicked.h,
1245
+ minHeight
1246
+ );
1247
+ if ( currentHeight > minHeight ) {
1248
+ pane.style.height = currentHeight + 'px';
1249
+ pane.style.top = e.clientY + 'px';
1250
+ }
1251
+ }
1252
+
1253
+ hintHide();
1254
+
1255
+ return;
1256
+ }
1257
+
1258
+ if ( clicked && clicked.isMoving ) {
1259
+ if (
1260
+ b.top < FULLSCREEN_MARGINS ||
1261
+ b.left < FULLSCREEN_MARGINS ||
1262
+ b.right > window.innerWidth - FULLSCREEN_MARGINS ||
1263
+ b.bottom > window.innerHeight - FULLSCREEN_MARGINS
1264
+ ) {
1265
+ // hintFull();
1266
+ setBounds( ghostpane, 0, 0, window.innerWidth, window.innerHeight );
1267
+ ghostpane.style.opacity = 0.2;
1268
+ } else if ( b.top < MARGINS ) {
1269
+ // hintTop();
1270
+ setBounds( ghostpane, 0, 0, window.innerWidth, window.innerHeight / 2 );
1271
+ ghostpane.style.opacity = 0.2;
1272
+ } else if ( b.left < MARGINS ) {
1273
+ // hintLeft();
1274
+ setBounds( ghostpane, 0, 0, window.innerWidth / 2, window.innerHeight );
1275
+ ghostpane.style.opacity = 0.2;
1276
+ } else if ( b.right > rightScreenEdge ) {
1277
+ // hintRight();
1278
+ setBounds(
1279
+ ghostpane,
1280
+ window.innerWidth / 2,
1281
+ 0,
1282
+ window.innerWidth / 2,
1283
+ window.innerHeight
1284
+ );
1285
+ ghostpane.style.opacity = 0.2;
1286
+ } else if ( b.bottom > bottomScreenEdge ) {
1287
+ // hintBottom();
1288
+ setBounds(
1289
+ ghostpane,
1290
+ 0,
1291
+ window.innerHeight / 2,
1292
+ window.innerWidth,
1293
+ window.innerWidth / 2
1294
+ );
1295
+ ghostpane.style.opacity = 0.2;
1296
+ } else {
1297
+ hintHide();
1298
+ }
1299
+
1300
+ if ( preSnapped ) {
1301
+ setBounds(
1302
+ pane,
1303
+ e.clientX - preSnapped.width / 2,
1304
+ e.clientY - Math.min( clicked.y, preSnapped.height ),
1305
+ preSnapped.width,
1306
+ preSnapped.height
1307
+ );
1308
+ return;
1309
+ }
1310
+
1311
+ // moving
1312
+ pane.style.top = e.clientY - clicked.y + 'px';
1313
+ //pane.style.left = e.clientX - clicked.x + 'px';
1314
+
1315
+ return;
1316
+ }
1317
+
1318
+ // This code executes when mouse moves without clicking
1319
+
1320
+ // style cursor
1321
+ if ( ( onRightEdge && onBottomEdge ) || ( onLeftEdge && onTopEdge ) ) {
1322
+ pane.style.cursor = 'nwse-resize';
1323
+ } else if ( ( onRightEdge && onTopEdge ) || ( onBottomEdge && onLeftEdge ) ) {
1324
+ pane.style.cursor = 'nesw-resize';
1325
+ } else if ( onRightEdge || onLeftEdge ) {
1326
+ pane.style.cursor = 'ew-resize';
1327
+ } else if ( onBottomEdge || onTopEdge ) {
1328
+ pane.style.cursor = 'ns-resize';
1329
+ } else if ( canMove() ) {
1330
+ pane.style.cursor = 'move';
1331
+ } else {
1332
+ pane.style.cursor = 'default';
1333
+ }
1334
+ }
1335
+
1336
+ animate();
1337
+
1338
+ function onUp( e ) {
1339
+ calc( e );
1340
+
1341
+ if ( clicked && clicked.isMoving ) {
1342
+ // Snap
1343
+ var snapped = {
1344
+ width: b.width,
1345
+ height: b.height
1346
+ };
1347
+
1348
+ if (
1349
+ b.top < FULLSCREEN_MARGINS ||
1350
+ b.left < FULLSCREEN_MARGINS ||
1351
+ b.right > window.innerWidth - FULLSCREEN_MARGINS ||
1352
+ b.bottom > window.innerHeight - FULLSCREEN_MARGINS
1353
+ ) {
1354
+ // hintFull();
1355
+ setBounds( pane, 0, 0, window.innerWidth, window.innerHeight );
1356
+ preSnapped = snapped;
1357
+ } else if ( b.top < MARGINS ) {
1358
+ // hintTop();
1359
+ setBounds( pane, 0, 0, window.innerWidth, window.innerHeight / 2 );
1360
+ preSnapped = snapped;
1361
+ } else if ( b.left < MARGINS ) {
1362
+ // hintLeft();
1363
+ setBounds( pane, 0, 0, window.innerWidth / 2, window.innerHeight );
1364
+ preSnapped = snapped;
1365
+ } else if ( b.right > rightScreenEdge ) {
1366
+ // hintRight();
1367
+ setBounds(
1368
+ pane,
1369
+ window.innerWidth / 2,
1370
+ 0,
1371
+ window.innerWidth / 2,
1372
+ window.innerHeight
1373
+ );
1374
+ preSnapped = snapped;
1375
+ } else if ( b.bottom > bottomScreenEdge ) {
1376
+ // hintBottom();
1377
+ setBounds(
1378
+ pane,
1379
+ 0,
1380
+ window.innerHeight / 2,
1381
+ window.innerWidth,
1382
+ window.innerWidth / 2
1383
+ );
1384
+ preSnapped = snapped;
1385
+ } else {
1386
+ preSnapped = null;
1387
+ }
1388
+
1389
+ hintHide();
1390
+ }
1391
+
1392
+ clicked = null;
1393
+ }
1394
+ };
1395
+
1396
+ </script>
1397
+ <script type="text/javascript">
1398
+ var html =
1399
+ "<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>";
1400
+ var iframe = document.getElementById( 'ifm' );
1401
+ var frameDoc = iframe.document;
1402
+ if ( iframe.contentWindow ) {
1403
+ frameDoc = iframe.contentWindow.document;
1404
+ frameDoc.open();
1405
+ frameDoc.writeln( html );
1406
+ frameDoc.close();
1407
+ } else {
1408
+ }
1409
+ </script>
1410
+ <div style="visibility: hidden;height: 0;width: 0;height:0">
1411
+ <svg
1412
+ xmlSpace="preserve"
1413
+ version="1.1"
1414
+ xmlns="http://www.w3.org/2000/svg"
1415
+ xmlnsXlink="http://www.w3.org/1999/xlink"
1416
+ >
1417
+ <symbol id="home" x="0px" y="0px" viewBox="0 0 495.398 495.398" fill='#FFFFFF' enableBackground="new 0 0 495.398 495.398">
1418
+ <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"/>
1419
+ <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"/>
1420
+ </symbol>
1421
+ <symbol
1422
+ id='bottomArrow'
1423
+ viewBox="0 0 792 792"
1424
+ >
1425
+ <polygon
1426
+ 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"
1427
+ />
1428
+
1429
+ </symbol>
1430
+ <symbol id="reload" viewBox="0 0 28.265 28.265">
1431
+ <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"/>
1432
+ </symbol>
1433
+ <symbol id='newTab' x="0px" y="0px" viewBox="0 0 26 26" enableBackground='new 0 0 26 26'>
1434
+ <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"/>
1435
+ <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"/>
1436
+ </symbol>
1437
+ <symbol id='RTL'
1438
+ width="13" height="16"
1439
+ viewBox="0 0 13 16"
1440
+ fill="none"
1441
+ >
1442
+ <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"/>
1443
+ </symbol>
1444
+ <symbol id="rem" enableBackground="new 0 0 458.353 458.353" viewBox="0 0 458.353 458.353">
1445
+ <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"/>
1446
+ <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"/>
1447
+ </symbol>
1448
+ <symbol id='fullScreen' viewBox="0 0 18 18">
1449
+ <path d="M4.5 11H3v4h4v-1.5H4.5V11zM3 7h1.5V4.5H7V3H3v4zm10.5 6.5H11V15h4v-4h-1.5v2.5zM11 3v1.5h2.5V7H15V3h-4z"/>
1450
+ </symbol>
1451
+ <symbol id='folder' viewBox="0 0 60 60" >
1452
+ <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"/>
1453
+ </symbol>
1454
+ <symbol id='file' viewBox="0 0 512 512" >
1455
+ <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"/>
1456
+ <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"/>
1457
+ <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"/>
1458
+ <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"/>
1459
+ <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"/>
1460
+ </symbol>
1461
+ <symbol id="pencil" viewBox="0 0 512 512">
1462
+ <g>
1463
+ <polygon points="85.333,282.64 85.333,362.64 165.333,362.64 378.667,149.307 298.667,69.307 "/>
1464
+ <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
1465
+ C450.027,77.947,450.027,64.4,441.707,56.08z"/>
906
1466
  </g>
1467
+ <g >
1468
+ <rect y="426.64" width="512" height="85.333"/>
907
1469
  </g>
908
- </g>
909
- </svg></i>
910
- <span className="dotted flexgrow flexbasis listTitle"> {docsComp == -1 ? component : component.split('__')[1]}</span>
911
- {(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>}
912
-
913
- </a>
914
-
915
- </div>
916
- );
917
- })}
918
- </div>
919
- </div>
920
- );
921
- }
922
- }
923
-
924
-
925
-
926
-
927
-
928
- class CodeView extends React.Component {
929
- constructor(props) {
930
- super(props);
931
-
932
- }
933
- componentDidMount()
934
- {
935
-
936
- let {compName,src} = this.props
937
-
938
-
939
- let element = document.getElementById(compName)
940
-
941
- if (Component[compName] && typeof CodeMirror !== 'undefined' && element ) {
942
-
943
- CodeMirror.fromTextArea(element, {
944
- lineNumbers: false,
945
- styleActiveLine: false,
946
- matchBrackets: false,
947
- theme: 'blackboard'
948
- });
949
- }
950
-
951
-
952
-
953
- }
954
-
955
- render() {
956
- let {src,compName} = this.props
957
- return (
958
- <div className={"dflex flexrow flexbasis "}>
959
- <textarea className="srcCode" id={compName} defaultValue={src}/>
960
- </div>
961
- );
962
- }
963
- }
964
-
965
-
966
-
967
- var componentObj = {
968
-
969
- }
970
-
971
-
972
- Object.keys(Component).forEach(key => {
973
- if (key == 'React' || key == 'ReactDOM') {
974
- return;
975
- }
976
-
977
-
978
- if (Component[key].docs &&Component[key].docs.componentGroup )
979
-
980
- {
981
- let groupName = Component[key].docs.componentGroup
982
- let folderName = Component[key].docs.folderName || "General";
983
- if(!componentObj[folderName]){
984
- componentObj[folderName]={}
985
- }
986
- if(!componentObj[folderName][groupName])
987
- {
988
- componentObj[folderName][groupName] = [] ;
989
- componentObj[folderName][groupName].push(key)
990
- }
991
- else
992
- {
993
- componentObj[folderName][groupName].push(key)
994
- }
995
-
996
- }
997
-
998
- });
999
-
1000
-
1001
-
1002
-
1003
-
1004
- ReactDOM.render(
1005
- <Doc
1006
- components={Component}
1007
- componentObj={componentObj}
1008
- />,
1009
- react
1010
- );
1011
- };
1012
- </script>
1013
- <script type="text/javascript">
1014
- var html =
1015
- "<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>";
1016
- var iframe = document.getElementById( 'ifm' );
1017
- var frameDoc = iframe.document;
1018
- if ( iframe.contentWindow ) {
1019
- frameDoc = iframe.contentWindow.document;
1020
- frameDoc.open();
1021
- frameDoc.writeln( html );
1022
- frameDoc.close();
1023
- } else {
1024
- }
1025
- </script>
1026
- <script>
1027
- window.onload = function () {
1028
- // Minimum resizable area
1029
- var minWidth = 60;
1030
- var minHeight = 40;
1031
-
1032
- // Thresholds
1033
- var FULLSCREEN_MARGINS = -10;
1034
- var MARGINS = 15;
1035
-
1036
- // End of what's configurable.
1037
- var clicked = null;
1038
- var onRightEdge, onBottomEdge, onLeftEdge, onTopEdge;
1039
-
1040
- var rightScreenEdge, bottomScreenEdge;
1041
-
1042
- var preSnapped;
1043
-
1044
- var b, x, y;
1045
-
1046
- var redraw = false;
1047
-
1048
- var pane = document.getElementById( 'resize' );
1049
- var ghostpane = document.getElementById( 'ghostpane' );
1050
-
1051
- function setBounds( element, x, y, w, h ) {
1052
- element.style.left = x + 'px';
1053
- element.style.top = y + 'px';
1054
- element.style.width = w + 'px';
1055
- element.style.height = h + 'px';
1056
- }
1057
-
1058
- function hintHide() {
1059
- //setBounds(ghostpane, b.left, b.top, b.width, b.height);
1060
- //ghostpane.style.opacity = 0;
1061
- // var b = ghostpane.getBoundingClientRect();
1062
- // ghostpane.style.top = b.top + b.height / 2;
1063
- // ghostpane.style.left = b.left + b.width / 2;
1064
- // ghostpane.style.width = 0;
1065
- // ghostpane.style.height = 0;
1066
- }
1067
-
1068
- // Mouse events
1069
- pane.addEventListener( 'mousedown', onMouseDown );
1070
- document.addEventListener( 'mousemove', onMove );
1071
- document.addEventListener( 'mouseup', onUp );
1072
-
1073
- // Touch events
1074
- pane.addEventListener( 'touchstart', onTouchDown );
1075
- document.addEventListener( 'touchmove', onTouchMove );
1076
- document.addEventListener( 'touchend', onTouchEnd );
1077
-
1078
- function onTouchDown( e ) {
1079
- onDown( e.touches[ 0 ] );
1080
- e.preventDefault();
1081
- }
1082
-
1083
- function onTouchMove( e ) {
1084
- onMove( e.touches[ 0 ] );
1085
- }
1086
-
1087
- function onTouchEnd( e ) {
1088
- if ( e.touches.length == 0 ) onUp( e.changedTouches[ 0 ] );
1089
- }
1090
-
1091
- function onMouseDown( e ) {
1092
- onDown( e );
1093
- e.preventDefault();
1094
- }
1095
-
1096
- function onDown( e ) {
1097
- calc( e );
1098
-
1099
- var isResizing = onRightEdge || onBottomEdge || onTopEdge || onLeftEdge;
1100
-
1101
- clicked = {
1102
- x: x,
1103
- y: y,
1104
- cx: e.clientX,
1105
- cy: e.clientY,
1106
- w: b.width,
1107
- h: b.height,
1108
- isResizing: isResizing,
1109
- isMoving: !isResizing && canMove(),
1110
- onTopEdge: onTopEdge,
1111
- onLeftEdge: onLeftEdge,
1112
- onRightEdge: onRightEdge,
1113
- onBottomEdge: onBottomEdge
1114
- };
1115
- }
1116
-
1117
- function canMove() {
1118
- return x > 0 && x < b.width && y > 0 && y < b.height && y < 30;
1119
- }
1120
-
1121
- function calc( e ) {
1122
- b = pane.getBoundingClientRect();
1123
- x = e.clientX - b.left;
1124
- y = e.clientY - b.top;
1125
-
1126
- onTopEdge = y < MARGINS;
1127
- onLeftEdge = x < MARGINS;
1128
- onRightEdge = x >= b.width - MARGINS;
1129
- onBottomEdge = y >= b.height - MARGINS;
1130
-
1131
- rightScreenEdge = window.innerWidth - MARGINS;
1132
- bottomScreenEdge = window.innerHeight - MARGINS;
1133
- }
1134
-
1135
- var e;
1136
-
1137
- function onMove( ee ) {
1138
- calc( ee );
1139
-
1140
- e = ee;
1141
-
1142
- redraw = true;
1143
- }
1144
-
1145
- function animate() {
1146
- requestAnimationFrame( animate );
1147
-
1148
- if ( !redraw ) return;
1149
-
1150
- redraw = false;
1151
-
1152
- if ( clicked && clicked.isResizing ) {
1153
- if ( clicked.onRightEdge ) pane.style.width = Math.max( x, minWidth ) + 'px';
1154
- if ( clicked.onBottomEdge )
1155
- pane.style.height = Math.max( y, minHeight ) + 'px';
1156
-
1157
- if ( clicked.onLeftEdge ) {
1158
- var currentWidth = Math.max(
1159
- clicked.cx - e.clientX + clicked.w,
1160
- minWidth
1161
- );
1162
- if ( currentWidth > minWidth ) {
1163
- pane.style.width = currentWidth + 'px';
1164
- // pane.style.left = e.clientX + 'px';
1165
- }
1166
- }
1167
-
1168
- if ( clicked.onTopEdge ) {
1169
- var currentHeight = Math.max(
1170
- clicked.cy - e.clientY + clicked.h,
1171
- minHeight
1172
- );
1173
- if ( currentHeight > minHeight ) {
1174
- pane.style.height = currentHeight + 'px';
1175
- pane.style.top = e.clientY + 'px';
1176
- }
1177
- }
1178
-
1179
- hintHide();
1180
-
1181
- return;
1182
- }
1183
-
1184
- if ( clicked && clicked.isMoving ) {
1185
- if (
1186
- b.top < FULLSCREEN_MARGINS ||
1187
- b.left < FULLSCREEN_MARGINS ||
1188
- b.right > window.innerWidth - FULLSCREEN_MARGINS ||
1189
- b.bottom > window.innerHeight - FULLSCREEN_MARGINS
1190
- ) {
1191
- // hintFull();
1192
- setBounds( ghostpane, 0, 0, window.innerWidth, window.innerHeight );
1193
- ghostpane.style.opacity = 0.2;
1194
- } else if ( b.top < MARGINS ) {
1195
- // hintTop();
1196
- setBounds( ghostpane, 0, 0, window.innerWidth, window.innerHeight / 2 );
1197
- ghostpane.style.opacity = 0.2;
1198
- } else if ( b.left < MARGINS ) {
1199
- // hintLeft();
1200
- setBounds( ghostpane, 0, 0, window.innerWidth / 2, window.innerHeight );
1201
- ghostpane.style.opacity = 0.2;
1202
- } else if ( b.right > rightScreenEdge ) {
1203
- // hintRight();
1204
- setBounds(
1205
- ghostpane,
1206
- window.innerWidth / 2,
1207
- 0,
1208
- window.innerWidth / 2,
1209
- window.innerHeight
1210
- );
1211
- ghostpane.style.opacity = 0.2;
1212
- } else if ( b.bottom > bottomScreenEdge ) {
1213
- // hintBottom();
1214
- setBounds(
1215
- ghostpane,
1216
- 0,
1217
- window.innerHeight / 2,
1218
- window.innerWidth,
1219
- window.innerWidth / 2
1220
- );
1221
- ghostpane.style.opacity = 0.2;
1222
- } else {
1223
- hintHide();
1224
- }
1225
-
1226
- if ( preSnapped ) {
1227
- setBounds(
1228
- pane,
1229
- e.clientX - preSnapped.width / 2,
1230
- e.clientY - Math.min( clicked.y, preSnapped.height ),
1231
- preSnapped.width,
1232
- preSnapped.height
1233
- );
1234
- return;
1235
- }
1236
-
1237
- // moving
1238
- pane.style.top = e.clientY - clicked.y + 'px';
1239
- //pane.style.left = e.clientX - clicked.x + 'px';
1240
-
1241
- return;
1242
- }
1243
-
1244
- // This code executes when mouse moves without clicking
1245
-
1246
- // style cursor
1247
- if ( ( onRightEdge && onBottomEdge ) || ( onLeftEdge && onTopEdge ) ) {
1248
- pane.style.cursor = 'nwse-resize';
1249
- } else if ( ( onRightEdge && onTopEdge ) || ( onBottomEdge && onLeftEdge ) ) {
1250
- pane.style.cursor = 'nesw-resize';
1251
- } else if ( onRightEdge || onLeftEdge ) {
1252
- pane.style.cursor = 'ew-resize';
1253
- } else if ( onBottomEdge || onTopEdge ) {
1254
- pane.style.cursor = 'ns-resize';
1255
- } else if ( canMove() ) {
1256
- pane.style.cursor = 'move';
1257
- } else {
1258
- pane.style.cursor = 'default';
1259
- }
1260
- }
1261
-
1262
- animate();
1263
-
1264
- function onUp( e ) {
1265
- calc( e );
1266
-
1267
- if ( clicked && clicked.isMoving ) {
1268
- // Snap
1269
- var snapped = {
1270
- width: b.width,
1271
- height: b.height
1272
- };
1273
-
1274
- if (
1275
- b.top < FULLSCREEN_MARGINS ||
1276
- b.left < FULLSCREEN_MARGINS ||
1277
- b.right > window.innerWidth - FULLSCREEN_MARGINS ||
1278
- b.bottom > window.innerHeight - FULLSCREEN_MARGINS
1279
- ) {
1280
- // hintFull();
1281
- setBounds( pane, 0, 0, window.innerWidth, window.innerHeight );
1282
- preSnapped = snapped;
1283
- } else if ( b.top < MARGINS ) {
1284
- // hintTop();
1285
- setBounds( pane, 0, 0, window.innerWidth, window.innerHeight / 2 );
1286
- preSnapped = snapped;
1287
- } else if ( b.left < MARGINS ) {
1288
- // hintLeft();
1289
- setBounds( pane, 0, 0, window.innerWidth / 2, window.innerHeight );
1290
- preSnapped = snapped;
1291
- } else if ( b.right > rightScreenEdge ) {
1292
- // hintRight();
1293
- setBounds(
1294
- pane,
1295
- window.innerWidth / 2,
1296
- 0,
1297
- window.innerWidth / 2,
1298
- window.innerHeight
1299
- );
1300
- preSnapped = snapped;
1301
- } else if ( b.bottom > bottomScreenEdge ) {
1302
- // hintBottom();
1303
- setBounds(
1304
- pane,
1305
- 0,
1306
- window.innerHeight / 2,
1307
- window.innerWidth,
1308
- window.innerWidth / 2
1309
- );
1310
- preSnapped = snapped;
1311
- } else {
1312
- preSnapped = null;
1313
- }
1314
-
1315
- hintHide();
1316
- }
1317
-
1318
- clicked = null;
1319
- }
1320
- };
1321
-
1322
- function shrinlLhs( state ) {
1323
- var leftpanel = document.getElementById( 'leftPanel' );
1324
- var winWidth = ( window.window.innerWidth <= 1025 ) ? true : false;
1325
- if ( winWidth && state ) {
1326
- if ( leftpanel.classList.contains( 'showmenu' ) ) {
1327
- leftpanel.classList.remove( 'showmenu' );
1328
- }
1329
- else {
1330
- leftpanel.classList.add( 'showmenu' );
1331
- }
1332
- }
1333
- else {
1334
- leftpanel.classList.remove( 'showmenu' );
1335
- }
1336
- }
1337
-
1338
- </script>
1339
-
1470
+ </symbol>
1471
+ <svg
1472
+ x='0px'
1473
+ y='0px'
1474
+ viewBox='0 0 512 512'
1475
+ enableBackground= 'new 0 0 512 512'
1476
+ id='smileIcon'
1477
+ >
1478
+ <path
1479
+ fill= '#f00'
1480
+ d='M344.354,381.58c-1.33-1.651-33.207-40.458-88.354-40.458
1481
+ 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
1482
+ 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
1483
+ 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
1484
+ 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
1485
+ 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
1486
+ 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
1487
+ S326.327,212.122,344,212.122z'
1488
+ />
1489
+ </svg>
1490
+ </svg>
1491
+ </div>
1340
1492
  </body>
1341
-
1342
-
1343
-
1344
-
1345
-
1346
-
1347
1493
  </html>