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

package/components/Popover/Popover.native.tsx

@@ -1,5 +1,5 @@
 import { Fragment, memo, useCallback, useEffect, useLayoutEffect, useRef } from 'react';
-import { AppState, Dimensions, Platform, Pressable, StyleSheet, View } from 'react-native';
+import { AppState, Dimensions, Platform, Pressable, View } from 'react-native';
 import { ScopedTheme, UnistylesRuntime } from 'react-native-unistyles';
 
 import { Portal } from '../Portal';
@@ -10,6 +10,7 @@ import {
     useArrowStyles,
     usePopover,
 } from './common';
+import { popoverStyles } from './utils';
 
 const Popover = ({
     triggerRef,
@@ -145,12 +146,12 @@ const Popover = ({
                 {...(inverted
                     ? { name: UnistylesRuntime.themeName === 'dark' ? 'light' : 'dark' }
                     : ({} as { name: 'light' }))}>
-                <Pressable onPress={handleOutsidePress} style={styles.overlay} />
+                <Pressable onPress={handleOutsidePress} style={popoverStyles.overlay} />
 
                 <View
                     ref={popoverRef}
                     onLayout={handlePopoverLayout}
-                    style={[styles.popoverContainer, style, popoverStyle]}
+                    style={[popoverStyles.popoverContainer, style, popoverStyle]}
                     {...rest}>
                     {children}
                     {showArrow && popoverStyle.opacity === 1 && <View style={arrowStyles} />}
@@ -160,26 +161,4 @@ const Popover = ({
     );
 };
 
-const styles = StyleSheet.create({
-    overlay: {
-        position: 'absolute',
-        top: 0,
-        bottom: 0,
-        left: 0,
-        right: 0,
-        backgroundColor: 'transparent',
-    },
-    popoverContainer: {
-        ...popoverDefaultStyles,
-        backgroundColor: 'white',
-        borderRadius: 4,
-        shadowColor: 'rgba(0, 0, 0, 1)',
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.3,
-        shadowRadius: 3.84,
-        elevation: 5,
-        zIndex: 100,
-    },
-});
-
 export default memo(Popover);

package/components/Popover/Popover.tsx

@@ -1,6 +1,6 @@
 import { Fragment, memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
 import { Pressable, View } from 'react-native';
-import { ScopedTheme, StyleSheet, UnistylesRuntime } from 'react-native-unistyles';
+import { ScopedTheme, UnistylesRuntime } from 'react-native-unistyles';
 
 import { Portal } from '../Portal';
 import {
@@ -10,6 +10,7 @@ import {
     useArrowStyles,
     usePopover,
 } from './common';
+import { popoverStyles } from './utils';
 
 const Popover = ({
     triggerRef,
@@ -156,11 +157,11 @@ const Popover = ({
         <Portal>
             <Wrapper {...(WrapperProps as any)}>
                 {withBackdropDismiss && (
-                    <Pressable style={[styles.backdrop, backdropStyles]} onPress={onClose} />
+                    <Pressable style={[popoverStyles.backdrop, backdropStyles]} onPress={onClose} />
                 )}
                 <View
                     onLayout={handlePopoverLayout}
-                    style={[styles.popoverContainer, style, popoverStyle]}
+                    style={[popoverStyles.popoverContainer, style, popoverStyle]}
                     {...{ dataSet }}
                     {...rest}
                     ref={popoverRef}>
@@ -172,27 +173,4 @@ const Popover = ({
     );
 };
 
-const styles = 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,
-        zIndex: 100,
-    },
-    backdrop: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        _web: {
-            cursor: 'default',
-        },
-    },
-}));
-
 export default memo(Popover);

package/components/Popover/utils.ts

@@ -0,0 +1,41 @@
+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,
+    },
+    backdrop: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        _web: {
+            cursor: 'default',
+        },
+    },
+    overlay: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        backgroundColor: 'transparent',
+    },
+}));
+
+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,
+    };
+}

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',
+    );
+};