refactor: re-implement Loading with svg

docs/components/icon/demo-all.tsx

@@ -19,8 +19,6 @@ for (let key in Icons) {
   })
 }
 
-console.log('items', items)
-
 export default () => {
   return (
     <div className={styles.container}>

src/components/button/button.tsx

@@ -62,7 +62,7 @@ export const Button: FC<ButtonProps> = p => {
       {props.loading ? (
         <>
           <div className={`${classPrefix}-loading-wrapper`}>
-            <Loading color='currentColor' size={props.size} />
+            <Loading color='currentColor' />
             {props.loadingText}
           </div>
         </>

src/components/button/demos/index.tsx

@@ -68,7 +68,10 @@ export default () => {
           <Button loading color='primary' loadingText='加载中'>
             Loading
           </Button>
-          <Button loading>Loading</Button>
+          <Button loading size='large'>
+            Loading
+          </Button>
+          <Button size='large'>Loading</Button>
         </Space>
       </DemoBlock>
       <DemoBlock title='带图标的按钮'>

src/components/image-uploader/preview-item.tsx

@@ -33,7 +33,7 @@ const PreviewItem: FC<Props> = props => {
       props.status === 'pending' && (
         <div className={`${classPrefix}-cell-mask`}>
           <span className={`${classPrefix}-cell-loading`}>
-            <Loading color='#fff' size='small' />
+            <Loading color='#fff' style={{ fontSize: 16 }} />
             <span className={`${classPrefix}-cell-mask-message`}>
               上传中...
             </span>

src/components/infinite-scroll/demos/content.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import { InfiniteScroll, List, Loading } from 'antd-mobile'
 import { useState } from 'react'
 import { sleep } from 'antd-mobile/src/utils/sleep'
@@ -37,7 +38,7 @@ const InfiniteScrollContent = ({ hasMore }: { hasMore?: boolean }) => {
       {hasMore ? (
         <>
           <span>Loading</span>
-          <Loading size='small' />
+          <Loading />
         </>
       ) : (
         <span>--- 我是有底线的 ---</span>

src/components/infinite-scroll/infinite-scroll.tsx

@@ -23,7 +23,7 @@ const InfiniteScrollContent = ({ hasMore }: { hasMore: boolean }) => {
       {hasMore ? (
         <>
           <span>加载中</span>
-          <Loading size='small' />
+          <Loading />
         </>
       ) : (
         <span>没有更多了</span>

src/components/loading/demos/index.tsx

@@ -14,10 +14,16 @@ export default () => {
       <DemoBlock title='白色的 Loading' background='#a5a5a5'>
         <Loading color='white' />
       </DemoBlock>
-      <DemoBlock title='三种大小'>
-        <Loading size='small' />
-        <Loading size='middle' />
-        <Loading size='large' />
+      <DemoBlock title='自动适配当前字号'>
+        <span style={{ fontSize: 14 }}>
+          <Loading />
+        </span>
+        <span style={{ fontSize: 18 }}>
+          <Loading />
+        </span>
+        <span style={{ fontSize: 24 }}>
+          <Loading />
+        </span>
       </DemoBlock>
       <DemoBlock title='自动适配当前文本颜色'>
         <div style={{ color: '#00b578' }}>

src/components/loading/index.md

@@ -6,5 +6,6 @@
 
 | 属性  | 说明 | 类型                                        | 默认值    |
 | ----- | ---- | ------------------------------------------- | --------- |
-| size  | 大小 | 'mini' \| 'small' \| 'middle' \| 'large'    | 'middle'  |
 | color | 颜色 | 'default' \| 'primary' \| 'white' \| string | 'dafault' |
+
+Loading 的大小会自动根据当前的文字大小进行调整。

src/components/loading/loading.less

@@ -1,50 +1,51 @@
 .adm-loading {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 10px 6px;
-  --color: var(--adm-color-weak);
-  --dot-size: 4px;
-  &-dot {
-    position: relative;
-    width: var(--dot-size);
-    height: var(--dot-size);
-    margin: 0 var(--dot-size);
-    background-color: var(--color);
-    border-radius: 1px;
-    animation: 2s linear infinite loading-dot-up-down;
-    &:nth-child(2) {
-      animation-delay: 0.2s;
-    }
-    &:nth-child(3) {
-      animation-delay: 0.4s;
-    }
-  }
-  &-mini {
-    --dot-size: 2px;
-    padding: 5px 3px;
-  }
-  &-small {
-    --dot-size: 3px;
-    padding: 6px 4px;
-  }
-  &-large {
-    --dot-size: 5px;
-    padding: 14px 10px;
-  }
+  display: inline-block;
+  //align-items: center;
+  //justify-content: center;
+  //padding: 10px 6px;
+  //--color: var(--adm-color-weak);
+  //--dot-size: 4px;
+  //color: var(--color);
+  //&-dot {
+  //  position: relative;
+  //  width: var(--dot-size);
+  //  height: var(--dot-size);
+  //  margin: 0 var(--dot-size);
+  //  background-color: var(--color);
+  //  border-radius: 1px;
+  //  animation: 2s linear infinite loading-dot-up-down;
+  //  &:nth-child(2) {
+  //    animation-delay: 0.2s;
+  //  }
+  //  &:nth-child(3) {
+  //    animation-delay: 0.4s;
+  //  }
+  //}
+  //&-mini {
+  //  --dot-size: 2px;
+  //  padding: 5px 3px;
+  //}
+  //&-small {
+  //  --dot-size: 3px;
+  //  padding: 6px 4px;
+  //}
+  //&-large {
+  //  --dot-size: 5px;
+  //  padding: 14px 10px;
+  //}
 }
 
-@keyframes loading-dot-up-down {
-  0% {
-    top: 0;
-  }
-  10% {
-    top: calc(var(--dot-size) * -1.2);
-  }
-  30% {
-    top: calc(var(--dot-size) * 1.2);
-  }
-  40% {
-    top: 0;
-  }
-}
+//@keyframes loading-dot-up-down {
+//  0% {
+//    top: 0;
+//  }
+//  10% {
+//    top: calc(var(--dot-size) * -1.2);
+//  }
+//  30% {
+//    top: calc(var(--dot-size) * 1.2);
+//  }
+//  40% {
+//    top: 0;
+//  }
+//}

src/components/loading/loading.tsx

@@ -1,6 +1,6 @@
 import React, { memo } from 'react'
-import classNames from 'classnames'
 import { mergeProps } from '../../utils/with-default-props'
+import { NativeProps, withNativeProps } from '../../utils/native-props'
 
 const classPrefix = `adm-loading`
 
@@ -10,10 +10,9 @@ const colorRecord: Record<string, string> = {
   white: 'var(--adm-color-white)',
 }
 
-export interface LoadingProps {
-  size?: 'mini' | 'small' | 'middle' | 'large'
+export type LoadingProps = {
   color?: 'default' | 'primary' | 'white' | string
-}
+} & NativeProps
 
 const defaultProps = {
   size: 'middle',
@@ -22,17 +21,51 @@ const defaultProps = {
 
 export const Loading = memo<LoadingProps>(p => {
   const props = mergeProps(defaultProps, p)
-  const style: any = {
-    '--color': colorRecord[props.color] ?? props.color,
-  }
-  return (
+  return withNativeProps(
+    props,
     <div
-      style={style}
-      className={classNames(classPrefix, `${classPrefix}-${props.size}`)}
+      style={{
+        color: colorRecord[props.color] ?? props.color,
+      }}
+      className={classPrefix}
     >
-      <div className={`${classPrefix}-dot`} />
-      <div className={`${classPrefix}-dot`} />
-      <div className={`${classPrefix}-dot`} />
+      <svg
+        height='1em'
+        viewBox='0 0 100 40'
+        style={{ verticalAlign: '-0.125em' }}
+      >
+        <g stroke='none' strokeWidth='1' fill='none' fillRule='evenodd'>
+          <g transform='translate(-100.000000, -71.000000)'>
+            <g transform='translate(95.000000, 71.000000)'>
+              <g transform='translate(5.000000, 0.000000)'>
+                {[0, 1, 2].map(i => (
+                  <rect
+                    key={i}
+                    fill='currentColor'
+                    x={20 + i * 26}
+                    y='16'
+                    width='8'
+                    height='8'
+                    rx='2'
+                  >
+                    <animate
+                      attributeName='y'
+                      from='16'
+                      to='16'
+                      dur='2s'
+                      begin={`${i * 0.2}s`}
+                      repeatCount='indefinite'
+                      values='16; 6; 26; 16; 16'
+                      keyTimes='0; 0.1; 0.3; 0.4; 1'
+                      id='circ-anim'
+                    />
+                  </rect>
+                ))}
+              </g>
+            </g>
+          </g>
+        </g>
+      </svg>
     </div>
   )
 })