@utilitywarehouse/hearth-react-native 0.24.0 → 0.26.0

package/src/components/TimePicker/TimePickerView.tsx

@@ -0,0 +1,216 @@
+import dayjs from 'dayjs';
+import { memo, useCallback, useMemo } from 'react';
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { Numerals } from '../DatePicker/DatePicker.props';
+import { formatNumber, getParsedDate } from '../DatePicker/utils';
+import type { DateType, PickerOption } from './TimePicker.props';
+import TimePickerWheel from './TimePickerWheel';
+
+export type Period = 'AM' | 'PM';
+
+type TimePickerViewProps = {
+  currentDate: DateType;
+  onSelectDate: (date: DateType) => void;
+  timeZone?: string;
+  use12Hours?: boolean;
+  minuteInterval?: number;
+  containerHeight?: number;
+};
+
+const createNumberList = (
+  num: number,
+  numerals: Numerals,
+  startFrom: number = 0
+): PickerOption[] => {
+  return Array.from({ length: num }, (_, i) => ({
+    value: i + startFrom,
+    text:
+      i + startFrom < 10
+        ? `${formatNumber(0, numerals)}${formatNumber(i + startFrom, numerals)}`
+        : `${formatNumber(i + startFrom, numerals)}`,
+  }));
+};
+
+const createMinuteList = (interval: number, numerals: Numerals): PickerOption[] => {
+  const safeInterval = Math.min(59, Math.max(1, Math.floor(interval)));
+  const values = Array.from({ length: Math.ceil(60 / safeInterval) }, (_, index) =>
+    Math.min(index * safeInterval, 59)
+  ).filter((value, index, array) => array.indexOf(value) === index && value < 60);
+
+  return values.map(value => ({
+    value,
+    text:
+      value < 10
+        ? `${formatNumber(0, numerals)}${formatNumber(value, numerals)}`
+        : `${formatNumber(value, numerals)}`,
+  }));
+};
+
+const getClosestMinute = (value: number, options: PickerOption[]) => {
+  if (!options.length) return value;
+  const values = options.map(option => option.value as number);
+  if (values.includes(value)) return value;
+
+  let closest = values[0] ?? value;
+  let closestDiff = Math.abs(value - closest);
+
+  values.forEach(optionValue => {
+    const diff = Math.abs(value - optionValue);
+    if (diff < closestDiff) {
+      closestDiff = diff;
+      closest = optionValue;
+    }
+  });
+
+  return closest;
+};
+
+const TimePickerView = ({
+  currentDate,
+  onSelectDate,
+  timeZone,
+  use12Hours,
+  minuteInterval = 1,
+}: TimePickerViewProps) => {
+  const hours = useMemo(
+    () => createNumberList(use12Hours ? 12 : 24, 'latn', use12Hours ? 1 : 0),
+    [use12Hours]
+  );
+
+  const minutes = useMemo(() => createMinuteList(minuteInterval, 'latn'), [minuteInterval]);
+
+  const periodOptions = useMemo(
+    () => [
+      { value: 'AM', text: 'AM' },
+      { value: 'PM', text: 'PM' },
+    ],
+    []
+  );
+
+  const baseDate = currentDate;
+  const { hour, hour12, minute, period } = getParsedDate(baseDate);
+  const minuteValue = useMemo(() => getClosestMinute(minute, minutes), [minute, minutes]);
+
+  const handleChangeHour = useCallback(
+    (value: number) => {
+      let hour24 = value;
+
+      if (use12Hours) {
+        if (period === 'AM' && value === 12) {
+          hour24 = 0;
+        } else if (period === 'PM' && value < 12) {
+          hour24 = value + 12;
+        } else {
+          hour24 = value;
+        }
+      }
+
+      const newDate = dayjs.tz(baseDate, timeZone).hour(hour24).minute(minuteValue);
+      onSelectDate(newDate);
+    },
+    [baseDate, onSelectDate, timeZone, use12Hours, period, minuteValue]
+  );
+
+  const handleChangeMinute = useCallback(
+    (value: number) => {
+      const newDate = dayjs.tz(baseDate, timeZone).minute(value);
+      onSelectDate(newDate);
+    },
+    [baseDate, onSelectDate, timeZone]
+  );
+
+  const handlePeriodChange = useCallback(
+    (newPeriod: Period) => {
+      let newHour = hour12;
+      if (newPeriod === 'PM' && hour12 < 12) {
+        newHour = hour12 + 12;
+      } else if (newPeriod === 'AM' && hour12 === 12) {
+        newHour = 0;
+      } else if (newPeriod === 'AM' && hour >= 12) {
+        newHour = hour12;
+      }
+
+      const newDate = dayjs.tz(baseDate, timeZone).hour(newHour);
+      onSelectDate(newDate);
+    },
+    [baseDate, onSelectDate, timeZone, hour, hour12]
+  );
+
+  return (
+    <View style={styles.container} testID="time-selector">
+      <View style={styles.timePickerContainer}>
+        <View style={styles.wheelContainer}>
+          <TimePickerWheel
+            value={use12Hours ? hour12 : hour}
+            items={hours}
+            setValue={handleChangeHour}
+          />
+        </View>
+        <BodyText style={styles.timeSeparator} size="lg">
+          :
+        </BodyText>
+        <View style={styles.wheelContainer}>
+          <TimePickerWheel value={minuteValue} items={minutes} setValue={handleChangeMinute} />
+        </View>
+      </View>
+      {use12Hours && period ? (
+        <View style={styles.periodContainer}>
+          <TimePickerWheel value={period} items={periodOptions} setValue={handlePeriodChange} />
+        </View>
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+  },
+  wheelContainer: {
+    flex: 1,
+  },
+  timePickerContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 146,
+    height: 208,
+    flexDirection: 'row',
+    marginBottom: -30,
+  },
+  timeSeparator: {
+    marginHorizontal: 5,
+  },
+  periodContainer: {
+    marginLeft: 10,
+  },
+});
+
+const customComparator = (
+  prev: Readonly<TimePickerViewProps>,
+  next: Readonly<TimePickerViewProps>
+) => {
+  if (prev.onSelectDate !== next.onSelectDate) {
+    return false;
+  }
+
+  if (prev.timeZone !== next.timeZone) {
+    return false;
+  }
+
+  if (prev.use12Hours !== next.use12Hours) {
+    return false;
+  }
+
+  if (prev.minuteInterval !== next.minuteInterval) {
+    return false;
+  }
+
+  return dayjs(prev.currentDate).isSame(next.currentDate, 'minute');
+};
+
+export default memo(TimePickerView, customComparator);

package/src/components/TimePicker/TimePickerWheel.tsx

@@ -0,0 +1,154 @@
+import WheelPicker from '@quidone/react-native-wheel-picker';
+import { useCallback, useMemo } from 'react';
+import { View } from 'react-native';
+import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
+import { StyleSheet } from 'react-native-unistyles';
+import { useTheme } from '../../hooks';
+import { BodyText } from '../BodyText';
+import type { PickerOption } from './TimePicker.props';
+
+type TimePickerWheelProps = {
+  value: number | string;
+  setValue?: (value: any) => void;
+  items: PickerOption[];
+};
+
+const ITEM_HEIGHT = 40;
+const VISIBLE_REST = 3;
+
+const TimePickerWheel = ({ value, setValue = () => {}, items }: TimePickerWheelProps) => {
+  const theme = useTheme();
+  const fadeHeight = ITEM_HEIGHT * 1.5;
+  const gradientId = useMemo(() => `wheel-fade-${Math.random().toString(36).slice(2)}`, []);
+  const displayCount = VISIBLE_REST * 2 + 1;
+  const pickerHeight = ITEM_HEIGHT * displayCount;
+
+  const data = useMemo(
+    () =>
+      items.map(item => ({
+        value: item.value,
+        label: item.text,
+      })),
+    [items]
+  );
+
+  const handleValueChanged = useCallback(
+    ({ item }: { item: { value: number | string } }) => {
+      if (item?.value === value) {
+        return;
+      }
+      if (item && item.value !== undefined) {
+        setValue(item.value);
+      }
+    },
+    [setValue, value]
+  );
+
+  const renderOverlay = useCallback(
+    () => (
+      <View style={[styles.overlayContainer]} pointerEvents="none">
+        <View pointerEvents="none" style={[styles.fadeOverlay, { height: fadeHeight }]}>
+          <Svg width="100%" height="100%" preserveAspectRatio="none">
+            <Defs>
+              <LinearGradient id={`${gradientId}-top`} x1="0" y1="0" x2="0" y2="1">
+                <Stop offset="0" stopColor={theme.color.background.secondary} stopOpacity={1} />
+                <Stop offset="1" stopColor={theme.color.background.secondary} stopOpacity={0} />
+              </LinearGradient>
+            </Defs>
+            <Rect width="100%" height="100%" fill={`url(#${gradientId}-top)`} />
+          </Svg>
+        </View>
+        <View
+          pointerEvents="none"
+          style={[styles.fadeOverlay, styles.fadeOverlayBottom, { height: fadeHeight }]}
+        >
+          <Svg width="100%" height="100%" preserveAspectRatio="none">
+            <Defs>
+              <LinearGradient id={`${gradientId}-bottom`} x1="0" y1="0" x2="0" y2="1">
+                <Stop offset="0" stopColor={theme.color.background.secondary} stopOpacity={0} />
+                <Stop offset="1" stopColor={theme.color.background.secondary} stopOpacity={1} />
+              </LinearGradient>
+            </Defs>
+            <Rect width="100%" height="100%" fill={`url(#${gradientId}-bottom)`} />
+          </Svg>
+        </View>
+      </View>
+    ),
+    [fadeHeight, gradientId, theme.color.background.secondary]
+  );
+
+  const renderItem = useCallback(
+    ({ item }: { item: { label: string } }) => (
+      <View style={styles.indicator}>
+        <BodyText size="lg">{item.label}</BodyText>
+      </View>
+    ),
+    []
+  );
+
+  return (
+    <View style={[styles.container, { height: pickerHeight }]}>
+      <View style={styles.overlayContainer}>
+        <View style={[styles.selection]} />
+      </View>
+      <WheelPicker
+        data={data}
+        value={value}
+        onValueChanged={handleValueChanged}
+        itemHeight={ITEM_HEIGHT}
+        visibleItemCount={displayCount}
+        width={theme.components.timePicker.time.item.width}
+        renderItem={renderItem}
+        renderOverlay={renderOverlay}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    minWidth: theme.components.timePicker.time.item.width,
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative',
+  },
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    alignItems: 'center',
+  },
+  indicator: {
+    width: theme.components.timePicker.time.item.width,
+    height: theme.components.timePicker.time.item.height,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  overlayContainer: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  selection: {
+    alignSelf: 'stretch',
+    backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
+    borderRadius: theme.borderRadius.md,
+    width: theme.components.timePicker.time.item.width,
+    height: theme.components.timePicker.time.item.height,
+  },
+  fadeOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+  },
+  fadeOverlayBottom: {
+    top: undefined,
+    bottom: 0,
+  },
+}));
+
+export default TimePickerWheel;

package/src/components/TimePicker/TimePickerWheel.web.tsx

@@ -0,0 +1,217 @@
+import { memo, useCallback, useMemo } from 'react';
+import { Platform, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, {
+  Extrapolate,
+  interpolate,
+  runOnJS,
+  type SharedValue,
+  useAnimatedStyle,
+  useSharedValue,
+} from 'react-native-reanimated';
+import { StyleSheet } from 'react-native-unistyles';
+import { isEqual } from '../../utils';
+import { BodyText } from '../BodyText';
+import type { PickerOption } from './TimePicker.props';
+
+type TimePickerWheelProps = {
+  value: number | string;
+  setValue?: (value: any) => void;
+  items: PickerOption[];
+};
+
+const ITEM_HEIGHT = 44;
+
+type WheelWebItemProps = {
+  displayValue: PickerOption | undefined;
+  index: number;
+  currentIndex: number;
+  translateY: SharedValue<number>;
+  radius: number;
+  displayCount: number;
+  value: number | string;
+};
+
+const WheelWebItem = ({
+  displayValue,
+  index,
+  currentIndex,
+  translateY,
+  radius,
+  displayCount,
+  value,
+}: WheelWebItemProps) => {
+  const baseOpacity = displayValue?.value !== value ? 0.3 : 1;
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const offset = (radius * 2) / displayCount;
+    const shifted = interpolate(
+      translateY.value,
+      [-radius, radius],
+      [-radius + offset * (index - currentIndex), radius + offset * (index - currentIndex)],
+      Extrapolate.EXTEND
+    );
+    const angle = interpolate(
+      shifted,
+      [-radius, radius],
+      [-Math.PI / 2, Math.PI / 2],
+      Extrapolate.CLAMP
+    );
+    const translate = radius * Math.sin(angle);
+    const rotateX = (angle * 180) / Math.PI;
+
+    return {
+      position: 'absolute',
+      height: ITEM_HEIGHT - 10,
+      opacity: baseOpacity,
+      alignItems: 'center',
+      justifyContent: 'center',
+      transform: [{ translateY: translate }, { rotateX: `${rotateX}deg` }],
+    };
+  }, [baseOpacity, currentIndex, displayCount, index, radius, translateY]);
+
+  return (
+    <Animated.View style={animatedStyle}>
+      <BodyText size="lg">{displayValue?.text}</BodyText>
+    </Animated.View>
+  );
+};
+
+const TimePickerWheel = ({ value, setValue = () => {}, items }: TimePickerWheelProps) => {
+  const displayCount = 5;
+  const translateY = useSharedValue(0);
+  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 handlePanEnd = useCallback(
+    (deltaY: number) => {
+      let newValueIndex = valueIndex - Math.round(deltaY / ((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) {
+        return;
+      }
+      if (newValue?.value) {
+        setValue(newValue.value);
+      } else if (items[0]?.value) {
+        setValue(items[0].value);
+      }
+    },
+    [circular, displayCount, items, radius, setValue, value, valueIndex]
+  );
+
+  const panGesture = useMemo(
+    () =>
+      Gesture.Pan()
+        .onUpdate(event => {
+          translateY.value = event.translationY;
+        })
+        .onEnd(event => {
+          runOnJS(handlePanEnd)(event.translationY);
+          translateY.value = 0;
+        }),
+    [handlePanEnd, 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 currentIndex = Math.max(
+    0,
+    displayValues.findIndex(item => item?.value === value)
+  );
+
+  return (
+    <GestureDetector gesture={panGesture}>
+      <View style={styles.container}>
+        <View
+          style={[
+            styles.selectedIndicator,
+            {
+              transform: [{ translateY: -ITEM_HEIGHT / 2 }],
+              height: ITEM_HEIGHT,
+            },
+          ]}
+        />
+        {displayValues?.map((displayValue, index) => (
+          <WheelWebItem
+            key={`${displayValue?.text}-${index}`}
+            displayValue={displayValue}
+            index={index}
+            currentIndex={currentIndex}
+            translateY={translateY}
+            radius={radius}
+            displayCount={displayCount}
+            value={value}
+          />
+        ))}
+      </View>
+    </GestureDetector>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    minWidth: 30,
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 208,
+    ...Platform.select({
+      web: {
+        cursor: 'pointer',
+        userSelect: 'none',
+      },
+    }),
+  },
+  selectedIndicator: {
+    position: 'absolute',
+    width: theme.components.timePicker.time.item.width,
+    height: theme.components.timePicker.time.item.height,
+    top: '50%',
+    backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
+    borderRadius: theme.borderRadius.md,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+}));
+
+const customComparator = (
+  prev: Readonly<TimePickerWheelProps>,
+  next: Readonly<TimePickerWheelProps>
+) => {
+  const areEqual =
+    prev.value === next.value && prev.setValue === next.setValue && isEqual(prev.items, next.items);
+
+  return areEqual;
+};
+
+export default memo(TimePickerWheel, customComparator);

package/src/components/TimePicker/index.ts

@@ -0,0 +1,8 @@
+import 'dayjs/locale/en';
+import '../DatePicker/polyfill';
+
+export type { BottomSheetMethods as TimePickerMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
+export type { DateType } from '../DatePicker/DatePicker.props';
+
+export { default as TimePicker } from './TimePicker';
+export type { TimePickerProps } from './TimePicker.props';