fix: revert deepmerge and fix wheelpicker

Author: minheq

package.json

@@ -35,6 +35,7 @@
   ],
   "license": "MIT",
   "dependencies": {
+    "deepmerge": "4.0.0",
     "exenv": "1.2.2",
     "focus-trap": "5.0.1",
     "react-icons": "3.7.0",

src/components/Layout/LayoutProvider.tsx

@@ -1,7 +1,7 @@
+import deepMerge from 'deepmerge';
 import * as React from 'react';
 import { Dimensions } from 'react-native';
 
-import { deepMerge } from '../../utils/deepMerge';
 import {
   defaultLayout,
   DESC_ORDER_SCREEN_SIZES,

src/components/WheelPicker/WheelPicker.mdx

@@ -13,7 +13,7 @@ import { Box, State, WheelPicker, Icon, TextInput } from '..';
     {({ state, setState }) => (
       <Box flexDirection="row">
         <WheelPicker
-          value="May"
+          value={state.month}
           options={[
             { label: 'January', value: 'January' },
             { label: 'February', value: 'February' },
@@ -28,19 +28,30 @@ import { Box, State, WheelPicker, Icon, TextInput } from '..';
             { label: 'November', value: 'November' },
             { label: 'December', value: 'December' },
           ]}
-          onValueChange={value => console.log(value)}
+          onValueChange={value => {
+            console.log(value);
+            setState({ month: value });
+          }}
         />
         <WheelPicker
+          value={state.day}
           options={new Array(31)
             .fill(0)
             .map((v, i) => ({ label: `${i + 1}`, value: `${i + 1}` }))}
-          onValueChange={value => console.log(value)}
+          onValueChange={value => {
+            console.log(value);
+            setState({ day: value });
+          }}
         />
         <WheelPicker
+          value={state.year}
           options={new Array(50)
             .fill(0)
             .map((v, i) => ({ label: `${2000 + i}`, value: `${2000 + i}` }))}
-          onValueChange={value => console.log(value)}
+          onValueChange={value => {
+            console.log(value);
+            setState({ year: value });
+          }}
         />
       </Box>
     )}

src/components/WheelPicker/WheelPicker.tsx

@@ -53,7 +53,6 @@ const WheelPickerBase = (
     handlePressDown,
     handlePressUp,
     handleEndDrag,
-    initialScrollIndex,
   } = useWheelPicker({
     onValueChange,
     options,
@@ -65,6 +64,7 @@ const WheelPickerBase = (
     value,
   });
 
+  const initialScrollIndex = options.findIndex(o => o.value === value);
   const theme = useTheme();
 
   const {
@@ -95,7 +95,7 @@ const WheelPickerBase = (
             length: ITEM_HEIGHT,
             offset: ITEM_HEIGHT * index,
           })}
-          initialScrollIndex={initialScrollIndex}
+          initialScrollIndex={initialScrollIndex < 0 ? 0 : initialScrollIndex}
           keyExtractor={item => item.value}
           renderItem={({ item }) => <WheelPickerItem option={item} />}
           showsHorizontalScrollIndicator={false}

src/components/WheelPicker/WheelPicker.web.tsx

@@ -21,14 +21,14 @@ export const WheelPicker = React.forwardRef(
     } = props;
 
     const theme = useTheme();
-
     const listRef = React.useRef<HTMLDivElement>(null);
 
     const {
       optionsWithClones,
       handlePressDown,
       handlePressUp,
       handleScroll,
+      scrollToValue,
     } = useWheelPicker({
       onValueChange,
       options,
@@ -57,6 +57,12 @@ export const WheelPicker = React.forwardRef(
       theme.components.getWheelPickerStyles,
     )(props, theme);
 
+    React.useLayoutEffect(() => {
+      setTimeout(() => {
+        if (listRef.current && value) scrollToValue(value, false);
+      }, 50);
+    }, [value]);
+
     return (
       <View style={containerStyle}>
         <TouchableOpacity style={arrowWrapperStyle} onPress={handlePressUp}>

src/components/WheelPicker/useWheelPicker.ts

@@ -1,9 +1,12 @@
 import * as React from 'react';
 
+import { useDebouncedCallback } from '../../hooks/useDebouncedCallback';
 import { WheelPicker } from './WheelPicker';
 import { ITEM_HEIGHT } from './WheelPicker.constants';
 import { WheelPickerOption } from './WheelPickerItem';
 
+const DEBOUNCE_TIME = 300;
+
 export const makePaddedOptions = (options: WheelPickerOption[]) => {
   return [
     { value: 'emptyStart', label: '' },
@@ -64,18 +67,15 @@ export const useWheelPicker = (props: UseWheelPickerProps) => {
     onValueChange = () => {
       return;
     },
-    value: initialValue,
+    value: initialValue = options[0].value,
     scrollContainer,
     ref,
   } = props;
   const optionsWithClones = makePaddedOptions(options);
-  const [currentValue, setCurrentValue] = React.useState(initialValue);
+  const [value, setValue] = React.useState<string>(initialValue);
   const getOption = React.useMemo(() => getOptionFromOptions(options), [
     options,
   ]);
-  const initialScrollIndex = options.findIndex(
-    o => o.value === (initialValue || options[0].value),
-  );
 
   const scrollToValue = React.useCallback(
     (toValue: string, animated = true) => {
@@ -87,30 +87,30 @@ export const useWheelPicker = (props: UseWheelPickerProps) => {
         animated,
         offset: index * ITEM_HEIGHT - ITEM_HEIGHT,
       });
-
-      setCurrentValue(toValue);
     },
     [scrollContainer, options],
   );
 
-  React.useLayoutEffect(() => {
-    if (initialValue) {
-      scrollToValue(initialValue, false);
-    } else {
-      scrollToValue(options[0].value, false);
-    }
-  }, [options]);
+  const handleChange = React.useCallback(
+    (newValue: string) => {
+      if (newValue !== value) {
+        onValueChange(newValue);
+        setValue(newValue);
+      }
+    },
+    [onValueChange, value],
+  );
 
-  const handleScroll = React.useCallback(
+  const handleScroll = useDebouncedCallback(
     (offset: number) => {
       if (!scrollContainer) return;
 
       const selectedOption = getOption(offset);
 
-      onValueChange(selectedOption.value);
-      setCurrentValue(selectedOption.value);
+      handleChange(selectedOption.value);
     },
-    [scrollContainer, options],
+    DEBOUNCE_TIME,
+    [scrollContainer, options, handleChange],
   );
 
   const handleEndDrag = React.useCallback(
@@ -125,43 +125,41 @@ export const useWheelPicker = (props: UseWheelPickerProps) => {
 
       const selectedOption = getOption(scrollPosition);
 
-      onValueChange(selectedOption.value);
-      setCurrentValue(selectedOption.value);
+      handleChange(selectedOption.value);
     },
-    [scrollContainer, options],
+    [scrollContainer, options, handleChange],
   );
 
   React.useImperativeHandle(
     ref,
     () => ({
-      selectValue: (value: string) => scrollToValue(value),
+      selectValue: (newValue: string) => scrollToValue(newValue),
     }),
     [scrollContainer, options],
   );
 
   const handlePressUp = React.useCallback(() => {
     if (!scrollContainer) return;
-    const currentIndex = options.findIndex(o => o.value === currentValue);
+    const currentIndex = options.findIndex(o => o.value === value);
 
     if (currentIndex <= 0) return;
     scrollToValue(options[currentIndex - 1].value);
-  }, [scrollContainer, currentValue]);
+  }, [scrollContainer, value]);
 
   const handlePressDown = React.useCallback(() => {
     if (!scrollContainer) return;
 
-    const currentIndex = options.findIndex(o => o.value === currentValue);
+    const currentIndex = options.findIndex(o => o.value === value);
 
     if (currentIndex >= options.length - 1) return;
     scrollToValue(options[currentIndex + 1].value);
-  }, [scrollContainer, currentValue]);
+  }, [scrollContainer, value]);
 
   return {
     handleEndDrag,
     handlePressDown,
     handlePressUp,
     handleScroll,
-    initialScrollIndex,
     optionsWithClones,
     scrollToValue,
   };

src/hooks/useDebouncedCallback.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export const useDebouncedCallback = <T extends (...args: any[]) => void>(
+  callback: T,
+  delay: number,
+  deps: readonly any[],
+): T => {
+  const timeout = React.useRef<number | null>(null);
+
+  return React.useCallback(
+    // @ts-ignore
+    (...args) => {
+      if (timeout.current) clearTimeout(timeout.current);
+
+      // @ts-ignore
+      timeout.current = setTimeout(() => callback(...args), delay);
+    },
+    [callback, delay, ...deps],
+  );
+};

src/theme/Theme.tsx

@@ -1,3 +1,4 @@
+import deepMerge from 'deepmerge';
 import React from 'react';
 import { TextStyle, ViewStyle } from 'react-native';
 import { DeepPartial } from 'ts-essentials';
@@ -34,7 +35,6 @@ import { GetLabelStyles } from '../components/Typography/Label.styles';
 import { GetParagraphStyles } from '../components/Typography/Paragraph.styles';
 import { GetTextStyles } from '../components/Typography/Text.styles';
 import { GetWheelPickerStyles } from '../components/WheelPicker/WheelPicker.styles';
-import { deepMerge } from '../utils/deepMerge';
 import { defaultTheme } from './defaultTheme';
 
 export interface TextSizes {
@@ -304,7 +304,8 @@ export interface ThemeProviderProps {
   value?: DeepPartial<Theme>;
 }
 
-export const createTheme = (theme?: DeepPartial<Theme>): Theme => {
+const createTheme = (theme?: DeepPartial<Theme>): Theme => {
+  // @ts-ignore
   return theme ? deepMerge(defaultTheme, theme) : defaultTheme;
 };
 

src/utils/deepMerge.ts

@@ -1,7 +1,7 @@
+import deepMerge from 'deepmerge';
 import { DeepPartial } from 'ts-essentials';
 
 import { Theme } from '../theme';
-import { deepMerge } from './deepMerge';
 
 export type GetStyles<TStyles = any, TStyleProps = any> = (
   props: TStyleProps,
@@ -32,5 +32,6 @@ export const mergeStyles = <TStyles = any, TStyleProps = any>(
     styles.push(getOverridingStyles(props, theme) as Partial<TStyles>);
   }
 
-  return deepMerge<TStyles>(defaultStyles, ...styles);
+  // @ts-ignore
+  return deepMerge.all<TStyles>([defaultStyles, ...styles]);
 };