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

package/components/TimeField/TimeField.tsx

@@ -0,0 +1,75 @@
+import { memo, useCallback, useMemo } from 'react';
+
+import type { DatePickerValue, RangeValue } from '../DatePicker/context';
+import { useDatePickerContext } from '../DatePicker/context';
+import { TextInput } from '../TextInput';
+import type { Props as TextInputProps } from '../TextInput/TextInput';
+import { useTimeFieldState } from './useTimeFieldState';
+import { timeFormat } from './utils';
+
+export type TimeFieldProps = Omit<TextInputProps, 'value' | 'defaultValue' | 'onChangeText'>;
+
+const isRange = (value: DatePickerValue): value is RangeValue =>
+    value !== null && typeof value === 'object' && 'start' in value && 'end' in value;
+
+const toTimeString = (value: Date | null): string => {
+    if (!value) return '';
+    const h = value.getHours().toString().padStart(2, '0');
+    const m = value.getMinutes().toString().padStart(2, '0');
+    return `${h}:${m}`;
+};
+
+const applyTimeToDate = (base: Date | null, time: string): Date | null => {
+    if (!time) return null;
+    const [h, m] = time.split(':').map(n => parseInt(n, 10));
+    if (Number.isNaN(h) || Number.isNaN(m)) return base;
+    const next = base ? new Date(base) : new Date();
+    next.setHours(h, m, 0, 0);
+    return next;
+};
+
+function TimeField({ ref, disabled: disabledProp, onBlur, onFocus, ...rest }: TimeFieldProps) {
+    const { value, commitValue, is24Hour, disabled: providerDisabled } = useDatePickerContext();
+
+    const disabled = disabledProp ?? providerDisabled;
+
+    const dateValue = useMemo<Date | null>(() => (isRange(value) ? null : value), [value]);
+
+    const timeString = useMemo(() => toTimeString(dateValue), [dateValue]);
+
+    const onChange = useCallback(
+        (next: string) => {
+            commitValue(applyTimeToDate(dateValue, next));
+        },
+        [dateValue, commitValue],
+    );
+
+    const {
+        timeString: formatted,
+        onChangeText,
+        onBlur: onInnerBlur,
+        onFocus: onInnerFocus,
+    } = useTimeFieldState({
+        time: timeString,
+        is24Hour,
+        disabled,
+        onChange,
+        onBlur,
+        onFocus,
+    });
+
+    return (
+        <TextInput
+            placeholder={timeFormat[is24Hour ? '24' : '12'].format}
+            {...rest}
+            ref={ref}
+            disabled={disabled}
+            value={formatted}
+            onChangeText={onChangeText}
+            onBlur={onInnerBlur}
+            onFocus={onInnerFocus}
+        />
+    );
+}
+
+export default memo(TimeField);

package/components/TimeField/index.tsx

@@ -0,0 +1,6 @@
+import { getRegisteredComponentWithFallback } from '../../core';
+import TimeFieldDefault from './TimeField';
+
+export const TimeField = getRegisteredComponentWithFallback('TimeField', TimeFieldDefault);
+
+export type { TimeFieldProps } from './TimeField';

package/components/TimeField/useTimeFieldState.ts

@@ -0,0 +1,70 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { BlurEvent, FocusEvent } from 'react-native';
+
+import { getFormattedTime, getOutputTime, sanitizeTime } from './utils';
+
+type Props = {
+    time: string;
+    is24Hour: boolean;
+    disabled?: boolean;
+    onChange?: (time: string) => void;
+    onBlur?: (e: BlurEvent) => void;
+    onFocus?: (e: FocusEvent) => void;
+};
+
+export function useTimeFieldState({
+    time,
+    is24Hour,
+    disabled,
+    onChange,
+    onBlur: onBlurProp,
+    onFocus: onFocusProp,
+}: Props) {
+    const [timeString, setTimeString] = useState(() => getFormattedTime({ time, is24Hour }));
+    const isBlurredRef = useRef(true);
+
+    const onChangeText = useCallback(
+        (_text: string) => {
+            const text = sanitizeTime(_text, is24Hour);
+            setTimeString(_text);
+
+            if (disabled || !text) return;
+
+            onChange?.(getOutputTime({ time: text || time, is24Hour }));
+        },
+        [disabled, is24Hour, onChange, time],
+    );
+
+    const onBlur = useCallback(
+        (e: BlurEvent) => {
+            isBlurredRef.current = true;
+            onBlurProp?.(e);
+
+            if (disabled) return;
+
+            setTimeString(sanitizeTime(getFormattedTime({ time, is24Hour }), is24Hour));
+        },
+        [disabled, is24Hour, onBlurProp, time],
+    );
+
+    const onFocus = useCallback(
+        (e: FocusEvent) => {
+            isBlurredRef.current = false;
+            onFocusProp?.(e);
+        },
+        [onFocusProp],
+    );
+
+    useEffect(() => {
+        if (!isBlurredRef.current) return;
+
+        setTimeString(getFormattedTime({ time, is24Hour }));
+    }, [is24Hour, time]);
+
+    return {
+        timeString,
+        onChangeText,
+        onBlur,
+        onFocus,
+    };
+}

package/components/{TimePickerField/sanitizeTime.ts → TimeField/utils.ts}

@@ -1,19 +1,61 @@
-export const sanitizeTime = (value: string, is24hour = false) => {
-    // Remove all non-numeric and non-colon characters except am/pm
+import { format, parse, set } from 'date-fns';
+
+export const timeMask24Hour = (text: string = '') => {
+    const cleanTime = text.replace(/\D+/g, '');
+
+    const hourFirstDigit = /[012]/;
+    let hourSecondDigit = /\d/;
+
+    if (cleanTime.charAt(0) === '2') {
+        hourSecondDigit = /[0123]/;
+    }
+
+    return [hourFirstDigit, hourSecondDigit, ':', /[012345]/, /\d/];
+};
+
+export const timeMask12Hour = (text: string = '') => {
+    const cleanTime = text.replace(/\D+/g, '');
+
+    const hourFirstDigit = /[01]/;
+    let hourSecondDigit = /\d/;
+
+    if (cleanTime.charAt(0) === '1') {
+        hourSecondDigit = /[012]/;
+    }
+
+    return [hourFirstDigit, hourSecondDigit, ':', /[012345]/, /\d/, /[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 sanitizeTime = (value: string, is24Hour = false) => {
     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) {
+        if (!is24Hour && hours >= 1 && hours <= 12) {
             return `${hours}:00am`;
-        } else if (is24hour && hours >= 0 && hours < 24) {
+        }
+        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)
+    if (is24Hour) {
         const match24Hour = sanitizedValue.match(/^(\d{1,2}):?(\d{2})$/);
 
         if (match24Hour) {
@@ -27,7 +69,6 @@ export const sanitizeTime = (value: string, is24hour = false) => {
             }
         }
 
-        // 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);
@@ -40,15 +81,16 @@ export const sanitizeTime = (value: string, is24hour = false) => {
                 } 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);
@@ -68,7 +110,6 @@ export const sanitizeTime = (value: string, is24hour = false) => {
         }
     }
 
-    // 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);
@@ -80,6 +121,32 @@ export const sanitizeTime = (value: string, is24hour = false) => {
         }
     }
 
-    // If no match, return empty string as invalid input
     return '';
 };
+
+export const getFormattedTime = ({ time, is24Hour }: { time: string; is24Hour: boolean }) => {
+    if (!time) return '';
+
+    const [hour = '0', minute = '0'] = sanitizeTimeString(time).split(':');
+
+    return format(
+        set(referenceDate, { hours: +hour.padStart(2, '0'), minutes: +minute.padStart(2, '0') }),
+        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',
+    );
+};

package/components/TimePicker/AnalogClock.tsx

@@ -1,3 +1,4 @@
+import { useLatest } from '@react-native-molecules/utils/hooks';
 import { memo, useCallback, useMemo, useRef } from 'react';
 import {
     type GestureResponderEvent,
@@ -7,7 +8,6 @@ import {
     type ViewProps,
 } from 'react-native';
 
-import { useLatest } from '../../hooks';
 import AnalogClockHours from './AnalogClockHours';
 import AnalogClockMinutes from './AnalogClockMinutes';
 import AnimatedClockSwitcher from './AnimatedClockSwitcher';

package/components/TimePicker/TimeInput.tsx

@@ -1,24 +1,28 @@
-import { forwardRef, memo, useCallback, useMemo, useState } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { forwardRef, memo, useCallback, useEffect, useMemo, useState } from 'react';
+import {
+    type NativeSyntheticEvent,
+    StyleSheet,
+    TextInput as NativeTextInput,
+    type TextInputProps as NativeTextInputProps,
+    type TextInputSelectionChangeEventData,
+    View,
+} from 'react-native';
 
 import { useTheme } from '../../hooks';
 import { resolveStateVariant } from '../../utils';
-import { TextInput, type TextInputProps } from '../TextInput';
 import { TouchableRipple } from '../TouchableRipple';
 import { inputTypes, type PossibleClockTypes, type PossibleInputTypes } from './timeUtils';
 import { timePickerInputStyles } from './utils';
 
-interface TimeInputProps
-    extends Omit<
-        Omit<TextInputProps, 'value' | 'variant' | 'onChangeText' | 'onPress'>,
-        'onFocus'
-    > {
+interface TimeInputProps extends Omit<NativeTextInputProps, 'value' | 'onChangeText' | 'onPress'> {
     value: number;
     clockType: PossibleClockTypes;
     onPress?: (type: PossibleClockTypes) => any;
     pressed: boolean;
-    onChanged: (n: number) => any;
+    onChanged: (n: number, text: string) => any;
     inputType: PossibleInputTypes;
+    error?: boolean;
+    inputStyle?: NativeTextInputProps['style'];
 }
 
 function TimeInput(
@@ -29,18 +33,22 @@ function TimeInput(
         onPress,
         onChanged,
         inputType,
+        error = false,
         inputStyle,
         style,
         ...rest
     }: TimeInputProps,
     ref: any,
 ) {
-    const onInnerChange = (text: string) => {
-        onChanged(Number(text));
-    };
-
     const theme = useTheme();
     const [inputFocused, setInputFocused] = useState<boolean>(false);
+    const [rawText, setRawText] = useState<string | null>(null);
+    const [selection, setSelection] = useState<{ start: number; end: number } | undefined>();
+
+    const onInnerChange = (text: string) => {
+        setRawText(text);
+        onChanged(Number(text), text);
+    };
 
     const highlighted = inputType === inputTypes.picker ? pressed : inputFocused;
 
@@ -52,55 +60,92 @@ function TimeInput(
     });
 
     const formattedValue = useMemo(() => {
-        let _formattedValue = `${value}`;
-
-        if (!inputFocused) {
-            _formattedValue = `${value}`.length === 1 ? `0${value}` : `${value}`;
-        }
+        if (rawText !== null && (inputFocused || error)) return rawText;
 
-        return _formattedValue;
-    }, [value, inputFocused]);
+        const str = `${value}`;
+        return str.length === 1 ? `0${str}` : str;
+    }, [value, inputFocused, rawText, error]);
 
-    const { rippleColor, containerStyle, textInputContainerStyle, textInputStyle, buttonStyle } =
-        useMemo(() => {
-            const { container, input, button } = timePickerInputStyles;
+    const { containerStyle, textInputStyle, buttonStyle } = useMemo(() => {
+        const {
+            container,
+            input,
+            keyboardInput,
+            keyboardInputHighlighted,
+            inputError,
+            keyboardInputError,
+            button,
+        } = timePickerInputStyles;
+        const isKeyboardInput = inputType === inputTypes.keyboard;
 
-            return {
-                rippleColor: timePickerInputStyles.root?._rippleColor,
-                containerStyle: container,
-                textInputContainerStyle: [{ paddingHorizontal: 0 }, style],
-                textInputStyle: [input, inputStyle],
-                buttonStyle: [StyleSheet.absoluteFill, button],
-            };
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-        }, [inputStyle, style, state]);
+        return {
+            containerStyle: container,
+            textInputStyle: [
+                input,
+                isKeyboardInput ? keyboardInput : null,
+                isKeyboardInput && highlighted ? keyboardInputHighlighted : null,
+                error ? inputError : null,
+                isKeyboardInput && error ? keyboardInputError : null,
+                style,
+                inputStyle,
+            ],
+            buttonStyle: [StyleSheet.absoluteFill, button],
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [error, highlighted, inputStyle, inputType, style, state]);
 
     const onFocus = useCallback(() => setInputFocused(true), []);
-    const onBlur = useCallback(() => setInputFocused(false), []);
+
+    const onBlur = useCallback(() => {
+        setInputFocused(false);
+        setSelection(undefined);
+        if (!error) {
+            setRawText(null);
+        }
+    }, [error]);
+
     const onPressInput = useCallback(() => onPress?.(clockType), [clockType, onPress]);
 
+    const onSelectionChange = useCallback(
+        (e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
+            if (selection) {
+                setSelection(undefined);
+            }
+
+            rest.onSelectionChange?.(e);
+        },
+        [rest, selection],
+    );
+
+    useEffect(() => {
+        if (error && inputFocused && rawText?.length) {
+            setSelection({ start: 0, end: rawText.length });
+            return;
+        }
+
+        setSelection(undefined);
+    }, [error, inputFocused, rawText]);
+
     return (
         <View style={containerStyle}>
-            <TextInput
-                variant="plain"
+            <NativeTextInput
                 ref={ref}
-                inputStyle={textInputStyle}
-                style={textInputContainerStyle}
                 onFocus={onFocus}
                 onBlur={onBlur}
                 keyboardAppearance={theme.dark ? 'dark' : 'default'}
                 value={formattedValue}
                 maxLength={2}
+                placeholderTextColor={theme.colors.onSurfaceVariant}
+                selectTextOnFocus={inputType === inputTypes.picker || error}
+                selection={selection}
+                onSelectionChange={onSelectionChange}
                 onChangeText={onInnerChange}
+                style={textInputStyle}
                 {...rest}
             />
             <>
                 {onPress && inputType === inputTypes.picker ? (
-                    <TouchableRipple
-                        style={buttonStyle}
-                        rippleColor={rippleColor}
-                        onPress={onPressInput}
-                        borderless={true}>
+                    <TouchableRipple style={buttonStyle} onPress={onPressInput} borderless={true}>
                         <View />
                     </TouchableRipple>
                 ) : null}