Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add valueType map for table #8866

Merged
merged 1 commit into from
Nov 14, 2024
Merged

feat: add valueType map for table #8866

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
382 changes: 382 additions & 0 deletions packages/field/src/ValueTypeToComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<string, ProRenderFieldPropsType> = {
progress: {
render: (text, props) => <FieldProgress
{...props}
text={text}
fieldProps={{
status: props.status ? props.status : undefined,
...pickProProps(props.fieldProps),
}}
/>,
formItemRender: (text, props) => <FieldProgress
{...props}
text={text}
fieldProps={{
status: props.status ? props.status : undefined,
...pickProProps(props.fieldProps),
}}
/>,
},
money: {
render: (text, props) => <FieldMoney
{...props}
text={text}
fieldProps={{
...pickProProps(props.fieldProps),
}}
/>,
formItemRender: (text, props) => <FieldMoney
{...props}
text={text}
fieldProps={{
...pickProProps(props.fieldProps),
}}
/>,
},
percent: {
render: (text, props) => <FieldPercent
{...props}
text={text}
fieldProps={{
...pickProProps(props.fieldProps),
}}
/>,
formItemRender: (text, props) => <FieldPercent
{...props}
text={text}
fieldProps={{
...pickProProps(props.fieldProps),
}}
/>,
},
image: {
render: (text, props) => <FieldImage {...props} text={text} />,
formItemRender: (text, props) => <FieldImage {...props} text={text} />,
},
date: {
render: (text, props) => (
<FieldHOC isLight={props.light}>
<FieldDatePicker format="YYYY-MM-DD" {...props} text={text} />
</FieldHOC>
),
formItemRender: (text, props) => (
<FieldHOC isLight={props.light}>
<FieldDatePicker format="YYYY-MM-DD" {...props} text={text} />
</FieldHOC>
),
},
dateWeek: {
render: (text, props) => (
<FieldHOC isLight={props.light}>
<FieldDatePicker format="YYYY-wo" picker="week" {...props} text={text} />
</FieldHOC>
),
formItemRender: (text, props) => (
<FieldHOC isLight={props.light}>
<FieldDatePicker format="YYYY-wo" picker="week" {...props} text={text} />
</FieldHOC>
),
},
dateWeekRange: {
render: (text, props) => (
<FieldHOC isLight={props.light}>
<FieldRangePicker format="YYYY-W" showTime fieldProps={{ picker: 'week', ...props.fieldProps }} {...props} text={text} />
</FieldHOC>
),
formItemRender: (text, props) => (
<FieldHOC isLight={props.light}>
<FieldRangePicker format="YYYY-W" showTime fieldProps={{ picker: 'week', ...props.fieldProps }} {...props} text={text} />
</FieldHOC>
),
},
dateMonthRange: {
render: (text, props) => (
<FieldHOC isLight={props.light}>
<FieldRangePicker format="YYYY-MM" showTime fieldProps={{ picker: 'month', ...props.fieldProps }} {...props} text={text} />
</FieldHOC>
),
formItemRender: (text, props) => (
<FieldHOC isLight={props.light}>
<FieldRangePicker format="YYYY-MM" showTime fieldProps={{ picker: 'month', ...props.fieldProps }} {...props} text={text} />
</FieldHOC>
),
},
dateQuarterRange: {
render: (text, props) => (
<FieldHOC isLight={props.light}>
<FieldRangePicker format="YYYY-Q" showTime fieldProps={{ picker: 'quarter', ...props.fieldProps }} {...props} text={text} />
</FieldHOC>
),
formItemRender: (text, props) => (
<FieldHOC isLight={props.light}>
<FieldRangePicker format="YYYY-Q" showTime fieldProps={{ picker: 'quarter', ...props.fieldProps }} {...props} text={text} />
</FieldHOC>
),
},
dateYearRange: {
render: (text, props) => (
<FieldHOC isLight={props.light}>
<FieldRangePicker format="YYYY" showTime fieldProps={{ picker: 'year', ...props.fieldProps }} {...props} text={text} />
</FieldHOC>
),
formItemRender: (text, props) => (
<FieldHOC isLight={props.light}>
<FieldRangePicker format="YYYY" showTime fieldProps={{ picker: 'year', ...props.fieldProps }} {...props} text={text} />
</FieldHOC>
),
},
dateMonth: {
render: (text, props) => (
<FieldHOC isLight={props.light}>
<FieldDatePicker format="YYYY-MM" picker="month" {...props} text={text} />
</FieldHOC>
),
formItemRender: (text, props) => (
<FieldHOC isLight={props.light}>
<FieldDatePicker format="YYYY-MM" picker="month" {...props} text={text} />
</FieldHOC>
),
},
dateQuarter: {
render: (text, props) => (
<FieldHOC isLight={props.light}>
<FieldDatePicker format="YYYY-[Q]Q" picker="quarter" {...props} text={text} />
</FieldHOC>
),
formItemRender: (text, props) => (
<FieldHOC isLight={props.light}>
<FieldDatePicker format="YYYY-[Q]Q" picker="quarter" {...props} text={text} />
</FieldHOC>
),
},
dateYear: {
render: (text, props) => (
<FieldHOC isLight={props.light}>
<FieldDatePicker format="YYYY" picker="year" {...props} text={text} />
</FieldHOC>
),
formItemRender: (text, props) => (
<FieldHOC isLight={props.light}>
<FieldDatePicker format="YYYY" picker="year" {...props} text={text} />
</FieldHOC>
),
},
dateRange: {
render: (text, props) => <FieldRangePicker format="YYYY-MM-DD" {...props} text={text} />,
formItemRender: (text, props) => <FieldRangePicker format="YYYY-MM-DD" {...props} text={text} />,
},
dateTime: {
render: (text, props) => (
<FieldHOC isLight={props.light}>
<FieldDatePicker format="YYYY-MM-DD HH:mm:ss" showTime {...props} text={text} />
</FieldHOC>
),
formItemRender: (text, props) => (
<FieldHOC isLight={props.light}>
<FieldDatePicker format="YYYY-MM-DD HH:mm:ss" showTime {...props} text={text} />
</FieldHOC>
),
},
dateTimeRange: {
render: (text, props) => (
<FieldHOC isLight={props.light}>
<FieldRangePicker format="YYYY-MM-DD HH:mm:ss" showTime {...props} text={text} />
</FieldHOC>
),
formItemRender: (text, props) => (
<FieldHOC isLight={props.light}>
<FieldRangePicker format="YYYY-MM-DD HH:mm:ss" showTime {...props} text={text} />
</FieldHOC>
),
},
time: {
render: (text, props) => (
<FieldHOC isLight={props.light}>
<FieldTimePicker format="HH:mm:ss" {...props} text={text} />
</FieldHOC>
),
formItemRender: (text, props) => (
<FieldHOC isLight={props.light}>
<FieldTimePicker format="HH:mm:ss" {...props} text={text} />
</FieldHOC>
),
},
timeRange: {
render: (text, props) => (
<FieldHOC isLight={props.light}>
<FieldTimeRangePicker format="HH:mm:ss" {...props} text={text} />
</FieldHOC>
),
formItemRender: (text, props) => (
<FieldHOC isLight={props.light}>
<FieldTimeRangePicker format="HH:mm:ss" {...props} text={text} />
</FieldHOC>
),
},
fromNow: {
render: (text, props) => <FieldFromNow {...props} text={text} />,
formItemRender: (text, props) => <FieldFromNow {...props} text={text} />,
},
index: {
render: (text) => <FieldIndexColumn>{(text as number) + 1}</FieldIndexColumn>,
formItemRender: (text) => <FieldIndexColumn>{(text as number) + 1}</FieldIndexColumn>,
},
indexBorder: {
render: (text) => <FieldIndexColumn border>{(text as number) + 1}</FieldIndexColumn>,
formItemRender: (text) => <FieldIndexColumn border>{(text as number) + 1}</FieldIndexColumn>,
},
avatar: {
render: (text) => <Avatar src={text as string} size={22} shape="circle" />,
formItemRender: (text) => <Avatar src={text as string} size={22} shape="circle" />,
},
code: {
render: (text, props) => <FieldCode {...props} text={text} />,
formItemRender: (text, props) => <FieldCode {...props} text={text} />,
},
jsonCode: {
render: (text, props) => <FieldCode language="json" {...props} text={text} />,
formItemRender: (text, props) => <FieldCode language="json" {...props} text={text} />,
},
textarea: {
render: (text, props) => <FieldTextArea {...props} text={text} />,
formItemRender: (text, props) => <FieldTextArea {...props} text={text} />,
},
digit: {
render: (text, props) => <FieldDigit {...props} text={text} />,
formItemRender: (text, props) => <FieldDigit {...props} text={text} />,
},
digitRange: {
render: (text, props) => <FieldDigitRange {...props} text={text} />,
formItemRender: (text, props) => <FieldDigitRange {...props} text={text} />,
},
second: {
render: (text, props) => <FieldSecond {...props} text={text} />,
formItemRender: (text, props) => <FieldSecond {...props} text={text} />,
},
select: {
render: (text, props) => (
<FieldHOC isLight={props.light}>
<FieldSelect {...props} text={text} />
</FieldHOC>
),
formItemRender: (text, props) => (
<FieldHOC isLight={props.light}>
<FieldSelect {...props} text={text} />
</FieldHOC>
),
},
text: {
render: (text, props) => (
(props.valueEnum || props.request)?
<FieldHOC isLight={props.light}>
<FieldSelect {...props} text={text} />
</FieldHOC>
: <FieldText text={text as string} {...props} />
),
formItemRender: (text, props) => (
(props.valueEnum || props.request)?
<FieldHOC isLight={props.light}>
<FieldSelect {...props} text={text} />
</FieldHOC>
: <FieldText text={text as string} {...props} />
),
},
checkbox: {
render: (text, props) => <FieldCheckbox {...props} text={text} />,
formItemRender: (text, props) => <FieldCheckbox {...props} text={text} />,
},
radio: {
render: (text, props) => <FieldRadio {...props} text={text} />,
formItemRender: (text, props) => <FieldRadio {...props} text={text} />,
},
radioButton: {
render: (text, props) => <FieldRadio radioType="button" {...props} text={text} />,
formItemRender: (text, props) => <FieldRadio radioType="button" {...props} text={text} />,
},
rate: {
render: (text, props) => <FieldRate {...props} text={text} />,
formItemRender: (text, props) => <FieldRate {...props} text={text} />,
},
slider: {
render: (text, props) => <FieldSlider {...props} text={text} />,
formItemRender: (text, props) => <FieldSlider {...props} text={text} />,
},
switch: {
render: (text, props) => <FieldSwitch {...props} text={text} />,
formItemRender: (text, props) => <FieldSwitch {...props} text={text} />,
},
option: {
render: (text, props) => <FieldOptions {...props} text={text} />,
formItemRender: (text, props) => <FieldOptions {...props} text={text} />,
},
password: {
render: (text, props) => <FieldPassword {...props} text={text} />,
formItemRender: (text, props) => <FieldPassword {...props} text={text} />,
},
cascader: {
render: (text, props) => <FieldCascader {...props} text={text} />,
formItemRender: (text, props) => <FieldCascader {...props} text={text} />,
},
treeSelect: {
render: (text, props) => <FieldTreeSelect {...props} text={text} />,
formItemRender: (text, props) => <FieldTreeSelect {...props} text={text} />,
},
color: {
render: (text, props) => <FieldColorPicker {...props} text={text} />,
formItemRender: (text, props) => <FieldColorPicker {...props} text={text} />,
},
segmented: {
render: (text, props) => <FieldSegmented {...props} text={text} />,
formItemRender: (text, props) => <FieldSegmented {...props} text={text} />,
},
};

export default ValueTypeToComponentMap;
Loading
Loading