react-native-molecules 0.5.0-beta.0

package/components/DatePickerInline/DatePickerInlineBase.tsx

@@ -0,0 +1,181 @@
+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 Swiper from './Swiper';
+import type {
+    CalendarDate,
+    CalendarDates,
+    DatePickerInlineBaseProps,
+    MultiChange,
+    RangeChange,
+    SingleChange,
+} from './types';
+import YearPicker from './YearPicker';
+
+function DatePickerInlineBase(props: DatePickerInlineBaseProps) {
+    return (
+        <Provider value={defaultValue}>
+            <DatePickerInlineComponent {...props} />
+        </Provider>
+    );
+}
+
+function DatePickerInlineBaseChild(props: DatePickerInlineBaseProps) {
+    const {
+        locale = 'en',
+        mode = 'single',
+        onChange,
+        startYear = 1800,
+        endYear = 2200,
+        startDate,
+        endDate,
+        date,
+        disableWeekDays,
+        dates,
+        validRange,
+        dateMode = 'start',
+        style,
+        HeaderComponent,
+        onToggle,
+        monthStyle,
+    } = props;
+    const [pickerType, setStore] = useDatePickerStore(state => state.pickerType);
+
+    const scrollMode = mode === 'range' || mode === 'multiple' ? 'vertical' : 'horizontal';
+    const isHorizontal = scrollMode === 'horizontal';
+
+    useEffect(() => {
+        setStore(() => ({
+            localDate: date || new Date(),
+            startDateYear: startYear,
+            endDateYear: endYear,
+        }));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    // prevent re-rendering all months when something changed we only need the
+    // latest version of the props and we don't want the useCallback to change
+    const startDateRef = useLatest<CalendarDate>(startDate);
+    const endDateRef = useLatest<CalendarDate>(endDate);
+    const onChangeRef = useLatest<RangeChange | SingleChange | MultiChange | undefined>(onChange);
+    const datesRef = useLatest<CalendarDates>(dates);
+
+    const onPressDate = useCallback(
+        (d: Date) => {
+            if (mode === 'single') {
+                (onChangeRef.current as SingleChange)({
+                    date: dateMode === 'start' ? d : getEndOfDay(d),
+                });
+            } else if (mode === 'range') {
+                const sd = startDateRef.current;
+                const ed = endDateRef.current;
+                let isStart: boolean = true;
+                if (sd && !ed && dateToUnix(d) >= dateToUnix(sd!)) {
+                    isStart = false;
+                }
+                (onChangeRef.current as RangeChange)({
+                    startDate: isStart ? d : sd,
+                    endDate: !isStart ? getEndOfDay(d) : undefined,
+                });
+            } else if (mode === 'multiple') {
+                datesRef.current = datesRef.current || [];
+                const exists = datesRef.current.some(ed => areDatesOnSameDay(ed, d));
+
+                const newDates = exists
+                    ? datesRef.current.filter(ed => !areDatesOnSameDay(ed, d))
+                    : [...datesRef.current, d];
+
+                newDates.sort((a, b) => a.getTime() - b.getTime());
+                (onChangeRef.current as MultiChange)({
+                    dates: newDates,
+                    datePressed: d,
+                    change: exists ? 'removed' : 'added',
+                });
+            }
+            onToggle?.();
+        },
+        [mode, dateMode, onChangeRef, startDateRef, endDateRef, datesRef, onToggle],
+    );
+
+    const { containerStyle, initialIndex } = useMemo(() => {
+        return {
+            containerStyle: [styles.root, style],
+            initialIndex: getInitialIndex(startDate || date || dates?.[0]),
+        };
+    }, [date, dates, startDate, style]);
+
+    const renderMonthComponent = useCallback(
+        (index: number) => {
+            return (
+                <Month
+                    locale={locale}
+                    mode={mode}
+                    validRange={validRange}
+                    index={index}
+                    date={date}
+                    dates={dates}
+                    startDate={startDate}
+                    endDate={endDate}
+                    onPressDate={onPressDate}
+                    scrollMode={scrollMode}
+                    disableWeekDays={disableWeekDays}
+                    customMonthStyles={monthStyle}
+                />
+            );
+        },
+        [
+            locale,
+            mode,
+            validRange,
+            date,
+            dates,
+            startDate,
+            endDate,
+            onPressDate,
+            scrollMode,
+            disableWeekDays,
+            monthStyle,
+        ],
+    );
+
+    const renderCalenderHeader = useCallback(() => {
+        if (HeaderComponent) {
+            return (
+                <HeaderComponent
+                    // TODO - fix ts issues
+                    // @ts-ignore
+                    scrollMode={scrollMode}
+                    disableWeekDays={disableWeekDays}
+                    locale={locale}
+                />
+            );
+        }
+        return null;
+    }, [HeaderComponent, scrollMode, disableWeekDays, locale]);
+
+    return (
+        <View style={containerStyle}>
+            <Swiper
+                initialIndex={initialIndex}
+                scrollMode={scrollMode}
+                renderItem={renderMonthComponent}
+                renderHeader={renderCalenderHeader}
+            />
+            {isHorizontal && pickerType === 'year' && <YearPicker />}
+            {isHorizontal && pickerType === 'month' && <MonthPicker />}
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    root: { flex: 1 },
+});
+
+const DatePickerInlineComponent = memo(DatePickerInlineBaseChild);
+
+export default memo(DatePickerInlineBase);

package/components/DatePickerInline/DatePickerInlineHeader.tsx

@@ -0,0 +1,108 @@
+import { add, format } 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 { DisableWeekDaysType } from './dateUtils';
+import DayNames from './DayNames';
+import HeaderItem from './HeaderItem';
+import { datePickerHeaderStyles, dayNamesHeight } from './utils';
+
+const buttonContainerHeight = 56;
+const buttonContainerMarginTop = 4;
+const buttonContainerMarginBottom = 8;
+
+export type CalendarHeaderProps = {
+    locale?: string;
+    scrollMode: 'horizontal' | 'vertical';
+    disableWeekDays?: DisableWeekDaysType;
+    style?: ViewStyle;
+};
+
+function DatePickerInlineHeader({
+    locale = 'en',
+    scrollMode,
+    disableWeekDays,
+    style: styleProp,
+}: CalendarHeaderProps) {
+    const [_, setStore] = useDatePickerStore(state => state);
+    const { localDate, isYearPickerType } = useDatePickerStoreValue(state => ({
+        localDate: state.localDate,
+        isYearPickerType: state.pickerType === 'year',
+    }));
+    const isHorizontal = scrollMode === 'horizontal';
+
+    const { monthName, year } = useMemo(() => {
+        const y = localDate.getFullYear();
+
+        return { monthName: format(localDate, 'LLLL'), year: y };
+    }, [localDate]);
+
+    const { containerStyle } = useMemo(() => {
+        // const { datePickerHeader, buttonContainer, buttonWrapper, spacer, ...rest } =
+        //     componentStyles;
+
+        return {
+            containerStyle: [
+                datePickerHeaderStyles.datePickerHeader,
+                datePickerHeaderStyles,
+                styleProp,
+            ] as StyleProp<ViewStyle>,
+            buttonContainerStyle: datePickerHeaderStyles.buttonContainer,
+            buttonWrapperStyle: datePickerHeaderStyles.buttonWrapper,
+            spacerStyle: datePickerHeaderStyles.spacer,
+        };
+    }, [styleProp]);
+
+    const handleOnYearPress = useCallback(() => {
+        isHorizontal && setStore(prev => ({ pickerType: prev.pickerType ? undefined : 'year' }));
+    }, [isHorizontal, setStore]);
+
+    const handleOnPrev = useCallback(() => {
+        setStore(prev => ({ localDate: add(prev.localDate, { months: -1 }) }));
+    }, [setStore]);
+
+    const handleOnNext = useCallback(() => {
+        setStore(prev => ({ localDate: add(prev.localDate, { months: 1 }) }));
+    }, [setStore]);
+
+    return (
+        <View pointerEvents={'box-none'}>
+            <>
+                {isHorizontal && (
+                    <View style={containerStyle}>
+                        <HeaderItem
+                            onPressDropdown={handleOnYearPress}
+                            type="year"
+                            value={`${monthName} ${year}`}
+                            pickerType="year"
+                            selecting={isYearPickerType}
+                        />
+                        <HeaderItem
+                            onNext={handleOnNext}
+                            onPrev={handleOnPrev}
+                            selecting={false}
+                            value={year}
+                            pickerType="year"
+                        />
+                    </View>
+                )}
+            </>
+            <DayNames disableWeekDays={disableWeekDays} locale={locale} />
+        </View>
+    );
+}
+
+export function getCalendarHeaderHeight(scrollMode: 'horizontal' | 'vertical') {
+    if (scrollMode === 'horizontal') {
+        return (
+            buttonContainerHeight +
+            buttonContainerMarginTop +
+            buttonContainerMarginBottom +
+            dayNamesHeight
+        );
+    }
+    return dayNamesHeight;
+}
+
+export default memo(DatePickerInlineHeader);

package/components/DatePickerInline/Day.tsx

@@ -0,0 +1,88 @@
+import { memo, useCallback, useMemo } from 'react';
+import { type StyleProp, View, type ViewStyle } from 'react-native';
+
+import { resolveStateVariant } from '../../utils';
+import { Text } from '../Text';
+import { TouchableRipple } from '../TouchableRipple';
+import DayRange from './DayRange';
+import { datePickerDayEmptyStyles, datePickerDayStyles } from './utils';
+
+function EmptyDayPure() {
+    return <View style={datePickerDayEmptyStyles.root} />;
+}
+export const EmptyDay = memo(EmptyDayPure);
+
+// TODO hover state
+function Day(props: {
+    day: number;
+    month: number;
+    year: number;
+    selected: boolean;
+    inRange: boolean;
+    leftCrop: boolean;
+    rightCrop: boolean;
+    isToday: boolean;
+    disabled: boolean;
+    onPressDate: (date: Date) => any;
+}) {
+    const {
+        day,
+        month,
+        year,
+        selected,
+        inRange,
+        leftCrop,
+        rightCrop,
+        onPressDate,
+        isToday,
+        disabled,
+    } = props;
+    const state = resolveStateVariant({
+        disabled,
+        selected,
+        inRange,
+        today: isToday,
+    });
+    datePickerDayStyles.useVariants({
+        state: state as any,
+    });
+
+    const onPress = useCallback(() => {
+        onPressDate(new Date(year, month, day));
+    }, [onPressDate, year, month, day]);
+
+    const { containerStyle, buttonStyle, dayStyle, textStyle } = useMemo(() => {
+        return {
+            containerStyle: datePickerDayStyles.containerStyle,
+            buttonStyle: datePickerDayStyles.button,
+            dayStyle: [
+                datePickerDayStyles.day,
+                isToday ? datePickerDayStyles.today : null,
+            ] as StyleProp<ViewStyle>,
+            textStyle: datePickerDayStyles.text,
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isToday, state]);
+
+    return (
+        <View style={containerStyle}>
+            <DayRange inRange={inRange} leftCrop={leftCrop} rightCrop={rightCrop} />
+
+            <TouchableRipple
+                testID={`day-${year}-${month}-${day}`}
+                disabled={disabled}
+                borderless={true}
+                onPress={disabled ? undefined : onPress}
+                style={buttonStyle}
+                accessibilityRole="button">
+                <View style={dayStyle}>
+                    <Text style={textStyle} selectable={false}>
+                        {day}
+                    </Text>
+                </View>
+            </TouchableRipple>
+        </View>
+    );
+}
+
+export default memo(Day);

package/components/DatePickerInline/DayName.tsx

@@ -0,0 +1,17 @@
+import { memo } from 'react';
+import { View } from 'react-native';
+
+import { Text } from '../Text';
+import { dateDayNameStyles } from './utils';
+
+function DayName({ label }: { label: string }) {
+    return (
+        <View style={dateDayNameStyles.dayName}>
+            <Text style={dateDayNameStyles.dayName} selectable={false}>
+                {label}
+            </Text>
+        </View>
+    );
+}
+
+export default memo(DayName);

package/components/DatePickerInline/DayNames.tsx

@@ -0,0 +1,32 @@
+import { memo } from 'react';
+import { View } from 'react-native';
+
+import { addDays, format, startOfWeek } from '../../utils/date-fns';
+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,
+{
+    disableWeekDays?: DisableWeekDaysType;
+    locale?: string;
+}) {
+    return (
+        <View style={dateDayNameStyles.container} pointerEvents={'none'}>
+            {shortDayNames
+                .filter((_, dayIndex) => showWeekDay(dayIndex, disableWeekDays))
+                .map((dayName, i) => (
+                    <DayName key={`${dayName}_${i}`} label={dayName} />
+                ))}
+        </View>
+    );
+}
+
+export default memo(DayNames);

package/components/DatePickerInline/DayRange.tsx

@@ -0,0 +1,48 @@
+import { memo } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { resolveStateVariant } from '../../utils';
+import { datePickerDayRangeStyles } from './utils';
+
+function DayRange({
+    leftCrop,
+    rightCrop,
+    inRange,
+}: {
+    leftCrop: boolean;
+    rightCrop: boolean;
+    inRange: boolean;
+}) {
+    const bothWays = inRange && leftCrop && rightCrop;
+    const isCrop = inRange && (leftCrop || rightCrop) && !(leftCrop && rightCrop);
+
+    datePickerDayRangeStyles.useVariants({
+        state: resolveStateVariant({
+            isRightCrop: rightCrop,
+            isLeftCrop: leftCrop,
+            inRange,
+            bothWays,
+            isCrop,
+        }) as any,
+    });
+
+    return (
+        <>
+            {(inRange || isCrop) && (
+                <View
+                    pointerEvents="none"
+                    style={[StyleSheet.absoluteFill, datePickerDayRangeStyles.container]}>
+                    {isCrop && (
+                        <>
+                            <View style={datePickerDayRangeStyles.rightCrop} />
+                            <View style={datePickerDayRangeStyles.centerCrop} />
+                            <View style={datePickerDayRangeStyles.leftCrop} />
+                        </>
+                    )}
+                </View>
+            )}
+        </>
+    );
+}
+
+export default memo(DayRange);

package/components/DatePickerInline/HeaderItem.tsx

@@ -0,0 +1,111 @@
+import { memo, useCallback, useMemo } from 'react';
+import { type StyleProp, View, type ViewStyle } from 'react-native';
+
+import { datePickerHeaderItemStyles } from '../DatePickerDocked/utils';
+import { IconButton } from '../IconButton';
+import { Text } from '../Text';
+import { TouchableRipple } from '../TouchableRipple';
+import { useDatePickerStoreValue } from './DatePickerContext';
+
+function HeaderItem({
+    value,
+    selecting,
+    type,
+    pickerType,
+    onPressDropdown,
+    onNext,
+    onPrev,
+}: {
+    value: number | string;
+    type?: 'month' | 'year';
+    selecting?: boolean;
+    pickerType: 'month' | 'year' | undefined;
+    onPressDropdown?: (type: 'month' | 'year') => void;
+    onNext?: (type: 'month' | 'year' | undefined) => void;
+    onPrev?: (type: 'month' | 'year' | undefined) => void;
+}) {
+    const { startDateYear, endDateYear } = useDatePickerStoreValue(state => ({
+        startDateYear: state.startDateYear,
+        endDateYear: state.endDateYear,
+    }));
+    const disabled = pickerType && pickerType !== type;
+
+    const handlePressDropDown = useCallback(() => {
+        type && onPressDropdown && onPressDropdown(type);
+    }, [onPressDropdown, type]);
+
+    const handleOnPrevious = useCallback(() => {
+        onPrev && onPrev(type);
+    }, [onPrev, type]);
+
+    const handleOnNext = useCallback(() => {
+        onNext && onNext(type);
+    }, [onNext, type]);
+
+    const containerStyle = useMemo(
+        () =>
+            [
+                datePickerHeaderItemStyles.buttonContainer,
+                {
+                    justifyContent: !onPressDropdown
+                        ? 'flex-end'
+                        : !onNext
+                        ? 'flex-start'
+                        : 'center',
+                },
+            ] as StyleProp<ViewStyle>,
+        [onPressDropdown, onNext],
+    );
+
+    return (
+        <View style={containerStyle} pointerEvents={'box-none'}>
+            {!selecting && onPrev && (
+                <View style={datePickerHeaderItemStyles.buttonWrapper}>
+                    <IconButton
+                        type="material-community"
+                        name="chevron-left"
+                        size="md"
+                        // Todo: Translate
+                        accessibilityLabel={'Previous'}
+                        onPress={handleOnPrevious}
+                        disabled={value === startDateYear}
+                    />
+                </View>
+            )}
+            {type && (
+                <TouchableRipple
+                    disabled={disabled}
+                    onPress={handlePressDropDown}
+                    accessibilityRole="button"
+                    accessibilityLabel={`${value}`}
+                    style={datePickerHeaderItemStyles.buttonStyle}>
+                    <View style={datePickerHeaderItemStyles.innerStyle}>
+                        <Text style={datePickerHeaderItemStyles.labelStyle} selectable={false}>
+                            {value}
+                        </Text>
+                        <IconButton
+                            onPress={handlePressDropDown}
+                            name={selecting && type === pickerType ? 'menu-up' : 'menu-down'}
+                            size="sm"
+                            disabled={disabled}
+                        />
+                    </View>
+                </TouchableRipple>
+            )}
+            {!selecting && onNext && (
+                <View style={datePickerHeaderItemStyles.buttonWrapper}>
+                    <IconButton
+                        name="chevron-right"
+                        size="md"
+                        // Todo: Translate
+                        accessibilityLabel={'Next'}
+                        onPress={handleOnNext}
+                        disabled={value === endDateYear}
+                    />
+                </View>
+            )}
+        </View>
+    );
+}
+
+export default memo(HeaderItem);