react-native-molecules 0.5.0-beta.2 → 0.5.0-beta.20

package/components/DatePickerModal/utils.ts

@@ -1,122 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-
-import { getRegisteredComponentStylesWithFallback } from '../../core';
-
-const datePickerModalStylesDefault = StyleSheet.create(theme => ({
-    header: {
-        backgroundColor: theme.colors.primary,
-    },
-}));
-
-const datePickerModalHeaderStylesDefault = StyleSheet.create(theme => ({
-    root: {
-        color: theme.colors.onPrimary,
-    },
-    animated: {
-        paddingBottom: theme.spacings['0'],
-        elevation: 4,
-    },
-    safeContent: {
-        paddingBottom: theme.spacings['0'],
-
-        variants: {
-            state: {
-                disableSafeTop: {
-                    paddingTop: 0,
-                },
-            },
-        },
-    },
-    safeContentNoTop: {
-        paddingTop: theme.spacings['0'],
-    },
-    appbarHeader: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        paddingHorizontal: theme.spacings['2'],
-        paddingVertical: theme.spacings['2'],
-        elevation: 0,
-        backgroundColor: 'transparent',
-    },
-}));
-
-const datePickerModalContentHeaderStylesDefault = StyleSheet.create(theme => ({
-    root: {
-        color: theme.colors.onPrimary,
-    },
-
-    fill: {
-        flex: 1,
-    },
-    header: {
-        height: 75,
-        alignItems: 'center',
-        flexDirection: 'row',
-        paddingLeft: theme.spacings['6'],
-        paddingRight: theme.spacings['3'],
-    },
-    headerContentContainer: {
-        marginTop: theme.spacings['1'],
-        flexDirection: 'row',
-        alignItems: 'center',
-    },
-    label: {
-        color: theme.colors.onPrimary,
-        letterSpacing: 1,
-        fontSize: theme.typescale.bodyMedium.fontSize,
-    },
-    headerText: {
-        fontSize: theme.typescale.bodyMedium.fontSize,
-        color: theme.colors.onPrimary,
-    },
-    headerSeparator: {
-        fontSize: theme.typescale.bodyMedium.fontSize,
-        paddingLeft: theme.spacings['2'],
-        paddingRight: theme.spacings['2'],
-        color: theme.colors.onPrimary,
-    },
-    icon: {
-        color: theme.colors.onPrimary,
-    },
-}));
-
-const datePickerModalHeaderBackgroundStylesDefault = StyleSheet.create(theme => ({
-    header: {
-        backgroundColor: theme.colors.primary,
-        paddingBottom: theme.spacings['0'],
-        elevation: 4,
-    },
-    safeContent: {
-        paddingBottom: theme.spacings['0'],
-    },
-}));
-
-const datePickerModalEditStylesDefault = StyleSheet.create(theme => ({
-    container: { padding: theme.spacings['3'] },
-    inner: { flexDirection: 'row' },
-    inputContainer: { flex: 1 },
-    input: { flex: 1 },
-    separator: { width: 12 },
-}));
-
-export const datePickerModalStyles = getRegisteredComponentStylesWithFallback(
-    'DatePickerModal',
-    datePickerModalStylesDefault,
-);
-export const datePickerModalHeaderStyles = getRegisteredComponentStylesWithFallback(
-    'DatePickerModal_Header',
-    datePickerModalHeaderStylesDefault,
-);
-export const datePickerModalContentHeaderStyles = getRegisteredComponentStylesWithFallback(
-    'DatePickerModal_ContentHeader',
-    datePickerModalContentHeaderStylesDefault,
-);
-export const datePickerModalHeaderBackgroundStyles = getRegisteredComponentStylesWithFallback(
-    'DatePickerModal_HeaderBackground',
-    datePickerModalHeaderBackgroundStylesDefault,
-);
-export const datePickerModalEditStyles = getRegisteredComponentStylesWithFallback(
-    'DatePickerModal_Edit',
-    datePickerModalEditStylesDefault,
-);

package/components/DateTimePicker/DateTimePicker.tsx

@@ -1,172 +0,0 @@
-import { format, parse, set } from 'date-fns';
-import {
-    type ComponentType,
-    forwardRef,
-    memo,
-    type RefObject,
-    useCallback,
-    useEffect,
-    useImperativeHandle,
-    useMemo,
-    useRef,
-} from 'react';
-import type { ViewProps, ViewStyle } from 'react-native';
-
-import { useControlledValue } from '../../hooks';
-import { isValid } from '../../utils/date-fns';
-import { DatePickerInput, type DatePickerInputProps } from '../DatePickerInput';
-import { ElementGroup } from '../ElementGroup';
-import type { TextInputHandles } from '../TextInput/TextInput';
-import { sanitizeTimeString, TimePickerField, type TimePickerFieldProps } from '../TimePickerField';
-
-export type Props = Omit<ViewProps, 'style'> & {
-    is24Hour?: boolean;
-    date?: Date | null;
-    onChange?: (date: Date | null) => void;
-    defaultValue?: Date | null;
-    timePickerFieldProps?: Omit<
-        Partial<TimePickerFieldProps>,
-        'value' | 'onChangeText' | 'date' | 'onTimeChange'
-    >;
-    datePickerInputProps?: Omit<Partial<DatePickerInputProps>, 'value' | 'onChange'>;
-    datePickerInputRef?: RefObject<TextInputHandles | null>;
-    timePickerInputRef?: RefObject<TextInputHandles | null>;
-    Wrapper?: ComponentType<any>;
-    style?: ViewStyle;
-};
-
-const emptyObj = {};
-
-const normalizeDateWithCurrentTime = (specificDate: Date) => {
-    const date = new Date();
-
-    return set(specificDate, {
-        hours: date.getHours(),
-        minutes: date.getHours(),
-        seconds: date.getSeconds(),
-    });
-};
-
-const DateTimePicker = (
-    {
-        is24Hour = false,
-        date: dateProp,
-        onChange: onChangeProp,
-        defaultValue,
-        datePickerInputProps = emptyObj,
-        timePickerFieldProps = emptyObj,
-        style,
-        testID,
-        datePickerInputRef: _datePickerInputRef,
-        timePickerInputRef: _timePickerInputRef,
-        Wrapper: _WrapperProp,
-        ...rest
-    }: Props,
-    ref: any,
-) => {
-    const Wrapper = _WrapperProp ?? ElementGroup;
-
-    const containerRef = useRef(null);
-    const datePickerInputRef = useRef<TextInputHandles>(null);
-    const timePickerInputRef = useRef<TextInputHandles>(null);
-
-    const [date, onChange] = useControlledValue<Date | null>({
-        value: dateProp,
-        defaultValue,
-        onChange: onChangeProp,
-    });
-
-    const timeString = useMemo(() => (date && isValid(date) ? format(date, 'HH:mm') : ''), [date]);
-
-    const timeStringRef = useRef(timeString);
-
-    const onDateChange = useCallback(
-        (newDate: Date | null) => {
-            if (newDate === date || (!isValid(newDate) && !isValid(date))) return;
-
-            if (!newDate) {
-                onChange(null);
-
-                return;
-            }
-
-            const addTimeString = (_date: Date) =>
-                timeStringRef.current
-                    ? parse(timeStringRef.current ?? '00:00', 'HH:mm', _date)
-                    : _date;
-
-            if (!date) {
-                onChange(addTimeString(normalizeDateWithCurrentTime(newDate)));
-                return;
-            }
-
-            if (!isValid(newDate)) {
-                onChange(date);
-                return;
-            }
-
-            const [day, month, year] = format(newDate, 'dd/MM/yyyy').split('/');
-
-            onChange(addTimeString(set(date, { date: +day, month: +month - 1, year: +year })));
-        },
-        [date, onChange],
-    );
-
-    const onTimeChange = useCallback(
-        (time: string) => {
-            if (!time) return;
-
-            const newTime = sanitizeTimeString(time);
-
-            timeStringRef.current = newTime;
-
-            onChange(date ? parse(newTime, 'HH:mm', date) : null);
-        },
-        [date, onChange],
-    );
-
-    useEffect(() => {
-        if (isValid(date)) return;
-
-        onChange(null);
-    }, [date, onChange]);
-
-    useImperativeHandle(_datePickerInputRef, () => datePickerInputRef.current as TextInputHandles);
-    useImperativeHandle(_timePickerInputRef, () => timePickerInputRef.current as TextInputHandles);
-
-    useImperativeHandle(ref, () =>
-        Object.assign(containerRef.current || {}, {
-            blur: () => {
-                datePickerInputRef.current?.blur?.();
-                timePickerInputRef.current?.blur?.();
-            },
-        }),
-    );
-
-    return (
-        <>
-            <Wrapper style={style} testID={testID} {...rest} ref={containerRef}>
-                <DatePickerInput
-                    ref={datePickerInputRef}
-                    inputMode="start"
-                    variant="outlined"
-                    testID={testID ? `${testID}--datepickerinput` : undefined}
-                    {...datePickerInputProps}
-                    value={date}
-                    onChange={onDateChange}
-                />
-                <TimePickerField
-                    ref={timePickerInputRef}
-                    variant="outlined"
-                    testID={testID ? `${testID}--timepickerinput` : undefined}
-                    is24Hour={is24Hour}
-                    {...timePickerFieldProps}
-                    time={timeString}
-                    onTimeChange={onTimeChange}
-                />
-            </Wrapper>
-        </>
-    );
-};
-
-export default memo(forwardRef(DateTimePicker));

package/components/DateTimePicker/index.tsx

@@ -1,10 +0,0 @@
-import { getRegisteredComponentWithFallback } from '../../core';
-import DateTimePickerDefault from './DateTimePicker';
-
-export const DateTimePicker = getRegisteredComponentWithFallback(
-    'DateTimePicker',
-    DateTimePickerDefault,
-);
-
-export type { Props as DateTimePickerProps } from './DateTimePicker';
-export { dateTimePickerStyles } from './utils';

package/components/DateTimePicker/utils.ts

@@ -1,12 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-
-import { getRegisteredComponentStylesWithFallback } from '../../core';
-
-const dateTimePickerStylesDefault = StyleSheet.create({
-    container: {},
-});
-
-export const dateTimePickerStyles = getRegisteredComponentStylesWithFallback(
-    'DateTimePicker',
-    dateTimePickerStylesDefault,
-);

package/components/Popover/Popover.native.tsx

@@ -1,185 +0,0 @@
-import { Fragment, memo, useCallback, useEffect, useLayoutEffect, useRef } from 'react';
-import { AppState, Dimensions, Platform, Pressable, StyleSheet, View } from 'react-native';
-import { ScopedTheme, UnistylesRuntime } from 'react-native-unistyles';
-
-import { Portal } from '../Portal';
-import {
-    DEFAULT_ARROW_SIZE,
-    popoverDefaultStyles,
-    type PopoverProps,
-    useArrowStyles,
-    usePopover,
-} from './common';
-
-const Popover = ({
-    triggerRef,
-    children,
-    isOpen,
-    onClose,
-    position = 'bottom',
-    align = 'center',
-    style,
-    showArrow = false,
-    arrowSize = DEFAULT_ARROW_SIZE,
-    inverted = false,
-    triggerDimensions,
-    offset = 8,
-    ...rest
-}: PopoverProps) => {
-    const {
-        popoverLayoutRef,
-        targetLayoutRef,
-        actualPositionRef,
-        calculatedPosition,
-        calculateAndSetPosition,
-        handlePopoverLayout,
-    } = usePopover({
-        isOpen,
-        position,
-        align,
-        showArrow,
-        arrowSize,
-        offset,
-    });
-
-    const popoverRef = useRef<View>(null);
-
-    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]);
-
-    const arrowStyles = useArrowStyles({
-        showArrow,
-        arrowSize,
-        style,
-        calculatedPosition,
-        targetLayoutRef,
-        popoverLayoutRef,
-        actualPositionRef,
-    });
-
-    const popoverStyle = calculatedPosition ?? popoverDefaultStyles;
-    const Wrapper = inverted ? ScopedTheme : Fragment;
-
-    if (!isOpen && popoverStyle.opacity === 0) {
-        return null;
-    }
-
-    const handleOutsidePress = () => {
-        if (isOpen && onClose) {
-            onClose();
-        }
-    };
-
-    return (
-        <Portal>
-            <Wrapper
-                {...(inverted
-                    ? { name: UnistylesRuntime.themeName === 'dark' ? 'light' : 'dark' }
-                    : ({} as { name: 'light' }))}>
-                <Pressable onPress={handleOutsidePress} style={styles.overlay} />
-
-                <View
-                    ref={popoverRef}
-                    onLayout={handlePopoverLayout}
-                    style={[styles.popoverContainer, style, popoverStyle]}
-                    {...rest}>
-                    {children}
-                    {showArrow && popoverStyle.opacity === 1 && <View style={arrowStyles} />}
-                </View>
-            </Wrapper>
-        </Portal>
-    );
-};
-
-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/TimePickerField/TimePickerField.tsx

@@ -1,152 +0,0 @@
-import { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import type { BlurEvent, FocusEvent } from 'react-native';
-
-import { useToggle } from '../../hooks';
-import { IconButton, type IconButtonProps } from '../IconButton';
-import { TextInput, type TextInputProps } from '../TextInput';
-import type { TimePickerModalProps } from '../TimePickerModal';
-import { TimePickerModal } from '../TimePickerModal/TimePickerModal';
-import { sanitizeTime } from './sanitizeTime';
-import { getFormattedTime, getOutputTime, styles, timeFormat } from './utils';
-
-export type Props = TextInputProps & {
-    time: string;
-    onTimeChange: (time: string) => void;
-    is24Hour?: boolean;
-    withModal?: boolean;
-    modalProps?: Omit<TimePickerModalProps, 'time' | 'onConfirm' | 'isOpen' | 'onClose' | 'ref'>;
-    iconButtonProps?: Omit<Partial<IconButtonProps>, 'onPress' | 'ref'>;
-};
-
-const TimePickerField = (
-    {
-        time,
-        onTimeChange: onTimeChangeProp,
-        is24Hour = false,
-        withModal = true,
-        style,
-        onBlur: onBlurProp,
-        modalProps = {},
-        iconButtonProps = {},
-        disabled,
-        onFocus: onFocusProp,
-        ...rest
-    }: Props,
-    ref: any,
-) => {
-    const componentStyles = useMemo(() => [styles.root, style], [style]);
-
-    const [timeString, setTimeString] = useState(() => getFormattedTime({ time, is24Hour }));
-    const isBlurredRef = useRef(true);
-
-    const currentTimeFormat = useMemo(() => timeFormat[!is24Hour ? '12' : '24'], [is24Hour]);
-
-    const { state: isOpen, handleOpen: onOpenModal, handleClose: onCloseModal } = useToggle(false);
-
-    const onChangeText = useCallback(
-        (_text: string) => {
-            const text = sanitizeTime(_text, is24Hour);
-            setTimeString(_text);
-
-            if (disabled || !text) return;
-
-            const outputTime = getOutputTime({ time: text || time, is24Hour });
-
-            onTimeChangeProp(outputTime);
-        },
-        [disabled, is24Hour, onTimeChangeProp, time],
-    );
-
-    const onConfirmTime = useCallback(
-        (newTime: string) => {
-            onCloseModal();
-
-            onTimeChangeProp(newTime);
-        },
-        [onTimeChangeProp, onCloseModal],
-    );
-
-    const onBlur = useCallback(
-        (e: BlurEvent) => {
-            isBlurredRef.current = true;
-            onBlurProp?.(e);
-
-            if (disabled) return;
-
-            // const outputTime = getOutputTime({ time: timeString || time, is24Hour });
-            // onTimeChangeProp(outputTime);
-
-            // if (time === outputTime) {
-            setTimeString(sanitizeTime(getFormattedTime({ time, is24Hour }), is24Hour));
-            // }
-        },
-        [disabled, is24Hour, onBlurProp, time],
-    );
-
-    const onFocus = useCallback(
-        (e: FocusEvent) => {
-            isBlurredRef.current = false;
-
-            onFocusProp?.(e);
-        },
-        [onFocusProp],
-    );
-
-    const rightElement = useMemo(() => {
-        if (!withModal) return null;
-
-        return (
-            <>
-                <IconButton
-                    name="clock-outline"
-                    onPress={onOpenModal}
-                    disabled={disabled}
-                    {...iconButtonProps}
-                />
-                <TimePickerModal
-                    {...modalProps}
-                    time={getFormattedTime({ time: time, is24Hour: true })}
-                    isOpen={isOpen}
-                    onClose={onCloseModal}
-                    onConfirm={onConfirmTime}
-                    is24Hour={is24Hour}
-                />
-            </>
-        );
-    }, [
-        disabled,
-        iconButtonProps,
-        is24Hour,
-        isOpen,
-        modalProps,
-        onCloseModal,
-        onConfirmTime,
-        onOpenModal,
-        time,
-        withModal,
-    ]);
-
-    // only change masked string when the input is not focus so as to not interrup the user
-    useEffect(() => {
-        if (!isBlurredRef.current) return;
-
-        setTimeString(getFormattedTime({ time, is24Hour }));
-    }, [is24Hour, time]);
-
-    return (
-        <TextInput
-            ref={ref}
-            placeholder={currentTimeFormat.format}
-            {...rest}
-            disabled={disabled}
-            value={timeString}
-            onFocus={onFocus}
-            onChangeText={onChangeText}
-            style={componentStyles}
-            onBlur={onBlur}
-            right={rightElement}
-        />
-    );
-};
-
-export default memo(forwardRef(TimePickerField));

package/components/TimePickerField/index.tsx

@@ -1,10 +0,0 @@
-import { getRegisteredComponentWithFallback } from '../../core';
-import TimePickerFieldDefault from './TimePickerField';
-
-export const TimePickerField = getRegisteredComponentWithFallback(
-    'TimePickerField',
-    TimePickerFieldDefault,
-);
-
-export { type Props as TimePickerFieldProps } from './TimePickerField';
-export { sanitizeTimeString, styles } from './utils';