diff --git a/packages/vant/src/date-picker/utils.ts b/packages/vant/src/date-picker/utils.ts index 41c7cdf75..9ef1a778d 100644 --- a/packages/vant/src/date-picker/utils.ts +++ b/packages/vant/src/date-picker/utils.ts @@ -1,9 +1,20 @@ -import { extend, padZero, makeArrayProp, clamp } from '../utils'; +import { + extend, + padZero, + makeArrayProp, + clamp, + type RequiredParams, +} from '../utils'; import { pickerSharedProps } from '../picker/Picker'; import type { PropType } from 'vue'; import type { PickerOption } from '../picker'; -type Filter = (columnType: string, options: PickerOption[]) => PickerOption[]; +type Filter = ( + columnType: string, + options: PickerOption[], + values?: string[] +) => PickerOption[]; +export type TimeFilter = RequiredParams; type Formatter = (type: string, option: PickerOption) => PickerOption; export const sharedProps = extend({}, pickerSharedProps, { @@ -42,7 +53,8 @@ export const genOptions = ( max: number, type: T, formatter: Formatter, - filter?: Filter + filter?: Filter | TimeFilter, + values?: string[] ) => { const options = times(max - min + 1, (index) => { const value = padZero(min + index); @@ -51,7 +63,7 @@ export const genOptions = ( value, }); }); - return filter ? filter(type, options) : options; + return filter ? filter(type, options, values!) : options; }; export const formatValueRange = (values: string[], columns: PickerOption[][]) => diff --git a/packages/vant/src/time-picker/README.md b/packages/vant/src/time-picker/README.md index 20fb6eb71..fc5ec668a 100644 --- a/packages/vant/src/time-picker/README.md +++ b/packages/vant/src/time-picker/README.md @@ -159,6 +159,48 @@ export default { }; ``` +### Advanced Usage + +The third parameter of the `filter` function can get the currently selected time, which can be used to filter unwanted times more flexibly when using the uncontrolled mode. + +```html + +``` + +```js +export default { + setup() { + const filter = (type, options, values) => { + const hour = +values[0]; + + if (type === 'hour') { + return options.filter( + (option) => Number(option.value) >= 8 && Number(option.value) <= 18 + ); + } + + if (type === 'minute') { + options = options.filter((option) => Number(option.value) % 10 === 0); + + if (hour === 8) { + return options.filter((option) => Number(option.value) >= 40); + } + + if (hour === 18) { + return options.filter((option) => Number(option.value) <= 20); + } + } + + return options; + }; + + return { + filter, + }; + }, +}; +``` + ## API ### Props @@ -179,7 +221,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 text 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/time-picker/README.zh-CN.md b/packages/vant/src/time-picker/README.zh-CN.md index 35f3394b0..11cc8a856 100644 --- a/packages/vant/src/time-picker/README.zh-CN.md +++ b/packages/vant/src/time-picker/README.zh-CN.md @@ -160,6 +160,48 @@ export default { }; ``` +### 高级用法 + +`filter` 函数的第三个参数能获取到当前选择的时间，这在使用非受控模式时，可以更灵活地过滤掉不需要的时间。 + +```html + +``` + +```js +export default { + setup() { + const filter = (type, options, values) => { + const hour = +values[0]; + + if (type === 'hour') { + return options.filter( + (option) => Number(option.value) >= 8 && Number(option.value) <= 18 + ); + } + + if (type === 'minute') { + options = options.filter((option) => Number(option.value) % 10 === 0); + + if (hour === 8) { + return options.filter((option) => Number(option.value) >= 40); + } + + if (hour === 18) { + return options.filter((option) => Number(option.value) <= 20); + } + } + + return options; + }; + + return { + filter, + }; + }, +}; +``` + ## API ### Props @@ -180,7 +222,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/time-picker/TimePicker.tsx b/packages/vant/src/time-picker/TimePicker.tsx index 690739dda..5c0a4e060 100644 --- a/packages/vant/src/time-picker/TimePicker.tsx +++ b/packages/vant/src/time-picker/TimePicker.tsx @@ -20,6 +20,7 @@ import { sharedProps, pickerInheritKeys, formatValueRange, + type TimeFilter, } from '../date-picker/utils'; // Components @@ -40,6 +41,7 @@ export const timePickerProps = extend({}, sharedProps, { type: Array as PropType, default: () => ['hour', 'minute'], }, + filter: Function as PropType, }); export type TimePickerProps = ExtractPropTypes; @@ -64,7 +66,8 @@ export default defineComponent({ +props.maxHour, type, formatter, - filter + filter, + currentValues.value ); case 'minute': return genOptions( @@ -72,7 +75,8 @@ export default defineComponent({ +props.maxMinute, type, formatter, - filter + filter, + currentValues.value ); case 'second': return genOptions( @@ -80,7 +84,8 @@ export default defineComponent({ +props.maxSecond, type, formatter, - filter + filter, + currentValues.value ); default: if (process.env.NODE_ENV !== 'production') { diff --git a/packages/vant/src/time-picker/demo/index.vue b/packages/vant/src/time-picker/demo/index.vue index 69bb059a9..1fcd1be9e 100644 --- a/packages/vant/src/time-picker/demo/index.vue +++ b/packages/vant/src/time-picker/demo/index.vue @@ -41,6 +41,34 @@ const filter = (type: string, options: PickerOption[]) => { return options; }; +const timeFilter = ( + type: string, + options: PickerOption[], + values: string[] +) => { + const hour = +values[0]; + + if (type === 'hour') { + return options.filter( + (option) => Number(option.value) >= 8 && Number(option.value) <= 18 + ); + } + + if (type === 'minute') { + options = options.filter((option) => Number(option.value) % 10 === 0); + + if (hour === 8) { + return options.filter((option) => Number(option.value) >= 40); + } + + if (hour === 18) { + return options.filter((option) => Number(option.value) <= 20); + } + } + + return options; +}; + const formatter = (type: string, option: PickerOption) => { if (type === 'hour') { option.text += t('hour'); @@ -91,4 +119,8 @@ const formatter = (type: string, option: PickerOption) => { :filter="filter" /> + + + + diff --git a/packages/vant/src/time-picker/test/__snapshots__/demo-ssr.spec.ts.snap b/packages/vant/src/time-picker/test/__snapshots__/demo-ssr.spec.ts.snap index 33f993fd9..2c921532b 100644 --- a/packages/vant/src/time-picker/test/__snapshots__/demo-ssr.spec.ts.snap +++ b/packages/vant/src/time-picker/test/__snapshots__/demo-ssr.spec.ts.snap @@ -3530,4 +3530,206 @@ exports[`should render demo and match snapshot 1`] = ` +
+ +
+
+ + +
+ Choose Time +
+ +
+
+ +
+
    + +
  • +
    + 08 +
    +
    • +
  • +
    + 09 +
    +
    • +
  • +
    + 10 +
    +
    • +
  • +
    + 11 +
    +
    • +
  • +
    + 12 +
    +
    • +
  • +
    + 13 +
    +
    • +
  • +
    + 14 +
    +
    • +
  • +
    + 15 +
    +
    • +
  • +
    + 16 +
    +
    • +
  • +
    + 17 +
    +
    • +
  • +
    + 18 +
    +
    • +
+
+
+
    + +
  • +
    + 00 +
    +
    • +
  • +
    + 10 +
    +
    • +
  • +
    + 20 +
    +
    • +
  • +
    + 30 +
    +
    • +
  • +
    + 40 +
    +
    • +
  • +
    + 50 +
    +
    • +
+
+ +
+
+
+
+
+
+
`; diff --git a/packages/vant/src/time-picker/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/time-picker/test/__snapshots__/demo.spec.ts.snap index aa6469f76..2c69e792d 100644 --- a/packages/vant/src/time-picker/test/__snapshots__/demo.spec.ts.snap +++ b/packages/vant/src/time-picker/test/__snapshots__/demo.spec.ts.snap @@ -3498,4 +3498,164 @@ exports[`should render demo and match snapshot 1`] = ` +
+
+
+ +
+ Choose Time +
+ +
+
+
+
    +
  • +
    + 08 +
    +
    • +
  • +
    + 09 +
    +
    • +
  • +
    + 10 +
    +
    • +
  • +
    + 11 +
    +
    • +
  • +
    + 12 +
    +
    • +
  • +
    + 13 +
    +
    • +
  • +
    + 14 +
    +
    • +
  • +
    + 15 +
    +
    • +
  • +
    + 16 +
    +
    • +
  • +
    + 17 +
    +
    • +
  • +
    + 18 +
    +
    • +
+
+
+
    +
  • +
    + 40 +
    +
    • +
  • +
    + 50 +
    +
    • +
+
+
+
+
+
+
+
+
`; diff --git a/packages/vant/src/time-picker/test/index.spec.tsx b/packages/vant/src/time-picker/test/index.spec.tsx index 4b9f49b44..c3dc38107 100644 --- a/packages/vant/src/time-picker/test/index.spec.tsx +++ b/packages/vant/src/time-picker/test/index.spec.tsx @@ -1,4 +1,5 @@ import TimePicker from '../TimePicker'; +import { Picker } from '../../picker'; import { mount } from '../../../test'; import type { PickerOption } from '../../picker'; @@ -7,6 +8,32 @@ function filter(type: string, options: PickerOption[]): PickerOption[] { return options.filter((option) => Number(option.value) % mod === 0); } +function timeRangeFilter( + type: string, + options: PickerOption[], + values: string[] +): PickerOption[] { + const hour = +values[0]; + + if (type === 'hour') { + return options.filter( + (option) => Number(option.value) >= 8 && Number(option.value) <= 18 + ); + } + + if (type === 'minute') { + if (hour === 8) { + return options.filter((option) => Number(option.value) >= 40); + } + + if (hour === 18) { + return options.filter((option) => Number(option.value) <= 20); + } + } + + return options; +} + test('should format initial value correctly', () => { const onUpdate = jest.fn(); mount(TimePicker, { @@ -86,6 +113,31 @@ test('should filter options when using filter prop', () => { expect(wrapper.html()).toMatchSnapshot(); }); +test('should filter options when using filter prop to filter a time range', async () => { + const wrapper = mount(TimePicker, { + props: { + filter: timeRangeFilter, + modelValue: ['08', '40'], + }, + }); + + const picker = wrapper.findComponent(Picker); + let columns = picker.props('columns'); + expect(columns[0].length).toEqual(11); + expect(columns[1].length).toEqual(20); + expect(columns[0][0].value).toEqual('08'); + expect(columns[1][0].value).toEqual('40'); + + await wrapper.setProps({ modelValue: ['09', '00'] }); + columns = picker.props('columns'); + expect(columns[1].length).toEqual(60); + + await wrapper.setProps({ modelValue: ['18', '00'] }); + columns = picker.props('columns'); + expect(columns[1].length).toEqual(21); + expect(columns[1][20].value).toEqual('20'); +}); + test('should format options correctly when using formatter prop', async () => { const formatter = (type: string, option: PickerOption): PickerOption => { option.text = `${option.text} ${type}`; diff --git a/packages/vant/src/utils/basic.ts b/packages/vant/src/utils/basic.ts index 1090f19b1..88c5aa111 100644 --- a/packages/vant/src/utils/basic.ts +++ b/packages/vant/src/utils/basic.ts @@ -25,6 +25,10 @@ export function get(object: any, path: string): any { export type Writeable = { -readonly [P in keyof T]: T[P] }; +export type RequiredParams = T extends (...args: infer P) => infer R + ? (...args: { [K in keyof P]-?: NonNullable }) => R + : never; + export function pick( obj: T, keys: ReadonlyArray,