From d8c617d7c31a641e650f481d26c57a6283968416 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: Mon, 4 Jan 2021 20:39:20 +0800 Subject: [PATCH 01/11] feat: Image support `preview.maskClassName` (#28681) * feat: support maskClassName * test: Add snapshot * docs: Update doc --- .../__tests__/__snapshots__/demo.test.js.snap | 49 ++++++++++++++++++ components/image/demo/preview-mask.md | 51 +++++++++++++++++++ components/image/index.en-US.md | 2 + components/image/index.zh-CN.md | 2 + package.json | 2 +- 5 files changed, 105 insertions(+), 1 deletion(-) create mode 100644 components/image/demo/preview-mask.md diff --git a/components/image/__tests__/__snapshots__/demo.test.js.snap b/components/image/__tests__/__snapshots__/demo.test.js.snap index 9839c6f34e..470e54307e 100644 --- a/components/image/__tests__/__snapshots__/demo.test.js.snap +++ b/components/image/__tests__/__snapshots__/demo.test.js.snap @@ -156,6 +156,55 @@ exports[`renders ./components/image/demo/placeholder.md correctly 1`] = ` `; +exports[`renders ./components/image/demo/preview-mask.md correctly 1`] = ` +
+ +
+
+
+ + + +
+
+ 示例 +
+
+
+
+`; + exports[`renders ./components/image/demo/previewGroup.md correctly 1`] = ` Array [
+ + 示例 + + ), + }} + /> + ); +} + +ReactDOM.render(, mountNode); +``` + +```css +.customize-mask { + opacity: 1; + font-size: 20px; +} +.customize-mask .anticon { + font-size: 32px; +} +``` diff --git a/components/image/index.en-US.md b/components/image/index.en-US.md index 66f6249f86..dc3e8af8bf 100644 --- a/components/image/index.en-US.md +++ b/components/image/index.en-US.md @@ -33,6 +33,8 @@ Previewable image. onVisibleChange?: (visible, prevVisible) => void; getContainer?: string | HTMLElement | (() => HTMLElement); // V4.8.0 src?: string; // V4.10.0 + mask?: ReactNode; // V4.9.0 + maskClassName?: string; // V4.11.0 } ``` diff --git a/components/image/index.zh-CN.md b/components/image/index.zh-CN.md index 551b734783..c1a45e1ed0 100644 --- a/components/image/index.zh-CN.md +++ b/components/image/index.zh-CN.md @@ -34,6 +34,8 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/D1dXz9PZqa/image.svg onVisibleChange?: (visible, prevVisible) => void; getContainer?: string | HTMLElement | (() => HTMLElement); // V4.8.0 src?: string; // V4.10.0 + mask?: ReactNode; // V4.9.0 + maskClassName?: string; // V4.11.0 } ``` diff --git a/package.json b/package.json index 2e9212ce2d..454ad8c75e 100644 --- a/package.json +++ b/package.json @@ -124,7 +124,7 @@ "rc-drawer": "~4.1.0", "rc-dropdown": "~3.2.0", "rc-field-form": "~1.17.3", - "rc-image": "~4.5.0", + "rc-image": "~4.6.0", "rc-input-number": "~6.1.0", "rc-mentions": "~1.5.0", "rc-menu": "~8.10.0", From 168db12e3fe3fe217ea9b230dc09cf96dbbf026c Mon Sep 17 00:00:00 2001 From: Alek Ye Date: Tue, 5 Jan 2021 15:54:36 +0800 Subject: [PATCH 02/11] feat: filter without close dropdown (#28652) (#28688) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: filter without close dropdown (#28652) * Change confirm parameter type * Update components/table/demo/custom-filter-panel.md Co-authored-by: 偏右 Co-authored-by: alek.ye Co-authored-by: 偏右 --- components/table/demo/custom-filter-panel.md | 16 +++++++++++++++ .../table/hooks/useFilter/FilterDropdown.tsx | 20 +++++++++++++++---- components/table/interface.tsx | 6 +++++- 3 files changed, 37 insertions(+), 5 deletions(-) diff --git a/components/table/demo/custom-filter-panel.md b/components/table/demo/custom-filter-panel.md index 488e81e20a..6d49213946 100644 --- a/components/table/demo/custom-filter-panel.md +++ b/components/table/demo/custom-filter-panel.md @@ -9,6 +9,8 @@ title: 通过 `filterDropdown` 自定义的列筛选功能，并实现一个搜索列的示例。 +给函数 `confirm` 添加 `boolean` 类型参数 `closeDropdown`，是否关闭筛选菜单，默认为 `true`。 + ## en-US Implement a customized column search example via `filterDropdown`. @@ -77,6 +79,20 @@ class App extends React.Component { +
), diff --git a/components/table/hooks/useFilter/FilterDropdown.tsx b/components/table/hooks/useFilter/FilterDropdown.tsx index 9cc6c36111..30f9e7bf7f 100644 --- a/components/table/hooks/useFilter/FilterDropdown.tsx +++ b/components/table/hooks/useFilter/FilterDropdown.tsx @@ -8,7 +8,14 @@ import Checkbox from '../../../checkbox'; import Radio from '../../../radio'; import Dropdown from '../../../dropdown'; import Empty from '../../../empty'; -import { ColumnType, ColumnFilterItem, Key, TableLocale, GetPopupContainer } from '../../interface'; +import { + ColumnType, + ColumnFilterItem, + Key, + TableLocale, + GetPopupContainer, + FilterConfirmProps, +} from '../../interface'; import FilterDropdownMenuWrapper from './FilterWrapper'; import { FilterState } from '.'; import useSyncState from '../../../_util/hooks/useSyncState'; @@ -160,8 +167,6 @@ function FilterDropdown(props: FilterDropdownProps) { // ======================= Submit ======================== const internalTriggerFilter = (keys: Key[] | undefined | null) => { - triggerVisible(false); - const mergedKeys = keys && keys.length ? keys : null; if (mergedKeys === null && (!filterState || !filterState.filteredKeys)) { return null; @@ -179,14 +184,21 @@ function FilterDropdown(props: FilterDropdownProps) { }; const onConfirm = () => { + triggerVisible(false); internalTriggerFilter(getFilteredKeysSync()); }; const onReset = () => { setFilteredKeysSync([]); + triggerVisible(false); internalTriggerFilter([]); }; + const doFilter = (param: FilterConfirmProps = { closeDropdown: true }) => { + triggerVisible(!param.closeDropdown); + internalTriggerFilter(getFilteredKeysSync()); + }; + const onVisibleChange = (newVisible: boolean) => { if (newVisible && propFilteredKeys !== undefined) { // Sync filteredKeys on appear in controlled mode (propFilteredKeys !== undefiend) @@ -213,7 +225,7 @@ function FilterDropdown(props: FilterDropdownProps) { prefixCls: `${dropdownPrefixCls}-custom`, setSelectedKeys: (selectedKeys: Key[]) => onSelectKeys({ selectedKeys }), selectedKeys: getFilteredKeysSync(), - confirm: onConfirm, + confirm: doFilter, clearFilters: onReset, filters: column.filters, visible: mergedVisible, diff --git a/components/table/interface.tsx b/components/table/interface.tsx index 75e4804b67..cd92adbf4b 100644 --- a/components/table/interface.tsx +++ b/components/table/interface.tsx @@ -67,11 +67,15 @@ export type ColumnTitle = | React.ReactNode | ((props: ColumnTitleProps) => React.ReactNode); +export interface FilterConfirmProps { + closeDropdown: boolean; +} + export interface FilterDropdownProps { prefixCls: string; setSelectedKeys: (selectedKeys: React.Key[]) => void; selectedKeys: React.Key[]; - confirm: () => void; + confirm: (param: FilterConfirmProps) => void; clearFilters?: () => void; filters?: ColumnFilterItem[]; visible: boolean; From 194699292a209bd99e4e5df28179f1bc8a2c51ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=AA=97=E4=BD=A0=E6=98=AF=E5=B0=8F=E7=8C=AB=E5=92=AA?= Date: Thu, 7 Jan 2021 16:20:09 +0800 Subject: [PATCH 03/11] chore: upgrade rc-dialog and rc-drawer (#28687) * chore: upgrade rc-dialog and rc-drawer * upgrade rc-util * update snapshots * upgrade rc-util * upgrade rc-util * update snapshots * upgrade rc-dialog --- .../modal/__tests__/__snapshots__/Modal.test.js.snap | 10 ++++++++-- package.json | 6 +++--- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/components/modal/__tests__/__snapshots__/Modal.test.js.snap b/components/modal/__tests__/__snapshots__/Modal.test.js.snap index d8f348e81a..0114a4b127 100644 --- a/components/modal/__tests__/__snapshots__/Modal.test.js.snap +++ b/components/modal/__tests__/__snapshots__/Modal.test.js.snap @@ -2,7 +2,10 @@ exports[`Modal render correctly 1`] = `
-
+
-
+
Date: Fri, 8 Jan 2021 10:14:01 +0800 Subject: [PATCH 04/11] chore: merge master into feature (#28751) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: Transfer dataSource cannot be immutable (#28675) close #28662 * docs: fix errors in example code (#28677) * ci: expand ie check (#28673) * ci: expand ie check * Update issue-open-check.yml * perf(📦): reduce @babel/runtime package size (#28678) * perf(📦): reduce @babel/runtime package size https://github.com/ant-design/antd-tools/commit/04cd73dea1206d1119847ffd7342b28b26d0babc * chore(:up:): upgrade @ant-design/react-slick to esm support version * upgrade @ant-design/tools * ci: add open condition (#28682) * fix(Slider): forcePopupAlign null when unmounted (#28699) * docs: Update overview.zh-CN.md (#28703) * docs: Update resources.en-US.md (#28701) * chore: bump rc-select to 12.1.0 (#28715) * fix: stylelint plugin (#28730) * Update package.json * perf(📦): upgrade rc-image to 5.x (#28727) * refactor: upgrade rc-image to 5.x reduce bundle size * upgrade rc-image * upgrade @ant-design/tools https://github.com/ant-design/antd-tools/pull/226 * rc-image 5.0.0 * fix image preview icon missing * refactor code * docs: example of synchronous rc-tree (#28648) * ci: fix outputs type 过程中的使用 string。奇怪啊，之前测试过的，今天点的时候发现不行了 * Update package.json * fix: site overflow cause sticky invalid (#28741) * fix: site overflow cause sticky invalid * disable auto scroll * chore: upgrade rc-dialog and rc-drawer (#28749) * chore: upgrade rc-dialog and rc-drawer (#28687) * chore: upgrade rc-dialog and rc-drawer * upgrade rc-util * update snapshots * upgrade rc-util * upgrade rc-util * update snapshots * upgrade rc-dialog * perf: remove duplicated rc-dialog Co-authored-by: 骗你是小猫咪 Co-authored-by: bigbigbo Co-authored-by: xrkffgg Co-authored-by: Yann Pringault Co-authored-by: godfather Co-authored-by: Mateusz Wierzbicki <22788841+mateusz-wierzbicki@users.noreply.github.com> Co-authored-by: Kermit Co-authored-by: AkiJoey Co-authored-by: qqabcv520 <605655316@qq.com> Co-authored-by: 骗你是小猫咪 --- .github/workflows/issue-open-check.yml | 6 +- .github/workflows/issue-remove-inactive.yml | 1 + .stylelintrc.json | 2 +- components/form/v3.en-US.md | 2 +- components/form/v3.zh-CN.md | 2 +- components/image/PreviewGroup.tsx | 27 +- components/image/index.tsx | 3 +- components/slider/SliderTooltip.tsx | 2 +- components/table/demo/drag-sorting-handler.md | 1 + .../__snapshots__/index.test.js.snap | 245 ++++++++++++++++++ components/transfer/__tests__/index.test.js | 15 ++ components/transfer/demo/basic.md | 4 +- components/transfer/index.tsx | 5 +- components/tree/demo/drag-debug.md | 6 +- components/tree/demo/draggable.md | 6 +- docs/resources.en-US.md | 2 +- docs/spec/overview.zh-CN.md | 2 +- package.json | 10 +- site/theme/static/common.less | 2 +- 19 files changed, 316 insertions(+), 27 deletions(-) diff --git a/.github/workflows/issue-open-check.yml b/.github/workflows/issue-open-check.yml index e2864810e3..17c47ef8ea 100644 --- a/.github/workflows/issue-open-check.yml +++ b/.github/workflows/issue-open-check.yml @@ -33,7 +33,7 @@ jobs: title-includes: '官网,网站,国内,镜像,mobile ant design,mobile.ant.design,ant design,ant.design,pro/挂了,无法访问,不能访问,访问不了,出问题,打不开,登不上,can not open,can not be reached' - name: deal-website - if: steps.checkid.outputs.check-result == true + if: steps.checkid.outputs.check-result == 'true' uses: actions-cool/issues-helper@v1.2 with: actions: 'create-comment,close-issue' @@ -60,10 +60,10 @@ jobs: * Ant Design Pro Preview : https://prosite.z23.web.core.windows.net - name: check-ie - if: contains(github.event.issue.body, 'ant-design-issue-helper') == true && (contains(github.event.issue.title, 'IE9') == true || contains(github.event.issue.title, 'IE 9') == true || contains(github.event.issue.title, 'IE10') == true || contains(github.event.issue.title, 'IE 10') == true || contains(github.event.issue.title, 'IE11') == true || contains(github.event.issue.title, 'IE 11') == true || contains(github.event.issue.title, 'Internet Explorer') == true) + if: contains(github.event.issue.body, 'ant-design-issue-helper') == true && contains(github.event.issue.title, 'IE9') == true || contains(github.event.issue.title, 'IE 9') == true || contains(github.event.issue.title, 'IE10') == true || contains(github.event.issue.title, 'IE 10') == true || contains(github.event.issue.title, 'IE11') == true || contains(github.event.issue.title, 'IE 11') == true || contains(github.event.issue.title, 'Internet Explorer') == true || contains(github.event.issue.body, 'IE9') == true || contains(github.event.issue.body, 'IE 9') == true || contains(github.event.issue.body, 'IE10') == true || contains(github.event.issue.body, 'IE 10') == true || contains(github.event.issue.body, 'IE11') == true || contains(github.event.issue.body, 'IE 11') == true || contains(github.event.issue.body, 'Internet Explorer') == true uses: actions-cool/issues-helper@v1.2 with: actions: 'add-labels' token: ${{ secrets.ANT_BOT_TOKEN }} issue-number: ${{ github.event.issue.number }} - labels: 'IE | Firefox | Safari,Internet Explorer' + labels: 'IE | Firefox | Safari,Internet Explorer' diff --git a/.github/workflows/issue-remove-inactive.yml b/.github/workflows/issue-remove-inactive.yml index c210b1f64f..6505a74ee7 100644 --- a/.github/workflows/issue-remove-inactive.yml +++ b/.github/workflows/issue-remove-inactive.yml @@ -11,6 +11,7 @@ jobs: runs-on: ubuntu-latest steps: - name: remove inactive + if: github.event.issue.state == 'open' uses: actions-cool/issues-helper@v1.2 with: actions: 'remove-labels' diff --git a/.stylelintrc.json b/.stylelintrc.json index 40ce56859f..6b2cfa0335 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -4,7 +4,7 @@ "stylelint-config-rational-order", "stylelint-config-prettier" ], - "plugins": ["stylelint-order", "stylelint-declaration-block-no-ignored-properties"], + "plugins": ["stylelint-declaration-block-no-ignored-properties"], "rules": { "comment-empty-line-before": null, "function-name-case": ["lower", { "ignoreFunctions": ["/colorPalette/"] }], diff --git a/components/form/v3.en-US.md b/components/form/v3.en-US.md index c3f9205d78..18f7a3cee9 100644 --- a/components/form/v3.en-US.md +++ b/components/form/v3.en-US.md @@ -116,7 +116,7 @@ If you don't want to use the Item style, you can use `noStyle` prop to remove it ```jsx // antd v3 -const Demo = ({ form: { setFieldsValue } }) => { +const Demo = ({ form: { getFieldDecorator } }) => { return
{getFieldDecorator('username')()}
; }; diff --git a/components/form/v3.zh-CN.md b/components/form/v3.zh-CN.md index 0814231896..40a33832ed 100644 --- a/components/form/v3.zh-CN.md +++ b/components/form/v3.zh-CN.md @@ -118,7 +118,7 @@ class Demo extends React.Component { ```jsx // antd v3 -const Demo = ({ form: { setFieldsValue } }) => { +const Demo = ({ form: { getFieldDecorator } }) => { return
{getFieldDecorator('username')()}
; }; diff --git a/components/image/PreviewGroup.tsx b/components/image/PreviewGroup.tsx index f28d9a883a..201489d79b 100644 --- a/components/image/PreviewGroup.tsx +++ b/components/image/PreviewGroup.tsx @@ -1,15 +1,38 @@ import * as React from 'react'; import RcImage from 'rc-image'; -import { GroupConsumerProps } from 'rc-image/lib/PreviewGroup'; +import RotateLeftOutlined from '@ant-design/icons/RotateLeftOutlined'; +import RotateRightOutlined from '@ant-design/icons/RotateRightOutlined'; +import ZoomInOutlined from '@ant-design/icons/ZoomInOutlined'; +import ZoomOutOutlined from '@ant-design/icons/ZoomOutOutlined'; +import CloseOutlined from '@ant-design/icons/CloseOutlined'; +import LeftOutlined from '@ant-design/icons/LeftOutlined'; +import RightOutlined from '@ant-design/icons/RightOutlined'; +import type { GroupConsumerProps } from 'rc-image/lib/PreviewGroup'; import { ConfigContext } from '../config-provider'; +export const icons = { + rotateLeft: , + rotateRight: , + zoomIn: , + zoomOut: , + close: , + left: , + right: , +}; + const InternalPreviewGroup: React.FC = ({ previewPrefixCls: customizePrefixCls, ...props }) => { const { getPrefixCls } = React.useContext(ConfigContext); const prefixCls = getPrefixCls('image-preview', customizePrefixCls); - return ; + return ( + + ); }; export default InternalPreviewGroup; diff --git a/components/image/index.tsx b/components/image/index.tsx index 24da2bca9c..0e00dd5d8f 100644 --- a/components/image/index.tsx +++ b/components/image/index.tsx @@ -3,7 +3,7 @@ import { useContext } from 'react'; import EyeOutlined from '@ant-design/icons/EyeOutlined'; import RcImage, { ImageProps } from 'rc-image'; import defaultLocale from '../locale/en_US'; -import PreviewGroup from './PreviewGroup'; +import PreviewGroup, { icons } from './PreviewGroup'; import { ConfigContext } from '../config-provider'; export interface CompositionImage

extends React.FC

{ @@ -33,6 +33,7 @@ const Image: CompositionImage = ({ {imageLocale?.preview}

), + icons, ...(typeof preview === 'object' ? preview : null), }; }, [preview, imageLocale]); diff --git a/components/slider/SliderTooltip.tsx b/components/slider/SliderTooltip.tsx index d979aac944..4a8436e29a 100644 --- a/components/slider/SliderTooltip.tsx +++ b/components/slider/SliderTooltip.tsx @@ -17,7 +17,7 @@ const SliderTooltip = React.forwardRef((props, ref) => { function keepAlign() { rafRef.current = raf(() => { - innerRef.current.forcePopupAlign(); + innerRef.current?.forcePopupAlign(); rafRef.current = null; keepAlign(); }); diff --git a/components/table/demo/drag-sorting-handler.md b/components/table/demo/drag-sorting-handler.md index 44d44f9e22..120b53547d 100644 --- a/components/table/demo/drag-sorting-handler.md +++ b/components/table/demo/drag-sorting-handler.md @@ -90,6 +90,7 @@ class SortableTable extends React.Component { DraggableContainer = props => (
`; + +exports[`immutable data dataSource is frozen 1`] = ` +
+
+
+ + + + + + 1 item + + +
+
+
    +
  • + + +
    • +
+
+
+
+ + +
+
+
+ + + + + + 0 item + + +
+
+
+
+
+ + + + + + + + + +
+

+ No Data +

+
+
+
+
+
+`; diff --git a/components/transfer/__tests__/index.test.js b/components/transfer/__tests__/index.test.js index 6fd7846b28..fbb5a6ccb8 100644 --- a/components/transfer/__tests__/index.test.js +++ b/components/transfer/__tests__/index.test.js @@ -543,3 +543,18 @@ describe('Transfer', () => { expect(onChange).toHaveBeenCalledWith([], 'left', ['b']); }); }); + +describe('immutable data', () => { + // https://github.com/ant-design/ant-design/issues/28662 + it('dataSource is frozen', () => { + const mockData = [ + Object.freeze({ + id: 0, + title: `title`, + description: `description`, + }), + ]; + const wrapper = mount( item.id} dataSource={mockData} />); + expect(wrapper).toMatchRenderedSnapshot(); + }); +}); diff --git a/components/transfer/demo/basic.md b/components/transfer/demo/basic.md index 213732eea2..36cda28587 100644 --- a/components/transfer/demo/basic.md +++ b/components/transfer/demo/basic.md @@ -28,7 +28,7 @@ for (let i = 0; i < 20; i++) { const initialTargetKeys = mockData.filter(item => +item.key > 10).map(item => item.key); -const App1 = () => { +const App = () => { const [targetKeys, setTargetKeys] = useState(initialTargetKeys); const [selectedKeys, setSelectedKeys] = useState([]); const onChange = (nextTargetKeys, direction, moveKeys) => { @@ -63,5 +63,5 @@ const App1 = () => { ); }; -ReactDOM.render(, mountNode); +ReactDOM.render(, mountNode); ``` diff --git a/components/transfer/index.tsx b/components/transfer/index.tsx index e9ff4657c1..162f684f06 100644 --- a/components/transfer/index.tsx +++ b/components/transfer/index.tsx @@ -331,7 +331,10 @@ class Transfer extends React.Com const rightDataSource: KeyWise[] = new Array(targetKeys.length); dataSource.forEach((record: KeyWise) => { if (rowKey) { - record.key = rowKey(record); + record = { + ...record, + key: rowKey(record), + }; } // rightDataSource should be ordered by targetKeys diff --git a/components/tree/demo/drag-debug.md b/components/tree/demo/drag-debug.md index 2dcd115935..df36136063 100644 --- a/components/tree/demo/drag-debug.md +++ b/components/tree/demo/drag-debug.md @@ -57,9 +57,9 @@ class Demo extends React.Component { onDrop = info => { console.log(info); - const dropKey = info.node.props.eventKey; - const dragKey = info.dragNode.props.eventKey; - const dropPos = info.node.props.pos.split('-'); + const dropKey = info.node.key; + const dragKey = info.dragNode.key; + const dropPos = info.node.pos.split('-'); const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]); const loop = (data, key, callback) => { diff --git a/components/tree/demo/draggable.md b/components/tree/demo/draggable.md index 675974b494..a764e8f791 100644 --- a/components/tree/demo/draggable.md +++ b/components/tree/demo/draggable.md @@ -60,9 +60,9 @@ class Demo extends React.Component { onDrop = info => { console.log(info); - const dropKey = info.node.props.eventKey; - const dragKey = info.dragNode.props.eventKey; - const dropPos = info.node.props.pos.split('-'); + const dropKey = info.node.key; + const dragKey = info.dragNode.key; + const dropPos = info.node.pos.split('-'); const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]); const loop = (data, key, callback) => { diff --git a/docs/resources.en-US.md b/docs/resources.en-US.md index 711b7a9923..ac5cde7a3f 100644 --- a/docs/resources.en-US.md +++ b/docs/resources.en-US.md @@ -53,7 +53,7 @@ Please find below some of the design resources and tools about Ant Design that w - UI Kit for Adobe XD - https://uploads-ssl.webflow.com/5ecbd337fe499992c9ed75ba/5f2a7a30f3e817085cec5ac9_ant-xd-svg.svg - Library of components for Desktop - - https://gumroad.com/l/antdesign-xd + - https://www.antforxd.com - Figma Open Source Library - https://gw.alipayobjects.com/zos/basement_prod/7b9ed3f2-6f05-4ddb-bac3-d55feb71e0ac.svg - Free open source Figma library with complete accurate to code components diff --git a/docs/spec/overview.zh-CN.md b/docs/spec/overview.zh-CN.md index 2dde58d796..d9a6f48816 100644 --- a/docs/spec/overview.zh-CN.md +++ b/docs/spec/overview.zh-CN.md @@ -6,7 +6,7 @@ title: 概览 > 这是一份动态更新的设计文档，你的阅读和反馈是我们前进的动力。 -秉承 [Ant Design 设计价值观](/docs/spec/values)，针对企业级产品反复出现的设计问题，设计模式给出一般性的解决方案，实现跨应用交互一致性的有效融合。依照设计模式使用 [antd 组件](/docs/react/introduce)设计界面，即减少了不必要的认知成本，又能够提升交互确定性和设计的效率。考虑到需要适应各种独特的业务场景，模式的规则具有一定的灵活性，变不离宗，通过了解设计模式的构建逻辑，可以衍生出更具场景特性的解决方案。设计模式包含以下内容： +秉承 [Ant Design 设计价值观](/docs/spec/values)，针对企业级产品反复出现的设计问题，设计模式给出一般性的解决方案，实现跨应用交互一致性的有效融合。依照设计模式使用 [antd 组件](/docs/react/introduce)设计界面，既减少了不必要的认知成本，又能够提升交互确定性和设计的效率。考虑到需要适应各种独特的业务场景，模式的规则具有一定的灵活性，变不离宗，通过了解设计模式的构建逻辑，可以衍生出更具场景特性的解决方案。设计模式包含以下内容： ### 原则 diff --git a/package.json b/package.json index fdfa74da3e..79dfe14f63 100644 --- a/package.json +++ b/package.json @@ -109,7 +109,7 @@ "dependencies": { "@ant-design/colors": "^5.0.0", "@ant-design/icons": "^4.3.0", - "@ant-design/react-slick": "~0.27.0", + "@ant-design/react-slick": "~0.28.1", "@babel/runtime": "^7.11.2", "array-tree-filter": "^2.1.0", "classnames": "^2.2.6", @@ -124,7 +124,7 @@ "rc-drawer": "~4.2.0", "rc-dropdown": "~3.2.0", "rc-field-form": "~1.17.3", - "rc-image": "~4.6.0", + "rc-image": "~5.1.1", "rc-input-number": "~6.1.0", "rc-mentions": "~1.5.0", "rc-menu": "~8.10.0", @@ -135,7 +135,7 @@ "rc-progress": "~3.1.0", "rc-rate": "~2.9.0", "rc-resize-observer": "^1.0.0", - "rc-select": "~12.0.0", + "rc-select": "~12.1.0", "rc-slider": "~9.7.1", "rc-steps": "~4.1.0", "rc-switch": "~3.2.0", @@ -153,7 +153,7 @@ "devDependencies": { "@ant-design/bisheng-plugin": "^2.3.0", "@ant-design/hitu": "^0.0.0-alpha.13", - "@ant-design/tools": "^13.0.1", + "@ant-design/tools": "^13.3.0", "@qixian.cs/github-contributors-list": "^1.0.3", "@stackblitz/sdk": "^1.3.0", "@types/classnames": "^2.2.8", @@ -235,7 +235,7 @@ "node-fetch": "^2.6.0", "open": "^7.0.3", "prettier": "^2.2.0", - "prettier-plugin-jsdoc": "^0.2.12", + "prettier-plugin-jsdoc": "^0.3.0", "pretty-quick": "^3.0.0", "querystring": "^0.2.0", "rc-footer": "^0.6.3", diff --git a/site/theme/static/common.less b/site/theme/static/common.less index f14c74b29c..fc4ed53ad1 100644 --- a/site/theme/static/common.less +++ b/site/theme/static/common.less @@ -5,6 +5,7 @@ html { } body { + overflow-x: hidden; color: @site-text-color; font-size: @font-size-base; font-family: @font-family; @@ -19,7 +20,6 @@ a { .main-wrapper { position: relative; padding: 40px 0 0; - overflow-x: hidden; background: @component-background; } From 9d334e776e288129881aeba89ac2bcdd9530ea51 Mon Sep 17 00:00:00 2001 From: Alek Ye Date: Mon, 11 Jan 2021 17:56:26 +0800 Subject: [PATCH 05/11] chore: remove console log (#28816) Co-authored-by: alek.ye --- components/table/demo/custom-filter-panel.md | 1 - 1 file changed, 1 deletion(-) diff --git a/components/table/demo/custom-filter-panel.md b/components/table/demo/custom-filter-panel.md index 6d49213946..9c3a69021d 100644 --- a/components/table/demo/custom-filter-panel.md +++ b/components/table/demo/custom-filter-panel.md @@ -84,7 +84,6 @@ class App extends React.Component { size="small" onClick={() => { confirm({ closeDropdown: false }); - console.log('1234'); this.setState({ searchText: selectedKeys[0], searchedColumn: dataIndex, From a9bd80916dc29716ffc0927d8351533033c401b2 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: Tue, 12 Jan 2021 16:46:59 +0800 Subject: [PATCH 06/11] feat: Typography ellipsis support tooltip (#28821) * feat: ellipsis support tooltip * chore: Update test snapshot * test: Coverage * chore: fix ts definition * clean up --- components/typography/Base.tsx | 18 +++-- components/typography/Text.tsx | 22 ++++-- .../__tests__/__snapshots__/demo.test.js.snap | 19 +++++ components/typography/__tests__/index.test.js | 26 +++++++ components/typography/demo/ellipsis.md | 71 ++++++++++++------- components/typography/index.en-US.md | 17 ++--- components/typography/index.zh-CN.md | 17 ++--- 7 files changed, 139 insertions(+), 51 deletions(-) diff --git a/components/typography/Base.tsx b/components/typography/Base.tsx index bc4a09f33c..88e44edbff 100644 --- a/components/typography/Base.tsx +++ b/components/typography/Base.tsx @@ -41,13 +41,14 @@ interface EditConfig { autoSize?: boolean | AutoSizeType; } -interface EllipsisConfig { +export interface EllipsisConfig { rows?: number; expandable?: boolean; suffix?: string; symbol?: React.ReactNode; onExpand?: React.MouseEventHandler; onEllipsis?: (ellipsis: boolean) => void; + tooltip?: React.ReactNode; } export interface BlockProps extends TypographyProps { @@ -287,9 +288,9 @@ class Base extends React.Component { canUseCSSEllipsis(): boolean { const { clientRendered } = this.state; const { editable, copyable } = this.props; - const { rows, expandable, suffix, onEllipsis } = this.getEllipsis(); + const { rows, expandable, suffix, onEllipsis, tooltip } = this.getEllipsis(); - if (suffix) return false; + if (suffix || tooltip) return false; // Can't use css ellipsis since we need to provide the place for button if (editable || copyable || expandable || !clientRendered || onEllipsis) { return false; @@ -441,7 +442,7 @@ class Base extends React.Component { const { ellipsisContent, isEllipsis, expanded } = this.state; const { component, children, className, type, disabled, style, ...restProps } = this.props; const { direction } = this.context; - const { rows, suffix } = this.getEllipsis(); + const { rows, suffix, tooltip } = this.getEllipsis(); const prefixCls = this.getPrefixCls(); @@ -485,6 +486,15 @@ class Base extends React.Component { {suffix} ); + + // If provided tooltip, we need wrap with span to let Tooltip inject events + if (tooltip) { + textNode = ( + + {textNode} + + ); + } } else { textNode = ( <> diff --git a/components/typography/Text.tsx b/components/typography/Text.tsx index 8542283d90..16b075c434 100644 --- a/components/typography/Text.tsx +++ b/components/typography/Text.tsx @@ -1,18 +1,30 @@ import * as React from 'react'; +import omit from 'omit.js'; import devWarning from '../_util/devWarning'; -import Base, { BlockProps } from './Base'; +import Base, { BlockProps, EllipsisConfig } from './Base'; export interface TextProps extends BlockProps { - ellipsis?: boolean; + ellipsis?: boolean | Omit; } const Text: React.FC = ({ ellipsis, ...restProps }) => { + const mergedEllipsis = React.useMemo(() => { + if (ellipsis && typeof ellipsis === 'object') { + return omit(ellipsis, ['expandable', 'rows']); + } + + return ellipsis; + }, [ellipsis]); + devWarning( - typeof ellipsis !== 'object', + typeof ellipsis !== 'object' || + !ellipsis || + (!('expandable' in ellipsis) && !('rows' in ellipsis)), 'Typography.Text', - '`ellipsis` only supports boolean value.', + '`ellipsis` do not support `expandable` or `rows` props.', ); - return ; + + return ; }; export default Text; diff --git a/components/typography/__tests__/__snapshots__/demo.test.js.snap b/components/typography/__tests__/__snapshots__/demo.test.js.snap index bfa227d3bb..d01b329641 100644 --- a/components/typography/__tests__/__snapshots__/demo.test.js.snap +++ b/components/typography/__tests__/__snapshots__/demo.test.js.snap @@ -217,6 +217,19 @@ exports[`renders ./components/typography/demo/basic.md correctly 1`] = ` exports[`renders ./components/typography/demo/ellipsis.md correctly 1`] = ` Array [ + ,
@@ -227,6 +240,12 @@ Array [ > Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team.
, + + Ant Design, a design language for background applications, is refined by Ant UED Team. + , ] `; diff --git a/components/typography/__tests__/index.test.js b/components/typography/__tests__/index.test.js index fa895192e9..96c99a9df6 100644 --- a/components/typography/__tests__/index.test.js +++ b/components/typography/__tests__/index.test.js @@ -233,6 +233,32 @@ describe('Typography', () => { const wrapper = mount(); expect(wrapper.find('.ant-typography-ellipsis-single-line').length).toBeTruthy(); }); + + describe('should tooltip support', () => { + function getWrapper(tooltip) { + return mount( + + {fullStr} + , + ); + } + + it('boolean', async () => { + const wrapper = getWrapper(true); + await sleep(20); + wrapper.update(); + + expect(wrapper.find('Tooltip').prop('title')).toEqual(fullStr); + }); + + it('customize', async () => { + const wrapper = getWrapper('Bamboo is Light'); + await sleep(20); + wrapper.update(); + + expect(wrapper.find('Tooltip').prop('title')).toEqual('Bamboo is Light'); + }); + }); }); describe('copyable', () => { diff --git a/components/typography/demo/ellipsis.md b/components/typography/demo/ellipsis.md index 3bdf036ddc..f30bfde1d9 100644 --- a/components/typography/demo/ellipsis.md +++ b/components/typography/demo/ellipsis.md @@ -7,37 +7,56 @@ title: ## zh-CN -多行文本省略。 +多行文本省略。你可以通过 `tooltip` 属性配置省略展示内容，大量文本时推荐优先使用 `expandable`。 ## en-US -Multiple line ellipsis support. +Multiple line ellipsis support. You can use `tooltip` to config ellipsis tooltip. Recommend `expandable` when have lots of content. -```jsx -import { Typography } from 'antd'; +```tsx +import { Typography, Switch } from 'antd'; -const { Paragraph } = Typography; +const { Paragraph, Text } = Typography; -ReactDOM.render( - <> - - Ant Design, a design language for background applications, is refined by Ant UED Team. Ant - Design, a design language for background applications, is refined by Ant UED Team. Ant Design, - a design language for background applications, is refined by Ant UED Team. Ant Design, a - design language for background applications, is refined by Ant UED Team. Ant Design, a design - language for background applications, is refined by Ant UED Team. Ant Design, a design - language for background applications, is refined by Ant UED Team. - +const Demo = () => { + const [ellipsis, setEllipsis] = React.useState(true); - - Ant Design, a design language for background applications, is refined by Ant UED Team. Ant - Design, a design language for background applications, is refined by Ant UED Team. Ant Design, - a design language for background applications, is refined by Ant UED Team. Ant Design, a - design language for background applications, is refined by Ant UED Team. Ant Design, a design - language for background applications, is refined by Ant UED Team. Ant Design, a design - language for background applications, is refined by Ant UED Team. - - , - mountNode, -); + return ( + <> + { + setEllipsis(!ellipsis); + }} + /> + + + Ant Design, a design language for background applications, is refined by Ant UED Team. Ant + Design, a design language for background applications, is refined by Ant UED Team. Ant + Design, a design language for background applications, is refined by Ant UED Team. Ant + Design, a design language for background applications, is refined by Ant UED Team. Ant + Design, a design language for background applications, is refined by Ant UED Team. Ant + Design, a design language for background applications, is refined by Ant UED Team. + + + + Ant Design, a design language for background applications, is refined by Ant UED Team. Ant + Design, a design language for background applications, is refined by Ant UED Team. Ant + Design, a design language for background applications, is refined by Ant UED Team. Ant + Design, a design language for background applications, is refined by Ant UED Team. Ant + Design, a design language for background applications, is refined by Ant UED Team. Ant + Design, a design language for background applications, is refined by Ant UED Team. + + + + Ant Design, a design language for background applications, is refined by Ant UED Team. + + + ); +}; + +ReactDOM.render(, mountNode); ``` diff --git a/components/typography/index.en-US.md b/components/typography/index.en-US.md index df53fef220..816e6b5c64 100644 --- a/components/typography/index.en-US.md +++ b/components/typography/index.en-US.md @@ -113,14 +113,15 @@ Basic text writing, including headings, body text, lists, and more. onEllipsis: function(ellipsis), } -| Property | Description | Type | Default | Version | -| ---------- | ----------------------------------------- | ------------------ | ------- | ------- | -| expandable | Whether to be expandable | boolean | - | | -| rows | Max rows of content | number | - | | -| suffix | Suffix of ellipsis content | ReactNode | - | | -| symbol | Custom `...` symbol of ellipsis | ReactNode | `...` | | -| onEllipsis | Called when enter or leave ellipsis state | function(ellipsis) | - | 4.2.0 | -| onExpand | Called when expand content | function(event) | - | | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| expandable | Whether to be expandable | boolean | - | | +| rows | Max rows of content | number | - | | +| suffix | Suffix of ellipsis content | ReactNode | - | | +| symbol | Custom `...` symbol of ellipsis | ReactNode | `...` | | +| tooltip | Show tooltip when ellipsis | boolean \| ReactNode | - | 4.11.0 | +| onEllipsis | Called when enter or leave ellipsis state | function(ellipsis) | - | 4.2.0 | +| onExpand | Called when expand content | function(event) | - | | ## FAQ diff --git a/components/typography/index.zh-CN.md b/components/typography/index.zh-CN.md index 8667759c15..eaf427f35a 100644 --- a/components/typography/index.zh-CN.md +++ b/components/typography/index.zh-CN.md @@ -113,14 +113,15 @@ cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg onEllipsis: function(ellipsis), } -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| ---------- | ------------------ | ------------------ | ------ | ----- | -| expandable | 是否可展开 | boolean | - | | -| rows | 最多显示的行数 | number | - | | -| suffix | 自定义省略内容后缀 | ReactNode | - | | -| symbol | 自定义省略符号 | ReactNode | `...` | | -| onEllipsis | 触发省略时的回调 | function(ellipsis) | - | 4.2.0 | -| onExpand | 点击展开时的回调 | function(event) | - | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| ---------- | -------------------- | -------------------- | ------ | ------ | +| expandable | 是否可展开 | boolean | - | | +| rows | 最多显示的行数 | number | - | | +| suffix | 自定义省略内容后缀 | ReactNode | - | | +| symbol | 自定义省略符号 | ReactNode | `...` | | +| tooltip | 省略时，展示提示信息 | boolean \| ReactNode | - | 4.11.0 | +| onEllipsis | 触发省略时的回调 | function(ellipsis) | - | 4.2.0 | +| onExpand | 点击展开时的回调 | function(event) | - | | ## FAQ From b22f1ec30623d6259fc8470385e1ee6395e0d622 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 14 Jan 2021 14:32:42 +0800 Subject: [PATCH 07/11] chore: fix tsc error --- components/typography/Text.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/typography/Text.tsx b/components/typography/Text.tsx index 16b075c434..bc60e7a02f 100644 --- a/components/typography/Text.tsx +++ b/components/typography/Text.tsx @@ -10,7 +10,7 @@ export interface TextProps extends BlockProps { const Text: React.FC = ({ ellipsis, ...restProps }) => { const mergedEllipsis = React.useMemo(() => { if (ellipsis && typeof ellipsis === 'object') { - return omit(ellipsis, ['expandable', 'rows']); + return omit(ellipsis as any, ['expandable', 'rows']); } return ellipsis; From a5bdf5aedd66feef14626718a23ce9a7284cf233 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 14 Jan 2021 14:42:01 +0800 Subject: [PATCH 08/11] chore: fix tsc error --- components/typography/Text.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/typography/Text.tsx b/components/typography/Text.tsx index bc60e7a02f..8e225bbcd5 100644 --- a/components/typography/Text.tsx +++ b/components/typography/Text.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import omit from 'omit.js'; +import omit from 'rc-util/lib/omit'; import devWarning from '../_util/devWarning'; import Base, { BlockProps, EllipsisConfig } from './Base'; From 1ca28baa5cde3f97b0ffb9ee5dd7dabe2f3df6b2 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, 15 Jan 2021 17:29:33 +0800 Subject: [PATCH 09/11] chore: Add light menu background color (#28842) * chore: Add light menu background color * fix lint * rename --- components/menu/style/dark.less | 2 +- components/menu/style/index.less | 1 + components/style/themes/dark.less | 2 +- components/style/themes/default.less | 3 ++- 4 files changed, 5 insertions(+), 3 deletions(-) diff --git a/components/menu/style/dark.less b/components/menu/style/dark.less index 9332b486de..1ad2abf991 100644 --- a/components/menu/style/dark.less +++ b/components/menu/style/dark.less @@ -20,7 +20,7 @@ } &-dark &-inline&-sub { - background: @menu-dark-submenu-bg; + background: @menu-dark-inline-submenu-bg; } &-dark&-horizontal { diff --git a/components/menu/style/index.less b/components/menu/style/index.less index e6da98c923..22c109d612 100644 --- a/components/menu/style/index.less +++ b/components/menu/style/index.less @@ -542,6 +542,7 @@ &-sub&-inline { padding: 0; + background: @menu-inline-submenu-bg; border: 0; border-radius: 0; box-shadow: none; diff --git a/components/style/themes/dark.less b/components/style/themes/dark.less index 1a104b10b8..7fa8ae66af 100644 --- a/components/style/themes/dark.less +++ b/components/style/themes/dark.less @@ -290,7 +290,7 @@ // Menu // --- // dark theme -@menu-dark-submenu-bg: @component-background; +@menu-dark-inline-submenu-bg: @component-background; @menu-dark-bg: @popover-background; @menu-popup-bg: @popover-background; diff --git a/components/style/themes/default.less b/components/style/themes/default.less index 5d743c5336..a88ed98abf 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -546,6 +546,7 @@ @menu-bg: @component-background; @menu-popup-bg: @component-background; @menu-item-color: @text-color; +@menu-inline-submenu-bg: @background-color-light; @menu-highlight-color: @primary-color; @menu-highlight-danger-color: @error-color; @menu-item-active-bg: @primary-1; @@ -567,7 +568,7 @@ @menu-dark-danger-color: @error-color; @menu-dark-bg: @layout-header-background; @menu-dark-arrow-color: #fff; -@menu-dark-submenu-bg: #000c17; +@menu-dark-inline-submenu-bg: #000c17; @menu-dark-highlight-color: #fff; @menu-dark-item-active-bg: @primary-color; @menu-dark-item-active-danger-bg: @error-color; From f01066467e7b5a367e73246207ccb42c3413d18e 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: Tue, 19 Jan 2021 17:33:05 +0800 Subject: [PATCH 10/11] feat: ConfigProvider support `iconPrefixCls` (#28924) * add iconPrefixCls support * test: Update test case * update less variable --- components/card/style/index.less | 4 +- .../config-provider/__tests__/index.test.js | 12 ++++ components/config-provider/context.tsx | 1 + components/config-provider/demo/prefixCls.md | 32 +++++++++ components/config-provider/index.en-US.md | 1 + components/config-provider/index.tsx | 69 +++++++++---------- components/config-provider/index.zh-CN.md | 1 + components/dropdown/style/rtl.less | 4 +- components/image/style/index.less | 4 +- components/result/style/index.less | 10 +-- package.json | 2 +- 11 files changed, 92 insertions(+), 48 deletions(-) create mode 100644 components/config-provider/demo/prefixCls.md diff --git a/components/card/style/index.less b/components/card/style/index.less index 519a27afcb..9bc33faff9 100644 --- a/components/card/style/index.less +++ b/components/card/style/index.less @@ -186,7 +186,7 @@ } a:not(.@{ant-prefix}-btn), - > .anticon { + > .@{iconfont-css-prefix} { display: inline-block; width: 100%; color: @text-color-secondary; @@ -198,7 +198,7 @@ } } - > .anticon { + > .@{iconfont-css-prefix} { font-size: @card-action-icon-size; line-height: 22px; } diff --git a/components/config-provider/__tests__/index.test.js b/components/config-provider/__tests__/index.test.js index 8b6e5085c1..514c4d897a 100644 --- a/components/config-provider/__tests__/index.test.js +++ b/components/config-provider/__tests__/index.test.js @@ -1,5 +1,6 @@ import React from 'react'; import { mount } from 'enzyme'; +import { SmileOutlined } from '@ant-design/icons'; import ConfigProvider, { ConfigContext } from '..'; import Button from '../../button'; import Table from '../../table'; @@ -56,6 +57,17 @@ describe('ConfigProvider', () => { expect(wrapper.find('button').props().className).toEqual('bamboo-btn'); }); + it('iconPrefixCls', () => { + const wrapper = mount( + + + , + ); + + expect(wrapper.find('[role="img"]').hasClass('bamboo')).toBeTruthy(); + expect(wrapper.find('[role="img"]').hasClass('bamboo-smile')).toBeTruthy(); + }); + it('input autoComplete', () => { const wrapper = mount( diff --git a/components/config-provider/context.tsx b/components/config-provider/context.tsx index e6b8c0b0f3..25bb15ffb7 100644 --- a/components/config-provider/context.tsx +++ b/components/config-provider/context.tsx @@ -14,6 +14,7 @@ export interface ConfigConsumerProps { getTargetContainer?: () => HTMLElement; getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement; rootPrefixCls?: string; + iconPrefixCls?: string; getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => string; renderEmpty: RenderEmptyHandler; csp?: CSPConfig; diff --git a/components/config-provider/demo/prefixCls.md b/components/config-provider/demo/prefixCls.md new file mode 100644 index 0000000000..b7efba778d --- /dev/null +++ b/components/config-provider/demo/prefixCls.md @@ -0,0 +1,32 @@ +--- +order: 99 +title: + zh-CN: 前缀 + en-US: prefixCls +debug: true +--- + +## zh-CN + +修改组件和图标前缀。 + +## en-US + +Config component and icon prefixCls. + +```jsx +import { ConfigProvider, Select } from 'antd'; +import { SmileOutlined } from '@ant-design/icons'; + +// Ant Design site use `es` module for view +// but do not replace related lib `lib` with `es` +// which do not show correct in site. +// We may need do convert in site also. +const FormSizeDemo = () => ( + + +