From 19f55145c81bb4308c2aca3a751cfabc195ccdbd Mon Sep 17 00:00:00 2001 From: miracles1919 <516571350@qq.com> Date: Wed, 11 May 2022 16:57:21 +0800 Subject: [PATCH 1/8] fix: tree checkbox margin in rtl mode (#35491) --- components/tree/style/rtl.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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; } } From 765bc1effcf30d7439eb4c0dd25fbcc931ba7307 Mon Sep 17 00:00:00 2001 From: limingxin <906529775@qq.com> Date: Wed, 11 May 2022 17:58:26 +0800 Subject: [PATCH 2/8] docs: Table QA about rowSelection renderCell (#35494) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Update index.zh-CN.md 之前需要在 可选列的勾选框 中增加 Tooltip，没有在文档中找到相关的文档，通过搜索 issue，以为暂时不支持，看了源码才发现已经支持了。 所以想要完善一下文档，可以方便其他用户找到此内容。 * docs: Table QA about rowSelection renderCell update US doc --- components/table/index.en-US.md | 4 ++++ components/table/index.zh-CN.md | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md index 94799f00c2..d3fee22655 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 b6cd59a33a..41147c3cb5 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 需求或其他自定义的需求。 From fbdcbc70277fca21cfffee20e4c2dcba823ce08c Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Wed, 11 May 2022 18:15:09 +0800 Subject: [PATCH 3/8] docs: changelog 4.20.4 (#35495) * docs: changelog 4.20.4 * chore: emoji --- CHANGELOG.en-US.md | 8 ++++++++ CHANGELOG.zh-CN.md | 8 ++++++++ package.json | 2 +- 3 files changed, 17 insertions(+), 1 deletion(-) 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/package.json b/package.json index 2cbc6691ef..73dab95a0f 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": [ From be2b0d8a6e2273eb97fe018c328b8ff26e82c1da Mon Sep 17 00:00:00 2001 From: dingkang Date: Wed, 11 May 2022 19:43:54 +0800 Subject: [PATCH 4/8] docs: replace class component with hooks (#35500) * docs(badge): replace class component with hooks * docs(button): replace class component with hooks * docs(calendar): replace class component with hooks * docs(card): replace class component with hooks * docs(button): replace class component with hooks * chore(deps): remove webpack devDependencies * docs(cascader): replace class component with hooks * docs(checkbox): replace class component with hooks * docs(collapse): replace class component with hooks * docs(comment): replace class component with hooks * docs(descriptions): replace class component with hooks * docs(config-provider): replace class component with hooks * docs(date-picker): replace class component with hooks --- components/config-provider/demo/direction.md | 772 ++++++++++--------- components/config-provider/demo/locale.md | 172 ++--- components/date-picker/demo/mode.md | 79 +- components/date-picker/demo/size.md | 45 +- components/date-picker/demo/start-end.md | 88 +-- 5 files changed, 565 insertions(+), 591 deletions(-) diff --git a/components/config-provider/demo/direction.md b/components/config-provider/demo/direction.md index f26fe3c18d..376a748bc9 100644 --- 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 = ( ); - 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 -
- -
- * 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 - - -
-
- - -
- ); - } +
+ + + + ); } -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 f421c6a31f..47a2251d6a 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) { moment.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 ( + + + + + ); +}; ``` From debd7f349634a4ae3651732a44ad2e9e091b695d Mon Sep 17 00:00:00 2001 From: ty888 <1506125048@qq.com> Date: Fri, 13 May 2022 00:47:20 +0800 Subject: [PATCH 5/8] fix(statistic): ignore the decimal part when the precision is negative (#35520) --- components/statistic/Number.tsx | 2 +- components/statistic/__tests__/index.test.js | 14 ++++++++++++++ 2 files changed, 15 insertions(+), 1 deletion(-) 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 109df17ab2..abd47d69d8 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(); From e8d9c4256562d04bf027b7be79bd4ad8ade7d3c3 Mon Sep 17 00:00:00 2001 From: zombiej Date: Fri, 13 May 2022 10:14:09 +0800 Subject: [PATCH 6/8] test: Update snapshot --- .../cascader/__tests__/__snapshots__/demo-extend.test.ts.snap | 2 +- components/cascader/__tests__/__snapshots__/demo.test.js.snap | 2 +- components/select/demo/responsive.md | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) 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 >
{ - const [value, setValue] = React.useState(['a10', 'c12', 'h17', 'j19', 'k20']); + const [value, setValue] = React.useState(['a10']); const selectProps = { mode: 'multiple' as const, @@ -49,7 +50,6 @@ const Demo = () => { return ( ); }; From d7cdd88e3aeb904db59a713fbbdfa698b01530b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 13 May 2022 10:57:10 +0800 Subject: [PATCH 7/8] test: Update snapshot (#35529) --- components/select/demo/responsive.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/select/demo/responsive.md b/components/select/demo/responsive.md index 8ab2703f55..c6a76e41c5 100644 --- a/components/select/demo/responsive.md +++ b/components/select/demo/responsive.md @@ -3,7 +3,6 @@ order: 24 title: zh-CN: 响应式 maxTagCount en-US: Responsive maxTagCount -only: true --- ## zh-CN @@ -33,7 +32,7 @@ for (let i = 10; i < 36; i++) { } const Demo = () => { - const [value, setValue] = React.useState(['a10']); + const [value, setValue] = React.useState(['a10', 'c12', 'h17', 'j19', 'k20']); const selectProps = { mode: 'multiple' as const, @@ -50,6 +49,7 @@ const Demo = () => { return ( ); }; From 1d1248c86823bae0dbae7c6d722623347a0e8aa0 Mon Sep 17 00:00:00 2001 From: zombiej Date: Fri, 13 May 2022 11:35:14 +0800 Subject: [PATCH 8/8] chore: fix demo of dayjs --- components/config-provider/demo/locale.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/config-provider/demo/locale.md b/components/config-provider/demo/locale.md index 27fd929eaa..8fc85e75ab 100644 --- a/components/config-provider/demo/locale.md +++ b/components/config-provider/demo/locale.md @@ -108,7 +108,7 @@ function Page() { item.title} />
- +