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

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,115 +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}>{cancelLabel}</Button>
-                        <Button onPress={onConfirm}>{confirmLabel}</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,
-);

package/hooks/useSearchable.tsx

@@ -1,74 +0,0 @@
-import { type ReactElement, useCallback, useMemo } from 'react';
-
-import { IconButton } from '../components/IconButton';
-import {
-    TextInput,
-    type TextInputElementProps,
-    type TextInputProps,
-} from '../components/TextInput';
-import useControlledValue from './useControlledValue';
-
-export interface UseSearchableProps {
-    searchable?: boolean;
-    onQueryChange?: (search: string) => void;
-    query?: string;
-    searchInputProps?: Omit<TextInputProps, 'value' | 'onChangeText'>;
-}
-
-const useSearchInputProps = (props?: Partial<TextInputProps>) => {
-    const onChange = props?.onChangeText;
-    const onPressClear = useCallback(() => {
-        onChange?.('');
-    }, [onChange]);
-
-    const right = useCallback(
-        ({ color, forceFocus }: TextInputElementProps) => (
-            <IconButton
-                name={props?.value ? 'close-circle-outline' : 'magnify'}
-                onPress={props?.value ? onPressClear : forceFocus}
-                color={color}
-            />
-        ),
-        [onPressClear, props?.value],
-    );
-
-    return useMemo(
-        () => (props?.right === undefined ? props : { right, ...props }),
-        [props, right],
-    );
-};
-
-const useSearchable = ({
-    searchable,
-    onQueryChange,
-    query,
-    searchInputProps,
-}: UseSearchableProps = {}): ReactElement<TextInputProps> | null => {
-    const [value, onValueChange] = useControlledValue({
-        value: query || '',
-        defaultValue: '', // to disable the useControlledValue inside TextInput
-        onChange: onQueryChange,
-        disabled: !searchable,
-    });
-
-    const props = useSearchInputProps(
-        useMemo(
-            () => ({
-                ...searchInputProps,
-                value,
-                onChangeText: onValueChange,
-            }),
-            [onValueChange, searchInputProps, value],
-        ),
-    );
-
-    return useMemo(() => {
-        if (!searchable || !onQueryChange) return null;
-
-        return <TextInput {...props} />;
-    }, [onQueryChange, props, searchable]);
-};
-
-export { useSearchInputProps };
-
-export default useSearchable;

package/hooks/useSubcomponents.tsx

@@ -1,59 +0,0 @@
-import type { ReactElement } from 'react';
-import { Children, type FC, isValidElement, useMemo } from 'react';
-
-export type UseSubcomponentsProps<T extends string> = {
-    children: ReactElement | ReactElement[];
-    /**
-     * array of displayName as string
-     * */
-    allowedChildren: T[];
-};
-
-/**
- *  This will return an object with the displayNames as the property names
- *  eg. allowedChildren: ['Drawer_Header', 'Drawer_Content', 'Drawer_Footer', 'DrawerItem'];
- *
- *  return value -> {
- *    Drawer_Header: [],
- *    Drawer_Content: [],
- *    Drawer_Footer: [],
- *    DrawerItem: [],
- *  }
- *  */
-const useSubcomponents = <T extends string = string>({
-    children,
-    allowedChildren,
-}: UseSubcomponentsProps<T>) => {
-    return useMemo(() => {
-        // this will create properties with default empty array values even if they don't exist in the children
-        const defaultContext = allowedChildren.reduce((context, childName) => {
-            return {
-                ...context,
-                [childName]: [],
-            };
-        }, {}) as {
-            [key in T]: ReactElement[];
-        };
-
-        return Children.map(children, child => child).reduce((context, child) => {
-            if (!isValidElement(child)) return context;
-
-            if (
-                !allowedChildren.find(name => name === ((child.type as FC).displayName as string))
-            ) {
-                return context;
-            }
-
-            const name = (child.type as FC).displayName as T;
-
-            if (!name) return context;
-
-            return {
-                ...context,
-                [name]: [...context[name], child],
-            };
-        }, defaultContext);
-    }, [allowedChildren, children]);
-};
-
-export default useSubcomponents;