fix: picker-view state

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) {

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<keyof typeof props, any>
-interface State {
+export type Props = Record<keyof typeof props, any>
+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<number>
-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 (
         <uni-picker-view ref={rootRef}>
           <ResizeSensor
@@ -141,7 +133,7 @@ export default /*#__PURE__*/ defineComponent({
               (state.height = height)
             }
           ></ResizeSensor>
-          <div class="uni-picker-view-wrapper">{columnVNodes}</div>
+          <div class="uni-picker-view-wrapper">{defaultSlots}</div>
         </uni-picker-view>
       )
     }

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;

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;