chore: auto merge branchs (#35528)

chore: Next merge master
2025-08-06 07:56:28 +08:00 · 2022-05-13 03:59:16 +00:00 · 2022-05-13 03:59:16 +00:00 · c8dee0aa69
commit c8dee0aa69
parent b559a1fd1d 1d1248c868
15 changed files with 608 additions and 596 deletions
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@ -15,6 +15,14 @@ timeline: true

 ---

+## 4.20.4
+
+`2022-05-11`
+
+- 🐞 Fix broken List.Item type definition. [#35455](https://github.com/ant-design/ant-design/pull/35455) [@rsmeral](https://github.com/rsmeral)
+- 🐞 Fix Checkbox margin in Tree RTL mode. [#35491](https://github.com/ant-design/ant-design/pull/35491) [@miracles1919](https://github.com/miracles1919)
+- 🗑 Remove Cascader `displayRender` warning. [#35417](https://github.com/ant-design/ant-design/pull/35417) [@lalalazero](https://github.com/lalalazero)
+
 ## 4.20.3

 `2022-05-08`
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@ -15,6 +15,14 @@ timeline: true

 ---

+## 4.20.4
+
+`2022-05-11`
+
+- 🐞 修复 List.Item 类型错误。[#35455](https://github.com/ant-design/ant-design/pull/35455) [@rsmeral](https://github.com/rsmeral)
+- 🐞 修复 Tree 组件 RTL 模式下 Checkbox 的间距。[#35491](https://github.com/ant-design/ant-design/pull/35491) [@miracles1919](https://github.com/miracles1919)
+- 🗑 删除 Cascader `displayRender` 警告。[#35417](https://github.com/ant-design/ant-design/pull/35417) [@lalalazero](https://github.com/lalalazero)
+
 ## 4.20.3

 `2022-05-08`
--- a/components/cascader/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/cascader/tests/snapshots/demo-extend.test.ts.snap
@ -1534,7 +1534,7 @@ exports[`renders ./components/cascader/demo/multiple.md extend context correctly
    >
      <div
        class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix"
-        style="opacity:1"
+        style="opacity:1;order:0"
      >
        <div
          class="ant-select-selection-search"
--- a/components/cascader/tests/snapshots/demo.test.js.snap
+++ b/components/cascader/tests/snapshots/demo.test.js.snap
@ -622,7 +622,7 @@ exports[`renders ./components/cascader/demo/multiple.md correctly 1`] = `
    >
      <div
        class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix"
-        style="opacity:1"
+        style="opacity:1;order:0"
      >
        <div
          class="ant-select-selection-search"
--- a/components/config-provider/demo/direction.md
+++ b/components/config-provider/demo/direction.md
@ -14,6 +14,8 @@ title:
 Components which support rtl direction are listed here, you can toggle the direction in the demo.

 ```jsx
+import React, { useState } from 'react';
+
 import {
  Input,
  Col,
@ -103,23 +105,22 @@ const cascaderOptions = [
  },
 ];

-class Page extends React.Component {
-  state = {
+function Page(props) {
+  const [state, setState] = useState({
    currentStep: 0,
    modalVisible: false,
-
    badgeCount: 5,
    showBadge: true,
-  };
+  });

-  selectBefore = (
+  const selectBefore = (
    <Select defaultValue="Http://" style={{ width: 90 }}>
      <Option value="Http://">Http://</Option>
      <Option value="Https://">Https://</Option>
    </Select>
  );

-  selectAfter = (
+  const selectAfter = (
    <Select defaultValue=".com" style={{ width: 80 }}>
      <Option value=".com">.com</Option>
      <Option value=".jp">.jp</Option>
@ -129,63 +130,76 @@ class Page extends React.Component {
  );

  // ==== Cascader ====
-  cascaderFilter = (inputValue, path) =>
+  const cascaderFilter = (inputValue, path) =>
    path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);

-  onCascaderChange = value => {
+  const onCascaderChange = value => {
    console.log(value);
  };
  // ==== End Cascader ====

  // ==== Modal ====
-  showModal = () => {
-    this.setState({
+  const showModal = () => {
+    setState({
+      ...state,
      modalVisible: true,
    });
  };

-  handleOk = e => {
+  const handleOk = e => {
    console.log(e);
-    this.setState({
+    setState({
+      ...state,
      modalVisible: false,
    });
  };

-  handleCancel = e => {
+  const handleCancel = e => {
    console.log(e);
-    this.setState({
+    setState({
+      ...state,
      modalVisible: false,
    });
  };
+
  // ==== End Modal ====

-  onStepsChange = currentStep => {
+  const onStepsChange = currentStep => {
    console.log('onChange:', currentStep);
-    this.setState({ currentStep });
+    setState({
+      ...state,
+      currentStep,
+    });
  };

  // ==== Badge ====

-  increaseBadge = () => {
-    const badgeCount = this.state.badgeCount + 1;
-    this.setState({ badgeCount });
+  const increaseBadge = () => {
+    const badgeCount = state.badgeCount + 1;
+    setState({
+      ...state,
+      badgeCount,
+    });
  };

-  declineBadge = () => {
-    let badgeCount = this.state.badgeCount - 1;
+  const declineBadge = () => {
+    let badgeCount = state.badgeCount - 1;
    if (badgeCount < 0) {
      badgeCount = 0;
    }
-    this.setState({ badgeCount });
+    setState({
+      ...state,
+      badgeCount,
+    });
  };

-  onChangeBadge = showBadge => {
-    this.setState({ showBadge });
+  const onChangeBadge = showBadge => {
+    setState({
+      ...state,
+      showBadge,
+    });
  };
-  // ==== End Badge ====

-  render() {
-    const { currentStep } = this.state;
  return (
    <div className="direction-components">
      <Row>
@ -194,18 +208,18 @@ class Page extends React.Component {
          <Cascader
            suffixIcon={<SearchIcon />}
            options={cascaderOptions}
-              onChange={this.onCascaderChange}
+            onChange={onCascaderChange}
            placeholder="یک مورد انتخاب کنید"
-              popupPlacement={this.props.popupPlacement}
+            popupPlacement={props.popupPlacement}
          />
          &nbsp;&nbsp;&nbsp;&nbsp; With search:
          <Cascader
            suffixIcon={<SmileOutlined />}
            options={cascaderOptions}
-              onChange={this.onCascaderChange}
+            onChange={onCascaderChange}
            placeholder="Select an item"
-              popupPlacement={this.props.popupPlacement}
-              showSearch={this.cascaderFilter}
+            popupPlacement={props.popupPlacement}
+            showSearch={cascaderFilter}
          />
        </Col>
      </Row>
@ -320,11 +334,7 @@ class Page extends React.Component {
          <br />
          <br />
          <div style={{ marginBottom: 16 }}>
-              <Input
-                addonBefore={this.selectBefore}
-                addonAfter={this.selectAfter}
-                defaultValue="mysite"
-              />
+            <Input addonBefore={selectBefore} addonAfter={selectAfter} defaultValue="mysite" />
          </div>
          <br />
          <Row>
@ -391,14 +401,14 @@ class Page extends React.Component {
            <Col span={24}>
              <Divider orientation="left">Modal example</Divider>
              <div>
-                  <Button type="primary" onClick={this.showModal}>
+                <Button type="primary" onClick={showModal}>
                  Open Modal
                </Button>
                <Modal
                  title="پنچره ساده"
-                    visible={this.state.modalVisible}
-                    onOk={this.handleOk}
-                    onCancel={this.handleCancel}
+                  visible={state.modalVisible}
+                  onOk={handleOk}
+                  onCancel={handleCancel}
                >
                  <p>نگاشته‌های خود را اینجا قراردهید</p>
                  <p>نگاشته‌های خود را اینجا قراردهید</p>
@ -412,13 +422,13 @@ class Page extends React.Component {
            <Col span={24}>
              <Divider orientation="left">Steps example</Divider>
              <div>
-                  <Steps progressDot current={currentStep}>
+                <Steps progressDot current={state.currentStep}>
                  <Step title="Finished" description="This is a description." />
                  <Step title="In Progress" description="This is a description." />
                  <Step title="Waiting" description="This is a description." />
                </Steps>
                <br />
-                  <Steps current={currentStep} onChange={this.onStepsChange}>
+                <Steps current={state.currentStep} onChange={onStepsChange}>
                  <Step title="Step 1" description="This is a description." />
                  <Step title="Step 2" description="This is a description." />
                  <Step title="Step 3" description="This is a description." />
@ -442,23 +452,23 @@ class Page extends React.Component {
              <Divider orientation="left">Badge example</Divider>
              <div>
                <div>
-                    <Badge count={this.state.badgeCount}>
+                  <Badge count={state.badgeCount}>
                    <a href="#" className="head-example" />
                  </Badge>
                  <ButtonGroup>
-                      <Button onClick={this.declineBadge}>
+                    <Button onClick={declineBadge}>
                      <MinusOutlined />
                    </Button>
-                      <Button onClick={this.increaseBadge}>
+                    <Button onClick={increaseBadge}>
                      <PlusOutlined />
                    </Button>
                  </ButtonGroup>
                </div>
                <div style={{ marginTop: 10 }}>
-                    <Badge dot={this.state.showBadge}>
+                  <Badge dot={state.showBadge}>
                    <a href="#" className="head-example" />
                  </Badge>
-                    <Switch onChange={this.onChangeBadge} checked={this.state.showBadge} />
+                  <Switch onChange={onChangeBadge} checked={state.showBadge} />
                </div>
              </div>
            </Col>
@ -518,31 +528,26 @@ class Page extends React.Component {
    </div>
  );
 }
-}

-class App extends React.Component {
-  state = {
-    direction: 'ltr',
-    popupPlacement: 'bottomLeft',
-  };
+export default () => {
+  const [direction, setDirection] = useState('ltr');
+  const [popupPlacement, setPopupPlacement] = useState('bottomLeft');

-  changeDirection = e => {
+  const changeDirection = e => {
    const directionValue = e.target.value;
-    this.setState({ direction: directionValue });
+    setDirection(directionValue);
    if (directionValue === 'rtl') {
-      this.setState({ popupPlacement: 'bottomRight' });
+      setPopupPlacement('bottomRight');
    } else {
-      this.setState({ popupPlacement: 'bottomLeft' });
+      setPopupPlacement('bottomLeft');
    }
  };

-  render() {
-    const { direction, popupPlacement } = this.state;
  return (
    <>
      <div style={{ marginBottom: 16 }}>
        <span style={{ marginRight: 16 }}>Change direction of components: </span>
-          <Radio.Group defaultValue="ltr" onChange={this.changeDirection}>
+        <Radio.Group defaultValue="ltr" onChange={changeDirection}>
          <Radio.Button key="ltr" value="ltr">
            LTR
          </Radio.Button>
@ -556,10 +561,7 @@ class App extends React.Component {
      </ConfigProvider>
    </>
  );
-  }
-}
-
-export default App;
+};
 ```

 ```css
--- a/components/config-provider/demo/locale.md
+++ b/components/config-provider/demo/locale.md
@ -55,32 +55,31 @@ const columns = [
  },
 ];

-class Page extends React.Component {
-  state = {
-    visible: false,
+function Page() {
+  const [visible, setVisible] = React.useState(false);
+
+  const showModal = () => {
+    setVisible(true);
  };

-  showModal = () => {
-    this.setState({ visible: true });
+  const hideModal = () => {
+    setVisible(false);
  };

-  hideModal = () => {
-    this.setState({ visible: false });
-  };
-
-  render() {
  const info = () => {
    Modal.info({
      title: 'some info',
      content: 'some info',
    });
  };
+
  const confirm = () => {
    Modal.confirm({
      title: 'some info',
      content: 'some info',
    });
  };
+
  return (
    <div className="locale-components">
      <div className="example">
@ -96,7 +95,7 @@ class Page extends React.Component {
        <RangePicker style={{ width: 200 }} />
      </div>
      <div className="example">
-          <Button type="primary" onClick={this.showModal}>
+        <Button type="primary" onClick={showModal}>
          Show Modal
        </Button>
        <Button onClick={info}>Show info</Button>
@ -114,25 +113,19 @@ class Page extends React.Component {
      <div className="example">
        <Table dataSource={[]} columns={columns} />
      </div>
-        <Modal title="Locale Modal" visible={this.state.visible} onCancel={this.hideModal}>
+      <Modal title="Locale Modal" visible={visible} onCancel={hideModal}>
        <p>Locale Modal</p>
      </Modal>
    </div>
  );
 }
-}

-class App extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      locale: enUS,
-    };
-  }
+export default () => {
+  const [locale, setLocale] = React.useState(enUS);

-  changeLocale = e => {
+  const changeLocale = e => {
    const localeValue = e.target.value;
-    this.setState({ locale: localeValue });
+    setLocale(localeValue);
    if (!localeValue) {
      dayjs.locale('en');
    } else {
@ -140,13 +133,11 @@ class App extends React.Component {
    }
  };

-  render() {
-    const { locale } = this.state;
  return (
    <div>
      <div className="change-locale">
        <span style={{ marginRight: 16 }}>Change locale of components: </span>
-          <Radio.Group value={locale} onChange={this.changeLocale}>
+        <Radio.Group value={locale} onChange={changeLocale}>
          <Radio.Button key="en" value={enUS}>
            English
          </Radio.Button>
@ -162,10 +153,7 @@ class App extends React.Component {
      </ConfigProvider>
    </div>
  );
-  }
-}
-
-export default App;
+};
 ```

 ```css
--- a/components/date-picker/demo/mode.md
+++ b/components/date-picker/demo/mode.md
@ -15,66 +15,61 @@ debug: true
 Determing which panel to show with `mode` and `onPanelChange`.

 ```jsx
+import React, { useState } from 'react';
 import { DatePicker, Space } from 'antd';

 const { RangePicker } = DatePicker;

-class ControlledDatePicker extends React.Component {
-  state = { mode: 'time' };
+function ControlledDatePicker() {
+  const [mode, setMode] = useState('time');

-  handleOpenChange = open => {
+  const handleOpenChange = open => {
    if (open) {
-      this.setState({ mode: 'time' });
+      setMode('time');
    }
  };

-  handlePanelChange = (value, mode) => {
-    this.setState({ mode });
+  const handlePanelChange = (value, dateMode) => {
+    setMode(dateMode);
  };

-  render() {
  return (
    <DatePicker
-        mode={this.state.mode}
+      mode={mode}
      showTime
-        onOpenChange={this.handleOpenChange}
-        onPanelChange={this.handlePanelChange}
+      onOpenChange={handleOpenChange}
+      onPanelChange={handlePanelChange}
    />
  );
 }
-}

-class ControlledRangePicker extends React.Component {
-  state = {
-    mode: ['month', 'month'],
-    value: [],
+function ControlledRangePicker() {
+  const [mode, setMode] = useState(['month', 'month']);
+  const [value, setValue] = useState([]);
+
+  const handlePanelChange = (dateValue, dateMode) => {
+    setValue(dateValue);
+    setMode([
+      dateMode[0] === 'date' ? 'month' : dateMode[0],
+      dateMode[1] === 'date' ? 'month' : dateMode[1],
+    ]);
  };

-  handlePanelChange = (value, mode) => {
-    this.setState({
-      value,
-      mode: [mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]],
-    });
+  const handleChange = dateValue => {
+    setValue(dateValue);
  };

-  handleChange = value => {
-    this.setState({ value });
-  };
-
-  render() {
-    const { value, mode } = this.state;
  return (
    <RangePicker
      placeholder={['Start month', 'End month']}
      format="YYYY-MM"
      value={value}
      mode={mode}
-        onChange={this.handleChange}
-        onPanelChange={this.handlePanelChange}
+      onChange={handleChange}
+      onPanelChange={handlePanelChange}
    />
  );
 }
-}

 export default () => (
  <Space direction="vertical" size={12}>
--- a/components/date-picker/demo/size.md
+++ b/components/date-picker/demo/size.md
@ -18,20 +18,16 @@ import { DatePicker, Radio, Space } from 'antd';

 const { RangePicker } = DatePicker;

-class PickerSizesDemo extends React.Component {
-  state = {
-    size: 'default',
+export default () => {
+  const [size, setSize] = React.useState('default');
+
+  const handleSizeChange = e => {
+    setSize(e.target.value);
  };

-  handleSizeChange = e => {
-    this.setState({ size: e.target.value });
-  };
-
-  render() {
-    const { size } = this.state;
  return (
    <Space direction="vertical" size={12}>
-        <Radio.Group value={size} onChange={this.handleSizeChange}>
+      <Radio.Group value={size} onChange={handleSizeChange}>
        <Radio.Button value="large">Large</Radio.Button>
        <Radio.Button value="default">Default</Radio.Button>
        <Radio.Button value="small">Small</Radio.Button>
@ -42,8 +38,5 @@ class PickerSizesDemo extends React.Component {
      <DatePicker size={size} picker="week" />
    </Space>
  );
-  }
-}
-
-export default () => <PickerSizesDemo />;
+};
 ```
--- a/components/date-picker/demo/start-end.md
+++ b/components/date-picker/demo/start-end.md
@ -23,80 +23,76 @@ When `RangePicker` does not satisfied your requirements, try to implement simila
 ```jsx
 import { DatePicker, Space } from 'antd';

-class DateRange extends React.Component {
-  state = {
+export default () => {
+  const [state, setState] = React.useState({
    startValue: null,
    endValue: null,
    endOpen: false,
-  };
+  });

-  disabledStartDate = startValue => {
-    const { endValue } = this.state;
+  const disabledStartDate = startValue => {
+    const { endValue } = state;
    if (!startValue || !endValue) {
      return false;
    }
    return startValue.valueOf() > endValue.valueOf();
  };

-  disabledEndDate = endValue => {
-    const { startValue } = this.state;
+  const disabledEndDate = endValue => {
+    const { startValue } = state;
    if (!endValue || !startValue) {
      return false;
    }
    return endValue.valueOf() <= startValue.valueOf();
  };

-  onChange = (field, value) => {
-    this.setState({
+  const onChange = (field, value) => {
+    setState({
+      ...state,
      [field]: value,
    });
  };

-  onStartChange = value => {
-    this.onChange('startValue', value);
+  const onStartChange = value => {
+    onChange('startValue', value);
  };

-  onEndChange = value => {
-    this.onChange('endValue', value);
+  const onEndChange = value => {
+    onChange('endValue', value);
  };

-  handleStartOpenChange = open => {
+  const handleStartOpenChange = open => {
    if (!open) {
-      this.setState({ endOpen: true });
+      setState({ ...state, endOpen: true });
    }
  };

-  handleEndOpenChange = open => {
-    this.setState({ endOpen: open });
+  const handleEndOpenChange = open => {
+    setState({ ...state, endOpen: true });
  };

-  render() {
-    const { startValue, endValue, endOpen } = this.state;
  return (
    <Space>
      <DatePicker
-          disabledDate={this.disabledStartDate}
+        disabledDate={disabledStartDate}
        showTime
        format="YYYY-MM-DD HH:mm:ss"
-          value={startValue}
+        value={state.startValue}
        placeholder="Start"
-          onChange={this.onStartChange}
-          onOpenChange={this.handleStartOpenChange}
+        onChange={onStartChange}
+        onOpenChange={handleStartOpenChange}
      />
      <DatePicker
-          disabledDate={this.disabledEndDate}
+        disabledDate={disabledEndDate}
        showTime
        format="YYYY-MM-DD HH:mm:ss"
-          value={endValue}
+        value={state.endValue}
        placeholder="End"
-          onChange={this.onEndChange}
-          open={endOpen}
-          onOpenChange={this.handleEndOpenChange}
+        onChange={onEndChange}
+        open={state.endOpen}
+        onOpenChange={handleEndOpenChange}
      />
    </Space>
  );
-  }
-}
-
-export default () => <DateRange />;
+};
 ```
--- a/components/statistic/Number.tsx
+++ b/components/statistic/Number.tsx
@ -30,7 +30,7 @@ const StatisticNumber: React.FC<NumberProps> = props => {
      int = int.replace(/\B(?=(\d{3})+(?!\d))/g, groupSeparator);

      if (typeof precision === 'number') {
-        decimal = padEnd(decimal, precision, '0').slice(0, precision);
+        decimal = padEnd(decimal, precision, '0').slice(0, precision > 0 ? precision : 0);
      }

      if (decimal) {
--- a/components/statistic/tests/index.test.js
+++ b/components/statistic/tests/index.test.js
@ -51,6 +51,20 @@ describe('Statistic', () => {
    expect(wrapper.render()).toMatchSnapshot();
  });

+  it('allow negetive precision', () => {
+    [
+      [-1, -1112893.1212, '-1,112,893'],
+      [-2, -1112893.1212, '-1,112,893'],
+      [-3, -1112893.1212, '-1,112,893'],
+      [-1, -1112893, '-1,112,893'],
+      [-1, 1112893, '1,112,893'],
+    ].forEach(([precision, value, expectValue]) => {
+      const wrapper = mount(<Statistic precision={precision} value={value} />);
+      expect(wrapper.find('.ant-statistic-content-value-int').text()).toEqual(expectValue);
+      expect(wrapper.find('.ant-statistic-content-value-decimal').length).toBe(0);
+    });
+  });
+
  it('loading with skeleton', async () => {
    let loading = false;
    const wrapper = mount(<Statistic title="Active Users" value={112112} loading={loading} />);
--- a/components/table/index.en-US.md
+++ b/components/table/index.en-US.md
@ -316,3 +316,7 @@ Table can not tell what state used in `columns.render`, so it always need fully
 ### How to handle fixed column display over the mask layout?

 Fixed column use `z-index` to make it over other columns. You will find sometime fixed columns also over your mask layout. You can set `z-index` on your mask layout to resolve.
+
+### How to custom render Table Checkbox（For example, adding Tooltip）?
+
+Since `4.1.0`, You can use [`rowSelection.renderCell`](https://ant.design/components/table/#rowSelection) to custom render Table Checkbox. If you want to add Tooltip, please refer to this [demo](https://codesandbox.io/s/table-row-tooltip-v79j2v).
--- a/components/table/index.zh-CN.md
+++ b/components/table/index.zh-CN.md
@ -316,3 +316,7 @@ Table 移除了在 v3 中废弃的 `onRowClick`、`onRowDoubleClick`、`onRowMou
 ### 固定列穿透到最上层该怎么办？

 固定列通过 `z-index` 属性将其悬浮于非固定列之上，这使得有时候你会发现在 Table 上放置遮罩层时固定列会被透过的情况。为遮罩层设置更高的 `z-index` 覆盖住固定列即可。
+
+### 如何自定义渲染可选列的勾选框（比如增加 Tooltip）？
+
+自 `4.1.0` 起，可以通过 [rowSelection](https://ant.design/components/table-cn/#rowSelection) 的 `renderCell` 属性控制，可以参考此处 [Demo](https://codesandbox.io/s/table-row-tooltip-v79j2v) 实现展示 Tooltip 需求或其他自定义的需求。
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "antd",
-  "version": "4.20.3",
+  "version": "4.20.4",
  "description": "An enterprise-class UI design language and React components implementation",
  "title": "Ant Design",
  "keywords": [