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

package/components/DatePickerInline/DatePickerDockedHeader.tsx

@@ -0,0 +1,117 @@
+import { add, setYear } from 'date-fns';
+import { memo, useCallback, useMemo } from 'react';
+import { View, type ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+import type { DatePickerLocale } from '../DatePicker/context';
+import type { DisableWeekDaysType } from './dateUtils';
+import DayNames from './DayNames';
+import HeaderItem from './HeaderItem';
+import { useDatePickerInlineStoreRef, useDatePickerInlineStoreValue } from './store';
+import { datePickerHeaderStyles } from './utils';
+
+export type DockedHeaderProps = {
+    locale?: DatePickerLocale;
+    scrollMode: 'horizontal' | 'vertical';
+    disableWeekDays?: DisableWeekDaysType;
+    style?: ViewStyle;
+};
+
+function DatePickerDockedHeader({
+    locale = 'en',
+    scrollMode,
+    disableWeekDays,
+    style: styleProp,
+}: DockedHeaderProps) {
+    const setStore = useDatePickerInlineStoreRef().set;
+    const { localDate, pickerType } = useDatePickerInlineStoreValue(state => ({
+        localDate: state.localDate,
+        pickerType: state.pickerType,
+    }));
+    const isHorizontal = scrollMode === 'horizontal';
+
+    const { monthName, year } = useMemo(
+        () => ({
+            monthName: new Intl.DateTimeFormat(locale, { month: 'short' }).format(localDate),
+            year: localDate.getFullYear(),
+        }),
+        [localDate, locale],
+    );
+
+    const handleMonthDropdown = useCallback(() => {
+        setStore(prev => ({ pickerType: prev.pickerType === 'month' ? undefined : 'month' }));
+    }, [setStore]);
+
+    const handleYearDropdown = useCallback(() => {
+        setStore(prev => ({ pickerType: prev.pickerType === 'year' ? undefined : 'year' }));
+    }, [setStore]);
+
+    const handleMonthPrev = useCallback(() => {
+        setStore(prev => ({ localDate: add(prev.localDate, { months: -1 }) }));
+    }, [setStore]);
+
+    const handleMonthNext = useCallback(() => {
+        setStore(prev => ({ localDate: add(prev.localDate, { months: 1 }) }));
+    }, [setStore]);
+
+    const handleYearPrev = useCallback(() => {
+        setStore(prev => ({
+            localDate: setYear(prev.localDate, prev.localDate.getFullYear() - 1),
+        }));
+    }, [setStore]);
+
+    const handleYearNext = useCallback(() => {
+        setStore(prev => ({
+            localDate: setYear(prev.localDate, prev.localDate.getFullYear() + 1),
+        }));
+    }, [setStore]);
+
+    const pickerOpen = pickerType === 'month' || pickerType === 'year';
+
+    return (
+        <View pointerEvents="box-none">
+            {isHorizontal && (
+                <View
+                    style={[
+                        datePickerHeaderStyles.datePickerHeader,
+                        styles.row,
+                        pickerOpen && styles.rowPickerOpen,
+                        styleProp,
+                    ]}>
+                    <HeaderItem
+                        onPrev={handleMonthPrev}
+                        onNext={handleMonthNext}
+                        onPressDropdown={handleMonthDropdown}
+                        type="month"
+                        value={monthName}
+                        pickerType={pickerType}
+                        selecting={pickerType === 'month'}
+                    />
+                    <HeaderItem
+                        onPrev={handleYearPrev}
+                        onNext={handleYearNext}
+                        onPressDropdown={handleYearDropdown}
+                        type="year"
+                        value={year}
+                        pickerType={pickerType}
+                        selecting={pickerType === 'year'}
+                    />
+                </View>
+            )}
+            <DayNames disableWeekDays={disableWeekDays} locale={locale} />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create(theme => ({
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    rowPickerOpen: {
+        borderBottomWidth: StyleSheet.hairlineWidth,
+        borderBottomColor: theme.colors.outlineVariant,
+    },
+}));
+
+export default memo(DatePickerDockedHeader);

package/components/DatePickerInline/DatePickerInline.tsx

@@ -1,18 +1,18 @@
-import { memo, useCallback, useMemo } from 'react';
+import { useControlledValue } from '@react-native-molecules/utils/hooks';
+import { memo, useCallback } from 'react';
 import { View, type ViewStyle } from 'react-native';
 
-import { useControlledValue } from '../../hooks';
-import type {
-    LocalState,
-    LocalStateMultiple,
-    LocalStateRange,
-    LocalStateSingle,
-} from '../DatePickerModal/types';
+import DatePickerDockedHeader from './DatePickerDockedHeader';
 import DatePickerInlineBase from './DatePickerInlineBase';
 import DatePickerInlineHeader from './DatePickerInlineHeader';
-import type { DatePickerInlineBaseProps } from './types';
+import type { CalendarDate, CalendarDates, DatePickerInlineBaseProps } from './types';
 import { datePickerStyles } from './utils';
 
+type LocalState = LocalStateSingle | LocalStateMultiple | LocalStateRange;
+type LocalStateSingle = { date: CalendarDate };
+type LocalStateMultiple = { dates: CalendarDates };
+type LocalStateRange = { startDate: CalendarDate; endDate: CalendarDate };
+
 export type DatePickerInlineProps = DatePickerInlineBaseProps & {
     containerStyle?: ViewStyle;
 };
@@ -25,6 +25,8 @@ const DatePickerInline = ({
     onChange,
     locale = 'en',
     mode = 'single',
+    headerLayout = 'default',
+    HeaderComponent,
     containerStyle: containerStyleProp,
     ...rest
 }: DatePickerInlineProps) => {
@@ -40,16 +42,15 @@ const DatePickerInline = ({
         onChange: onInnerChange,
     });
 
-    const { containerStyle } = useMemo(() => {
-        return {
-            containerStyle: [datePickerStyles.container, datePickerStyles.root, containerStyleProp],
-        };
-    }, [containerStyleProp]);
+    const resolvedHeader =
+        HeaderComponent ??
+        (headerLayout === 'docked' ? DatePickerDockedHeader : DatePickerInlineHeader);
 
     return (
-        <View style={containerStyle}>
+        <View style={[datePickerStyles.container, datePickerStyles.root, containerStyleProp]}>
             <DatePickerInlineBase
                 {...rest}
+                headerLayout={headerLayout}
                 locale={locale}
                 mode={mode}
                 startDate={(state as LocalStateRange)?.startDate}
@@ -59,7 +60,7 @@ const DatePickerInline = ({
                 dates={(state as LocalStateMultiple)?.dates}
                 // TODO - fix ts issues
                 // @ts-ignore
-                HeaderComponent={DatePickerInlineHeader}
+                HeaderComponent={resolvedHeader}
             />
         </View>
     );

package/components/DatePickerInline/DatePickerInlineBase.tsx

@@ -1,11 +1,11 @@
+import { useLatest } from '@react-native-molecules/utils/hooks';
 import { memo, useCallback, useEffect, useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import { useLatest } from '../../hooks';
-import { defaultValue, Provider, useDatePickerStore } from './DatePickerContext';
 import { areDatesOnSameDay, dateToUnix, getEndOfDay, getInitialIndex } from './dateUtils';
 import Month from './Month';
 import MonthPicker from './MonthPicker';
+import { defaultValue, Provider, useDatePickerInlineStore } from './store';
 import Swiper from './Swiper';
 import type {
     CalendarDate,
@@ -43,8 +43,10 @@ function DatePickerInlineBaseChild(props: DatePickerInlineBaseProps) {
         HeaderComponent,
         onToggle,
         monthStyle,
+        showOutsideDays,
+        headerLayout,
     } = props;
-    const [pickerType, setStore] = useDatePickerStore(state => state.pickerType);
+    const [pickerType, setStore] = useDatePickerInlineStore(state => state.pickerType);
 
     const scrollMode = mode === 'range' || mode === 'multiple' ? 'vertical' : 'horizontal';
     const isHorizontal = scrollMode === 'horizontal';
@@ -125,6 +127,7 @@ function DatePickerInlineBaseChild(props: DatePickerInlineBaseProps) {
                     scrollMode={scrollMode}
                     disableWeekDays={disableWeekDays}
                     customMonthStyles={monthStyle}
+                    showOutsideDays={showOutsideDays}
                 />
             );
         },
@@ -140,6 +143,7 @@ function DatePickerInlineBaseChild(props: DatePickerInlineBaseProps) {
             scrollMode,
             disableWeekDays,
             monthStyle,
+            showOutsideDays,
         ],
     );
 
@@ -166,8 +170,10 @@ function DatePickerInlineBaseChild(props: DatePickerInlineBaseProps) {
                 renderItem={renderMonthComponent}
                 renderHeader={renderCalenderHeader}
             />
-            {isHorizontal && pickerType === 'year' && <YearPicker />}
-            {isHorizontal && pickerType === 'month' && <MonthPicker />}
+            {isHorizontal && pickerType === 'year' && (
+                <YearPicker layout={headerLayout === 'docked' ? 'list' : 'grid'} />
+            )}
+            {isHorizontal && pickerType === 'month' && <MonthPicker locale={locale} />}
         </View>
     );
 }

package/components/DatePickerInline/DatePickerInlineHeader.tsx

@@ -1,11 +1,12 @@
-import { add, format } from 'date-fns';
+import { add, setYear } from 'date-fns';
 import { memo, useCallback, useMemo } from 'react';
 import { type StyleProp, View, type ViewStyle } from 'react-native';
 
-import { useDatePickerStore, useDatePickerStoreValue } from './DatePickerContext';
+import type { DatePickerLocale } from '../DatePicker/context';
 import type { DisableWeekDaysType } from './dateUtils';
 import DayNames from './DayNames';
 import HeaderItem from './HeaderItem';
+import { useDatePickerInlineStore, useDatePickerInlineStoreValue } from './store';
 import { datePickerHeaderStyles, dayNamesHeight } from './utils';
 
 const buttonContainerHeight = 56;
@@ -13,7 +14,7 @@ const buttonContainerMarginTop = 4;
 const buttonContainerMarginBottom = 8;
 
 export type CalendarHeaderProps = {
-    locale?: string;
+    locale?: DatePickerLocale;
     scrollMode: 'horizontal' | 'vertical';
     disableWeekDays?: DisableWeekDaysType;
     style?: ViewStyle;
@@ -25,18 +26,21 @@ function DatePickerInlineHeader({
     disableWeekDays,
     style: styleProp,
 }: CalendarHeaderProps) {
-    const [_, setStore] = useDatePickerStore(state => state);
-    const { localDate, isYearPickerType } = useDatePickerStoreValue(state => ({
+    const [_, setStore] = useDatePickerInlineStore(state => state);
+    const { localDate, pickerType } = useDatePickerInlineStoreValue(state => ({
         localDate: state.localDate,
-        isYearPickerType: state.pickerType === 'year',
+        pickerType: state.pickerType,
     }));
     const isHorizontal = scrollMode === 'horizontal';
 
     const { monthName, year } = useMemo(() => {
         const y = localDate.getFullYear();
 
-        return { monthName: format(localDate, 'LLLL'), year: y };
-    }, [localDate]);
+        return {
+            monthName: new Intl.DateTimeFormat(locale, { month: 'long' }).format(localDate),
+            year: y,
+        };
+    }, [localDate, locale]);
 
     const { containerStyle } = useMemo(() => {
         // const { datePickerHeader, buttonContainer, buttonWrapper, spacer, ...rest } =
@@ -54,36 +58,62 @@ function DatePickerInlineHeader({
         };
     }, [styleProp]);
 
+    const handleOnMonthPress = useCallback(() => {
+        isHorizontal &&
+            setStore(prev => ({
+                pickerType: prev.pickerType === 'month' ? undefined : 'month',
+            }));
+    }, [isHorizontal, setStore]);
+
     const handleOnYearPress = useCallback(() => {
-        isHorizontal && setStore(prev => ({ pickerType: prev.pickerType ? undefined : 'year' }));
+        isHorizontal &&
+            setStore(prev => ({
+                pickerType: prev.pickerType === 'year' ? undefined : 'year',
+            }));
     }, [isHorizontal, setStore]);
 
-    const handleOnPrev = useCallback(() => {
+    const handleMonthPrev = useCallback(() => {
         setStore(prev => ({ localDate: add(prev.localDate, { months: -1 }) }));
     }, [setStore]);
 
-    const handleOnNext = useCallback(() => {
+    const handleMonthNext = useCallback(() => {
         setStore(prev => ({ localDate: add(prev.localDate, { months: 1 }) }));
     }, [setStore]);
 
+    const handleYearPrev = useCallback(() => {
+        setStore(prev => ({
+            localDate: setYear(prev.localDate, prev.localDate.getFullYear() - 1),
+        }));
+    }, [setStore]);
+
+    const handleYearNext = useCallback(() => {
+        setStore(prev => ({
+            localDate: setYear(prev.localDate, prev.localDate.getFullYear() + 1),
+        }));
+    }, [setStore]);
+
     return (
         <View pointerEvents={'box-none'}>
             <>
                 {isHorizontal && (
                     <View style={containerStyle}>
                         <HeaderItem
-                            onPressDropdown={handleOnYearPress}
-                            type="year"
-                            value={`${monthName} ${year}`}
-                            pickerType="year"
-                            selecting={isYearPickerType}
+                            onPrev={handleMonthPrev}
+                            onNext={handleMonthNext}
+                            onPressDropdown={handleOnMonthPress}
+                            type="month"
+                            value={monthName}
+                            pickerType={pickerType}
+                            selecting={pickerType === 'month'}
                         />
                         <HeaderItem
-                            onNext={handleOnNext}
-                            onPrev={handleOnPrev}
-                            selecting={false}
+                            onNext={handleYearNext}
+                            onPrev={handleYearPrev}
+                            onPressDropdown={handleOnYearPress}
+                            type="year"
+                            selecting={pickerType === 'year'}
                             value={year}
-                            pickerType="year"
+                            pickerType={pickerType}
                         />
                     </View>
                 )}

package/components/DatePickerInline/Day.tsx

@@ -1,11 +1,17 @@
 import { memo, useCallback, useMemo } from 'react';
 import { type StyleProp, View, type ViewStyle } from 'react-native';
 
+import { useActionState } from '../../hooks';
 import { resolveStateVariant } from '../../utils';
+import { StateLayer } from '../StateLayer';
 import { Text } from '../Text';
 import { TouchableRipple } from '../TouchableRipple';
 import DayRange from './DayRange';
-import { datePickerDayEmptyStyles, datePickerDayStyles } from './utils';
+import {
+    datePickerDayEmptyStyles,
+    datePickerDayStateLayerStyles,
+    datePickerDayStyles,
+} from './utils';
 
 function EmptyDayPure() {
     return <View style={datePickerDayEmptyStyles.root} />;
@@ -23,6 +29,7 @@ function Day(props: {
     rightCrop: boolean;
     isToday: boolean;
     disabled: boolean;
+    outside?: boolean;
     onPressDate: (date: Date) => any;
 }) {
     const {
@@ -36,17 +43,32 @@ function Day(props: {
         onPressDate,
         isToday,
         disabled,
+        outside,
     } = props;
+
+    const { hovered, actionsRef } = useActionState({ actionsToListen: ['hover'] });
+
     const state = resolveStateVariant({
         disabled,
         selected,
         inRange,
         today: isToday,
+        outside: !!outside,
     });
     datePickerDayStyles.useVariants({
         state: state as any,
     });
 
+    datePickerDayStateLayerStyles.useVariants({
+        state: resolveStateVariant({
+            hovered: hovered,
+            outsideAndHovered: !!outside && !selected && !inRange && hovered,
+            selectedAndHovered: selected && hovered,
+            inRangeAndHovered: inRange && hovered,
+            todayAndHovered: isToday && hovered,
+        }) as any,
+    });
+
     const onPress = useCallback(() => {
         onPressDate(new Date(year, month, day));
     }, [onPressDate, year, month, day]);
@@ -69,6 +91,7 @@ function Day(props: {
             <DayRange inRange={inRange} leftCrop={leftCrop} rightCrop={rightCrop} />
 
             <TouchableRipple
+                ref={actionsRef}
                 testID={`day-${year}-${month}-${day}`}
                 disabled={disabled}
                 borderless={true}
@@ -80,6 +103,7 @@ function Day(props: {
                         {day}
                     </Text>
                 </View>
+                <StateLayer style={datePickerDayStateLayerStyles.stateLayer} />
             </TouchableRipple>
         </View>
     );

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,11 +1,12 @@
-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';
-import { useDatePickerStoreValue } from './DatePickerContext';
+import { useDatePickerInlineStoreValue } from './store';
 
 function HeaderItem({
     value,
@@ -24,7 +25,7 @@ function HeaderItem({
     onNext?: (type: 'month' | 'year' | undefined) => void;
     onPrev?: (type: 'month' | 'year' | undefined) => void;
 }) {
-    const { startDateYear, endDateYear } = useDatePickerStoreValue(state => ({
+    const { startDateYear, endDateYear } = useDatePickerInlineStoreValue(state => ({
         startDateYear: state.startDateYear,
         endDateYear: state.endDateYear,
     }));
@@ -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>
             )}