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

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.17",
     "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);

package/components/DatePickerDocked/DatePickerDockedHeader.tsx

@@ -1,129 +0,0 @@
-import { add, format } from 'date-fns';
-import { memo, useCallback, useMemo } from 'react';
-import { View, type ViewStyle } from 'react-native';
-
-import { useDatePickerStore } from '../DatePickerInline/DatePickerContext';
-import type { DisableWeekDaysType } from '../DatePickerInline/dateUtils';
-import DayNames from '../DatePickerInline/DayNames';
-import HeaderItem from '../DatePickerInline/HeaderItem';
-import { dayNamesHeight } from '../DatePickerInline/utils';
-import { datePickerDockedHeaderStyles } from './utils';
-
-const buttonContainerHeight = 56;
-const buttonContainerMarginTop = 4;
-const buttonContainerMarginBottom = 8;
-
-export type CalendarHeaderProps = {
-    locale?: string;
-    disableWeekDays?: DisableWeekDaysType;
-    style?: ViewStyle;
-};
-
-function DatePickerDockedHeader({
-    locale = 'en',
-    disableWeekDays,
-    style: styleProp,
-}: CalendarHeaderProps) {
-    const [{ localDate, pickerType, startDateYear, endDateYear }, setStore] = useDatePickerStore(
-        state => ({
-            localDate: state.localDate,
-            pickerType: state.pickerType,
-            startDateYear: state.startDateYear,
-            endDateYear: state.endDateYear,
-        }),
-    );
-
-    // const componentStyles = useComponentStyles('DatePickerDocked_Header', styleProp);
-
-    const monthName = useMemo(() => {
-        return format(localDate, 'MMM');
-    }, [localDate]);
-
-    const { containerStyle, daysWrapperStyle } = useMemo(() => {
-        return {
-            containerStyle: [datePickerDockedHeaderStyles.datePickerHeader, styleProp],
-            daysWrapperStyle: datePickerDockedHeaderStyles.daysWrapperStyle,
-        };
-    }, [styleProp]);
-
-    const handlePressDropDown = useCallback(
-        (type: 'month' | 'year') => {
-            setStore(prev => ({
-                pickerType: prev.pickerType ? undefined : type,
-            }));
-        },
-        [setStore],
-    );
-
-    const isNotInRange = useCallback(
-        (date: Date) => {
-            const year = date.getFullYear();
-            const month = date.getMonth();
-            if (year < startDateYear || year > endDateYear || month > 11 || month < 0) {
-                return true;
-            }
-            return false;
-        },
-        [startDateYear, endDateYear],
-    );
-
-    const handleChange = useCallback(
-        (offset: number, type?: 'month' | 'year') => {
-            let newDate = localDate;
-            const prop = type === 'month' ? 'months' : 'years';
-            newDate = add(newDate, { [prop]: offset });
-
-            if (isNotInRange(newDate)) return;
-
-            setStore(() => ({
-                localDate: newDate,
-            }));
-        },
-        [isNotInRange, localDate, setStore],
-    );
-
-    const handleChangePrevious = useMemo(() => handleChange.bind(null, -1), [handleChange]);
-    const handleChangeNext = useMemo(() => handleChange.bind(null, 1), [handleChange]);
-
-    return (
-        <View>
-            <View style={containerStyle} pointerEvents={'box-none'}>
-                <HeaderItem
-                    selecting={!!pickerType}
-                    type="month"
-                    value={monthName}
-                    onNext={handleChangeNext}
-                    onPrev={handleChangePrevious}
-                    onPressDropdown={handlePressDropDown}
-                    pickerType={pickerType}
-                />
-                <HeaderItem
-                    selecting={!!pickerType}
-                    type="year"
-                    value={localDate.getFullYear()}
-                    onNext={handleChangeNext}
-                    onPrev={handleChangePrevious}
-                    onPressDropdown={handlePressDropDown}
-                    pickerType={pickerType}
-                />
-            </View>
-            <View style={daysWrapperStyle}>
-                <DayNames disableWeekDays={disableWeekDays} locale={locale} />
-            </View>
-        </View>
-    );
-}
-
-export function getCalendarHeaderHeight(scrollMode: 'horizontal' | 'vertical') {
-    if (scrollMode === 'horizontal') {
-        return (
-            buttonContainerHeight +
-            buttonContainerMarginTop +
-            buttonContainerMarginBottom +
-            dayNamesHeight
-        );
-    }
-    return dayNamesHeight;
-}
-
-export default memo(DatePickerDockedHeader);

package/components/DatePickerDocked/index.tsx

@@ -1,17 +0,0 @@
-import { getRegisteredComponentWithFallback } from '../../core';
-import DatePickerDockedDefault from './DatePickerDocked';
-
-export const DatePickerDocked = getRegisteredComponentWithFallback(
-    'DatePickerDocked',
-    DatePickerDockedDefault,
-);
-
-export type { DatePickerDockedProps } from './types';
-export {
-    datePickerDockedHeaderStyles,
-    datePickerDockedMonthItemStyles,
-    datePickerDockedMonthStyles,
-    datePickerDockedStyles,
-    datePickerHeaderItemStyles,
-    datePickerMonthPickerStyles,
-} from './utils';

package/components/DatePickerDocked/types.ts

@@ -1,11 +0,0 @@
-import type { ViewProps } from 'react-native';
-
-import type { DatePickerSingleProps } from '../DatePickerInline';
-
-export type DatePickerDockedProps = DatePickerSingleProps & {
-    triggerRef: any;
-    onToggle: () => void;
-    onClose: () => void;
-    isOpen: boolean;
-    popoverContentProps?: ViewProps;
-};