react-native-molecules 0.5.0-beta.16 → 0.5.0-beta.17

package/components/DatePickerInline/MonthPicker.tsx

@@ -5,10 +5,7 @@ import { StyleSheet } from 'react-native-unistyles';
 
 import { resolveStateVariant } from '../../utils';
 import { range } from '../../utils/dateTimePicker';
-import {
-    datePickerDockedMonthItemStyles,
-    datePickerMonthPickerStyles,
-} from '../DatePickerDocked/utils';
+import { datePickerMonthItemStyles, datePickerMonthPickerStyles } from '../DatePicker/utils';
 import { HorizontalDivider } from '../HorizontalDivider';
 import { Icon } from '../Icon';
 import { ListItem } from '../ListItem/';
@@ -25,20 +22,6 @@ export default function MonthPicker() {
     const flatList = useRef<FlatList<number> | null>(null);
     const months = range(0, 11);
 
-    const { containerStyle, monthStyle } = useMemo(() => {
-        const { backgroundColor, ...rest } = datePickerMonthPickerStyles.root;
-
-        return {
-            containerStyle: [
-                StyleSheet.absoluteFill,
-                styles.root,
-                { backgroundColor },
-                selectingMonth ? styles.opacity1 : styles.opacity0,
-            ],
-            monthStyle: rest,
-        };
-    }, [selectingMonth]);
-
     const handleOnChange = useCallback(
         (month: number) => {
             setStore(prev => ({
@@ -56,11 +39,11 @@ export default function MonthPicker() {
                     month={item}
                     selected={localDate.getMonth() === item}
                     onPressMonth={handleOnChange}
-                    monthStyles={monthStyle}
+                    monthStyles={datePickerMonthPickerStyles.root}
                 />
             );
         },
-        [localDate, handleOnChange, monthStyle],
+        [localDate, handleOnChange],
     );
 
     if (!selectingMonth) {
@@ -68,7 +51,14 @@ export default function MonthPicker() {
     }
 
     return (
-        <View style={containerStyle} pointerEvents={selectingMonth ? 'auto' : 'none'}>
+        <View
+            style={[
+                StyleSheet.absoluteFill,
+                styles.root,
+                // { backgroundColor },
+                selectingMonth ? styles.opacity1 : styles.opacity0,
+            ]}
+            pointerEvents={selectingMonth ? 'auto' : 'none'}>
             <HorizontalDivider />
             <FlatList<number>
                 ref={flatList}
@@ -95,26 +85,20 @@ function MonthPure({
     const state = resolveStateVariant({
         selected,
     });
-    datePickerDockedMonthItemStyles.useVariants({
+
+    datePickerMonthItemStyles.useVariants({
         state: state as any,
     });
-    // const montLocalStyles = useComponentStyles('DatePickerDocked_MonthItem', monthStyles, {
-    //     state: resolveStateVariant({
-    //         selected,
-    //     }),
-    // });
-    const { monthInnerStyle, monthLabelStyle, monthButtonStyle, accessibilityState } =
-        useMemo(() => {
-            const { monthInner, monthLabel, monthButton } = datePickerDockedMonthItemStyles;
-
-            return {
-                monthInnerStyle: monthInner,
-                monthLabelStyle: monthLabel,
-                monthButtonStyle: [monthButton, monthStyles],
-                accessibilityState: { selected },
-            };
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-        }, [selected, monthStyles, state]);
+
+    const { monthButtonStyle, accessibilityState } = useMemo(() => {
+        const { monthButton } = datePickerMonthItemStyles;
+
+        return {
+            monthButtonStyle: [monthButton, monthStyles],
+            accessibilityState: { selected },
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selected, monthStyles, state]);
 
     const handleMonthPress = useCallback(() => {
         onPressMonth(month);
@@ -137,8 +121,8 @@ function MonthPure({
                     <View style={styles.spacer} />
                 )
             }>
-            <View style={monthInnerStyle}>
-                <Text style={monthLabelStyle} selectable={false}>
+            <View style={datePickerMonthItemStyles.monthInner}>
+                <Text style={datePickerMonthItemStyles.monthLabel} selectable={false}>
                     {format(new Date(2000, month, 1), 'MMMM')}
                 </Text>
             </View>

package/components/DatePickerInline/Swiper.native.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useMemo, useRef, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
     type NativeScrollEvent,
     type NativeSyntheticEvent,
@@ -9,7 +9,9 @@ import {
 } from 'react-native';
 
 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 {
     getHorizontalMonthOffset,
     getIndexFromVerticalOffset,
@@ -54,11 +56,16 @@ function SwiperInner({
     );
 
     const parentRef = useRef<ScrollView | null>(null);
+    const [{ localDate }, setStore] = useDatePickerStore(state => state);
 
     const scrollTo = useCallback(
         (index: number, animated: boolean) => {
             idx.current = index;
             setVisibleIndexes(getVisibleArray(index, { isHorizontal, height }));
+            setStore(prev => ({
+                ...prev,
+                localDate: addMonths(new Date(), getRealIndex(index)),
+            }));
 
             if (!parentRef.current) {
                 return;
@@ -81,13 +88,19 @@ function SwiperInner({
                 });
             }
         },
-        [parentRef, isHorizontal, width, height],
+        [parentRef, isHorizontal, width, height, setStore],
     );
 
     const scrollToInitial = useCallback(() => {
         scrollTo(idx.current, false);
     }, [scrollTo]);
 
+    useEffect(() => {
+        const targetIndex = getInitialIndex(localDate);
+        if (targetIndex === idx.current) return;
+        scrollTo(targetIndex, false);
+    }, [localDate, scrollTo]);
+
     const onMomentumScrollEnd = useCallback(
         (e: NativeSyntheticEvent<NativeScrollEvent>) => {
             const contentOffset = e.nativeEvent.contentOffset;
@@ -103,9 +116,13 @@ function SwiperInner({
             if (idx.current !== newIndex) {
                 idx.current = newIndex;
                 setVisibleIndexes(getVisibleArray(newIndex, { isHorizontal, height }));
+                setStore(prev => ({
+                    ...prev,
+                    localDate: addMonths(new Date(), getRealIndex(newIndex)),
+                }));
             }
         },
-        [idx, height, isHorizontal],
+        [idx, height, isHorizontal, setStore],
     );
 
     const { innerContainerStyle, itemContainerStyle } = useMemo(() => {

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>