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

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/TimePicker.tsx

@@ -1,9 +1,12 @@
 import { memo, useCallback, useMemo, useState } from 'react';
 import { type StyleProp, View, type ViewStyle } from 'react-native';
 
+import { getRegisteredComponentWithFallback } from '../../core';
 import { useControlledValue } from '../../hooks';
 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;
@@ -40,16 +43,54 @@ export type Props = {
     style?: StyleProp<ViewStyle>;
 };
 
+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,
 }: 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 +103,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,
     );
@@ -127,4 +167,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 type { ReactNode } from 'react';
+import { memo, useMemo } from 'react';
+import { KeyboardAvoidingView, Platform, View } from 'react-native';
+
+import { getRegisteredComponentWithFallback } from '../../core';
+import { useControlledValue } from '../../hooks';
+import { DatePickerActions, DatePickerProvider } from '../DatePicker';
+import type { DatePickerContextType, 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;
+    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,
+    bodyProps,
+}: {
+    base: DatePickerContextType;
+    draft: boolean | undefined;
+    bodyProps: BodyProps;
+}) {
+    const effectiveDraft = draftProp ?? base.providerDraft ?? true;
+    const ctx = useMemo(() => withDraftLayer(base, effectiveDraft), [base, effectiveDraft]);
+    if (!base.open) return null;
+    return (
+        <DatePickerContext value={ctx}>
+            <TimePickerModalBody {...bodyProps} />
+        </DatePickerContext>
+    );
+}
+
+function TimePickerModalAdapter({
+    draft,
+    bodyProps,
+}: {
+    draft: boolean | undefined;
+    bodyProps: BodyProps;
+}) {
+    const base = useDatePickerContext();
+    return <TimePickerModalLayer base={base} draft={draft} bodyProps={bodyProps} />;
+}
+
+const TimePickerModalDefault = memo(
+    ({
+        isOpen: isOpenProp,
+        onClose: onCloseProp,
+        value: valueProp,
+        onChange: onChangeProp,
+        is24Hour,
+        draft: draftProp,
+        ...rest
+    }: TimePickerModalProps) => {
+        const outer = useOptionalDatePickerContext();
+
+        if (outer) {
+            return <TimePickerModalLayer base={outer} draft={draftProp} bodyProps={rest} />;
+        }
+
+        return (
+            <DatePickerProvider
+                mode="time"
+                value={valueProp}
+                onChange={onChangeProp}
+                open={isOpenProp}
+                onOpenChange={next => {
+                    if (!next) onCloseProp?.();
+                }}
+                is24Hour={is24Hour}>
+                <TimePickerModalAdapter draft={draftProp} bodyProps={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';

package/components/TimePicker/utils.ts

@@ -218,6 +218,52 @@ const timePickerClockMinutesStylesDefault = StyleSheet.create(theme => ({
     textWhite: { color: '#fff' },
 }));
 
+const timePickerModalStylesDefault = StyleSheet.create(theme => ({
+    keyboardView: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        flex: 1,
+    },
+    modalContent: {
+        minWidth: 287,
+        width: undefined,
+        maxWidth: undefined,
+        flex: undefined,
+        borderRadius: theme.shapes.corner.extraLarge,
+        overflow: 'hidden',
+    },
+    frame: {
+        backgroundColor: theme.colors.surface,
+    },
+    labelContainer: {
+        minHeight: 56,
+        justifyContent: 'flex-end',
+        paddingLeft: theme.spacings['6'],
+        paddingRight: theme.spacings['6'],
+        paddingTop: theme.spacings['6'],
+        paddingBottom: theme.spacings['2'],
+        alignSelf: 'flex-start',
+    },
+    label: {
+        letterSpacing: 1,
+        fontSize: theme.typescale.labelLarge.fontSize,
+        color: theme.colors.onSurface,
+        fontWeight: theme.typescale.labelLarge.fontWeight,
+    },
+    timePickerContainer: {
+        padding: theme.spacings['6'],
+        paddingTop: theme.spacings['2'],
+    },
+    footer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: theme.spacings['2'],
+        width: '100%',
+    },
+    inputTypeToggle: { margin: theme.spacings['1'] },
+    fill: { flex: 1 },
+}));
+
 const timePickerAmPmSwitcherStylesDefault = StyleSheet.create(theme => ({
     container: {
         width: 50,
@@ -291,3 +337,7 @@ export const timePickerAmPmSwitcherStyles = getRegisteredComponentStylesWithFall
     'TimePicker_AmPmSwitcher',
     timePickerAmPmSwitcherStylesDefault,
 );
+export const timePickerModalStyles = getRegisteredComponentStylesWithFallback(
+    'TimePickerModal',
+    timePickerModalStylesDefault,
+);

package/hooks/useActionState.tsx

@@ -1,4 +1,4 @@
-import { type RefObject, useRef } from 'react';
+import { type RefObject, useCallback, useRef } from 'react';
 
 import { useActive } from './useActive';
 import { useFocus } from './useFocus';
@@ -14,16 +14,27 @@ export type UseActionStateProps = {
 export const useActionState = (
     props: UseActionStateProps & { ref?: RefObject<any> | React.ForwardedRef<any> } = {},
 ) => {
-    const ref = useRef(null);
-    const actionsRef = (
-        (props.ref as any)?.current === undefined ? ref : props.ref
-    ) as RefObject<any>;
+    const internalRef = useRef(null);
+    const externalRef = props.ref;
+
+    const actionsRef = useCallback(
+        (node: any) => {
+            internalRef.current = node;
+            if (typeof externalRef === 'function') {
+                externalRef(node);
+            } else if (externalRef) {
+                (externalRef as RefObject<any>).current = node;
+            }
+        },
+        [externalRef],
+    ) as unknown as RefObject<any>;
+
     const hovered =
-        useHover(actionsRef, props.actionsToListen?.includes('hover')) || !!props.hovered;
+        useHover(internalRef, props.actionsToListen?.includes('hover')) || !!props.hovered;
     const pressed =
-        useActive(actionsRef, props.actionsToListen?.includes('press')) || !!props.pressed;
+        useActive(internalRef, props.actionsToListen?.includes('press')) || !!props.pressed;
     const focused =
-        useFocus(actionsRef, props.actionsToListen?.includes('focus')) || !!props.focused;
+        useFocus(internalRef, props.actionsToListen?.includes('focus')) || !!props.focused;
 
     return {
         actionsRef,

package/package.json

@@ -1,9 +1,14 @@
 {
     "name": "react-native-molecules",
-    "version": "0.5.0-beta.16",
+    "version": "0.5.0-beta.18",
     "author": "Thet Aung <thetaung.dev@gmail.com>",
     "license": "MIT",
     "main": "index.ts",
+    "sideEffects": [
+        "components/DatePicker/context.tsx",
+        "components/Select/context.tsx",
+        "components/TimePicker/context.tsx"
+    ],
     "files": [
         "components",
         "context-bridge",

package/components/DatePickerDocked/DatePickerDocked.tsx

@@ -1,30 +0,0 @@
-import { memo } from 'react';
-
-import DatePickerInlineBase from '../DatePickerInline/DatePickerInlineBase';
-import { Popover } from '../Popover';
-import DatePickerDockedHeader from './DatePickerDockedHeader';
-import type { DatePickerDockedProps } from './types';
-import { datePickerDockedMonthStyles } from './utils';
-
-const DatePickerDocked = (props: DatePickerDockedProps) => {
-    const { triggerRef, isOpen, onToggle, onClose } = props;
-
-    return (
-        <Popover
-            triggerRef={triggerRef}
-            isOpen={isOpen}
-            onClose={onClose}
-            {...props.popoverContentProps}>
-            <DatePickerInlineBase
-                {...props}
-                // TODO - fix ts issues
-                // @ts-ignore
-                HeaderComponent={DatePickerDockedHeader}
-                onToggle={onToggle}
-                monthStyle={datePickerDockedMonthStyles}
-            />
-        </Popover>
-    );
-};
-
-export default memo(DatePickerDocked);