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

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);

package/components/DatePickerInline/types.ts

@@ -54,7 +54,7 @@ export type BaseDatePickerProps = {
     startYear?: number;
     endYear?: number;
     HeaderComponent?: MemoExoticComponent<CalendarHeaderProps | any>;
-    headerLayout?: 'inline' | 'docked';
+    headerLayout?: 'default' | 'docked';
     monthStyle?: Record<string, any>;
     showOutsideDays?: boolean;
 

package/components/Divider/Divider.tsx

@@ -0,0 +1,192 @@
+import { memo } from 'react';
+import { type StyleProp, View, type ViewProps, type ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredComponentStylesWithFallback } from '../../core';
+
+export type DividerProps = Omit<ViewProps, 'children'> & {
+    /**
+     * Line orientation. Defaults to horizontal.
+     */
+    mode?: 'horizontal' | 'vertical';
+    /**
+     * Left inset when `mode` is `"horizontal"`.
+     */
+    leftInset?: number;
+    /**
+     * Right inset when `mode` is `"horizontal"`.
+     */
+    rightInset?: number;
+    /**
+     * Top inset when `mode` is `"vertical"`.
+     */
+    topInset?: number;
+    /**
+     * Bottom inset when `mode` is `"vertical"`.
+     */
+    bottomInset?: number;
+    /**
+     * Whether the divider stroke should use the bold thickness.
+     */
+    bold?: boolean;
+    /**
+     * Margin added perpendicular to the divider line (`marginVertical` for horizontal,
+     * `marginHorizontal` for vertical).
+     */
+    spacing?: number;
+    style?: StyleProp<ViewStyle>;
+};
+
+export type Props = DividerProps;
+
+const DividerHorizontalImpl = memo(function DividerHorizontalImpl({
+    leftInset = 0,
+    rightInset = 0,
+    style,
+    bold = false,
+    spacing = 8,
+    ...rest
+}: Omit<DividerProps, 'mode' | 'topInset' | 'bottomInset'>) {
+    horizontalDividerStyles.useVariants({
+        isBold: bold,
+    });
+
+    return (
+        <View
+            {...rest}
+            style={
+                [
+                    horizontalDividerStyles.root,
+                    leftInset ? { marginLeft: leftInset } : undefined,
+                    rightInset ? { marginRight: rightInset } : undefined,
+                    spacing ? { marginVertical: spacing } : undefined,
+                    style,
+                ] as StyleProp<ViewStyle>
+            }
+        />
+    );
+});
+
+const DividerVerticalImpl = memo(function DividerVerticalImpl({
+    topInset = 0,
+    bottomInset = 0,
+    spacing = 0,
+    style,
+    bold = false,
+    ...rest
+}: Omit<DividerProps, 'mode' | 'leftInset' | 'rightInset'>) {
+    verticalDividerStyles.useVariants({
+        isBold: bold,
+    });
+
+    return (
+        <View
+            {...rest}
+            style={
+                [
+                    verticalDividerStyles.root,
+                    style,
+                    topInset ? { marginTop: topInset } : undefined,
+                    bottomInset ? { marginBottom: bottomInset } : undefined,
+                    spacing ? { marginHorizontal: spacing } : undefined,
+                ] as StyleProp<ViewStyle>
+            }
+        />
+    );
+});
+
+function DividerRoot(props: DividerProps) {
+    const mode = props.mode ?? 'horizontal';
+
+    if (mode === 'vertical') {
+        const {
+            mode: _m,
+            leftInset: _l,
+            rightInset: _r,
+            topInset,
+            bottomInset,
+            bold,
+            spacing,
+            style,
+            ...viewRest
+        } = props;
+
+        return (
+            <DividerVerticalImpl
+                {...viewRest}
+                topInset={topInset}
+                bottomInset={bottomInset}
+                bold={bold}
+                spacing={spacing}
+                style={style}
+            />
+        );
+    }
+
+    const {
+        mode: _m,
+        topInset: _t,
+        bottomInset: _b,
+        leftInset,
+        rightInset,
+        bold,
+        spacing,
+        style,
+        ...viewRest
+    } = props;
+
+    return (
+        <DividerHorizontalImpl
+            {...viewRest}
+            leftInset={leftInset}
+            rightInset={rightInset}
+            bold={bold}
+            spacing={spacing}
+            style={style}
+        />
+    );
+}
+
+export const Divider = memo(DividerRoot);
+
+export const horizontalDividerStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        height: StyleSheet.hairlineWidth,
+        background: theme.colors.outlineVariant,
+
+        variants: {
+            isBold: {
+                true: {
+                    height: 1,
+                },
+            },
+        },
+    },
+}));
+
+export const verticalDividerStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        width: StyleSheet.hairlineWidth,
+        background: theme.colors.outlineVariant,
+
+        variants: {
+            isBold: {
+                true: {
+                    width: 1,
+                },
+            },
+        },
+    },
+}));
+
+export const horizontalDividerStyles = getRegisteredComponentStylesWithFallback(
+    'HorizontalDivider',
+    horizontalDividerStylesDefault,
+);
+
+export const verticalDividerStyles = getRegisteredComponentStylesWithFallback(
+    'VerticalDivider',
+    verticalDividerStylesDefault,
+);
+
+export default Divider;

package/components/Divider/index.tsx

@@ -0,0 +1,11 @@
+export {
+    Divider,
+    horizontalDividerStyles,
+    horizontalDividerStylesDefault,
+    verticalDividerStyles,
+    verticalDividerStylesDefault,
+    type DividerProps,
+    type Props,
+} from './Divider';
+
+export { default } from './Divider';

package/components/Drawer/DrawerItemGroup.tsx

@@ -3,13 +3,13 @@ import { type TextProps, View, type ViewProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
 import { getRegisteredComponentStylesWithFallback } from '../../core';
-import { HorizontalDivider, type HorizontalDividerProps } from '../HorizontalDivider';
+import { Divider, type DividerProps } from '../Divider';
 import { Text } from '../Text';
 
 export type Props = ViewProps & {
     title?: ReactNode;
     showDivider?: boolean;
-    dividerProps?: HorizontalDividerProps;
+    dividerProps?: Omit<DividerProps, 'mode'>;
     titleProps?: TextProps;
 };
 
@@ -45,11 +45,7 @@ const DrawerItemGroup = memo(
                     )}
                 </>
                 {children}
-                <>
-                    {showDivider && (
-                        <HorizontalDivider style={dividerStyle} {...dividerRestProps} />
-                    )}
-                </>
+                <>{showDivider && <Divider style={dividerStyle} {...dividerRestProps} />}</>
             </View>
         );
     },

package/components/IconButton/IconButton.tsx

@@ -1,4 +1,3 @@
-import color from 'color';
 import { forwardRef, memo, useMemo } from 'react';
 import {
     type GestureResponderEvent,
@@ -112,13 +111,13 @@ const IconButton = (
         variant: variant as any,
         // @ts-ignore // TODO - fix this
         state,
+        // @ts-ignore // TODO - fix this
         size: typeof size === 'string' && size ? size : undefined,
     });
 
     const {
         iconColor,
         iconSize,
-        rippleColor,
         containerStyle,
         accessibilityState,
         // accessibilityTraits,
@@ -129,18 +128,9 @@ const IconButton = (
             iconButtonSizeToIconSizeMap[size as keyof typeof iconButtonSizeToIconSizeMap] ??
             (typeof size === 'number' && size ? (size as number) : undefined);
 
-        let _rippleColor: string | undefined;
-
-        try {
-            _rippleColor = color(_iconColor).alpha(0.12).rgb().string();
-        } catch (e) {
-            _rippleColor = undefined;
-        }
-
         return {
             iconColor: _iconColor,
             iconSize: iconSizeInNum,
-            rippleColor: _rippleColor,
             containerStyle: [
                 iconSizeInNum
                     ? {
@@ -164,7 +154,7 @@ const IconButton = (
             borderless
             centered
             onPress={onPress}
-            rippleColor={rippleColor}
+            rippleAlpha={0.12}
             accessibilityLabel={accessibilityLabel}
             style={containerStyle}
             // accessibilityTraits={accessibilityTraits}