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

package/components/Popover/usePlatformMeasure.native.ts

@@ -0,0 +1,90 @@
+import { useCallback, useEffect, useLayoutEffect } from 'react';
+import { AppState, Dimensions, Platform } from 'react-native';
+
+import { popoverDefaultStyles } from './common';
+import type { UsePlatformMeasureArgs, UsePlatformMeasureResult } from './usePlatformMeasure';
+
+export const usePlatformMeasure = ({
+    triggerRef,
+    isOpen,
+    calculatedPosition,
+    calculateAndSetPosition,
+    targetLayoutRef,
+    triggerDimensions,
+}: UsePlatformMeasureArgs): UsePlatformMeasureResult => {
+    const measureTarget = useCallback(() => {
+        if (triggerRef?.current) {
+            triggerRef.current.measure(
+                (
+                    _fx: number,
+                    _fy: number,
+                    width: number,
+                    height: number,
+                    px: number,
+                    py: number,
+                ) => {
+                    if (width !== 0 || height !== 0) {
+                        const newLayout = { x: px, y: py, width, height };
+                        const changed =
+                            !targetLayoutRef.current ||
+                            targetLayoutRef.current.x !== newLayout.x ||
+                            targetLayoutRef.current.y !== newLayout.y ||
+                            targetLayoutRef.current.width !== newLayout.width ||
+                            targetLayoutRef.current.height !== newLayout.height;
+
+                        if (changed) {
+                            targetLayoutRef.current = newLayout;
+                            calculateAndSetPosition();
+                        }
+                    } else {
+                        targetLayoutRef.current = null;
+                        calculateAndSetPosition();
+                    }
+                },
+                () => {
+                    console.error('Failed to measure target element for Popover.');
+                    targetLayoutRef.current = null;
+                    calculateAndSetPosition();
+                },
+            );
+        } else {
+            targetLayoutRef.current = null;
+            calculateAndSetPosition();
+        }
+    }, [triggerRef, calculateAndSetPosition, targetLayoutRef]);
+
+    useLayoutEffect(() => {
+        if (isOpen) {
+            measureTarget();
+        }
+    }, [isOpen, measureTarget, triggerDimensions]);
+
+    useEffect(() => {
+        if (!isOpen) return;
+        const subscription = Dimensions.addEventListener('change', measureTarget);
+        return () => {
+            if (typeof subscription?.remove === 'function') {
+                subscription.remove();
+            }
+        };
+    }, [isOpen, measureTarget]);
+
+    useEffect(() => {
+        if (!isOpen || Platform.OS === 'web') return;
+        const handleAppStateChange = (nextAppState: string) => {
+            if (nextAppState === 'active') {
+                setTimeout(measureTarget, 50);
+            }
+        };
+        const subscription = AppState.addEventListener('change', handleAppStateChange);
+        return () => {
+            if (typeof subscription?.remove === 'function') {
+                subscription.remove();
+            }
+        };
+    }, [isOpen, measureTarget]);
+
+    return {
+        popoverStyle: (calculatedPosition ?? popoverDefaultStyles) as any,
+    };
+};

package/components/Popover/usePlatformMeasure.ts

@@ -0,0 +1,118 @@
+import { type RefObject, useCallback, useEffect, useLayoutEffect, useMemo } from 'react';
+import type { LayoutRectangle, View, ViewStyle } from 'react-native';
+
+import { popoverDefaultStyles } from './common';
+
+export type UsePlatformMeasureArgs = {
+    triggerRef: RefObject<View | any> | undefined;
+    isOpen: boolean;
+    onClose?: () => void;
+    calculatedPosition: ViewStyle | null;
+    calculateAndSetPosition: () => void;
+    targetLayoutRef: RefObject<LayoutRectangle | null>;
+    popoverRef: RefObject<View | null>;
+    triggerDimensions?: { width: number; height: number } | null;
+};
+
+export type UsePlatformMeasureResult = {
+    /** Platform-adjusted popover position (includes scroll offset on web) */
+    popoverStyle: ViewStyle;
+};
+
+export const usePlatformMeasure = ({
+    triggerRef,
+    isOpen,
+    onClose,
+    calculatedPosition,
+    calculateAndSetPosition,
+    targetLayoutRef,
+    popoverRef,
+    triggerDimensions,
+}: UsePlatformMeasureArgs): UsePlatformMeasureResult => {
+    const measureTarget = useCallback(() => {
+        if (triggerRef?.current) {
+            triggerRef.current.measureInWindow(
+                (x: number, y: number, width: number, height: number) => {
+                    if (width !== 0 || height !== 0) {
+                        const newLayout = { x, y, width, height };
+                        const changed =
+                            !targetLayoutRef.current ||
+                            targetLayoutRef.current.x !== newLayout.x ||
+                            targetLayoutRef.current.y !== newLayout.y ||
+                            targetLayoutRef.current.width !== newLayout.width ||
+                            targetLayoutRef.current.height !== newLayout.height;
+
+                        if (changed) {
+                            targetLayoutRef.current = newLayout;
+                            calculateAndSetPosition();
+                        }
+                    } else {
+                        targetLayoutRef.current = null;
+                        calculateAndSetPosition();
+                    }
+                },
+            );
+        } else {
+            targetLayoutRef.current = null;
+            calculateAndSetPosition();
+        }
+    }, [triggerRef, calculateAndSetPosition, targetLayoutRef]);
+
+    useLayoutEffect(() => {
+        if (isOpen) {
+            const timeoutId = setTimeout(measureTarget, 0);
+            return () => clearTimeout(timeoutId);
+        }
+        return;
+    }, [isOpen, measureTarget, triggerDimensions]);
+
+    useLayoutEffect(() => {
+        if (!isOpen) return;
+        const handleResize = () => {
+            if (triggerRef?.current && isOpen) {
+                window.requestAnimationFrame(measureTarget);
+            }
+        };
+        window.addEventListener('resize', handleResize);
+        window.addEventListener('scroll', handleResize, true);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+            window.removeEventListener('scroll', handleResize, true);
+        };
+    }, [isOpen, measureTarget, triggerRef]);
+
+    useEffect(() => {
+        if (!isOpen || !onClose) return;
+        const handleClickOutside = (event: MouseEvent) => {
+            const popoverElement = popoverRef.current as any as HTMLElement;
+            const targetElement = triggerRef?.current as any as HTMLElement;
+            if (
+                popoverElement &&
+                !popoverElement.contains(event.target as Node) &&
+                targetElement &&
+                !targetElement.contains(event.target as Node)
+            ) {
+                onClose();
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside, { capture: true });
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside, { capture: true });
+        };
+    }, [isOpen, onClose, popoverRef, triggerRef]);
+
+    const popoverStyle = useMemo(() => {
+        if (!calculatedPosition) return popoverDefaultStyles;
+
+        const scrollX = window.scrollX ?? window.pageXOffset ?? 0;
+        const scrollY = window.scrollY ?? window.pageYOffset ?? 0;
+
+        return {
+            ...calculatedPosition,
+            left: (calculatedPosition.left as number) + scrollX,
+            top: (calculatedPosition.top as number) + scrollY,
+        };
+    }, [calculatedPosition]);
+
+    return { popoverStyle };
+};

package/components/Popover/utils.ts

@@ -0,0 +1,34 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredComponentStylesWithFallback } from '../../core';
+import { popoverDefaultStyles } from './common';
+
+const popoverStylesDefault = StyleSheet.create(theme => ({
+    popoverContainer: {
+        ...popoverDefaultStyles,
+        backgroundColor: theme.colors.surface,
+        borderRadius: 4,
+        shadowColor: 'rgba(0, 0, 0, 1)',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: theme.dark ? 0.7 : 0.3,
+        shadowRadius: 10,
+        elevation: 5,
+        zIndex: 100,
+    },
+    overlay: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'transparent',
+        _web: {
+            cursor: 'default',
+        },
+    },
+}));
+
+export const popoverStyles = getRegisteredComponentStylesWithFallback(
+    'Popover',
+    popoverStylesDefault,
+);

package/components/Select/Select.tsx

@@ -19,6 +19,12 @@ import { IconButton } from '../IconButton';
 import { Popover } from '../Popover';
 import { Text } from '../Text';
 import { TextInput, type TextInputHandles, type TextInputProps } from '../TextInput';
+import {
+    SelectContextProvider,
+    SelectDropdownContextProvider,
+    useSelectContextValue,
+    useSelectDropdownContextValue,
+} from './context';
 import type {
     DefaultItemT,
     SelectContentProps,
@@ -31,14 +37,7 @@ import type {
     SelectTriggerProps,
     SelectValueProps,
 } from './types';
-import {
-    SelectContextProvider,
-    SelectDropdownContextProvider,
-    styles,
-    triggerStyles,
-    useSelectContextValue,
-    useSelectDropdownContextValue,
-} from './utils';
+import { styles, triggerStyles } from './utils';
 
 const emptyArr: unknown[] = [];
 

package/components/Select/context.tsx

@@ -0,0 +1,72 @@
+import type { View } from 'react-native';
+
+import { createFastContext } from '../../fast-context';
+import { registerPortalContext } from '../Portal';
+import type { DefaultItemT, SelectContextValue, SelectDropdownContextValue } from './types';
+
+// SelectContext - holds value, onAdd, onRemove with fast-context for optimized rendering
+const selectContextDefaultValue: SelectContextValue<DefaultItemT> = {
+    value: null,
+    multiple: false,
+    onAdd: () => {},
+    onRemove: () => {},
+    disabled: false,
+    error: false,
+    labelKey: 'label',
+    options: [],
+    searchQuery: '',
+    setSearchQuery: () => {},
+    filteredOptions: [],
+};
+
+const {
+    useStoreRef: useSelectStoreRef,
+    Provider: SelectContextProvider,
+    useContext: useSelectContext,
+    useContextValue: useSelectContextValue,
+    Context: SelectContext,
+} = createFastContext<SelectContextValue<DefaultItemT>>(selectContextDefaultValue, true);
+
+export {
+    SelectContext,
+    SelectContextProvider,
+    useSelectContext,
+    useSelectContextValue,
+    useSelectStoreRef,
+};
+
+// SelectDropdownContext - holds isOpen, onClose, triggerRef with fast-context
+export type SelectDropdownContextType = SelectDropdownContextValue & {
+    triggerRef: React.RefObject<View> | null;
+    contentRef: React.RefObject<any> | null;
+    triggerLayout: { width: number; height: number } | null;
+    setTriggerLayout: (layout: { width: number; height: number }) => void;
+};
+
+const selectDropdownContextDefaultValue: SelectDropdownContextType = {
+    isOpen: false,
+    onClose: () => {},
+    onOpen: () => {},
+    triggerRef: null,
+    contentRef: null,
+    triggerLayout: null,
+    setTriggerLayout: () => {},
+};
+
+const {
+    useStoreRef: useSelectDropdownStoreRef,
+    Provider: SelectDropdownContextProvider,
+    useContext: useSelectDropdownContext,
+    useContextValue: useSelectDropdownContextValue,
+    Context: SelectDropdownContext,
+} = createFastContext<SelectDropdownContextType>(selectDropdownContextDefaultValue, true);
+
+export {
+    SelectDropdownContext,
+    SelectDropdownContextProvider,
+    useSelectDropdownContext,
+    useSelectDropdownContextValue,
+    useSelectDropdownStoreRef,
+};
+
+registerPortalContext([SelectContext, SelectDropdownContext]);

package/components/Select/index.ts

@@ -3,5 +3,6 @@ import SelectDefault from './Select';
 
 export const Select = getRegisteredComponentWithFallback('Select', SelectDefault);
 
+export * from './context';
 export type * from './types';
 export * from './utils';

package/components/Select/utils.ts

@@ -1,77 +1,6 @@
-import type { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
 import { getRegisteredComponentStylesWithFallback } from '../../core';
-import { createFastContext } from '../../fast-context';
-import { registerPortalContext } from '../Portal';
-import type { DefaultItemT, SelectContextValue, SelectDropdownContextValue } from './types';
-
-// SelectContext - holds value, onAdd, onRemove with fast-context for optimized rendering
-const selectContextDefaultValue: SelectContextValue<DefaultItemT> = {
-    value: null,
-    multiple: false,
-    onAdd: () => {},
-    onRemove: () => {},
-    disabled: false,
-    error: false,
-    labelKey: 'label',
-    options: [],
-    searchQuery: '',
-    setSearchQuery: () => {},
-    filteredOptions: [],
-};
-
-const {
-    useStoreRef: useSelectStoreRef,
-    Provider: SelectContextProvider,
-    useContext: useSelectContext,
-    useContextValue: useSelectContextValue,
-    Context: SelectContext,
-} = createFastContext<SelectContextValue<DefaultItemT>>(selectContextDefaultValue, true);
-
-export {
-    SelectContext,
-    SelectContextProvider,
-    useSelectContext,
-    useSelectContextValue,
-    useSelectStoreRef,
-};
-
-// SelectDropdownContext - holds isOpen, onClose, triggerRef with fast-context
-export type SelectDropdownContextType = SelectDropdownContextValue & {
-    triggerRef: React.RefObject<View> | null;
-    contentRef: React.RefObject<any> | null;
-    triggerLayout: { width: number; height: number } | null;
-    setTriggerLayout: (layout: { width: number; height: number }) => void;
-};
-
-const selectDropdownContextDefaultValue: SelectDropdownContextType = {
-    isOpen: false,
-    onClose: () => {},
-    onOpen: () => {},
-    triggerRef: null,
-    contentRef: null,
-    triggerLayout: null,
-    setTriggerLayout: () => {},
-};
-
-const {
-    useStoreRef: useSelectDropdownStoreRef,
-    Provider: SelectDropdownContextProvider,
-    useContext: useSelectDropdownContext,
-    useContextValue: useSelectDropdownContextValue,
-    Context: SelectDropdownContext,
-} = createFastContext<SelectDropdownContextType>(selectDropdownContextDefaultValue, true);
-
-export {
-    SelectDropdownContext,
-    SelectDropdownContextProvider,
-    useSelectDropdownContext,
-    useSelectDropdownContextValue,
-    useSelectDropdownStoreRef,
-};
-
-registerPortalContext([SelectContext, SelectDropdownContext]);
 
 const triggerDefaultStyles = StyleSheet.create(theme => ({
     trigger: {

package/components/Slot/compose-refs.tsx

@@ -45,6 +45,8 @@ function composeRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {
                 }
             };
         }
+
+        return undefined;
     };
 }
 

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
+            {...rest}
+            ref={ref}
+            disabled={disabled}
+            value={formatted}
+            placeholder={timeFormat[is24Hour ? '24' : '12'].format}
+            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,
+    };
+}