feat(loading): apply width & height props (#500)

* feat(loading): apply width & height props * test(loading): test case added & updating snapshots * fix(loading): add a string type for size prop test(loading): update test case & snapshots * feat(loading): support custom the ratio of spaces * docs(loading): append size and spaceRatio test(loading): update snapshots Co-authored-by: unix <unix.bio@gmail.com>
2026-03-26 06:55:07 +08:00 · 2021-04-02 16:44:12 +05:30
parent a43a4b3786
commit 17cb6dd567
5 changed files with 169 additions and 114 deletions
--- a/components/loading/tests/snapshots/index.test.tsx.snap
+++ b/components/loading/tests/snapshots/index.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`Loading should render correctly 1`] = `
-"<div class=\\"loading-container\\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
+"<div class=\\"loading-container \\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
        .loading-container {
          display: inline-flex;
          align-items: center;
@@ -39,7 +39,7 @@ exports[`Loading should render correctly 1`] = `
          height: 4px;
          border-radius: 50%;
          background-color: #444;
-          margin: 0 1px;
+          margin: 0 calc(4px / 2 * 1);
          display: inline-block;
          animation: loading-blink 1.4s infinite both;
        }
@@ -71,7 +71,7 @@ exports[`Loading should render correctly 1`] = `
 exports[`Loading should render correctly 2`] = `[Function]`;

 exports[`Loading should work with custom styles 1`] = `
-"<div><div class=\\"loading-container\\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
+"<div><div class=\\"loading-container \\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
        .loading-container {
          display: inline-flex;
          align-items: center;
@@ -109,7 +109,7 @@ exports[`Loading should work with custom styles 1`] = `
          height: 4px;
          border-radius: 50%;
          background-color: #fff;
-          margin: 0 1px;
+          margin: 0 calc(4px / 2 * 1);
          display: inline-block;
          animation: loading-blink 1.4s infinite both;
        }
@@ -135,7 +135,7 @@ exports[`Loading should work with custom styles 1`] = `
            opacity: 0.2;
          }
        }
-      </style></div><div class=\\"loading-container\\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
+      </style></div><div class=\\"loading-container \\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
        .loading-container {
          display: inline-flex;
          align-items: center;
@@ -169,11 +169,11 @@ exports[`Loading should work with custom styles 1`] = `
        }

        i {
-          width: 4px;
-          height: 4px;
+          width: 20%;
+          height: 20%;
          border-radius: 50%;
          background-color: #444;
-          margin: 0 1px;
+          margin: 0 calc(20% / 2 * 1);
          display: inline-block;
          animation: loading-blink 1.4s infinite both;
        }
@@ -199,7 +199,7 @@ exports[`Loading should work with custom styles 1`] = `
            opacity: 0.2;
          }
        }
-      </style></div><div class=\\"loading-container\\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
+      </style></div><div class=\\"loading-container \\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
        .loading-container {
          display: inline-flex;
          align-items: center;
@@ -233,11 +233,11 @@ exports[`Loading should work with custom styles 1`] = `
        }

        i {
-          width: 4px;
-          height: 4px;
+          width: 10px;
+          height: 10px;
          border-radius: 50%;
          background-color: #444;
-          margin: 0 1px;
+          margin: 0 calc(10px / 2 * 1);
          display: inline-block;
          animation: loading-blink 1.4s infinite both;
        }
@@ -269,7 +269,7 @@ exports[`Loading should work with custom styles 1`] = `
 exports[`Loading should work with custom styles 2`] = `[Function]`;

 exports[`Loading should work with different sizes 1`] = `
-"<div><div class=\\"loading-container\\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
+"<div><div class=\\"loading-container \\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
        .loading-container {
          display: inline-flex;
          align-items: center;
@@ -307,7 +307,7 @@ exports[`Loading should work with different sizes 1`] = `
          height: 2px;
          border-radius: 50%;
          background-color: #444;
-          margin: 0 1px;
+          margin: 0 calc(2px / 2 * 1);
          display: inline-block;
          animation: loading-blink 1.4s infinite both;
        }
@@ -333,7 +333,7 @@ exports[`Loading should work with different sizes 1`] = `
            opacity: 0.2;
          }
        }
-      </style></div><div class=\\"loading-container\\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
+      </style></div><div class=\\"loading-container \\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
        .loading-container {
          display: inline-flex;
          align-items: center;
@@ -371,7 +371,7 @@ exports[`Loading should work with different sizes 1`] = `
          height: 3px;
          border-radius: 50%;
          background-color: #444;
-          margin: 0 1px;
+          margin: 0 calc(3px / 2 * 1);
          display: inline-block;
          animation: loading-blink 1.4s infinite both;
        }
@@ -397,7 +397,7 @@ exports[`Loading should work with different sizes 1`] = `
            opacity: 0.2;
          }
        }
-      </style></div><div class=\\"loading-container\\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
+      </style></div><div class=\\"loading-container \\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
        .loading-container {
          display: inline-flex;
          align-items: center;
@@ -435,7 +435,7 @@ exports[`Loading should work with different sizes 1`] = `
          height: 4px;
          border-radius: 50%;
          background-color: #444;
-          margin: 0 1px;
+          margin: 0 calc(4px / 2 * 1);
          display: inline-block;
          animation: loading-blink 1.4s infinite both;
        }
@@ -461,7 +461,7 @@ exports[`Loading should work with different sizes 1`] = `
            opacity: 0.2;
          }
        }
-      </style></div><div class=\\"loading-container\\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
+      </style></div><div class=\\"loading-container \\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
        .loading-container {
          display: inline-flex;
          align-items: center;
@@ -499,7 +499,7 @@ exports[`Loading should work with different sizes 1`] = `
          height: 5px;
          border-radius: 50%;
          background-color: #444;
-          margin: 0 1px;
+          margin: 0 calc(5px / 2 * 1);
          display: inline-block;
          animation: loading-blink 1.4s infinite both;
        }
@@ -531,7 +531,7 @@ exports[`Loading should work with different sizes 1`] = `
 exports[`Loading should work with different sizes 2`] = `[Function]`;

 exports[`Loading should work with different types 1`] = `
-"<div><div class=\\"loading-container\\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
+"<div><div class=\\"loading-container \\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
        .loading-container {
          display: inline-flex;
          align-items: center;
@@ -569,7 +569,7 @@ exports[`Loading should work with different types 1`] = `
          height: 4px;
          border-radius: 50%;
          background-color: #0070f3;
-          margin: 0 1px;
+          margin: 0 calc(4px / 2 * 1);
          display: inline-block;
          animation: loading-blink 1.4s infinite both;
        }
@@ -595,7 +595,7 @@ exports[`Loading should work with different types 1`] = `
            opacity: 0.2;
          }
        }
-      </style></div><div class=\\"loading-container\\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
+      </style></div><div class=\\"loading-container \\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
        .loading-container {
          display: inline-flex;
          align-items: center;
@@ -633,7 +633,7 @@ exports[`Loading should work with different types 1`] = `
          height: 4px;
          border-radius: 50%;
          background-color: #666;
-          margin: 0 1px;
+          margin: 0 calc(4px / 2 * 1);
          display: inline-block;
          animation: loading-blink 1.4s infinite both;
        }
@@ -659,7 +659,7 @@ exports[`Loading should work with different types 1`] = `
            opacity: 0.2;
          }
        }
-      </style></div><div class=\\"loading-container\\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
+      </style></div><div class=\\"loading-container \\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
        .loading-container {
          display: inline-flex;
          align-items: center;
@@ -697,7 +697,7 @@ exports[`Loading should work with different types 1`] = `
          height: 4px;
          border-radius: 50%;
          background-color: #f5a623;
-          margin: 0 1px;
+          margin: 0 calc(4px / 2 * 1);
          display: inline-block;
          animation: loading-blink 1.4s infinite both;
        }
@@ -723,7 +723,7 @@ exports[`Loading should work with different types 1`] = `
            opacity: 0.2;
          }
        }
-      </style></div><div class=\\"loading-container\\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
+      </style></div><div class=\\"loading-container \\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
        .loading-container {
          display: inline-flex;
          align-items: center;
@@ -761,7 +761,7 @@ exports[`Loading should work with different types 1`] = `
          height: 4px;
          border-radius: 50%;
          background-color: #e00;
-          margin: 0 1px;
+          margin: 0 calc(4px / 2 * 1);
          display: inline-block;
          animation: loading-blink 1.4s infinite both;
        }
--- a/components/loading/tests/index.test.tsx
+++ b/components/loading/tests/index.test.tsx
@@ -39,8 +39,8 @@ describe('Loading', () => {
    const wrapper = mount(
      <div>
        <Loading color="#fff" />
-        <Loading width="20%" />
-        <Loading height="10px" />
+        <Loading size="20%" />
+        <Loading size="10px" />
      </div>,
    )
    expect(wrapper.html()).toMatchSnapshot()
--- a/components/loading/loading.tsx
+++ b/components/loading/loading.tsx
@@ -4,30 +4,34 @@ import withDefaults from '../utils/with-defaults'
 import { NormalSizes, NormalTypes } from 'components/utils/prop-types'
 import { GeistUIThemesPalette } from 'components/themes/presets'

+type LoadingSizes = NormalSizes | string
+
 interface Props {
-  size?: NormalSizes
+  size?: LoadingSizes
  type?: NormalTypes
  color?: string
-  width?: string
-  height?: string
+  className?: string
+  spaceRatio?: number
 }

 const defaultProps = {
-  size: 'medium' as NormalSizes,
+  size: 'medium' as LoadingSizes,
  type: 'default' as NormalTypes,
+  className: '',
+  spaceRatio: 1,
 }

 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
 export type LoadingProps = Props & typeof defaultProps & NativeAttrs

-const getIconSize = (size: NormalSizes) => {
-  const sizes: { [key in NormalSizes]: string } = {
+const getIconSize = (size: LoadingSizes) => {
+  const sizes: { [key in LoadingSizes]: string } = {
    mini: '2px',
    small: '3px',
    medium: '4px',
    large: '5px',
  }
-  return sizes[size]
+  return sizes[size] || size
 }

 const getIconBgColor = (
@@ -51,6 +55,9 @@ const Loading: React.FC<React.PropsWithChildren<LoadingProps>> = ({
  size,
  type,
  color,
+  className,
+  spaceRatio,
+  ...props
 }) => {
  const theme = useTheme()
  const width = useMemo(() => getIconSize(size), [size])
@@ -61,7 +68,7 @@ const Loading: React.FC<React.PropsWithChildren<LoadingProps>> = ({
  ])

  return (
-    <div className="loading-container">
+    <div className={`loading-container ${className}`} {...props}>
      <span className="loading">
        {children && <label>{children}</label>}
        <i />
@@ -106,7 +113,7 @@ const Loading: React.FC<React.PropsWithChildren<LoadingProps>> = ({
          height: ${width};
          border-radius: 50%;
          background-color: ${bgColor};
-          margin: 0 1px;
+          margin: 0 calc(${width} / 2 * ${spaceRatio});
          display: inline-block;
          animation: loading-blink 1.4s infinite both;
        }
--- a/pages/en-us/components/loading.mdx
+++ b/pages/en-us/components/loading.mdx
@@ -1,5 +1,5 @@
 import { Layout, Playground, Attributes } from 'lib/components'
-import { Loading, Spacer, Row } from 'components'
+import { Loading, Spacer, Row, Grid } from 'components'

 export const meta = {
  title: 'Loading',
@@ -33,64 +33,88 @@ Indicate an action running in the background.
 <Playground
  title="sizes"
  desc="Components of different sizes."
-  scope={{ Loading, Row, Spacer }}
+  scope={{ Loading, Grid }}
  code={`
-<>
-  <Row style={{ padding: '10px 0', width: '50px' }}>
+<Grid.Container gap={2.5}>
+  <Grid xs={24}>
    <Loading size="mini" />
-  </Row>
-  <Spacer y={.5} />
-  <Row style={{ padding: '10px 0', width: '50px' }}>
+  </Grid>
+  <Grid xs={24}>
    <Loading size="small" />
-  </Row>
-  <Spacer y={.5} />
-  <Row style={{ padding: '10px 0', width: '50px' }}>
+  </Grid>
+  <Grid xs={24}>
    <Loading size="medium" />
-  </Row>
-  <Spacer y={.5} />
-  <Row style={{ padding: '10px 0', width: '50px' }}>
+  </Grid>
+   <Grid xs={24}>
    <Loading size="large" />
-  </Row>
-</>
+  </Grid>
+  <Grid xs={24}>
+    <Loading size="10px" />
+  </Grid>
+</Grid.Container>
 `}
 />

 <Playground
-  title="type"
+  title="types"
  desc="Loading indicators in different states."
-  scope={{ Loading, Row, Spacer }}
+  scope={{ Loading, Grid }}
  code={`
-<>
-  <Row style={{ padding: '10px 0', width: '50px' }}>
+<Grid.Container gap={2.5}>
+  <Grid xs={24}>
    <Loading type="success" />
-  </Row>
-  <Spacer y={.5} />
-  <Row style={{ padding: '10px 0', width: '50px' }}>
+  </Grid>
+  <Grid xs={24}>
    <Loading type="secondary" />
-  </Row>
-  <Spacer y={.5} />
-  <Row style={{ padding: '10px 0', width: '50px' }}>
+  </Grid>
+  <Grid xs={24}>
    <Loading type="warning" />
-  </Row>
-  <Spacer y={.5} />
-  <Row style={{ padding: '10px 0', width: '50px' }}>
+  </Grid>
+   <Grid xs={24}>
    <Loading type="error" />
-  </Row>
-</>
+  </Grid>
+</Grid.Container>
+`}
+/>
+
+<Playground
+  title="spaces"
+  desc="Customize the space between points. (the ratio is relative to the current `size`)"
+  scope={{ Loading, Grid }}
+  code={`
+<Grid.Container gap={2.5}>
+  <Grid xs={24}>
+    <Loading spaceRatio={2.5} />
+  </Grid>
+  <Grid xs={24}>
+    <Loading size="8px" spaceRatio={0.5} />
+  </Grid>
+</Grid.Container>
 `}
 />

 <Attributes edit="/pages/en-us/components/loading.mdx">
 <Attributes.Title>Loading.Props</Attributes.Title>

-| Attribute  | Description     | Type             | Accepted values                                         | Default   |
-| ---------- | --------------- | ---------------- | ------------------------------------------------------- | --------- |
-| **type**   | bg-color type   | `NormalTypes`    | `'default', 'secondary', 'success', 'warning', 'error'` | `default` |
-| **size**   | loading size    | `NormalSizes`    | `'mini', 'small', 'medium', 'large'`                    | `medium`  |
-| **color**  | custom bg color | `string`         | -                                                       | -         |
-| **width**  | custom width    | `string`         | -                                                       | `100%`    |
-| **height** | custom height   | `string`         | -                                                       | `100%`    |
-| ...        | native props    | `HTMLAttributes` | `'id', 'title', 'className', ...`                       | -         |
+| Attribute      | Description                        | Type             | Accepted values                   | Default   |
+| -------------- | ---------------------------------- | ---------------- | --------------------------------- | --------- |
+| **type**       | bg-color type                      | `NormalTypes`    | [NormalTypes](#mormaltypes)       | `default` |
+| **size**       | loading size                       | `LoadingSizes`   | [LoadingSizes](#loadingsizes)     | `medium`  |
+| **color**      | custom bg color                    | `string`         | -                                 | -         |
+| **spaceRatio** | percentage of space between points | `number`         | -                                 | 1         |
+| ...            | native props                       | `HTMLAttributes` | `'id', 'title', 'className', ...` | -         |
+
+<Attributes.Title>NormalTypes</Attributes.Title>
+
+```ts
+type NormalTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
+```
+
+<Attributes.Title>LoadingSizes</Attributes.Title>
+
+```ts
+type LoadingSizes = 'mini' | 'small' | 'medium' | 'large' | string
+```

 </Attributes>

--- a/pages/zh-cn/components/loading.mdx
+++ b/pages/zh-cn/components/loading.mdx
@@ -1,5 +1,5 @@
 import { Layout, Playground, Attributes } from 'lib/components'
-import { Loading, Spacer, Row } from 'components'
+import { Loading, Spacer, Row, Grid } from 'components'

 export const meta = {
  title: '加载中 Loading',
@@ -33,64 +33,88 @@ export const meta = {
 <Playground
  title="大小"
  desc="不同大小的组件。"
-  scope={{ Loading, Row, Spacer }}
+  scope={{ Loading, Grid }}
  code={`
-<>
-  <Row style={{ padding: '10px 0', width: '50px' }}>
+<Grid.Container gap={2.5}>
+  <Grid xs={24}>
    <Loading size="mini" />
-  </Row>
-  <Spacer y={.5} />
-  <Row style={{ padding: '10px 0', width: '50px' }}>
+  </Grid>
+  <Grid xs={24}>
    <Loading size="small" />
-  </Row>
-  <Spacer y={.5} />
-  <Row style={{ padding: '10px 0', width: '50px' }}>
+  </Grid>
+  <Grid xs={24}>
    <Loading size="medium" />
-  </Row>
-  <Spacer y={.5} />
-  <Row style={{ padding: '10px 0', width: '50px' }}>
+  </Grid>
+   <Grid xs={24}>
    <Loading size="large" />
-  </Row>
-</>
+  </Grid>
+  <Grid xs={24}>
+    <Loading size="10px" />
+  </Grid>
+</Grid.Container>
 `}
 />

 <Playground
  title="类型"
  desc="加载指示器在不同状态下的表现。"
-  scope={{ Loading, Row, Spacer }}
+  scope={{ Loading, Grid }}
  code={`
-<>
-  <Row style={{ padding: '10px 0', width: '50px' }}>
+<Grid.Container gap={2.5}>
+  <Grid xs={24}>
    <Loading type="success" />
-  </Row>
-  <Spacer y={.5} />
-  <Row style={{ padding: '10px 0', width: '50px' }}>
+  </Grid>
+  <Grid xs={24}>
    <Loading type="secondary" />
-  </Row>
-  <Spacer y={.5} />
-  <Row style={{ padding: '10px 0', width: '50px' }}>
+  </Grid>
+  <Grid xs={24}>
    <Loading type="warning" />
-  </Row>
-  <Spacer y={.5} />
-  <Row style={{ padding: '10px 0', width: '50px' }}>
+  </Grid>
+   <Grid xs={24}>
    <Loading type="error" />
-  </Row>
-</>
+  </Grid>
+</Grid.Container>
+`}
+/>
+
+<Playground
+  title="空间"
+  desc="自定义点与点之间的间隔比例。(比例是相对于当前大小 `size`)"
+  scope={{ Loading, Grid }}
+  code={`
+<Grid.Container gap={2.5}>
+  <Grid xs={24}>
+    <Loading spaceRatio={2.5} />
+  </Grid>
+  <Grid xs={24}>
+    <Loading size="8px" spaceRatio={0.5} />
+  </Grid>
+</Grid.Container>
 `}
 />

 <Attributes edit="/pages/zh-cn/components/loading.mdx">
 <Attributes.Title>Loading.Props</Attributes.Title>

-| 属性       | 描述               | 类型             | 推荐值                                                  | 默认      |
-| ---------- | ------------------ | ---------------- | ------------------------------------------------------- | --------- |
-| **type**   | 指示器的类型       | `NormalTypes`    | `'default', 'secondary', 'success', 'warning', 'error'` | `default` |
-| **size**   | 指示器的大小       | `NormalSizes`    | `'mini', 'small', 'medium', 'large'`                    | `medium`  |
-| **color**  | 自定义指示器的色彩 | `string`         | -                                                       | -         |
-| **width**  | 定制 CSS 宽度      | `string`         | -                                                       | `100%`    |
-| **height** | 定制 CSS 高度      | `string`         | -                                                       | `100%`    |
-| ...        | 原生属性           | `HTMLAttributes` | `'id', 'title', 'className', ...`                       | -         |
+| 属性           | 描述               | 类型             | 推荐值                            | 默认      |
+| -------------- | ------------------ | ---------------- | --------------------------------- | --------- |
+| **type**       | 指示器的类型       | `NormalTypes`    | [NormalTypes](#mormaltypes)       | `default` |
+| **size**       | 指示器的大小       | `LoadingSizes`   | [LoadingSizes](#loadingsizes)     | `medium`  |
+| **color**      | 自定义指示器的色彩 | `string`         | -                                 | -         |
+| **spaceRatio** | 点之间的空间比例   | `number`         | -                                 | 1         |
+| ...            | 原生属性           | `HTMLAttributes` | `'id', 'title', 'className', ...` | -         |
+
+<Attributes.Title>NormalTypes</Attributes.Title>
+
+```ts
+type NormalTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
+```
+
+<Attributes.Title>LoadingSizes</Attributes.Title>
+
+```ts
+type LoadingSizes = 'mini' | 'small' | 'medium' | 'large' | string
+```

 </Attributes>