Merge pull request #15283 from ant-design/chore/mergem

Sync master changes to feature branch

components/badge/ScrollNumber.tsx

@@ -3,6 +3,7 @@ import { createElement, Component } from 'react';
 import omit from 'omit.js';
 import classNames from 'classnames';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import { polyfill } from 'react-lifecycles-compat';
 
 function getNumberArray(num: string | number | undefined | null) {
   return num
@@ -30,13 +31,23 @@ export interface ScrollNumberState {
   count?: string | number | null;
 }
 
-export default class ScrollNumber extends Component<ScrollNumberProps, ScrollNumberState> {
+class ScrollNumber extends Component<ScrollNumberProps, ScrollNumberState> {
   static defaultProps = {
     count: null,
     onAnimated() {},
   };
 
-  lastCount: any;
+  static getDerivedStateFromProps(nextProps: ScrollNumberProps, nextState: ScrollNumberState) {
+    if ('count' in nextProps) {
+      if (nextState.count === nextProps.count) {
+        return null;
+      }
+      return { animateStarted: true };
+    }
+    return null;
+  }
+
+  lastCount?: string | number | null;
 
   constructor(props: ScrollNumberProps) {
     super(props);
@@ -53,7 +64,7 @@ export default class ScrollNumber extends Component<ScrollNumberProps, ScrollNum
     const currentDigit = getNumberArray(this.state.count)[i];
     const lastDigit = getNumberArray(this.lastCount)[i];
     // 同方向则在同一侧切换数字
-    if (this.state.count! > this.lastCount) {
+    if (Number(this.state.count) > Number(this.lastCount)) {
       if (currentDigit >= lastDigit) {
         return 10 + num;
       }
@@ -65,36 +76,15 @@ export default class ScrollNumber extends Component<ScrollNumberProps, ScrollNum
     return num;
   }
 
-  componentWillReceiveProps(nextProps: ScrollNumberProps) {
-    if ('count' in nextProps) {
-      if (this.state.count === nextProps.count) {
-        return;
-      }
-      this.lastCount = this.state.count;
-      // 复原数字初始位置
-      this.setState(
-        {
-          animateStarted: true,
-        },
-        () => {
-          // 等待数字位置复原完毕
-          // 开始设置完整的数字
-          setTimeout(() => {
-            this.setState(
-              {
-                animateStarted: false,
-                count: nextProps.count,
-              },
-              () => {
-                const onAnimated = this.props.onAnimated;
-                if (onAnimated) {
-                  onAnimated();
-                }
-              },
-            );
-          }, 5);
-        },
-      );
+  componentDidUpdate(_: any, prevState: ScrollNumberState) {
+    this.lastCount = prevState.count;
+    if (this.state.animateStarted) {
+      this.setState({ animateStarted: false, count: this.props.count }, () => {
+        const { onAnimated } = this.props;
+        if (onAnimated) {
+          onAnimated();
+        }
+      });
     }
   }
 
@@ -189,3 +179,7 @@ export default class ScrollNumber extends Component<ScrollNumberProps, ScrollNum
     return <ConfigConsumer>{this.renderScrollNumber}</ConfigConsumer>;
   }
 }
+
+polyfill(ScrollNumber);
+
+export default ScrollNumber;

components/calendar/__tests__/index.test.js

@@ -134,9 +134,9 @@ describe('Calendar', () => {
     const onPanelChangeStub = jest.fn();
     const wrapper = mount(<Calendar mode={yearMode} onPanelChange={onPanelChangeStub} />);
     expect(wrapper.state().mode).toEqual(yearMode);
-    wrapper.instance().setType('date');
+    wrapper.setProps({ mode: monthMode });
     expect(wrapper.state().mode).toEqual(monthMode);
-    expect(onPanelChangeStub).toHaveBeenCalledTimes(1);
+    expect(onPanelChangeStub).toHaveBeenCalledTimes(0);
   });
 
   it('Calendar should support locale', () => {

components/calendar/index.tsx

@@ -7,6 +7,7 @@ import enUS from './locale/en_US';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 import interopDefault from '../_util/interopDefault';
+import { polyfill } from 'react-lifecycles-compat';
 
 export { HeaderProps } from './Header';
 
@@ -48,7 +49,7 @@ export interface CalendarState {
   mode?: CalendarMode;
 }
 
-export default class Calendar extends React.Component<CalendarProps, CalendarState> {
+class Calendar extends React.Component<CalendarProps, CalendarState> {
   static defaultProps = {
     locale: {},
     fullscreen: true,
@@ -74,6 +75,17 @@ export default class Calendar extends React.Component<CalendarProps, CalendarSta
     onChange: PropTypes.func,
   };
 
+  static getDerivedStateFromProps(nextProps: CalendarProps) {
+    const newState = {} as CalendarState;
+    if ('value' in nextProps) {
+      newState.value = nextProps.value!;
+    }
+    if ('mode' in nextProps) {
+      newState.mode = nextProps.mode;
+    }
+    return Object.keys(newState).length > 0 ? newState : null;
+  }
+
   prefixCls?: string;
 
   constructor(props: CalendarProps) {
@@ -92,19 +104,6 @@ export default class Calendar extends React.Component<CalendarProps, CalendarSta
     };
   }
 
-  componentWillReceiveProps(nextProps: CalendarProps) {
-    if ('value' in nextProps) {
-      this.setState({
-        value: nextProps.value!,
-      });
-    }
-    if ('mode' in nextProps && nextProps.mode !== this.props.mode) {
-      this.setState({
-        mode: nextProps.mode!,
-      });
-    }
-  }
-
   monthCellRender = (value: moment.Moment) => {
     const { monthCellRender = noop as Function } = this.props;
     const { prefixCls } = this;
@@ -283,3 +282,7 @@ export default class Calendar extends React.Component<CalendarProps, CalendarSta
     );
   }
 }
+
+polyfill(Calendar);
+
+export default Calendar;

components/form/Form.tsx

@@ -38,18 +38,16 @@ export interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
   className?: string;
   prefixCls?: string;
   hideRequiredMark?: boolean;
-  /**
-   * @since 3.14.0
-   */
-  labelCol?: ColProps;
   /**
    * @since 3.14.0
    */
   wrapperCol?: ColProps;
+  labelCol?: ColProps;
   /**
    * @since 3.15.0
    */
   colon?: boolean;
+  labelAlign?: 'left' | 'right';
 }
 
 export type ValidationRule = {
@@ -262,6 +260,7 @@ export default class Form extends React.Component<FormProps, any> {
       'form',
       'hideRequiredMark',
       'wrapperCol',
+      'labelAlign',
       'labelCol',
       'colon',
     ]);
@@ -270,10 +269,10 @@ export default class Form extends React.Component<FormProps, any> {
   };
 
   render() {
-    const { wrapperCol, labelCol, layout, colon } = this.props;
+    const { wrapperCol, labelAlign, labelCol, layout, colon } = this.props;
     return (
       <FormContext.Provider
-        value={{ wrapperCol, labelCol, vertical: layout === 'vertical', colon }}
+        value={{ wrapperCol, labelAlign, labelCol, vertical: layout === 'vertical', colon }}
       >
         <ConfigConsumer>{this.renderForm}</ConfigConsumer>
       </FormContext.Provider>

components/form/FormItem.tsx

@@ -19,6 +19,7 @@ export interface FormItemProps {
   className?: string;
   id?: string;
   label?: React.ReactNode;
+  labelAlign?: 'left' | 'right';
   labelCol?: ColProps;
   wrapperCol?: ColProps;
   help?: React.ReactNode;
@@ -42,6 +43,7 @@ export default class FormItem extends React.Component<FormItemProps, any> {
   static propTypes = {
     prefixCls: PropTypes.string,
     label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    labelAlign: PropTypes.string,
     labelCol: PropTypes.object,
     help: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
     validateStatus: PropTypes.oneOf(ValidateStatuses),
@@ -328,14 +330,24 @@ export default class FormItem extends React.Component<FormItemProps, any> {
   renderLabel(prefixCls: string) {
     return (
       <FormContext.Consumer key="label">
-        {({ vertical, labelCol: contextLabelCol, colon: contextColon }: FormContextProps) => {
+        {({
+          vertical,
+          labelAlign,
+          labelCol: contextLabelCol,
+          colon: contextColon,
+        }: FormContextProps) => {
           const { label, labelCol, colon, id } = this.props;
           const required = this.isRequired();
 
           const mergedLabelCol: ColProps =
             ('labelCol' in this.props ? labelCol : contextLabelCol) || {};
 
-          const labelColClassName = classNames(`${prefixCls}-item-label`, mergedLabelCol.className);
+          const labelClsBasic = `${prefixCls}-item-label`;
+          const labelColClassName = classNames(
+            labelClsBasic,
+            labelAlign === 'left' && `${labelClsBasic}-left`,
+            mergedLabelCol.className,
+          );
           const labelClassName = classNames({
             [`${prefixCls}-item-required`]: required,
           });

components/form/context.ts

@@ -4,10 +4,12 @@ import { ColProps } from '../grid/col';
 export interface FormContextProps {
   vertical: boolean;
   colon?: boolean;
+  labelAlign?: string;
   labelCol?: ColProps;
   wrapperCol?: ColProps;
 }
 
 export const FormContext: Context<FormContextProps> = createReactContext({
+  labelAlign: 'right',
   vertical: false,
 });

components/form/index.en-US.md

@@ -36,6 +36,7 @@ A form field is defined using `<Form.Item />`.
 | -------- | ----------- | ---- | ------------- |
 | form | Decorated by `Form.create()` will be automatically set `this.props.form` property | object | n/a |
 | hideRequiredMark | Hide required mark of all form items | Boolean | false |
+| labelAlign | Label text align | 'left' \| 'right' | 'right' |
 | labelCol | (Added in 3.14.0. Previous version can only set on FormItem.) The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `<Col>` | [object](https://ant.design/components/grid/#Col) |  |
 | layout | Define form layout | 'horizontal'\|'vertical'\|'inline' | 'horizontal' |
 | onSubmit | Defines a function will be called if form data validation is successful. | Function(e:Event) |  |

components/form/index.zh-CN.md

@@ -38,6 +38,7 @@ title: Form
 | --- | --- | --- | --- |
 | form | 经 `Form.create()` 包装过的组件会自带 `this.props.form` 属性 | object | - |
 | hideRequiredMark | 隐藏所有表单项的必选标记 | Boolean | false |
+| labelAlign | label 标签的文本对齐方式 | 'left' \| 'right' | 'right' |
 | labelCol | （3.14.0 新增，之前的版本只能设置到 FormItem 上。）label 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}` | [object](https://ant.design/components/grid/#Col) |  |
 | layout | 表单布局 | 'horizontal'\|'vertical'\|'inline' | 'horizontal' |
 | onSubmit | 数据验证成功后回调事件 | Function(e:Event) |  |

components/form/style/index.less

@@ -101,7 +101,11 @@ input[type='checkbox'] {
     text-align: right;
     vertical-align: middle;
 
-    label {
+    &-left {
+      text-align: left;
+    }
+
+    > label {
       color: @label-color;
 
       &::after {