react-native-molecules 0.5.0-beta.3 → 0.5.0-beta.30

package/components/DatePickerInline/Swiper.tsx

@@ -1,3 +1,4 @@
+import { useLatest } from '@react-native-molecules/utils/hooks';
 import {
     type CSSProperties,
     memo,
@@ -9,12 +10,12 @@ import {
     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 { beginOffset, estimatedMonthHeight, getInitialIndex, totalMonths } from './dateUtils';
+import { addMonths, getRealIndex } from './dateUtils';
 import { getIndexFromVerticalOffset, getMonthHeight, getVerticalMonthsOffset } from './Month';
+import { useDatePickerInlineStore } from './store';
 import type { SwiperProps } from './SwiperUtils';
 import { montHeaderHeight } from './utils';
 
@@ -25,7 +26,16 @@ function Swiper({ scrollMode, renderItem, renderHeader, renderFooter, initialInd
         <>
             {renderHeader && renderHeader()}
             {isHorizontal ? (
-                <View style={styles.flex1}>{renderItem(initialIndex)}</View>
+                <AutoSizer>
+                    {({ width, height }) => (
+                        <HorizontalScroller
+                            width={width}
+                            height={height}
+                            initialIndex={initialIndex}
+                            renderItem={renderItem}
+                        />
+                    )}
+                </AutoSizer>
             ) : (
                 <AutoSizer>
                     {({ width, height }) => (
@@ -45,6 +55,142 @@ function Swiper({ scrollMode, renderItem, renderHeader, renderFooter, initialInd
 }
 
 const visibleArray = (i: number) => [i - 2, i - 1, i, i + 1, i + 2];
+const visibleHorizontalArray = (i: number) => [i - 1, i, i + 1];
+
+function HorizontalScroller({
+    width,
+    height,
+    initialIndex,
+    renderItem,
+}: {
+    renderItem: (index: number) => any;
+    width: number;
+    height: number;
+    initialIndex: number;
+}) {
+    const idx = useRef<number>(initialIndex);
+    const [visibleIndexes, setVisibleIndexes] = useState<number[]>(
+        visibleHorizontalArray(initialIndex),
+    );
+    const parentRef = useRef<HTMLDivElement | null>(null);
+    const [{ localDate }, setStore] = useDatePickerInlineStore(state => state);
+    const settleTimerRef = useRef<number | null>(null);
+    const isRecenteringRef = useRef(false);
+
+    const syncIndex = useCallback(
+        (index: number) => {
+            idx.current = index;
+            setVisibleIndexes(visibleHorizontalArray(index));
+            setStore(prev => ({
+                ...prev,
+                localDate: addMonths(new Date(), getRealIndex(index)),
+            }));
+        },
+        [setStore],
+    );
+
+    const scrollToCenter = useCallback(
+        (behavior: ScrollBehavior = 'auto') => {
+            const element = parentRef.current;
+            if (!element) return;
+
+            isRecenteringRef.current = true;
+            element.scrollTo({
+                left: width,
+                top: 0,
+                behavior,
+            });
+            window.requestAnimationFrame(() => {
+                isRecenteringRef.current = false;
+            });
+        },
+        [width],
+    );
+
+    useIsomorphicLayoutEffect(() => {
+        scrollToCenter();
+    }, [scrollToCenter, visibleIndexes]);
+
+    useEffect(() => {
+        const targetIndex = getInitialIndex(localDate);
+        if (targetIndex === idx.current) return;
+        idx.current = targetIndex;
+        setVisibleIndexes(visibleHorizontalArray(targetIndex));
+    }, [localDate]);
+
+    useEffect(() => {
+        return () => {
+            if (settleTimerRef.current) {
+                window.clearTimeout(settleTimerRef.current);
+            }
+        };
+    }, []);
+
+    const onScroll = useCallback(
+        (e: UIEvent) => {
+            if (isRecenteringRef.current) {
+                return;
+            }
+
+            const left = e.currentTarget.scrollLeft;
+
+            if (settleTimerRef.current) {
+                window.clearTimeout(settleTimerRef.current);
+            }
+
+            settleTimerRef.current = window.setTimeout(() => {
+                const direction = left > width * 1.5 ? 1 : left < width * 0.5 ? -1 : 0;
+
+                if (direction !== 0) {
+                    syncIndex(idx.current + direction);
+                }
+
+                scrollToCenter(direction === 0 ? 'smooth' : 'auto');
+            }, 120);
+        },
+        [scrollToCenter, syncIndex, width],
+    );
+
+    const { containerStyle, innerContainerStyle, itemContainerStyle } = useMemo(() => {
+        return {
+            containerStyle: {
+                height,
+                width,
+                overflowX: 'auto',
+                overflowY: 'hidden',
+                scrollSnapType: 'x mandatory',
+                WebkitOverflowScrolling: 'touch',
+                scrollbarWidth: 'none',
+                msOverflowStyle: 'none',
+            },
+            innerContainerStyle: {
+                width: width * 3,
+                height,
+                position: 'relative',
+            },
+            itemContainerStyle: (vi: number) => ({
+                left: width * vi,
+                top: 0,
+                bottom: 0,
+                position: 'absolute',
+                width,
+                scrollSnapAlign: 'start',
+            }),
+        };
+    }, [height, width]);
+
+    return (
+        <div ref={parentRef} style={containerStyle as CSSProperties} onScroll={onScroll}>
+            <div style={innerContainerStyle as CSSProperties}>
+                {[0, 1, 2].map(vi => (
+                    <div key={vi} style={itemContainerStyle(vi) as CSSProperties}>
+                        {renderItem(visibleIndexes[vi])}
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}
 
 function VerticalScroller({
     width,
@@ -63,19 +209,30 @@ function VerticalScroller({
     const [visibleIndexes, setVisibleIndexes] = useState<number[]>(visibleArray(initialIndex));
 
     const parentRef = useRef<HTMLDivElement | null>(null);
+    const [{ localDate }, setStore] = useDatePickerInlineStore(state => state);
 
     useIsomorphicLayoutEffect(() => {
         const element = parentRef.current;
         if (!element) {
             return;
         }
-        const top = getVerticalMonthsOffset(idx.current) - montHeaderHeight;
-
         element.scrollTo({
-            top,
+            top: getVerticalMonthsOffset(idx.current) - montHeaderHeight,
         });
     }, [parentRef, idx]);
 
+    useEffect(() => {
+        const targetIndex = getInitialIndex(localDate);
+        if (targetIndex === idx.current) return;
+        idx.current = targetIndex;
+        setVisibleIndexes(visibleArray(targetIndex));
+        const element = parentRef.current;
+        if (!element) return;
+        element.scrollTo({
+            top: getVerticalMonthsOffset(targetIndex) - montHeaderHeight,
+        });
+    }, [localDate]);
+
     const setVisibleIndexesThrottled = useDebouncedCallback(setVisibleIndexes);
 
     const onScroll = useCallback(
@@ -91,9 +248,13 @@ function VerticalScroller({
             if (idx.current !== index) {
                 idx.current = index;
                 setVisibleIndexesThrottled(visibleArray(index));
+                setStore(prev => ({
+                    ...prev,
+                    localDate: addMonths(new Date(), getRealIndex(index)),
+                }));
             }
         },
-        [setVisibleIndexesThrottled],
+        [setStore, setVisibleIndexesThrottled],
     );
 
     const { containerStyle, innerContainerStyle, itemContainerStyle } = useMemo(() => {
@@ -132,12 +293,6 @@ function VerticalScroller({
     );
 }
 
-const styles = StyleSheet.create({
-    flex1: {
-        flex: 1,
-    },
-});
-
 export function useDebouncedCallback(callback: any): any {
     const mounted = useRef<boolean>(true);
     const latest = useLatest(callback);

package/components/DatePickerInline/SwiperUtils.ts

@@ -1,6 +1,6 @@
+import { useLatest } from '@react-native-molecules/utils/hooks';
 import { type RefObject, useEffect } from 'react';
 
-import { useLatest } from '../../hooks';
 import { addMonths, differenceInMonths, getRealIndex, startAtIndex } from './dateUtils';
 
 export type SwiperProps = {

package/components/DatePickerInline/Week.tsx

@@ -10,6 +10,7 @@ type Props = ViewProps & {
     generatedDays: {
         beforeWeekDay: boolean;
         afterWeekDay: boolean;
+        outside: boolean;
         year: number;
         month: number;
         dayOfMonth: number;
@@ -24,6 +25,7 @@ type Props = ViewProps & {
     }[];
     onPressDate: (date: Date) => any;
     disableWeekDays?: DisableWeekDaysType;
+    showOutsideDays?: boolean;
 };
 
 const Week = ({
@@ -31,6 +33,7 @@ const Week = ({
     generatedDays,
     onPressDate,
     disableWeekDays,
+    showOutsideDays,
     style,
     ...rest
 }: Props) => {
@@ -39,9 +42,10 @@ const Week = ({
             {generatedDays
                 .filter(gd => showWeekDay(gd.dayIndex, disableWeekDays))
                 .map(gd => {
+                    const isOutside = gd.beforeWeekDay || gd.afterWeekDay;
                     return (
                         <Fragment key={gd.dayIndex + weekIndex}>
-                            {gd.beforeWeekDay || gd.afterWeekDay ? (
+                            {isOutside && !showOutsideDays ? (
                                 <EmptyDay />
                             ) : (
                                 <Day
@@ -55,6 +59,7 @@ const Week = ({
                                     onPressDate={onPressDate}
                                     isToday={gd.isToday}
                                     disabled={gd.disabled}
+                                    outside={isOutside}
                                 />
                             )}
                         </Fragment>

package/components/DatePickerInline/YearPicker.tsx

@@ -1,139 +1,281 @@
 import { setYear } from 'date-fns';
-import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import { memo, useCallback, useLayoutEffect, 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 { datePickerMonthItemStyles, datePickerMonthPickerStyles } from '../DatePicker/utils';
+import { Divider } from '../Divider';
+import { Icon } from '../Icon';
+import { List, type ListItemId, useListContextValue } from '../List';
+import { Text } from '../Text';
+import { useDatePickerInlineStore } from './store';
 import { datePickerYearItemStyles, datePickerYearPickerStyles } from './utils';
 
-const ITEM_HEIGHT = 62;
+type YearListItem = { id: number; label: string };
 
-export default function YearPicker() {
-    const [{ startDateYear, endDateYear, localDate, pickerType }, setStore] = useDatePickerStore(
-        state => state,
-    );
-    const flatList = useRef<FlatList<number> | null>(null);
+const GRID_ITEM_HEIGHT = 62;
+const NUM_COLUMNS = 3;
+const LIST_ITEM_HEIGHT = 46;
+
+type YearPickerProps = {
+    layout?: 'grid' | 'list';
+};
+
+export default function YearPicker({ layout = 'grid' }: YearPickerProps) {
+    if (layout === 'list') return <YearPickerList />;
+    return <YearPickerGrid />;
+}
+
+function YearPickerGrid() {
+    const [{ startDateYear, endDateYear, localDate, pickerType }, setStore] =
+        useDatePickerInlineStore(state => state);
     const years = useMemo(
         () => getYearRange(startDateYear, endDateYear),
         [startDateYear, endDateYear],
     );
+    const yearItems = useMemo(
+        () => years.map(year => ({ id: year, label: String(year) })),
+        [years],
+    );
     const selectingYear = pickerType === 'year';
     const selectedYear = localDate.getFullYear();
+    const flatListRef = useRef<FlatList<YearListItem> | null>(null);
+
+    const initialScrollOffset = useMemo(() => {
+        if (years.length === 0) return 0;
+        const totalRows = Math.ceil(years.length / NUM_COLUMNS);
+        const unclampedRow = Math.floor((selectedYear - years[0]) / NUM_COLUMNS);
+        const rowIndex = Math.min(Math.max(0, unclampedRow), Math.max(0, totalRows - 1));
+        return rowIndex * GRID_ITEM_HEIGHT;
+    }, [selectedYear, years]);
 
-    // 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]);
+    useLayoutEffect(() => {
+        if (!selectingYear) return;
+        flatListRef.current?.scrollToOffset({ offset: initialScrollOffset, animated: false });
+    }, [selectingYear, initialScrollOffset]);
 
     const { containerStyle, yearStyle } = useMemo(() => {
         const { backgroundColor, ...rest } = datePickerYearPickerStyles.root;
-
         return {
             containerStyle: [
                 StyleSheet.absoluteFill,
-                styles.root,
+                gridStyles.root,
                 { backgroundColor },
                 datePickerYearPickerStyles.yearContainer,
-                selectingYear ? styles.opacity1 : styles.opacity0,
+                selectingYear ? gridStyles.opacity1 : gridStyles.opacity0,
             ],
             yearStyle: rest,
         };
     }, [selectingYear]);
 
     const handleOnChange = useCallback(
-        (year: number) => {
+        (value: ListItemId | null) => {
+            if (typeof value !== 'number') return;
             setStore(prev => ({
-                localDate: setYear(prev.localDate, year),
+                localDate: setYear(prev.localDate, value),
                 pickerType: undefined,
             }));
         },
         [setStore],
     );
 
+    const getRowLayout = useCallback(
+        (_data: ArrayLike<YearListItem> | null | undefined, index: number) => ({
+            length: GRID_ITEM_HEIGHT,
+            offset: GRID_ITEM_HEIGHT * index,
+            index,
+        }),
+        [],
+    );
+
     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>
-            )}
-        </>
+        <List multiple={false} value={selectedYear} onChange={handleOnChange}>
+            <View style={containerStyle} pointerEvents={selectingYear ? 'auto' : 'none'}>
+                <Divider />
+                <FlatList<YearListItem>
+                    ref={flatListRef}
+                    style={gridStyles.list}
+                    data={yearItems}
+                    numColumns={NUM_COLUMNS}
+                    contentContainerStyle={gridStyles.grid}
+                    columnWrapperStyle={gridStyles.row}
+                    renderItem={({ item }) => (
+                        <View style={gridStyles.cell}>
+                            <YearPill year={item.id} yearStyles={yearStyle} />
+                        </View>
+                    )}
+                    keyExtractor={item => `${item.id}`}
+                    getItemLayout={getRowLayout}
+                    initialScrollIndex={Math.floor(initialScrollOffset / GRID_ITEM_HEIGHT)}
+                    removeClippedSubviews
+                />
+            </View>
+        </List>
     );
 }
 
-function YearPure({
-    year,
-    selected,
-    onPressYear,
-    yearStyles,
-}: {
-    year: number;
-    selected: boolean;
-    onPressYear: (newYear: number) => any;
-    yearStyles: Record<string, any>;
-}) {
+function YearPillPure({ year, yearStyles }: { year: number; yearStyles: Record<string, any> }) {
+    const isSelected = useListContextValue(state => {
+        const selectedValue = state.value as any;
+        return (selectedValue?.id ?? selectedValue) === year;
+    });
+
     datePickerYearItemStyles.useVariants({
-        state: resolveStateVariant({
-            selected,
-        }) as any,
+        state: resolveStateVariant({ selected: isSelected }) as any,
     });
 
-    const handlePressYear = useCallback(() => {
-        onPressYear(year);
-    }, [year, onPressYear]);
+    return (
+        <List.Item
+            value={year}
+            accessibilityRole="button"
+            accessibilityLabel={String(year)}
+            style={[yearStyles, datePickerYearItemStyles.yearButton]}
+            testID={`pick-year-${year}`}>
+            <View style={datePickerYearItemStyles.content}>
+                <Text
+                    typescale="bodyLarge"
+                    style={datePickerYearItemStyles.yearLabel}
+                    selectable={false}>
+                    {year}
+                </Text>
+            </View>
+        </List.Item>
+    );
+}
+const YearPill = memo(YearPillPure);
+
+function YearPickerList() {
+    const [{ startDateYear, endDateYear, localDate, pickerType }, setStore] =
+        useDatePickerInlineStore(state => state);
+    const years = useMemo(
+        () => getYearRange(startDateYear, endDateYear),
+        [startDateYear, endDateYear],
+    );
+    const yearItems = useMemo<YearListItem[]>(
+        () => years.map(year => ({ id: year, label: String(year) })),
+        [years],
+    );
+    const selectingYear = pickerType === 'year';
+    const selectedYear = localDate.getFullYear();
+
+    const initialScrollIndex = useMemo(() => {
+        if (years.length === 0) return 0;
+        const idx = years.indexOf(selectedYear);
+        return Math.max(0, idx);
+    }, [selectedYear, years]);
+
+    const handleOnChange = useCallback(
+        (value: ListItemId | null) => {
+            if (typeof value !== 'number') return;
+            setStore(prev => ({
+                localDate: setYear(prev.localDate, value),
+                pickerType: undefined,
+            }));
+        },
+        [setStore],
+    );
+
+    const getItemLayout = useCallback(
+        (_data: ArrayLike<YearListItem> | null | undefined, index: number) => ({
+            length: LIST_ITEM_HEIGHT,
+            offset: LIST_ITEM_HEIGHT * index,
+            index,
+        }),
+        [],
+    );
+
+    if (!selectingYear) return null;
 
     return (
-        <ListItem
-            onPress={handlePressYear}
+        <List multiple={false} value={selectedYear} onChange={handleOnChange}>
+            <View style={[StyleSheet.absoluteFill, listStyles.root]} pointerEvents="auto">
+                <Divider />
+                <FlatList<YearListItem>
+                    style={listStyles.list}
+                    data={yearItems}
+                    renderItem={({ item }) => <YearRow year={item.id} />}
+                    keyExtractor={item => `${item.id}`}
+                    initialScrollIndex={initialScrollIndex}
+                    getItemLayout={getItemLayout}
+                />
+            </View>
+        </List>
+    );
+}
+
+function YearRowPure({ year }: { year: number }) {
+    const isSelected = useListContextValue(state => {
+        const selectedValue = state.value as any;
+        return (selectedValue?.id ?? selectedValue) === year;
+    });
+
+    datePickerMonthItemStyles.useVariants({
+        state: resolveStateVariant({ selected: isSelected }) as any,
+    });
+
+    return (
+        <List.Item
+            value={year}
             accessibilityRole="button"
             accessibilityLabel={String(year)}
-            style={[datePickerYearItemStyles.yearButton, yearStyles]}
+            style={datePickerMonthItemStyles.monthButton}
             testID={`pick-year-${year}`}>
-            <ListItem.Title style={datePickerYearItemStyles.yearLabel} selectable={false}>
-                {year}
-            </ListItem.Title>
-        </ListItem>
+            <View style={listStyles.left}>
+                {isSelected ? (
+                    <View style={listStyles.checkIconView}>
+                        <Icon name="check" size={24} />
+                    </View>
+                ) : (
+                    <View style={listStyles.spacer} />
+                )}
+            </View>
+            <View style={datePickerMonthItemStyles.monthInner}>
+                <Text style={datePickerMonthItemStyles.monthLabel} selectable={false}>
+                    {year}
+                </Text>
+            </View>
+        </List.Item>
     );
 }
-const Year = memo(YearPure);
+const YearRow = memo(YearRowPure);
 
-const styles = StyleSheet.create({
+const gridStyles = StyleSheet.create({
     root: {
         flex: 1,
         top: 56,
         zIndex: 100,
     },
-
     list: {
         flex: 1,
+        width: '100%',
+    },
+    grid: { alignItems: 'center' },
+    row: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignSelf: 'stretch',
+        gap: 12,
     },
-    opacity0: {
-        opacity: 0,
+    cell: {
+        flex: 1,
+        maxWidth: 110,
+        minWidth: 90,
+        height: GRID_ITEM_HEIGHT,
+        justifyContent: 'center',
     },
-    opacity1: {
-        opacity: 1,
+    opacity0: { opacity: 0 },
+    opacity1: { opacity: 1 },
+});
+
+const listStyles = StyleSheet.create({
+    root: {
+        flex: 1,
+        top: 56,
+        zIndex: 100,
+        backgroundColor: datePickerMonthPickerStyles.root.backgroundColor,
     },
+    list: { flex: 1 },
+    checkIconView: { marginLeft: 16 },
+    spacer: { width: 44 },
+    left: { marginRight: 8 },
 });