From cc87034c14cb150ded471e47fa3ebe1666771397 Mon Sep 17 00:00:00 2001 From: inottn Date: Wed, 2 Oct 2024 21:18:45 +0800 Subject: [PATCH] feat(DatePicker): filter support values param to help get current values (#13147) --- packages/vant/src/date-picker/DatePicker.tsx | 43 ++++++++++++------- packages/vant/src/date-picker/README.md | 2 +- packages/vant/src/date-picker/README.zh-CN.md | 2 +- packages/vant/src/date-picker/utils.ts | 17 +++----- packages/vant/src/time-picker/TimePicker.tsx | 2 - 5 files changed, 34 insertions(+), 32 deletions(-) diff --git a/packages/vant/src/date-picker/DatePicker.tsx b/packages/vant/src/date-picker/DatePicker.tsx index 47a4eca11..f5179a39f 100644 --- a/packages/vant/src/date-picker/DatePicker.tsx +++ b/packages/vant/src/date-picker/DatePicker.tsx @@ -69,18 +69,9 @@ export default defineComponent({ const currentValues = ref(props.modelValue); const updatedByExternalSources = ref(false); const pickerRef = ref(); - - const genYearOptions = () => { - const minYear = props.minDate.getFullYear(); - const maxYear = props.maxDate.getFullYear(); - return genOptions( - minYear, - maxYear, - 'year', - props.formatter, - props.filter, - ); - }; + const computedValues = computed(() => + updatedByExternalSources.value ? props.modelValue : currentValues.value, + ); const isMinYear = (year: number) => year === props.minDate.getFullYear(); const isMaxYear = (year: number) => year === props.maxDate.getFullYear(); @@ -92,9 +83,8 @@ export default defineComponent({ const getValue = (type: DatePickerColumnType) => { const { minDate, columnsType } = props; const index = columnsType.indexOf(type); - const value = updatedByExternalSources.value - ? props.modelValue[index] - : currentValues.value[index]; + const value = computedValues.value[index]; + if (value) { return +value; } @@ -109,6 +99,19 @@ export default defineComponent({ } }; + const genYearOptions = () => { + const minYear = props.minDate.getFullYear(); + const maxYear = props.maxDate.getFullYear(); + return genOptions( + minYear, + maxYear, + 'year', + props.formatter, + props.filter, + computedValues.value, + ); + }; + const genMonthOptions = () => { const year = getValue('year'); const minMonth = isMinYear(year) ? props.minDate.getMonth() + 1 : 1; @@ -120,6 +123,7 @@ export default defineComponent({ 'month', props.formatter, props.filter, + computedValues.value, ); }; @@ -133,7 +137,14 @@ export default defineComponent({ ? props.maxDate.getDate() : getMonthEndDay(year, month); - return genOptions(minDate, maxDate, 'day', props.formatter, props.filter); + return genOptions( + minDate, + maxDate, + 'day', + props.formatter, + props.filter, + computedValues.value, + ); }; const confirm = () => pickerRef.value?.confirm(); diff --git a/packages/vant/src/date-picker/README.md b/packages/vant/src/date-picker/README.md index fbd249ffb..9d5e786da 100644 --- a/packages/vant/src/date-picker/README.md +++ b/packages/vant/src/date-picker/README.md @@ -178,7 +178,7 @@ export default { | show-toolbar | Whether to show toolbar | _boolean_ | `true` | | loading | Whether to show loading prompt | _boolean_ | `false` | | readonly | Whether to be readonly | _boolean_ | `false` | -| filter | Option filter | _(type: string, options: PickerOption[]) => PickerOption[]_ | - | +| filter | Option filter | _(type: string, options: PickerOption[], values: string[]) => PickerOption[]_ | - | | formatter | Option formatter | _(type: string, option: PickerOption) => PickerOption_ | - | | option-height | Option height, supports `px` `vw` `vh` `rem` unit, default `px` | _number \| string_ | `44` | | visible-option-num | Count of visible columns | _number \| string_ | `6` | diff --git a/packages/vant/src/date-picker/README.zh-CN.md b/packages/vant/src/date-picker/README.zh-CN.md index 0cef30a83..e0a28f88d 100644 --- a/packages/vant/src/date-picker/README.zh-CN.md +++ b/packages/vant/src/date-picker/README.zh-CN.md @@ -184,7 +184,7 @@ export default { | show-toolbar | 是否显示顶部栏 | _boolean_ | `true` | | loading | 是否显示加载状态 | _boolean_ | `false` | | readonly | 是否为只读状态，只读状态下无法切换选项 | _boolean_ | `false` | -| filter | 选项过滤函数 | _(type: string, options: PickerOption[]) => PickerOption[]_ | - | +| filter | 选项过滤函数 | _(type: string, options: PickerOption[], values: string[]) => PickerOption[]_ | - | | formatter | 选项格式化函数 | _(type: string, option: PickerOption) => PickerOption_ | - | | option-height | 选项高度，支持 `px` `vw` `vh` `rem` 单位，默认 `px` | _number \| string_ | `44` | | visible-option-num | 可见的选项个数 | _number \| string_ | `6` | diff --git a/packages/vant/src/date-picker/utils.ts b/packages/vant/src/date-picker/utils.ts index f25337d38..4e403e955 100644 --- a/packages/vant/src/date-picker/utils.ts +++ b/packages/vant/src/date-picker/utils.ts @@ -1,10 +1,4 @@ -import { - extend, - padZero, - makeArrayProp, - clamp, - type RequiredParams, -} from '../utils'; +import { extend, padZero, makeArrayProp, clamp } from '../utils'; import { pickerSharedProps } from '../picker/Picker'; import type { PropType } from 'vue'; import type { PickerOption } from '../picker'; @@ -12,9 +6,8 @@ import type { PickerOption } from '../picker'; type Filter = ( columnType: string, options: PickerOption[], - values?: string[], + values: string[], ) => PickerOption[]; -export type TimeFilter = RequiredParams; type Formatter = (type: string, option: PickerOption) => PickerOption; export const sharedProps = extend({}, pickerSharedProps, { @@ -53,8 +46,8 @@ export const genOptions = ( max: number, type: T, formatter: Formatter, - filter?: Filter | TimeFilter, - values?: string[], + filter: Filter | undefined, + values: string[], ) => { const options = times(max - min + 1, (index) => { const value = padZero(min + index); @@ -63,7 +56,7 @@ export const genOptions = ( value, }); }); - return filter ? filter(type, options, values!) : options; + return filter ? filter(type, options, values) : options; }; export const formatValueRange = (values: string[], columns: PickerOption[][]) => diff --git a/packages/vant/src/time-picker/TimePicker.tsx b/packages/vant/src/time-picker/TimePicker.tsx index ef49d3a33..0d3ab641f 100644 --- a/packages/vant/src/time-picker/TimePicker.tsx +++ b/packages/vant/src/time-picker/TimePicker.tsx @@ -14,7 +14,6 @@ import { genOptions, pickerInheritKeys, sharedProps, - type TimeFilter, } from '../date-picker/utils'; import { pick, @@ -57,7 +56,6 @@ export const timePickerProps = extend({}, sharedProps, { type: Array as PropType, default: () => ['hour', 'minute'], }, - filter: Function as PropType, }); export type TimePickerProps = ExtractPropTypes;