diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 8bf892b1e2..31d1467860 100644 --- 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` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 7279cbd244..d4b6b25157 100644 --- 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` diff --git a/components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap index 9cfbb0f639..22faababa6 100644 --- 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 >
); - selectAfter = ( + const selectAfter = ( - - - + + sss} key="0-0-1-0" /> + + + + + +
+ + + Input (Input Group) example + + + + + + + + + + +
+ + + + +
+ + + + + +
+ +
+
+
+ +
+
+ + + Select example + + + + + + + TreeSelect example +
+ + + + + + + + sss} + key="random3" + /> + + + +
+ + +
+ + + Modal example +
+ + +

نگاشته‌های خود را اینجا قراردهید

+

نگاشته‌های خود را اینجا قراردهید

+

نگاشته‌های خود را اینجا قراردهید

+ +
+ + +
+ + + Steps example +
+ + + + + +
+ + + + + +
+ + +
+ + + Rate example +
+ +
+ * Note: Half star not implemented in RTL direction, it will be + supported after rc-rate{' '} + implement rtl support. +
+ + + Badge example + + + + + + +
+
+ + + Pagination example + + + +
+ + + Grid System example +
+
+

+ * Note: Every calculation in RTL grid system is from right side + (offset, push, etc.) +

+ + col-8 + + col-8 + + + + + col-6 col-offset-6 + + + col-6 col-offset-6 + + + + + col-12 col-offset-6 + + + + + col-18 col-push-6 + + + col-6 col-pull-18 - -
- - - - -
- - - - - -
- -
-
-
-
-
- - - Select example - - - - - - - TreeSelect example -
- - - - - - - - sss} - key="random3" - /> - - - -
- - -
- - - Modal example -
- - -

نگاشته‌های خود را اینجا قراردهید

-

نگاشته‌های خود را اینجا قراردهید

-

نگاشته‌های خود را اینجا قراردهید

- -
- - -
- - - Steps example -
- - - - - -
- - - - - -
- - -
- - - Rate example - - - - Badge example - - - - - - -
-
- - - Pagination example - - - -
- - - Grid System example -
-
-

- * Note: Every calculation in RTL grid system is from right side - (offset, push, etc.) -

- - col-8 - - col-8 - - - - - col-6 col-offset-6 - - - col-6 col-offset-6 - - - - - col-12 col-offset-6 - - - - - col-18 col-push-6 - - - col-6 col-pull-18 - - -
-
- - -
- ); - } +
+ + +
+ ); } -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 ( - <> -
- Change direction of components: - - - LTR - - - RTL - - -
- - - - - ); - } -} - -export default App; + return ( + <> +
+ Change direction of components: + + + LTR + + + RTL + + +
+ + + + + ); +}; ``` ```css diff --git a/components/config-provider/demo/locale.md b/components/config-provider/demo/locale.md index f58eb26a05..8fc85e75ab 100644 --- a/components/config-provider/demo/locale.md +++ b/components/config-provider/demo/locale.md @@ -55,84 +55,77 @@ 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 }); + const info = () => { + Modal.info({ + title: 'some info', + content: 'some info', + }); }; - render() { - const info = () => { - Modal.info({ - title: 'some info', - content: 'some info', - }); - }; - const confirm = () => { - Modal.confirm({ - title: 'some info', - content: 'some info', - }); - }; - return ( -
-
- -
-
- - - - -
-
- - - - - Click to confirm - -
-
- item.title} /> -
-
- -
-
- - - -

Locale Modal

- + const confirm = () => { + Modal.confirm({ + title: 'some info', + content: 'some info', + }); + }; + + return ( +
+
+
- ); - } +
+ + + + +
+
+ + + + + Click to confirm + +
+
+ item.title} /> +
+
+ +
+
+
+ + +

Locale Modal

+ + + ); } -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,32 +133,27 @@ class App extends React.Component { } }; - render() { - const { locale } = this.state; - return ( -
-
- Change locale of components: - - - English - - - 中文 - - -
- - - + return ( +
+
+ Change locale of components: + + + English + + + 中文 + +
- ); - } -} - -export default App; + + + +
+ ); +}; ``` ```css diff --git a/components/date-picker/demo/mode.md b/components/date-picker/demo/mode.md index 72a2465f5d..13e4ddb17b 100644 --- a/components/date-picker/demo/mode.md +++ b/components/date-picker/demo/mode.md @@ -15,65 +15,60 @@ 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 ( - - ); - } + return ( + + ); } -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 ( - - ); - } + return ( + + ); } export default () => ( diff --git a/components/date-picker/demo/size.md b/components/date-picker/demo/size.md index 88a4ccaa82..69a5248da1 100644 --- a/components/date-picker/demo/size.md +++ b/components/date-picker/demo/size.md @@ -18,32 +18,25 @@ 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 ( - - - Large - Default - Small - - - - - - - ); - } -} - -export default () => ; + return ( + + + Large + Default + Small + + + + + + + ); +}; ``` diff --git a/components/date-picker/demo/start-end.md b/components/date-picker/demo/start-end.md index d6a1266f9f..0b56b2156b 100644 --- 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 ( - - - - - ); - } -} - -export default () => ; + return ( + + + + + ); +}; ``` diff --git a/components/statistic/Number.tsx b/components/statistic/Number.tsx index 6d6e0bd062..0e9fc2222f 100644 --- a/components/statistic/Number.tsx +++ b/components/statistic/Number.tsx @@ -30,7 +30,7 @@ const StatisticNumber: React.FC = 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) { diff --git a/components/statistic/__tests__/index.test.js b/components/statistic/__tests__/index.test.js index 07b82358c1..feebca1554 100644 --- 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(); + 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(); diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md index 3dfc943a30..724726322b 100644 --- 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). diff --git a/components/table/index.zh-CN.md b/components/table/index.zh-CN.md index 11f2b3383f..39c9691f3b 100644 --- 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 需求或其他自定义的需求。 diff --git a/components/tree/style/rtl.less b/components/tree/style/rtl.less index bc985c956b..7604ef60eb 100644 --- a/components/tree/style/rtl.less +++ b/components/tree/style/rtl.less @@ -56,7 +56,7 @@ } // >>> Checkbox &-checkbox { - .@{tree-prefix-cls}-rtl& { + .@{tree-prefix-cls}-rtl & { margin: ((@tree-title-height - @checkbox-size) / 2) 0 0 8px; } } diff --git a/package.json b/package.json index 3be9b8cd38..3f95473056 100644 --- 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": [