react-native-molecules 0.5.0-beta.0

package/components/DatePickerInline/Month.tsx

@@ -0,0 +1,233 @@
+import { memo, useCallback, 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,
+    beginOffset,
+    estimatedMonthHeight,
+    generateCalendarGrid,
+    getGridCount,
+    getRealIndex,
+    gridCounts,
+    startAtIndex,
+    useRangeChecker,
+} from './dateUtils';
+import type { MonthMultiProps, MonthRangeProps, MonthSingleProps } from './types';
+import {
+    datePickerMonthStyles,
+    dayNamesHeight,
+    montHeaderHeight,
+    monthHeaderSingleHeight,
+    monthHeaderSingleMarginBottom,
+    monthHeaderSingleMarginTop,
+    weekSize,
+} from './utils';
+import Week from './Week';
+
+export type Props = MonthSingleProps | MonthRangeProps | MonthMultiProps;
+
+function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
+    const {
+        index,
+        mode,
+        date,
+        dates,
+        startDate,
+        endDate,
+        onPressDate,
+        scrollMode,
+        disableWeekDays,
+        validRange,
+        // customMonthStyles,
+    } = props;
+    const { localDate } = useDatePickerStoreValue(state => ({ localDate: state.localDate }));
+    // const monthStyles = useComponentStyles('DatePicker_Month', customMonthStyles);
+
+    const isHorizontal = scrollMode === 'horizontal';
+    const { isDisabled, isWithinValidRange } = useRangeChecker(validRange);
+
+    const { monthName, month, year } = useMemo(() => {
+        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();
+
+        return { monthName: format(md, 'LLLL'), month: m, year: y };
+    }, [index, localDate, mode]);
+
+    const grid = useMemo(
+        () =>
+            generateCalendarGrid({
+                year,
+                month,
+                index,
+                isDisabled,
+                mode,
+                isWithinValidRange,
+                startDate,
+                endDate,
+                dates,
+                date,
+                monthGrid,
+            }),
+        [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 (
+                <View style={headerStyle}>
+                    <View accessibilityLabel={`${monthName} ${year}`} style={yearButtonStyle}>
+                        <View style={yearInnerStyle}>
+                            <Text style={monthLabelStyle} selectable={false}>
+                                {monthName} {year}
+                            </Text>
+                        </View>
+                    </View>
+                </View>
+            );
+        }
+        return null;
+    }, [
+        headerStyle,
+        isHorizontal,
+        monthLabelStyle,
+        monthName,
+        year,
+        yearButtonStyle,
+        yearInnerStyle,
+    ]);
+
+    return (
+        <View>
+            {renderHeader()}
+            {grid.map(({ weekIndex, generatedDays }) => (
+                <Week
+                    key={weekIndex}
+                    weekIndex={weekIndex}
+                    generatedDays={generatedDays}
+                    disableWeekDays={disableWeekDays}
+                    onPressDate={onPressDate}
+                    style={weekContainerStyle}
+                />
+            ))}
+        </View>
+    );
+}
+
+const monthGrid = (index: number) => {
+    return Array(getGridCount(index))
+        .fill(null)
+        .map((_, weekGrid) => {
+            const days = Array(7).fill(null);
+            return { weekGrid, days };
+        });
+};
+
+function getIndexCount(index: number): number {
+    if (index > startAtIndex) {
+        return index - startAtIndex;
+    }
+
+    return -(startAtIndex - index);
+}
+
+function weeksOffset(index: number): number {
+    if (index === startAtIndex) {
+        return 0;
+    }
+    let off = 0;
+    if (index > startAtIndex) {
+        for (let i = 0; i < index - startAtIndex; i++) {
+            const cIndex = startAtIndex + i;
+            off += gridCounts[cIndex] || getGridCount(cIndex);
+        }
+    } else {
+        for (let i = 0; i < startAtIndex - index; i++) {
+            const cIndex = startAtIndex - i - 1;
+            off -= gridCounts[cIndex] || getGridCount(cIndex);
+        }
+    }
+    return off;
+}
+
+export function getIndexFromHorizontalOffset(offset: number, width: number): number {
+    return startAtIndex + Math.floor(offset / width);
+}
+
+export function getIndexFromVerticalOffset(offset: number): number {
+    let estimatedIndex = startAtIndex + Math.ceil(offset / estimatedMonthHeight);
+
+    const realOffset = getVerticalMonthsOffset(estimatedIndex);
+    const difference = (realOffset - beginOffset - offset) / estimatedMonthHeight;
+    if (difference >= 1 || difference <= -1) {
+        estimatedIndex -= Math.floor(difference);
+    }
+    return estimatedIndex;
+}
+
+export function getHorizontalMonthOffset(index: number, width: number) {
+    if (index < 0) {
+        return 0;
+    }
+    return width * index;
+}
+
+export function getVerticalMonthsOffset(index: number) {
+    const count = getIndexCount(index);
+    const ob = weeksOffset(index);
+    const monthsHeight = weekSize * ob;
+    const c = monthsHeight + count * (dayNamesHeight + montHeaderHeight);
+
+    return (c || 0) + beginOffset;
+}
+
+export function getMonthHeight(scrollMode: 'horizontal' | 'vertical', index: number): number {
+    const calendarHeight = getCalendarHeaderHeight(scrollMode);
+    const gc = getGridCount(index);
+
+    const currentMonthHeight = weekSize * gc;
+    const extraHeight = scrollMode === 'horizontal' ? monthHeaderSingleHeight : montHeaderHeight;
+    const c = calendarHeight + currentMonthHeight + extraHeight;
+    return c || 0;
+}
+
+export default memo(Month);

package/components/DatePickerInline/MonthPicker.tsx

@@ -0,0 +1,174 @@
+import { format, 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 { HorizontalDivider } from '../HorizontalDivider';
+import { Icon } from '../Icon';
+import { ListItem } from '../ListItem/';
+import { Text } from '../Text';
+import { useDatePickerStore, useDatePickerStoreValue } from './DatePickerContext';
+
+export default function MonthPicker() {
+    const [_, setStore] = useDatePickerStore(state => state);
+    const { localDate, selectingMonth } = useDatePickerStoreValue(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 handleOnChange = useCallback(
+        (month: number) => {
+            setStore(prev => ({
+                localDate: setMonth(prev.localDate, month),
+                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>
+    );
+}
+
+function MonthPure({
+    month,
+    selected,
+    onPressMonth,
+    monthStyles,
+}: {
+    month: number;
+    selected: boolean;
+    onPressMonth: (newMonth: number) => any;
+    monthStyles: ViewStyle;
+}) {
+    const state = resolveStateVariant({
+        selected,
+    });
+    datePickerDockedMonthItemStyles.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]);
+
+    return (
+        <ListItem
+            onPress={handleMonthPress}
+            accessibilityRole="button"
+            accessibilityLabel={String(month)}
+            accessibilityState={accessibilityState}
+            style={monthButtonStyle}
+            testID={`pick-month-${month}`}
+            left={
+                selected ? (
+                    <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')}
+                </Text>
+            </View>
+        </ListItem>
+    );
+}
+const Month = memo(MonthPure);
+
+const styles = StyleSheet.create(theme => ({
+    root: {
+        flex: 1,
+        top: 56,
+        zIndex: 100,
+    },
+
+    checkIconView: {
+        marginLeft: theme.spacings['4'],
+    },
+
+    spacer: {
+        width: 44,
+    },
+
+    list: {
+        flex: 1,
+    },
+    opacity0: {
+        opacity: 0,
+    },
+    opacity1: {
+        opacity: 1,
+    },
+}));

package/components/DatePickerInline/Swiper.native.tsx

@@ -0,0 +1,172 @@
+import { memo, useCallback, useMemo, useRef, useState } from 'react';
+import {
+    type NativeScrollEvent,
+    type NativeSyntheticEvent,
+    ScrollView,
+    StyleSheet,
+    View,
+    type ViewStyle,
+} from 'react-native';
+
+import AutoSizer from './AutoSizer';
+import { beginOffset, estimatedMonthHeight, totalMonths } from './dateUtils';
+import {
+    getHorizontalMonthOffset,
+    getIndexFromVerticalOffset,
+    getMonthHeight,
+    getVerticalMonthsOffset,
+} from './Month';
+import type { SwiperProps } from './SwiperUtils';
+import { montHeaderHeight } from './utils';
+
+function getVisibleArray(
+    i: number,
+    { isHorizontal, height }: { isHorizontal: boolean; height: number },
+) {
+    if (isHorizontal || height < 700) {
+        return [i - 1, i, i + 1];
+    }
+    return [i - 2, i - 1, i, i + 1, i + 2];
+}
+
+function Swiper(props: SwiperProps) {
+    return (
+        <AutoSizer>
+            {({ width, height }) => <SwiperInner {...props} width={width} height={height} />}
+        </AutoSizer>
+    );
+}
+
+function SwiperInner({
+    scrollMode,
+    renderItem,
+    renderHeader,
+    renderFooter,
+    initialIndex,
+    width,
+    height,
+}: SwiperProps & { width: number; height: number }) {
+    const idx = useRef<number>(initialIndex);
+    const isHorizontal = scrollMode === 'horizontal';
+
+    const [visibleIndexes, setVisibleIndexes] = useState<number[]>(
+        getVisibleArray(initialIndex, { isHorizontal, height }),
+    );
+
+    const parentRef = useRef<ScrollView | null>(null);
+
+    const scrollTo = useCallback(
+        (index: number, animated: boolean) => {
+            idx.current = index;
+            setVisibleIndexes(getVisibleArray(index, { isHorizontal, height }));
+
+            if (!parentRef.current) {
+                return;
+            }
+            const offset = isHorizontal
+                ? getHorizontalMonthOffset(index, width)
+                : getVerticalMonthsOffset(index) - montHeaderHeight;
+
+            if (isHorizontal) {
+                parentRef.current.scrollTo({
+                    y: 0,
+                    x: offset,
+                    animated,
+                });
+            } else {
+                parentRef.current.scrollTo({
+                    y: offset,
+                    x: 0,
+                    animated,
+                });
+            }
+        },
+        [parentRef, isHorizontal, width, height],
+    );
+
+    const scrollToInitial = useCallback(() => {
+        scrollTo(idx.current, false);
+    }, [scrollTo]);
+
+    const onMomentumScrollEnd = useCallback(
+        (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+            const contentOffset = e.nativeEvent.contentOffset;
+            const viewSize = e.nativeEvent.layoutMeasurement;
+            const newIndex = isHorizontal
+                ? Math.floor(contentOffset.x / viewSize.width)
+                : getIndexFromVerticalOffset(contentOffset.y - beginOffset);
+
+            if (newIndex === 0) {
+                return;
+            }
+
+            if (idx.current !== newIndex) {
+                idx.current = newIndex;
+                setVisibleIndexes(getVisibleArray(newIndex, { isHorizontal, height }));
+            }
+        },
+        [idx, height, isHorizontal],
+    );
+
+    const { innerContainerStyle, itemContainerStyle } = useMemo(() => {
+        return {
+            innerContainerStyle: [
+                styles.inner,
+                {
+                    height: isHorizontal ? height : estimatedMonthHeight * totalMonths,
+                    width: isHorizontal ? width * totalMonths : width,
+                },
+            ],
+            itemContainerStyle: (vi: number) => ({
+                top: isHorizontal ? 0 : getVerticalMonthsOffset(visibleIndexes[vi]),
+                left: isHorizontal ? getHorizontalMonthOffset(visibleIndexes[vi], width) : 0,
+                right: isHorizontal ? undefined : 0,
+                bottom: isHorizontal ? 0 : undefined,
+                position: 'absolute',
+                width: isHorizontal ? width : undefined,
+                height: isHorizontal ? undefined : getMonthHeight(scrollMode, visibleIndexes[vi]),
+            }),
+        };
+    }, [height, isHorizontal, scrollMode, visibleIndexes, width]);
+
+    return (
+        <>
+            {renderHeader && renderHeader()}
+            <ScrollView
+                scrollsToTop={false}
+                ref={parentRef}
+                horizontal={isHorizontal}
+                pagingEnabled={isHorizontal}
+                style={styles.viewPager}
+                onMomentumScrollEnd={onMomentumScrollEnd}
+                onScrollEndDrag={onMomentumScrollEnd}
+                onLayout={scrollToInitial}
+                showsHorizontalScrollIndicator={false}
+                showsVerticalScrollIndicator={false}
+                decelerationRate="fast"
+                scrollEventThrottle={10}>
+                <View style={innerContainerStyle}>
+                    {visibleIndexes
+                        ? new Array(visibleIndexes.length).fill(undefined).map((_, vi) => (
+                              <View key={vi} style={itemContainerStyle(vi) as ViewStyle}>
+                                  {renderItem(visibleIndexes[vi])}
+                              </View>
+                          ))
+                        : null}
+                </View>
+            </ScrollView>
+            {renderFooter && renderFooter()}
+        </>
+    );
+}
+
+const styles = StyleSheet.create({
+    viewPager: {
+        flex: 1,
+    },
+    inner: {
+        position: 'relative',
+    },
+});
+
+export default memo(Swiper);