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

package/components/Button/Button.tsx

@@ -81,6 +81,8 @@ export type Props = Omit<SurfaceProps, 'style'> &
         disabledPress?: boolean;
     };
 
+const emptyObj = {};
+
 const Button = (
     {
         disabled = false,
@@ -97,7 +99,7 @@ const Button = (
         style: styleProp,
         testID,
         accessible,
-        stateLayerProps = {},
+        stateLayerProps = emptyObj,
         elevation: elevationProp,
         textRelatedStyle,
         disabledPress,

package/components/DatePicker/utils.ts

@@ -232,6 +232,8 @@ const datePickerPopoverMonthItemStylesDefault = StyleSheet.create(theme => ({
         width: '100%',
         overflow: 'hidden',
         padding: theme.spacings['0'],
+        justifyContent: 'flex-start',
+
         variants: {
             state: {
                 selected: {

package/components/DatePickerInline/MonthPicker.tsx

@@ -1,6 +1,6 @@
 import { setMonth } from 'date-fns';
 import { memo, useCallback, useMemo } from 'react';
-import { FlatList, type FlatListProps, View, type ViewStyle } from 'react-native';
+import { FlatList, View, type ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
 import { resolveStateVariant } from '../../utils';
@@ -9,7 +9,7 @@ import type { DatePickerLocale } from '../DatePicker/context';
 import { datePickerMonthItemStyles, datePickerMonthPickerStyles } from '../DatePicker/utils';
 import { Divider } from '../Divider';
 import { Icon } from '../Icon';
-import { List, type ListContentProcessPropsArgs, useListContextValue } from '../List';
+import { List, type ListItemId, useListContextValue } from '../List';
 import { Text } from '../Text';
 import { useDatePickerInlineStore, useDatePickerInlineStoreValue } from './store';
 
@@ -28,48 +28,22 @@ export default function MonthPicker({ locale }: { locale?: DatePickerLocale }) {
     );
 
     const handleOnChange = useCallback(
-        (month: number | null) => {
-            if (month === null) return;
+        (value: ListItemId | null) => {
+            if (typeof value !== 'number') return;
             setStore(prev => ({
-                localDate: setMonth(prev.localDate, month),
+                localDate: setMonth(prev.localDate, value),
                 pickerType: undefined,
             }));
         },
         [setStore],
     );
 
-    const processFlatListProps = useCallback(
-        ({
-            props,
-            items,
-        }: ListContentProcessPropsArgs<
-            MonthListItem,
-            Omit<FlatListProps<MonthListItem>, 'children' | 'ref'>
-        >): FlatListProps<MonthListItem> => ({
-            ...props,
-            data: items,
-            renderItem: ({ item }) => (
-                <Month
-                    month={item.id}
-                    monthStyles={datePickerMonthPickerStyles.root}
-                    locale={locale}
-                />
-            ),
-            keyExtractor: item => `${item.id}`,
-        }),
-        [locale],
-    );
-
     if (!selectingMonth) {
         return null;
     }
 
     return (
-        <List
-            items={monthItems}
-            multiple={false}
-            value={localDate.getMonth()}
-            onChange={handleOnChange}>
+        <List multiple={false} value={localDate.getMonth()} onChange={handleOnChange}>
             <View
                 style={[
                     StyleSheet.absoluteFill,
@@ -78,10 +52,17 @@ export default function MonthPicker({ locale }: { locale?: DatePickerLocale }) {
                 ]}
                 pointerEvents={selectingMonth ? 'auto' : 'none'}>
                 <Divider />
-                <List.Content<MonthListItem, typeof FlatList<MonthListItem>>
-                    ContainerComponent={FlatList<MonthListItem>}
+                <FlatList<MonthListItem>
                     style={styles.list}
-                    processProps={processFlatListProps}
+                    data={monthItems}
+                    renderItem={({ item }) => (
+                        <Month
+                            month={item.id}
+                            monthStyles={datePickerMonthPickerStyles.root}
+                            locale={locale}
+                        />
+                    )}
+                    keyExtractor={item => `${item.id}`}
                 />
             </View>
         </List>
@@ -131,16 +112,16 @@ function MonthPure({
             accessibilityLabel={String(month)}
             accessibilityState={accessibilityState}
             style={monthButtonStyle}
-            testID={`pick-month-${month}`}
-            left={
-                isSelected ? (
+            testID={`pick-month-${month}`}>
+            <View style={styles.left}>
+                {isSelected ? (
                     <View style={styles.checkIconView}>
                         <Icon name="check" size={24} />
                     </View>
                 ) : (
                     <View style={styles.spacer} />
-                )
-            }>
+                )}
+            </View>
             <View style={datePickerMonthItemStyles.monthInner}>
                 <Text style={datePickerMonthItemStyles.monthLabel} selectable={false}>
                     {monthLabel}
@@ -165,6 +146,9 @@ const styles = StyleSheet.create(theme => ({
     spacer: {
         width: 44,
     },
+    left: {
+        marginRight: theme.spacings['2'],
+    },
 
     list: {
         flex: 1,

package/components/DatePickerInline/YearPicker.tsx

@@ -1,12 +1,12 @@
 import { setYear } from 'date-fns';
 import { memo, useCallback, useLayoutEffect, useMemo, useRef } from 'react';
-import { FlatList, type FlatListProps, StyleSheet, View } from 'react-native';
+import { FlatList, StyleSheet, View } from 'react-native';
 
 import { getYearRange, resolveStateVariant } from '../../utils';
 import { datePickerMonthItemStyles, datePickerMonthPickerStyles } from '../DatePicker/utils';
 import { Divider } from '../Divider';
 import { Icon } from '../Icon';
-import { List, type ListContentProcessPropsArgs, useListContextValue } from '../List';
+import { List, type ListItemId, useListContextValue } from '../List';
 import { Text } from '../Text';
 import { useDatePickerInlineStore } from './store';
 import { datePickerYearItemStyles, datePickerYearPickerStyles } from './utils';
@@ -69,10 +69,10 @@ function YearPickerGrid() {
     }, [selectingYear]);
 
     const handleOnChange = useCallback(
-        (year: number | null) => {
-            if (year === null) return;
+        (value: ListItemId | null) => {
+            if (typeof value !== 'number') return;
             setStore(prev => ({
-                localDate: setYear(prev.localDate, year),
+                localDate: setYear(prev.localDate, value),
                 pickerType: undefined,
             }));
         },
@@ -88,48 +88,26 @@ function YearPickerGrid() {
         [],
     );
 
-    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>
-            ),
-            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}>
+        <List multiple={false} value={selectedYear} onChange={handleOnChange}>
             <View style={containerStyle} pointerEvents={selectingYear ? 'auto' : 'none'}>
                 <Divider />
-                <List.Content<YearListItem, typeof FlatList<YearListItem>>
+                <FlatList<YearListItem>
                     ref={flatListRef}
-                    ContainerComponent={FlatList<YearListItem>}
                     style={gridStyles.list}
-                    processProps={processGridFlatListProps}
+                    data={yearItems}
+                    numColumns={NUM_COLUMNS}
+                    contentContainerStyle={gridStyles.grid}
+                    columnWrapperStyle={gridStyles.row}
+                    renderItem={({ item }) => (
+                        <View style={gridStyles.cell}>
+                            <YearPill year={item.id} yearStyles={yearStyle} />
+                        </View>
+                    )}
+                    keyExtractor={item => `${item.id}`}
+                    getItemLayout={getRowLayout}
+                    initialScrollIndex={Math.floor(initialScrollOffset / GRID_ITEM_HEIGHT)}
+                    removeClippedSubviews
                 />
             </View>
         </List>
@@ -149,17 +127,18 @@ function YearPillPure({ year, yearStyles }: { year: number; yearStyles: Record<s
     return (
         <List.Item
             value={year}
-            contentStyle={datePickerYearItemStyles.content}
             accessibilityRole="button"
             accessibilityLabel={String(year)}
             style={[yearStyles, datePickerYearItemStyles.yearButton]}
             testID={`pick-year-${year}`}>
-            <Text
-                typescale="bodyLarge"
-                style={datePickerYearItemStyles.yearLabel}
-                selectable={false}>
-                {year}
-            </Text>
+            <View style={datePickerYearItemStyles.content}>
+                <Text
+                    typescale="bodyLarge"
+                    style={datePickerYearItemStyles.yearLabel}
+                    selectable={false}>
+                    {year}
+                </Text>
+            </View>
         </List.Item>
     );
 }
@@ -186,10 +165,10 @@ function YearPickerList() {
     }, [selectedYear, years]);
 
     const handleOnChange = useCallback(
-        (year: number | null) => {
-            if (year === null) return;
+        (value: ListItemId | null) => {
+            if (typeof value !== 'number') return;
             setStore(prev => ({
-                localDate: setYear(prev.localDate, year),
+                localDate: setYear(prev.localDate, value),
                 pickerType: undefined,
             }));
         },
@@ -205,34 +184,19 @@ 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 (
-        <List items={yearItems} multiple={false} value={selectedYear} onChange={handleOnChange}>
+        <List multiple={false} value={selectedYear} onChange={handleOnChange}>
             <View style={[StyleSheet.absoluteFill, listStyles.root]} pointerEvents="auto">
                 <Divider />
-                <List.Content<YearListItem, typeof FlatList<YearListItem>>
-                    ContainerComponent={FlatList<YearListItem>}
+                <FlatList<YearListItem>
                     style={listStyles.list}
-                    processProps={processFlatListProps}
+                    data={yearItems}
+                    renderItem={({ item }) => <YearRow year={item.id} />}
+                    keyExtractor={item => `${item.id}`}
+                    initialScrollIndex={initialScrollIndex}
+                    getItemLayout={getItemLayout}
                 />
             </View>
         </List>
@@ -255,16 +219,16 @@ function YearRowPure({ year }: { year: number }) {
             accessibilityRole="button"
             accessibilityLabel={String(year)}
             style={datePickerMonthItemStyles.monthButton}
-            testID={`pick-year-${year}`}
-            left={
-                isSelected ? (
+            testID={`pick-year-${year}`}>
+            <View style={listStyles.left}>
+                {isSelected ? (
                     <View style={listStyles.checkIconView}>
                         <Icon name="check" size={24} />
                     </View>
                 ) : (
                     <View style={listStyles.spacer} />
-                )
-            }>
+                )}
+            </View>
             <View style={datePickerMonthItemStyles.monthInner}>
                 <Text style={datePickerMonthItemStyles.monthLabel} selectable={false}>
                     {year}
@@ -313,4 +277,5 @@ const listStyles = StyleSheet.create({
     list: { flex: 1 },
     checkIconView: { marginLeft: 16 },
     spacer: { width: 44 },
+    left: { marginRight: 8 },
 });