From ed68463b718113ba1f8d36e138f14fa777829552 Mon Sep 17 00:00:00 2001 From: "liquanwei.lqw" Date: Thu, 14 Nov 2024 11:24:46 +0800 Subject: [PATCH 1/4] feat: add valueType map for table --- package.json | 1 + packages/field/src/ValueTypeToComponent.tsx | 382 ++++++++++++++++++++ packages/table/src/Table.tsx | 3 +- 3 files changed, 385 insertions(+), 1 deletion(-) create mode 100644 packages/field/src/ValueTypeToComponent.tsx diff --git a/package.json b/package.json index 66386191d8f4..8ed44522fe3c 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "site": "npm run build && cross-env SITE_DEPLOY='TRUE' dumi build", "start": "npm run version && dumi dev", "sync:tnpm": "node -e 'require(\"./scripts/syncTNPM\")()'", + "test:ui": "npm run version && cross-env TZ=UTC vitest --ui", "test": "npm run version && cross-env TZ=UTC vitest --run", "test:coverage": "npm run version && pnpm --filter \"@ant-design/**\" build && cross-env TZ=UTC TEST_LOG=none vitest --coverage", "test:update": "npm run version && cross-env TZ=UTC vitest -u", diff --git a/packages/field/src/ValueTypeToComponent.tsx b/packages/field/src/ValueTypeToComponent.tsx new file mode 100644 index 000000000000..35b24dd4c2dd --- /dev/null +++ b/packages/field/src/ValueTypeToComponent.tsx @@ -0,0 +1,382 @@ + +import { Avatar } from 'antd'; +import FieldCascader from './components/Cascader'; +import FieldCheckbox from './components/Checkbox'; +import FieldCode from './components/Code'; +import FieldColorPicker from './components/ColorPicker'; +import FieldDatePicker from './components/DatePicker'; +import FieldDigit from './components/Digit'; +import FieldDigitRange from './components/DigitRange'; +import FieldFromNow from './components/FromNow'; +import FieldImage from './components/Image'; +import FieldIndexColumn from './components/IndexColumn'; +import FieldMoney from './components/Money'; +import FieldOptions from './components/Options'; +import FieldPassword from './components/Password'; +import FieldPercent from './components/Percent'; +import FieldProgress from './components/Progress'; +import FieldRadio from './components/Radio'; +import FieldRangePicker from './components/RangePicker'; +import FieldRate from './components/Rate'; +import FieldSecond from './components/Second'; +import FieldSegmented from './components/Segmented'; +import FieldSelect from './components/Select'; +import FieldSlider from './components/Slider'; +import FieldSwitch from './components/Switch'; +import FieldTextArea from './components/TextArea'; +import FieldTimePicker, { FieldTimeRangePicker } from './components/TimePicker'; +import FieldTreeSelect from './components/TreeSelect'; +import FieldHOC from './FieldHOC'; + +import advancedFormat from 'dayjs/plugin/advancedFormat'; +import isoWeek from 'dayjs/plugin/isoWeek'; +import localeData from 'dayjs/plugin/localeData'; +import weekday from 'dayjs/plugin/weekday'; +import weekOfYear from 'dayjs/plugin/weekOfYear'; + +import dayjs from 'dayjs'; +import { FieldText } from '.'; +import { pickProProps } from '@ant-design/pro-utils'; +import { ProRenderFieldPropsType } from '@ant-design/pro-provider'; + +dayjs.extend(localeData); +dayjs.extend(advancedFormat); +dayjs.extend(isoWeek); +dayjs.extend(weekOfYear); +dayjs.extend(weekday); + + +const ValueTypeToComponentMap: Record = { + progress: { + render: (text, props) => , + formItemRender: (text, props) => , + }, + money: { + render: (text, props) => , + formItemRender: (text, props) => , + }, + percent: { + render: (text, props) => , + formItemRender: (text, props) => , + }, + image: { + render: (text, props) => , + formItemRender: (text, props) => , + }, + date: { + render: (text, props) => ( + + + + ), + formItemRender: (text, props) => ( + + + + ), + }, + dateWeek: { + render: (text, props) => ( + + + + ), + formItemRender: (text, props) => ( + + + + ), + }, + dateWeekRange: { + render: (text, props) => ( + + + + ), + formItemRender: (text, props) => ( + + + + ), + }, + dateMonthRange: { + render: (text, props) => ( + + + + ), + formItemRender: (text, props) => ( + + + + ), + }, + dateQuarterRange: { + render: (text, props) => ( + + + + ), + formItemRender: (text, props) => ( + + + + ), + }, + dateYearRange: { + render: (text, props) => ( + + + + ), + formItemRender: (text, props) => ( + + + + ), + }, + dateMonth: { + render: (text, props) => ( + + + + ), + formItemRender: (text, props) => ( + + + + ), + }, + dateQuarter: { + render: (text, props) => ( + + + + ), + formItemRender: (text, props) => ( + + + + ), + }, + dateYear: { + render: (text, props) => ( + + + + ), + formItemRender: (text, props) => ( + + + + ), + }, + dateRange: { + render: (text, props) => , + formItemRender: (text, props) => , + }, + dateTime: { + render: (text, props) => ( + + + + ), + formItemRender: (text, props) => ( + + + + ), + }, + dateTimeRange: { + render: (text, props) => ( + + + + ), + formItemRender: (text, props) => ( + + + + ), + }, + time: { + render: (text, props) => ( + + + + ), + formItemRender: (text, props) => ( + + + + ), + }, + timeRange: { + render: (text, props) => ( + + + + ), + formItemRender: (text, props) => ( + + + + ), + }, + fromNow: { + render: (text, props) => , + formItemRender: (text, props) => , + }, + index: { + render: (text) => {(text as number) + 1}, + formItemRender: (text) => {(text as number) + 1}, + }, + indexBorder: { + render: (text) => {(text as number) + 1}, + formItemRender: (text) => {(text as number) + 1}, + }, + avatar: { + render: (text) => , + formItemRender: (text) => , + }, + code: { + render: (text, props) => , + formItemRender: (text, props) => , + }, + jsonCode: { + render: (text, props) => , + formItemRender: (text, props) => , + }, + textarea: { + render: (text, props) => , + formItemRender: (text, props) => , + }, + digit: { + render: (text, props) => , + formItemRender: (text, props) => , + }, + digitRange: { + render: (text, props) => , + formItemRender: (text, props) => , + }, + second: { + render: (text, props) => , + formItemRender: (text, props) => , + }, + select: { + render: (text, props) => ( + + + + ), + formItemRender: (text, props) => ( + + + + ), + }, + text: { + render: (text, props) => ( + (props.valueEnum || props.request)? + + + + : + ), + formItemRender: (text, props) => ( + (props.valueEnum || props.request)? + + + + : + ), + }, + checkbox: { + render: (text, props) => , + formItemRender: (text, props) => , + }, + radio: { + render: (text, props) => , + formItemRender: (text, props) => , + }, + radioButton: { + render: (text, props) => , + formItemRender: (text, props) => , + }, + rate: { + render: (text, props) => , + formItemRender: (text, props) => , + }, + slider: { + render: (text, props) => , + formItemRender: (text, props) => , + }, + switch: { + render: (text, props) => , + formItemRender: (text, props) => , + }, + option: { + render: (text, props) => , + formItemRender: (text, props) => , + }, + password: { + render: (text, props) => , + formItemRender: (text, props) => , + }, + cascader: { + render: (text, props) => , + formItemRender: (text, props) => , + }, + treeSelect: { + render: (text, props) => , + formItemRender: (text, props) => , + }, + color: { + render: (text, props) => , + formItemRender: (text, props) => , + }, + segmented: { + render: (text, props) => , + formItemRender: (text, props) => , + }, +}; + +export default ValueTypeToComponentMap; \ No newline at end of file diff --git a/packages/table/src/Table.tsx b/packages/table/src/Table.tsx index d74a5a9b6193..d878fd10cfcc 100644 --- a/packages/table/src/Table.tsx +++ b/packages/table/src/Table.tsx @@ -57,6 +57,7 @@ import { } from './utils'; import { columnSort } from './utils/columnSort'; import { genProColumnToColumn } from './utils/genProColumnToColumn'; +import ValueTypeToComponent from '../../field/src/ValueTypeToComponent'; function TableRender, U, ValueType>( props: ProTableProps & { @@ -1021,7 +1022,7 @@ const ProviderTableContainer = < return ( - + defaultClassName={`${getPrefixCls('pro-table')}`} From a67193bde75318d89491a28181d57c38c211e0ea Mon Sep 17 00:00:00 2001 From: "liquanwei.lqw" Date: Fri, 15 Nov 2024 14:12:46 +0800 Subject: [PATCH 2/4] fix: test case --- tests/table/index.test.tsx | 40 +++++++++++++++++++------------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/tests/table/index.test.tsx b/tests/table/index.test.tsx index 94c2d79b5080..3734bc9ed443 100644 --- a/tests/table/index.test.tsx +++ b/tests/table/index.test.tsx @@ -1519,14 +1519,14 @@ describe('BasicTable', () => { rowKey="key" />, ); - + const input = html.baseElement.querySelector( + '.ant-pro-table-list-toolbar-search input', + )! await html.findByText('查 询'); act(() => { fireEvent.change( - html.baseElement.querySelector( - '.ant-pro-table-list-toolbar-search input', - )!, + input, { target: { value: 'name', @@ -1539,9 +1539,7 @@ describe('BasicTable', () => { act(() => { fireEvent.keyDown( - html.baseElement.querySelector( - '.ant-pro-table-list-toolbar-search input', - )!, + input, { key: 'Enter', keyCode: 13 }, ); }); @@ -1552,9 +1550,7 @@ describe('BasicTable', () => { act(() => { fireEvent.change( - html.baseElement.querySelector( - '.ant-pro-table-list-toolbar-search input', - )!, + input, { target: { value: 'name1', @@ -1563,16 +1559,20 @@ describe('BasicTable', () => { ); }); - // await html.findByDisplayValue('name1'); - - // act(() => { - // fireEvent.keyDown( - // html.baseElement.querySelector( - // '.ant-pro-table-list-toolbar-search input', - // )!, - // { key: 'Enter', keyCode: 13 }, - // ); - // }); + await html.findByDisplayValue('name1'); + // 下一次keyDown前需要一次keyUp，除非是设置了长按 + act(() => { + fireEvent.keyUp( + input, + { key: 'Enter', keyCode: 13 }, + ); + }); + act(() => { + fireEvent.keyDown( + input, + { key: 'Enter', keyCode: 13 }, + ); + }); await waitFor(() => { expect(fn).toHaveBeenCalledWith('name1'); From cf73bf7041afb4a568273d97a57689f698c46a57 Mon Sep 17 00:00:00 2001 From: "liquanwei.lqw" Date: Mon, 18 Nov 2024 10:42:36 +0800 Subject: [PATCH 3/4] feat: add await for test --- tests/table/index.test.tsx | 4 ++-- tests/table/valueType.test.tsx | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/tests/table/index.test.tsx b/tests/table/index.test.tsx index 3734bc9ed443..6acc1ba35ecc 100644 --- a/tests/table/index.test.tsx +++ b/tests/table/index.test.tsx @@ -1519,9 +1519,9 @@ describe('BasicTable', () => { rowKey="key" />, ); - const input = html.baseElement.querySelector( + const input = await waitFor(() => html.baseElement.querySelector( '.ant-pro-table-list-toolbar-search input', - )! + )!) await html.findByText('查 询'); act(() => { diff --git a/tests/table/valueType.test.tsx b/tests/table/valueType.test.tsx index d4fdec9f48c8..3ea90369fc0e 100644 --- a/tests/table/valueType.test.tsx +++ b/tests/table/valueType.test.tsx @@ -126,6 +126,7 @@ describe('BasicTable valueType', () => { html.unmount(); }); + // 使用valueTypeMap包裹protable后，这里的context不会使用导致单测失败 it('🎏 table valueType render support fieldProps', async () => { const html = render( Date: Mon, 18 Nov 2024 11:24:54 +0800 Subject: [PATCH 4/4] =?UTF-8?q?feat:=20table=E7=BB=A7=E6=89=BF=E5=A4=96?= =?UTF-8?q?=E9=83=A8=E7=9A=84valueTypeMap=E8=AE=BE=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/table/src/Table.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/table/src/Table.tsx b/packages/table/src/Table.tsx index d878fd10cfcc..251a96f83fe3 100644 --- a/packages/table/src/Table.tsx +++ b/packages/table/src/Table.tsx @@ -1,7 +1,7 @@ import ProCard from '@ant-design/pro-card'; import ProForm, { GridContext } from '@ant-design/pro-form'; import type { ParamsType } from '@ant-design/pro-provider'; -import { ProConfigProvider, proTheme, useIntl } from '@ant-design/pro-provider'; +import ProConfigContext, { ProConfigProvider, proTheme, useIntl } from '@ant-design/pro-provider'; import { ErrorBoundary, editableRowByKey, @@ -1020,9 +1020,10 @@ const ProviderTableContainer = < ? React.Fragment : props.ErrorBoundary || ErrorBoundary; + const context = useContext(ProConfigContext); return ( - + defaultClassName={`${getPrefixCls('pro-table')}`}