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

package/components/TimePicker/TimeInputs.tsx

@@ -1,11 +1,12 @@
 // @typescript-eslint/no-unused-vars
 // WORK IN PROGRESS
 
-import { memo, useCallback, useRef } from 'react';
+import { useLatest } from '@react-native-molecules/utils/hooks';
+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 {
@@ -21,6 +22,10 @@ type Props = {
     focused: PossibleClockTypes;
     hours: number;
     minutes: number;
+    hourLabel: string;
+    minuteLabel: string;
+    hourErrorText: string;
+    minuteErrorText: string;
     onFocusInput: (type: PossibleClockTypes) => any;
     onChange: (hoursMinutesAndFocused: {
         hours: number;
@@ -33,6 +38,10 @@ type Props = {
 function TimeInputs({
     hours,
     minutes,
+    hourLabel,
+    minuteLabel,
+    hourErrorText,
+    minuteErrorText,
     onFocusInput,
     focused,
     inputType,
@@ -41,6 +50,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 +61,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 +83,7 @@ function TimeInputs({
     }, []);
 
     const minutesRef = useLatest(minutes);
+    const isPm = hours >= 12;
     const onChangeHours = useCallback(
         (newHours: number) => {
             onChange({
@@ -73,74 +96,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 : hourLabel}
+                        </Text>
+                    </View>
+                    <View style={timePickerInputsStyles.hoursAndMinutesSeparator} />
+                    <View style={timePickerInputsStyles.supportingSlot}>
+                        <Text
+                            style={[
+                                timePickerInputsStyles.supportingText,
+                                minuteError ? timePickerInputsStyles.supportingTextError : null,
+                            ]}>
+                            {minuteError ? minuteErrorText : minuteLabel}
+                        </Text>
+                    </View>
+                    {!is24Hour && (
+                        <View style={timePickerInputsStyles.spaceBetweenInputsAndSwitcher} />
+                    )}
+                </View>
+            ) : null}
         </View>
     );
 }

package/components/TimePicker/TimePicker.tsx

@@ -1,9 +1,12 @@
+import { useControlledValue } from '@react-native-molecules/utils/hooks';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { type StyleProp, View, type ViewStyle } from 'react-native';
 
-import { useControlledValue } from '../../hooks';
+import { getRegisteredComponentWithFallback } from '../../core';
 import { format, parse } from '../../utils/date-fns';
+import { useOptionalDatePickerContext } from '../DatePicker/context';
 import AnalogClock from './AnalogClock';
+import { useOptionalTimePickerContext } from './context';
 import { DisplayModeContext } from './DisplayModeContext';
 import TimeInputs from './TimeInputs';
 import {
@@ -26,10 +29,10 @@ type onChangeFunc = ({
 
 export type Props = {
     /**
-     * hh:mm format
+     * hh:mm format. Optional when mounted inside a DatePickerProvider — the provider's Date is read instead.
      * */
-    time: string;
-    onTimeChange: (params: { time: string; focused?: undefined | PossibleClockTypes }) => any;
+    time?: string;
+    onTimeChange?: (params: { time: string; focused?: undefined | PossibleClockTypes }) => any;
 
     is24Hour?: boolean;
     inputType?: PossibleInputTypes;
@@ -38,18 +41,64 @@ export type Props = {
     onFocusInput?: (type: PossibleClockTypes) => any;
     isLandscape?: boolean;
     style?: StyleProp<ViewStyle>;
+    hourLabel?: string;
+    minuteLabel?: string;
+    hourErrorText?: string;
+    minuteErrorText?: string;
+};
+
+const toTimeString = (value: Date | null | undefined): 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 | undefined, 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 ?? null;
+    const next = base ? new Date(base) : new Date();
+    next.setHours(h, m, 0, 0);
+    return next;
 };
 
 function TimePicker({
-    is24Hour = false,
-    time,
+    time: timeProp,
+    onTimeChange: onTimeChangeProp,
+    is24Hour: is24HourProp,
     focused: focusedProp,
     onFocusInput: onFocusInputProp,
-    inputType = 'keyboard',
-    onTimeChange,
+    inputType: inputTypeProp,
     isLandscape = false,
     style,
+    hourLabel = 'Hour',
+    minuteLabel = 'Minute',
+    hourErrorText,
+    minuteErrorText = 'Minute must be 0-59',
 }: Props) {
+    const ctx = useOptionalDatePickerContext();
+    const tpCtx = useOptionalTimePickerContext();
+
+    const ctxDate =
+        ctx && ctx.draftValue && typeof ctx.draftValue === 'object' && 'start' in ctx.draftValue
+            ? null
+            : (ctx?.draftValue as Date | null | undefined);
+
+    const time = timeProp ?? toTimeString(ctxDate);
+    const is24Hour = is24HourProp ?? ctx?.is24Hour ?? false;
+    const inputType = inputTypeProp ?? tpCtx?.inputType ?? (ctx ? 'picker' : 'keyboard');
+
+    const onTimeChange = useMemo(
+        () =>
+            onTimeChangeProp ??
+            ((params: { time: string; focused?: undefined | PossibleClockTypes }) => {
+                if (!ctx) return;
+                ctx.setValue(applyTimeToDate(ctxDate, params.time));
+            }),
+        [onTimeChangeProp, ctx, ctxDate],
+    );
+
     const { hours, minutes } = useMemo(() => {
         const date = time ? parse(time, 'HH:mm', new Date()) : new Date();
 
@@ -62,7 +111,6 @@ function TimePicker({
         onChange: onFocusInputProp,
     });
 
-    // Initialize display Mode according the hours value
     const [displayMode, setDisplayMode] = useState<'AM' | 'PM' | undefined>(() =>
         !is24Hour ? (hours >= 12 ? 'PM' : 'AM') : undefined,
     );
@@ -81,6 +129,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,
@@ -89,7 +142,7 @@ function TimePicker({
                 focused: params.focused,
             });
         },
-        [displayMode, onTimeChange],
+        [displayMode, onFocusInput, onTimeChange],
     );
 
     const memoizedValue = useMemo(
@@ -108,6 +161,12 @@ function TimePicker({
                     onChange={onChange}
                     onFocusInput={onFocusInput}
                     focused={focused}
+                    hourLabel={hourLabel}
+                    minuteLabel={minuteLabel}
+                    hourErrorText={
+                        hourErrorText ?? (is24Hour ? 'Hour must be 0-23' : 'Hour must be 1-12')
+                    }
+                    minuteErrorText={minuteErrorText}
                 />
                 <>
                     {inputType === inputTypes.picker ? (
@@ -127,4 +186,8 @@ function TimePicker({
     );
 }
 
-export default memo(TimePicker);
+const TimePickerDefault = memo(TimePicker);
+
+export default TimePickerDefault;
+
+export const TimePickerClock = getRegisteredComponentWithFallback('TimePicker', TimePickerDefault);

package/components/TimePicker/TimePickerModal.tsx

@@ -0,0 +1,186 @@
+import { useControlledValue } from '@react-native-molecules/utils/hooks';
+import type { ReactNode } from 'react';
+import { memo, useMemo } from 'react';
+import { KeyboardAvoidingView, Platform, View } from 'react-native';
+
+import { getRegisteredComponentWithFallback } from '../../core';
+import { DatePickerActions, DatePickerProvider } from '../DatePicker';
+import type {
+    DatePickerContextType,
+    DatePickerLocale,
+    DatePickerValue,
+} from '../DatePicker/context';
+import {
+    DatePickerContext,
+    useDatePickerContext,
+    useOptionalDatePickerContext,
+    withDraftLayer,
+} from '../DatePicker/context';
+import { IconButton } from '../IconButton';
+import { Modal, type ModalProps } from '../Modal';
+import { Portal } from '../Portal';
+import { Text } from '../Text';
+import { TimePickerContext } from './context';
+import { TimePickerClock } from './TimePicker';
+import {
+    getTimeInputTypeIcon,
+    inputTypes,
+    type PossibleInputTypes,
+    reverseInputTypes,
+} from './timeUtils';
+import { timePickerModalStyles as styles } from './utils';
+
+export type TimePickerModalProps = Omit<ModalProps, 'children' | 'isOpen' | 'onClose'> & {
+    children?: ReactNode;
+    isOpen?: boolean;
+    onClose?: () => void;
+    value?: DatePickerValue;
+    onChange?: (value: DatePickerValue) => void;
+    locale?: DatePickerLocale;
+    is24Hour?: boolean;
+    inputType?: PossibleInputTypes;
+    defaultInputType?: PossibleInputTypes;
+    onInputTypeChange?: (next: PossibleInputTypes) => void;
+    label?: string;
+    uppercase?: boolean;
+    cancelLabel?: string;
+    confirmLabel?: string;
+    keyboardIcon?: string;
+    clockIcon?: string;
+    /** Override the surface default draft mode. Modal defaults to `true` (staged commit). */
+    draft?: boolean;
+};
+
+type BodyProps = Omit<
+    TimePickerModalProps,
+    'isOpen' | 'onClose' | 'value' | 'onChange' | 'is24Hour' | 'draft'
+>;
+
+function TimePickerModalBody({
+    children,
+    style,
+    label = 'Select time',
+    uppercase = false,
+    cancelLabel = 'Cancel',
+    confirmLabel = 'OK',
+    keyboardIcon = 'keyboard-outline',
+    clockIcon = 'clock-outline',
+    inputType: inputTypeProp,
+    defaultInputType = inputTypes.picker,
+    onInputTypeChange,
+    ...rest
+}: BodyProps) {
+    const ctx = useDatePickerContext();
+    const [inputType, setInputType] = useControlledValue<PossibleInputTypes>({
+        value: inputTypeProp,
+        defaultValue: defaultInputType,
+        onChange: onInputTypeChange,
+    });
+
+    const tpContextValue = useMemo(() => ({ inputType, setInputType }), [inputType, setInputType]);
+
+    const modalStyle = useMemo(() => [styles.modalContent, style], [style]);
+
+    return (
+        <Portal>
+            <TimePickerContext value={tpContextValue}>
+                <Modal {...rest} isOpen={ctx.open} onClose={ctx.cancel} style={modalStyle}>
+                    <KeyboardAvoidingView
+                        style={styles.keyboardView}
+                        behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
+                        <View style={styles.frame}>
+                            <View style={styles.labelContainer}>
+                                <Text style={styles.label}>
+                                    {uppercase ? label.toUpperCase() : label}
+                                </Text>
+                            </View>
+                            <View style={styles.timePickerContainer}>
+                                {children ?? <TimePickerClock />}
+                            </View>
+                            <View style={styles.footer}>
+                                <IconButton
+                                    name={getTimeInputTypeIcon(inputType, {
+                                        keyboard: keyboardIcon,
+                                        picker: clockIcon,
+                                    })}
+                                    onPress={() => setInputType(reverseInputTypes[inputType])}
+                                    style={styles.inputTypeToggle}
+                                    accessibilityLabel="toggle keyboard"
+                                />
+                                <View style={styles.fill} />
+                                <DatePickerActions
+                                    cancelLabel={cancelLabel}
+                                    confirmLabel={confirmLabel}
+                                />
+                            </View>
+                        </View>
+                    </KeyboardAvoidingView>
+                </Modal>
+            </TimePickerContext>
+        </Portal>
+    );
+}
+
+function TimePickerModalLayer({
+    base,
+    draft: draftProp,
+    ...rest
+}: BodyProps & {
+    base: DatePickerContextType;
+    draft: boolean | undefined;
+}) {
+    const effectiveDraft = draftProp ?? base.providerDraft ?? true;
+    const ctx = useMemo(() => withDraftLayer(base, effectiveDraft), [base, effectiveDraft]);
+    if (!base.open) return null;
+    return (
+        <DatePickerContext value={ctx}>
+            <TimePickerModalBody {...rest} />
+        </DatePickerContext>
+    );
+}
+
+function TimePickerModalAdapter({ draft, ...rest }: BodyProps & { draft: boolean | undefined }) {
+    const base = useDatePickerContext();
+    return <TimePickerModalLayer base={base} draft={draft} {...rest} />;
+}
+
+const TimePickerModalDefault = memo(
+    ({
+        isOpen: isOpenProp,
+        onClose: onCloseProp,
+        value: valueProp,
+        onChange: onChangeProp,
+        locale,
+        is24Hour,
+        draft: draftProp,
+        ...rest
+    }: TimePickerModalProps) => {
+        const outer = useOptionalDatePickerContext();
+
+        if (outer) {
+            return <TimePickerModalLayer base={outer} draft={draftProp} {...rest} />;
+        }
+
+        return (
+            <DatePickerProvider
+                mode="time"
+                value={valueProp}
+                onChange={onChangeProp}
+                open={isOpenProp}
+                locale={locale}
+                onOpenChange={next => {
+                    if (!next) onCloseProp?.();
+                }}
+                is24Hour={is24Hour}>
+                <TimePickerModalAdapter draft={draftProp} {...rest} />
+            </DatePickerProvider>
+        );
+    },
+);
+
+export const TimePickerModal = getRegisteredComponentWithFallback(
+    'TimePickerModal',
+    TimePickerModalDefault,
+);
+
+export default TimePickerModal;

package/components/TimePicker/context.tsx

@@ -0,0 +1,17 @@
+import { createContext, useContext } from 'react';
+
+import { registerPortalContext } from '../Portal';
+import type { PossibleInputTypes } from './timeUtils';
+
+export type TimePickerContextType = {
+    inputType: PossibleInputTypes;
+    setInputType: (next: PossibleInputTypes) => void;
+};
+
+export const TimePickerContext = createContext<TimePickerContextType | null>(null);
+
+export function useOptionalTimePickerContext(): TimePickerContextType | null {
+    return useContext(TimePickerContext);
+}
+
+registerPortalContext(TimePickerContext);

package/components/TimePicker/index.tsx

@@ -1,9 +1,20 @@
-import { getRegisteredComponentWithFallback } from '../../core';
-import TimePickerDefault from './TimePicker';
+import { DatePickerProvider, DatePickerTrigger } from '../DatePicker';
+import { TimePickerClock } from './TimePicker';
+import { TimePickerModal } from './TimePickerModal';
 
-export const TimePicker = getRegisteredComponentWithFallback('TimePicker', TimePickerDefault);
+export const TimePicker = {
+    Provider: DatePickerProvider,
+    Trigger: DatePickerTrigger,
+    Clock: TimePickerClock,
+    Modal: TimePickerModal,
+};
 
+export type { TimePickerContextType } from './context';
+export { TimePickerContext, useOptionalTimePickerContext } from './context';
 export type { Props as TimePickerProps } from './TimePicker';
+export { TimePickerClock } from './TimePicker';
+export type { TimePickerModalProps } from './TimePickerModal';
+export { TimePickerModal } from './TimePickerModal';
 export {
     timePickerAmPmSwitcherStyles,
     timePickerClockHoursStyles,
@@ -11,5 +22,6 @@ export {
     timePickerClockStyles,
     timePickerInputsStyles,
     timePickerInputStyles,
+    timePickerModalStyles,
     timePickerStyles,
 } from './utils';