react-native-molecules 0.5.0-beta.16 → 0.5.0-beta.18

package/components/DatePickerInline/YearPicker.tsx

@@ -1,48 +1,70 @@
 import { setYear } from 'date-fns';
-import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
-import { FlatList, StyleSheet, View } from 'react-native';
+import { memo, useCallback, useLayoutEffect, useMemo, useRef } from 'react';
+import { FlatList, ScrollView, StyleSheet, View } from 'react-native';
 
 import { getYearRange, resolveStateVariant } from '../../utils';
+import { datePickerMonthItemStyles, datePickerMonthPickerStyles } from '../DatePicker/utils';
 import { HorizontalDivider } from '../HorizontalDivider';
+import { Icon } from '../Icon';
 import { ListItem } from '../ListItem';
+import { Text } from '../Text';
 import { useDatePickerStore } from './DatePickerContext';
 import { datePickerYearItemStyles, datePickerYearPickerStyles } from './utils';
 
-const ITEM_HEIGHT = 62;
+const GRID_ITEM_HEIGHT = 62;
+const NUM_COLUMNS = 3;
+const LIST_ITEM_HEIGHT = 46;
 
-export default function YearPicker() {
+type YearPickerProps = {
+    layout?: 'grid' | 'list';
+};
+
+export default function YearPicker({ layout = 'grid' }: YearPickerProps) {
+    if (layout === 'list') return <YearPickerList />;
+    return <YearPickerGrid />;
+}
+
+function YearPickerGrid() {
     const [{ startDateYear, endDateYear, localDate, pickerType }, setStore] = useDatePickerStore(
         state => state,
     );
-    const flatList = useRef<FlatList<number> | null>(null);
     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 selectingYear = pickerType === 'year';
     const selectedYear = localDate.getFullYear();
+    const scrollRef = useRef<ScrollView | null>(null);
 
-    // scroll to selected year
-    useEffect(() => {
-        if (flatList.current && selectingYear && selectedYear) {
-            const indexToGo = selectedYear - years[0];
-            flatList.current.scrollToOffset({
-                offset: (indexToGo / 3) * ITEM_HEIGHT - ITEM_HEIGHT,
-                animated: false,
-            });
-        }
-    }, [flatList, selectedYear, selectingYear, years]);
+    const initialScrollOffset = useMemo(() => {
+        if (years.length === 0) return 0;
+        const totalRows = Math.ceil(years.length / NUM_COLUMNS);
+        const unclampedRow = Math.floor((selectedYear - years[0]) / NUM_COLUMNS);
+        const rowIndex = Math.min(Math.max(0, unclampedRow), Math.max(0, totalRows - 1));
+        return rowIndex * GRID_ITEM_HEIGHT;
+    }, [selectedYear, years]);
+
+    useLayoutEffect(() => {
+        if (!selectingYear) return;
+        scrollRef.current?.scrollTo({ y: initialScrollOffset, animated: false });
+    }, [selectingYear, initialScrollOffset]);
 
     const { containerStyle, yearStyle } = useMemo(() => {
         const { backgroundColor, ...rest } = datePickerYearPickerStyles.root;
-
         return {
             containerStyle: [
                 StyleSheet.absoluteFill,
-                styles.root,
+                gridStyles.root,
                 { backgroundColor },
                 datePickerYearPickerStyles.yearContainer,
-                selectingYear ? styles.opacity1 : styles.opacity0,
+                selectingYear ? gridStyles.opacity1 : gridStyles.opacity0,
             ],
             yearStyle: rest,
         };
@@ -59,32 +81,39 @@ export default function YearPicker() {
     );
 
     return (
-        <>
-            {selectingYear && (
-                <View style={containerStyle} pointerEvents={selectingYear ? 'auto' : 'none'}>
-                    <HorizontalDivider />
-                    <FlatList<number>
-                        ref={flatList}
-                        style={styles.list}
-                        data={years}
-                        renderItem={({ item }) => (
-                            <Year
-                                year={item}
-                                selected={selectedYear === item}
-                                onPressYear={handleOnChange}
-                                yearStyles={yearStyle}
-                            />
-                        )}
-                        keyExtractor={item => `${item}`}
-                        numColumns={3}
-                    />
+        <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>
+                    ))}
                 </View>
-            )}
-        </>
+            </ScrollView>
+        </View>
     );
 }
 
-function YearPure({
+function YearPillPure({
     year,
     selected,
     onPressYear,
@@ -96,9 +125,7 @@ function YearPure({
     yearStyles: Record<string, any>;
 }) {
     datePickerYearItemStyles.useVariants({
-        state: resolveStateVariant({
-            selected,
-        }) as any,
+        state: resolveStateVariant({ selected }) as any,
     });
 
     const handlePressYear = useCallback(() => {
@@ -107,10 +134,11 @@ function YearPure({
 
     return (
         <ListItem
+            contentStyle={datePickerYearItemStyles.content}
             onPress={handlePressYear}
             accessibilityRole="button"
             accessibilityLabel={String(year)}
-            style={[datePickerYearItemStyles.yearButton, yearStyles]}
+            style={[yearStyles, datePickerYearItemStyles.yearButton]}
             testID={`pick-year-${year}`}>
             <ListItem.Title style={datePickerYearItemStyles.yearLabel} selectable={false}>
                 {year}
@@ -118,22 +146,147 @@ function YearPure({
         </ListItem>
     );
 }
-const Year = memo(YearPure);
+const YearPill = memo(YearPillPure);
+
+function YearPickerList() {
+    const [{ startDateYear, endDateYear, localDate, pickerType }, setStore] = useDatePickerStore(
+        state => state,
+    );
+    const flatList = useRef<FlatList<number> | null>(null);
+    const years = useMemo(
+        () => getYearRange(startDateYear, endDateYear),
+        [startDateYear, endDateYear],
+    );
+    const selectingYear = pickerType === 'year';
+    const selectedYear = localDate.getFullYear();
+
+    const initialScrollIndex = useMemo(() => {
+        if (years.length === 0) return 0;
+        const idx = years.indexOf(selectedYear);
+        return Math.max(0, idx);
+    }, [selectedYear, years]);
+
+    const handleOnChange = useCallback(
+        (year: number) => {
+            setStore(prev => ({
+                localDate: setYear(prev.localDate, year),
+                pickerType: undefined,
+            }));
+        },
+        [setStore],
+    );
+
+    const renderItem = useCallback(
+        ({ item }: { item: number }) => (
+            <YearRow year={item} selected={selectedYear === item} onPressYear={handleOnChange} />
+        ),
+        [selectedYear, handleOnChange],
+    );
 
-const styles = StyleSheet.create({
+    const getItemLayout = useCallback(
+        (_data: any, index: number) => ({
+            length: LIST_ITEM_HEIGHT,
+            offset: LIST_ITEM_HEIGHT * index,
+            index,
+        }),
+        [],
+    );
+
+    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>
+    );
+}
+
+function YearRowPure({
+    year,
+    selected,
+    onPressYear,
+}: {
+    year: number;
+    selected: boolean;
+    onPressYear: (newYear: number) => any;
+}) {
+    datePickerMonthItemStyles.useVariants({
+        state: resolveStateVariant({ selected }) as any,
+    });
+
+    const handlePressYear = useCallback(() => {
+        onPressYear(year);
+    }, [year, onPressYear]);
+
+    return (
+        <ListItem
+            onPress={handlePressYear}
+            accessibilityRole="button"
+            accessibilityLabel={String(year)}
+            accessibilityState={{ selected }}
+            style={datePickerMonthItemStyles.monthButton}
+            testID={`pick-year-${year}`}
+            left={
+                selected ? (
+                    <View style={listStyles.checkIconView}>
+                        <Icon name="check" size={24} />
+                    </View>
+                ) : (
+                    <View style={listStyles.spacer} />
+                )
+            }>
+            <View style={datePickerMonthItemStyles.monthInner}>
+                <Text style={datePickerMonthItemStyles.monthLabel} selectable={false}>
+                    {year}
+                </Text>
+            </View>
+        </ListItem>
+    );
+}
+const YearRow = memo(YearRowPure);
+
+const gridStyles = StyleSheet.create({
     root: {
         flex: 1,
         top: 56,
         zIndex: 100,
     },
-
-    list: {
-        flex: 1,
+    list: { flex: 1 },
+    grid: { alignItems: 'center' },
+    row: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignSelf: 'stretch',
+        gap: 12,
     },
-    opacity0: {
-        opacity: 0,
+    cell: {
+        flex: 1,
+        maxWidth: 110,
+        minWidth: 90,
+        height: GRID_ITEM_HEIGHT,
+        justifyContent: 'center',
     },
-    opacity1: {
-        opacity: 1,
+    opacity0: { opacity: 0 },
+    opacity1: { opacity: 1 },
+});
+
+const listStyles = StyleSheet.create({
+    root: {
+        flex: 1,
+        top: 56,
+        zIndex: 100,
+        backgroundColor: datePickerMonthPickerStyles.root.backgroundColor,
     },
+    list: { flex: 1 },
+    checkIconView: { marginLeft: 16 },
+    spacer: { width: 44 },
 });

package/components/DatePickerInline/dateUtils.tsx

@@ -219,21 +219,25 @@ export const generateCalendarGrid = ({
                 const isFirstWeek = weekGrid === 0;
                 const realDayIndex = emptyDays - dayIndex;
                 const beforeWeekDay = isFirstWeek && realDayIndex > 0;
-                const dayOfMonth = weekGrid * 7 + dayIndex - emptyDays + 1;
-                const afterWeekDay = dayOfMonth > daysInMonth;
-
-                const day = new Date(year, month, dayOfMonth);
+                const rawDayOfMonth = weekGrid * 7 + dayIndex - emptyDays + 1;
+                const afterWeekDay = rawDayOfMonth > daysInMonth;
+                const outside = beforeWeekDay || afterWeekDay;
+
+                const day = new Date(year, month, rawDayOfMonth);
+                const dayOfMonth = day.getDate();
+                const displayYear = day.getFullYear();
+                const displayMonth = day.getMonth();
                 const isToday = areDatesOnSameDay(day, today);
 
                 let inRange = false;
                 let disabled = isDisabled(day);
                 let selected = false;
 
-                let leftCrop = dayOfMonth === 1;
-                let rightCrop = dayOfMonth === daysInMonth;
+                let leftCrop = rawDayOfMonth === 1;
+                let rightCrop = rawDayOfMonth === daysInMonth;
 
-                const isFirstDayOfMonth = dayOfMonth === 1;
-                const isLastDayOfMonth = dayOfMonth === daysInMonth;
+                const isFirstDayOfMonth = rawDayOfMonth === 1;
+                const isLastDayOfMonth = rawDayOfMonth === daysInMonth;
 
                 if (mode === 'range') {
                     const selectedStartDay = areDatesOnSameDay(day, startDate);
@@ -267,8 +271,8 @@ export const generateCalendarGrid = ({
                     const safeDates = dates || [];
                     selected = safeDates.some(d => areDatesOnSameDay(day, d));
 
-                    const yesterday = new Date(year, month, dayOfMonth - 1);
-                    const tomorrow = new Date(year, month, dayOfMonth + 1);
+                    const yesterday = new Date(year, month, rawDayOfMonth - 1);
+                    const tomorrow = new Date(year, month, rawDayOfMonth + 1);
 
                     const yesterdaySelected = safeDates.some(d => areDatesOnSameDay(d, yesterday));
                     const tomorrowSelected = safeDates.some(d => areDatesOnSameDay(d, tomorrow));
@@ -316,8 +320,9 @@ export const generateCalendarGrid = ({
                 return {
                     beforeWeekDay,
                     afterWeekDay,
-                    year,
-                    month,
+                    outside,
+                    year: displayYear,
+                    month: displayMonth,
                     dayOfMonth,
                     dayIndex,
                     mode,

package/components/DatePickerInline/types.ts

@@ -13,6 +13,7 @@ export interface BaseMonthProps {
     onPressDate: (date: Date) => any;
     validRange?: ValidRangeType;
     customMonthStyles?: Record<string, any>;
+    showOutsideDays?: boolean;
 
     // some of these should be required in final implementation
     date?: CalendarDate;
@@ -52,7 +53,9 @@ export type BaseDatePickerProps = {
     startYear?: number;
     endYear?: number;
     HeaderComponent?: MemoExoticComponent<CalendarHeaderProps | any>;
+    headerLayout?: 'inline' | 'docked';
     monthStyle?: Record<string, any>;
+    showOutsideDays?: boolean;
 
     // here they are optional but in final implemenation they are required
     date?: CalendarDate;

package/components/DatePickerInline/utils.ts

@@ -3,11 +3,13 @@ import { StyleSheet } from 'react-native-unistyles';
 import { getRegisteredComponentStylesWithFallback } from '../../core';
 import { daySize } from './dateUtils';
 
-export const dayNamesHeight = 44;
+export const dayNamesHeight = 48;
 
 // TODO make it flexible
-export const weekMargin = 6;
-export const weekSize = daySize + weekMargin;
+export const cellSize = 48;
+export const cellVerticalPadding = (cellSize - daySize) / 2;
+export const weekMargin = 0;
+export const weekSize = cellSize + weekMargin;
 export const montHeaderHeight = 56;
 export const monthHeaderSingleMarginTop = 4;
 export const monthHeaderSingleMarginBottom = 8 + 22 + 12;
@@ -33,8 +35,7 @@ const datePickerMonthStylesDefault = StyleSheet.create(theme => ({
         backgroundColor: theme.colors.surface,
     },
     monthLabel: {
-        ...theme.typescale.bodyMedium,
-        opacity: 0.7,
+        ...theme.typescale.labelLarge,
     },
     yearButton: {
         alignSelf: 'flex-start',
@@ -89,6 +90,30 @@ const datePickerYearPickerStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
+export const datePickerDayStateLayerStyles = StyleSheet.create(theme => ({
+    stateLayer: {
+        variants: {
+            state: {
+                hovered: {
+                    backgroundColor: theme.colors.stateLayer.hover.onSurface,
+                },
+                todayAndHovered: {
+                    backgroundColor: theme.colors.stateLayer.hover.primary,
+                },
+                outsideAndHovered: {
+                    backgroundColor: theme.colors.stateLayer.hover.onSurface,
+                },
+                selectedAndHovered: {
+                    backgroundColor: theme.colors.stateLayer.hover.onPrimary,
+                },
+                inRangeAndHovered: {
+                    backgroundColor: theme.colors.stateLayer.hover.onSurface,
+                },
+            },
+        },
+    },
+}));
+
 const datePickerDayStylesDefault = StyleSheet.create(theme => ({
     containerStyle: {
         flex: 1,
@@ -102,6 +127,9 @@ const datePickerDayStylesDefault = StyleSheet.create(theme => ({
                 disabled: {
                     opacity: 0.3,
                 },
+                outside: {
+                    opacity: 0.38,
+                },
             },
         },
     },
@@ -117,7 +145,7 @@ const datePickerDayStylesDefault = StyleSheet.create(theme => ({
         variants: {
             state: {
                 inRange: {
-                    backgroundColor: theme.colors.primary,
+                    backgroundColor: 'transparent',
                 },
             },
         },
@@ -140,12 +168,13 @@ const datePickerDayStylesDefault = StyleSheet.create(theme => ({
                 },
 
                 inRange: {
-                    borderColor: theme.colors.primary,
+                    borderWidth: 0,
+                    borderColor: 'transparent',
                     button: {
-                        backgroundColor: theme.colors.primary,
+                        backgroundColor: 'transparent',
                     },
                     today: {
-                        borderColor: theme.colors.primary,
+                        borderColor: 'transparent',
                     },
                 },
             },
@@ -156,15 +185,17 @@ const datePickerDayStylesDefault = StyleSheet.create(theme => ({
         variants: {
             state: {
                 inRange: {
-                    borderColor: theme.colors.primary,
+                    borderWidth: 0,
+                    borderColor: 'transparent',
                     button: {
-                        backgroundColor: theme.colors.primary,
+                        backgroundColor: 'transparent',
                     },
                 },
             },
         },
     },
     text: {
+        ...theme.typescale.bodyLarge,
         variants: {
             state: {
                 selected: {
@@ -175,16 +206,16 @@ const datePickerDayStylesDefault = StyleSheet.create(theme => ({
                 },
 
                 inRange: {
-                    color: theme.colors.onPrimary,
+                    color: theme.colors.onSecondaryContainer,
 
                     day: {
-                        borderColor: theme.colors.primary,
+                        borderColor: 'transparent',
                     },
                     button: {
-                        backgroundColor: theme.colors.primary,
+                        backgroundColor: 'transparent',
                     },
                     today: {
-                        borderColor: theme.colors.primary,
+                        borderColor: 'transparent',
                     },
                 },
             },
@@ -205,7 +236,7 @@ const datePickerDayEmptyStylesDefault = StyleSheet.create({
 const datePickerWeekStylesDefault = StyleSheet.create({
     root: {
         flexDirection: 'row',
-        height: daySize,
+        height: cellSize,
     },
 });
 
@@ -214,7 +245,7 @@ const datePickerHeaderStylesDefault = StyleSheet.create(theme => ({
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'space-between',
-        marginHorizontal: theme.spacings['5'],
+        padding: theme.spacings['2'],
     },
     buttonContainer: {
         height: 56,
@@ -226,8 +257,7 @@ const datePickerHeaderStylesDefault = StyleSheet.create(theme => ({
     buttonWrapper: {},
     spacer: { flex: 1 },
     yearLabelStyle: {
-        ...theme.typescale.bodyMedium,
-        opacity: 0.7,
+        ...theme.typescale.labelLarge,
     },
     yearButtonStyle: {
         alignSelf: 'flex-start',
@@ -249,24 +279,25 @@ const dateDayNameStylesDefault = StyleSheet.create(theme => ({
         alignItems: 'center',
         backgroundColor: theme.colors.surface,
     },
-    dayName: { flex: 1, alignItems: 'center' },
+    dayName: { flex: 1, alignItems: 'center', ...theme.typescale.bodyLarge },
     dayNameLabel: {
-        opacity: 0.7,
-        ...theme.typescale.bodyMedium,
+        ...theme.typescale.bodyLarge,
     },
 }));
 
 const datePickerDayRangeStylesDefault = StyleSheet.create(theme => ({
     container: {
+        position: 'absolute',
+        top: cellVerticalPadding,
+        bottom: cellVerticalPadding,
+        left: 0,
+        right: 0,
         flexDirection: 'row',
 
         variants: {
             state: {
-                bothWays: {
-                    borderRadius: daySize / 2,
-                },
                 inRange: {
-                    backgroundColor: theme.colors.primary,
+                    backgroundColor: theme.colors.secondaryContainer,
                 },
                 isCrop: {
                     backgroundColor: undefined,
@@ -280,7 +311,7 @@ const datePickerDayRangeStylesDefault = StyleSheet.create(theme => ({
         variants: {
             state: {
                 isRightCrop: {
-                    backgroundColor: theme.colors.primary,
+                    backgroundColor: theme.colors.secondaryContainer,
                 },
             },
         },
@@ -291,13 +322,13 @@ const datePickerDayRangeStylesDefault = StyleSheet.create(theme => ({
         variants: {
             state: {
                 isLeftCrop: {
-                    backgroundColor: theme.colors.primary,
+                    backgroundColor: theme.colors.secondaryContainer,
                 },
             },
         },
     },
     centerCrop: {
-        backgroundColor: theme.colors.primary,
+        backgroundColor: theme.colors.secondaryContainer,
         minWidth: daySize,
         minHeight: daySize,
 
@@ -317,7 +348,13 @@ const datePickerDayRangeStylesDefault = StyleSheet.create(theme => ({
 }));
 
 const datePickerYearItemStylesDefault = StyleSheet.create(theme => ({
+    content: {
+        alignItems: 'center',
+    },
     yearButton: {
+        borderRadius: theme.shapes.corner.full,
+        paddingHorizontal: 0,
+        overflow: 'hidden',
         variants: {
             state: {
                 selected: {

package/components/ListItem/ListItem.tsx

@@ -37,6 +37,7 @@ export type Props = Omit<TouchableRippleProps, 'children'> &
          * @default true if onPress is passed
          */
         hoverable?: boolean;
+        contentStyle?: StyleProp<ViewStyle>;
     };
 
 const ListItem = (
@@ -52,6 +53,7 @@ const ListItem = (
         onPress,
         hoverable: hoverableProp = false,
         hovered: hoveredProp = false,
+        contentStyle: contentStyleProp,
         ...props
     }: Props,
     ref: any,
@@ -108,7 +110,7 @@ const ListItem = (
                             {typeof left === 'function' ? left({ hovered }) : left}
                         </View>
                     ) : null}
-                    <View style={contentStyle}>
+                    <View style={[contentStyle, contentStyleProp]}>
                         <ListItemContext.Provider value={contextValue}>
                             <>{children}</>
                         </ListItemContext.Provider>

package/components/ListItem/utils.ts

@@ -56,7 +56,7 @@ const listItemStylesDefault = StyleSheet.create(theme => ({
         variants: {
             state: {
                 hovered: {
-                    backgroundColor: theme.colors.stateLayer.hover.primary,
+                    backgroundColor: theme.colors.stateLayer.hover.onSurface,
                 },
             },
         },

package/components/LoadingIndicator/index.tsx

@@ -7,7 +7,7 @@ export const LoadingIndicator = getRegisteredComponentWithFallback(
 );
 
 export {
-    type LoadingIndicatorProps,
+    type Props as LoadingIndicatorProps,
     loadingIndicatorStyles,
     loadingIndicatorStylesDefault,
 } from './utils';