Merge pull request #25841 from ant-design/feature

chore: merge feature into master

components/steps/demo/progress-debug.md

@@ -0,0 +1,67 @@
+---
+order: 99
+title:
+  zh-CN: Progress Debug
+  en-US: Progress Debug
+debug: true
+---
+
+## zh-CN
+
+Buggy!
+
+## en-US
+
+Buggy!
+
+```jsx
+import { Steps, Button } from 'antd';
+
+const { Step } = Steps;
+
+function Demo() {
+  const [percent, setPercentage] = React.useState(0);
+  const [current, setCurrent] = React.useState(1);
+  const [status, setStatus] = React.useState('process');
+  return (
+    <>
+      <Button onClick={() => setPercentage(undefined)}>Percentage to undefined</Button>
+      <Button onClick={() => setPercentage((percent + 10) % 100)}>Percentage +</Button>
+      <Button
+        onClick={() => {
+          setCurrent((current + 1) % 3);
+          setPercentage(0);
+        }}
+      >
+        Current +
+      </Button>
+      <Button onClick={() => setStatus('wait')}>Status Wait</Button>
+      <Button onClick={() => setStatus('process')}>Status Process</Button>
+      <Button onClick={() => setStatus('finish')}>Status Finish</Button>
+      <Button onClick={() => setStatus('error')}>Status Error</Button>
+      <Steps current={current} percent={percent} status={status}>
+        <Step title="Finished" description="This is a description." />
+        <Step title="In Progress" subTitle="Left 00:00:08" description="This is a description." />
+        <Step title="Waiting" description="This is a description." />
+      </Steps>
+      <Steps current={current} percent={percent} status={status} size="small">
+        <Step title="Finished" description="This is a description." />
+        <Step title="In Progress" subTitle="Left 00:00:08" description="This is a description." />
+        <Step title="Waiting" description="This is a description." />
+      </Steps>
+      <Steps current={current} percent={percent} status={status} direction="vertical">
+        <Step title="Finished" description="This is a description." />
+        <Step title="In Progress" subTitle="Left 00:00:08" description="This is a description." />
+        <Step title="Waiting" description="This is a description." />
+      </Steps>
+      <Steps current={current} percent={percent} status={status} size="small" direction="vertical">
+        <Step title="Finished" description="This is a description." />
+        <Step title="In Progress" subTitle="Left 00:00:08" description="This is a description." />
+        <Step title="Waiting" description="This is a description." />
+      </Steps>
+    </>
+  );
+}
+
+ReactDOM.render(<Demo />, mountNode);
+```

components/steps/demo/progress.md

@@ -0,0 +1,29 @@
+---
+order: 13
+title:
+  zh-CN: 带有进度的步骤
+  en-US: Steps with progress
+---
+
+## zh-CN
+
+带有进度的步骤。
+
+## en-US
+
+Steps with progress.
+
+```jsx
+import { Steps } from 'antd';
+
+const { Step } = Steps;
+
+ReactDOM.render(
+  <Steps current={1} percent={60}>
+    <Step title="Finished" description="This is a description." />
+    <Step title="In Progress" subTitle="Left 00:00:08" description="This is a description." />
+    <Step title="Waiting" description="This is a description." />
+  </Steps>,
+  mountNode,
+);
+```

components/steps/index.en-US.md

@@ -38,6 +38,7 @@ The whole of the step bar.
 | status | To specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | string | `process` |  |
 | initial | Set the initial step, counting from 0 | number | 0 |  |
 | onChange | Trigger when Step is changed | (current) => void | - |  |
+| percent | Progress circle percentage of current step in `process` status (only works on basic Steps) | number | - | 4.5.0 |
 
 ### Steps.Step
 

components/steps/index.tsx

@@ -1,10 +1,12 @@
 import * as React from 'react';
+import omit from 'omit.js';
 import RcSteps from 'rc-steps';
 import CheckOutlined from '@ant-design/icons/CheckOutlined';
 import CloseOutlined from '@ant-design/icons/CloseOutlined';
 import classNames from 'classnames';
 
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import Progress from '../progress';
 
 export interface StepsProps {
   type?: 'default' | 'navigation';
@@ -19,6 +21,7 @@ export interface StepsProps {
   size?: 'default' | 'small';
   status?: 'wait' | 'process' | 'finish' | 'error';
   style?: React.CSSProperties;
+  percent?: number;
   onChange?: (current: number) => void;
 }
 
@@ -44,17 +47,48 @@ export default class Steps extends React.Component<StepsProps, any> {
   renderSteps = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
     const prefixCls = getPrefixCls('steps', this.props.prefixCls);
     const iconPrefix = getPrefixCls('', this.props.iconPrefix);
+    const { percent, size } = this.props;
     const className = classNames(this.props.className, {
       [`${prefixCls}-rtl`]: direction === 'rtl',
     });
     const icons = {
       finish: <CheckOutlined className={`${prefixCls}-finish-icon`} />,
       error: <CloseOutlined className={`${prefixCls}-error-icon`} />,
     };
+    const stepIconRender = ({
+      node,
+      status,
+    }: {
+      node: React.ReactNode;
+      index: number;
+      status: string;
+      title: string | React.ReactNode;
+      description: string | React.ReactNode;
+    }) => {
+      if (status === 'process' && percent !== undefined) {
+        // currently it's hard-coded, since we can't easily read the actually width of icon
+        const progressWidth = size === 'small' ? 30 : 38;
+        const iconWithProgress = (
+          <div className={`${prefixCls}-progress-icon`}>
+            <Progress
+              type="circle"
+              percent={percent}
+              width={progressWidth}
+              strokeWidth={4}
+              format={() => null}
+            />
+            {node}
+          </div>
+        );
+        return iconWithProgress;
+      }
+      return node;
+    };
     return (
       <RcSteps
         icons={icons}
-        {...this.props}
+        {...omit(this.props, ['progress'])}
+        stepIcon={stepIconRender}
         prefixCls={prefixCls}
         iconPrefix={iconPrefix}
         className={className}

components/steps/index.zh-CN.md

@@ -39,6 +39,7 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/UZYqMizXHaj/Steps.svg
 | status | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | string | `process` |  |
 | initial | 起始序号，从 0 开始记数 | number | 0 |  |
 | onChange | 点击切换步骤时触发 | (current) => void | - |  |
+| percent | 当前 `process` 步骤显示的进度条进度（只对基本类型的 Steps 生效） | number | - | 4.5.0 |
 
 ### Steps.Step
 

components/steps/style/index.less

@@ -67,7 +67,7 @@
     border-radius: @steps-icon-size;
     transition: background-color 0.3s, border-color 0.3s;
 
-    > .@{steps-prefix-cls}-icon {
+    .@{steps-prefix-cls}-icon {
       position: relative;
       top: @steps-icon-top;
       color: @primary-color;
@@ -125,7 +125,7 @@
   .step-item-status(process);
   &-process &-icon {
     background: @process-icon-color;
-    > .@{steps-prefix-cls}-icon {
+    .@{steps-prefix-cls}-icon {
       color: @process-icon-text-color;
     }
   }
@@ -188,11 +188,11 @@
 
 .@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical) {
   .@{steps-prefix-cls}-item {
-    margin-right: 16px;
+    padding-left: 16px;
     white-space: nowrap;
 
-    &:last-child {
-      margin-right: 0;
+    &:first-child {
+      padding-left: 0;
     }
     &:last-child .@{steps-prefix-cls}-item-title {
       padding-right: 0;
@@ -243,3 +243,4 @@
 @import 'progress-dot';
 @import 'nav';
 @import './rtl';
+@import './progress.less';

components/steps/style/index.tsx

@@ -1,2 +1,4 @@
 import '../../style/index.less';
 import './index.less';
+
+import '../../progress/style';

components/steps/style/progress.less

@@ -0,0 +1,21 @@
+@progress-prefix-cls: ~'@{ant-prefix}-progress';
+
+.@{steps-prefix-cls}:not(.@{steps-prefix-cls}-dot):not(.@{steps-prefix-cls}-navigation) {
+  &:not(.@{steps-prefix-cls}-vertical) {
+    .@{steps-prefix-cls}-item {
+      padding-top: 4px;
+    }
+  }
+  .@{steps-prefix-cls}-item {
+    .@{steps-prefix-cls}-item-icon {
+      position: relative;
+      .@{progress-prefix-cls} {
+        position: absolute;
+        top: -4px;
+        right: -4px;
+        bottom: -4px;
+        left: -4px;
+      }
+    }
+  }
+}

components/steps/style/small.less

@@ -1,10 +1,10 @@
 .@{steps-prefix-cls}-small {
   &.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical)
     .@{steps-prefix-cls}-item {
-    margin-right: 12px;
+    padding-left: 12px;
 
-    &:last-child {
-      margin-right: 0;
+    &:first-child {
+      padding-left: 0;
     }
   }
   .@{steps-prefix-cls}-item-icon {

docs/react/replace-moment.en-US.md

@@ -5,7 +5,7 @@ title: Replace Moment.js
 
 ## How to use DatePicker with a custom date library like dayjs
 
-Considering it's bundle size, you might want to replace Moment.js with a different date library of your choice. We provide two ways to customize which date library is used:
+Considering it's bundle size, you might want to replace Moment.js with a different date library (now support dayjs and date-fns) of your choice. We provide two ways to customize which date library is used:
 
 ### Custom component
 
@@ -104,3 +104,25 @@ If you use [umi](https://umijs.org/), you can reference [antd4-use-dayjs-replace
 ### Webpack plugin
 
 We also provide another implementation, which we provide with `antd-dayjs-webpack-plugin`, replacing `momentjs` with `Day.js` directly without changing a line of existing code. More info can be found at [antd-dayjs-webpack-plugin](https://github.com/ant-design/antd-dayjs-webpack-plugin).
+
+## Use date-fns
+
+`date-fns` currently supports custom component methods similar to `dayjs`. The difference is that the parameter types used are different. Support is provided in antd 4.5.0 and above.
+
+For Example:
+
+### DatePicker.tsx
+
+Create `src/components/DatePicker.tsx`.
+
+Code as follows:
+
+```tsx
+import dateFnsGenerateConfig from 'rc-picker/lib/generate/dateFns';
+import generatePicker from 'antd/es/date-picker/generatePicker';
+import 'antd/es/date-picker/style/index';
+
+const DatePicker = generatePicker<Date>(dateFnsGenerateConfig);
+
+export default DatePicker;
+```

docs/react/replace-moment.zh-CN.md

@@ -104,3 +104,25 @@ export { default as TimePicker } from './TimePicker';
 ### Webpack 配置替换
 
 我们还提供另一种实现方式。使用 `antd-dayjs-webpack-plugin` 插件，无需对现有代码做任何修改直接替换成 `Day.js`。请参考 [antd-dayjs-webpack-plugin](https://github.com/ant-design/antd-dayjs-webpack-plugin)。
+
+## 使用 date-fns
+
+`date-fns` 目前支持和 dayjs 类似的自定义组件方法，区别在于使用的参数类型不同，在 antd 4.5.0 以上版本提供支持。
+
+做一个简单的例子：
+
+### DatePicker.tsx
+
+新建 `src/components/DatePicker.tsx`。
+
+编写如下代码:
+
+```tsx
+import dateFnsGenerateConfig from 'rc-picker/lib/generate/dateFns';
+import generatePicker from 'antd/es/date-picker/generatePicker';
+import 'antd/es/date-picker/style/index';
+
+const DatePicker = generatePicker<Date>(dateFnsGenerateConfig);
+
+export default DatePicker;
+```

package.json

@@ -134,7 +134,7 @@
     "rc-resize-observer": "^0.2.3",
     "rc-select": "^11.0.10",
     "rc-slider": "~9.3.0",
-    "rc-steps": "~4.0.1",
+    "rc-steps": "~4.1.0",
     "rc-switch": "~3.2.0",
     "rc-table": "~7.8.0",
     "rc-tabs": "~11.5.0",