@utilitywarehouse/hearth-react-native 0.23.0 → 0.25.0

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

@@ -1,37 +0,0 @@
-import { memo } from 'react';
-import { Platform } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { PickerOption } from '../DatePicker.props';
-import WheelPicker from './wheel-picker';
-
-interface WheelProps {
-  value: number | string;
-  setValue?: (value: any) => void;
-  items: PickerOption[];
-}
-
-const WheelNative = ({ value, setValue = () => {}, items }: WheelProps) => {
-  return (
-    <WheelPicker
-      value={value}
-      options={items}
-      onChange={setValue}
-      containerStyle={styles.container}
-      itemHeight={44}
-      decelerationRate="fast"
-    />
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    display: 'flex',
-    ...Platform.select({
-      web: {
-        userSelect: 'none',
-      },
-    }),
-  },
-});
-
-export default memo(WheelNative);

package/src/components/DatePicker/time-picker/wheel-picker/index.ts

@@ -1,3 +0,0 @@
-import WheelPicker from './wheel-picker';
-
-export default WheelPicker;

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

@@ -1,132 +0,0 @@
-import React from 'react';
-import { Animated, StyleProp, ViewStyle } from 'react-native';
-import { BodyText } from '../../../BodyText';
-import { PickerOption } from '../../DatePicker.props';
-import styles from './wheel-picker.style';
-
-interface ItemProps {
-  style: StyleProp<ViewStyle>;
-  option: PickerOption | null;
-  height: number;
-  index: number;
-  currentScrollIndex: Animated.AnimatedAddition<number>;
-  visibleRest: number;
-  rotationFunction: (x: number) => number;
-  opacityFunction: (x: number) => number;
-  scaleFunction: (x: number) => number;
-}
-
-const WheelPickerItem: React.FC<ItemProps> = ({
-  style,
-  height,
-  option,
-  index,
-  visibleRest,
-  currentScrollIndex,
-  opacityFunction,
-  rotationFunction,
-  scaleFunction,
-}) => {
-  const relativeScrollIndex = Animated.subtract(index, currentScrollIndex);
-
-  const translateY = relativeScrollIndex.interpolate({
-    inputRange: (() => {
-      const range = [0];
-      for (let i = 1; i <= visibleRest + 1; i++) {
-        range.unshift(-i);
-        range.push(i);
-      }
-      return range;
-    })(),
-    outputRange: (() => {
-      const range = [0];
-      for (let i = 1; i <= visibleRest + 1; i++) {
-        let y = (height / 2) * (1 - Math.sin(Math.PI / 2 - rotationFunction(i)));
-        for (let j = 1; j < i; j++) {
-          y += height * (1 - Math.sin(Math.PI / 2 - rotationFunction(j)));
-        }
-        range.unshift(y);
-        range.push(-y);
-      }
-      return range;
-    })(),
-  });
-
-  const opacity = relativeScrollIndex.interpolate({
-    inputRange: (() => {
-      const range = [0];
-      for (let i = 1; i <= visibleRest + 1; i++) {
-        range.unshift(-i);
-        range.push(i);
-      }
-      return range;
-    })(),
-    outputRange: (() => {
-      const range = [1];
-      for (let x = 1; x <= visibleRest + 1; x++) {
-        const y = opacityFunction(x);
-        range.unshift(y);
-        range.push(y);
-      }
-      return range;
-    })(),
-  });
-
-  const scale = relativeScrollIndex.interpolate({
-    inputRange: (() => {
-      const range = [0];
-      for (let i = 1; i <= visibleRest + 1; i++) {
-        range.unshift(-i);
-        range.push(i);
-      }
-      return range;
-    })(),
-    outputRange: (() => {
-      const range = [1.0];
-      for (let x = 1; x <= visibleRest + 1; x++) {
-        const y = scaleFunction(x);
-        range.unshift(y);
-        range.push(y);
-      }
-      return range;
-    })(),
-  });
-
-  const rotateX = relativeScrollIndex.interpolate({
-    inputRange: (() => {
-      const range = [0];
-      for (let i = 1; i <= visibleRest + 1; i++) {
-        range.unshift(-i);
-        range.push(i);
-      }
-      return range;
-    })(),
-    outputRange: (() => {
-      const range = ['0deg'];
-      for (let x = 1; x <= visibleRest + 1; x++) {
-        const y = rotationFunction(x);
-        range.unshift(`${y}deg`);
-        range.push(`${y}deg`);
-      }
-      return range;
-    })(),
-  });
-
-  return (
-    <Animated.View
-      style={[
-        styles.option,
-        style,
-        {
-          height,
-          opacity,
-          transform: [{ translateY }, { rotateX }, { scale }],
-        },
-      ]}
-    >
-      <BodyText>{option?.text}</BodyText>
-    </Animated.View>
-  );
-};
-
-export default React.memo(WheelPickerItem);

package/src/components/DatePicker/time-picker/wheel-picker/wheel-picker.style.ts

@@ -1,22 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-
-export default StyleSheet.create({
-  container: {
-    position: 'relative',
-  },
-  selectedIndicator: {
-    position: 'absolute',
-    width: '100%',
-    top: '50%',
-  },
-  scrollView: {
-    overflow: 'hidden',
-    flex: 1,
-  },
-  option: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingHorizontal: 16,
-    zIndex: 100,
-  },
-});

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

@@ -1,200 +0,0 @@
-import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
-import {
-  Animated,
-  FlatList,
-  FlatListProps,
-  NativeScrollEvent,
-  NativeSyntheticEvent,
-  Platform,
-  StyleProp,
-  View,
-  ViewProps,
-  ViewStyle,
-} from 'react-native';
-import { PickerOption } from '../../DatePicker.props';
-import WheelPickerItem from './wheel-picker-item';
-import styles from './wheel-picker.style';
-
-interface Props {
-  value: number | string;
-  options: PickerOption[];
-  onChange: (index: number | string) => void;
-  selectedIndicatorStyle?: StyleProp<ViewStyle>;
-  itemStyle?: ViewStyle;
-  itemHeight?: number;
-  containerStyle?: ViewStyle;
-  containerProps?: Omit<ViewProps, 'style'>;
-  scaleFunction?: (x: number) => number;
-  rotationFunction?: (x: number) => number;
-  opacityFunction?: (x: number) => number;
-  visibleRest?: number;
-  decelerationRate?: 'normal' | 'fast' | number;
-  flatListProps?: Omit<FlatListProps<PickerOption | null>, 'data' | 'renderItem'>;
-}
-
-const WheelPicker: React.FC<Props> = ({
-  value,
-  options,
-  onChange,
-  selectedIndicatorStyle = {},
-  containerStyle = {},
-  itemStyle = {},
-  itemHeight = 40,
-  scaleFunction = (x: number) => 1.0 ** x,
-  rotationFunction = (x: number) => 1 - Math.pow(1 / 2, x),
-  opacityFunction = (x: number) => Math.pow(1 / 3, x),
-  visibleRest = 2,
-  decelerationRate = 'normal',
-  containerProps = {},
-  flatListProps = {},
-}) => {
-  const momentumStarted = useRef(false);
-  const selectedIndex = options.findIndex(item => item.value === value);
-
-  const flatListRef = useRef<FlatList<PickerOption | null>>(null);
-  const [scrollY] = useState(new Animated.Value(selectedIndex * itemHeight));
-
-  const containerHeight = (1 + visibleRest * 2) * itemHeight;
-  const paddedOptions = useMemo(() => {
-    const array: (PickerOption | null)[] = [...options];
-    for (let i = 0; i < visibleRest; i++) {
-      array.unshift(null);
-      array.push(null);
-    }
-    return array;
-  }, [options, visibleRest]);
-
-  const offsets = useMemo(
-    () => [...Array(paddedOptions.length)].map((_, i) => i * itemHeight),
-    [paddedOptions, itemHeight]
-  );
-
-  const currentScrollIndex = useMemo(
-    () => Animated.add(Animated.divide(scrollY, itemHeight), visibleRest),
-    [visibleRest, scrollY, itemHeight]
-  );
-
-  const handleScrollEnd = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-    const offsetY = Math.min(
-      itemHeight * (options.length - 1),
-      Math.max(event.nativeEvent.contentOffset.y, 0)
-    );
-
-    let index = Math.floor(offsetY / itemHeight);
-    const remainder = offsetY % itemHeight;
-    if (remainder > itemHeight / 2) {
-      index++;
-    }
-
-    if (index !== selectedIndex) {
-      onChange(options[index]?.value || 0);
-    }
-  };
-
-  const handleMomentumScrollBegin = () => {
-    momentumStarted.current = true;
-  };
-
-  const handleMomentumScrollEnd = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-    momentumStarted.current = false;
-    handleScrollEnd(event);
-  };
-
-  const handleScrollEndDrag = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-    // Capture the offset value immediately
-    const offsetY = event.nativeEvent.contentOffset?.y;
-
-    // We'll start a short timer to see if momentum scroll begins
-    setTimeout(() => {
-      // If momentum scroll hasn't started within the timeout,
-      // then it was a slow scroll that won't trigger momentum
-      if (!momentumStarted.current && offsetY !== undefined) {
-        // Create a synthetic event with just the data we need
-        const syntheticEvent = {
-          nativeEvent: {
-            contentOffset: { y: offsetY },
-          },
-        };
-        handleScrollEnd(syntheticEvent as any);
-      }
-    }, 50);
-  };
-
-  useEffect(() => {
-    if (selectedIndex < 0 || selectedIndex >= options.length) {
-      throw new Error(
-        `Selected index ${selectedIndex} is out of bounds [0, ${options.length - 1}]`
-      );
-    }
-  }, [selectedIndex, options]);
-
-  /**
-   * If selectedIndex is changed from outside (not via onChange) we need to scroll to the specified index.
-   * This ensures that what the user sees as selected in the picker always corresponds to the value state.
-   */
-  useEffect(() => {
-    flatListRef.current?.scrollToIndex({
-      index: selectedIndex,
-      animated: Platform.OS === 'ios',
-    });
-  }, [selectedIndex, itemHeight]);
-
-  return (
-    <View
-      style={[styles.container, { height: containerHeight }, containerStyle]}
-      {...containerProps}
-    >
-      <View
-        style={[
-          styles.selectedIndicator,
-          selectedIndicatorStyle,
-          {
-            transform: [{ translateY: -itemHeight / 2 }],
-            height: itemHeight,
-          },
-        ]}
-      />
-      <Animated.FlatList<PickerOption | null>
-        {...flatListProps}
-        ref={flatListRef}
-        nestedScrollEnabled
-        style={styles.scrollView}
-        showsVerticalScrollIndicator={false}
-        onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], {
-          useNativeDriver: true,
-        })}
-        onScrollEndDrag={handleScrollEndDrag}
-        onMomentumScrollBegin={handleMomentumScrollBegin}
-        onMomentumScrollEnd={handleMomentumScrollEnd}
-        snapToOffsets={offsets}
-        decelerationRate={decelerationRate}
-        initialScrollIndex={selectedIndex}
-        getItemLayout={(_, index) => ({
-          length: itemHeight,
-          offset: itemHeight * index,
-          index,
-        })}
-        data={paddedOptions}
-        keyExtractor={(item, index) =>
-          item ? `${item.value}-${item.text}-${index}` : `null-${index}`
-        }
-        renderItem={({ item: option, index }) => (
-          <WheelPickerItem
-            key={`option-${index}`}
-            index={index}
-            option={option}
-            style={itemStyle}
-            height={itemHeight}
-            currentScrollIndex={currentScrollIndex}
-            scaleFunction={scaleFunction}
-            rotationFunction={rotationFunction}
-            opacityFunction={opacityFunction}
-            visibleRest={visibleRest}
-          />
-        )}
-      />
-    </View>
-  );
-};
-
-export default memo(WheelPicker);

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

@@ -1,180 +0,0 @@
-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}`}
-            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

@@ -1,18 +0,0 @@
-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);