growingio · jack0pan · Aug 12, 2020 · Aug 12, 2020 · Aug 12, 2020
diff --git a/packages/components/src/components/progress/Progress.tsx b/packages/components/src/components/progress/Progress.tsx
@@ -0,0 +1,32 @@
+import React, { useContext } from 'react';
+import { ProgressProps, ProgressStatus } from './interface';
+import { CheckCircleFilled, CloseCircleFilled } from '@gio-design/icons';
+import { ConfigContext } from '../config-provider';
+
+const defaultFormat = (percent?: number) => Math.round((percent || 0) * 100) / 100 + '%';
+const statusIcons = [null, CheckCircleFilled, CloseCircleFilled];
+
+const getStatusIcon = (status: string, prefix: string) => {
+  const Icon = statusIcons[ProgressStatus[status as keyof typeof ProgressStatus]];
+  return Icon && <Icon className={`${prefix}-${status}-icon`} />;
+};
+
+const Progress: React.FC<ProgressProps> = (props) => {
+  const { percent, status = 'active', format = defaultFormat, customizePrefixCls } = props;
+  const { getPrefixCls } = useContext(ConfigContext);
+  const prefixCls = getPrefixCls('progress', customizePrefixCls);
+
+  return (
+    <div className={prefixCls}>
+      <div className={`${prefixCls}-trail`}>
+        <div className={`${prefixCls}-stroke ${prefixCls}-${status}`} style={{ width: `${percent}%` }} />
+      </div>
+      <div className={`${prefixCls}-info`}>
+        <span className={`${prefixCls}-text`}>{format(percent)}</span>
+        <span className={`${prefixCls}-icon`}>{getStatusIcon(status, prefixCls)}</span>
+      </div>
+    </div>
+  );
+};
+
+export default Progress;
diff --git a/packages/components/src/components/progress/__tests__/Progress.test.js b/packages/components/src/components/progress/__tests__/Progress.test.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import Progress from '../index';
+import renderer from 'react-test-renderer';
+import '@gio-design/components/es/components/Progress/style/index.css';
+import { shallow, render } from 'enzyme';
+
+describe('<Progress />', () => {
+  it('render active Tag Component', () => {
+    const tree = renderer.create(<Progress percent={1} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('render sucess Tag Component', () => {
+    const tree = renderer.create(<Progress percent={100} status="success" />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('render active Tag Component', () => {
+    const tree = renderer.create(<Progress percent={1} status="exception" />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
+
+describe('<Progress>', () => {
+  it('should has customizePrefixCls class', () => {
+    const tree = shallow(<Progress customizePrefixCls="test-custom-progress" />);
+    expect(tree.hasClass('test-custom-progress')).toBe(true);
+  });
+});
+
+describe('<Progress>', () => {
+  it('should render correct stroke width', () => {
+    const tree = shallow(<Progress percent={30} />);
+    expect(tree.find('.gio-progress-stroke').prop('style').width).toBe('30%');
+  });
+
+  it('should render correct stroke width', () => {
+    const tree = shallow(<Progress percent={0} />);
+    expect(tree.find('.gio-progress-stroke').prop('style').width).toBe('0%');
+  });
+});
diff --git a/packages/components/src/components/progress/__tests__/__snapshots__/Progress.test.js.snap b/packages/components/src/components/progress/__tests__/__snapshots__/Progress.test.js.snap
@@ -0,0 +1,148 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Progress /> render active Tag Component 1`] = `
+<div
+  className="gio-progress"
+>
+  <div
+    className="gio-progress-trail"
+  >
+    <div
+      className="gio-progress-stroke gio-progress-active"
+      style={
+        Object {
+          "width": "1%",
+        }
+      }
+    />
+  </div>
+  <div
+    className="gio-progress-info"
+  >
+    <span
+      className="gio-progress-text"
+    >
+      1%
+    </span>
+    <span
+      className="gio-progress-icon"
+    />
+  </div>
+</div>
+`;
+
+exports[`<Progress /> render active Tag Component 2`] = `
+<div
+  className="gio-progress"
+>
+  <div
+    className="gio-progress-trail"
+  >
+    <div
+      className="gio-progress-stroke gio-progress-exception"
+      style={
+        Object {
+          "width": "1%",
+        }
+      }
+    />
+  </div>
+  <div
+    className="gio-progress-info"
+  >
+    <span
+      className="gio-progress-text"
+    >
+      1%
+    </span>
+    <span
+      className="gio-progress-icon"
+    >
+      <svg
+        className="gio-progress-exception-icon"
+        height="1em"
+        viewBox="0 0 14 14"
+        width="1em"
+      >
+        <defs>
+          <style />
+        </defs>
+        <g
+          data-name="\\\\u56FE\\\\u5C42 2"
+          id="close-circle-filled_svg__\\\\u56FE\\\\u5C42_2"
+        >
+          <g
+            data-name="\\\\u56FE\\\\u5C42 1"
+            id="close-circle-filled_svg__\\\\u56FE\\\\u5C42_1-2"
+          >
+            <path
+              d="M4.17 4.17a.5.5 0 01.71 0l2 2a.19.19 0 00.28 0l2-2a.5.5 0 01.71 0 .5.5 0 010 .71l-2 2a.19.19 0 000 .28l2 2a.5.5 0 010 .71.5.5 0 01-.71 0l-2-2a.19.19 0 00-.28 0l-2 2a.5.5 0 01-.71 0 .5.5 0 010-.71l2-2a.19.19 0 000-.28l-2-2a.5.5 0 010-.71zM7 0a7 7 0 11-7 7 7 7 0 017-7z"
+              fill="currentColor"
+              fillRule="evenodd"
+              id="close-circle-filled_svg__close-circle"
+            />
+          </g>
+        </g>
+      </svg>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`<Progress /> render sucess Tag Component 1`] = `
+<div
+  className="gio-progress"
+>
+  <div
+    className="gio-progress-trail"
+  >
+    <div
+      className="gio-progress-stroke gio-progress-success"
+      style={
+        Object {
+          "width": "100%",
+        }
+      }
+    />
+  </div>
+  <div
+    className="gio-progress-info"
+  >
+    <span
+      className="gio-progress-text"
+    >
+      100%
+    </span>
+    <span
+      className="gio-progress-icon"
+    >
+      <svg
+        className="gio-progress-success-icon"
+        height="1em"
+        viewBox="0 0 14 14"
+        width="1em"
+      >
+        <defs>
+          <style />
+        </defs>
+        <g
+          data-name="\\\\u56FE\\\\u5C42 2"
+          id="check-circle-filled_svg__\\\\u56FE\\\\u5C42_2"
+        >
+          <g
+            data-name="\\\\u56FE\\\\u5C42 1"
+            id="check-circle-filled_svg__\\\\u56FE\\\\u5C42_1-2"
+          >
+            <path
+              d="M5.75 8.26a.19.19 0 00.28 0c.59-.59 2.85-2.84 3.74-3.74a.52.52 0 01.73 0 .51.51 0 010 .72L6.62 9.13l-.34.34a.46.46 0 01-.34.16.47.47 0 01-.36-.13l-.4-.39-1.74-1.74a.52.52 0 010-.72.52.52 0 01.35-.14.5.5 0 01.35.14c.47.47 1.28 1.29 1.61 1.61zM7 0a7 7 0 11-7 7 7 7 0 017-7z"
+              fill="currentColor"
+              fillRule="evenodd"
+              id="check-circle-filled_svg__check-circle"
+            />
+          </g>
+        </g>
+      </svg>
+    </span>
+  </div>
+</div>
+`;
diff --git a/packages/components/src/components/progress/index.tsx b/packages/components/src/components/progress/index.tsx
@@ -0,0 +1,3 @@
+import Progress from './Progress';
+
+export default Progress;
diff --git a/packages/components/src/components/progress/interface.ts b/packages/components/src/components/progress/interface.ts
@@ -0,0 +1,12 @@
+export enum ProgressStatus {
+  active,
+  success,
+  exception,
+}
+
+export interface ProgressProps {
+  percent?: number;
+  status?: keyof typeof ProgressStatus | string;
+  format?: (percent?: number) => React.ReactNode;
+  customizePrefixCls?: string;
+}
diff --git a/packages/components/src/components/progress/style/index.less b/packages/components/src/components/progress/style/index.less
@@ -0,0 +1,81 @@
+@import '~@gio-design/tokens/dist/variables.less';
+@import '../../../stylesheet/theme.less';
+@import '../../../stylesheet/radius.less';
+
+@progress-prefix-cls: ~'@{component-prefix}-progress';
+
+@progress-height: 16px;
+
+// progress无token 暂时使用色值 之后替换为新版color palette值
+@progress-text-color: #242E59;
+@progress-trail-bg-color: #EBEDF5;
+@progress-trail-border-color: #DFE2ED;
+@progress-trail-bg-shadow-color: #DCDFED;
+@progress-active-bg-color: #3867F4;
+@progress-active-bg-shadow-color: #1248E9;
+@progress-success-bg-color: #0BA471;
+@progress-success-bg-shadow-color:#00875A;
+@progress-exception-bg-color: #DE350B;
+@progress-exception-bg-shadow-color: #BC2B07;
+
+.@{progress-prefix-cls}{ 
+  display: flex;
+  align-items: center;
+  color: @progress-text-color;
+  font-size: @size-font-16;
+  font-weight:  @weight-font-regular;
+  &-trail {
+    flex-basis: 100%;
+    background-color: @progress-trail-bg-color;
+    border: 0.5px solid @progress-trail-border-color;
+    box-shadow: inset 0 0 3px @progress-trail-bg-shadow-color;
+    height: @progress-height;
+    border-radius: @border-radius-pill;
+    overflow: hidden;
+  }
+
+  &-stroke {
+    width: 0;
+    height: 100%;
+    transition: all .4s cubic-bezier(.08,.82,.17,1) 0s;
+  }
+
+  &-active {
+    background-color: @progress-active-bg-color;
+    box-shadow: inset 0 0 5px @progress-active-bg-shadow-color;
+  }
+
+  &-success {
+    background-color: @progress-success-bg-color;
+    box-shadow: inset 0 0 5px @progress-success-bg-shadow-color;
+    &-icon {
+      vertical-align: text-top;
+      color:  @progress-success-bg-color
+    }
+  }
+
+  &-exception {
+    background-color: @progress-exception-bg-color;
+    box-shadow: inset 0 0 5px @progress-exception-bg-shadow-color;
+    &-icon {
+      vertical-align: text-top;
+      color:  @progress-exception-bg-color;
+      margin-top: 1.5px;
+    }
+  }
+
+  &-info {
+    margin-left: @size-spacing-m;
+    white-space: nowrap;
+    width: 6rem;
+  }
+
+  &-text {
+    vertical-align: middle;
+  }
+
+  &-icon {
+    vertical-align: middle;
+    margin-left: @size-spacing-xs;
+  }
+}
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
@@ -13,3 +13,4 @@ export { default as Tag } from './components/tag';
 export { default as Loading } from './components/loading';
 export { default as Skeleton } from './components/skeleton';
 export { default as Popconfirm } from './components/popconfirm';
+export { default as Progress } from './components/progress';
diff --git a/packages/website/src/components/basic/progress/demos/index.tsx b/packages/website/src/components/basic/progress/demos/index.tsx
@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from 'react';
+import { Progress } from '@gio-design/components';
+import '@gio-design/components/es/components/progress/style/index.css';
+
+const ProgressDemo = () => {
+  const [percent, setPercent] = useState(0);
+  const [percentError, setPercentError] = useState(0);
+  const [status, setStatus] = useState('active');
+
+  useEffect(() => {
+    if (percent < 100) {
+      setTimeout(() => {
+        setPercent(percent + 10);
+      }, 200);
+    }
+  }, [percent]);
+
+  useEffect(() => {
+    if (percentError < 30) {
+      setTimeout(() => {
+        setPercentError(percentError + 2);
+      }, 200);
+    } else {
+      setStatus('exception');
+    }
+  }, [percentError]);
+
+  return (
+    <>
+      <Progress percent={30} />
+      <Progress percent={percent} status={percent === 100 ? 'success' : 'active'} />
+      <Progress percent={percentError} status={status} />
+    </>
+  );
+};
+
+export default ProgressDemo;
diff --git a/packages/website/src/components/basic/progress/index.zh-CN.md b/packages/website/src/components/basic/progress/index.zh-CN.md
@@ -0,0 +1,30 @@
+---
+title: Progress 进度条
+nav:
+  order: 2
+  title: 组件
+group:
+  title: 基础组件
+  order: 9
+---
+
+# Progress 进度条
+
+## 定义
+
+展示操作的当前进度。
+
+## 样式
+
+<code src='./demos/index.tsx' title='基本用法'>
+
+## 参数说明
+
+### Progress
+
+| 参数               | 说明                                  | 类型     | 默认值                                   |
+| ------------------ | ------------------------------------- | -------- | ---------------------------------------- |
+| percent            | 百分比                                | `number` |                                          |
+| status             | 可选 `active`, `success`, `expection` | `string` |                                          |
+| format             | 内容模版函数                          |          | `(percent?: number) => React.ReactNode;` |
+| customizePrefixCls |                                       |          |                                          |
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import Progress from './Progress';

		export default Progress;