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

package/components/DatePickerInline/DatePickerDockedHeader.tsx

@@ -0,0 +1,113 @@
+import { add, format, setYear } from 'date-fns';
+import { memo, useCallback, useMemo } from 'react';
+import { View, type ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+import { useDatePickerStoreRef, useDatePickerStoreValue } from './DatePickerContext';
+import type { DisableWeekDaysType } from './dateUtils';
+import DayNames from './DayNames';
+import HeaderItem from './HeaderItem';
+import { datePickerHeaderStyles } from './utils';
+
+export type DockedHeaderProps = {
+    locale?: string;
+    scrollMode: 'horizontal' | 'vertical';
+    disableWeekDays?: DisableWeekDaysType;
+    style?: ViewStyle;
+};
+
+function DatePickerDockedHeader({
+    locale = 'en',
+    scrollMode,
+    disableWeekDays,
+    style: styleProp,
+}: DockedHeaderProps) {
+    const setStore = useDatePickerStoreRef().set;
+    const { localDate, pickerType } = useDatePickerStoreValue(state => ({
+        localDate: state.localDate,
+        pickerType: state.pickerType,
+    }));
+    const isHorizontal = scrollMode === 'horizontal';
+
+    const { monthName, year } = useMemo(
+        () => ({ monthName: format(localDate, 'LLL'), year: localDate.getFullYear() }),
+        [localDate],
+    );
+
+    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 { 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 = 'inline',
+    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

@@ -43,6 +43,8 @@ function DatePickerInlineBaseChild(props: DatePickerInlineBaseProps) {
         HeaderComponent,
         onToggle,
         monthStyle,
+        showOutsideDays,
+        headerLayout,
     } = props;
     const [pickerType, setStore] = useDatePickerStore(state => state.pickerType);
 
@@ -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,7 +170,9 @@ function DatePickerInlineBaseChild(props: DatePickerInlineBaseProps) {
                 renderItem={renderMonthComponent}
                 renderHeader={renderCalenderHeader}
             />
-            {isHorizontal && pickerType === 'year' && <YearPicker />}
+            {isHorizontal && pickerType === 'year' && (
+                <YearPicker layout={headerLayout === 'docked' ? 'list' : 'grid'} />
+            )}
             {isHorizontal && pickerType === 'month' && <MonthPicker />}
         </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/useActionState';
 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/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={16}
+                            />
+                        )}
                     </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,8 @@
-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 +13,7 @@ import {
     getRealIndex,
     gridCounts,
     startAtIndex,
+    totalMonths,
     useRangeChecker,
 } from './dateUtils';
 import type { MonthMultiProps, MonthRangeProps, MonthSingleProps } from './types';
@@ -42,11 +42,9 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
         scrollMode,
         disableWeekDays,
         validRange,
+        showOutsideDays,
         // 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,11 @@ 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();
 
         return { monthName: format(md, 'LLLL'), month: m, year: y };
-    }, [index, localDate, mode]);
+    }, [index]);
 
     const grid = useMemo(
         () =>
@@ -78,67 +76,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 +111,8 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
                     generatedDays={generatedDays}
                     disableWeekDays={disableWeekDays}
                     onPressDate={onPressDate}
-                    style={weekContainerStyle}
+                    showOutsideDays={showOutsideDays}
+                    style={datePickerMonthStyles.weekContainerStyle}
                 />
             ))}
         </View>
@@ -190,7 +156,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 {