react-native-molecules 0.5.0-beta.18 → 0.5.0-beta.19

package/components/DatePicker/utils.ts

@@ -171,6 +171,7 @@ const datePickerModalEditStylesDefault = StyleSheet.create(theme => ({
 const datePickerPopoverHeaderStylesDefault = StyleSheet.create(theme => ({
     buttonContainer: {
         height: 46,
+        gap: theme.spacings['2'],
         // width: '50%',
         flexDirection: 'row',
         alignItems: 'center',

package/components/DatePickerInline/HeaderItem.tsx

@@ -96,7 +96,7 @@ function HeaderItem({
                             <Icon
                                 onPress={handlePressDropDown}
                                 name={selecting && type === pickerType ? 'menu-up' : 'menu-down'}
-                                size={16}
+                                size={18}
                             />
                         )}
                     </View>

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,46 +60,88 @@ 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 { rippleColor, 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 {
+            rippleColor: timePickerInputStyles.root?._rippleColor,
+            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}
             />
             <>

package/components/TimePicker/TimeInputs.tsx

@@ -1,11 +1,12 @@
 // @typescript-eslint/no-unused-vars
 // WORK IN PROGRESS
 
-import { memo, useCallback, useRef } from 'react';
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { TextInput as TextInputNative, useWindowDimensions, View } from 'react-native';
 
 import { useLatest } from '../../hooks';
 import { resolveStateVariant } from '../../utils';
+import { Text } from '../Text';
 import AmPmSwitcher from './AmPmSwitcher';
 import TimeInput from './TimeInput';
 import {
@@ -41,6 +42,8 @@ function TimeInputs({
 }: Props) {
     const dimensions = useWindowDimensions();
     const isLandscape = dimensions.width > dimensions.height;
+    const [hourError, setHourError] = useState(false);
+    const [minuteError, setMinuteError] = useState(false);
 
     timePickerInputsStyles.useVariants({
         state: resolveStateVariant({
@@ -50,6 +53,17 @@ function TimeInputs({
     const startInput = useRef<TextInputNative | null>(null);
     const endInput = useRef<TextInputNative | null>(null);
 
+    useEffect(() => {
+        if (inputType !== 'keyboard') {
+            setHourError(false);
+            setMinuteError(false);
+            return;
+        }
+
+        const id = setTimeout(() => startInput.current?.focus(), 0);
+        return () => clearTimeout(id);
+    }, [inputType]);
+
     const onSubmitStartInput = useCallback(() => {
         if (endInput.current) {
             endInput.current.focus();
@@ -61,6 +75,9 @@ function TimeInputs({
     }, []);
 
     const minutesRef = useLatest(minutes);
+    const isPm = hours >= 12;
+    const hourErrorText = is24Hour ? 'Hour must be 0-23' : 'Hour must be 1-12';
+    const minuteErrorText = 'Minute must be 0-59';
     const onChangeHours = useCallback(
         (newHours: number) => {
             onChange({
@@ -73,74 +90,139 @@ function TimeInputs({
     );
 
     const onHourChange = useCallback(
-        (newHoursFromInput: number) => {
+        (newHoursFromInput: number, text: string) => {
+            if (text.length === 0) {
+                setHourError(false);
+                return;
+            }
+
+            const isNumeric = /^\d+$/.test(text);
+            const minHours = is24Hour ? 0 : 1;
+            const maxHours = is24Hour ? 23 : 12;
+            const isValid =
+                isNumeric && newHoursFromInput >= minHours && newHoursFromInput <= maxHours;
+
+            setHourError(!isValid);
+
+            if (!isValid) {
+                return;
+            }
+
             let newHours = newHoursFromInput;
-            if (newHoursFromInput >= 24) {
-                newHours = 0;
+            if (!is24Hour) {
+                if (isPm) {
+                    newHours = newHoursFromInput === 12 ? 12 : newHoursFromInput + 12;
+                } else {
+                    newHours = newHoursFromInput === 12 ? 0 : newHoursFromInput;
+                }
             }
+
             onChange({
                 hours: newHours,
-                minutes,
+                minutes: minutesRef.current,
             });
+
+            const maxStartDigit = is24Hour ? 2 : 1;
+            const shouldAdvance = text.length >= 2 || newHoursFromInput > maxStartDigit;
+            if (shouldAdvance) endInput.current?.focus();
         },
-        [minutes, onChange],
+        [is24Hour, isPm, minutesRef, onChange],
     );
 
     const onMinuteChange = useCallback(
-        (newMinutesFromInput: number) => {
-            let newMinutes = newMinutesFromInput;
+        (newMinutesFromInput: number, text: string) => {
+            if (text.length === 0) {
+                setMinuteError(false);
+                return;
+            }
+
+            const isNumeric = /^\d+$/.test(text);
+            const isValid = isNumeric && newMinutesFromInput >= 0 && newMinutesFromInput <= 59;
 
-            if (newMinutesFromInput > 59) {
-                newMinutes = 0;
+            setMinuteError(!isValid);
+
+            if (!isValid) {
+                return;
             }
+
             onChange({
                 hours: hours,
-                minutes: newMinutes,
+                minutes: newMinutesFromInput,
             });
         },
         [hours, onChange],
     );
 
     return (
-        <View style={timePickerInputsStyles.inputContainer}>
-            <TimeInput
-                ref={startInput}
-                placeholder={'00'}
-                value={toHourInputFormat(hours, is24Hour)}
-                clockType={clockTypes.hours}
-                pressed={focused === clockTypes.hours}
-                onPress={onFocusInput}
-                inputType={inputType}
-                returnKeyType={'next'}
-                onSubmitEditing={onSubmitStartInput}
-                blurOnSubmit={false}
-                onChanged={onHourChange}
-                // onChangeText={onChangeStartInput}
-            />
-            <View style={timePickerInputsStyles.hoursAndMinutesSeparator}>
-                <View style={timePickerInputsStyles.spaceDot} />
-                <View style={timePickerInputsStyles.dot} />
-                <View style={timePickerInputsStyles.betweenDot} />
-                <View style={timePickerInputsStyles.dot} />
-                <View style={timePickerInputsStyles.spaceDot} />
+        <View style={timePickerInputsStyles.wrapper}>
+            <View style={timePickerInputsStyles.inputContainer}>
+                <TimeInput
+                    ref={startInput}
+                    placeholder={''}
+                    value={toHourInputFormat(hours, is24Hour)}
+                    clockType={clockTypes.hours}
+                    pressed={focused === clockTypes.hours}
+                    onPress={onFocusInput}
+                    inputType={inputType}
+                    returnKeyType={'next'}
+                    onSubmitEditing={onSubmitStartInput}
+                    blurOnSubmit={false}
+                    error={hourError}
+                    onChanged={onHourChange}
+                    // onChangeText={onChangeStartInput}
+                />
+                <View style={timePickerInputsStyles.hoursAndMinutesSeparator}>
+                    <View style={timePickerInputsStyles.spaceDot} />
+                    <View style={timePickerInputsStyles.dot} />
+                    <View style={timePickerInputsStyles.betweenDot} />
+                    <View style={timePickerInputsStyles.dot} />
+                    <View style={timePickerInputsStyles.spaceDot} />
+                </View>
+                <TimeInput
+                    ref={endInput}
+                    placeholder={'00'}
+                    value={minutes}
+                    clockType={clockTypes.minutes}
+                    pressed={focused === clockTypes.minutes}
+                    onPress={onFocusInput}
+                    inputType={inputType}
+                    error={minuteError}
+                    onSubmitEditing={onSubmitEndInput}
+                    onChanged={onMinuteChange}
+                />
+                {!is24Hour && (
+                    <>
+                        <View style={timePickerInputsStyles.spaceBetweenInputsAndSwitcher} />
+                        <AmPmSwitcher hours={hours} onChange={onChangeHours} />
+                    </>
+                )}
             </View>
-            <TimeInput
-                ref={endInput}
-                placeholder={'00'}
-                value={minutes}
-                clockType={clockTypes.minutes}
-                pressed={focused === clockTypes.minutes}
-                onPress={onFocusInput}
-                inputType={inputType}
-                onSubmitEditing={onSubmitEndInput}
-                onChanged={onMinuteChange}
-            />
-            {!is24Hour && (
-                <>
-                    <View style={timePickerInputsStyles.spaceBetweenInputsAndSwitcher} />
-                    <AmPmSwitcher hours={hours} onChange={onChangeHours} />
-                </>
-            )}
+            {inputType === 'keyboard' ? (
+                <View style={timePickerInputsStyles.supportingRow}>
+                    <View style={timePickerInputsStyles.supportingSlot}>
+                        <Text
+                            style={[
+                                timePickerInputsStyles.supportingText,
+                                hourError ? timePickerInputsStyles.supportingTextError : null,
+                            ]}>
+                            {hourError ? hourErrorText : 'Hour'}
+                        </Text>
+                    </View>
+                    <View style={timePickerInputsStyles.hoursAndMinutesSeparator} />
+                    <View style={timePickerInputsStyles.supportingSlot}>
+                        <Text
+                            style={[
+                                timePickerInputsStyles.supportingText,
+                                minuteError ? timePickerInputsStyles.supportingTextError : null,
+                            ]}>
+                            {minuteError ? minuteErrorText : 'Minute'}
+                        </Text>
+                    </View>
+                    {!is24Hour && (
+                        <View style={timePickerInputsStyles.spaceBetweenInputsAndSwitcher} />
+                    )}
+                </View>
+            ) : null}
         </View>
     );
 }

package/components/TimePicker/TimePicker.tsx

@@ -121,6 +121,11 @@ function TimePicker({
 
             if (newDisplayMode !== displayMode) setDisplayMode(newDisplayMode);
 
+            if (params.focused) {
+                const nextFocused = params.focused;
+                setTimeout(() => onFocusInput(nextFocused), 300);
+            }
+
             onTimeChange?.({
                 time: `${`${params.hours}`.padStart(2, '0')}:${`${params.minutes}`.padStart(
                     2,
@@ -129,7 +134,7 @@ function TimePicker({
                 focused: params.focused,
             });
         },
-        [displayMode, onTimeChange],
+        [displayMode, onFocusInput, onTimeChange],
     );
 
     const memoizedValue = useMemo(

package/components/TimePicker/utils.ts

@@ -41,6 +41,9 @@ const timePickerStylesDefault = StyleSheet.create(theme => ({
 
 const timePickerInputsStylesDefault = StyleSheet.create(theme => ({
     spaceBetweenInputsAndSwitcher: { width: 12 },
+    wrapper: {
+        alignItems: 'center',
+    },
     inputContainer: {
         flexDirection: 'row',
         alignItems: 'center',
@@ -70,6 +73,27 @@ const timePickerInputsStylesDefault = StyleSheet.create(theme => ({
     betweenDot: {
         height: 12,
     },
+    supportingRow: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        width: '100%',
+        marginTop: 2,
+    },
+    supportingSlot: {
+        width: 96,
+        minHeight: theme.typescale.bodyMedium.lineHeight * 2,
+    },
+    supportingText: {
+        ...theme.typescale.bodyMedium,
+        fontSize: 12,
+        lineHeight: 16,
+        color: theme.colors.onSurfaceVariant,
+        textAlign: 'left',
+        paddingHorizontal: theme.spacings['1'],
+    },
+    supportingTextError: {
+        color: theme.colors.error,
+    },
 }));
 
 const timePickerInputStylesDefault = StyleSheet.create(theme => ({
@@ -91,6 +115,10 @@ const timePickerInputStylesDefault = StyleSheet.create(theme => ({
         color: theme.colors.onSurface,
         borderRadius: theme.shapes.corner.small,
 
+        _web: {
+            outline: 'none',
+        },
+
         variants: {
             state: {
                 highlighted: {
@@ -100,6 +128,20 @@ const timePickerInputStylesDefault = StyleSheet.create(theme => ({
             },
         },
     },
+    keyboardInput: {
+        borderWidth: 2,
+        borderColor: 'transparent',
+    },
+    keyboardInputHighlighted: {
+        borderColor: theme.colors.primary,
+    },
+    inputError: {
+        backgroundColor: theme.colors.errorContainer,
+        color: theme.colors.onErrorContainer,
+    },
+    keyboardInputError: {
+        borderColor: theme.colors.error,
+    },
     button: {
         overflow: 'hidden',
         borderRadius: theme.shapes.corner.small,
@@ -253,6 +295,7 @@ const timePickerModalStylesDefault = StyleSheet.create(theme => ({
     timePickerContainer: {
         padding: theme.spacings['6'],
         paddingTop: theme.spacings['2'],
+        paddingBottom: 0,
     },
     footer: {
         flexDirection: 'row',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-native-molecules",
-    "version": "0.5.0-beta.18",
+    "version": "0.5.0-beta.19",
     "author": "Thet Aung <thetaung.dev@gmail.com>",
     "license": "MIT",
     "main": "index.ts",