react-native-molecules 0.5.0-beta.20 → 0.5.0-beta.22

package/components/DatePickerInline/Month.tsx

@@ -1,7 +1,6 @@
 import { memo, useMemo } from 'react';
 import { View } from 'react-native';
 
-import { format } from '../../utils/date-fns';
 import { Text } from '../Text';
 import { getCalendarHeaderHeight } from './DatePickerInlineHeader';
 import {
@@ -43,6 +42,7 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
         disableWeekDays,
         validRange,
         showOutsideDays,
+        locale,
         // customMonthStyles,
     } = props;
     const isHorizontal = scrollMode === 'horizontal';
@@ -54,9 +54,10 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
         const md = addMonths(new Date(), realIndex);
         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]);
+        return { monthName: name, month: m, year: y };
+    }, [index, locale]);
 
     const grid = useMemo(
         () =>

package/components/DatePickerInline/MonthPicker.tsx

@@ -1,29 +1,35 @@
-import { format, setMonth } from 'date-fns';
-import { memo, useCallback, useMemo, useRef } from 'react';
-import { FlatList, View, type ViewStyle } from 'react-native';
+import { setMonth } from 'date-fns';
+import { memo, useCallback, useMemo } from 'react';
+import { FlatList, type FlatListProps, View, type ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
 import { resolveStateVariant } from '../../utils';
 import { range } from '../../utils/dateTimePicker';
+import type { DatePickerLocale } from '../DatePicker/context';
 import { datePickerMonthItemStyles, datePickerMonthPickerStyles } from '../DatePicker/utils';
-import { HorizontalDivider } from '../HorizontalDivider';
+import { Divider } from '../Divider';
 import { Icon } from '../Icon';
-import { ListItem } from '../ListItem/';
+import { List, type ListContentProcessPropsArgs, useListContextValue } from '../List';
 import { Text } from '../Text';
-import { useDatePickerStore, useDatePickerStoreValue } from './DatePickerContext';
+import { useDatePickerInlineStore, useDatePickerInlineStoreValue } from './store';
 
-export default function MonthPicker() {
-    const [_, setStore] = useDatePickerStore(state => state);
-    const { localDate, selectingMonth } = useDatePickerStoreValue(state => ({
+type MonthListItem = { id: number; label: string };
+
+export default function MonthPicker({ locale }: { locale?: DatePickerLocale }) {
+    const [_, setStore] = useDatePickerInlineStore(state => state);
+    const { localDate, selectingMonth } = useDatePickerInlineStoreValue(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 monthItems = useMemo<MonthListItem[]>(
+        () => months.map(month => ({ id: month, label: String(month) })),
+        [months],
+    );
 
     const handleOnChange = useCallback(
-        (month: number) => {
+        (month: number | null) => {
+            if (month === null) return;
             setStore(prev => ({
                 localDate: setMonth(prev.localDate, month),
                 pickerType: undefined,
@@ -32,18 +38,26 @@ export default function MonthPicker() {
         [setStore],
     );
 
-    const renderItem = useCallback(
-        ({ item }: { item: number }) => {
-            return (
+    const processFlatListProps = useCallback(
+        ({
+            props,
+            items,
+        }: ListContentProcessPropsArgs<
+            MonthListItem,
+            Omit<FlatListProps<MonthListItem>, 'children' | 'ref'>
+        >): FlatListProps<MonthListItem> => ({
+            ...props,
+            data: items,
+            renderItem: ({ item }) => (
                 <Month
-                    month={item}
-                    selected={localDate.getMonth() === item}
-                    onPressMonth={handleOnChange}
+                    month={item.id}
                     monthStyles={datePickerMonthPickerStyles.root}
+                    locale={locale}
                 />
-            );
-        },
-        [localDate, handleOnChange],
+            ),
+            keyExtractor: item => `${item.id}`,
+        }),
+        [locale],
     );
 
     if (!selectingMonth) {
@@ -51,39 +65,45 @@ export default function MonthPicker() {
     }
 
     return (
-        <View
-            style={[
-                StyleSheet.absoluteFill,
-                styles.root,
-                // { backgroundColor },
-                selectingMonth ? styles.opacity1 : styles.opacity0,
-            ]}
-            pointerEvents={selectingMonth ? 'auto' : 'none'}>
-            <HorizontalDivider />
-            <FlatList<number>
-                ref={flatList}
-                style={styles.list}
-                data={months}
-                renderItem={renderItem}
-                keyExtractor={item => `${item}`}
-            />
-        </View>
+        <List
+            items={monthItems}
+            multiple={false}
+            value={localDate.getMonth()}
+            onChange={handleOnChange}>
+            <View
+                style={[
+                    StyleSheet.absoluteFill,
+                    styles.root,
+                    selectingMonth ? styles.opacity1 : styles.opacity0,
+                ]}
+                pointerEvents={selectingMonth ? 'auto' : 'none'}>
+                <Divider />
+                <List.Content<MonthListItem, typeof FlatList<MonthListItem>>
+                    ContainerComponent={FlatList<MonthListItem>}
+                    style={styles.list}
+                    processProps={processFlatListProps}
+                />
+            </View>
+        </List>
     );
 }
 
 function MonthPure({
     month,
-    selected,
-    onPressMonth,
     monthStyles,
+    locale,
 }: {
     month: number;
-    selected: boolean;
-    onPressMonth: (newMonth: number) => any;
     monthStyles: ViewStyle;
+    locale?: DatePickerLocale;
 }) {
+    const isSelected = useListContextValue(state => {
+        const selectedValue = state.value as any;
+        return (selectedValue?.id ?? selectedValue) === month;
+    });
+
     const state = resolveStateVariant({
-        selected,
+        selected: isSelected,
     });
 
     datePickerMonthItemStyles.useVariants({
@@ -95,25 +115,25 @@ function MonthPure({
 
         return {
             monthButtonStyle: [monthButton, monthStyles],
-            accessibilityState: { selected },
+            accessibilityState: { selected: isSelected },
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [selected, monthStyles, state]);
+    }, [isSelected, monthStyles]);
 
-    const handleMonthPress = useCallback(() => {
-        onPressMonth(month);
-    }, [onPressMonth, month]);
+    const monthLabel = useMemo(
+        () => new Intl.DateTimeFormat(locale, { month: 'long' }).format(new Date(2000, month, 1)),
+        [locale, month],
+    );
 
     return (
-        <ListItem
-            onPress={handleMonthPress}
+        <List.Item
+            value={month}
             accessibilityRole="button"
             accessibilityLabel={String(month)}
             accessibilityState={accessibilityState}
             style={monthButtonStyle}
             testID={`pick-month-${month}`}
             left={
-                selected ? (
+                isSelected ? (
                     <View style={styles.checkIconView}>
                         <Icon name="check" size={24} />
                     </View>
@@ -123,10 +143,10 @@ function MonthPure({
             }>
             <View style={datePickerMonthItemStyles.monthInner}>
                 <Text style={datePickerMonthItemStyles.monthLabel} selectable={false}>
-                    {format(new Date(2000, month, 1), 'MMMM')}
+                    {monthLabel}
                 </Text>
             </View>
-        </ListItem>
+        </List.Item>
     );
 }
 const Month = memo(MonthPure);

package/components/DatePickerInline/Swiper.native.tsx

@@ -9,7 +9,6 @@ import {
 } from 'react-native';
 
 import AutoSizer from './AutoSizer';
-import { useDatePickerStore } from './DatePickerContext';
 import { beginOffset, estimatedMonthHeight, getInitialIndex, totalMonths } from './dateUtils';
 import { addMonths, getRealIndex } from './dateUtils';
 import {
@@ -18,6 +17,7 @@ import {
     getMonthHeight,
     getVerticalMonthsOffset,
 } from './Month';
+import { useDatePickerInlineStore } from './store';
 import type { SwiperProps } from './SwiperUtils';
 import { montHeaderHeight } from './utils';
 
@@ -56,7 +56,7 @@ function SwiperInner({
     );
 
     const parentRef = useRef<ScrollView | null>(null);
-    const [{ localDate }, setStore] = useDatePickerStore(state => state);
+    const [{ localDate }, setStore] = useDatePickerInlineStore(state => state);
 
     const scrollTo = useCallback(
         (index: number, animated: boolean) => {

package/components/DatePickerInline/Swiper.tsx

@@ -12,10 +12,10 @@ import {
 
 import { useLatest } from '../../hooks';
 import AutoSizer from './AutoSizer';
-import { useDatePickerStore } from './DatePickerContext';
 import { beginOffset, estimatedMonthHeight, getInitialIndex, totalMonths } from './dateUtils';
 import { addMonths, getRealIndex } from './dateUtils';
 import { getIndexFromVerticalOffset, getMonthHeight, getVerticalMonthsOffset } from './Month';
+import { useDatePickerInlineStore } from './store';
 import type { SwiperProps } from './SwiperUtils';
 import { montHeaderHeight } from './utils';
 
@@ -73,7 +73,7 @@ function HorizontalScroller({
         visibleHorizontalArray(initialIndex),
     );
     const parentRef = useRef<HTMLDivElement | null>(null);
-    const [{ localDate }, setStore] = useDatePickerStore(state => state);
+    const [{ localDate }, setStore] = useDatePickerInlineStore(state => state);
     const settleTimerRef = useRef<number | null>(null);
     const isRecenteringRef = useRef(false);
 
@@ -209,7 +209,7 @@ function VerticalScroller({
     const [visibleIndexes, setVisibleIndexes] = useState<number[]>(visibleArray(initialIndex));
 
     const parentRef = useRef<HTMLDivElement | null>(null);
-    const [{ localDate }, setStore] = useDatePickerStore(state => state);
+    const [{ localDate }, setStore] = useDatePickerInlineStore(state => state);
 
     useIsomorphicLayoutEffect(() => {
         const element = parentRef.current;

package/components/DatePickerInline/YearPicker.tsx

@@ -1,16 +1,18 @@
 import { setYear } from 'date-fns';
 import { memo, useCallback, useLayoutEffect, useMemo, useRef } from 'react';
-import { FlatList, ScrollView, StyleSheet, View } from 'react-native';
+import { FlatList, type FlatListProps, StyleSheet, View } from 'react-native';
 
 import { getYearRange, resolveStateVariant } from '../../utils';
 import { datePickerMonthItemStyles, datePickerMonthPickerStyles } from '../DatePicker/utils';
-import { HorizontalDivider } from '../HorizontalDivider';
+import { Divider } from '../Divider';
 import { Icon } from '../Icon';
-import { ListItem } from '../ListItem';
+import { List, type ListContentProcessPropsArgs, useListContextValue } from '../List';
 import { Text } from '../Text';
-import { useDatePickerStore } from './DatePickerContext';
+import { useDatePickerInlineStore } from './store';
 import { datePickerYearItemStyles, datePickerYearPickerStyles } from './utils';
 
+type YearListItem = { id: number; label: string };
+
 const GRID_ITEM_HEIGHT = 62;
 const NUM_COLUMNS = 3;
 const LIST_ITEM_HEIGHT = 46;
@@ -25,23 +27,19 @@ export default function YearPicker({ layout = 'grid' }: YearPickerProps) {
 }
 
 function YearPickerGrid() {
-    const [{ startDateYear, endDateYear, localDate, pickerType }, setStore] = useDatePickerStore(
-        state => state,
-    );
+    const [{ startDateYear, endDateYear, localDate, pickerType }, setStore] =
+        useDatePickerInlineStore(state => state);
     const years = useMemo(
         () => getYearRange(startDateYear, endDateYear),
         [startDateYear, endDateYear],
     );
-    const rows = useMemo(() => {
-        const chunks: number[][] = [];
-        for (let i = 0; i < years.length; i += NUM_COLUMNS) {
-            chunks.push(years.slice(i, i + NUM_COLUMNS));
-        }
-        return chunks;
-    }, [years]);
+    const yearItems = useMemo(
+        () => years.map(year => ({ id: year, label: String(year) })),
+        [years],
+    );
     const selectingYear = pickerType === 'year';
     const selectedYear = localDate.getFullYear();
-    const scrollRef = useRef<ScrollView | null>(null);
+    const flatListRef = useRef<FlatList<YearListItem> | null>(null);
 
     const initialScrollOffset = useMemo(() => {
         if (years.length === 0) return 0;
@@ -53,7 +51,7 @@ function YearPickerGrid() {
 
     useLayoutEffect(() => {
         if (!selectingYear) return;
-        scrollRef.current?.scrollTo({ y: initialScrollOffset, animated: false });
+        flatListRef.current?.scrollToOffset({ offset: initialScrollOffset, animated: false });
     }, [selectingYear, initialScrollOffset]);
 
     const { containerStyle, yearStyle } = useMemo(() => {
@@ -71,7 +69,8 @@ function YearPickerGrid() {
     }, [selectingYear]);
 
     const handleOnChange = useCallback(
-        (year: number) => {
+        (year: number | null) => {
+            if (year === null) return;
             setStore(prev => ({
                 localDate: setYear(prev.localDate, year),
                 pickerType: undefined,
@@ -80,83 +79,103 @@ function YearPickerGrid() {
         [setStore],
     );
 
-    return (
-        <View style={containerStyle} pointerEvents={selectingYear ? 'auto' : 'none'}>
-            <HorizontalDivider />
-            <ScrollView
-                ref={scrollRef}
-                style={gridStyles.list}
-                contentOffset={{ x: 0, y: initialScrollOffset }}
-                removeClippedSubviews>
-                <View style={gridStyles.grid}>
-                    {rows.map((row, rowIdx) => (
-                        <View key={rowIdx} style={gridStyles.row}>
-                            {row.map(year => (
-                                <View key={year} style={gridStyles.cell}>
-                                    <YearPill
-                                        year={year}
-                                        selected={selectedYear === year}
-                                        onPressYear={handleOnChange}
-                                        yearStyles={yearStyle}
-                                    />
-                                </View>
-                            ))}
-                            {row.length < NUM_COLUMNS &&
-                                Array.from({ length: NUM_COLUMNS - row.length }).map((_, i) => (
-                                    <View key={`pad-${i}`} style={gridStyles.cell} />
-                                ))}
-                        </View>
-                    ))}
+    const getRowLayout = useCallback(
+        (_data: ArrayLike<YearListItem> | null | undefined, index: number) => ({
+            length: GRID_ITEM_HEIGHT,
+            offset: GRID_ITEM_HEIGHT * index,
+            index,
+        }),
+        [],
+    );
+
+    const processGridFlatListProps = useCallback(
+        ({
+            props,
+            items,
+            isEmpty,
+            emptyState,
+        }: ListContentProcessPropsArgs<
+            YearListItem,
+            Omit<FlatListProps<YearListItem>, 'children' | 'ref'>
+        >): FlatListProps<YearListItem> => ({
+            ...props,
+            data: items,
+            numColumns: NUM_COLUMNS,
+            contentContainerStyle: gridStyles.grid,
+            columnWrapperStyle: gridStyles.row,
+            renderItem: ({ item }) => (
+                <View style={gridStyles.cell}>
+                    <YearPill year={item.id} yearStyles={yearStyle} />
                 </View>
-            </ScrollView>
-        </View>
+            ),
+            keyExtractor: item => `${item.id}`,
+            getItemLayout: getRowLayout,
+            initialScrollIndex: Math.floor(initialScrollOffset / GRID_ITEM_HEIGHT),
+            removeClippedSubviews: true,
+            ListEmptyComponent: isEmpty
+                ? function GridListEmpty() {
+                      return <>{emptyState}</>;
+                  }
+                : undefined,
+        }),
+        [getRowLayout, initialScrollOffset, yearStyle],
+    );
+
+    return (
+        <List items={yearItems} multiple={false} value={selectedYear} onChange={handleOnChange}>
+            <View style={containerStyle} pointerEvents={selectingYear ? 'auto' : 'none'}>
+                <Divider />
+                <List.Content<YearListItem, typeof FlatList<YearListItem>>
+                    ref={flatListRef}
+                    ContainerComponent={FlatList<YearListItem>}
+                    style={gridStyles.list}
+                    processProps={processGridFlatListProps}
+                />
+            </View>
+        </List>
     );
 }
 
-function YearPillPure({
-    year,
-    selected,
-    onPressYear,
-    yearStyles,
-}: {
-    year: number;
-    selected: boolean;
-    onPressYear: (newYear: number) => any;
-    yearStyles: Record<string, any>;
-}) {
-    datePickerYearItemStyles.useVariants({
-        state: resolveStateVariant({ selected }) as any,
+function YearPillPure({ year, yearStyles }: { year: number; yearStyles: Record<string, any> }) {
+    const isSelected = useListContextValue(state => {
+        const selectedValue = state.value as any;
+        return (selectedValue?.id ?? selectedValue) === year;
     });
 
-    const handlePressYear = useCallback(() => {
-        onPressYear(year);
-    }, [year, onPressYear]);
+    datePickerYearItemStyles.useVariants({
+        state: resolveStateVariant({ selected: isSelected }) as any,
+    });
 
     return (
-        <ListItem
+        <List.Item
+            value={year}
             contentStyle={datePickerYearItemStyles.content}
-            onPress={handlePressYear}
             accessibilityRole="button"
             accessibilityLabel={String(year)}
             style={[yearStyles, datePickerYearItemStyles.yearButton]}
             testID={`pick-year-${year}`}>
-            <ListItem.Title style={datePickerYearItemStyles.yearLabel} selectable={false}>
+            <Text
+                typescale="bodyLarge"
+                style={datePickerYearItemStyles.yearLabel}
+                selectable={false}>
                 {year}
-            </ListItem.Title>
-        </ListItem>
+            </Text>
+        </List.Item>
     );
 }
 const YearPill = memo(YearPillPure);
 
 function YearPickerList() {
-    const [{ startDateYear, endDateYear, localDate, pickerType }, setStore] = useDatePickerStore(
-        state => state,
-    );
-    const flatList = useRef<FlatList<number> | null>(null);
+    const [{ startDateYear, endDateYear, localDate, pickerType }, setStore] =
+        useDatePickerInlineStore(state => state);
     const years = useMemo(
         () => getYearRange(startDateYear, endDateYear),
         [startDateYear, endDateYear],
     );
+    const yearItems = useMemo<YearListItem[]>(
+        () => years.map(year => ({ id: year, label: String(year) })),
+        [years],
+    );
     const selectingYear = pickerType === 'year';
     const selectedYear = localDate.getFullYear();
 
@@ -167,7 +186,8 @@ function YearPickerList() {
     }, [selectedYear, years]);
 
     const handleOnChange = useCallback(
-        (year: number) => {
+        (year: number | null) => {
+            if (year === null) return;
             setStore(prev => ({
                 localDate: setYear(prev.localDate, year),
                 pickerType: undefined,
@@ -176,15 +196,8 @@ function YearPickerList() {
         [setStore],
     );
 
-    const renderItem = useCallback(
-        ({ item }: { item: number }) => (
-            <YearRow year={item} selected={selectedYear === item} onPressYear={handleOnChange} />
-        ),
-        [selectedYear, handleOnChange],
-    );
-
     const getItemLayout = useCallback(
-        (_data: any, index: number) => ({
+        (_data: ArrayLike<YearListItem> | null | undefined, index: number) => ({
             length: LIST_ITEM_HEIGHT,
             offset: LIST_ITEM_HEIGHT * index,
             index,
@@ -192,51 +205,59 @@ function YearPickerList() {
         [],
     );
 
+    const processFlatListProps = useCallback(
+        ({
+            props,
+            items,
+        }: ListContentProcessPropsArgs<
+            YearListItem,
+            Omit<FlatListProps<YearListItem>, 'children' | 'ref'>
+        >): FlatListProps<YearListItem> => ({
+            ...props,
+            data: items,
+            renderItem: ({ item }) => <YearRow year={item.id} />,
+            keyExtractor: item => `${item.id}`,
+            initialScrollIndex,
+            getItemLayout,
+        }),
+        [getItemLayout, initialScrollIndex],
+    );
+
     if (!selectingYear) return null;
 
     return (
-        <View style={[StyleSheet.absoluteFill, listStyles.root]} pointerEvents="auto">
-            <HorizontalDivider />
-            <FlatList<number>
-                ref={flatList}
-                style={listStyles.list}
-                data={years}
-                renderItem={renderItem}
-                keyExtractor={item => `${item}`}
-                initialScrollIndex={initialScrollIndex}
-                getItemLayout={getItemLayout}
-            />
-        </View>
+        <List items={yearItems} multiple={false} value={selectedYear} onChange={handleOnChange}>
+            <View style={[StyleSheet.absoluteFill, listStyles.root]} pointerEvents="auto">
+                <Divider />
+                <List.Content<YearListItem, typeof FlatList<YearListItem>>
+                    ContainerComponent={FlatList<YearListItem>}
+                    style={listStyles.list}
+                    processProps={processFlatListProps}
+                />
+            </View>
+        </List>
     );
 }
 
-function YearRowPure({
-    year,
-    selected,
-    onPressYear,
-}: {
-    year: number;
-    selected: boolean;
-    onPressYear: (newYear: number) => any;
-}) {
-    datePickerMonthItemStyles.useVariants({
-        state: resolveStateVariant({ selected }) as any,
+function YearRowPure({ year }: { year: number }) {
+    const isSelected = useListContextValue(state => {
+        const selectedValue = state.value as any;
+        return (selectedValue?.id ?? selectedValue) === year;
     });
 
-    const handlePressYear = useCallback(() => {
-        onPressYear(year);
-    }, [year, onPressYear]);
+    datePickerMonthItemStyles.useVariants({
+        state: resolveStateVariant({ selected: isSelected }) as any,
+    });
 
     return (
-        <ListItem
-            onPress={handlePressYear}
+        <List.Item
+            value={year}
             accessibilityRole="button"
             accessibilityLabel={String(year)}
-            accessibilityState={{ selected }}
             style={datePickerMonthItemStyles.monthButton}
             testID={`pick-year-${year}`}
             left={
-                selected ? (
+                isSelected ? (
                     <View style={listStyles.checkIconView}>
                         <Icon name="check" size={24} />
                     </View>
@@ -249,7 +270,7 @@ function YearRowPure({
                     {year}
                 </Text>
             </View>
-        </ListItem>
+        </List.Item>
     );
 }
 const YearRow = memo(YearRowPure);
@@ -260,7 +281,10 @@ const gridStyles = StyleSheet.create({
         top: 56,
         zIndex: 100,
     },
-    list: { flex: 1 },
+    list: {
+        flex: 1,
+        width: '100%',
+    },
     grid: { alignItems: 'center' },
     row: {
         flexDirection: 'row',

package/components/DatePickerInline/{DatePickerContext.tsx → store.tsx}

@@ -1,4 +1,5 @@
 import { createFastContext } from '../../fast-context';
+import { registerPortalContext } from '../Portal/Portal';
 
 export type Store = {
     localDate: Date;
@@ -16,7 +17,10 @@ export const defaultValue = {
 
 export const {
     Provider,
-    useContext: useDatePickerStore,
-    useContextValue: useDatePickerStoreValue,
-    useStoreRef: useDatePickerStoreRef,
+    useContext: useDatePickerInlineStore,
+    useContextValue: useDatePickerInlineStoreValue,
+    useStoreRef: useDatePickerInlineStoreRef,
+    Context: DatePickerInlineStoreContext,
 } = createFastContext<Store>();
+
+registerPortalContext(DatePickerInlineStoreContext);