react-native-molecules 0.5.0-beta.3 → 0.5.0-beta.31

package/components/DatePickerModal/DatePickerModalContentHeader.tsx

@@ -1,213 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

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

package/components/DatePickerModal/types.ts

@@ -1,92 +0,0 @@
-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

@@ -1,122 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-
-import { getRegisteredComponentStylesWithFallback } 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 },
-}));
-
-export const datePickerModalStyles = getRegisteredComponentStylesWithFallback(
-    'DatePickerModal',
-    datePickerModalStylesDefault,
-);
-export const datePickerModalHeaderStyles = getRegisteredComponentStylesWithFallback(
-    'DatePickerModal_Header',
-    datePickerModalHeaderStylesDefault,
-);
-export const datePickerModalContentHeaderStyles = getRegisteredComponentStylesWithFallback(
-    'DatePickerModal_ContentHeader',
-    datePickerModalContentHeaderStylesDefault,
-);
-export const datePickerModalHeaderBackgroundStyles = getRegisteredComponentStylesWithFallback(
-    'DatePickerModal_HeaderBackground',
-    datePickerModalHeaderBackgroundStylesDefault,
-);
-export const datePickerModalEditStyles = getRegisteredComponentStylesWithFallback(
-    'DatePickerModal_Edit',
-    datePickerModalEditStylesDefault,
-);

package/components/DateTimePicker/DateTimePicker.tsx

@@ -1,172 +0,0 @@
-import { format, parse, set } from 'date-fns';
-import {
-    type ComponentType,
-    forwardRef,
-    memo,
-    type RefObject,
-    useCallback,
-    useEffect,
-    useImperativeHandle,
-    useMemo,
-    useRef,
-} from 'react';
-import type { ViewProps, ViewStyle } from 'react-native';
-
-import { useControlledValue } from '../../hooks';
-import { isValid } from '../../utils/date-fns';
-import { DatePickerInput, type DatePickerInputProps } from '../DatePickerInput';
-import { ElementGroup } from '../ElementGroup';
-import type { TextInputHandles } from '../TextInput/TextInput';
-import { sanitizeTimeString, TimePickerField, type TimePickerFieldProps } from '../TimePickerField';
-
-export type Props = Omit<ViewProps, 'style'> & {
-    is24Hour?: boolean;
-    date?: Date | null;
-    onChange?: (date: Date | null) => void;
-    defaultValue?: Date | null;
-    timePickerFieldProps?: Omit<
-        Partial<TimePickerFieldProps>,
-        'value' | 'onChangeText' | 'date' | 'onTimeChange'
-    >;
-    datePickerInputProps?: Omit<Partial<DatePickerInputProps>, 'value' | 'onChange'>;
-    datePickerInputRef?: RefObject<TextInputHandles | null>;
-    timePickerInputRef?: RefObject<TextInputHandles | null>;
-    Wrapper?: ComponentType<any>;
-    style?: ViewStyle;
-};
-
-const emptyObj = {};
-
-const normalizeDateWithCurrentTime = (specificDate: Date) => {
-    const date = new Date();
-
-    return set(specificDate, {
-        hours: date.getHours(),
-        minutes: date.getHours(),
-        seconds: date.getSeconds(),
-    });
-};
-
-const DateTimePicker = (
-    {
-        is24Hour = false,
-        date: dateProp,
-        onChange: onChangeProp,
-        defaultValue,
-        datePickerInputProps = emptyObj,
-        timePickerFieldProps = emptyObj,
-        style,
-        testID,
-        datePickerInputRef: _datePickerInputRef,
-        timePickerInputRef: _timePickerInputRef,
-        Wrapper: _WrapperProp,
-        ...rest
-    }: Props,
-    ref: any,
-) => {
-    const Wrapper = _WrapperProp ?? ElementGroup;
-
-    const containerRef = useRef(null);
-    const datePickerInputRef = useRef<TextInputHandles>(null);
-    const timePickerInputRef = useRef<TextInputHandles>(null);
-
-    const [date, onChange] = useControlledValue<Date | null>({
-        value: dateProp,
-        defaultValue,
-        onChange: onChangeProp,
-    });
-
-    const timeString = useMemo(() => (date && isValid(date) ? format(date, 'HH:mm') : ''), [date]);
-
-    const timeStringRef = useRef(timeString);
-
-    const onDateChange = useCallback(
-        (newDate: Date | null) => {
-            if (newDate === date || (!isValid(newDate) && !isValid(date))) return;
-
-            if (!newDate) {
-                onChange(null);
-
-                return;
-            }
-
-            const addTimeString = (_date: Date) =>
-                timeStringRef.current
-                    ? parse(timeStringRef.current ?? '00:00', 'HH:mm', _date)
-                    : _date;
-
-            if (!date) {
-                onChange(addTimeString(normalizeDateWithCurrentTime(newDate)));
-                return;
-            }
-
-            if (!isValid(newDate)) {
-                onChange(date);
-                return;
-            }
-
-            const [day, month, year] = format(newDate, 'dd/MM/yyyy').split('/');
-
-            onChange(addTimeString(set(date, { date: +day, month: +month - 1, year: +year })));
-        },
-        [date, onChange],
-    );
-
-    const onTimeChange = useCallback(
-        (time: string) => {
-            if (!time) return;
-
-            const newTime = sanitizeTimeString(time);
-
-            timeStringRef.current = newTime;
-
-            onChange(date ? parse(newTime, 'HH:mm', date) : null);
-        },
-        [date, onChange],
-    );
-
-    useEffect(() => {
-        if (isValid(date)) return;
-
-        onChange(null);
-    }, [date, onChange]);
-
-    useImperativeHandle(_datePickerInputRef, () => datePickerInputRef.current as TextInputHandles);
-    useImperativeHandle(_timePickerInputRef, () => timePickerInputRef.current as TextInputHandles);
-
-    useImperativeHandle(ref, () =>
-        Object.assign(containerRef.current || {}, {
-            blur: () => {
-                datePickerInputRef.current?.blur?.();
-                timePickerInputRef.current?.blur?.();
-            },
-        }),
-    );
-
-    return (
-        <>
-            <Wrapper style={style} testID={testID} {...rest} ref={containerRef}>
-                <DatePickerInput
-                    ref={datePickerInputRef}
-                    inputMode="start"
-                    variant="outlined"
-                    testID={testID ? `${testID}--datepickerinput` : undefined}
-                    {...datePickerInputProps}
-                    value={date}
-                    onChange={onDateChange}
-                />
-                <TimePickerField
-                    ref={timePickerInputRef}
-                    variant="outlined"
-                    testID={testID ? `${testID}--timepickerinput` : undefined}
-                    is24Hour={is24Hour}
-                    {...timePickerFieldProps}
-                    time={timeString}
-                    onTimeChange={onTimeChange}
-                />
-            </Wrapper>
-        </>
-    );
-};
-
-export default memo(forwardRef(DateTimePicker));