@utilitywarehouse/hearth-react-native 0.3.1 → 0.4.0

package/src/components/DatePicker/polyfill.ts

@@ -0,0 +1,21 @@
+// @ts-ignore
+Date.prototype._toLocaleString = Date.prototype.toLocaleString;
+// @ts-ignore
+Date.prototype.toLocaleString = function (a, b) {
+  if (b && Object.keys(b).length === 1 && 'timeZone' in b && a === 'en-US') {
+    return Intl.DateTimeFormat('en-us', {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+      hour12: false,
+      timeZone: b.timeZone,
+    })
+      .format(this)
+      .replace(/(\d{2})\/(\d{2})\/(\d{4}),/g, '$3-$1-$2');
+  }
+  // @ts-ignore
+  return this._toLocaleString(a, b);
+};

package/src/components/DatePicker/time-picker/animated-math.ts

@@ -0,0 +1,33 @@
+import { Animated } from 'react-native';
+
+const FACTORIAL_3 = 3 * 2;
+const FACTORIAL_5 = 5 * 4 * FACTORIAL_3;
+const FACTORIAL_7 = 7 * 6 * FACTORIAL_5;
+
+function sin(animated: Animated.Animated) {
+  const normalized = normalize(animated);
+  const square = Animated.multiply(normalized, normalized);
+  const pow3 = Animated.multiply(normalized, square);
+  const pow5 = Animated.multiply(pow3, square);
+  const pow7 = Animated.multiply(pow5, square);
+
+  return Animated.add(
+    Animated.add(normalized, Animated.multiply(pow3, -1 / FACTORIAL_3)),
+    Animated.add(
+      Animated.multiply(pow5, 1 / FACTORIAL_5),
+      Animated.multiply(pow7, -1 / FACTORIAL_7)
+    )
+  );
+}
+
+function normalize(animated: Animated.Animated): Animated.Animated {
+  return Animated.add(
+    Animated.modulo(Animated.add(animated, Math.PI), Math.PI * 2),
+    -Math.PI
+  ).interpolate({
+    inputRange: [-Math.PI, -Math.PI / 2, Math.PI / 2, Math.PI],
+    outputRange: [0, -Math.PI / 2, Math.PI / 2, 0],
+  });
+}
+
+export { sin, normalize };

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

@@ -0,0 +1,34 @@
+import { memo } from 'react';
+import { PickerOption } from '../DatePicker.props';
+import WheelPicker from './wheel-picker';
+
+interface PeriodProps {
+  value: string;
+  setValue?: (value: any) => void;
+}
+
+const options: PickerOption[] = [
+  { value: 'AM', text: 'AM' },
+  { value: 'PM', text: 'PM' },
+];
+
+const PeriodNative = ({ value, setValue = () => {} }: PeriodProps) => {
+  return (
+    <WheelPicker
+      value={value}
+      options={options}
+      onChange={setValue}
+      //containerStyle={defaultStyles.container}
+      itemHeight={44}
+      decelerationRate="fast"
+    />
+  );
+};
+
+const customComparator = (prev: Readonly<PeriodProps>, next: Readonly<PeriodProps>) => {
+  const areEqual = prev.value === next.value && prev.setValue === next.setValue;
+
+  return areEqual;
+};
+
+export default memo(PeriodNative, customComparator);

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

@@ -0,0 +1,16 @@
+import { memo } from 'react';
+import { Platform } from 'react-native';
+import PeriodNative from './period-native';
+import PeriodWeb from './period-web';
+
+type PeriodProps = {
+  value: string;
+  setValue?: (value: any) => void;
+};
+
+const PeriodPicker = (props: PeriodProps) => {
+  const Component = Platform.OS === 'web' ? PeriodWeb : PeriodNative;
+  return <Component {...props} />;
+};
+
+export default memo(PeriodPicker);

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

@@ -0,0 +1,36 @@
+import { memo } from 'react';
+import { Pressable, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../../BodyText';
+
+interface PeriodProps {
+  value: string;
+  setValue?: (value: any) => void;
+}
+
+const PeriodWeb = ({ value, setValue = () => {} }: PeriodProps) => {
+  return (
+    <Pressable onPress={() => setValue(value == 'AM' ? 'PM' : 'AM')}>
+      <View style={[styles.period]}>
+        <BodyText>{value}</BodyText>
+      </View>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  period: {
+    width: 65,
+    height: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+const customComparator = (prev: Readonly<PeriodProps>, next: Readonly<PeriodProps>) => {
+  const areEqual = prev.value === next.value && prev.setValue === next.setValue;
+
+  return areEqual;
+};
+
+export default memo(PeriodWeb, customComparator);

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

@@ -0,0 +1,37 @@
+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

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

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

@@ -0,0 +1,132 @@
+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

@@ -0,0 +1,22 @@
+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

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