react-native-molecules 0.5.0-beta.3 → 0.5.0-beta.31

package/components/RadioButton/RadioButtonItem.tsx

@@ -1,232 +0,0 @@
-import { forwardRef, memo, useCallback, useContext, useMemo } from 'react';
-import { type StyleProp, StyleSheet, type TextStyle, View, type ViewStyle } from 'react-native';
-
-import { resolveStateVariant } from '../../utils';
-import { Text } from '../Text';
-import { TouchableRipple } from '../TouchableRipple';
-import RadioButton from './RadioButton';
-import { RadioButtonContext } from './RadioButtonGroup';
-import { handlePress, isChecked, radioButtonItemStyles } from './utils';
-
-export type Props = {
-    /**
-     * Value of the radio button.
-     */
-    value: string;
-    /**
-     * Label to be displayed on the item.
-     */
-    label: string;
-    /**
-     * Whether radio is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Function to execute on press.
-     */
-    onPress?: () => void;
-    /**
-     * Accessibility label for the touchable. This is read by the screen reader when the user taps the touchable.
-     */
-    accessibilityLabel?: string;
-    /**
-     * Custom color for unchecked radio.
-     */
-    uncheckedColor?: string;
-    /**
-     * Custom color for radio.
-     */
-    color?: string;
-    /**
-     * Status of radio button.
-     */
-    status?: 'checked' | 'unchecked';
-    /**
-     * Additional styles for container View.
-     */
-    style?: StyleProp<ViewStyle>;
-    /**
-     * TouchableRipple style
-     */
-    rippleContainerStyle?: StyleProp<ViewStyle>;
-    /**
-     * Style that is passed to Label element.
-     */
-    labelStyle?: StyleProp<TextStyle>;
-    /**
-     * Style that is passed to Container element.
-     */
-    containerStyle?: StyleProp<ViewStyle>;
-    /**
-     * testID to be used on tests.
-     */
-    testID?: string;
-    /**
-     * Radio button control position.
-     */
-    position?: 'leading' | 'trailing';
-};
-
-/**
- * RadioButton.Item allows you to press the whole row (item) instead of only the RadioButton.
- *
- * <div class="screenshots">
- *   <figure>
- *     <img class="medium" src="screenshots/radio-item.ios.png" />
- *     <figcaption>Pressed</figcaption>
- *   </figure>
- * </div>
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { RadioButton } from 'react-native-paper';
- *
- * const MyComponent = () => {
- *   const [value, setValue] = React.useState('first');
- *
- *   return (
- *     <RadioButton.Group onValueChange={value => setValue(value)} value={value}>
- *       <RadioButton.Item label="First item" value="first" />
- *       <RadioButton.Item label="Second item" value="second" />
- *     </RadioButton.Group>
- *   );
- * };
- *
- * export default MyComponent;
- *```
- */
-const RadioButtonItem = (
-    {
-        value,
-        label,
-        style: styleProp,
-        labelStyle,
-        onPress,
-        disabled,
-        color,
-        uncheckedColor,
-        status,
-        accessibilityLabel = label,
-        testID,
-        position = 'trailing',
-        containerStyle,
-        rippleContainerStyle,
-    }: Props,
-    ref: any,
-) => {
-    const context = useContext(RadioButtonContext);
-
-    const checked = useMemo(
-        () =>
-            isChecked({
-                contextValue: context?.value,
-                status,
-                value,
-            }) === 'checked',
-        [context?.value, status, value],
-    );
-
-    const state = resolveStateVariant({
-        disabled: !!disabled,
-        checked,
-    });
-
-    radioButtonItemStyles.useVariants({
-        state: state as any,
-    });
-
-    // const componentStyles = useComponentStyles('RadioButton_Item', styleProp, {
-    //     state: resolveStateVariant({
-    //         disabled: !!disabled,
-    //         checked,
-    //     }),
-    // });
-
-    const isLeading = position === 'leading';
-
-    const { containerStyles, labelStyles, accessibilityState, radioButtonProps } = useMemo(() => {
-        return {
-            containerStyles: [radioButtonItemStyles.root, styles.container, containerStyle],
-            labelStyles: [
-                styles.label,
-                radioButtonItemStyles.label,
-                {
-                    textAlign: isLeading ? 'right' : 'left',
-                },
-                labelStyle,
-            ] as StyleProp<TextStyle>,
-            accessibilityState: {
-                checked,
-                disabled,
-            },
-            radioButtonProps: {
-                value,
-                disabled,
-                status,
-                color,
-                uncheckedColor,
-                checked,
-                style: styleProp,
-            },
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        checked,
-        color,
-        containerStyle,
-        disabled,
-        isLeading,
-        labelStyle,
-        status,
-        styleProp,
-        uncheckedColor,
-        value,
-        state,
-    ]);
-
-    const onRadioPress = useCallback(
-        () =>
-            handlePress({
-                onPress: onPress,
-                onValueChange: context?.onValueChange,
-                value,
-            }),
-        [onPress, context?.onValueChange, value],
-    );
-
-    return (
-        <TouchableRipple
-            ref={ref}
-            onPress={onRadioPress}
-            accessibilityLabel={accessibilityLabel}
-            accessibilityRole="radio"
-            accessibilityState={accessibilityState}
-            testID={testID}
-            disabled={disabled}
-            style={rippleContainerStyle}>
-            <View style={containerStyles} pointerEvents="none">
-                {isLeading && <RadioButton {...radioButtonProps} />}
-                <Text style={labelStyles}>{label}</Text>
-                {!isLeading && <RadioButton {...radioButtonProps} />}
-            </View>
-        </TouchableRipple>
-    );
-};
-
-const styles = StyleSheet.create({
-    container: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-    },
-    label: {
-        flexShrink: 1,
-        flexGrow: 1,
-        fontSize: 16,
-    },
-});
-
-RadioButtonItem.displayName = 'RadioButton_Item';
-
-export default memo(forwardRef(RadioButtonItem));

package/components/RadioButton/index.ts

@@ -1,22 +0,0 @@
-import { getRegisteredComponentWithFallback } from '../../core';
-import RadioButtonComponent from './RadioButton';
-import RadioButtonGroup from './RadioButtonGroup';
-import RadioButtonItem from './RadioButtonItem';
-
-const RadioButtonDefault = Object.assign(
-    // @component ./RadioButton.tsx
-    RadioButtonComponent,
-    {
-        // @component ./RadioButtonGroup.tsx
-        Group: RadioButtonGroup,
-        // @component ./RadioButtonItem.tsx
-        Item: RadioButtonItem,
-    },
-);
-
-export const RadioButton = getRegisteredComponentWithFallback('RadioButton', RadioButtonDefault);
-
-export type { Props as RadioButtonProps } from './RadioButton';
-export type { Props as RadioButtonGroupProps } from './RadioButtonGroup';
-export type { Props as RadioButtonItemProps } from './RadioButtonItem';
-export { radioButtonItemStyles, radioButtonStyles } from './utils';

package/components/RadioButton/utils.ts

@@ -1,165 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-
-import { getRegisteredComponentStylesWithFallback } from '../../core';
-
-// type States = 'disabled' | 'checked' | 'hovered' | 'checkedAndHovered';
-
-export const DEFAULT_ICON_SIZE = 24;
-export const ANIMATION_DURATION = 100;
-
-const radioButtonStylesDefault = StyleSheet.create(theme => ({
-    root: {
-        // color: theme.colors.onSurfaceVariant,
-        // uncheckedColor: theme.colors.onSurfaceVariant,
-        // variants: {
-        //     state: {
-        //         checked: {
-        //             color: theme.colors.primary,
-        //         },
-        //         disabled: {
-        //             color: theme.colors.onSurfaceDisabled,
-        //             uncheckedColor: theme.colors.onSurfaceDisabled,
-        //         },
-        //     },
-        // },
-    },
-
-    container: {
-        borderRadius: theme.shapes.corner.full as unknown as number,
-    },
-    radioContainer: {
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    radio: {
-        height: 20,
-        width: 20,
-        borderRadius: 10,
-        margin: 8,
-        borderColor: theme.colors.onSurfaceVariant,
-
-        variants: {
-            state: {
-                checked: {
-                    borderColor: theme.colors.primary,
-                },
-                disabled: {
-                    borderColor: theme.colors.onSurfaceDisabled,
-                },
-            },
-        },
-    },
-    dot: {
-        height: 10,
-        width: 10,
-        borderRadius: 5,
-        backgroundColor: theme.colors.onSurfaceVariant,
-
-        variants: {
-            state: {
-                checked: {
-                    backgroundColor: theme.colors.primary,
-                },
-                disabled: {
-                    backgroundColor: theme.colors.onSurfaceDisabled,
-                },
-            },
-        },
-    },
-    icon: {
-        backgroundColor: theme.colors.onSurfaceVariant,
-
-        variants: {
-            state: {
-                checked: {
-                    backgroundColor: theme.colors.primary,
-                },
-                disabled: {
-                    backgroundColor: theme.colors.onSurfaceDisabled,
-                },
-            },
-        },
-    },
-    stateLayer: {
-        variants: {
-            state: {
-                hovered: {
-                    backgroundColor: theme.colors.stateLayer.hover.onSurface,
-                },
-
-                checkedAndHovered: {
-                    backgroundColor: theme.colors.stateLayer.hover.primary,
-                },
-            },
-        },
-    },
-}));
-
-const radioButtonItemStylesDefault = StyleSheet.create(theme => ({
-    root: {
-        paddingVertical: theme.spacings['2'],
-        paddingHorizontal: theme.spacings['4'],
-
-        variants: {
-            state: {
-                checked: {},
-                disabled: {},
-            },
-        },
-    },
-    label: {
-        color: theme.colors.onSurface,
-
-        variants: {
-            state: {
-                checked: {},
-                disabled: {
-                    color: theme.colors.onSurfaceDisabled,
-                },
-            },
-        },
-    },
-}));
-
-export const radioButtonStyles = getRegisteredComponentStylesWithFallback(
-    'RadioButton',
-    radioButtonStylesDefault,
-);
-export const radioButtonItemStyles = getRegisteredComponentStylesWithFallback(
-    'RadioButton_Item',
-    radioButtonItemStylesDefault,
-);
-
-export const handlePress = ({
-    onPress,
-    value,
-    onValueChange,
-}: {
-    onPress?: () => void;
-    value: string;
-    onValueChange?: (value: string) => void;
-}) => {
-    if (onPress && onValueChange) {
-        console.warn(
-            `onPress in the scope of RadioButtonGroup will not be executed, use onValueChange instead`,
-        );
-    }
-
-    onValueChange ? onValueChange(value) : onPress?.();
-};
-
-export const isChecked = ({
-    value,
-    status,
-    contextValue,
-}: {
-    value: string;
-    status?: 'checked' | 'unchecked';
-    contextValue?: string;
-}) => {
-    if (contextValue !== undefined && contextValue !== null) {
-        return contextValue === value ? 'checked' : 'unchecked';
-    } else {
-        return status;
-    }
-};

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';

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