@utilitywarehouse/hearth-react-native 0.3.1 → 0.4.0

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { Pressable, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../../BodyText';
+const PeriodWeb = ({ value, setValue = () => { } }) => {
+    return (_jsx(Pressable, { onPress: () => setValue(value == 'AM' ? 'PM' : 'AM'), children: _jsx(View, { style: [styles.period], children: _jsx(BodyText, { children: value }) }) }));
+};
+const styles = StyleSheet.create({
+    period: {
+        width: 65,
+        height: 44,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});
+const customComparator = (prev, next) => {
+    const areEqual = prev.value === next.value && prev.setValue === next.setValue;
+    return areEqual;
+};
+export default memo(PeriodWeb, customComparator);

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

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

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { Platform } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import WheelPicker from './wheel-picker';
+const WheelNative = ({ value, setValue = () => { }, items }) => {
+    return (_jsx(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/build/components/DatePicker/time-picker/wheel-picker/index.d.ts

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

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

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

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Animated, StyleProp, ViewStyle } from 'react-native';
+import { PickerOption } from '../../DatePicker.props';
+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;
+}
+declare const _default: React.NamedExoticComponent<ItemProps>;
+export default _default;

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

@@ -0,0 +1,97 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Animated } from 'react-native';
+import { BodyText } from '../../../BodyText';
+import styles from './wheel-picker.style';
+const WheelPickerItem = ({ 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 (_jsx(Animated.View, { style: [
+            styles.option,
+            style,
+            {
+                height,
+                opacity,
+                transform: [{ translateY }, { rotateX }, { scale }],
+            },
+        ], children: _jsx(BodyText, { children: option?.text }) }));
+};
+export default React.memo(WheelPickerItem);

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { FlatListProps, StyleProp, ViewProps, ViewStyle } from 'react-native';
+import { PickerOption } from '../../DatePicker.props';
+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'>;
+}
+declare const _default: React.NamedExoticComponent<Props>;
+export default _default;

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

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, Platform, View, } from 'react-native';
+import WheelPickerItem from './wheel-picker-item';
+import styles from './wheel-picker.style';
+const WheelPicker = ({ value, options, onChange, selectedIndicatorStyle = {}, containerStyle = {}, itemStyle = {}, itemHeight = 40, scaleFunction = (x) => 1.0 ** x, rotationFunction = (x) => 1 - Math.pow(1 / 2, x), opacityFunction = (x) => 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(null);
+    const [scrollY] = useState(new Animated.Value(selectedIndex * itemHeight));
+    const containerHeight = (1 + visibleRest * 2) * itemHeight;
+    const paddedOptions = useMemo(() => {
+        const array = [...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) => {
+        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) => {
+        momentumStarted.current = false;
+        handleScrollEnd(event);
+    };
+    const handleScrollEndDrag = (event) => {
+        // 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);
+            }
+        }, 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 (_jsxs(View, { style: [styles.container, { height: containerHeight }, containerStyle], ...containerProps, children: [_jsx(View, { style: [
+                    styles.selectedIndicator,
+                    selectedIndicatorStyle,
+                    {
+                        transform: [{ translateY: -itemHeight / 2 }],
+                        height: itemHeight,
+                    },
+                ] }), _jsx(Animated.FlatList, { ...flatListProps, ref: flatListRef, nestedScrollEnabled: true, 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 }) => (_jsx(WheelPickerItem, { index: index, option: option, style: itemStyle, height: itemHeight, currentScrollIndex: currentScrollIndex, scaleFunction: scaleFunction, rotationFunction: rotationFunction, opacityFunction: opacityFunction, visibleRest: visibleRest }, `option-${index}`)) })] }));
+};
+export default memo(WheelPicker);

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

@@ -0,0 +1,23 @@
+declare const _default: {
+    container: {
+        position: "relative";
+    };
+    selectedIndicator: {
+        position: "absolute";
+        width: "100%";
+        top: "50%";
+    };
+    scrollView: {
+        overflow: "hidden";
+        flex: number;
+    };
+    option: {
+        alignItems: "center";
+        justifyContent: "center";
+        paddingHorizontal: number;
+        zIndex: number;
+    };
+} & {
+    useVariants: (variants: never) => void;
+};
+export default _default;

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

@@ -0,0 +1,21 @@
+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/build/components/DatePicker/time-picker/wheel-web.d.ts

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

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

@@ -0,0 +1,148 @@
+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, { 
+                    // 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,
+                    }, 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

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

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