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

package/components/DatePickerInline/Month.tsx

@@ -1,9 +1,7 @@
-import { memo, useCallback, useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { View } from 'react-native';
 
-import { format } from '../../utils/date-fns';
 import { Text } from '../Text';
-import { useDatePickerStoreValue } from './DatePickerContext';
 import { getCalendarHeaderHeight } from './DatePickerInlineHeader';
 import {
     addMonths,
@@ -14,6 +12,7 @@ import {
     getRealIndex,
     gridCounts,
     startAtIndex,
+    totalMonths,
     useRangeChecker,
 } from './dateUtils';
 import type { MonthMultiProps, MonthRangeProps, MonthSingleProps } from './types';
@@ -42,11 +41,10 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
         scrollMode,
         disableWeekDays,
         validRange,
+        showOutsideDays,
+        locale,
         // customMonthStyles,
     } = props;
-    const { localDate } = useDatePickerStoreValue(state => ({ localDate: state.localDate }));
-    // const monthStyles = useComponentStyles('DatePicker_Month', customMonthStyles);
-
     const isHorizontal = scrollMode === 'horizontal';
     const { isDisabled, isWithinValidRange } = useRangeChecker(validRange);
 
@@ -54,11 +52,12 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
         const realIndex = getRealIndex(index);
 
         const md = addMonths(new Date(), realIndex);
-        const y = mode === 'single' ? localDate.getFullYear() : md.getFullYear();
-        const m = mode === 'single' ? localDate.getMonth() : md.getMonth();
+        const y = md.getFullYear();
+        const m = md.getMonth();
+        const name = new Intl.DateTimeFormat(locale, { month: 'long' }).format(md);
 
-        return { monthName: format(md, 'LLLL'), month: m, year: y };
-    }, [index, localDate, mode]);
+        return { monthName: name, month: m, year: y };
+    }, [index, locale]);
 
     const grid = useMemo(
         () =>
@@ -78,67 +77,34 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
         [year, month, index, isDisabled, mode, isWithinValidRange, startDate, endDate, dates, date],
     );
 
-    const { headerStyle, yearButtonStyle, yearInnerStyle, monthLabelStyle, weekContainerStyle } =
-        useMemo(() => {
-            // const {
-            //     monthLabel: _monthLabel,
-            //     yearButton,
-            //     yearButtonInner,
-            //     month: _monthStyle,
-            //     monthHeader,
-            //     dockedHeaderStyle,
-            //     weekContainerStyle: weekContainer,
-            // } = monthStyles;
-            // const { typescale, ...monthLabel } = _monthLabel;
-
-            return {
-                headerStyle: [
-                    datePickerMonthStyles.monthHeader,
-                    isHorizontal
-                        ? [
-                              datePickerMonthStyles.dockedHeaderStyle,
-                              {
-                                  marginTop: monthHeaderSingleMarginTop,
-                                  marginBottom: monthHeaderSingleMarginBottom,
-                              },
-                          ]
-                        : null,
-                ],
-                yearButtonStyle: datePickerMonthStyles.yearButton,
-                yearInnerStyle: datePickerMonthStyles.yearButtonInner,
-                monthLabelStyle: [datePickerMonthStyles.monthLabel],
-                weekContainerStyle: datePickerMonthStyles.weekContainerStyle,
-            };
-        }, [isHorizontal]);
-
-    const renderHeader = useCallback(() => {
-        if (!isHorizontal) {
-            return (
+    const headerStyle = [
+        datePickerMonthStyles.monthHeader,
+        isHorizontal
+            ? [
+                  datePickerMonthStyles.dockedHeaderStyle,
+                  {
+                      marginTop: monthHeaderSingleMarginTop,
+                      marginBottom: monthHeaderSingleMarginBottom,
+                  },
+              ]
+            : null,
+    ];
+
+    return (
+        <View>
+            {!isHorizontal ? (
                 <View style={headerStyle}>
-                    <View accessibilityLabel={`${monthName} ${year}`} style={yearButtonStyle}>
-                        <View style={yearInnerStyle}>
-                            <Text style={monthLabelStyle} selectable={false}>
+                    <View
+                        accessibilityLabel={`${monthName} ${year}`}
+                        style={[datePickerMonthStyles.yearButton]}>
+                        <View style={[datePickerMonthStyles.yearButtonInner]}>
+                            <Text style={datePickerMonthStyles.monthLabel} selectable={false}>
                                 {monthName} {year}
                             </Text>
                         </View>
                     </View>
                 </View>
-            );
-        }
-        return null;
-    }, [
-        headerStyle,
-        isHorizontal,
-        monthLabelStyle,
-        monthName,
-        year,
-        yearButtonStyle,
-        yearInnerStyle,
-    ]);
-
-    return (
-        <View>
-            {renderHeader()}
+            ) : null}
             {grid.map(({ weekIndex, generatedDays }) => (
                 <Week
                     key={weekIndex}
@@ -146,7 +112,8 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
                     generatedDays={generatedDays}
                     disableWeekDays={disableWeekDays}
                     onPressDate={onPressDate}
-                    style={weekContainerStyle}
+                    showOutsideDays={showOutsideDays}
+                    style={datePickerMonthStyles.weekContainerStyle}
                 />
             ))}
         </View>
@@ -190,7 +157,21 @@ function weeksOffset(index: number): number {
 }
 
 export function getIndexFromHorizontalOffset(offset: number, width: number): number {
-    return startAtIndex + Math.floor(offset / width);
+    if (!Number.isFinite(offset) || !Number.isFinite(width) || width <= 1) {
+        return startAtIndex;
+    }
+
+    const rawIndex = startAtIndex + Math.floor(offset / width);
+
+    if (rawIndex < 0) {
+        return 0;
+    }
+
+    if (rawIndex >= totalMonths) {
+        return totalMonths - 1;
+    }
+
+    return rawIndex;
 }
 
 export function getIndexFromVerticalOffset(offset: number): number {

package/components/DatePickerInline/MonthPicker.tsx

@@ -1,148 +1,133 @@
-import { format, setMonth } from 'date-fns';
-import { memo, useCallback, useMemo, useRef } from 'react';
+import { setMonth } from 'date-fns';
+import { memo, useCallback, useMemo } from 'react';
 import { FlatList, View, type ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
 import { resolveStateVariant } from '../../utils';
 import { range } from '../../utils/dateTimePicker';
-import {
-    datePickerDockedMonthItemStyles,
-    datePickerMonthPickerStyles,
-} from '../DatePickerDocked/utils';
-import { HorizontalDivider } from '../HorizontalDivider';
+import type { DatePickerLocale } from '../DatePicker/context';
+import { datePickerMonthItemStyles, datePickerMonthPickerStyles } from '../DatePicker/utils';
+import { Divider } from '../Divider';
 import { Icon } from '../Icon';
-import { ListItem } from '../ListItem/';
+import { List, type ListItemId, useListContextValue } from '../List';
 import { Text } from '../Text';
-import { useDatePickerStore, useDatePickerStoreValue } from './DatePickerContext';
+import { useDatePickerInlineStore, useDatePickerInlineStoreValue } from './store';
 
-export default function MonthPicker() {
-    const [_, setStore] = useDatePickerStore(state => state);
-    const { localDate, selectingMonth } = useDatePickerStoreValue(state => ({
+type MonthListItem = { id: number; label: string };
+
+export default function MonthPicker({ locale }: { locale?: DatePickerLocale }) {
+    const [_, setStore] = useDatePickerInlineStore(state => state);
+    const { localDate, selectingMonth } = useDatePickerInlineStoreValue(state => ({
         localDate: state.localDate,
         selectingMonth: state.pickerType === 'month',
     }));
-    // const monthPickerStyles = useComponentStyles('DatePickerDocked_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 monthItems = useMemo<MonthListItem[]>(
+        () => months.map(month => ({ id: month, label: String(month) })),
+        [months],
+    );
 
     const handleOnChange = useCallback(
-        (month: number) => {
+        (value: ListItemId | null) => {
+            if (typeof value !== 'number') return;
             setStore(prev => ({
-                localDate: setMonth(prev.localDate, month),
+                localDate: setMonth(prev.localDate, value),
                 pickerType: undefined,
             }));
         },
         [setStore],
     );
 
-    const renderItem = useCallback(
-        ({ item }: { item: number }) => {
-            return (
-                <Month
-                    month={item}
-                    selected={localDate.getMonth() === item}
-                    onPressMonth={handleOnChange}
-                    monthStyles={monthStyle}
-                />
-            );
-        },
-        [localDate, handleOnChange, monthStyle],
-    );
-
     if (!selectingMonth) {
         return null;
     }
 
     return (
-        <View style={containerStyle} pointerEvents={selectingMonth ? 'auto' : 'none'}>
-            <HorizontalDivider />
-            <FlatList<number>
-                ref={flatList}
-                style={styles.list}
-                data={months}
-                renderItem={renderItem}
-                keyExtractor={item => `${item}`}
-            />
-        </View>
+        <List multiple={false} value={localDate.getMonth()} onChange={handleOnChange}>
+            <View
+                style={[
+                    StyleSheet.absoluteFill,
+                    styles.root,
+                    selectingMonth ? styles.opacity1 : styles.opacity0,
+                ]}
+                pointerEvents={selectingMonth ? 'auto' : 'none'}>
+                <Divider />
+                <FlatList<MonthListItem>
+                    style={styles.list}
+                    data={monthItems}
+                    renderItem={({ item }) => (
+                        <Month
+                            month={item.id}
+                            monthStyles={datePickerMonthPickerStyles.root}
+                            locale={locale}
+                        />
+                    )}
+                    keyExtractor={item => `${item.id}`}
+                />
+            </View>
+        </List>
     );
 }
 
 function MonthPure({
     month,
-    selected,
-    onPressMonth,
     monthStyles,
+    locale,
 }: {
     month: number;
-    selected: boolean;
-    onPressMonth: (newMonth: number) => any;
     monthStyles: ViewStyle;
+    locale?: DatePickerLocale;
 }) {
+    const isSelected = useListContextValue(state => {
+        const selectedValue = state.value as any;
+        return (selectedValue?.id ?? selectedValue) === month;
+    });
+
     const state = resolveStateVariant({
-        selected,
+        selected: isSelected,
     });
-    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 handleMonthPress = useCallback(() => {
-        onPressMonth(month);
-    }, [onPressMonth, month]);
+
+    const { monthButtonStyle, accessibilityState } = useMemo(() => {
+        const { monthButton } = datePickerMonthItemStyles;
+
+        return {
+            monthButtonStyle: [monthButton, monthStyles],
+            accessibilityState: { selected: isSelected },
+        };
+    }, [isSelected, monthStyles]);
+
+    const monthLabel = useMemo(
+        () => new Intl.DateTimeFormat(locale, { month: 'long' }).format(new Date(2000, month, 1)),
+        [locale, month],
+    );
 
     return (
-        <ListItem
-            onPress={handleMonthPress}
+        <List.Item
+            value={month}
             accessibilityRole="button"
             accessibilityLabel={String(month)}
             accessibilityState={accessibilityState}
             style={monthButtonStyle}
-            testID={`pick-month-${month}`}
-            left={
-                selected ? (
+            testID={`pick-month-${month}`}>
+            <View style={styles.left}>
+                {isSelected ? (
                     <View style={styles.checkIconView}>
                         <Icon name="check" size={24} />
                     </View>
                 ) : (
                     <View style={styles.spacer} />
-                )
-            }>
-            <View style={monthInnerStyle}>
-                <Text style={monthLabelStyle} selectable={false}>
-                    {format(new Date(2000, month, 1), 'MMMM')}
+                )}
+            </View>
+            <View style={datePickerMonthItemStyles.monthInner}>
+                <Text style={datePickerMonthItemStyles.monthLabel} selectable={false}>
+                    {monthLabel}
                 </Text>
             </View>
-        </ListItem>
+        </List.Item>
     );
 }
 const Month = memo(MonthPure);
@@ -161,6 +146,9 @@ const styles = StyleSheet.create(theme => ({
     spacer: {
         width: 44,
     },
+    left: {
+        marginRight: theme.spacings['2'],
+    },
 
     list: {
         flex: 1,

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,13 +9,15 @@ import {
 } from 'react-native';
 
 import AutoSizer from './AutoSizer';
-import { beginOffset, estimatedMonthHeight, totalMonths } from './dateUtils';
+import { beginOffset, estimatedMonthHeight, getInitialIndex, totalMonths } from './dateUtils';
+import { addMonths, getRealIndex } from './dateUtils';
 import {
     getHorizontalMonthOffset,
     getIndexFromVerticalOffset,
     getMonthHeight,
     getVerticalMonthsOffset,
 } from './Month';
+import { useDatePickerInlineStore } from './store';
 import type { SwiperProps } from './SwiperUtils';
 import { montHeaderHeight } from './utils';
 
@@ -54,11 +56,16 @@ function SwiperInner({
     );
 
     const parentRef = useRef<ScrollView | null>(null);
+    const [{ localDate }, setStore] = useDatePickerInlineStore(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(() => {