react-native-molecules 0.5.0-beta.0

package/components/DatePickerInline/Swiper.tsx

@@ -0,0 +1,172 @@
+import {
+    type CSSProperties,
+    memo,
+    type UIEvent,
+    useCallback,
+    useEffect,
+    useLayoutEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { useLatest } from '../../hooks';
+import AutoSizer from './AutoSizer';
+import { beginOffset, estimatedMonthHeight, totalMonths } from './dateUtils';
+import { getIndexFromVerticalOffset, getMonthHeight, getVerticalMonthsOffset } from './Month';
+import type { SwiperProps } from './SwiperUtils';
+import { montHeaderHeight } from './utils';
+
+function Swiper({ scrollMode, renderItem, renderHeader, renderFooter, initialIndex }: SwiperProps) {
+    const isHorizontal = scrollMode === 'horizontal';
+
+    return (
+        <>
+            {renderHeader && renderHeader()}
+            {isHorizontal ? (
+                <View style={styles.flex1}>{renderItem(initialIndex)}</View>
+            ) : (
+                <AutoSizer>
+                    {({ width, height }) => (
+                        <VerticalScroller
+                            width={width}
+                            height={height}
+                            initialIndex={initialIndex}
+                            estimatedHeight={estimatedMonthHeight}
+                            renderItem={renderItem}
+                        />
+                    )}
+                </AutoSizer>
+            )}
+            {renderFooter && renderFooter()}
+        </>
+    );
+}
+
+const visibleArray = (i: number) => [i - 2, i - 1, i, i + 1, i + 2];
+
+function VerticalScroller({
+    width,
+    height,
+    initialIndex,
+    estimatedHeight,
+    renderItem,
+}: {
+    renderItem: (index: number) => any;
+    width: number;
+    height: number;
+    initialIndex: number;
+    estimatedHeight: number;
+}) {
+    const idx = useRef<number>(initialIndex);
+    const [visibleIndexes, setVisibleIndexes] = useState<number[]>(visibleArray(initialIndex));
+
+    const parentRef = useRef<HTMLDivElement | null>(null);
+
+    useIsomorphicLayoutEffect(() => {
+        const element = parentRef.current;
+        if (!element) {
+            return;
+        }
+        const top = getVerticalMonthsOffset(idx.current) - montHeaderHeight;
+
+        element.scrollTo({
+            top,
+        });
+    }, [parentRef, idx]);
+
+    const setVisibleIndexesThrottled = useDebouncedCallback(setVisibleIndexes);
+
+    const onScroll = useCallback(
+        (e: UIEvent) => {
+            const top = e.currentTarget.scrollTop;
+            if (top === 0) {
+                return;
+            }
+
+            const offset = top - beginOffset;
+            const index = getIndexFromVerticalOffset(offset);
+
+            if (idx.current !== index) {
+                idx.current = index;
+                setVisibleIndexesThrottled(visibleArray(index));
+            }
+        },
+        [setVisibleIndexesThrottled],
+    );
+
+    const { containerStyle, innerContainerStyle, itemContainerStyle } = useMemo(() => {
+        return {
+            containerStyle: {
+                height,
+                width,
+                overflow: 'auto',
+            },
+            innerContainerStyle: {
+                height: estimatedHeight * totalMonths,
+                position: 'relative',
+            },
+            itemContainerStyle: (vi: number) => ({
+                willChange: 'transform',
+                transform: `translateY(${getVerticalMonthsOffset(visibleIndexes[vi])}px)`,
+                left: 0,
+                right: 0,
+                position: 'absolute',
+                height: getMonthHeight('vertical', visibleIndexes[vi]),
+                // transform: `translateY(${getMonthsOffset('vertical', vi)}px)`,
+            }),
+        };
+    }, [estimatedHeight, height, visibleIndexes, width]);
+
+    return (
+        <div ref={parentRef} style={containerStyle} onScroll={onScroll}>
+            <div style={innerContainerStyle as CSSProperties}>
+                {[0, 1, 2, 3, 4].map(vi => (
+                    <div key={vi} style={itemContainerStyle(vi) as CSSProperties}>
+                        {renderItem(visibleIndexes[vi])}
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+const styles = StyleSheet.create({
+    flex1: {
+        flex: 1,
+    },
+});
+
+export function useDebouncedCallback(callback: any): any {
+    const mounted = useRef<boolean>(true);
+    const latest = useLatest(callback);
+    const timerId = useRef<any>(null);
+
+    useEffect(() => {
+        return () => {
+            mounted.current = false;
+            if (timerId.current) {
+                window.cancelAnimationFrame(timerId.current);
+            }
+        };
+    }, [mounted, timerId]);
+
+    return useCallback(
+        (args: any) => {
+            if (timerId.current) {
+                window.cancelAnimationFrame(timerId.current);
+            }
+            timerId.current = window.requestAnimationFrame(function () {
+                if (mounted.current) {
+                    latest.current(args);
+                }
+            });
+        },
+        [mounted, timerId, latest],
+    );
+}
+
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+export default memo(Swiper);

package/components/DatePickerInline/SwiperUtils.ts

@@ -0,0 +1,40 @@
+import { type RefObject, useEffect } from 'react';
+
+import { useLatest } from '../../hooks';
+import { addMonths, differenceInMonths, getRealIndex, startAtIndex } from './dateUtils';
+
+export type SwiperProps = {
+    initialIndex: number;
+    scrollMode: 'horizontal' | 'vertical';
+    renderItem: (index: number) => any;
+    renderHeader?: () => any;
+    renderFooter?: () => any;
+};
+
+export function useYearChange(
+    onChange: (index: number | undefined) => void,
+    {
+        selectedYear,
+        currentIndexRef,
+    }: {
+        currentIndexRef: RefObject<number>;
+        selectedYear: number | undefined;
+    },
+) {
+    const onChangeRef = useLatest(onChange);
+    useEffect(() => {
+        if (selectedYear) {
+            const currentIndex = currentIndexRef.current || 0;
+            const currentDate = addMonths(new Date(), getRealIndex(currentIndex));
+            currentDate.setFullYear(selectedYear);
+
+            const today = new Date();
+            const months = differenceInMonths(today, currentDate);
+
+            const newIndex = startAtIndex + months;
+            if (currentIndex !== newIndex) {
+                onChangeRef.current(newIndex);
+            }
+        }
+    }, [currentIndexRef, onChangeRef, selectedYear]);
+}

package/components/DatePickerInline/Week.tsx

@@ -0,0 +1,67 @@
+import { Fragment, memo } from 'react';
+import { View, type ViewProps } from 'react-native';
+
+import { type DisableWeekDaysType, showWeekDay } from './dateUtils';
+import Day, { EmptyDay } from './Day';
+import { datePickerWeekStyles } from './utils';
+
+type Props = ViewProps & {
+    weekIndex: number;
+    generatedDays: {
+        beforeWeekDay: boolean;
+        afterWeekDay: boolean;
+        year: number;
+        month: number;
+        dayOfMonth: number;
+        dayIndex: number;
+        mode: 'single' | 'range' | 'multiple';
+        selected: boolean;
+        inRange: boolean;
+        leftCrop: boolean;
+        rightCrop: boolean;
+        isToday: boolean;
+        disabled: boolean;
+    }[];
+    onPressDate: (date: Date) => any;
+    disableWeekDays?: DisableWeekDaysType;
+};
+
+const Week = ({
+    weekIndex,
+    generatedDays,
+    onPressDate,
+    disableWeekDays,
+    style,
+    ...rest
+}: Props) => {
+    return (
+        <View style={[datePickerWeekStyles.root, style]} {...rest}>
+            {generatedDays
+                .filter(gd => showWeekDay(gd.dayIndex, disableWeekDays))
+                .map(gd => {
+                    return (
+                        <Fragment key={gd.dayIndex + weekIndex}>
+                            {gd.beforeWeekDay || gd.afterWeekDay ? (
+                                <EmptyDay />
+                            ) : (
+                                <Day
+                                    day={gd.dayOfMonth}
+                                    month={gd.month}
+                                    year={gd.year}
+                                    selected={gd.selected}
+                                    inRange={gd.inRange}
+                                    leftCrop={gd.leftCrop}
+                                    rightCrop={gd.rightCrop}
+                                    onPressDate={onPressDate}
+                                    isToday={gd.isToday}
+                                    disabled={gd.disabled}
+                                />
+                            )}
+                        </Fragment>
+                    );
+                })}
+        </View>
+    );
+};
+
+export default memo(Week);

package/components/DatePickerInline/YearPicker.tsx

@@ -0,0 +1,139 @@
+import { setYear } from 'date-fns';
+import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import { FlatList, StyleSheet, View } from 'react-native';
+
+import { getYearRange, resolveStateVariant } from '../../utils';
+import { HorizontalDivider } from '../HorizontalDivider';
+import { ListItem } from '../ListItem';
+import { useDatePickerStore } from './DatePickerContext';
+import { datePickerYearItemStyles, datePickerYearPickerStyles } from './utils';
+
+const ITEM_HEIGHT = 62;
+
+export default function YearPicker() {
+    const [{ startDateYear, endDateYear, localDate, pickerType }, setStore] = useDatePickerStore(
+        state => state,
+    );
+    const flatList = useRef<FlatList<number> | null>(null);
+    const years = useMemo(
+        () => getYearRange(startDateYear, endDateYear),
+        [startDateYear, endDateYear],
+    );
+    const selectingYear = pickerType === 'year';
+    const selectedYear = localDate.getFullYear();
+
+    // scroll to selected year
+    useEffect(() => {
+        if (flatList.current && selectingYear && selectedYear) {
+            const indexToGo = selectedYear - years[0];
+            flatList.current.scrollToOffset({
+                offset: (indexToGo / 3) * ITEM_HEIGHT - ITEM_HEIGHT,
+                animated: false,
+            });
+        }
+    }, [flatList, selectedYear, selectingYear, years]);
+
+    const { containerStyle, yearStyle } = useMemo(() => {
+        const { backgroundColor, ...rest } = datePickerYearPickerStyles.root;
+
+        return {
+            containerStyle: [
+                StyleSheet.absoluteFill,
+                styles.root,
+                { backgroundColor },
+                datePickerYearPickerStyles.yearContainer,
+                selectingYear ? styles.opacity1 : styles.opacity0,
+            ],
+            yearStyle: rest,
+        };
+    }, [selectingYear]);
+
+    const handleOnChange = useCallback(
+        (year: number) => {
+            setStore(prev => ({
+                localDate: setYear(prev.localDate, year),
+                pickerType: undefined,
+            }));
+        },
+        [setStore],
+    );
+
+    return (
+        <>
+            {selectingYear && (
+                <View style={containerStyle} pointerEvents={selectingYear ? 'auto' : 'none'}>
+                    <HorizontalDivider />
+                    <FlatList<number>
+                        ref={flatList}
+                        style={styles.list}
+                        data={years}
+                        renderItem={({ item }) => (
+                            <Year
+                                year={item}
+                                selected={selectedYear === item}
+                                onPressYear={handleOnChange}
+                                yearStyles={yearStyle}
+                            />
+                        )}
+                        keyExtractor={item => `${item}`}
+                        numColumns={3}
+                    />
+                </View>
+            )}
+        </>
+    );
+}
+
+function YearPure({
+    year,
+    selected,
+    onPressYear,
+    yearStyles,
+}: {
+    year: number;
+    selected: boolean;
+    onPressYear: (newYear: number) => any;
+    yearStyles: Record<string, any>;
+}) {
+    datePickerYearItemStyles.useVariants({
+        state: resolveStateVariant({
+            selected,
+        }) as any,
+    });
+
+    const handlePressYear = useCallback(() => {
+        onPressYear(year);
+    }, [year, onPressYear]);
+
+    return (
+        <ListItem
+            onPress={handlePressYear}
+            accessibilityRole="button"
+            accessibilityLabel={String(year)}
+            style={[datePickerYearItemStyles.yearButton, yearStyles]}
+            testID={`pick-year-${year}`}>
+            <ListItem.Title style={datePickerYearItemStyles.yearLabel} selectable={false}>
+                {year}
+            </ListItem.Title>
+        </ListItem>
+    );
+}
+const Year = memo(YearPure);
+
+const styles = StyleSheet.create({
+    root: {
+        flex: 1,
+        top: 56,
+        zIndex: 100,
+    },
+
+    list: {
+        flex: 1,
+    },
+    opacity0: {
+        opacity: 0,
+    },
+    opacity1: {
+        opacity: 1,
+    },
+});