Skip to content

Commit

Permalink
feat: support valueType
Browse files Browse the repository at this point in the history
  • Loading branch information
@honkinglin
honkinglin committed Sep 28, 2022
1 parent 0abf086 commit 457ef87
Show file tree
Hide file tree
Showing 8 changed files with 52 additions and 15 deletions.
2 changes: 1 addition & 1 deletion src/_common
Submodule _common updated 17 files
+0 −27 .github/workflows/issue-stale-close.temp.yml
+2 −2 docs/mobile/api/avatar.md
+4 −4 docs/mobile/api/back-top.md
+1 −1 docs/mobile/api/button.md
+7 −7 docs/mobile/api/image.md
+6 −6 docs/mobile/api/pull-down-refresh.md
+18 −2 docs/mobile/api/tabs.md
+35 −0 docs/web/_design/颜色选择器 ColorPicker.md
+56 −0 docs/web/_design/骨架屏 Skeleton.md
+1 −1 docs/web/api/select.md
+33 −0 docs/web/design/color-picker.md
+54 −0 docs/web/design/skeleton.md
+33 −9 js/date-picker/format.ts
+3 −20 js/date-picker/utils.ts
+8 −14 style/mobile/README.md
+10 −10 style/web/README.md
+3 −0 style/web/components/time-picker/_index.less
9 changes: 5 additions & 4 deletions src/date-picker/DatePicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,9 +51,10 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((props, ref) => {
setCacheValue,
} = useSingle(props);

const { format, timeFormat } = getDefaultFormat({
const { format, timeFormat, valueType } = getDefaultFormat({
mode: props.mode,
format: props.format,
valueType: props.valueType,
enableTimePicker: props.enableTimePicker,
});

Expand Down Expand Up @@ -96,7 +97,7 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((props, ref) => {
if (enableTimePicker) {
setCacheValue(formatDate(date, { format }));
} else {
onChange(formatDate(date, { format }), {
onChange(formatDate(date, { format, targetFormat: valueType }), {
dayjsValue: parseToDayjs(date, format),
trigger: 'pick',
});
Expand Down Expand Up @@ -148,7 +149,7 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((props, ref) => {
function onConfirmClick() {
const nextValue = formatDate(inputValue, { format });
if (nextValue) {
onChange(formatDate(inputValue, { format }), {
onChange(formatDate(inputValue, { format, targetFormat: valueType }), {
dayjsValue: parseToDayjs(inputValue, format),
trigger: 'confirm',
});
Expand All @@ -164,7 +165,7 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((props, ref) => {
if (typeof preset === 'function') {
presetValue = preset();
}
onChange(formatDate(presetValue, { format }), {
onChange(formatDate(presetValue, { format, targetFormat: valueType }), {
dayjsValue: parseToDayjs(presetValue, format),
trigger: 'preset',
});
Expand Down
9 changes: 5 additions & 4 deletions src/date-picker/DateRangePicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,10 +58,11 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>((props,
setCacheValue,
} = useRange(props);

const { format, timeFormat } = getDefaultFormat({
const { format, timeFormat, valueType } = getDefaultFormat({
mode,
enableTimePicker,
format: props.format,
valueType: props.valueType,
});

// 记录面板是否选中过
Expand Down Expand Up @@ -150,7 +151,7 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>((props,
setCacheValue(nextValue);
setInputValue(nextValue);
} else {
onChange(formatDate(nextValue, { format }), {
onChange(formatDate(nextValue, { format, targetFormat: valueType }), {
dayjsValue: nextValue.map((v) => parseToDayjs(v, format)),
trigger: 'pick',
});
Expand Down Expand Up @@ -252,7 +253,7 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>((props,
setCacheValue(nextValue);
setInputValue(nextValue);
} else {
onChange(formatDate(nextValue, { format }), {
onChange(formatDate(nextValue, { format, targetFormat: valueType }), {
dayjsValue: nextValue.map((v) => parseToDayjs(v, format)),
trigger: 'confirm',
});
Expand All @@ -279,7 +280,7 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>((props,
if (!Array.isArray(presetValue)) {
log.error('DateRangePicker', `preset: ${preset} 预设值必须是数组!`);
} else {
onChange(formatDate(presetValue, { format }), {
onChange(formatDate(presetValue, { format, targetFormat: valueType }), {
dayjsValue: presetValue.map((p) => parseToDayjs(p, format)),
trigger: 'preset',
});
Expand Down
2 changes: 2 additions & 0 deletions src/date-picker/date-picker.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ timePickerProps | Object | - | Typescript：`TimePickerProps`，[TimePicker API
tips | TNode | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
value | String / Number / Array / Date | '' | Typescript：`DateValue` `type DateValue = string | number | Date`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N
defaultValue | String / Number / Array / Date | '' | uncontrolled property。Typescript：`DateValue` `type DateValue = string | number | Date`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N
valueType | String | - | options：'time-stamp' | 'Date' | 'YYYY' | 'YYYY-MM' | 'YYYY-MM-DD' | 'YYYY-MM-DD HH' | 'YYYY-MM-DD HH:mm' | 'YYYY-MM-DD HH:mm:ss' | 'YYYY-MM-DD HH:mm:ss:SSS' | N
onBlur | Function | | Typescript：`(context: { value: DateValue; e: FocusEvent }) => void`<br/> | N
onChange | Function | | Typescript：`(value: DateValue, context: { dayjsValue?: Dayjs, trigger?: DatePickerTriggerSource }) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts)。<br/>`import { Dayjs } from 'dayjs'`<br/><br/>`type DatePickerTriggerSource = 'confirm' | 'pick' | 'enter' | 'preset' | 'clear'`<br/> | N
onFocus | Function | | Typescript：`(context: { value: DateValue; e: FocusEvent }) => void`<br/> | N
Expand Down Expand Up @@ -60,6 +61,7 @@ timePickerProps | Object | - | Typescript：`TimePickerProps`，[TimePicker API
tips | TNode | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
value | Array | [] | Typescript：`DateRangeValue` `type DateRangeValue = Array<DateValue>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N
defaultValue | Array | [] | uncontrolled property。Typescript：`DateRangeValue` `type DateRangeValue = Array<DateValue>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N
valueType | String | - | options：'time-stamp' | 'Date' | 'YYYY' | 'YYYY-MM' | 'YYYY-MM-DD' | 'YYYY-MM-DD HH' | 'YYYY-MM-DD HH:mm' | 'YYYY-MM-DD HH:mm:ss' | 'YYYY-MM-DD HH:mm:ss:SSS' | N
onBlur | Function | | Typescript：`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`<br/> | N
onChange | Function | | Typescript：`(value: DateRangeValue, context: { dayjsValue?: Dayjs[], trigger?: DatePickerTriggerSource }) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts)。<br/>`import { Dayjs } from 'dayjs'`<br/> | N
onFocus | Function | | Typescript：`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`<br/> | N
Expand Down
4 changes: 3 additions & 1 deletion src/date-picker/date-picker.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ disableDate | Object / Array / Function | - | 禁用日期，示例：['A', 'B']
disabled | Boolean | - | 是否禁用组件 | N
enableTimePicker | Boolean | false | 是否显示时间选择 | N
firstDayOfWeek | Number | - | 第一天从星期几开始。可选项：1/2/3/4/5/6/7 | N
format | String | undefined | 用于格式化日期，全局配置默认为：'YYYY-MM-DD'，[详细文档](https://day.js.org/docs/en/display/format) | N
format | String | undefined | 仅用于格式化日期显示的格式，不影响日期值。注意和 `valueType` 的区别，`valueType`会直接决定日期值 `value` 的格式。全局配置默认为：'YYYY-MM-DD'，[详细文档](https://day.js.org/docs/en/display/format) | N
inputProps | Object | - | 透传给输入框（Input）组件的参数。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N
mode | String | date | 选择器模式。可选项：year/quarter/month/week/date | N
placeholder | String / Array | undefined | 占位符。TS 类型：`string` | N
Expand All @@ -27,6 +27,7 @@ timePickerProps | Object | - | 透传 TimePicker 组件属性。TS 类型：`Tim
tips | TNode | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
value | String / Number / Array / Date | '' | 选中值。TS 类型：`DateValue` `type DateValue = string | number | Date`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N
defaultValue | String / Number / Array / Date | '' | 选中值。非受控属性。TS 类型：`DateValue` `type DateValue = string | number | Date`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N
valueType | String | - | 用于格式化日期的值，仅支持部分格式，时间戳、日期等。⚠️ `YYYYMMDD` 这种格式不支持，请勿使用，如果希望支持可以给 `dayjs` 提个 PR。注意和 `format` 的区别，`format` 仅用于处理日期在页面中呈现的格式。可选项：'time-stamp' | 'Date' | 'YYYY' | 'YYYY-MM' | 'YYYY-MM-DD' | 'YYYY-MM-DD HH' | 'YYYY-MM-DD HH:mm' | 'YYYY-MM-DD HH:mm:ss' | 'YYYY-MM-DD HH:mm:ss:SSS' | N
onBlur | Function | | TS 类型：`(context: { value: DateValue; e: FocusEvent }) => void`<br/>当输入框失去焦点时触发 | N
onChange | Function | | TS 类型：`(value: DateValue, context: { dayjsValue?: Dayjs, trigger?: DatePickerTriggerSource }) => void`<br/>选中值发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts)。<br/>`import { Dayjs } from 'dayjs'`<br/><br/>`type DatePickerTriggerSource = 'confirm' | 'pick' | 'enter' | 'preset' | 'clear'`<br/> | N
onFocus | Function | | TS 类型：`(context: { value: DateValue; e: FocusEvent }) => void`<br/>输入框获得焦点时触发 | N
Expand Down Expand Up @@ -60,6 +61,7 @@ timePickerProps | Object | - | 透传 TimePicker 组件属性。TS 类型：`Tim
tips | TNode | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
value | Array | [] | 选中值。TS 类型：`DateRangeValue` `type DateRangeValue = Array<DateValue>`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N
defaultValue | Array | [] | 选中值。非受控属性。TS 类型：`DateRangeValue` `type DateRangeValue = Array<DateValue>`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N
valueType | String | - | 用于格式化日期的值，仅支持部分格式，时间戳、日期等。⚠️ `YYYYMMDD` 这种格式不支持，请勿使用，如果希望支持可以给 `dayjs` 提个 PR。注意和 `format` 的区别，`format` 仅用于处理日期在页面中呈现的格式。可选项：'time-stamp' | 'Date' | 'YYYY' | 'YYYY-MM' | 'YYYY-MM-DD' | 'YYYY-MM-DD HH' | 'YYYY-MM-DD HH:mm' | 'YYYY-MM-DD HH:mm:ss' | 'YYYY-MM-DD HH:mm:ss:SSS' | N
onBlur | Function | | TS 类型：`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`<br/>当输入框失去焦点时触发 | N
onChange | Function | | TS 类型：`(value: DateRangeValue, context: { dayjsValue?: Dayjs[], trigger?: DatePickerTriggerSource }) => void`<br/>选中值发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts)。<br/>`import { Dayjs } from 'dayjs'`<br/> | N
onFocus | Function | | TS 类型：`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`<br/>输入框获得焦点时触发 | N
Expand Down
5 changes: 3 additions & 2 deletions src/date-picker/hooks/useRange.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,10 @@ export default function useRange(props: TdDateRangePickerProps) {
setIsFirstValueSelected,
} = useRangeValue(props);

const { format, timeFormat } = getDefaultFormat({
const { format, timeFormat, valueType } = getDefaultFormat({
mode: props.mode,
format: props.format,
valueType: props.valueType,
enableTimePicker: props.enableTimePicker,
});

Expand Down Expand Up @@ -100,7 +101,7 @@ export default function useRange(props: TdDateRangePickerProps) {

setPopupVisible(false);
if (isValidDate(newVal, format)) {
onChange(formatDate(newVal, { format }) as DateValue[], {
onChange(formatDate(newVal, { format, targetFormat: valueType }) as DateValue[], {
dayjsValue: newVal.map((v) => parseToDayjs(v, format)),
trigger: 'enter',
});
Expand Down
8 changes: 6 additions & 2 deletions src/date-picker/hooks/useSingle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,10 @@ export default function useSingleInput(props: TdDatePickerProps) {
const { CalendarIcon } = useGlobalIcon({ CalendarIcon: TdCalendarIcon });
const name = `${classPrefix}-date-picker`;

const { format, timeFormat } = getDefaultFormat({
const { format, valueType, timeFormat } = getDefaultFormat({
mode: props.mode,
format: props.format,
valueType: props.valueType,
enableTimePicker: props.enableTimePicker,
});

Expand Down Expand Up @@ -82,7 +83,10 @@ export default function useSingleInput(props: TdDatePickerProps) {

setPopupVisible(false);
if (isValidDate(val, format)) {
onChange(formatDate(val, { format }), { dayjsValue: parseToDayjs(val, format), trigger: 'enter' });
onChange(formatDate(val, { format, targetFormat: valueType }), {
dayjsValue: parseToDayjs(val, format),
trigger: 'enter',
});
} else if (isValidDate(value, format)) {
setInputValue(formatDate(value, { format }));
} else {
Expand Down
28 changes: 27 additions & 1 deletion src/date-picker/type.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export interface TdDatePickerProps {
*/
firstDayOfWeek?: number;
/**
* 用于格式化日期，全局配置默认为：'YYYY-MM-DD'，[详细文档](https://day.js.org/docs/en/display/format)
* 仅用于格式化日期显示的格式，不影响日期值。注意和 `valueType` 的区别，`valueType`会直接决定日期值 `value` 的格式。全局配置默认为：'YYYY-MM-DD'，[详细文档](https://day.js.org/docs/en/display/format)
*/
format?: string;
/**
Expand Down Expand Up @@ -100,6 +100,19 @@ export interface TdDatePickerProps {
* @default ''
*/
defaultValue?: DateValue;
/**
* 用于格式化日期的值，仅支持部分格式，时间戳、日期等。⚠️ `YYYYMMDD` 这种格式不支持，请勿使用，如果希望支持可以给 `dayjs` 提个 PR。注意和 `format` 的区别，`format` 仅用于处理日期在页面中呈现的格式
*/
valueType?:
| 'time-stamp'
| 'Date'
| 'YYYY'
| 'YYYY-MM'
| 'YYYY-MM-DD'
| 'YYYY-MM-DD HH'
| 'YYYY-MM-DD HH:mm'
| 'YYYY-MM-DD HH:mm:ss'
| 'YYYY-MM-DD HH:mm:ss:SSS';
/**
* 当输入框失去焦点时触发
*/
Expand Down Expand Up @@ -217,6 +230,19 @@ export interface TdDateRangePickerProps {
* @default []
*/
defaultValue?: DateRangeValue;
/**
* 用于格式化日期的值，仅支持部分格式，时间戳、日期等。⚠️ `YYYYMMDD` 这种格式不支持，请勿使用，如果希望支持可以给 `dayjs` 提个 PR。注意和 `format` 的区别，`format` 仅用于处理日期在页面中呈现的格式
*/
valueType?:
| 'time-stamp'
| 'Date'
| 'YYYY'
| 'YYYY-MM'
| 'YYYY-MM-DD'
| 'YYYY-MM-DD HH'
| 'YYYY-MM-DD HH:mm'
| 'YYYY-MM-DD HH:mm:ss'
| 'YYYY-MM-DD HH:mm:ss:SSS';
/**
* 当输入框失去焦点时触发
*/
Expand Down

0 comments on commit 457ef87

Please sign in to comment.