react-native-molecules 0.5.0-beta.0

package/components/TimePicker/utils.ts

@@ -0,0 +1,285 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { circleSize } from './timeUtils';
+
+const timePickerStylesDefault = StyleSheet.create(theme => ({
+    container: {
+        alignItems: 'center',
+
+        variants: {
+            variant: {
+                landScape: {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    width: 24 * 3 + 96 * 2 + 52 + circleSize,
+                },
+                landScapeWithoutClock: {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    width: 24 * 3 + 96 * 2 + 12,
+                },
+            },
+        },
+    },
+    clockContainer: {
+        paddingLeft: theme.spacings['3'],
+        paddingRight: theme.spacings['3'],
+        alignItems: 'center',
+
+        variants: {
+            variant: {
+                default: {
+                    marginTop: theme.spacings['9'],
+                },
+            },
+        },
+    },
+}));
+
+const timePickerInputsStylesDefault = StyleSheet.create(theme => ({
+    spaceBetweenInputsAndSwitcher: { width: 12 },
+    inputContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+
+        variants: {
+            state: {
+                landScape: {
+                    flex: 1,
+                },
+            },
+        },
+    },
+    hoursAndMinutesSeparator: {
+        fontSize: 65,
+        width: 24,
+        alignItems: 'center',
+    },
+    spaceDot: {
+        flex: 1,
+    },
+    dot: {
+        width: 7,
+        height: 7,
+        borderRadius: theme.shapes.corner.full,
+        backgroundColor: theme.colors.onSurface,
+    },
+    betweenDot: {
+        height: 12,
+    },
+}));
+
+const timePickerInputStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        rippleColor: theme.colors.onPrimaryContainer,
+    } as any,
+
+    container: {
+        position: 'relative',
+    },
+    input: {
+        fontSize: theme.typescale.displayLarge.fontSize,
+        lineHeight: theme.typescale.displayLarge.lineHeight,
+        textAlign: 'center',
+        textAlignVertical: 'center',
+        width: 96,
+        height: 80,
+        backgroundColor: theme.colors.surfaceVariant,
+        color: theme.colors.onSurface,
+        borderRadius: theme.shapes.corner.small,
+
+        variants: {
+            state: {
+                highlighted: {
+                    backgroundColor: theme.colors.primaryContainer,
+                    color: theme.colors.primary,
+                },
+            },
+        },
+    },
+    button: {
+        overflow: 'hidden',
+        borderRadius: theme.shapes.corner.small,
+    },
+}));
+
+const timePickerClockStylesDefault = StyleSheet.create(theme => ({
+    clock: {
+        height: circleSize,
+        width: circleSize,
+        position: 'relative',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: theme.shapes.corner.full,
+        backgroundColor: theme.colors.surfaceVariant,
+    },
+    middlePoint: {
+        borderRadius: theme.spacings['1'],
+        height: 8,
+        width: 8,
+        backgroundColor: theme.colors.primary,
+    },
+    center: { justifyContent: 'center', alignItems: 'center' },
+    endPoint: {
+        borderRadius: theme.shapes.corner.full,
+        height: 30,
+        width: 30,
+        position: 'absolute',
+        right: 0,
+        bottom: -14,
+        backgroundColor: theme.colors.primary,
+    },
+    line: {
+        position: 'absolute',
+        marginBottom: -1,
+        height: 2,
+        borderRadius: theme.shapes.corner.extraSmall,
+        backgroundColor: theme.colors.primary,
+    },
+}));
+
+const timePickerClockHoursStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        activeTextColor: theme.colors.onPrimary,
+    } as any,
+
+    outerHourRoot: {
+        position: 'absolute',
+        justifyContent: 'center',
+        alignItems: 'center',
+        zIndex: 20,
+        width: 50,
+        height: 50,
+        marginLeft: -25,
+        marginTop: -25,
+
+        borderRadius: theme.shapes.corner.full,
+    },
+    outerHourInner: {
+        borderRadius: theme.shapes.corner.full,
+    },
+    innerHourRoot: {
+        position: 'absolute',
+        zIndex: 20,
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: 40,
+        height: 40,
+        marginLeft: -20,
+        marginTop: -20,
+        borderRadius: theme.shapes.corner.full,
+    },
+    innerHourInner: {
+        borderRadius: theme.shapes.corner.full,
+    },
+    innerHourText: { fontSize: 13 },
+}));
+
+const timePickerClockMinutesStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        activeTextColor: theme.colors.onPrimary,
+    } as any,
+
+    outerHourRoot: {
+        position: 'absolute',
+        justifyContent: 'center',
+        alignItems: 'center',
+        zIndex: 20,
+        width: 50,
+        height: 50,
+        marginLeft: -25,
+        marginTop: -25,
+
+        borderRadius: theme.shapes.corner.full,
+    },
+    outerHourInner: {
+        borderRadius: theme.shapes.corner.full,
+    },
+    innerHourRoot: {
+        position: 'absolute',
+        zIndex: 20,
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: 40,
+        height: 40,
+        marginLeft: -20,
+        marginTop: -20,
+        borderRadius: theme.shapes.corner.full,
+    },
+    innerHourInner: {
+        borderRadius: theme.shapes.corner.full,
+    },
+    innerHourText: {
+        fontSize: theme.typescale.labelLarge.fontSize,
+    },
+    textWhite: { color: '#fff' },
+}));
+
+const timePickerAmPmSwitcherStylesDefault = StyleSheet.create(theme => ({
+    container: {
+        width: 50,
+        height: 80,
+        borderWidth: 1,
+        overflow: 'hidden',
+        borderColor: theme.colors.outline,
+        borderRadius: theme.shapes.corner.small,
+    },
+    switchSeparator: {
+        height: 1,
+        width: 48,
+        backgroundColor: theme.colors.outline,
+    },
+    switchButton: {
+        flex: 1,
+    },
+    switchButtonInner: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: theme.colors.surface,
+
+        variants: {
+            state: {
+                selected: {
+                    backgroundColor: theme.colors.tertiaryContainer,
+                },
+            },
+        },
+    },
+    text: {
+        ...theme.typescale.bodyMedium,
+        color: theme.colors.onSurface,
+
+        variants: {
+            state: {
+                selected: {
+                    color: theme.colors.onTertiaryContainer,
+                },
+            },
+        },
+    },
+}));
+
+registerComponentsStyles({
+    TimePicker: timePickerStylesDefault,
+    TimePicker_Inputs: timePickerInputsStylesDefault,
+    TimePicker_Input: timePickerInputStylesDefault,
+    TimePicker_Clock: timePickerClockStylesDefault,
+    TimePicker_ClockHours: timePickerClockHoursStylesDefault,
+    TimePicker_ClockMinutes: timePickerClockMinutesStylesDefault,
+    TimePicker_AmPmSwitcher: timePickerAmPmSwitcherStylesDefault,
+});
+
+export const timePickerStyles = getRegisteredMoleculesComponentStyles('TimePicker');
+export const timePickerInputsStyles = getRegisteredMoleculesComponentStyles('TimePicker_Inputs');
+export const timePickerInputStyles = getRegisteredMoleculesComponentStyles('TimePicker_Input');
+export const timePickerClockStyles = getRegisteredMoleculesComponentStyles('TimePicker_Clock');
+export const timePickerClockHoursStyles =
+    getRegisteredMoleculesComponentStyles('TimePicker_ClockHours');
+export const timePickerClockMinutesStyles =
+    getRegisteredMoleculesComponentStyles('TimePicker_ClockMinutes');
+export const timePickerAmPmSwitcherStyles =
+    getRegisteredMoleculesComponentStyles('TimePicker_AmPmSwitcher');

package/components/TimePickerField/TimePickerField.tsx

@@ -0,0 +1,152 @@
+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,
+        ...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}
+            right={rightElement}
+        />
+    );
+};
+
+export default memo(forwardRef(TimePickerField));

package/components/TimePickerField/index.tsx

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

package/components/TimePickerField/sanitizeTime.ts

@@ -0,0 +1,85 @@
+export const sanitizeTime = (value: string, is24hour = false) => {
+    // Remove all non-numeric and non-colon characters except am/pm
+    const sanitizedValue = value.replace(/[^0-9:apm]/gi, '');
+
+    const singleDigitHour = sanitizedValue.match(/^(\d{1,2})$/);
+    if (singleDigitHour) {
+        const hours = parseInt(singleDigitHour[1], 10);
+        if (!is24hour && hours >= 1 && hours <= 12) {
+            return `${hours}:00am`;
+        } else if (is24hour && hours >= 0 && hours < 24) {
+            return `${hours.toString().padStart(2, '0')}:00`;
+        }
+    }
+
+    if (is24hour) {
+        // Check if it's a valid 24-hour time format (HH:MM)
+        const match24Hour = sanitizedValue.match(/^(\d{1,2}):?(\d{2})$/);
+
+        if (match24Hour) {
+            const hours = parseInt(match24Hour[1], 10);
+            const minutes = parseInt(match24Hour[2], 10);
+
+            if (hours >= 0 && hours < 24 && minutes >= 0 && minutes < 60) {
+                return `${hours.toString().padStart(2, '0')}:${minutes
+                    .toString()
+                    .padStart(2, '0')}`;
+            }
+        }
+
+        // Convert 12-hour time to 24-hour time format if necessary
+        const match12Hour = sanitizedValue.match(/^(\d{1,2}):?(\d{2})\s*([ap]m)$/i);
+        if (match12Hour) {
+            let hours = parseInt(match12Hour[1], 10);
+            const minutes = parseInt(match12Hour[2], 10);
+            const period = match12Hour[3].toLowerCase();
+
+            if (hours >= 1 && hours <= 12 && minutes >= 0 && minutes < 60) {
+                if (period === 'pm' && hours < 12) {
+                    hours += 12;
+                } else if (period === 'am' && hours === 12) {
+                    hours = 0;
+                }
+                return `${hours.toString().padStart(2, '0')}:${minutes
+                    .toString()
+                    .padStart(2, '0')}`;
+            }
+        }
+        return '';
+    }
+
+    // Convert 24-hour time to 12-hour time format if necessary
+    const match24Hour = sanitizedValue.match(/^(\d{1,2}):?(\d{2})$/);
+    if (match24Hour) {
+        let hours = parseInt(match24Hour[1], 10);
+        const minutes = parseInt(match24Hour[2], 10);
+        let period = 'am';
+
+        if (hours >= 0 && hours < 24 && minutes >= 0 && minutes < 60) {
+            if (hours >= 12) {
+                period = 'pm';
+                if (hours > 12) {
+                    hours -= 12;
+                }
+            } else if (hours === 0) {
+                hours = 12;
+            }
+            return `${hours}:${minutes.toString().padStart(2, '0')}${period}`;
+        }
+    }
+
+    // Check if it's a valid 12-hour time format (HH:MM am/pm)
+    const match12Hour = sanitizedValue.match(/^(\d{1,2}):?(\d{2})\s*([ap]m)$/i);
+    if (match12Hour) {
+        const hours = parseInt(match12Hour[1], 10);
+        const minutes = parseInt(match12Hour[2], 10);
+        const period = match12Hour[3].toLowerCase();
+
+        if (hours >= 1 && hours <= 12 && minutes >= 0 && minutes < 60) {
+            return `${hours}:${minutes.toString().padStart(2, '0')}${period}`;
+        }
+    }
+
+    // If no match, return empty string as invalid input
+    return '';
+};

package/components/TimePickerField/utils.ts

@@ -0,0 +1,95 @@
+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 { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+
+const timepickerFieldStylesDefault = StyleSheet.create({
+    root: {},
+});
+
+registerComponentsStyles({
+    TimePickerField: timepickerFieldStylesDefault,
+});
+
+export const styles = getRegisteredMoleculesComponentStyles('TimePickerField');
+
+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',
+    );
+};