Merge pull request #273 from yilaierwang/feat/Progress

feat: 实现Progrss
Tencent · Jul 12, 2022 · ca62ac1 · ca62ac1
2 parents 5047d65 + aeafede
commit ca62ac1
Show file tree

Hide file tree

Showing 17 changed files with 386 additions and 6 deletions.
diff --git a/site/mobile/mobile.config.js b/site/mobile/mobile.config.js
@@ -40,6 +40,11 @@ export default {
       name: 'popup',
       component: () => import('tdesign-mobile-react/popup/_example/base.jsx'),
     },
+    {
+      title: 'Progress 进度条',
+      name: 'progress',
+      component: () => import('tdesign-mobile-react/progress/_example/index.jsx'),
+    },
     {
       title: 'Slider 滑动选择器',
       name: 'slider',

diff --git a/site/web/site.config.js b/site/web/site.config.js
@@ -324,12 +324,12 @@ export default {
           path: '/mobile-react/components/popup',
           component: () => import('tdesign-mobile-react/popup/popup.md'),
         },
-        // {
-        //   title: 'Progress 进度条',
-        //   name: 'progress',
-        //   path: '/mobile-react/components/progress',
-        //   component: () => import('tdesign-mobile-react/progress/progress.md'),
-        // },
+        {
+          title: 'Progress 进度条',
+          name: 'progress',
+          path: '/mobile-react/components/progress',
+          component: () => import('tdesign-mobile-react/progress/progress.md'),
+        },
         {
           title: 'PullDownRefresh 下拉刷新',
           name: 'pull-down-refresh',

diff --git a/src/index.ts b/src/index.ts
@@ -4,6 +4,7 @@
 export * from './button';
 export * from './divider';
 export * from './fab';
+export * from './progress';
 
 /**
  * 导航（5个）

diff --git a/src/progress/Progress.tsx b/src/progress/Progress.tsx
@@ -0,0 +1,61 @@
+import React, { FC, useMemo } from 'react';
+import classnames from 'classnames';
+import withNativeProps, { NativeProps } from '../_util/withNativeProps';
+import { TdProgressProps } from './type';
+import useConfig from '../_util/useConfig';
+import { progressDefaultProps } from './defaultProps';
+import { getBackgroundColor } from './utils';
+
+export interface ProgressProps extends TdProgressProps, NativeProps {}
+
+const Progress: FC<ProgressProps> = (props) => {
+  const { children, percentage, strokeWidth, trackColor, color, label, status } = props;
+
+  const { classPrefix } = useConfig();
+
+  const name = `${classPrefix}-progress`;
+
+  const progressPercent = Math.max(0, Math.min(percentage, 100));
+
+  const progressStatusStyle = useMemo(() => {
+    if (percentage >= 100) {
+      return 'success';
+    }
+    return status;
+  }, [percentage, status]);
+
+  const progressBarStyle = useMemo(() => {
+    const height = typeof strokeWidth === 'string' ? strokeWidth : `${strokeWidth}px`;
+    return {
+      height,
+      backgroundColor: trackColor,
+    };
+  }, [strokeWidth, trackColor]);
+
+  const progressBarPercenStyle = {
+    width: `${progressPercent}%`,
+    background: color && getBackgroundColor(color),
+  };
+
+  const labelDom = useMemo(() => {
+    if (!label) return null;
+    return children || `${progressPercent}%`;
+  }, [label, children, progressPercent]);
+
+  return withNativeProps(
+    props,
+    <div className={classnames([`${name}`, `${name}--status--${progressStatusStyle}`])}>
+      <div className={`${name}__inner`}>
+        <div className={`${name}__bar`} style={progressBarStyle}>
+          <div className={`${name}__bar-percent`} style={progressBarPercenStyle}></div>
+        </div>
+        <div className={`${name}__label`}>{labelDom}</div>
+      </div>
+    </div>,
+  );
+};
+
+Progress.displayName = 'Progress';
+Progress.defaultProps = progressDefaultProps;
+
+export default Progress;
diff --git a/src/progress/_example/base.jsx b/src/progress/_example/base.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Progress } from 'tdesign-mobile-react';
+
+import './style/index.less';
+
+export default function Base() {
+  return (
+    <div className="tdesign-mobile-demo progress">
+      <div className="progress-demo progress-demo--margin">
+        <Progress percentage="0" />
+      </div>
+      <div className="progress-demo progress-demo--margin">
+        <Progress percentage="88" />
+      </div>
+      <div className="progress-demo progress-demo--margin">
+        <Progress percentage="100" />
+      </div>
+    </div>
+  );
+}
diff --git a/src/progress/_example/color.jsx b/src/progress/_example/color.jsx
@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import { Progress, Button } from 'tdesign-mobile-react';
+import TDemoBlock from '../../../site/mobile/components/DemoBlock';
+import './style/index.less';
+import Type from './type';
+
+export default function Color() {
+  const [percentage, setPercentage] = useState(88);
+
+  const clickReduce = () => {
+    setPercentage((percentage) => Math.max(0, percentage - 10));
+  };
+
+  const clickAdd = () => {
+    setPercentage((percentage) => Math.min(100, percentage + 10));
+  };
+
+  return (
+    <div className="tdesign-mobile-demo progress">
+      <div className="progress-demo progress-demo--margin">
+        <Progress percentage="88" />
+      </div>
+      <div className="progress-demo progress-demo--margin">
+        <Progress percentage="88" status="error" />
+      </div>
+      <div className="progress-demo progress-demo--margin">
+        <Progress percentage="88" status="warning" />
+      </div>
+      <div className="progress-demo progress-demo--margin">
+        <Progress percentage="100" />
+      </div>
+      <div className="progress-demo progress-demo--margin">
+        <Progress percentage={percentage} />
+        <div className="button-group">
+          <Button theme="primary" variant="outline" size="small" onClick={clickReduce}>
+            减少
+          </Button>
+          <div className="space"></div>
+          <Button theme="primary" size="small" onClick={clickAdd}>
+            增加
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/progress/_example/index.jsx b/src/progress/_example/index.jsx
@@ -0,0 +1,90 @@
+import React, { useState } from 'react';
+import { Progress, Button } from 'tdesign-mobile-react';
+
+import TDemoBlock from '../../../site/mobile/components/DemoBlock';
+import TDemoHeader from '../../../site/mobile/components/DemoHeader';
+import Type from './type';
+
+import './style/index.less';
+
+export default function ProgressDemo() {
+  const [percentage, setPercentage] = useState(88);
+
+  const clickReduce = () => {
+    setPercentage((percentage) => Math.max(0, percentage - 10));
+  };
+
+  const clickAdd = () => {
+    setPercentage((percentage) => Math.min(100, percentage + 10));
+  };
+
+  return (
+    <div className="tdesign-mobile-demo">
+      <TDemoHeader title="Progress 进度条" summary="展示操作的当前进度" />
+      <TDemoBlock title="01 类型" summary="基础进度条">
+        <div>
+          <div className="progress-demo progress-demo--margin">
+            <Progress percentage="0" />
+          </div>
+          <div className="progress-demo progress-demo--margin">
+            <Progress percentage="88" />
+          </div>
+          <div className="progress-demo progress-demo--margin">
+            <Progress percentage="100" />
+          </div>
+        </div>
+      </TDemoBlock>
+      <TDemoBlock title="02 状态" summary="">
+        <TDemoBlock summary="默认状态">
+          <div className="progress-demo">
+            <Progress percentage="88" />
+          </div>
+        </TDemoBlock>
+        <TDemoBlock summary="进度状态发生重大错误">
+          <div className="progress-demo">
+            <Progress percentage="88" status="error" />
+          </div>
+        </TDemoBlock>
+        <TDemoBlock summary="进度中止">
+          <div className="progress-demo">
+            <Progress percentage="88" status="warning" />
+          </div>
+        </TDemoBlock>
+        <TDemoBlock summary="进度完成">
+          <div className="progress-demo">
+            <Progress percentage="100" />
+          </div>
+        </TDemoBlock>
+        <TDemoBlock summary="过渡样式">
+          <div className="progress-demo">
+            <Progress percentage={percentage} />
+            <div className="button-group">
+              <Button theme="primary" variant="outline" size="small" onClick={clickReduce}>
+                减少
+              </Button>
+              <div className="space"></div>
+              <Button theme="primary" size="small" onClick={clickAdd}>
+                增加
+              </Button>
+            </div>
+          </div>
+        </TDemoBlock>
+        <TDemoBlock summary="自定义颜色">
+          <Type />
+        </TDemoBlock>
+      </TDemoBlock>
+      <TDemoBlock title="03 规格" summary="">
+        <TDemoBlock summary="带数值进度条">
+          <div class="progress-demo">
+            <Progress percentage="88" />
+          </div>
+        </TDemoBlock>
+        <TDemoBlock summary="无数值进度条">
+          <div class="progress-demo">
+            <Progress percentage="88" label={false} />
+          </div>
+        </TDemoBlock>
+      </TDemoBlock>
+    </div>
+  );
+}
diff --git a/src/progress/_example/style/index.less b/src/progress/_example/style/index.less
@@ -0,0 +1,27 @@
+.tdesign-mobile-demo.progress {
+    background-color: #F6F6F6;
+
+}
+
+.progress-demo {
+    padding: 8px 16px;
+    background-color: #fff;
+
+    .button-group {
+        display: flex;
+        justify-content: center;
+        padding-bottom: 8px;
+
+        .space {
+            width: 16px;
+        }
+    }
+
+    .label--color {
+        color: #d504d9;
+    }
+}
+
+.progress-demo--margin:not(:last-child) {
+    margin-bottom: 16px;
+}
diff --git a/src/progress/_example/text.jsx b/src/progress/_example/text.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Progress } from 'tdesign-mobile-react';
+import './style/index.less';
+
+export default function Text() {
+  return (
+    <div className="tdesign-mobile-demo progress">
+      <div class="progress-demo progress-demo--margin">
+        <Progress percentage="88" />
+      </div>
+      <div class="progress-demo progress-demo--margin">
+        <Progress percentage="88" label={false} />
+      </div>
+    </div>
+  );
+}
diff --git a/src/progress/_example/type.jsx b/src/progress/_example/type.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Progress } from 'tdesign-mobile-react';
+import './style/index.less';
+
+export default function Base() {
+  const customPercentage = 88;
+  return (
+    <div className="tdesign-mobile-demo progress">
+      <div className="progress-demo">
+        <Progress percentage={customPercentage} trackColor="#EAC9FF" color="#CD04FF">
+          <span className="label--color">{customPercentage}%</span>
+        </Progress>
+      </div>
+    </div>
+  );
+}
diff --git a/src/progress/defaultProps.ts b/src/progress/defaultProps.ts
@@ -0,0 +1,13 @@
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdProgressProps } from './type';
+
+export const progressDefaultProps: TdProgressProps = {
+  color: '',
+  label: true,
+  percentage: 0,
+  status: 'active',
+  trackColor: '',
+};
diff --git a/src/progress/index.tsx b/src/progress/index.tsx
@@ -0,0 +1,8 @@
+import _Progress from './Progress';
+
+import './style';
+
+export * from './type';
+
+export const Progress = _Progress;
+export default Progress;
diff --git a/src/progress/progress.md b/src/progress/progress.md
@@ -0,0 +1,13 @@
+:: BASE_DOC ::
+
+## API
+### Progress Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+color | String / Object / Array | '' | 进度条颜色。示例：'#ED7B2F' 或 'orange' 或 `['#f00', '#0ff', '#f0f']` 或 `{ '0%': '#f00', '100%': '#0ff' }` 或  `{ from: '#000', to: '#000' }` 等。TS 类型：`string | Array<string> | Record<string, string>` | N
+label | String / Boolean / Slot / Function | true | 进度百分比，可自定义。TS 类型：`string | boolean | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+percentage | Number | 0 | 进度条百分比 | N
+status | String | - | 进度条状态。可选项：success/error/warning/active。TS 类型：`StatusEnum` `type StatusEnum = 'success' | 'error' | 'warning' | 'active'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/progress/type.ts) | N
+strokeWidth | String / Number | - | 进度条线宽。宽度数值不能超过 size 的一半，否则不能输出环形进度 | N
+trackColor | String | '' | 进度条未完成部分颜色 | N
diff --git a/src/progress/style/css.js b/src/progress/style/css.js
@@ -0,0 +1 @@
+import './index.css';
diff --git a/src/progress/style/index.js b/src/progress/style/index.js
@@ -0,0 +1 @@
+import '../../_common/style/mobile/components/progress/_index.less';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		import '../../_common/style/mobile/components/progress/_index.less';