react-native-molecules 0.5.0-beta.0

package/components/DatePickerModal/DatePickerModalContent.tsx

@@ -0,0 +1,155 @@
+import { memo, useCallback, useState } from 'react';
+
+import { useControlledValue } from '../../hooks';
+import { DatePickerInlineBase, getStateValue } from '../DatePickerInline';
+import DatePickerInlineHeader from '../DatePickerInline/DatePickerInlineHeader';
+import AnimatedCrossView from './AnimatedCrossView';
+import CalendarEdit from './CalendarEdit';
+import DatePickerModalContentHeader from './DatePickerModalContentHeader';
+import DatePickerModalHeader from './DatePickerModalHeader';
+import DatePickerModalHeaderBackground from './DatePickerModalHeaderBackground';
+import type {
+    DatePickerModalContentMultiProps,
+    DatePickerModalContentRangeProps,
+    DatePickerModalContentSingleProps,
+    LocalState,
+    LocalStateMultiple,
+    LocalStateRange,
+    LocalStateSingle,
+} from './types';
+
+type Props =
+    | DatePickerModalContentSingleProps
+    | DatePickerModalContentRangeProps
+    | DatePickerModalContentMultiProps;
+
+export function DatePickerModalContent(props: Props) {
+    const {
+        mode = 'single',
+        onChange,
+        onConfirm,
+        onClose,
+        disableSafeTop,
+        disableWeekDays,
+        // locale = 'en',
+        validRange,
+        dateMode,
+        startYear,
+        endYear,
+        date,
+        startDate,
+        endDate,
+        dates,
+    } = props;
+    const [collapsed, setCollapsed] = useState<boolean>(true);
+
+    const onInnerChange = useCallback(
+        (params: any) => {
+            onChange?.(params);
+        },
+        [onChange],
+    );
+
+    const [state, onStateChange] = useControlledValue<LocalState>({
+        value: getStateValue(
+            {
+                date,
+                dates,
+                startDate,
+                endDate,
+            },
+            mode,
+        ),
+        onChange: onInnerChange,
+    });
+
+    const onInnerConfirm = useCallback(() => {
+        if (mode === 'single') {
+            (onConfirm as DatePickerModalContentSingleProps['onConfirm'])?.({
+                date: (state as LocalStateSingle)?.date,
+            });
+        } else if (mode === 'range') {
+            (onConfirm as DatePickerModalContentRangeProps['onConfirm'])?.({
+                startDate: (state as LocalStateRange)?.startDate,
+                endDate: (state as LocalStateRange)?.endDate,
+            });
+        } else if (mode === 'multiple') {
+            (onConfirm as DatePickerModalContentMultiProps['onConfirm'])?.({
+                dates: (state as LocalStateMultiple)?.dates || [],
+            });
+        }
+    }, [state, mode, onConfirm]);
+
+    const onToggleCollapse = useCallback(() => {
+        setCollapsed(prev => !prev);
+    }, [setCollapsed]);
+
+    return (
+        <>
+            <DatePickerModalHeaderBackground>
+                <DatePickerModalHeader
+                    onSave={onInnerConfirm}
+                    onClose={onClose}
+                    saveLabel={props.saveLabel}
+                    saveLabelDisabled={props.saveLabelDisabled || false}
+                    disableSafeTop={disableSafeTop}
+                    closeIcon={props.closeIcon}
+                />
+                <DatePickerModalContentHeader
+                    state={state || { startDate, dates, date, endDate }}
+                    mode={mode}
+                    collapsed={collapsed}
+                    onToggle={onToggleCollapse}
+                    headerSeparator={props.headerSeparator}
+                    emptyLabel={props.emptyLabel}
+                    label={props.label}
+                    moreLabel={props.moreLabel}
+                    startLabel={props.startLabel}
+                    endLabel={props.endLabel}
+                    uppercase={props.uppercase || true}
+                    // locale={locale}
+                    editIcon={props.editIcon}
+                    calendarIcon={props.calendarIcon}
+                />
+            </DatePickerModalHeaderBackground>
+
+            <AnimatedCrossView
+                collapsed={collapsed}
+                calendar={
+                    <DatePickerInlineBase
+                        // locale={locale}
+                        mode={mode}
+                        startDate={(state as LocalStateRange)?.startDate}
+                        endDate={(state as LocalStateRange)?.endDate}
+                        date={(state as LocalStateSingle)?.date}
+                        onChange={onStateChange as typeof onInnerChange}
+                        disableWeekDays={disableWeekDays}
+                        dates={(state as LocalStateMultiple)?.dates}
+                        validRange={validRange}
+                        dateMode={dateMode}
+                        startYear={startYear}
+                        endYear={endYear}
+                        // TODO - fix ts issues
+                        // @ts-ignore
+                        HeaderComponent={DatePickerInlineHeader}
+                    />
+                }
+                calendarEdit={
+                    <CalendarEdit
+                        mode={mode}
+                        state={state || { startDate, dates, date, endDate }}
+                        label={props.label}
+                        startLabel={props.startLabel}
+                        endLabel={props.endLabel}
+                        collapsed={collapsed}
+                        onChange={onStateChange}
+                        validRange={validRange}
+                        // locale={locale}
+                    />
+                }
+            />
+        </>
+    );
+}
+
+export default memo(DatePickerModalContent);

package/components/DatePickerModal/DatePickerModalContentHeader.tsx

@@ -0,0 +1,213 @@
+import { useMemo } from 'react';
+import { type TextStyle, View } from 'react-native';
+
+import { format } from '../../utils/date-fns';
+import type { ModeType } from '../DatePickerInline';
+import { IconButton } from '../IconButton';
+import { Text } from '../Text';
+import type { LocalState, LocalStateMultiple, LocalStateRange, LocalStateSingle } from './types';
+import { datePickerModalContentHeaderStyles } from './utils';
+
+export interface HeaderPickProps {
+    moreLabel?: string;
+    label?: string;
+    emptyLabel?: string;
+    saveLabel?: string;
+    uppercase?: boolean;
+    headerSeparator?: string;
+    startLabel?: string;
+    endLabel?: string;
+    editIcon?: string;
+    calendarIcon?: string;
+    closeIcon?: string;
+}
+
+export interface HeaderContentProps extends HeaderPickProps {
+    state: LocalState;
+    mode: ModeType;
+    collapsed: boolean;
+    onToggle: () => any;
+    // locale: string | undefined;
+    textStyle?: TextStyle;
+    separatorStyle?: TextStyle;
+}
+
+function getLabel(mode: ModeType, configuredLabel?: string) {
+    if (configuredLabel) {
+        return configuredLabel;
+    }
+    if (mode === 'range') {
+        return 'Select period';
+    }
+    if (mode === 'multiple') {
+        return 'Select dates';
+    }
+    if (mode === 'single') {
+        return 'Select date';
+    }
+    return '...';
+}
+
+export default function DatePickerModalContentHeader(props: HeaderContentProps) {
+    const {
+        onToggle,
+        collapsed,
+        mode,
+        moreLabel,
+        uppercase,
+        editIcon = 'pencil',
+        calendarIcon = 'calendar',
+    } = props;
+
+    const label = getLabel(props.mode, props.label);
+    const allowEditing = mode !== 'multiple';
+
+    const {
+        fillContainerStyle,
+        headerContentContainerStyle,
+        headerStyle,
+        labelStyle,
+        headerTextStyle,
+        separatorStyle,
+        iconButtonStyle,
+    } = useMemo(() => {
+        const {
+            fill,
+            headerContentContainer,
+            header,
+            label: _labelStyle,
+            headerText,
+            headerSeparator,
+            icon,
+        } = datePickerModalContentHeaderStyles;
+
+        return {
+            fillContainerStyle: fill,
+            headerContentContainerStyle: headerContentContainer,
+            headerStyle: header,
+            labelStyle: _labelStyle,
+            headerTextStyle: headerText,
+            separatorStyle: headerSeparator,
+            iconButtonStyle: icon,
+        };
+    }, []);
+
+    return (
+        <View style={headerStyle}>
+            <View>
+                <Text style={labelStyle}>{uppercase ? label.toUpperCase() : label}</Text>
+                <View style={headerContentContainerStyle}>
+                    <>
+                        {mode === 'range' ? (
+                            <HeaderContentRange
+                                {...props}
+                                textStyle={headerTextStyle}
+                                separatorStyle={separatorStyle}
+                            />
+                        ) : null}
+                    </>
+                    <>
+                        {mode === 'single' ? (
+                            <HeaderContentSingle {...props} textStyle={headerTextStyle} />
+                        ) : null}
+                    </>
+                    <>
+                        {mode === 'multiple' ? (
+                            <HeaderContentMulti
+                                {...props}
+                                moreLabel={moreLabel}
+                                textStyle={headerTextStyle}
+                            />
+                        ) : null}
+                    </>
+                </View>
+            </View>
+            <View style={fillContainerStyle} />
+            <>
+                {allowEditing ? (
+                    <IconButton
+                        name={collapsed ? editIcon : calendarIcon}
+                        accessibilityLabel={collapsed ? 'Type in date' : 'Pick date from calendar'}
+                        style={iconButtonStyle}
+                        onPress={onToggle}
+                    />
+                ) : null}
+            </>
+        </View>
+    );
+}
+
+// TODO add translations
+export function HeaderContentSingle({
+    state,
+    emptyLabel = ' ',
+    // locale,
+    textStyle,
+}: HeaderContentProps) {
+    const singleState = state as LocalStateSingle;
+
+    const label = useMemo(
+        () => (singleState.date ? format(singleState.date, 'LLL dd') : emptyLabel),
+        [emptyLabel, singleState.date],
+    );
+
+    return <Text style={textStyle}>{label}</Text>;
+}
+
+// TODO add translations
+export function HeaderContentMulti({
+    state,
+    emptyLabel = ' ',
+    moreLabel = 'more',
+    textStyle,
+}: // locale = 'en',
+HeaderContentProps & { moreLabel: string | undefined }) {
+    const multiState = state as LocalStateMultiple;
+
+    const label = useMemo(() => {
+        let _label = emptyLabel;
+        const dateCount = multiState.dates?.length || 0;
+
+        if (dateCount) {
+            if (dateCount <= 2) {
+                _label = multiState.dates!.map(date => format(date, 'LLL dd')).join(', ');
+            } else {
+                _label =
+                    format(multiState.dates![0], 'LLL dd') + ` (+ ${dateCount - 1} ${moreLabel})`;
+            }
+        }
+        return _label;
+    }, [emptyLabel, moreLabel, multiState.dates]);
+
+    return <Text style={textStyle}>{label}</Text>;
+}
+
+// TODO add translations
+export function HeaderContentRange({
+    // locale,
+    state,
+    headerSeparator = '-',
+    startLabel = 'Start',
+    endLabel = 'End',
+    textStyle,
+    separatorStyle,
+}: HeaderContentProps) {
+    const rangeState = state as LocalStateRange;
+
+    const startDateLabel = useMemo(
+        () => (rangeState.startDate ? format(rangeState.startDate, 'LLL dd') : startLabel),
+        [rangeState.startDate, startLabel],
+    );
+    const endDateLabel = useMemo(
+        () => (rangeState.endDate ? format(rangeState.endDate, 'LLL dd') : endLabel),
+        [endLabel, rangeState.endDate],
+    );
+
+    return (
+        <>
+            <Text style={textStyle}>{startDateLabel}</Text>
+            <Text style={separatorStyle}>{headerSeparator}</Text>
+            <Text style={textStyle}>{endDateLabel}</Text>
+        </>
+    );
+}

package/components/DatePickerModal/DatePickerModalHeader.tsx

@@ -0,0 +1,74 @@
+import { useMemo } from 'react';
+import { Animated, SafeAreaView, View } from 'react-native';
+
+import { resolveStateVariant } from '../../utils';
+import { Button } from '../Button';
+import { IconButton } from '../IconButton';
+import { datePickerModalHeaderStyles } from './utils';
+
+export interface DatePickerModalHeaderProps {
+    disableSafeTop?: boolean;
+    saveLabel?: string;
+    saveLabelDisabled?: boolean;
+    onClose: () => void;
+    onSave: () => void;
+    closeIcon?: string;
+}
+
+export default function DatePickerModalHeader(props: DatePickerModalHeaderProps) {
+    const { disableSafeTop, closeIcon = 'close' } = props;
+
+    const state = resolveStateVariant({
+        disableSafeTop: !!disableSafeTop,
+    });
+    datePickerModalHeaderStyles.useVariants({
+        state: state as any,
+    });
+
+    const saveLabel = props.saveLabel || 'Save';
+
+    const {
+        animatedContainerStyle,
+        safeContentStyle,
+        appBarHeaderStyle,
+        iconButtonStyle,
+        buttonStyle,
+    } = useMemo(() => {
+        const { animated, safeContent, appbarHeader } = datePickerModalHeaderStyles;
+
+        return {
+            iconButtonStyle: { color: datePickerModalHeaderStyles.root.color },
+            buttonStyle: { color: datePickerModalHeaderStyles.root.color },
+            animatedContainerStyle: animated,
+            safeContentStyle: safeContent,
+            appBarHeaderStyle: appbarHeader,
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [state]);
+
+    return (
+        <>
+            <Animated.View style={animatedContainerStyle}>
+                <SafeAreaView style={safeContentStyle}>
+                    <View style={appBarHeaderStyle}>
+                        <IconButton
+                            name={closeIcon}
+                            accessibilityLabel={'Close'}
+                            onPress={props.onClose}
+                            style={iconButtonStyle}
+                            testID="date-picker-close"
+                        />
+                        <Button
+                            variant="contained"
+                            style={buttonStyle}
+                            onPress={props.onSave}
+                            disabled={props.saveLabelDisabled || false}
+                            testID="dates-save">
+                            {saveLabel}
+                        </Button>
+                    </View>
+                </SafeAreaView>
+            </Animated.View>
+        </>
+    );
+}

package/components/DatePickerModal/DatePickerModalHeaderBackground.tsx

@@ -0,0 +1,13 @@
+import { Animated, SafeAreaView } from 'react-native';
+
+import { datePickerModalHeaderBackgroundStyles } from './utils';
+
+export default function DatePickerModalHeaderBackground({ children }: { children: any }) {
+    return (
+        <Animated.View style={datePickerModalHeaderBackgroundStyles.header}>
+            <SafeAreaView style={datePickerModalHeaderBackgroundStyles.safeContent}>
+                {children}
+            </SafeAreaView>
+        </Animated.View>
+    );
+}

package/components/DatePickerModal/index.tsx

@@ -0,0 +1,20 @@
+import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import DatePickerModalDefault from './DatePickerModal';
+
+registerMoleculesComponents({
+    DatePickerModal: DatePickerModalDefault,
+});
+
+export const DatePickerModal = getRegisteredComponentWithFallback(
+    'DatePickerModal',
+    DatePickerModalDefault,
+);
+
+export type { DatePickerModalProps } from './types';
+export {
+    datePickerModalContentHeaderStyles,
+    datePickerModalEditStyles,
+    datePickerModalHeaderBackgroundStyles,
+    datePickerModalHeaderStyles,
+    datePickerModalStyles,
+} from './utils';

package/components/DatePickerModal/types.ts

@@ -0,0 +1,92 @@
+import type { ViewStyle } from 'react-native';
+
+import type {
+    BaseDatePickerProps,
+    CalendarDate,
+    CalendarDates,
+    MultiChange,
+    MultiConfirm,
+    RangeChange,
+    SingleChange,
+} from '../DatePickerInline';
+import type { HeaderPickProps } from './DatePickerModalContentHeader';
+
+export type LocalState = LocalStateSingle | LocalStateMultiple | LocalStateRange;
+
+export type LocalStateSingle = {
+    date: CalendarDate;
+};
+
+export type LocalStateMultiple = {
+    dates: CalendarDates;
+};
+
+export type LocalStateRange = {
+    startDate: CalendarDate;
+    endDate: CalendarDate;
+};
+
+interface DatePickerModalContentBaseProps {
+    inputFormat?: string;
+    locale?: string;
+    onClose: () => any;
+    disableSafeTop?: boolean;
+    saveLabelDisabled?: boolean;
+}
+
+export interface DatePickerModalContentRangeProps
+    extends HeaderPickProps,
+        BaseDatePickerProps,
+        DatePickerModalContentBaseProps {
+    mode?: 'range';
+    startDate?: CalendarDate;
+    endDate?: CalendarDate;
+    onChange?: RangeChange;
+    onConfirm?: RangeChange;
+}
+
+export interface DatePickerModalContentSingleProps
+    extends HeaderPickProps,
+        BaseDatePickerProps,
+        DatePickerModalContentBaseProps {
+    mode?: 'single';
+    date?: CalendarDate;
+    onChange?: SingleChange;
+    onConfirm?: SingleChange;
+    dateMode?: 'start' | 'end';
+}
+
+export interface DatePickerModalContentMultiProps
+    extends HeaderPickProps,
+        BaseDatePickerProps,
+        DatePickerModalContentBaseProps {
+    mode?: 'multiple';
+    dates?: CalendarDates;
+    onChange?: MultiChange;
+    onConfirm?: MultiConfirm;
+}
+
+interface BaseDatePickerModalProps {
+    isOpen: boolean;
+    animationType?: 'slide' | 'fade' | 'none';
+    disableStatusBar?: boolean;
+    disableStatusBarPadding?: boolean;
+    style?: ViewStyle;
+}
+
+export interface DatePickerModalSingleProps
+    extends DatePickerModalContentSingleProps,
+        BaseDatePickerModalProps {}
+
+export interface DatePickerModalMultiProps
+    extends DatePickerModalContentMultiProps,
+        BaseDatePickerModalProps {}
+
+export interface DatePickerModalRangeProps
+    extends DatePickerModalContentRangeProps,
+        BaseDatePickerModalProps {}
+
+export type DatePickerModalProps =
+    | DatePickerModalRangeProps
+    | DatePickerModalSingleProps
+    | DatePickerModalMultiProps;

package/components/DatePickerModal/utils.ts

@@ -0,0 +1,121 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+
+const datePickerModalStylesDefault = StyleSheet.create(theme => ({
+    header: {
+        backgroundColor: theme.colors.primary,
+    },
+}));
+
+const datePickerModalHeaderStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        color: theme.colors.onPrimary,
+    },
+    animated: {
+        paddingBottom: theme.spacings['0'],
+        elevation: 4,
+    },
+    safeContent: {
+        paddingBottom: theme.spacings['0'],
+
+        variants: {
+            state: {
+                disableSafeTop: {
+                    paddingTop: 0,
+                },
+            },
+        },
+    },
+    safeContentNoTop: {
+        paddingTop: theme.spacings['0'],
+    },
+    appbarHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: theme.spacings['2'],
+        paddingVertical: theme.spacings['2'],
+        elevation: 0,
+        backgroundColor: 'transparent',
+    },
+}));
+
+const datePickerModalContentHeaderStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        color: theme.colors.onPrimary,
+    },
+
+    fill: {
+        flex: 1,
+    },
+    header: {
+        height: 75,
+        alignItems: 'center',
+        flexDirection: 'row',
+        paddingLeft: theme.spacings['6'],
+        paddingRight: theme.spacings['3'],
+    },
+    headerContentContainer: {
+        marginTop: theme.spacings['1'],
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    label: {
+        color: theme.colors.onPrimary,
+        letterSpacing: 1,
+        fontSize: theme.typescale.bodyMedium.fontSize,
+    },
+    headerText: {
+        fontSize: theme.typescale.bodyMedium.fontSize,
+        color: theme.colors.onPrimary,
+    },
+    headerSeparator: {
+        fontSize: theme.typescale.bodyMedium.fontSize,
+        paddingLeft: theme.spacings['2'],
+        paddingRight: theme.spacings['2'],
+        color: theme.colors.onPrimary,
+    },
+    icon: {
+        color: theme.colors.onPrimary,
+    },
+}));
+
+const datePickerModalHeaderBackgroundStylesDefault = StyleSheet.create(theme => ({
+    header: {
+        backgroundColor: theme.colors.primary,
+        paddingBottom: theme.spacings['0'],
+        elevation: 4,
+    },
+    safeContent: {
+        paddingBottom: theme.spacings['0'],
+    },
+}));
+
+const datePickerModalEditStylesDefault = StyleSheet.create(theme => ({
+    container: { padding: theme.spacings['3'] },
+    inner: { flexDirection: 'row' },
+    inputContainer: { flex: 1 },
+    input: { flex: 1 },
+    separator: { width: 12 },
+}));
+
+registerComponentsStyles({
+    DatePickerModal: datePickerModalStylesDefault,
+    DatePickerModal_Header: datePickerModalHeaderStylesDefault,
+    DatePickerModal_ContentHeader: datePickerModalContentHeaderStylesDefault,
+    DatePickerModal_HeaderBackground: datePickerModalHeaderBackgroundStylesDefault,
+    DatePickerModal_Edit: datePickerModalEditStylesDefault,
+});
+
+export const datePickerModalStyles = getRegisteredMoleculesComponentStyles('DatePickerModal');
+export const datePickerModalHeaderStyles =
+    getRegisteredMoleculesComponentStyles('DatePickerModal_Header');
+export const datePickerModalContentHeaderStyles = getRegisteredMoleculesComponentStyles(
+    'DatePickerModal_ContentHeader',
+);
+export const datePickerModalHeaderBackgroundStyles = getRegisteredMoleculesComponentStyles(
+    'DatePickerModal_HeaderBackground',
+);
+export const datePickerModalEditStyles =
+    getRegisteredMoleculesComponentStyles('DatePickerModal_Edit');