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

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));

package/components/DateTimePicker/index.tsx

@@ -1,10 +0,0 @@
-import { getRegisteredComponentWithFallback } from '../../core';
-import DateTimePickerDefault from './DateTimePicker';
-
-export const DateTimePicker = getRegisteredComponentWithFallback(
-    'DateTimePicker',
-    DateTimePickerDefault,
-);
-
-export type { Props as DateTimePickerProps } from './DateTimePicker';
-export { dateTimePickerStyles } from './utils';

package/components/DateTimePicker/utils.ts

@@ -1,12 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-
-import { getRegisteredComponentStylesWithFallback } from '../../core';
-
-const dateTimePickerStylesDefault = StyleSheet.create({
-    container: {},
-});
-
-export const dateTimePickerStyles = getRegisteredComponentStylesWithFallback(
-    'DateTimePicker',
-    dateTimePickerStylesDefault,
-);

package/components/TimePickerField/TimePickerField.tsx

@@ -1,154 +0,0 @@
-import { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import type { BlurEvent, FocusEvent } from 'react-native';
-
-import { useToggle } from '../../hooks';
-import { IconButton, type IconButtonProps } from '../IconButton';
-import { TextInput, type TextInputProps } from '../TextInput';
-import type { TimePickerModalProps } from '../TimePickerModal';
-import { TimePickerModal } from '../TimePickerModal/TimePickerModal';
-import { sanitizeTime } from './sanitizeTime';
-import { getFormattedTime, getOutputTime, styles, timeFormat } from './utils';
-
-export type Props = TextInputProps & {
-    time: string;
-    onTimeChange: (time: string) => void;
-    is24Hour?: boolean;
-    withModal?: boolean;
-    modalProps?: Omit<TimePickerModalProps, 'time' | 'onConfirm' | 'isOpen' | 'onClose' | 'ref'>;
-    iconButtonProps?: Omit<Partial<IconButtonProps>, 'onPress' | 'ref'>;
-};
-
-const TimePickerField = (
-    {
-        time,
-        onTimeChange: onTimeChangeProp,
-        is24Hour = false,
-        withModal = true,
-        style,
-        onBlur: onBlurProp,
-        modalProps,
-        iconButtonProps,
-        disabled,
-        onFocus: onFocusProp,
-        children,
-        ...rest
-    }: Props,
-    ref: any,
-) => {
-    const componentStyles = useMemo(() => [styles.root, style], [style]);
-
-    const [timeString, setTimeString] = useState(() => getFormattedTime({ time, is24Hour }));
-    const isBlurredRef = useRef(true);
-
-    const currentTimeFormat = useMemo(() => timeFormat[!is24Hour ? '12' : '24'], [is24Hour]);
-
-    const { state: isOpen, handleOpen: onOpenModal, handleClose: onCloseModal } = useToggle(false);
-
-    const onChangeText = useCallback(
-        (_text: string) => {
-            const text = sanitizeTime(_text, is24Hour);
-            setTimeString(_text);
-
-            if (disabled || !text) return;
-
-            const outputTime = getOutputTime({ time: text || time, is24Hour });
-
-            onTimeChangeProp(outputTime);
-        },
-        [disabled, is24Hour, onTimeChangeProp, time],
-    );
-
-    const onConfirmTime = useCallback(
-        (newTime: string) => {
-            onCloseModal();
-
-            onTimeChangeProp(newTime);
-        },
-        [onTimeChangeProp, onCloseModal],
-    );
-
-    const onBlur = useCallback(
-        (e: BlurEvent) => {
-            isBlurredRef.current = true;
-            onBlurProp?.(e);
-
-            if (disabled) return;
-
-            // const outputTime = getOutputTime({ time: timeString || time, is24Hour });
-            // onTimeChangeProp(outputTime);
-
-            // if (time === outputTime) {
-            setTimeString(sanitizeTime(getFormattedTime({ time, is24Hour }), is24Hour));
-            // }
-        },
-        [disabled, is24Hour, onBlurProp, time],
-    );
-
-    const onFocus = useCallback(
-        (e: FocusEvent) => {
-            isBlurredRef.current = false;
-
-            onFocusProp?.(e);
-        },
-        [onFocusProp],
-    );
-
-    const rightElement = useMemo(() => {
-        if (!withModal) return null;
-
-        return (
-            <>
-                <IconButton
-                    name="clock-outline"
-                    onPress={onOpenModal}
-                    disabled={disabled}
-                    {...iconButtonProps}
-                />
-                <TimePickerModal
-                    {...modalProps}
-                    time={getFormattedTime({ time: time, is24Hour: true })}
-                    isOpen={isOpen}
-                    onClose={onCloseModal}
-                    onConfirm={onConfirmTime}
-                    is24Hour={is24Hour}
-                />
-            </>
-        );
-    }, [
-        disabled,
-        iconButtonProps,
-        is24Hour,
-        isOpen,
-        modalProps,
-        onCloseModal,
-        onConfirmTime,
-        onOpenModal,
-        time,
-        withModal,
-    ]);
-
-    // only change masked string when the input is not focus so as to not interrup the user
-    useEffect(() => {
-        if (!isBlurredRef.current) return;
-
-        setTimeString(getFormattedTime({ time, is24Hour }));
-    }, [is24Hour, time]);
-
-    return (
-        <TextInput
-            ref={ref}
-            placeholder={currentTimeFormat.format}
-            {...rest}
-            disabled={disabled}
-            value={timeString}
-            onFocus={onFocus}
-            onChangeText={onChangeText}
-            style={componentStyles}
-            onBlur={onBlur}>
-            <TextInput.Right>{rightElement}</TextInput.Right>
-            {children}
-        </TextInput>
-    );
-};
-
-export default memo(forwardRef(TimePickerField));

package/components/TimePickerField/index.tsx

@@ -1,10 +0,0 @@
-import { getRegisteredComponentWithFallback } from '../../core';
-import TimePickerFieldDefault from './TimePickerField';
-
-export const TimePickerField = getRegisteredComponentWithFallback(
-    'TimePickerField',
-    TimePickerFieldDefault,
-);
-
-export { type Props as TimePickerFieldProps } from './TimePickerField';
-export { sanitizeTimeString, styles } from './utils';

package/components/TimePickerField/utils.ts

@@ -1,94 +0,0 @@
-import { format, parse, set } from 'date-fns';
-import { StyleSheet } from 'react-native-unistyles';
-
-export declare type MaskItem = string | RegExp | [RegExp];
-export declare type MaskArray = Array<MaskItem>;
-export declare type Mask = MaskArray | ((value?: string) => MaskArray);
-
-import { getRegisteredComponentStylesWithFallback } from '../../core';
-
-const timepickerFieldStylesDefault = StyleSheet.create({
-    root: {},
-});
-
-export const styles = getRegisteredComponentStylesWithFallback(
-    'TimePickerField',
-    timepickerFieldStylesDefault,
-);
-
-export const timeMask24Hour: Mask = (text: string = '') => {
-    const cleanTime = text.replace(/\D+/g, '');
-
-    const hourFirstDigit = /[012]/; // only 0,1 or 2
-    let hourSecondDigit = /\d/; // any number
-
-    if (cleanTime.charAt(0) === '2') {
-        hourSecondDigit = /[0123]/; // only 0,1,2 or 3
-    }
-
-    const minuteFirstDigit = /[012345]/; // only 0,1,2,3,4 or 5
-    const minuteSecondDigit = /\d/; // any number
-
-    return [hourFirstDigit, hourSecondDigit, ':', minuteFirstDigit, minuteSecondDigit];
-};
-export const timeMask12Hour: Mask = (text: string = '') => {
-    const cleanTime = text.replace(/\D+/g, '');
-
-    const hourFirstDigit = /[01]/; // only 0,1 or 2
-    let hourSecondDigit = /\d/; // any number
-
-    if (cleanTime.charAt(0) === '1') {
-        hourSecondDigit = /[012]/; // only 0,1,2 or 3
-    }
-
-    const minuteFirstDigit = /[012345]/; // only 0,1,2,3,4 or 5
-    const minuteSecondDigit = /\d/; // any number
-
-    return [hourFirstDigit, hourSecondDigit, ':', minuteFirstDigit, minuteSecondDigit, /[ap]/, 'm'];
-};
-export const timeFormat = {
-    '24': {
-        format: 'HH:mm',
-        mask: timeMask24Hour,
-    },
-    '12': {
-        format: 'hh:mmaaa',
-        mask: timeMask12Hour,
-    },
-};
-
-const referenceDate = new Date('2022-01-01T00:00:00.000Z');
-
-export const sanitizeTimeString = (time: string): string => time.replace(/[^\d:]/g, '');
-
-export const getFormattedTime = ({ time, is24Hour }: { time: string; is24Hour: boolean }) => {
-    if (!time) {
-        return '';
-    }
-
-    const [hour = '0', minute = '0'] = sanitizeTimeString(time).split(':');
-
-    const newHour = hour.padStart(2, '0');
-    const newMinute = minute.padStart(2, '0');
-
-    return format(
-        set(referenceDate, { hours: +newHour, minutes: +newMinute }),
-        timeFormat[is24Hour ? '24' : '12'].format,
-    );
-};
-
-export const getOutputTime = ({ time, is24Hour }: { time: string; is24Hour: boolean }) => {
-    if (!time) return '';
-
-    const formattedTime = sanitizeTimeString(getFormattedTime({ time, is24Hour }));
-    const isPM = time.replace(/[\d:]/g, '').includes('p');
-
-    return format(
-        parse(
-            formattedTime + (is24Hour ? '' : isPM ? 'pm' : 'am'),
-            timeFormat[is24Hour ? '24' : '12'].format,
-            referenceDate,
-        ),
-        'HH:mm',
-    );
-};