@utilitywarehouse/hearth-react-native 0.3.0 → 0.4.0

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);

package/build/components/DatePicker/utils.d.ts

@@ -0,0 +1,212 @@
+import dayjs from 'dayjs';
+import type { CalendarDay, CalendarMonth, CalendarWeek, DateType, Numerals } from './DatePicker.props';
+export declare const CALENDAR_FORMAT = "YYYY-MM-DD HH:mm";
+export declare const DATE_FORMAT = "YYYY-MM-DD";
+export declare const YEAR_PAGE_SIZE = 12;
+export declare const getMonths: () => dayjs.MonthNames;
+export declare const getMonthName: (month: number) => string;
+/**
+ * Get months array
+ *
+ * @returns months array
+ */
+export declare const getMonthsArray: () => CalendarMonth[];
+/**
+ * Get weekdays
+ *
+ * @param locale - locale
+ * @param firstDayOfWeek - first day of week
+ * @param format - format short, min or full
+ *
+ * @returns weekdays
+ */
+export declare const getWeekdays: (firstDayOfWeek: number) => CalendarWeek[];
+export declare const getFormated: (date: DateType) => string;
+export declare const getDateMonth: (date: DateType) => number;
+export declare const getDateYear: (date: DateType) => number;
+/**
+ * Check if two dates are on the same day
+ *
+ * @param a - date to check
+ * @param b - date to check
+ *
+ * @returns true if dates are on the same day, false otherwise
+ */
+export declare function areDatesOnSameDay(a: DateType, b: DateType): boolean;
+/**
+ * Check if date is between two dates
+ *
+ * @param date - date to check
+ * @param options - options
+ *
+ * @returns true if date is between two dates, false otherwise
+ */
+export declare function isDateBetween(date: DateType, { startDate, endDate, }: {
+    startDate?: DateType;
+    endDate?: DateType;
+}): boolean;
+/**
+ * Check if date is disabled
+ *
+ * @param date - date to check
+ * @param options - options
+ *
+ * @returns true if date is disabled, false otherwise
+ */
+export declare function isDateDisabled(date: dayjs.Dayjs, { minDate, maxDate, enabledDates, disabledDates, }: {
+    minDate?: DateType;
+    maxDate?: DateType;
+    enabledDates?: DateType[] | ((date: DateType) => boolean) | undefined;
+    disabledDates?: DateType[] | ((date: DateType) => boolean) | undefined;
+}): boolean;
+/**
+ * Check if year is disabled
+ *
+ * @param year - year to check
+ * @param options - options
+ *
+ * @returns true if year is disabled, false otherwise
+ */
+export declare function isYearDisabled(year: number, { minDate, maxDate, }: {
+    minDate?: DateType;
+    maxDate?: DateType;
+}): boolean;
+/**
+ * Check if month is disabled
+ *
+ * @param month - month to check
+ * @param date - date to check
+ * @param options - options
+ *
+ * @returns true if month is disabled, false otherwise
+ */
+export declare function isMonthDisabled(month: number, date: DateType, { minDate, maxDate, }: {
+    minDate?: DateType;
+    maxDate?: DateType;
+}): boolean;
+/**
+ * Get formated date
+ *
+ * @param date - date to get formated date from
+ * @param format - format to get formated date from
+ *
+ * @returns formated date
+ */
+export declare const getFormatedDate: (date: DateType, format: string) => string;
+/**
+ * Get date
+ *
+ * @param date - date to get
+ *
+ * @returns date
+ */
+export declare const getDate: (date: DateType) => dayjs.Dayjs;
+/**
+ * Get year range
+ *
+ * @param year - year to get year range from
+ *
+ * @returns year range
+ */
+export declare const getYearRange: (year: number) => number[];
+/**
+ * Get days in month
+ *
+ * @param date - date to get days in month from
+ * @param showOutsideDays - whether to show outside days
+ * @param firstDayOfWeek - first day of week, number 0-6, 0 – Sunday, 6 – Saturday
+ *
+ * @returns days in month
+ */
+export declare function getDaysInMonth(date: DateType, showOutsideDays: boolean | undefined, firstDayOfWeek: number): {
+    prevMonthDays: number;
+    prevMonthOffset: number;
+    daysInCurrentMonth: number;
+    daysInNextMonth: number;
+    fullDaysInMonth: number;
+};
+/**
+ * Get first day of month
+ *
+ * @param date - date to get first day of month from
+ * @param firstDayOfWeek - first day of week, number 0-6, 0 – Sunday, 6 – Saturday
+ *
+ * @returns first day of month
+ */
+export declare function getFirstDayOfMonth(date: DateType, firstDayOfWeek: number): number;
+/**
+ * Get start of day
+ *
+ * @param date - date to get start of day from
+ *
+ * @returns start of day
+ */
+export declare function getStartOfDay(date: DateType): DateType;
+/**
+ * Get end of day
+ *
+ * @param date - date to get end of day from
+ *
+ * @returns end of day
+ */
+export declare function getEndOfDay(date: DateType): DateType;
+/**
+ * Convert date to unix timestamp
+ *
+ * @param date - date to convert
+ *
+ * @returns unix timestamp
+ */
+export declare function dateToUnix(date: DateType): number;
+/**
+ * Remove time from date
+ *
+ * @param date - date to remove time from
+ *
+ * @returns date with time removed
+ */
+export declare function removeTime(date: DateType, timeZone: string | undefined): DateType;
+/**
+ * Get detailed date object
+ *
+ * @param date Get detailed date object
+ *
+ * @returns parsed date object
+ */
+export declare const getParsedDate: (date: DateType) => {
+    year: number;
+    month: number;
+    hour: number;
+    hour12: number;
+    minute: number;
+    period: string;
+};
+/**
+ * Calculate month days array based on current date
+ *
+ * @param datetime - The current date that selected
+ * @param showOutsideDays
+ * @param minDate - min selectable date
+ * @param maxDate - max selectable date
+ * @param firstDayOfWeek - first day of week, number 0-6, 0 – Sunday, 6 – Saturday
+ * @param enabledDates - array of enabled dates, or a function that returns true for a given date (takes precedence over disabledDates)
+ * @param disabledDates - array of disabled dates, or a function that returns true for a given date
+ * @param prevMonthDays - number of days in the previous month
+ * @param prevMonthOffset - number of days to offset the previous month
+ * @param daysInCurrentMonth - number of days in the current month
+ * @param daysInNextMonth - number of days in the next month
+ *
+ * @returns days array based on current date
+ */
+export declare const getMonthDays: (datetime: DateType, showOutsideDays: boolean, minDate: DateType, maxDate: DateType, firstDayOfWeek: number, enabledDates: DateType[] | ((date: DateType) => boolean) | undefined, disabledDates: DateType[] | ((date: DateType) => boolean) | undefined, prevMonthDays: number, prevMonthOffset: number, daysInCurrentMonth: number, daysInNextMonth: number, numerals: Numerals) => CalendarDay[];
+/**
+ * Deep compare memo
+ *
+ * @param value - value to compare
+ * @param deps - dependencies
+ *
+ * @returns memoized value
+ */
+export declare function useDeepCompareMemo<T>(value: T, deps: any[]): T;
+export declare const numeralSystems: Record<Numerals, readonly string[]>;
+export declare function formatNumber(value: number, numerals: Numerals): string;