feat(react): add some icons

alibaba · Dec 23, 2021 · 341422b · 341422b
1 parent fabf45d
commit 341422b
Show file tree

Hide file tree

Showing 5 changed files with 1,117 additions and 1,000 deletions.
diff --git a/packages/react-settings-form/src/components/MonacoInput/config.ts b/packages/react-settings-form/src/components/MonacoInput/config.ts
@@ -3,36 +3,42 @@ import chromeTheme from './themes/chrome'
 import monokaiTheme from './themes/monokai'
 import { format } from './format'
 
-loader.init().then((monaco) => {
-  monaco.editor.defineTheme('monokai', monokaiTheme as any)
-  monaco.editor.defineTheme('chrome-devtools', chromeTheme as any)
-  monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
-    target: monaco.languages.typescript.ScriptTarget.Latest,
-    allowNonTsExtensions: true,
-    moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
-    module: monaco.languages.typescript.ModuleKind.CommonJS,
-    noEmit: true,
-    esModuleInterop: true,
-    jsx: monaco.languages.typescript.JsxEmit.React,
-    reactNamespace: 'React',
-    allowJs: true,
-  })
+let initialized = false
 
-  monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
-    noSemanticValidation: false,
-    noSyntaxValidation: true,
-  })
-  monaco.languages.registerDocumentFormattingEditProvider('typescript', {
-    async provideDocumentFormattingEdits(model) {
-      return [
-        {
-          text: await format(
-            model['getDesignerLanguage']?.() || 'typescript',
-            model.getValue()
-          ),
-          range: model.getFullModelRange(),
-        },
-      ]
-    },
+export const initMonaco = () => {
+  if (initialized) return
+  loader.init().then((monaco) => {
+    monaco.editor.defineTheme('monokai', monokaiTheme as any)
+    monaco.editor.defineTheme('chrome-devtools', chromeTheme as any)
+    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+      target: monaco.languages.typescript.ScriptTarget.Latest,
+      allowNonTsExtensions: true,
+      moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+      module: monaco.languages.typescript.ModuleKind.CommonJS,
+      noEmit: true,
+      esModuleInterop: true,
+      jsx: monaco.languages.typescript.JsxEmit.React,
+      reactNamespace: 'React',
+      allowJs: true,
+    })
+
+    monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+      noSemanticValidation: false,
+      noSyntaxValidation: true,
+    })
+    monaco.languages.registerDocumentFormattingEditProvider('typescript', {
+      async provideDocumentFormattingEdits(model) {
+        return [
+          {
+            text: await format(
+              model['getDesignerLanguage']?.() || 'typescript',
+              model.getValue()
+            ),
+            range: model.getFullModelRange(),
+          },
+        ]
+      },
+    })
+    initialized = true
   })
-})
+}
diff --git a/packages/react-settings-form/src/components/MonacoInput/format.ts b/packages/react-settings-form/src/components/MonacoInput/format.ts
@@ -12,12 +12,17 @@ interface IPrettierModule {
   }
 }
 
-const prettier: Promise<IPrettierModule> = new Function(
-  `return import("${getNpmCDNRegistry()}/prettier@2.x/esm/standalone.mjs")`
-)()
+const cache: { prettier: Promise<IPrettierModule> } = {
+  prettier: null,
+}
 
 export const format = async (language: string, source: string) => {
-  return prettier.then((module) => {
+  cache.prettier =
+    cache.prettier ||
+    new Function(
+      `return import("${getNpmCDNRegistry()}/prettier@2.x/esm/standalone.mjs")`
+    )()
+  return cache.prettier.then((module) => {
     if (
       language === 'javascript.expression' ||
       language === 'typescript.expression'

diff --git a/packages/react-settings-form/src/components/MonacoInput/index.tsx b/packages/react-settings-form/src/components/MonacoInput/index.tsx
@@ -9,6 +9,7 @@ import { format } from './format'
 import cls from 'classnames'
 import './styles.less'
 import './config'
+import { initMonaco } from './config'
 
 export type Monaco = typeof monaco
 export interface MonacoInputProps extends EditorProps {
@@ -53,6 +54,7 @@ export const MonacoInput: React.FC<MonacoInputProps> & {
 
   useEffect(() => {
     unmountedRef.current = false
+    initMonaco()
     return () => {
       if (extraLibRef.current) {
         extraLibRef.current.dispose()

diff --git a/packages/react/src/icons/sources.tsx b/packages/react/src/icons/sources.tsx
@@ -3268,3 +3268,110 @@ export const EntitySource = (
     </g>
   </g>
 )
+
+export const ImageEntitySource = (
+  <g stroke="none" fill="none">
+    <path
+      d="M944,0 C988.18278,0 1024,35.81722 1024,80 L1024,944 C1024,988.18278 988.18278,1024 944,1024 L80,1024 C35.81722,1024 0,988.18278 0,944 L0,80 C0,35.81722 35.81722,0 80,0 L944,0 Z M944,20 L80,20 C47.1942859,20 20.5378857,46.328343 20,79.0077903 L20,80 L20,944 C20,976.805714 46.328343,1003.46211 79.0077903,1004 L80,1004 L944,1004 C976.805714,1004 1003.46211,977.671657 1004,944.99221 L1004,944 L1004,80 C1004,47.1942859 977.671657,20.5378857 944.99221,20 L944,20 Z"
+      fill="#999999"
+    ></path>
+    <rect
+      fill="#999999"
+      transform="translate(513.500000, 210.000000) scale(-1, 1) rotate(630.000000) translate(-513.500000, -210.000000) "
+      x="503.5"
+      y="-290.5"
+      width="20"
+      height="1001"
+      rx="10"
+    ></rect>
+    <path
+      d="M501.745443,308.887976 L258,449.614473 C251.811978,453.187129 248,459.78967 248,466.934982 L248,748.387976 C248,755.533288 251.811978,762.135828 258,765.708484 L501.745443,906.434982 C507.933465,910.007637 515.557422,910.007637 521.745443,906.434982 L765.490887,765.708484 C771.678908,762.135828 775.490887,755.533288 775.490887,748.387976 L775.490887,466.934982 C775.490887,459.78967 771.678908,453.187129 765.490887,449.614473 L521.745443,308.887976 C515.557422,305.31532 507.933465,305.31532 501.745443,308.887976 Z M268,466.934982 L511.745443,326.208484 L755.490887,466.934982 L755.490887,748.387976 L511.745443,889.114473 L268,748.387976 L268,466.934982 Z"
+      fill="#979797"
+    ></path>
+    <path
+      d="M444.694491,438 C484.071424,438 515.992736,469.921312 515.992736,509.298246 C515.992736,548.675179 484.071424,580.596491 444.694491,580.596491 C405.317557,580.596491 373.396245,548.675179 373.396245,509.298246 C373.396245,469.921312 405.317557,438 444.694491,438 Z M444.694491,458 C416.363252,458 393.396245,480.967007 393.396245,509.298246 C393.396245,537.629484 416.363252,560.596491 444.694491,560.596491 C473.025729,560.596491 495.992736,537.629484 495.992736,509.298246 C495.992736,480.967007 473.025729,458 444.694491,458 Z"
+      fill="var(--dn-brand-color)"
+    ></path>
+    <path
+      d="M622.492294,598.549112 C638.021928,582.837333 663.348097,582.689676 679.059875,598.21931 C680.206394,599.352537 681.283184,600.553865 682.28442,601.816661 L682.778715,602.45315 L773.63287,721.908356 L757.714006,734.015782 L666.85985,614.560576 C666.290581,613.8121 665.669233,613.104705 665.00043,612.443656 C657.234839,604.768089 644.771927,604.752006 636.986319,612.340748 L636.71664,612.608556 L532.459335,718.088677 C519.538645,731.160912 499.394504,733.730454 483.623258,724.384289 L483.146692,724.097423 L416.986275,683.650209 C408.549633,678.492463 397.630586,680.28107 391.275853,687.807782 L391.033706,688.100098 L312.844261,784.306964 L297.323668,771.693036 L375.513113,675.48617 C388.019775,660.097561 409.885948,656.215893 426.904049,666.277232 L427.418251,666.586391 L493.578668,707.033605 C501.383946,711.805367 511.413908,710.666156 517.948964,704.312903 L518.23499,704.029232 L622.492294,598.549112 Z"
+      fill="var(--dn-brand-color)"
+    ></path>
+  </g>
+)
+
+export const FileEntitySource = (
+  <g fill="none">
+    <rect
+      stroke="#999999"
+      strokeWidth="20"
+      x="10"
+      y="10"
+      width="1004"
+      height="1004"
+      rx="80"
+    ></rect>
+    <rect
+      fill="#999999"
+      transform="translate(513.500000, 210.000000) scale(-1, 1) rotate(630.000000) translate(-513.500000, -210.000000) "
+      x="503.5"
+      y="-290.5"
+      width="20"
+      height="1001"
+      rx="10"
+    ></rect>
+    <path
+      d="M502,308.887976 L258.254557,449.614473 C252.066535,453.187129 248.254557,459.78967 248.254557,466.934982 L248.254557,748.387976 C248.254557,755.533288 252.066535,762.135828 258.254557,765.708484 L502,906.434982 C508.188022,910.007637 515.811978,910.007637 522,906.434982 L765.745443,765.708484 C771.933465,762.135828 775.745443,755.533288 775.745443,748.387976 L775.745443,466.934982 C775.745443,459.78967 771.933465,453.187129 765.745443,449.614473 L522,308.887976 C515.811978,305.31532 508.188022,305.31532 502,308.887976 Z M268.254557,466.934982 L512,326.208484 L755.745443,466.934982 L755.745443,748.387976 L512,889.114473 L268.254557,748.387976 L268.254557,466.934982 Z"
+      fill="#979797"
+    ></path>
+    <path
+      d="M476.010023,471.661479 C482.948688,471.661479 489.555133,474.537023 494.277456,479.566204 L494.507,479.815 L528.279384,507.830929 L528.855274,508.51466 C529.760103,509.58893 531.06784,510.23569 532.462732,510.308062 L532.725219,510.314865 L590.812749,510.314865 C604.514472,510.314865 615.647855,521.311232 615.869111,534.931862 L615.872467,535.345403 L615.999957,578.970776 L596.000043,579.029224 L595.87251,535.374626 C595.87251,532.653735 593.724837,530.43446 591.032231,530.31954 L590.812749,530.314865 L532.725219,530.314865 C525.786554,530.314865 519.180109,527.439321 514.457786,522.41014 L514.223,522.156 L480.455858,494.145415 L479.879968,493.461684 C478.975139,492.387415 477.667402,491.740654 476.27251,491.668282 L476.010023,491.661479 L396.039841,491.661479 C396.025172,491.661479 396.012354,491.669407 396.005439,491.681211 L396,491.70132 L396,714 C396,719.42924 400.326671,723.847932 405.720095,723.996158 L406,724 L484,724 L484,744 L406,744 C389.597143,744 376.268943,730.835828 376.004019,714.496105 L376,714 L376,491.70132 C376,480.74891 384.786196,471.848626 395.694665,471.664392 L396.039841,471.661479 L476.010023,471.661479 Z"
+      fill="var(--dn-brand-color)"
+    ></path>
+    <path
+      d="M617.749004,569 L450.61788,569 C434.049337,569 420.61788,582.431458 420.61788,599 L420.61788,714 C420.61788,730.568542 434.049337,744 450.61788,744 L617.749004,744 C634.317546,744 647.749004,730.568542 647.749004,714 L647.749004,599 C647.749004,582.431458 634.317546,569 617.749004,569 Z M450.61788,589 L617.749004,589 C623.271851,589 627.749004,593.477153 627.749004,599 L627.749004,714 C627.749004,719.522847 623.271851,724 617.749004,724 L450.61788,724 C445.095032,724 440.61788,719.522847 440.61788,714 L440.61788,599 C440.61788,593.477153 445.095032,589 450.61788,589 Z"
+      fill="var(--dn-brand-color)"
+      transform="translate(534.183442, 656.500000) scale(1, -1) translate(-534.183442, -656.500000) "
+    ></path>
+  </g>
+)
+
+export const FileSource = (
+  <g stroke="none" fill="none">
+    <rect
+      fill="var(--dn-brand-color)"
+      transform="translate(612.000000, 628.500000) scale(-1, -1) rotate(900.000000) translate(-612.000000, -628.500000) "
+      x="602"
+      y="478.5"
+      width="20"
+      height="300"
+      rx="10"
+    ></rect>
+    <path
+      d="M681.5,600.712157 C687.022847,600.712157 691.5,605.18931 691.5,610.712157 C691.5,616.141397 687.173329,620.560089 681.779905,620.708316 L681.5,620.712157 L562.5,620.712157 C557.07076,620.712157 552.652068,625.038828 552.503842,630.432253 L552.5,630.712157 L552.5,749.712157 C552.5,755.235005 548.022847,759.712157 542.5,759.712157 C537.07076,759.712157 532.652068,755.385487 532.503842,749.992062 L532.5,749.712157 L532.5,630.712157 C532.5,614.3093 545.664172,600.9811 562.003895,600.716177 L562.5,600.712157 L681.5,600.712157 Z"
+      fill="var(--dn-brand-color)"
+      transform="translate(612.000000, 680.212157) scale(1, -1) rotate(45.000000) translate(-612.000000, -680.212157) "
+    ></path>
+    <path
+      d="M368.611363,0 C388.827208,0 408.033481,8.73837915 421.311263,23.926975 L421.547,24.198 L555.753643,135.526842 L556.329533,136.210573 C565.703127,147.33948 579.452383,153.825549 593.98243,153.996532 L594.571904,154 L826,154 C864.273333,154 895.372467,184.7164 895.990622,222.842422 L896,224 L896,351 L876,351 L876,224 C876,196.661905 854.059714,174.448238 826.826841,174.006699 L826,174 L594.571904,174 C574.356059,174 555.149786,165.261621 541.872003,150.073025 L541.639,149.804 L407.429624,38.4731584 L406.853734,37.7894269 C397.48014,26.6605198 383.730884,20.1744513 369.200837,20.0034679 L368.611363,20 L50,20 C33.5971429,20 20.2689429,33.1641715 20.0040191,49.5038951 L20,50 L20,974 C20,990.402857 33.1641715,1003.73106 49.5038951,1003.99598 L50,1004 L50,1024 C22.6619049,1024 0.448238098,1002.05971 0,974.826841 L0,974 L0,50 C0,22.6619049 21.9402858,0.448238098 49.1731586,0 L50,0 L368.611363,0 Z"
+      fill="#999999"
+    ></path>
+    <path
+      d="M953,333 L127.763298,333 L127.763298,353 C155.377535,353 177.763298,375.385763 177.763298,403 L177.763298,954 C177.763298,992.659932 209.103365,1024 247.763298,1024 L953,1024 C991.659932,1024 1023,992.659932 1023,954 L1023,403 C1023,364.340068 991.659932,333 953,333 Z M177.260773,353.502525 L176.75,353 L953,353 C980.614237,353 1003,375.385763 1003,403 L1003,954 C1003,981.614237 980.614237,1004 953,1004 L247.763298,1004 C220.14906,1004 197.763298,981.614237 197.763298,954 L197.763298,403 C197.763298,383.670034 189.928281,366.170034 177.260773,353.502525 Z"
+      fill="#999999"
+      transform="translate(575.381649, 678.500000) scale(1, -1) translate(-575.381649, -678.500000) "
+    ></path>
+    <path
+      d="M769.5,768.5 C774.92924,768.5 779.347932,772.826671 779.496158,778.220095 L779.5,778.5 L779.5,818.5 C779.5,834.902857 766.335828,848.231057 749.996105,848.495981 L749.5,848.5 L474.5,848.5 C458.097143,848.5 444.768943,835.335828 444.504019,818.996105 L444.5,818.5 L444.5,787.5 C444.5,781.977153 448.977153,777.5 454.5,777.5 C459.92924,777.5 464.347932,781.826671 464.496158,787.220095 L464.5,787.5 L464.5,818.5 C464.5,823.92924 468.826671,828.347932 474.220095,828.496158 L474.5,828.5 L749.5,828.5 C754.92924,828.5 759.347932,824.173329 759.496158,818.779905 L759.5,818.5 L759.5,778.5 C759.5,772.977153 763.977153,768.5 769.5,768.5 Z"
+      fill="var(--dn-brand-color)"
+    ></path>
+    <rect
+      fill="#999999"
+      transform="translate(108.500000, 1014.000000) scale(-1, 1) rotate(90.000000) translate(-108.500000, -1014.000000) "
+      x="98.5"
+      y="940.5"
+      width="20"
+      height="147"
+      rx="10"
+    ></rect>
+  </g>
+)