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

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,154 +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,
-        children,
-        ...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}>
-            <TextInput.Right>{rightElement}</TextInput.Right>
-            {children}
-        </TextInput>
-    );
-};
-
-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';

package/components/TimePickerField/utils.ts

@@ -1,94 +0,0 @@
-import { format, parse, set } from 'date-fns';
-import { StyleSheet } from 'react-native-unistyles';
-
-export declare type MaskItem = string | RegExp | [RegExp];
-export declare type MaskArray = Array<MaskItem>;
-export declare type Mask = MaskArray | ((value?: string) => MaskArray);
-
-import { getRegisteredComponentStylesWithFallback } from '../../core';
-
-const timepickerFieldStylesDefault = StyleSheet.create({
-    root: {},
-});
-
-export const styles = getRegisteredComponentStylesWithFallback(
-    'TimePickerField',
-    timepickerFieldStylesDefault,
-);
-
-export const timeMask24Hour: Mask = (text: string = '') => {
-    const cleanTime = text.replace(/\D+/g, '');
-
-    const hourFirstDigit = /[012]/; // only 0,1 or 2
-    let hourSecondDigit = /\d/; // any number
-
-    if (cleanTime.charAt(0) === '2') {
-        hourSecondDigit = /[0123]/; // only 0,1,2 or 3
-    }
-
-    const minuteFirstDigit = /[012345]/; // only 0,1,2,3,4 or 5
-    const minuteSecondDigit = /\d/; // any number
-
-    return [hourFirstDigit, hourSecondDigit, ':', minuteFirstDigit, minuteSecondDigit];
-};
-export const timeMask12Hour: Mask = (text: string = '') => {
-    const cleanTime = text.replace(/\D+/g, '');
-
-    const hourFirstDigit = /[01]/; // only 0,1 or 2
-    let hourSecondDigit = /\d/; // any number
-
-    if (cleanTime.charAt(0) === '1') {
-        hourSecondDigit = /[012]/; // only 0,1,2 or 3
-    }
-
-    const minuteFirstDigit = /[012345]/; // only 0,1,2,3,4 or 5
-    const minuteSecondDigit = /\d/; // any number
-
-    return [hourFirstDigit, hourSecondDigit, ':', minuteFirstDigit, minuteSecondDigit, /[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 getFormattedTime = ({ time, is24Hour }: { time: string; is24Hour: boolean }) => {
-    if (!time) {
-        return '';
-    }
-
-    const [hour = '0', minute = '0'] = sanitizeTimeString(time).split(':');
-
-    const newHour = hour.padStart(2, '0');
-    const newMinute = minute.padStart(2, '0');
-
-    return format(
-        set(referenceDate, { hours: +newHour, minutes: +newMinute }),
-        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/TimePickerModal/TimePickerModal.tsx

@@ -1,119 +0,0 @@
-import { memo, useCallback, useEffect, useMemo, useState } from 'react';
-import { KeyboardAvoidingView, Platform, View } from 'react-native';
-
-import { format } from '../../utils/date-fns';
-import { Button } from '../Button';
-import { IconButton } from '../IconButton';
-import { Modal, type ModalProps } from '../Modal';
-import { Portal } from '../Portal';
-import { Text } from '../Text';
-import TimePicker from '../TimePicker/TimePicker';
-import {
-    clockTypes,
-    getTimeInputTypeIcon,
-    inputTypes,
-    type PossibleClockTypes,
-    type PossibleInputTypes,
-    reverseInputTypes,
-} from '../TimePicker/timeUtils';
-import { styles } from './utils';
-
-export type Props = Omit<ModalProps, 'children'> & {
-    is24Hour?: boolean;
-    label?: string;
-    uppercase?: boolean;
-    cancelLabel?: string;
-    confirmLabel?: string;
-    time?: string;
-    onConfirm: (time: string) => any;
-    keyboardIcon?: string;
-    clockIcon?: string;
-    isLandscape?: boolean;
-};
-
-export function TimePickerModal({
-    isOpen,
-    onClose,
-    onConfirm: onConfirmProp,
-    time: timeProp,
-    label = 'Select time',
-    uppercase = false,
-    cancelLabel = 'Cancel',
-    confirmLabel = 'Ok',
-    is24Hour,
-    keyboardIcon = 'keyboard-outline',
-    clockIcon = 'clock-outline',
-    isLandscape = false,
-    style,
-    ...rest
-}: Props) {
-    const [inputType, setInputType] = useState<PossibleInputTypes>(inputTypes.picker);
-    const [focused, setFocused] = useState<PossibleClockTypes>(clockTypes.hours);
-    const [time, setTime] = useState(() => timeProp || format(new Date(), 'HH:mm'));
-
-    const modelStyle = useMemo(() => [styles.modalContent, style], [style]);
-
-    const onFocusInput = useCallback((type: PossibleClockTypes) => setFocused(type), []);
-
-    const onChange = useCallback(
-        (params: { focused?: PossibleClockTypes | undefined; time: string }) => {
-            if (params.focused) {
-                setFocused(params.focused);
-            }
-
-            setTime(params.time);
-        },
-        [setFocused, setTime],
-    );
-
-    const onConfirm = useCallback(() => onConfirmProp(time), [onConfirmProp, time]);
-
-    useEffect(() => {
-        setTime(timeProp || format(new Date(), 'HH:mm'));
-    }, [timeProp]);
-
-    return (
-        <Portal>
-            <Modal {...rest} isOpen={isOpen} style={modelStyle} onClose={onClose}>
-                <KeyboardAvoidingView
-                    style={styles.keyboardView}
-                    behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
-                    <View style={styles.labelContainer}>
-                        <Text style={styles.label}>{uppercase ? label.toUpperCase() : label}</Text>
-                    </View>
-                    <View style={styles.timePickerContainer}>
-                        <TimePicker
-                            is24Hour={is24Hour}
-                            inputType={inputType}
-                            focused={focused}
-                            time={time}
-                            onTimeChange={onChange}
-                            onFocusInput={onFocusInput}
-                            isLandscape={isLandscape}
-                        />
-                    </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} />
-                        <Button onPress={onClose}>
-                            <Button.Text>{cancelLabel}</Button.Text>
-                        </Button>
-                        <Button onPress={onConfirm}>
-                            <Button.Text>{confirmLabel}</Button.Text>
-                        </Button>
-                    </View>
-                </KeyboardAvoidingView>
-            </Modal>
-        </Portal>
-    );
-}
-
-export default memo(TimePickerModal);

package/components/TimePickerModal/index.tsx

@@ -1,10 +0,0 @@
-import { getRegisteredComponentWithFallback } from '../../core';
-import TimePickerModalDefault from './TimePickerModal';
-
-export const TimePickerModal = getRegisteredComponentWithFallback(
-    'TimePickerModal',
-    TimePickerModalDefault,
-);
-
-export type { Props as TimePickerModalProps } from './TimePickerModal';
-export { styles } from './utils';

package/components/TimePickerModal/utils.ts

@@ -1,47 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-
-import { getRegisteredComponentStylesWithFallback } from '../../core';
-
-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,
-    },
-    labelContainer: {
-        height: 28,
-        justifyContent: 'flex-end',
-        paddingLeft: theme.spacings['6'],
-        paddingRight: theme.spacings['6'],
-        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'],
-    },
-    footer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        padding: theme.spacings['2'],
-        width: '100%',
-    },
-    inputTypeToggle: { margin: theme.spacings['1'] },
-    fill: { flex: 1 },
-}));
-
-export const styles = getRegisteredComponentStylesWithFallback(
-    'TimePickerModal',
-    timepickerModalStylesDefault,
-);