@utilitywarehouse/hearth-react-native 0.3.0 → 0.4.0

package/src/components/DatePicker/time-picker/wheel-web.tsx

@@ -0,0 +1,181 @@
+import { memo, useMemo, useRef } from 'react';
+import { Animated, PanResponder, Platform, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { isEqual } from '../../../utils';
+import { BodyText } from '../../BodyText';
+import { PickerOption } from '../DatePicker.props';
+import { CONTAINER_HEIGHT } from '../enums';
+import { sin } from './animated-math';
+
+interface WheelProps {
+  value: number | string;
+  setValue?: (value: any) => void;
+  items: PickerOption[];
+}
+
+const ITEM_HEIGHT = 44;
+
+const WheelWeb = ({ value, setValue = () => {}, items }: WheelProps) => {
+  const displayCount = 5;
+  const translateY = useRef(new Animated.Value(0)).current;
+  const renderCount = displayCount * 2 < items.length ? displayCount * 8 : displayCount * 2 - 1;
+  const circular = items.length >= displayCount;
+  const height = 140;
+  const radius = height / 2;
+
+  const valueIndex = useMemo(() => {
+    return Math.max(
+      0,
+      items.findIndex(item => item.value === value)
+    );
+  }, [items, value]);
+
+  const panResponder = useMemo(() => {
+    return PanResponder.create({
+      onMoveShouldSetPanResponder: () => true,
+      onStartShouldSetPanResponderCapture: () => true,
+      onPanResponderGrant: () => {
+        translateY.setValue(0);
+      },
+      onPanResponderMove: (evt, gestureState) => {
+        translateY.setValue(gestureState.dy);
+        evt.stopPropagation();
+      },
+      onPanResponderRelease: (_, gestureState) => {
+        translateY.extractOffset();
+        let newValueIndex =
+          valueIndex - Math.round(gestureState.dy / ((radius * 2) / displayCount));
+        if (circular) {
+          newValueIndex = (newValueIndex + items.length) % items.length;
+        } else {
+          if (newValueIndex < 0) {
+            newValueIndex = 0;
+          } else if (newValueIndex >= items.length) {
+            newValueIndex = items.length - 1;
+          }
+        }
+        const newValue = items[newValueIndex];
+        if (newValue?.value === value) {
+          translateY.setOffset(0);
+          translateY.setValue(0);
+        } else if (newValue?.value) {
+          setValue(newValue.value);
+        } else if (items[0]?.value) {
+          setValue(items[0].value);
+        }
+      },
+    });
+  }, [circular, displayCount, radius, setValue, value, valueIndex, items, translateY]);
+
+  const displayValues = useMemo(() => {
+    const centerIndex = Math.floor(renderCount / 2);
+
+    return Array.from({ length: renderCount }, (_, index) => {
+      let targetIndex = valueIndex + index - centerIndex;
+      if (circular) {
+        targetIndex = ((targetIndex % items.length) + items.length) % items.length;
+      } else {
+        targetIndex = Math.max(0, Math.min(targetIndex, items.length - 1));
+      }
+      return items[targetIndex] || items[0];
+    });
+  }, [renderCount, valueIndex, items, circular]);
+
+  const animatedAngles = useMemo(() => {
+    //translateY.setValue(0);
+    translateY.setOffset(0);
+    const currentIndex = displayValues.findIndex(item => item?.value === value);
+    return displayValues && displayValues.length > 0
+      ? displayValues.map((_, index) =>
+          translateY
+            .interpolate({
+              inputRange: [-radius, radius],
+              outputRange: [
+                -radius + ((radius * 2) / displayCount) * (index - currentIndex),
+                radius + ((radius * 2) / displayCount) * (index - currentIndex),
+              ],
+              extrapolate: 'extend',
+            })
+            .interpolate({
+              inputRange: [-radius, radius],
+              outputRange: [-Math.PI / 2, Math.PI / 2],
+              extrapolate: 'clamp',
+            })
+        )
+      : [];
+  }, [displayValues, radius, value, displayCount, translateY]);
+
+  return (
+    <View style={[styles.container]} {...panResponder.panHandlers}>
+      <View
+        style={[
+          styles.selectedIndicator,
+          {
+            transform: [{ translateY: -ITEM_HEIGHT / 2 }],
+            height: ITEM_HEIGHT,
+          },
+        ]}
+      />
+      {displayValues?.map((displayValue, index) => {
+        const animatedAngle = animatedAngles[index];
+        return (
+          <Animated.View
+            key={`${displayValue?.text}-${index}`}
+            // eslint-disable-next-line react-native/no-inline-styles
+            style={{
+              position: 'absolute',
+              height: ITEM_HEIGHT - 10,
+              transform: animatedAngle
+                ? [
+                    {
+                      translateY: Animated.multiply(radius, sin(animatedAngle)),
+                    },
+                    {
+                      rotateX: animatedAngle.interpolate({
+                        inputRange: [-Math.PI / 2, Math.PI / 2],
+                        outputRange: ['-89deg', '89deg'],
+                        extrapolate: 'clamp',
+                      }),
+                    },
+                  ]
+                : [],
+              opacity: displayValue?.value !== value ? 0.3 : 1,
+            }}
+          >
+            <BodyText>{displayValue?.text}</BodyText>
+          </Animated.View>
+        );
+      })}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    minWidth: 30,
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: CONTAINER_HEIGHT / 2,
+    ...Platform.select({
+      web: {
+        cursor: 'pointer',
+        userSelect: 'none',
+      },
+    }),
+  },
+  selectedIndicator: {
+    position: 'absolute',
+    width: '100%',
+    top: '50%',
+  },
+});
+
+const customComparator = (prev: Readonly<WheelProps>, next: Readonly<WheelProps>) => {
+  const areEqual =
+    prev.value === next.value && prev.setValue === next.setValue && isEqual(prev.items, next.items);
+
+  return areEqual;
+};
+
+export default memo(WheelWeb, customComparator);

package/src/components/DatePicker/time-picker/wheel.tsx

@@ -0,0 +1,18 @@
+import { memo } from 'react';
+import { Platform } from 'react-native';
+import { PickerOption } from '../DatePicker.props';
+import WheelNative from './wheel-native';
+import WheelWeb from './wheel-web';
+
+type WheelProps = {
+  value: number | string;
+  setValue?: (value: any) => void;
+  items: PickerOption[];
+};
+
+const Wheel = (props: WheelProps) => {
+  const Component = Platform.OS === 'web' ? WheelWeb : WheelNative;
+  return <Component {...props} />;
+};
+
+export default memo(Wheel);