From 642b8fd5d4b3738f9be275aeb33b386c616bc6ab Mon Sep 17 00:00:00 2001 From: qiang Date: Wed, 12 May 2021 20:35:36 +0800 Subject: [PATCH] fix: picker-view state --- .../components/picker-view-column/index.tsx | 24 ++++---- .../src/components/picker-view/index.tsx | 26 +++----- packages/uni-h5/dist/uni-h5.cjs.js | 60 ++++++++----------- packages/uni-h5/dist/uni-h5.es.js | 60 ++++++++----------- 4 files changed, 73 insertions(+), 97 deletions(-) diff --git a/packages/uni-components/src/components/picker-view-column/index.tsx b/packages/uni-components/src/components/picker-view-column/index.tsx index 5b45de67f..74bc7fab4 100644 --- a/packages/uni-components/src/components/picker-view-column/index.tsx +++ b/packages/uni-components/src/components/picker-view-column/index.tsx @@ -22,8 +22,8 @@ import { flatVNode } from '../../helpers/flatVNode' import ResizeSensor from '../resize-sensor/index' import { GetPickerViewColumn, - GetPickerViewProps, - GetPickerViewState, + Props as PickerViewProps, + State as PickerViewState, } from '../picker-view' let scopedIndex = 0 @@ -100,15 +100,8 @@ export default /*#__PURE__*/ defineComponent({ ? getPickerViewColumn(instance) : ref(0) - const getPickerViewProps: GetPickerViewProps = inject( - 'getPickerViewProps' - ) as GetPickerViewProps - const pickerViewProps = getPickerViewProps() - - const getPickerViewState: GetPickerViewState = inject( - 'getPickerViewState' - ) as GetPickerViewState - const pickerViewState = getPickerViewState() + const pickerViewProps = inject('pickerViewProps') as PickerViewProps + const pickerViewState = inject('pickerViewState') as PickerViewState const indicatorHeight = ref(34) const maskSize = computed( () => (pickerViewState.height - indicatorHeight.value) / 2 @@ -149,7 +142,14 @@ export default /*#__PURE__*/ defineComponent({ () => state.current, (current) => (currentRef.value = current) ) - watch([() => indicatorHeight.value, () => state.length], updatesScroller) + watch( + [ + () => indicatorHeight.value, + () => state.length, + () => pickerViewState.height, + ], + updatesScroller + ) let oldDeltaY = 0 function handleWheel(event: Event) { diff --git a/packages/uni-components/src/components/picker-view/index.tsx b/packages/uni-components/src/components/picker-view/index.tsx index 5b3b7e436..aaded3cf4 100644 --- a/packages/uni-components/src/components/picker-view/index.tsx +++ b/packages/uni-components/src/components/picker-view/index.tsx @@ -12,6 +12,7 @@ import { PropType, ComponentInternalInstance, } from 'vue' +import { flatVNode } from '../../helpers/flatVNode' import ResizeSensor from '../resize-sensor/index' import { useCustomEvent } from '../../helpers/useEvent' @@ -46,17 +47,17 @@ const props = { }, } -type Props = Record -interface State { +export type Props = Record +export interface State { value: number[] height: number } function useState(props: Props): State { const value: number[] = reactive([...props.value]) - const state = { + const state = reactive({ value, height: 34, - } + }) watch( () => props.value, (val: number[], oldVal: number[]) => { @@ -81,8 +82,6 @@ function useState(props: Props): State { export type GetPickerViewColumn = ( columnInstance: ComponentInternalInstance ) => ComputedRef -export type GetPickerViewProps = () => Props -export type GetPickerViewState = () => State export default /*#__PURE__*/ defineComponent({ name: 'PickerView', @@ -119,20 +118,13 @@ export default /*#__PURE__*/ defineComponent({ return ref } provide('getPickerViewColumn', getPickerViewColumn) - const getPickerViewProps: GetPickerViewProps = () => { - return props - } - provide('getPickerViewProps', getPickerViewProps) - - const getPickerViewState: GetPickerViewState = () => { - return state - } - provide('getPickerViewState', getPickerViewState) + provide('pickerViewProps', props) + provide('pickerViewState', state) return () => { const defaultSlots = slots.default && slots.default() // TODO filter - columnVNodes = columnVNodes = defaultSlots || [] + columnVNodes = flatVNode(defaultSlots) return ( -
{columnVNodes}
+
{defaultSlots}
 ) } diff --git a/packages/uni-h5/dist/uni-h5.cjs.js b/packages/uni-h5/dist/uni-h5.cjs.js index 17979e51a..8ac6ba379 100644 --- a/packages/uni-h5/dist/uni-h5.cjs.js +++ b/packages/uni-h5/dist/uni-h5.cjs.js @@ -4329,6 +4329,23 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) { ])); } _sfc_main$5.render = _sfc_render$5; +function flatVNode(nodes) { + const array = []; + if (Array.isArray(nodes)) { + nodes.forEach((vnode) => { + if (vue.isVNode(vnode)) { + if (vnode.type === vue.Fragment) { + array.push(...flatVNode(vnode.children)); + } else { + array.push(vnode); + } + } else if (Array.isArray(vnode)) { + array.push(...flatVNode(vnode)); + } + }); + } + return array; +} const props$f = { value: { type: Array, @@ -4358,10 +4375,10 @@ const props$f = { }; function useState$1(props2) { const value = vue.reactive([...props2.value]); - const state = { + const state = vue.reactive({ value, height: 34 - }; + }); vue.watch(() => props2.value, (val, oldVal) => { { state.value.length = val.length; @@ -4411,17 +4428,11 @@ var index$h = /* @__PURE__ */ vue.defineComponent({ return ref; }; vue.provide("getPickerViewColumn", getPickerViewColumn); - const getPickerViewProps = () => { - return props2; - }; - vue.provide("getPickerViewProps", getPickerViewProps); - const getPickerViewState = () => { - return state; - }; - vue.provide("getPickerViewState", getPickerViewState); + vue.provide("pickerViewProps", props2); + vue.provide("pickerViewState", state); return () => { const defaultSlots = slots.default && slots.default(); - columnVNodes = columnVNodes = defaultSlots || []; + columnVNodes = flatVNode(defaultSlots); return vue.createVNode("uni-picker-view", { "ref": rootRef }, [vue.createVNode(ResizeSensor, { @@ -4431,27 +4442,10 @@ var index$h = /* @__PURE__ */ vue.defineComponent({ }) => state.height = height }, null, 8, ["initial", "onResize"]), vue.createVNode("div", { "class": "uni-picker-view-wrapper" - }, [columnVNodes])], 512); + }, [defaultSlots])], 512); }; } }); -function flatVNode(nodes) { - const array = []; - if (Array.isArray(nodes)) { - nodes.forEach((vnode) => { - if (vue.isVNode(vnode)) { - if (vnode.type === vue.Fragment) { - array.push(...flatVNode(vnode.children)); - } else { - array.push(vnode); - } - } else if (Array.isArray(vnode)) { - array.push(...flatVNode(vnode)); - } - }); - } - return array; -} let scopedIndex = 0; function useScopedClass(indicatorHeightRef) { const className = `uni-picker-view-content-${scopedIndex++}`; @@ -4474,10 +4468,8 @@ var index$g = /* @__PURE__ */ vue.defineComponent({ const getPickerViewColumn = vue.inject("getPickerViewColumn"); const instance = vue.getCurrentInstance(); const currentRef = getPickerViewColumn ? getPickerViewColumn(instance) : vue.ref(0); - const getPickerViewProps = vue.inject("getPickerViewProps"); - const pickerViewProps = getPickerViewProps(); - const getPickerViewState = vue.inject("getPickerViewState"); - const pickerViewState = getPickerViewState(); + const pickerViewProps = vue.inject("pickerViewProps"); + const pickerViewState = vue.inject("pickerViewState"); const indicatorHeight = vue.ref(34); const maskSize = vue.computed(() => (pickerViewState.height - indicatorHeight.value) / 2); const { @@ -4497,7 +4489,7 @@ var index$g = /* @__PURE__ */ vue.defineComponent({ } }); vue.watch(() => state.current, (current) => currentRef.value = current); - vue.watch([() => indicatorHeight.value, () => state.length], updatesScroller); + vue.watch([() => indicatorHeight.value, () => state.length, () => pickerViewState.height], updatesScroller); let oldDeltaY = 0; function handleWheel(event) { const deltaY = oldDeltaY + event.deltaY; diff --git a/packages/uni-h5/dist/uni-h5.es.js b/packages/uni-h5/dist/uni-h5.es.js index eba7d0ef9..7409a37db 100644 --- a/packages/uni-h5/dist/uni-h5.es.js +++ b/packages/uni-h5/dist/uni-h5.es.js @@ -9104,6 +9104,23 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) { ])); } _sfc_main$5.render = _sfc_render$5; +function flatVNode(nodes) { + const array = []; + if (Array.isArray(nodes)) { + nodes.forEach((vnode) => { + if (isVNode(vnode)) { + if (vnode.type === Fragment) { + array.push(...flatVNode(vnode.children)); + } else { + array.push(vnode); + } + } else if (Array.isArray(vnode)) { + array.push(...flatVNode(vnode)); + } + }); + } + return array; +} const props$j = { value: { type: Array, @@ -9133,10 +9150,10 @@ const props$j = { }; function useState$1(props2) { const value = reactive([...props2.value]); - const state2 = { + const state2 = reactive({ value, height: 34 - }; + }); watch(() => props2.value, (val, oldVal) => { { state2.value.length = val.length; @@ -9186,17 +9203,11 @@ var index$f = /* @__PURE__ */ defineComponent({ return ref2; }; provide("getPickerViewColumn", getPickerViewColumn); - const getPickerViewProps = () => { - return props2; - }; - provide("getPickerViewProps", getPickerViewProps); - const getPickerViewState = () => { - return state2; - }; - provide("getPickerViewState", getPickerViewState); + provide("pickerViewProps", props2); + provide("pickerViewState", state2); return () => { const defaultSlots = slots.default && slots.default(); - columnVNodes = columnVNodes = defaultSlots || []; + columnVNodes = flatVNode(defaultSlots); return createVNode("uni-picker-view", { "ref": rootRef }, [createVNode(ResizeSensor, { @@ -9206,7 +9217,7 @@ var index$f = /* @__PURE__ */ defineComponent({ }) => state2.height = height }, null, 8, ["initial", "onResize"]), createVNode("div", { "class": "uni-picker-view-wrapper" - }, [columnVNodes])], 512); + }, [defaultSlots])], 512); }; } }); @@ -9890,23 +9901,6 @@ function useScroller(element, options) { handleTouchEnd }; } -function flatVNode(nodes) { - const array = []; - if (Array.isArray(nodes)) { - nodes.forEach((vnode) => { - if (isVNode(vnode)) { - if (vnode.type === Fragment) { - array.push(...flatVNode(vnode.children)); - } else { - array.push(vnode); - } - } else if (Array.isArray(vnode)) { - array.push(...flatVNode(vnode)); - } - }); - } - return array; -} let scopedIndex = 0; function useScopedClass(indicatorHeightRef) { const className = `uni-picker-view-content-${scopedIndex++}`; @@ -9956,10 +9950,8 @@ var index$e = /* @__PURE__ */ defineComponent({ const getPickerViewColumn = inject("getPickerViewColumn"); const instance2 = getCurrentInstance(); const currentRef = getPickerViewColumn ? getPickerViewColumn(instance2) : ref(0); - const getPickerViewProps = inject("getPickerViewProps"); - const pickerViewProps = getPickerViewProps(); - const getPickerViewState = inject("getPickerViewState"); - const pickerViewState = getPickerViewState(); + const pickerViewProps = inject("pickerViewProps"); + const pickerViewState = inject("pickerViewState"); const indicatorHeight = ref(34); const maskSize = computed(() => (pickerViewState.height - indicatorHeight.value) / 2); const { @@ -9987,7 +9979,7 @@ var index$e = /* @__PURE__ */ defineComponent({ } }); watch(() => state2.current, (current) => currentRef.value = current); - watch([() => indicatorHeight.value, () => state2.length], updatesScroller); + watch([() => indicatorHeight.value, () => state2.length, () => pickerViewState.height], updatesScroller); let oldDeltaY = 0; function handleWheel(event) { const deltaY = oldDeltaY + event.deltaY; -- GitLab