From 36d377cc3efb10aa5e04c4f244e6cfaf6f154e0e Mon Sep 17 00:00:00 2001 From: Janry Date: Thu, 6 Jan 2022 22:36:32 +0800 Subject: [PATCH] feat(next): add date-picker2 (#2737) --- packages/next/docs/components/DatePicker2.md | 242 +++++++++++++++++ .../next/docs/components/DatePicker2.zh-CN.md | 244 ++++++++++++++++++ packages/next/src/__builtins__/moment.ts | 6 +- packages/next/src/date-picker2/index.tsx | 99 +++++++ packages/next/src/date-picker2/main.scss | 7 + packages/next/src/date-picker2/style.ts | 2 + packages/next/src/index.ts | 1 + packages/next/src/style.ts | 1 + 8 files changed, 601 insertions(+), 1 deletion(-) create mode 100644 packages/next/docs/components/DatePicker2.md create mode 100644 packages/next/docs/components/DatePicker2.zh-CN.md create mode 100644 packages/next/src/date-picker2/index.tsx create mode 100644 packages/next/src/date-picker2/main.scss create mode 100644 packages/next/src/date-picker2/style.ts diff --git a/packages/next/docs/components/DatePicker2.md b/packages/next/docs/components/DatePicker2.md new file mode 100644 index 00000000000..7874fdcefc0 --- /dev/null +++ b/packages/next/docs/components/DatePicker2.md @@ -0,0 +1,242 @@ +# DatePicker2 + +> Date Picker + +## Markup Schema example + +```tsx +import React from 'react' +import { DatePicker2, FormItem, FormButtonGroup, Submit } from '@formily/next' +import { createForm } from '@formily/core' +import { FormProvider, createSchemaField } from '@formily/react' + +const SchemaField = createSchemaField({ + components: { + DatePicker2, + FormItem, + }, +}) + +const form = createForm() + +export default () => ( + + + + + + + + + + + + Submit + + +) +``` + +## JSON Schema case + +```tsx +import React from 'react' +import { DatePicker2, FormItem, FormButtonGroup, Submit } from '@formily/next' +import { createForm } from '@formily/core' +import { FormProvider, createSchemaField } from '@formily/react' + +const SchemaField = createSchemaField({ + components: { + DatePicker2, + FormItem, + }, +}) + +const form = createForm() + +const schema = { + type: 'object', + properties: { + date: { + title: 'Normal date', + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker2', + type: 'string', + }, + week: { + title: 'Week Selection', + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker2.WeekPicker', + type: 'string', + }, + month: { + title: 'Month Selection', + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker2.MonthPicker', + type: 'string', + }, + year: { + title: 'Year selection', + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker2.YearPicker', + type: 'string', + }, + '[startDate,endDate]': { + title: 'Date range', + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker2.RangePicker', + 'x-component-props': { + showTime: true, + }, + type: 'string', + }, + range_month: { + title: 'Month Range Selection', + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker2.RangePicker', + 'x-component-props': { + mode: 'month', + }, + type: 'string', + }, + range_year: { + name: 'range_year', + title: 'Year range selection', + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker2.RangePicker', + 'x-component-props': { + mode: 'year', + }, + type: 'string', + }, + }, +} + +export default () => ( + + + + Submit + + +) +``` + +## Pure JSX case + +```tsx +import React from 'react' +import { DatePicker2, FormItem, FormButtonGroup, Submit } from '@formily/next' +import { createForm } from '@formily/core' +import { FormProvider, Field } from '@formily/react' + +const form = createForm() + +export default () => ( + + + + + + + + + + Submit + + +) +``` + +## API + +Reference https://fusion.design/pc/component/basic/date-picker2 diff --git a/packages/next/docs/components/DatePicker2.zh-CN.md b/packages/next/docs/components/DatePicker2.zh-CN.md new file mode 100644 index 00000000000..900184687cd --- /dev/null +++ b/packages/next/docs/components/DatePicker2.zh-CN.md @@ -0,0 +1,244 @@ +# DatePicker2 + +> 日期选择器 + +## Markup Schema 案例 + +```tsx +import React from 'react' +import { DatePicker2, FormItem, FormButtonGroup, Submit } from '@formily/next' +import { createForm } from '@formily/core' +import { FormProvider, createSchemaField } from '@formily/react' + +const SchemaField = createSchemaField({ + components: { + DatePicker2, + FormItem, + }, +}) + +const form = createForm() + +export default () => ( + + + + + + + + + + + + 提交 + + +) +``` + +## JSON Schema 案例 + +```tsx +import React from 'react' +import { DatePicker2, FormItem, FormButtonGroup, Submit } from '@formily/next' +import { createForm } from '@formily/core' +import { FormProvider, createSchemaField } from '@formily/react' + +const SchemaField = createSchemaField({ + components: { + DatePicker2, + FormItem, + }, +}) + +const form = createForm() + +const schema = { + type: 'object', + properties: { + date: { + title: '普通日期', + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker2', + type: 'string', + }, + week: { + title: '周选择', + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker2.WeekPicker', + type: 'string', + }, + month: { + title: '月选择', + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker2.MonthPicker', + type: 'string', + }, + year: { + title: '年选择', + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker2.YearPicker', + type: 'string', + }, + '[startDate,endDate]': { + title: '日期范围', + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker2.RangePicker', + 'x-component-props': { + showTime: true, + }, + type: 'string', + }, + range_month: { + title: '月范围选择', + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker2.RangePicker', + 'x-component-props': { + mode: 'month', + }, + type: 'string', + }, + range_year: { + name: 'range_year', + title: '年范围选择', + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker2.RangePicker', + 'x-component-props': { + mode: 'year', + }, + type: 'string', + }, + }, +} + +export default () => ( + + + + 提交 + + +) +``` + +## 纯 JSX 案例 + +```tsx +import React from 'react' +import { DatePicker2, FormItem, FormButtonGroup, Submit } from '@formily/next' +import { createForm } from '@formily/core' +import { FormProvider, Field } from '@formily/react' + +const form = createForm() + +export default () => ( + + + + + + + + + + 提交 + + +) +``` + +## API + +参考 https://fusion.design/pc/component/basic/date-picker2 diff --git a/packages/next/src/__builtins__/moment.ts b/packages/next/src/__builtins__/moment.ts index be0ec9a6406..055645e63af 100644 --- a/packages/next/src/__builtins__/moment.ts +++ b/packages/next/src/__builtins__/moment.ts @@ -1,5 +1,9 @@ import { isArr, isEmpty, isFn } from '@formily/shared' -import moment from 'moment' +import Moment from 'moment' + +const moment = (date: any, format?: string) => { + return Moment(date?.toDate ? date.toDate() : date, format) +} export const momentable = (value: any, format?: string) => { return Array.isArray(value) diff --git a/packages/next/src/date-picker2/index.tsx b/packages/next/src/date-picker2/index.tsx new file mode 100644 index 00000000000..d10b54f18be --- /dev/null +++ b/packages/next/src/date-picker2/index.tsx @@ -0,0 +1,99 @@ +import moment from 'moment' +import { connect, mapProps, mapReadPretty } from '@formily/react' +import { DatePicker2 as NextDatePicker } from '@alifd/next' +import { + DatePickerProps as NextDatePickerProps, + RangePickerProps, +} from '@alifd/next/lib/date-picker2' +import { PreviewText } from '../preview-text' +import { + formatMomentValue, + momentable, + mapSize, + mapStatus, +} from '../__builtins__' + +type DatePickerProps = Exclude< + PickerProps, + 'value' | 'onChange' +> & { + value: string + onChange: (value: string | string[]) => void +} + +type ComposedDatePicker = React.FC & { + RangePicker?: React.FC + MonthPicker?: React.FC + YearPicker?: React.FC + WeekPicker?: React.FC + QuarterPicker?: React.FC +} + +const mapDateFormat = function (type?: 'month' | 'year' | 'week' | 'quarter') { + const getDefaultFormat = (props: DatePickerProps) => { + const _type = props['type'] || type + if (_type === 'month') { + return 'YYYY-MM' + } else if (_type === 'quarter') { + return 'YYYY-\\QQ' + } else if (_type === 'year') { + return 'YYYY' + } else if (_type === 'week') { + return 'YYYY-wo' + } + return props['showTime'] ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD' + } + + return (props: any) => { + const format = props['format'] || getDefaultFormat(props) + const onChange = props.onChange + return { + ...props, + format: format === 'YYYY-MM-DD HH:mm:ss' ? 'YYYY-MM-DD' : format, + value: momentable(props.value, format === 'YYYY-wo' ? 'YYYY-w' : format), + onChange: (value: moment.Moment | moment.Moment[]) => { + if (onChange) { + onChange(formatMomentValue(value, format)) + } + }, + } + } +} + +export const DatePicker2: ComposedDatePicker = connect( + NextDatePicker, + mapProps(mapDateFormat(), mapSize, mapStatus), + mapReadPretty(PreviewText.DatePicker) +) + +DatePicker2.RangePicker = connect( + NextDatePicker.RangePicker, + mapProps(mapDateFormat(), mapSize, mapStatus), + mapReadPretty(PreviewText.DateRangePicker) +) + +DatePicker2.YearPicker = connect( + NextDatePicker.YearPicker, + mapProps(mapDateFormat('year'), mapSize, mapStatus), + mapReadPretty(PreviewText.DatePicker) +) + +DatePicker2.MonthPicker = connect( + NextDatePicker.MonthPicker, + mapProps(mapDateFormat('month'), mapSize, mapStatus), + mapReadPretty(PreviewText.DatePicker) +) + +DatePicker2.WeekPicker = connect( + NextDatePicker.WeekPicker, + mapProps(mapDateFormat('week'), mapSize, mapStatus), + mapReadPretty(PreviewText.DatePicker) +) + +DatePicker2.QuarterPicker = connect( + NextDatePicker.QuarterPicker, + mapProps(mapDateFormat('quarter'), mapSize, mapStatus), + mapReadPretty(PreviewText.DatePicker) +) + +export default DatePicker2 diff --git a/packages/next/src/date-picker2/main.scss b/packages/next/src/date-picker2/main.scss new file mode 100644 index 00000000000..98b95942963 --- /dev/null +++ b/packages/next/src/date-picker2/main.scss @@ -0,0 +1,7 @@ +@import '~@alifd/next/lib/core/index-noreset.scss'; + +.#{$css-prefix}date-picker2 { + & > * { + width: 100%; + } +} diff --git a/packages/next/src/date-picker2/style.ts b/packages/next/src/date-picker2/style.ts new file mode 100644 index 00000000000..b3a134332a7 --- /dev/null +++ b/packages/next/src/date-picker2/style.ts @@ -0,0 +1,2 @@ +import '@alifd/next/lib/date-picker2/style' +import './main.scss' diff --git a/packages/next/src/index.ts b/packages/next/src/index.ts index 5245ef4a495..9157988aa3b 100644 --- a/packages/next/src/index.ts +++ b/packages/next/src/index.ts @@ -25,6 +25,7 @@ export * from './space' export * from './tree-select' export * from './transfer' export * from './date-picker' +export * from './date-picker2' export * from './time-picker' export * from './number-picker' export * from './switch' diff --git a/packages/next/src/style.ts b/packages/next/src/style.ts index 9dbcee90047..8b7f146cb85 100644 --- a/packages/next/src/style.ts +++ b/packages/next/src/style.ts @@ -4,6 +4,7 @@ import './array-cards/main.scss' import './array-collapse/main.scss' import './array-items/main.scss' import './array-table/main.scss' +import './date-picker2/main.scss' import './editable/main.scss' import './form-button-group/main.scss' import './form-grid/main.scss'