react-native-molecules 0.5.0-beta.2 → 0.5.0-beta.20

package/components/DatePickerInline/Swiper.tsx

@@ -9,11 +9,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 { useDatePickerStore } from './DatePickerContext';
+import { beginOffset, estimatedMonthHeight, getInitialIndex, totalMonths } from './dateUtils';
+import { addMonths, getRealIndex } from './dateUtils';
 import { getIndexFromVerticalOffset, getMonthHeight, getVerticalMonthsOffset } from './Month';
 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] = useDatePickerStore(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] = useDatePickerStore(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/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,48 +1,70 @@
 import { setYear } from 'date-fns';
-import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
-import { FlatList, StyleSheet, View } from 'react-native';
+import { memo, useCallback, useLayoutEffect, useMemo, useRef } from 'react';
+import { FlatList, ScrollView, StyleSheet, View } from 'react-native';
 
 import { getYearRange, resolveStateVariant } from '../../utils';
+import { datePickerMonthItemStyles, datePickerMonthPickerStyles } from '../DatePicker/utils';
 import { HorizontalDivider } from '../HorizontalDivider';
+import { Icon } from '../Icon';
 import { ListItem } from '../ListItem';
+import { Text } from '../Text';
 import { useDatePickerStore } from './DatePickerContext';
 import { datePickerYearItemStyles, datePickerYearPickerStyles } from './utils';
 
-const ITEM_HEIGHT = 62;
+const GRID_ITEM_HEIGHT = 62;
+const NUM_COLUMNS = 3;
+const LIST_ITEM_HEIGHT = 46;
 
-export default function YearPicker() {
+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] = useDatePickerStore(
         state => state,
     );
-    const flatList = useRef<FlatList<number> | null>(null);
     const years = useMemo(
         () => getYearRange(startDateYear, endDateYear),
         [startDateYear, endDateYear],
     );
+    const rows = useMemo(() => {
+        const chunks: number[][] = [];
+        for (let i = 0; i < years.length; i += NUM_COLUMNS) {
+            chunks.push(years.slice(i, i + NUM_COLUMNS));
+        }
+        return chunks;
+    }, [years]);
     const selectingYear = pickerType === 'year';
     const selectedYear = localDate.getFullYear();
+    const scrollRef = useRef<ScrollView | null>(null);
 
-    // 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 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]);
+
+    useLayoutEffect(() => {
+        if (!selectingYear) return;
+        scrollRef.current?.scrollTo({ y: 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,
         };
@@ -59,32 +81,39 @@ export default function YearPicker() {
     );
 
     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 style={containerStyle} pointerEvents={selectingYear ? 'auto' : 'none'}>
+            <HorizontalDivider />
+            <ScrollView
+                ref={scrollRef}
+                style={gridStyles.list}
+                contentOffset={{ x: 0, y: initialScrollOffset }}
+                removeClippedSubviews>
+                <View style={gridStyles.grid}>
+                    {rows.map((row, rowIdx) => (
+                        <View key={rowIdx} style={gridStyles.row}>
+                            {row.map(year => (
+                                <View key={year} style={gridStyles.cell}>
+                                    <YearPill
+                                        year={year}
+                                        selected={selectedYear === year}
+                                        onPressYear={handleOnChange}
+                                        yearStyles={yearStyle}
+                                    />
+                                </View>
+                            ))}
+                            {row.length < NUM_COLUMNS &&
+                                Array.from({ length: NUM_COLUMNS - row.length }).map((_, i) => (
+                                    <View key={`pad-${i}`} style={gridStyles.cell} />
+                                ))}
+                        </View>
+                    ))}
                 </View>
-            )}
-        </>
+            </ScrollView>
+        </View>
     );
 }
 
-function YearPure({
+function YearPillPure({
     year,
     selected,
     onPressYear,
@@ -96,9 +125,7 @@ function YearPure({
     yearStyles: Record<string, any>;
 }) {
     datePickerYearItemStyles.useVariants({
-        state: resolveStateVariant({
-            selected,
-        }) as any,
+        state: resolveStateVariant({ selected }) as any,
     });
 
     const handlePressYear = useCallback(() => {
@@ -107,10 +134,11 @@ function YearPure({
 
     return (
         <ListItem
+            contentStyle={datePickerYearItemStyles.content}
             onPress={handlePressYear}
             accessibilityRole="button"
             accessibilityLabel={String(year)}
-            style={[datePickerYearItemStyles.yearButton, yearStyles]}
+            style={[yearStyles, datePickerYearItemStyles.yearButton]}
             testID={`pick-year-${year}`}>
             <ListItem.Title style={datePickerYearItemStyles.yearLabel} selectable={false}>
                 {year}
@@ -118,22 +146,147 @@ function YearPure({
         </ListItem>
     );
 }
-const Year = memo(YearPure);
+const YearPill = memo(YearPillPure);
+
+function YearPickerList() {
+    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();
+
+    const initialScrollIndex = useMemo(() => {
+        if (years.length === 0) return 0;
+        const idx = years.indexOf(selectedYear);
+        return Math.max(0, idx);
+    }, [selectedYear, years]);
+
+    const handleOnChange = useCallback(
+        (year: number) => {
+            setStore(prev => ({
+                localDate: setYear(prev.localDate, year),
+                pickerType: undefined,
+            }));
+        },
+        [setStore],
+    );
+
+    const renderItem = useCallback(
+        ({ item }: { item: number }) => (
+            <YearRow year={item} selected={selectedYear === item} onPressYear={handleOnChange} />
+        ),
+        [selectedYear, handleOnChange],
+    );
 
-const styles = StyleSheet.create({
+    const getItemLayout = useCallback(
+        (_data: any, index: number) => ({
+            length: LIST_ITEM_HEIGHT,
+            offset: LIST_ITEM_HEIGHT * index,
+            index,
+        }),
+        [],
+    );
+
+    if (!selectingYear) return null;
+
+    return (
+        <View style={[StyleSheet.absoluteFill, listStyles.root]} pointerEvents="auto">
+            <HorizontalDivider />
+            <FlatList<number>
+                ref={flatList}
+                style={listStyles.list}
+                data={years}
+                renderItem={renderItem}
+                keyExtractor={item => `${item}`}
+                initialScrollIndex={initialScrollIndex}
+                getItemLayout={getItemLayout}
+            />
+        </View>
+    );
+}
+
+function YearRowPure({
+    year,
+    selected,
+    onPressYear,
+}: {
+    year: number;
+    selected: boolean;
+    onPressYear: (newYear: number) => any;
+}) {
+    datePickerMonthItemStyles.useVariants({
+        state: resolveStateVariant({ selected }) as any,
+    });
+
+    const handlePressYear = useCallback(() => {
+        onPressYear(year);
+    }, [year, onPressYear]);
+
+    return (
+        <ListItem
+            onPress={handlePressYear}
+            accessibilityRole="button"
+            accessibilityLabel={String(year)}
+            accessibilityState={{ selected }}
+            style={datePickerMonthItemStyles.monthButton}
+            testID={`pick-year-${year}`}
+            left={
+                selected ? (
+                    <View style={listStyles.checkIconView}>
+                        <Icon name="check" size={24} />
+                    </View>
+                ) : (
+                    <View style={listStyles.spacer} />
+                )
+            }>
+            <View style={datePickerMonthItemStyles.monthInner}>
+                <Text style={datePickerMonthItemStyles.monthLabel} selectable={false}>
+                    {year}
+                </Text>
+            </View>
+        </ListItem>
+    );
+}
+const YearRow = memo(YearRowPure);
+
+const gridStyles = StyleSheet.create({
     root: {
         flex: 1,
         top: 56,
         zIndex: 100,
     },
-
-    list: {
-        flex: 1,
+    list: { flex: 1 },
+    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 },
 });

package/components/DatePickerInline/dateUtils.tsx

@@ -219,21 +219,25 @@ export const generateCalendarGrid = ({
                 const isFirstWeek = weekGrid === 0;
                 const realDayIndex = emptyDays - dayIndex;
                 const beforeWeekDay = isFirstWeek && realDayIndex > 0;
-                const dayOfMonth = weekGrid * 7 + dayIndex - emptyDays + 1;
-                const afterWeekDay = dayOfMonth > daysInMonth;
-
-                const day = new Date(year, month, dayOfMonth);
+                const rawDayOfMonth = weekGrid * 7 + dayIndex - emptyDays + 1;
+                const afterWeekDay = rawDayOfMonth > daysInMonth;
+                const outside = beforeWeekDay || afterWeekDay;
+
+                const day = new Date(year, month, rawDayOfMonth);
+                const dayOfMonth = day.getDate();
+                const displayYear = day.getFullYear();
+                const displayMonth = day.getMonth();
                 const isToday = areDatesOnSameDay(day, today);
 
                 let inRange = false;
                 let disabled = isDisabled(day);
                 let selected = false;
 
-                let leftCrop = dayOfMonth === 1;
-                let rightCrop = dayOfMonth === daysInMonth;
+                let leftCrop = rawDayOfMonth === 1;
+                let rightCrop = rawDayOfMonth === daysInMonth;
 
-                const isFirstDayOfMonth = dayOfMonth === 1;
-                const isLastDayOfMonth = dayOfMonth === daysInMonth;
+                const isFirstDayOfMonth = rawDayOfMonth === 1;
+                const isLastDayOfMonth = rawDayOfMonth === daysInMonth;
 
                 if (mode === 'range') {
                     const selectedStartDay = areDatesOnSameDay(day, startDate);
@@ -267,8 +271,8 @@ export const generateCalendarGrid = ({
                     const safeDates = dates || [];
                     selected = safeDates.some(d => areDatesOnSameDay(day, d));
 
-                    const yesterday = new Date(year, month, dayOfMonth - 1);
-                    const tomorrow = new Date(year, month, dayOfMonth + 1);
+                    const yesterday = new Date(year, month, rawDayOfMonth - 1);
+                    const tomorrow = new Date(year, month, rawDayOfMonth + 1);
 
                     const yesterdaySelected = safeDates.some(d => areDatesOnSameDay(d, yesterday));
                     const tomorrowSelected = safeDates.some(d => areDatesOnSameDay(d, tomorrow));
@@ -316,8 +320,9 @@ export const generateCalendarGrid = ({
                 return {
                     beforeWeekDay,
                     afterWeekDay,
-                    year,
-                    month,
+                    outside,
+                    year: displayYear,
+                    month: displayMonth,
                     dayOfMonth,
                     dayIndex,
                     mode,

package/components/DatePickerInline/types.ts

@@ -13,6 +13,7 @@ export interface BaseMonthProps {
     onPressDate: (date: Date) => any;
     validRange?: ValidRangeType;
     customMonthStyles?: Record<string, any>;
+    showOutsideDays?: boolean;
 
     // some of these should be required in final implementation
     date?: CalendarDate;
@@ -52,7 +53,9 @@ export type BaseDatePickerProps = {
     startYear?: number;
     endYear?: number;
     HeaderComponent?: MemoExoticComponent<CalendarHeaderProps | any>;
+    headerLayout?: 'inline' | 'docked';
     monthStyle?: Record<string, any>;
+    showOutsideDays?: boolean;
 
     // here they are optional but in final implemenation they are required
     date?: CalendarDate;