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

package/components/DatePickerInline/DayNames.tsx

@@ -1,23 +1,26 @@
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 import { View } from 'react-native';
 
-import { addDays, format, startOfWeek } from '../../utils/date-fns';
+import { addDays, startOfWeek } from '../../utils/date-fns';
+import type { DatePickerLocale } from '../DatePicker/context';
 import { type DisableWeekDaysType, showWeekDay } from './dateUtils';
 import DayName from './DayName';
 import { dateDayNameStyles } from './utils';
 
-const shortDayNames = (() => {
-    const firstDOW = startOfWeek(new Date());
-    return Array.from(Array(7)).map((_, i) => format(addDays(firstDOW, i), 'EEEEE'));
-})();
-
 function DayNames({
     disableWeekDays,
-}: // locale,
-{
+    locale,
+}: {
     disableWeekDays?: DisableWeekDaysType;
-    locale?: string;
+    locale?: DatePickerLocale;
 }) {
+    const shortDayNames = useMemo(() => {
+        const firstDOW = startOfWeek(new Date());
+        return Array.from(Array(7)).map((_, i) =>
+            new Intl.DateTimeFormat(locale, { weekday: 'narrow' }).format(addDays(firstDOW, i)),
+        );
+    }, [locale]);
+
     return (
         <View style={dateDayNameStyles.container} pointerEvents={'none'}>
             {shortDayNames

package/components/DatePickerInline/DayRange.tsx

@@ -1,5 +1,5 @@
 import { memo } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { View } from 'react-native';
 
 import { resolveStateVariant } from '../../utils';
 import { datePickerDayRangeStyles } from './utils';
@@ -29,9 +29,7 @@ function DayRange({
     return (
         <>
             {(inRange || isCrop) && (
-                <View
-                    pointerEvents="none"
-                    style={[StyleSheet.absoluteFill, datePickerDayRangeStyles.container]}>
+                <View pointerEvents="none" style={datePickerDayRangeStyles.container}>
                     {isCrop && (
                         <>
                             <View style={datePickerDayRangeStyles.rightCrop} />

package/components/DatePickerInline/HeaderItem.tsx

@@ -1,7 +1,8 @@
-import { memo, useCallback, useMemo } from 'react';
-import { type StyleProp, View, type ViewStyle } from 'react-native';
+import { memo, useCallback } from 'react';
+import { View } from 'react-native';
 
-import { datePickerHeaderItemStyles } from '../DatePickerDocked/utils';
+import { datePickerHeaderItemStyles } from '../DatePicker/utils';
+import { Icon } from '../Icon';
 import { IconButton } from '../IconButton';
 import { Text } from '../Text';
 import { TouchableRipple } from '../TouchableRipple';
@@ -42,10 +43,11 @@ function HeaderItem({
         onNext && onNext(type);
     }, [onNext, type]);
 
-    const containerStyle = useMemo(
-        () =>
-            [
+    return (
+        <View
+            style={[
                 datePickerHeaderItemStyles.buttonContainer,
+                // eslint-disable-next-line react-native/no-inline-styles
                 {
                     justifyContent: !onPressDropdown
                         ? 'flex-end'
@@ -53,22 +55,23 @@ function HeaderItem({
                         ? 'flex-start'
                         : 'center',
                 },
-            ] as StyleProp<ViewStyle>,
-        [onPressDropdown, onNext],
-    );
-
-    return (
-        <View style={containerStyle} pointerEvents={'box-none'}>
-            {!selecting && onPrev && (
-                <View style={datePickerHeaderItemStyles.buttonWrapper}>
+            ]}
+            pointerEvents={'box-none'}>
+            {onPrev && (
+                <View
+                    style={[
+                        datePickerHeaderItemStyles.buttonWrapper,
+                        // eslint-disable-next-line react-native/no-inline-styles
+                        (selecting || disabled) && { opacity: 0 },
+                    ]}>
                     <IconButton
                         type="material-community"
                         name="chevron-left"
-                        size="md"
+                        size={24}
                         // Todo: Translate
                         accessibilityLabel={'Previous'}
                         onPress={handleOnPrevious}
-                        disabled={value === startDateYear}
+                        disabled={value === startDateYear || selecting || disabled}
                     />
                 </View>
             )}
@@ -80,27 +83,39 @@ function HeaderItem({
                     accessibilityLabel={`${value}`}
                     style={datePickerHeaderItemStyles.buttonStyle}>
                     <View style={datePickerHeaderItemStyles.innerStyle}>
-                        <Text style={datePickerHeaderItemStyles.labelStyle} selectable={false}>
+                        <Text
+                            style={[
+                                datePickerHeaderItemStyles.labelStyle,
+                                // eslint-disable-next-line react-native/no-inline-styles
+                                disabled && { opacity: 0.5 },
+                            ]}
+                            selectable={false}>
                             {value}
                         </Text>
-                        <IconButton
-                            onPress={handlePressDropDown}
-                            name={selecting && type === pickerType ? 'menu-up' : 'menu-down'}
-                            size="sm"
-                            disabled={disabled}
-                        />
+                        {!disabled && (
+                            <Icon
+                                onPress={handlePressDropDown}
+                                name={selecting && type === pickerType ? 'menu-up' : 'menu-down'}
+                                size={18}
+                            />
+                        )}
                     </View>
                 </TouchableRipple>
             )}
-            {!selecting && onNext && (
-                <View style={datePickerHeaderItemStyles.buttonWrapper}>
+            {onNext && (
+                <View
+                    style={[
+                        datePickerHeaderItemStyles.buttonWrapper,
+                        // eslint-disable-next-line react-native/no-inline-styles
+                        (selecting || disabled) && { opacity: 0 },
+                    ]}>
                     <IconButton
                         name="chevron-right"
-                        size="md"
+                        size={24}
                         // Todo: Translate
                         accessibilityLabel={'Next'}
                         onPress={handleOnNext}
-                        disabled={value === endDateYear}
+                        disabled={value === endDateYear || selecting || disabled}
                     />
                 </View>
             )}

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,21 +1,19 @@
-import { format, setMonth } from 'date-fns';
+import { setMonth } from 'date-fns';
 import { memo, useCallback, useMemo, useRef } 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 type { DatePickerLocale } from '../DatePicker/context';
+import { datePickerMonthItemStyles, datePickerMonthPickerStyles } from '../DatePicker/utils';
 import { HorizontalDivider } from '../HorizontalDivider';
 import { Icon } from '../Icon';
 import { ListItem } from '../ListItem/';
 import { Text } from '../Text';
 import { useDatePickerStore, useDatePickerStoreValue } from './DatePickerContext';
 
-export default function MonthPicker() {
+export default function MonthPicker({ locale }: { locale?: DatePickerLocale }) {
     const [_, setStore] = useDatePickerStore(state => state);
     const { localDate, selectingMonth } = useDatePickerStoreValue(state => ({
         localDate: state.localDate,
@@ -25,20 +23,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 +40,12 @@ export default function MonthPicker() {
                     month={item}
                     selected={localDate.getMonth() === item}
                     onPressMonth={handleOnChange}
-                    monthStyles={monthStyle}
+                    monthStyles={datePickerMonthPickerStyles.root}
+                    locale={locale}
                 />
             );
         },
-        [localDate, handleOnChange, monthStyle],
+        [localDate, handleOnChange, locale],
     );
 
     if (!selectingMonth) {
@@ -68,7 +53,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}
@@ -86,35 +78,37 @@ function MonthPure({
     selected,
     onPressMonth,
     monthStyles,
+    locale,
 }: {
     month: number;
     selected: boolean;
     onPressMonth: (newMonth: number) => any;
     monthStyles: ViewStyle;
+    locale?: DatePickerLocale;
 }) {
     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 monthLabel = useMemo(
+        () =>
+            new Intl.DateTimeFormat(locale, { month: 'long' }).format(new Date(2000, month, 1)),
+        [locale, month],
+    );
 
     const handleMonthPress = useCallback(() => {
         onPressMonth(month);
@@ -137,9 +131,9 @@ function MonthPure({
                     <View style={styles.spacer} />
                 )
             }>
-            <View style={monthInnerStyle}>
-                <Text style={monthLabelStyle} selectable={false}>
-                    {format(new Date(2000, month, 1), 'MMMM')}
+            <View style={datePickerMonthItemStyles.monthInner}>
+                <Text style={datePickerMonthItemStyles.monthLabel} selectable={false}>
+                    {monthLabel}
                 </Text>
             </View>
         </ListItem>

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(() => {