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

package/components/DatePickerModal/CalendarEdit.tsx

@@ -1,140 +0,0 @@
-import { memo, useCallback, useEffect, useRef } from 'react';
-import { Keyboard, TextInput as TextInputNative, View } from 'react-native';
-
-import type { ModeType, ValidRangeType } from '../DatePickerInline';
-import DatePickerInputWithoutModal from '../DatePickerInput/DatePickerInputWithoutModal';
-import { TextInput } from '../TextInput';
-import type { LocalState, LocalStateRange, LocalStateSingle } from './types';
-import { datePickerModalEditStyles } from './utils';
-
-type Props = {
-    mode: ModeType;
-    label?: string;
-    startLabel?: string;
-    endLabel?: string;
-    state: LocalState;
-    collapsed: boolean;
-    onChange: (s: LocalState) => any;
-    validRange: ValidRangeType | undefined;
-    // locale: string;
-};
-
-function CalendarEdit({
-    mode,
-    state,
-    label = '',
-    startLabel = 'Start',
-    endLabel = 'End',
-    collapsed,
-    onChange,
-    validRange,
-}: // locale,
-Props) {
-    const dateInput = useRef<TextInputNative | null>(null);
-    const startInput = useRef<TextInputNative | null>(null);
-    const endInput = useRef<TextInputNative | null>(null);
-
-    // when switching views focus, or un-focus text input
-    useEffect(() => {
-        // hide open keyboard
-        if (collapsed) {
-            Keyboard.dismiss();
-        }
-
-        const inputsToFocus = [dateInput.current, startInput.current].filter(
-            n => n,
-        ) as TextInputNative[];
-
-        const inputsToBlur = [dateInput.current, startInput.current, endInput.current].filter(
-            n => n,
-        ) as TextInputNative[];
-
-        if (collapsed) {
-            inputsToBlur.forEach(ip => ip.blur());
-        } else {
-            inputsToFocus.forEach(ip => ip.focus());
-        }
-    }, [mode, startInput, endInput, dateInput, collapsed]);
-
-    const onSubmitStartInput = useCallback(() => {
-        if (endInput.current) {
-            endInput.current.focus();
-        }
-    }, [endInput]);
-
-    const onSubmitEndInput = useCallback(() => {
-        // TODO: close modal and persist range
-    }, []);
-
-    const onSubmitInput = useCallback(() => {
-        // TODO: close modal and persist range
-    }, []);
-
-    const onSingleInputChange = useCallback(
-        (date: Date | null) => onChange({ ...state, date }),
-        [onChange, state],
-    );
-
-    const onStartDateChange = useCallback(
-        (startDate: Date | null) => onChange({ ...state, startDate }),
-        [onChange, state],
-    );
-
-    const onEndDateChange = useCallback(
-        (endDate: Date | null) => onChange({ ...state, endDate }),
-        [onChange, state],
-    );
-
-    return (
-        <View style={datePickerModalEditStyles.container}>
-            <>
-                {mode === 'single' ? (
-                    <DatePickerInputWithoutModal
-                        inputMode="start"
-                        ref={dateInput}
-                        value={(state as LocalStateSingle).date}
-                        onChange={onSingleInputChange}
-                        onSubmitEditing={onSubmitInput}
-                        validRange={validRange}
-                        // locale={locale}
-                        autoComplete={'off'}>
-                        <TextInput.Label>{label}</TextInput.Label>
-                    </DatePickerInputWithoutModal>
-                ) : null}
-            </>
-
-            <>
-                {mode === 'range' ? (
-                    <View style={datePickerModalEditStyles.inner}>
-                        <DatePickerInputWithoutModal
-                            inputMode="start"
-                            ref={startInput}
-                            value={(state as LocalStateRange).startDate}
-                            onChange={onStartDateChange}
-                            returnKeyType={'next'}
-                            onSubmitEditing={onSubmitStartInput}
-                            validRange={validRange}
-                            // locale={locale}
-                            autoComplete={'off'}>
-                            <TextInput.Label>{startLabel}</TextInput.Label>
-                        </DatePickerInputWithoutModal>
-                        <View style={datePickerModalEditStyles.separator} />
-                        <DatePickerInputWithoutModal
-                            inputMode="end"
-                            ref={endInput}
-                            value={(state as LocalStateRange).endDate}
-                            onChange={onEndDateChange}
-                            onSubmitEditing={onSubmitEndInput}
-                            validRange={validRange}
-                            // locale={locale}
-                            autoComplete="off">
-                            <TextInput.Label>{endLabel}</TextInput.Label>
-                        </DatePickerInputWithoutModal>
-                    </View>
-                ) : null}
-            </>
-        </View>
-    );
-}
-
-export default memo(CalendarEdit);

package/components/DatePickerModal/DatePickerModal.tsx

@@ -1,85 +0,0 @@
-import color from 'color';
-import { memo, useMemo } from 'react';
-import {
-    Platform,
-    StatusBar,
-    type StatusBarStyle,
-    StyleSheet,
-    useWindowDimensions,
-    View,
-} from 'react-native';
-
-import { Modal } from '../Modal';
-import { Portal } from '../Portal';
-import { DatePickerModalContent } from './DatePickerModalContent';
-import type { DatePickerModalProps } from './types';
-import { datePickerModalStyles } from './utils';
-
-export function DatePickerModal(props: DatePickerModalProps) {
-    const dimensions = useWindowDimensions();
-
-    const {
-        isOpen,
-        disableStatusBar,
-        disableStatusBarPadding,
-        mode = 'single',
-        style: styleProp,
-        ...rest
-    } = props;
-
-    const { containerStyle, headerStyle, barStyle, modalContentStyle } = useMemo(() => {
-        let isHeaderBackgroundLight = true;
-        try {
-            isHeaderBackgroundLight = color(
-                datePickerModalStyles.header?.backgroundColor,
-            ).isLight();
-        } catch (e) {}
-
-        return {
-            containerStyle: [StyleSheet.absoluteFill, styleProp],
-            headerStyle: [
-                datePickerModalStyles.header,
-                {
-                    height: Platform.OS === 'android' ? StatusBar.currentHeight : 0, // on IOS StatusBar.currentHeight isn't available
-                },
-            ],
-            barStyle: (isHeaderBackgroundLight
-                ? 'dark-content'
-                : 'light-content') as StatusBarStyle,
-            modalContentStyle:
-                dimensions.width > 650
-                    ? { flex: 1, maxHeight: 600 }
-                    : { flex: 1, maxWidth: undefined, borderRadius: 0 },
-        };
-    }, [dimensions.width, styleProp]);
-
-    return (
-        <View style={containerStyle} pointerEvents="box-none">
-            <Portal>
-                <Modal
-                    isOpen={isOpen}
-                    onClose={rest.onClose}
-                    style={modalContentStyle}
-                    elevation={0}>
-                    <>
-                        <>
-                            {disableStatusBar ? null : (
-                                <StatusBar translucent={true} barStyle={barStyle} />
-                            )}
-                        </>
-
-                        <>{disableStatusBarPadding ? null : <View style={headerStyle} />}</>
-
-                        <DatePickerModalContent
-                            {...rest}
-                            mode={mode as any}
-                            disableSafeTop={disableStatusBar}
-                        />
-                    </>
-                </Modal>
-            </Portal>
-        </View>
-    );
-}
-
-export default memo(DatePickerModal);

package/components/DatePickerModal/DatePickerModalContent.tsx

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

@@ -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">
-                            <Button.Text>{saveLabel}</Button.Text>
-                        </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';