feat(@fluent-ui/icons): Icon rearrangement document using react-lazyload

xinyao27 · xinyao27 · commit 00dd5d679d54 · 2019-10-02T16:47:35.000+08:00
diff --git a/packages/fluent-ui-icons/src/utils/createIcon.ts b/packages/fluent-ui-icons/src/utils/createIcon.ts
@@ -33,7 +33,7 @@ function createIcon(
   componentName: string
 ): React.ForwardRefExoticComponent<React.RefAttributes<SVGElement>> {
   const Icon = React.forwardRef<SVGElement>(
-    ({ ...rest }: React.HTMLAttributes<SVGElement>, ref): React.ReactElement => {
+    (props: React.HTMLAttributes<SVGElement>, ref): React.ReactElement => {
       const style = {
         width: '1em',
         height: '1em',
@@ -42,7 +42,7 @@ function createIcon(
         color: 'inherit',
         fill: 'currentColor'
       }
-      return createElement(jsx, { ...rest, style, ref })
+      return createElement(jsx, { style, ref, ...props })
     }
   )
   Icon.displayName = `RemixIcon${componentName}`
diff --git a/packages/fluent-ui.com/package.json b/packages/fluent-ui.com/package.json
@@ -66,9 +66,9 @@
     "react-helmet": "^5.2.1",
     "react-instantsearch-dom": "^5.7.0",
     "react-intl": "^3.3.0",
+    "react-lazyload": "^2.6.2",
     "react-live": "^2.2.0",
     "react-object-inspector": "^0.2.1",
-    "react-virtuoso": "^0.12.1",
     "use-debounce": "^3.0.1"
   },
   "devDependencies": {
@@ -78,6 +78,7 @@
     "@types/react-filepond": "^5.0.4",
     "@types/react-helmet": "^5.0.8",
     "@types/react-instantsearch-dom": "^5.2.6",
+    "@types/react-lazyload": "^2.5.0",
     "babel-preset-gatsby": "^0.1.11",
     "eslint": "^5.16.0",
     "eslint-loader": "^2.1.2",
diff --git a/packages/fluent-ui.com/src/docs/components/Icon/Icon.md b/packages/fluent-ui.com/src/docs/components/Icon/Icon.md
@@ -9,4 +9,22 @@ langKey: "en"
 
 Fluent-UI Svg Icons Based on [RemixIcon](https://remixicon.com/).
 
+## Imports
+
+You can import the icons with one of these two options:
+
+- Option 1:
+`
+import BankFillIcon from '@fluent-ui/icons/BankFill';
+`
+
+- Option 2:
+`
+import { BankFillIcon as BankFillIcon } from '@fluent-ui/icons'
+`
+
+The safest is option 1 but option 2 can yield the best developer experience. Make sure you follow the [minimizing bundle size](/getting-started/minimizing-bundle-size) guide before using the second approach.
+
+## Icon List
+
 <IconTemplate />
diff --git a/packages/fluent-ui.com/src/docs/components/Icon/Icon.zh.md b/packages/fluent-ui.com/src/docs/components/Icon/Icon.zh.md
@@ -9,4 +9,22 @@ langKey: "zh"
 
 Fluent-UI 的图标基于 [RemixIcon](https://remixicon.com/) 二次开发。
 
+## 引入
+
+你可以用这两种选项引入图标：
+
+- 选项 1:
+`
+import BankFillIcon from '@fluent-ui/icons/BankFill';
+`
+
+- 选项 2:
+`
+import { BankFillIcon as BankFillIcon } from '@fluent-ui/icons'
+`
+
+更健康的方式是 选项 1 但是 选项 2 可以带来更好的开发体验。在使用 选项 2 之前，请确保遵循[最小化打包大小](/zh/getting-started/minimizing-bundle-size)指南。
+
+## 图标列表
+
 <IconTemplate />
diff --git a/packages/fluent-ui.com/src/docs/components/Icon/api.md b/packages/fluent-ui.com/src/docs/components/Icon/api.md
@@ -0,0 +1,13 @@
+---
+title: Icon
+components: Icon
+api: true
+langKey: "en"
+---
+
+### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | string |  | The svg className. |
+| style | CSSProperties |  | The svg styles. |
diff --git a/packages/fluent-ui.com/src/docs/components/Icon/api.zh.md b/packages/fluent-ui.com/src/docs/components/Icon/api.zh.md
@@ -0,0 +1,13 @@
+---
+title: Icon（图标）
+components: Icon
+api: true
+langKey: "zh"
+---
+
+### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | string |  | Svg 的 className。 |
+| style | CSSProperties |  | Svg 的 styles。 |
diff --git a/packages/fluent-ui.com/src/docs/components/Icon/tags.json b/packages/fluent-ui.com/src/docs/components/Icon/tags.json
@@ -1,5 +1,4 @@
 {
-  "_comment": "We improve the search experience of our website by impoving 'tags.json' file. Feel free to create issue or pull request to help us improve this file. You can also email us <jimmy@remixdesign.cn> to share your idea.",
   "Buildings": {
     "home": [
       "house",
diff --git a/packages/fluent-ui.com/src/docs/components/Icon/template.tsx b/packages/fluent-ui.com/src/docs/components/Icon/template.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react'
 
-import { Box, Typography, Dialog, Theme } from '@fluent-ui/core'
+import { Box, Typography, Dialog, Theme, Spinner } from '@fluent-ui/core'
 import { createUseStyles } from '@fluent-ui/styles'
 import * as Icons from '@fluent-ui/icons'
 import { Styles } from 'jss'
-import { VirtuosoGrid } from 'react-virtuoso'
-const Virtuoso = VirtuosoGrid as any
 import Highlight from '../../../components/highlight'
+import { toHump } from '../../../utils'
+import LazyLoad from 'react-lazyload'
 // @ts-ignore
 import tags from './tags.json'
 
@@ -25,17 +25,11 @@ type Classes =
   | 'blackIcon'
 const useStyles = createUseStyles<Theme, Classes>(
   (theme: Theme): Styles => ({
-    list: {
-      display: 'flex',
-      flexWrap: 'wrap'
-    },
     iconContainer: {
-      width: '33%',
+      display: 'inline-block',
+      width: '25%',
       '@media screen and (min-width: 600px)': {
-        width: '25%'
-      },
-      '@media screen and (min-width: 960px)': {
-        width: '20%'
+        width: '16.6667%'
       }
     },
     iconWrapper: {
@@ -95,9 +89,9 @@ const useStyles = createUseStyles<Theme, Classes>(
   })
 )
 
+const tagList = Object.keys(tags)
+
 const Template = (): React.ReactElement => {
-  // @ts-ignore
-  const IconArray = Object.keys(Icons).map(key => Icons[key])
   const classes = useStyles()
 
   const [visible, setVisible] = React.useState(false)
@@ -117,24 +111,84 @@ const Template = (): React.ReactElement => {
 
   return (
     <Box backgroundColor="standard.light3" marginTop={20}>
-      <Virtuoso
-        totalCount={IconArray.length}
-        listClassName={classes.list}
-        itemClassName={classes.iconContainer}
-        item={(index: number): React.ReactElement => {
-          const Icon = IconArray[index]
-          const name = String.prototype.substring.call(Icon.displayName, 9)
-          return (
-            <div className={classes.iconWrapper} onClick={handleVisible.bind(null, name)}>
-              <Icon />
-              <Typography className={classes.title} variant="subtitle2" color="standard.dark1">
-                {name}
-              </Typography>
-            </div>
-          )
-        }}
-        style={{ height: '500px' }}
-      />
+      <Box padding="20px">
+        {tagList.map(
+          (title): React.ReactElement => {
+            return (
+              <Box key={title}>
+                <Typography variant="h6" gutterBottom gutterTop>
+                  {title}
+                </Typography>
+                <Box>
+                  {Object.keys(tags[title]).map(
+                    (icon): React.ReactElement => {
+                      const Hump = toHump(icon)
+                      // @ts-ignore
+                      const LineIcon = Icons[`${Hump}Line`]
+                      // @ts-ignore
+                      const FillIcon = Icons[`${Hump}Fill`]
+                      // @ts-ignore
+                      const OtherIcon = Icons[Hump]
+                      // eslint-disable-next-line
+                      return React.useMemo(
+                        (): React.ReactElement => (
+                          <LazyLoad
+                            scrollContainer="#contentRoot"
+                            height={144}
+                            placeholder={<Spinner />}
+                            throttle={200}
+                            once={true}
+                            key={icon}
+                          >
+                            <div className={classes.iconContainer}>
+                              {!!LineIcon && (
+                                <Box
+                                  className={classes.iconWrapper}
+                                  onClick={handleVisible.bind(null, `${Hump}Line`)}
+                                >
+                                  <LineIcon />
+                                  <Typography
+                                    className={classes.title}
+                                    variant="subtitle2"
+                                  >{`${Hump}Line`}</Typography>
+                                </Box>
+                              )}
+                              {!!FillIcon && (
+                                <Box
+                                  className={classes.iconWrapper}
+                                  onClick={handleVisible.bind(null, `${Hump}Fill`)}
+                                >
+                                  <FillIcon />
+                                  <Typography
+                                    className={classes.title}
+                                    variant="subtitle2"
+                                  >{`${Hump}Fill`}</Typography>
+                                </Box>
+                              )}
+                              {!!OtherIcon && (
+                                <Box
+                                  className={classes.iconWrapper}
+                                  onClick={handleVisible.bind(null, Hump)}
+                                >
+                                  <OtherIcon />
+                                  <Typography className={classes.title} variant="subtitle2">
+                                    {Hump}
+                                  </Typography>
+                                </Box>
+                              )}
+                            </div>
+                          </LazyLoad>
+                        ),
+                        [FillIcon, Hump, LineIcon, OtherIcon, icon]
+                      )
+                    }
+                  )}
+                </Box>
+              </Box>
+            )
+          }
+        )}
+      </Box>
       <Dialog visible={visible} onChange={handleVisible}>
         <Dialog.Title>{currentSelectIcon}</Dialog.Title>
 
diff --git a/packages/fluent-ui.com/src/utils/helpers.ts b/packages/fluent-ui.com/src/utils/helpers.ts
@@ -15,6 +15,14 @@ export function toLine(name: string): string {
   return target
 }
 
+export function toHump(name: string, capitalized: boolean = true): string {
+  return capitalized
+    ? name
+        .replace(/-(\w)/g, (all, letter): string => letter.toUpperCase())
+        .replace(/( |^)[a-z]/g, (all): string => all.toUpperCase())
+    : name.replace(/-(\w)/g, (all, letter): string => letter.toUpperCase())
+}
+
 export function pathnameToLanguage(
   pathname: string
 ): {
diff --git a/yarn.lock b/yarn.lock
@@ -2578,6 +2578,13 @@
     "@types/react" "*"
     "@types/react-instantsearch-core" "*"
 
+"@types/react-lazyload@^2.5.0":
+  version "2.5.0"
+  resolved "https://registry.npmjs.org/@types/react-lazyload/-/react-lazyload-2.5.0.tgz#7d8dd04c9a711fc0f1ea3419786acdcc01fb11dc"
+  integrity sha512-+SFmsxcC0l9mSXmoQMRtTbIW6YJQH+WxDWFG5N1b1JCiyTHZqekYcNKhGFTBvKktYOi3ET75+B4SeD52V7P1uw==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-test-renderer@^16.8.2":
   version "16.9.0"
   resolved "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-16.9.0.tgz#d60f530ecf4c906721511603cca711b4fa830d41"
@@ -14058,6 +14065,11 @@ react-jss@^10.0.0-alpha.25:
     theming "3.2.0"
     tiny-warning "^1.0.2"
 
+react-lazyload@^2.6.2:
+  version "2.6.2"
+  resolved "https://registry.npmjs.org/react-lazyload/-/react-lazyload-2.6.2.tgz#6a1660de6e8653632797539189d19d64e924482c"
+  integrity sha512-zbFiwI3H7W0/Qvb6T/ew2NiGe2wj+soYNW7vv5Dte1eZuJDvvyUOHo8GpYfEeWoP5x4Rree2Hwop+lCISalBwg==
+
 react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
@@ -14124,13 +14136,6 @@ react-transition-group@^4.2.1:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react-virtuoso@^0.12.1:
-  version "0.12.1"
-  resolved "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-0.12.1.tgz#82ad71156bb34538e46fb37b908fc39fa0996dcc"
-  integrity sha512-H5cdMHhsb+sjTxkTzIwS+uXhIzGao3GdkTw7ifyvzES9dJ/aA5I80RgTPu+VB1w4lvkRL/WlVVNHtMzJBG6+3w==
-  dependencies:
-    resize-observer-polyfill "^1.5.1"
-
 react@^16.9.0:
   version "16.9.0"
   resolved "https://registry.npmjs.org/react/-/react-16.9.0.tgz#40ba2f9af13bc1a38d75dbf2f4359a5185c4f7aa"
@@ -14681,11 +14686,6 @@ requires-port@^1.0.0:
   resolved "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
-resize-observer-polyfill@^1.5.1:
-  version "1.5.1"
-  resolved "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
-  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
-
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"

Original file line number	Diff line number	Diff line change
`@@ -33,7 +33,7 @@ function createIcon(`
`33`	`33`	`componentName: string`
`34`	`34`	`): React.ForwardRefExoticComponent<React.RefAttributes<SVGElement>> {`
`35`	`35`	`const Icon = React.forwardRef<SVGElement>(`
`36`		`- ({ ...rest }: React.HTMLAttributes<SVGElement>, ref): React.ReactElement => {`
	`36`	`+ (props: React.HTMLAttributes<SVGElement>, ref): React.ReactElement => {`
`37`	`37`	`const style = {`
`38`	`38`	`width: '1em',`
`39`	`39`	`height: '1em',`
`@@ -42,7 +42,7 @@ function createIcon(`
`42`	`42`	`color: 'inherit',`
`43`	`43`	`fill: 'currentColor'`
`44`	`44`	`}`
`45`		`- return createElement(jsx, { ...rest, style, ref })`
	`45`	`+ return createElement(jsx, { style, ref, ...props })`
`46`	`46`	`}`
`47`	`47`	`)`
`48`	`48`	Icon.displayName = `RemixIcon${componentName}`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`	`1`	`{`
`2`		`- "_comment": "We improve the search experience of our website by impoving 'tags.json' file. Feel free to create issue or pull request to help us improve this file. You can also email us <jimmy@remixdesign.cn> to share your idea.",`
`3`	`2`	`"Buildings": {`
`4`	`3`	`"home": [`
`5`	`4`	`"house",`