From c061412138e41a07a87110692621517eac814428 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Wed, 19 Jan 2022 10:13:22 +0800 Subject: [PATCH] refactor(Picker): rename item-height to option-height --- packages/vant/src/area/Area.tsx | 4 +- packages/vant/src/area/README.md | 4 +- packages/vant/src/area/README.zh-CN.md | 4 +- packages/vant/src/datetime-picker/README.md | 4 +- .../vant/src/datetime-picker/README.zh-CN.md | 4 +- packages/vant/src/picker/Picker.tsx | 18 ++-- packages/vant/src/picker/PickerColumn.tsx | 86 +++++++++---------- packages/vant/src/picker/README.md | 4 +- packages/vant/src/picker/README.zh-CN.md | 4 +- .../test/__snapshots__/index.spec.tsx.snap | 2 +- packages/vant/src/picker/test/index.spec.tsx | 8 +- 11 files changed, 69 insertions(+), 73 deletions(-) diff --git a/packages/vant/src/area/Area.tsx b/packages/vant/src/area/Area.tsx index 629da5c72..022d6c060 100644 --- a/packages/vant/src/area/Area.tsx +++ b/packages/vant/src/area/Area.tsx @@ -45,9 +45,9 @@ const INHERIT_PROPS = [ 'title', 'loading', 'readonly', - 'itemHeight', + 'optionHeight', 'swipeDuration', - 'visibleItemCount', + 'visibleOptionNum', 'cancelButtonText', 'confirmButtonText', ] as const; diff --git a/packages/vant/src/area/README.md b/packages/vant/src/area/README.md index 014a1b11a..0fab4506d 100644 --- a/packages/vant/src/area/README.md +++ b/packages/vant/src/area/README.md @@ -117,9 +117,9 @@ To have a selected value，simply pass the `code` of target area to `value` prop | columns-placeholder | Placeholder of columns | _string[]_ | `[]` | | loading | Whether to show loading prompt | _boolean_ | `false` | | readonly | Whether to be readonly | _boolean_ | `false` | -| item-height | Option height, supports `px` `vw` `vh` `rem` unit, default `px` | _number \| string_ | `44` | +| option-height | Option height, supports `px` `vw` `vh` `rem` unit, default `px` | _number \| string_ | `44` | | columns-num | Level of picker | _number \| string_ | `3` | -| visible-item-count | Count of visible columns | _number \| string_ | `6` | +| visible-option-num | Count of visible columns | _number \| string_ | `6` | | swipe-duration | Duration of the momentum animation，unit `ms` | _number \| string_ | `1000` | | is-oversea-code | The method to validate oversea code | _() => boolean_ | - | diff --git a/packages/vant/src/area/README.zh-CN.md b/packages/vant/src/area/README.zh-CN.md index cc9bc0edc..5d085a16a 100644 --- a/packages/vant/src/area/README.zh-CN.md +++ b/packages/vant/src/area/README.zh-CN.md @@ -119,9 +119,9 @@ export default { | columns-placeholder | 列占位提示文字 | _string[]_ | `[]` | | loading | 是否显示加载状态 | _boolean_ | `false` | | readonly | 是否为只读状态，只读状态下无法切换选项 | _boolean_ | `false` | -| item-height | 选项高度，支持 `px` `vw` `vh` `rem` 单位，默认 `px` | _number \| string_ | `44` | +| option-height | 选项高度，支持 `px` `vw` `vh` `rem` 单位，默认 `px` | _number \| string_ | `44` | | columns-num | 显示列数，3-省市区，2-省市，1-省 | _number \| string_ | `3` | -| visible-item-count | 可见的选项个数 | _number \| string_ | `6` | +| visible-option-num | 可见的选项个数 | _number \| string_ | `6` | | swipe-duration | 快速滑动时惯性滚动的时长，单位 `ms` | _number \| string_ | `1000` | | is-oversea-code | 根据地区码校验海外地址，海外地址会划分至单独的分类 | _() => boolean_ | - | diff --git a/packages/vant/src/datetime-picker/README.md b/packages/vant/src/datetime-picker/README.md index cf049b6d9..d95713ab6 100644 --- a/packages/vant/src/datetime-picker/README.md +++ b/packages/vant/src/datetime-picker/README.md @@ -291,8 +291,8 @@ export default { | filter | Option filter | _(type: string, values: string[]) => string[]_ | - | | formatter | Option text formatter | _(type: string, value: string) => string_ | - | | columns-order | Array for ordering columns, where item can be set to
`year`, `month`, `day`, `hour` and `minute` | _string[]_ | - | -| item-height | Option height, supports `px` `vw` `vh` `rem` unit, default `px` | _number \| string_ | `44` | -| visible-item-count | Count of visible columns | _number \| string_ | `6` | +| 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` | | swipe-duration | Duration of the momentum animation，unit `ms` | _number \| string_ | `1000` | ### DatePicker Props diff --git a/packages/vant/src/datetime-picker/README.zh-CN.md b/packages/vant/src/datetime-picker/README.zh-CN.md index fee998c13..ad99fae8f 100644 --- a/packages/vant/src/datetime-picker/README.zh-CN.md +++ b/packages/vant/src/datetime-picker/README.zh-CN.md @@ -300,8 +300,8 @@ export default { | filter | 选项过滤函数 | _(type: string, values: string[]) => string[]_ | - | | formatter | 选项格式化函数 | _(type: string, value: string) => string_ | - | | columns-order | 自定义列排序数组, 子项可选值为
`year`、`month`、`day`、`hour`、`minute` | _string[]_ | - | -| item-height | 选项高度，支持 `px` `vw` `vh` `rem` 单位，默认 `px` | _number \| string_ | `44` | -| visible-item-count | 可见的选项个数 | _number \| string_ | `6` | +| option-height | 选项高度，支持 `px` `vw` `vh` `rem` 单位，默认 `px` | _number \| string_ | `44` | +| visible-option-num | 可见的选项个数 | _number \| string_ | `6` | | swipe-duration | 快速滑动时惯性滚动的时长，单位`ms` | _number \| string_ | `1000` | ### DatePicker Props diff --git a/packages/vant/src/picker/Picker.tsx b/packages/vant/src/picker/Picker.tsx index f864c9e7c..fbc28fa3d 100644 --- a/packages/vant/src/picker/Picker.tsx +++ b/packages/vant/src/picker/Picker.tsx @@ -34,10 +34,10 @@ import Column, { PICKER_KEY } from './PickerColumn'; import type { PickerColumn, PickerExpose, + PickerOption, PickerFieldNames, PickerToolbarPosition, } from './types'; -import { PickerOption } from '.'; const [name, bem, t] = createNamespace('picker'); @@ -46,10 +46,10 @@ export const pickerSharedProps = { loading: Boolean, readonly: Boolean, allowHtml: Boolean, - itemHeight: makeNumericProp(44), + optionHeight: makeNumericProp(44), showToolbar: truthProp, swipeDuration: makeNumericProp(1000), - visibleItemCount: makeNumericProp(6), + visibleOptionNum: makeNumericProp(6), cancelButtonText: String, confirmButtonText: String, }; @@ -93,7 +93,7 @@ export default defineComponent({ linkChildren(); - const itemHeight = computed(() => unitToPx(props.itemHeight)); + const optionHeight = computed(() => unitToPx(props.optionHeight)); const dataType = computed(() => { const firstColumn = props.columns[0]; @@ -227,18 +227,18 @@ export default defineComponent({ readonly={props.readonly} valueKey={valueKey} allowHtml={props.allowHtml} - itemHeight={itemHeight.value} + optionHeight={optionHeight.value} swipeDuration={props.swipeDuration} - visibleItemCount={props.visibleItemCount} + visibleOptionNum={props.visibleOptionNum} onChange={(value: number | string) => onChange(value, columnIndex)} /> )); const renderMask = (wrapHeight: number) => { if (hasOptions.value) { - const frameStyle = { height: `${itemHeight.value}px` }; + const frameStyle = { height: `${optionHeight.value}px` }; const maskStyle = { - backgroundSize: `100% ${(wrapHeight - itemHeight.value) / 2}px`, + backgroundSize: `100% ${(wrapHeight - optionHeight.value) / 2}px`, }; return [
, @@ -251,7 +251,7 @@ export default defineComponent({ }; const renderColumns = () => { - const wrapHeight = itemHeight.value * +props.visibleItemCount; + const wrapHeight = optionHeight.value * +props.visibleOptionNum; const columnsStyle = { height: `${wrapHeight}px` }; return (
void); const wrapper = ref(); - - const state = reactive({ - offset: 0, - duration: 0, - }); - + const currentOffset = ref(0); + const currentDuration = ref(0); const touch = useTouch(); const count = () => props.options.length; const baseOffset = () => - (props.itemHeight * (+props.visibleItemCount - 1)) / 2; + (props.optionHeight * (+props.visibleOptionNum - 1)) / 2; const adjustIndex = (index: number) => { index = clamp(index, 0, count()); @@ -89,7 +85,7 @@ export default defineComponent({ const updateValueByIndex = (index: number) => { index = adjustIndex(index); - const offset = -index * props.itemHeight; + const offset = -index * props.optionHeight; const trigger = () => { const { value } = props.options[index]; if (value !== props.value) { @@ -98,13 +94,13 @@ export default defineComponent({ }; // trigger the change event after transitionend when moving - if (moving && offset !== state.offset) { + if (moving && offset !== currentOffset.value) { transitionEndTrigger = trigger; } else { trigger(); } - state.offset = offset; + currentOffset.value = offset; }; const onClickItem = (index: number) => { @@ -113,27 +109,28 @@ export default defineComponent({ } transitionEndTrigger = null; - state.duration = DEFAULT_DURATION; + currentDuration.value = DEFAULT_DURATION; updateValueByIndex(index); }; const getIndexByOffset = (offset: number) => - clamp(Math.round(-offset / props.itemHeight), 0, count() - 1); + clamp(Math.round(-offset / props.optionHeight), 0, count() - 1); const momentum = (distance: number, duration: number) => { const speed = Math.abs(distance / duration); - distance = state.offset + (speed / 0.003) * (distance < 0 ? -1 : 1); + distance = + currentOffset.value + (speed / 0.003) * (distance < 0 ? -1 : 1); const index = getIndexByOffset(distance); - state.duration = +props.swipeDuration; + currentDuration.value = +props.swipeDuration; updateValueByIndex(index); }; const stopMomentum = () => { moving = false; - state.duration = 0; + currentDuration.value = 0; if (transitionEndTrigger) { transitionEndTrigger(); @@ -150,13 +147,11 @@ export default defineComponent({ if (moving) { const translateY = getElementTranslateY(wrapper.value!); - state.offset = Math.min(0, translateY - baseOffset()); - startOffset = state.offset; - } else { - startOffset = state.offset; + currentOffset.value = Math.min(0, translateY - baseOffset()); } - state.duration = 0; + currentDuration.value = 0; + startOffset = currentOffset.value; touchStartTime = Date.now(); momentumOffset = startOffset; transitionEndTrigger = null; @@ -174,16 +169,16 @@ export default defineComponent({ preventDefault(event, true); } - state.offset = clamp( + currentOffset.value = clamp( startOffset + touch.deltaY.value, - -(count() * props.itemHeight), - props.itemHeight + -(count() * props.optionHeight), + props.optionHeight ); const now = Date.now(); - if (now - touchStartTime > MOMENTUM_LIMIT_TIME) { + if (now - touchStartTime > MOMENTUM_TIME) { touchStartTime = now; - momentumOffset = state.offset; + momentumOffset = currentOffset.value; } }; @@ -192,19 +187,18 @@ export default defineComponent({ return; } - const distance = state.offset - momentumOffset; + const distance = currentOffset.value - momentumOffset; const duration = Date.now() - touchStartTime; - const allowMomentum = - duration < MOMENTUM_LIMIT_TIME && - Math.abs(distance) > MOMENTUM_LIMIT_DISTANCE; + const startMomentum = + duration < MOMENTUM_TIME && Math.abs(distance) > MOMENTUM_DISTANCE; - if (allowMomentum) { + if (startMomentum) { momentum(distance, duration); return; } - const index = getIndexByOffset(state.offset); - state.duration = DEFAULT_DURATION; + const index = getIndexByOffset(currentOffset.value); + currentDuration.value = DEFAULT_DURATION; updateValueByIndex(index); // compatible with desktop scenario @@ -216,7 +210,7 @@ export default defineComponent({ const renderOptions = () => { const optionStyle = { - height: `${props.itemHeight}px`, + height: `${props.optionHeight}px`, }; return props.options.map((option, index) => { @@ -256,8 +250,8 @@ export default defineComponent({ const index = props.options.findIndex( (option) => option[props.valueKey] === value ); - const offset = -adjustIndex(index) * props.itemHeight; - state.offset = offset; + const offset = -adjustIndex(index) * props.optionHeight; + currentOffset.value = offset; } ); @@ -272,9 +266,11 @@ export default defineComponent({
    `; -exports[`set rem item-height 1`] = ` +exports[`set rem option-height 1`] = `