@utilitywarehouse/hearth-react-native 0.24.0 → 0.26.0

package/build/components/DatePicker/time-picker/wheel-web.js

@@ -1,146 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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 { CONTAINER_HEIGHT } from '../enums';
-import { sin } from './animated-math';
-const ITEM_HEIGHT = 44;
-const WheelWeb = ({ value, setValue = () => { }, items }) => {
-    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 (_jsxs(View, { style: [styles.container], ...panResponder.panHandlers, children: [_jsx(View, { style: [
-                    styles.selectedIndicator,
-                    {
-                        transform: [{ translateY: -ITEM_HEIGHT / 2 }],
-                        height: ITEM_HEIGHT,
-                    },
-                ] }), displayValues?.map((displayValue, index) => {
-                const animatedAngle = animatedAngles[index];
-                return (_jsx(Animated.View, { 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,
-                    }, children: _jsx(BodyText, { children: displayValue?.text }) }, `${displayValue?.text}-${index}`));
-            })] }));
-};
-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, next) => {
-    const areEqual = prev.value === next.value && prev.setValue === next.setValue && isEqual(prev.items, next.items);
-    return areEqual;
-};
-export default memo(WheelWeb, customComparator);

package/build/components/DatePicker/time-picker/wheel.d.ts

@@ -1,8 +0,0 @@
-import { PickerOption } from '../DatePicker.props';
-type WheelProps = {
-    value: number | string;
-    setValue?: (value: any) => void;
-    items: PickerOption[];
-};
-declare const _default: import("react").MemoExoticComponent<(props: WheelProps) => import("react/jsx-runtime").JSX.Element>;
-export default _default;

package/build/components/DatePicker/time-picker/wheel.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { memo } from 'react';
-import { Platform } from 'react-native';
-import WheelNative from './wheel-native';
-import WheelWeb from './wheel-web';
-const Wheel = (props) => {
-    const Component = Platform.OS === 'web' ? WheelWeb : WheelNative;
-    return _jsx(Component, { ...props });
-};
-export default memo(Wheel);

package/src/components/DatePicker/TimePicker.tsx

@@ -1,141 +0,0 @@
-import dayjs from 'dayjs';
-import { useCallback, useMemo } from 'react';
-import { ScrollView, View } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { BodyText } from '../BodyText';
-import { useDatePickerContext } from './DatePicker.context';
-import { Numerals, PickerOption } from './DatePicker.props';
-import { CONTAINER_HEIGHT } from './enums';
-import PeriodPicker from './time-picker/period-picker';
-import Wheel from './time-picker/wheel';
-import { formatNumber, getParsedDate } from './utils';
-
-export type Period = 'AM' | 'PM';
-
-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 TimePicker = () => {
-  const {
-    currentDate,
-    date,
-    onSelectDate,
-    timeZone,
-    numerals = 'latn',
-    use12Hours,
-  } = useDatePickerContext();
-
-  const hours = useMemo(
-    () => createNumberList(use12Hours ? 12 : 24, numerals, use12Hours ? 1 : 0),
-    [numerals, use12Hours]
-  );
-
-  const minutes = useMemo(() => createNumberList(60, numerals), [numerals]);
-
-  const { hour, hour12, minute, period } = getParsedDate(date || currentDate);
-
-  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(date, timeZone).hour(hour24).minute(minute);
-      onSelectDate(newDate);
-    },
-    [date, onSelectDate, timeZone, use12Hours, period, minute]
-  );
-
-  const handleChangeMinute = useCallback(
-    (value: number) => {
-      const newDate = dayjs.tz(date, timeZone).minute(value);
-      onSelectDate(newDate);
-    },
-    [date, 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(date || currentDate, timeZone).hour(newHour);
-      onSelectDate(newDate);
-    },
-    [date, currentDate, onSelectDate, timeZone, hour, hour12]
-  );
-
-  return (
-    <ScrollView
-      horizontal={true}
-      scrollEnabled={false}
-      contentContainerStyle={styles.container}
-      testID="time-selector"
-    >
-      <View style={styles.timePickerContainer}>
-        <View style={styles.wheelContainer}>
-          <Wheel value={use12Hours ? hour12 : hour} items={hours} setValue={handleChangeHour} />
-        </View>
-        <BodyText style={styles.timeSeparator}>:</BodyText>
-        <View style={styles.wheelContainer}>
-          <Wheel value={minute} items={minutes} setValue={handleChangeMinute} />
-        </View>
-      </View>
-      {use12Hours && period ? (
-        <View style={styles.periodContainer}>
-          <PeriodPicker value={period} setValue={handlePeriodChange} />
-        </View>
-      ) : null}
-    </ScrollView>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  wheelContainer: {
-    flex: 1,
-  },
-  timePickerContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: CONTAINER_HEIGHT / 2,
-    height: CONTAINER_HEIGHT / 2,
-    flexDirection: 'row',
-  },
-  timeSeparator: {
-    marginHorizontal: 5,
-  },
-  periodContainer: {
-    marginLeft: 10,
-  },
-});
-
-export default TimePicker;

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

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

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

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

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

@@ -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,
-  },
-});