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

package/components/DatePickerInput/DatePickerInput.tsx

@@ -1,139 +0,0 @@
-import { forwardRef, memo, useCallback, useMemo, useRef, useState } from 'react';
-import { StyleSheet } from 'react-native';
-
-import { useLatest, useToggle } from '../../hooks';
-import { noop } from '../../utils/lodash';
-import { DatePickerDocked } from '../DatePickerDocked';
-import { IconButton } from '../IconButton';
-import DatePickerInputModal from './DatePickerInputModal';
-import DatePickerInputWithoutModal from './DatePickerInputWithoutModal';
-import type { DatePickerInputProps } from './types';
-
-function DatePickerInput(
-    {
-        withModal = true,
-        calendarIcon = 'calendar',
-        value,
-        locale,
-        inputMode,
-        validRange,
-        onChange = noop,
-        disabled = false,
-        pickerMode = 'modal',
-        startYear,
-        endYear,
-        dockedPopoverContentProps,
-        //locale = 'en',
-        ...rest
-    }: DatePickerInputProps,
-    ref: any,
-) {
-    const triggerRef = useRef(null);
-    const { state: isOpen, onToggle } = useToggle(false);
-    const [visible, setVisible] = useState<boolean>(false);
-
-    const onDismiss = useCallback(() => {
-        setVisible(false);
-    }, [setVisible]);
-
-    const onChangeRef = useLatest(onChange);
-
-    const onInnerConfirm = useCallback(
-        ({ date }: any) => {
-            setVisible(false);
-            onChangeRef.current(date);
-        },
-        [setVisible, onChangeRef],
-    );
-
-    const onPressCalendarIcon = useCallback(() => {
-        if (pickerMode === 'docked') {
-            onToggle();
-        }
-        setVisible(true);
-    }, [pickerMode, onToggle]);
-
-    const renderers = useMemo(() => {
-        return {
-            modal: (
-                <DatePickerInputModal
-                    date={value}
-                    mode="single"
-                    isOpen={visible}
-                    onClose={onDismiss}
-                    onConfirm={onInnerConfirm}
-                    locale={locale}
-                    validRange={validRange}
-                />
-            ),
-            docked: (
-                <DatePickerDocked
-                    date={value}
-                    locale={locale}
-                    startYear={startYear}
-                    endYear={endYear}
-                    onChange={onInnerConfirm}
-                    isOpen={isOpen}
-                    onClose={onDismiss}
-                    onToggle={onToggle}
-                    triggerRef={triggerRef}
-                    popoverContentProps={dockedPopoverContentProps}
-                />
-            ),
-        };
-    }, [
-        dockedPopoverContentProps,
-        endYear,
-        isOpen,
-        locale,
-        onDismiss,
-        onInnerConfirm,
-        onToggle,
-        startYear,
-        validRange,
-        value,
-        visible,
-    ]);
-
-    const rightElement = useMemo(
-        () => (
-            <>
-                {withModal || pickerMode === 'docked' ? (
-                    <>
-                        <IconButton
-                            ref={triggerRef}
-                            style={styles.calendarButton}
-                            name={calendarIcon}
-                            onPress={onPressCalendarIcon}
-                            disabled={disabled}
-                        />
-                        {renderers[pickerMode]}
-                    </>
-                ) : null}
-            </>
-        ),
-        [calendarIcon, disabled, onPressCalendarIcon, pickerMode, renderers, withModal],
-    );
-
-    return (
-        <DatePickerInputWithoutModal
-            ref={ref}
-            {...rest}
-            disabled={disabled}
-            value={value}
-            inputMode={inputMode}
-            validRange={validRange}
-            onChange={onChange}
-            // locale={locale}
-            inputButtons={rightElement}
-        />
-    );
-}
-
-const styles = StyleSheet.create({
-    calendarButton: {
-        marginRight: -4,
-    },
-});
-
-export default memo(forwardRef(DatePickerInput));

package/components/DatePickerInput/DatePickerInputModal.tsx

@@ -1,48 +0,0 @@
-import { memo, useCallback, useEffect, useState } from 'react';
-
-import type { DatePickerModalProps } from '../DatePickerModal';
-import { DatePickerModal } from '../DatePickerModal/DatePickerModal';
-
-const DatePickerInputModal = ({
-    date,
-    onConfirm: onConfirmProp,
-    onClose: onCloseProp,
-    ...rest
-}: DatePickerModalProps) => {
-    // want to control this by the input and only pass the value when onConfirm is clicked
-    const [value, onValueChange] = useState(date);
-
-    const onChange = useCallback(
-        (val: any) => {
-            onValueChange(val?.date);
-        },
-        [onValueChange],
-    );
-
-    const onConfirm = useCallback(() => {
-        onConfirmProp?.({ date: value } as any);
-    }, [onConfirmProp, value]);
-
-    const onClose = useCallback(() => {
-        onValueChange(date); // revert back before close it
-
-        onCloseProp?.();
-    }, [date, onCloseProp]);
-
-    useEffect(() => {
-        onValueChange(date);
-    }, [date]);
-
-    return (
-        <DatePickerModal
-            {...rest}
-            onClose={onClose}
-            onConfirm={onConfirm}
-            date={value}
-            onChange={onChange}
-            mode="single"
-        />
-    );
-};
-
-export default memo(DatePickerInputModal);

package/components/DatePickerInput/DatePickerInputWithoutModal.tsx

@@ -1,77 +0,0 @@
-import { forwardRef, memo, useCallback, useImperativeHandle, useMemo, useRef } from 'react';
-
-import { TextInputWithMask } from '../TextInputWithMask';
-import useDateInput from './inputUtils';
-import type { DatePickerInputWithoutModalProps } from './types';
-import { datePickerInputStyles } from './utils';
-
-function DatePickerInputWithoutModal(
-    {
-        label,
-        value,
-        onChange: onChangeProp,
-        // locale = 'en',
-        validRange,
-        inputMode,
-        inputButtons,
-        dateFormat = 'dd/MM/yyyy',
-        style,
-        onBlur: onBlurProp,
-        onFocus: onFocusProp,
-        ...rest
-    }: DatePickerInputWithoutModalProps,
-    ref: any,
-) {
-    const inputRef = useRef(null);
-    const isBlurredRef = useRef(true);
-
-    const onChange = useCallback(
-        (date: Date | null) => {
-            // because onChange was already trigger not need to trigger again on
-            if (!isBlurredRef.current) {
-                onChangeProp?.(date);
-            }
-
-            if (!date && isBlurredRef.current) (inputRef.current as any)?.setDisplayValue('');
-        },
-        [onChangeProp],
-    );
-
-    const { formattedValue, onChangeText, onBlur, onFocus } = useDateInput({
-        // locale,
-        value,
-        validRange,
-        inputMode,
-        onChange,
-        dateFormat,
-        onBlur: onBlurProp,
-        onFocus: onFocusProp,
-        isBlurredRef,
-    });
-
-    const inputStyle = useMemo(() => [datePickerInputStyles.root, style], [style]);
-
-    useImperativeHandle(ref, () => inputRef.current);
-
-    return (
-        <TextInputWithMask
-            placeholder={dateFormat}
-            style={inputStyle}
-            {...rest}
-            onBlur={onBlur}
-            onFocus={onFocus}
-            ref={inputRef}
-            label={label}
-            value={formattedValue}
-            keyboardType={'number-pad'}
-            mask={dateFormat}
-            onChangeText={onChangeText}
-            // keyboardAppearance={theme.dark ? 'dark' : 'default'}
-            // error={formattedValue ? !!error : false}
-            right={inputButtons}
-            // supportingText={formattedValue ? error || undefined : undefined}
-        />
-    );
-}
-
-export default memo(forwardRef(DatePickerInputWithoutModal));

package/components/DatePickerInput/DateRangeInput.tsx

@@ -1,88 +0,0 @@
-import { useCallback, useState } from 'react';
-import { StyleSheet, View } from 'react-native';
-
-import DatePickerModal from '../DatePickerModal/DatePickerModal';
-import { IconButton } from '../IconButton';
-import { Text } from '../Text';
-
-// WORK IN PROGRESS
-// PLEASE IGNORE THIS FILE
-export default function DateRangeInput({
-    locale,
-    calendarIcon = 'calendar',
-}: {
-    locale: string;
-    calendarIcon?: string;
-}) {
-    const [visible, setVisible] = useState<boolean>(false);
-    const onDismiss = useCallback(() => {
-        setVisible(false);
-    }, [setVisible]);
-    const onConfirm = useCallback(
-        ({ startDate, endDate }: { startDate: any; endDate: any }) => {
-            setVisible(false);
-            // eslint-disable-next-line no-console
-            console.log({ startDate, endDate });
-        },
-        [setVisible],
-    );
-
-    return (
-        <View style={styles.container}>
-            <View style={styles.textContainer}>
-                {/*<DatePickerInput*/}
-                {/*  value={''}*/}
-                {/*  keyboardType={'numeric'}*/}
-                {/*  placeholder={'DD-MM-YYY'}*/}
-                {/*  mask={'DD-MM-YYY'}*/}
-                {/*  onChangeText={() => {}}*/}
-                {/*/>*/}
-                <Text>Van</Text>
-            </View>
-            <View>
-                <Text style={styles.text1}>to</Text>
-                <Text style={styles.text2} accessible={false}>
-                    tot
-                </Text>
-            </View>
-            <View style={styles.textContainer}>
-                {/*<DatePickerInput*/}
-                {/*  // value={''}*/}
-                {/*  // keyboardType={'numeric'}*/}
-                {/*  // placeholder={'DD-MM-YYY'}*/}
-                {/*  // mask={'DD-MM-YYY'}*/}
-                {/*  // onChangeText={() => {}}*/}
-                {/*/>*/}
-                <Text>Tot</Text>
-            </View>
-            <View>
-                <IconButton name={calendarIcon} onPress={() => setVisible(true)} />
-                <Text style={styles.text2} accessible={false}>
-                    tot
-                </Text>
-            </View>
-            <DatePickerModal
-                locale={locale}
-                mode="range"
-                isOpen={visible}
-                onClose={onDismiss}
-                onConfirm={onConfirm}
-                startDate={undefined}
-                endDate={undefined}
-            />
-        </View>
-    );
-}
-
-const styles = StyleSheet.create({
-    container: { flexDirection: 'row', alignItems: 'center' },
-    textContainer: { flex: 1 },
-    text1: {
-        fontSize: 16,
-        marginLeft: 12,
-        marginRight: 12,
-    },
-    text2: {
-        opacity: 0,
-    },
-});

package/components/DatePickerInput/index.tsx

@@ -1,10 +0,0 @@
-import { getRegisteredComponentWithFallback } from '../../core';
-import DatePickerInputDefault from './DatePickerInput';
-
-export const DatePickerInput = getRegisteredComponentWithFallback(
-    'DatePickerInput',
-    DatePickerInputDefault,
-);
-
-export type { DatePickerInputProps } from './types';
-export { datePickerInputStyles } from './utils';

package/components/DatePickerInput/types.ts

@@ -1,28 +0,0 @@
-import type { ViewProps } from 'react-native';
-
-import type { ValidRangeType } from '../DatePickerInline';
-import type { TextInputProps } from '../TextInput';
-
-export interface DatePickerInputProps
-    extends Omit<TextInputProps, 'value' | 'onChange' | 'onChangeText' | 'inputMode'> {
-    inputMode: 'start' | 'end';
-    locale?: string;
-    onChange?: (date: Date | null) => void;
-    value?: Date | null;
-    validRange?: ValidRangeType | undefined;
-    withModal?: boolean;
-    calendarIcon?: string;
-    /**
-     * date format of the input
-     * should be date-fns accepted format
-     * We currently only accept the variations of dd MM yyyy
-     * */
-    dateFormat?: string;
-    pickerMode?: 'docked' | 'modal';
-    startYear?: number;
-    endYear?: number;
-    dockedPopoverContentProps?: ViewProps;
-}
-export interface DatePickerInputWithoutModalProps extends Omit<DatePickerInputProps, 'withModal'> {
-    inputButtons?: any;
-}

package/components/DatePickerInput/utils.ts

@@ -1,15 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-
-import { getRegisteredComponentStylesWithFallback } from '../../core';
-
-const datePickerInputStylesDefault = StyleSheet.create({
-    root: {
-        minWidth: 150,
-        justifyContent: 'center',
-    },
-});
-
-export const datePickerInputStyles = getRegisteredComponentStylesWithFallback(
-    'DatePickerInput',
-    datePickerInputStylesDefault,
-);

package/components/DatePickerModal/AnimatedCrossView.tsx

@@ -1,94 +0,0 @@
-import { useEffect, useMemo, useRef } from 'react';
-import { Animated, View } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-
-export default function AnimatedCrossView({
-    // visible,
-    collapsed,
-    calendar,
-    calendarEdit,
-}: {
-    calendar: any;
-    calendarEdit: any;
-    // visible: boolean
-    collapsed: boolean;
-}) {
-    const calendarOpacity = useRef<Animated.Value>(new Animated.Value(collapsed ? 1 : 0));
-    useEffect(() => {
-        // if (visible) {
-        Animated.timing(calendarOpacity.current, {
-            toValue: collapsed ? 1 : 0,
-            duration: 250,
-            useNativeDriver: true,
-        }).start();
-        // }
-    }, [collapsed]);
-
-    const { calendarStyle, calendarEditStyle } = useMemo(() => {
-        return {
-            calendarStyle: [
-                styles.calendar,
-                {
-                    opacity: calendarOpacity.current,
-                    transform: [
-                        {
-                            scaleY: calendarOpacity.current.interpolate({
-                                inputRange: [0, 1],
-                                outputRange: [0.85, 1],
-                            }),
-                        },
-                        {
-                            scaleX: calendarOpacity.current.interpolate({
-                                inputRange: [0, 1],
-                                outputRange: [0.95, 1],
-                            }),
-                        },
-                    ],
-                },
-            ],
-            calendarEditStyle: [
-                styles.calendarEdit,
-                {
-                    opacity: calendarOpacity.current.interpolate({
-                        inputRange: [0, 1],
-                        outputRange: [1, 0],
-                    }),
-                    transform: [
-                        {
-                            scale: calendarOpacity.current.interpolate({
-                                inputRange: [0, 1],
-                                outputRange: [1, 0.95],
-                            }),
-                        },
-                    ],
-                },
-            ],
-        };
-    }, []);
-
-    // TODO Create AnimatedCrossView Component
-    return (
-        <View style={styles.root}>
-            <Animated.View pointerEvents={collapsed ? 'auto' : 'none'} style={calendarStyle}>
-                {calendar}
-            </Animated.View>
-            <Animated.View pointerEvents={collapsed ? 'none' : 'auto'} style={calendarEditStyle}>
-                {calendarEdit}
-            </Animated.View>
-        </View>
-    );
-}
-
-const styles = StyleSheet.create(theme => ({
-    root: { flex: 1 },
-    calendarEdit: {
-        position: 'absolute',
-
-        left: 0,
-        right: 0,
-        backgroundColor: theme.colors.surface,
-    },
-    calendar: {
-        flex: 1,
-    },
-}));

package/components/DatePickerModal/CalendarEdit.tsx

@@ -1,139 +0,0 @@
-import { memo, useCallback, useEffect, useRef } from 'react';
-import { Keyboard, TextInput as TextInputNative, View } from 'react-native';
-
-import type { ModeType, ValidRangeType } from '../DatePickerInline';
-import DatePickerInputWithoutModal from '../DatePickerInput/DatePickerInputWithoutModal';
-import type { LocalState, LocalStateRange, LocalStateSingle } from './types';
-import { datePickerModalEditStyles } from './utils';
-
-type Props = {
-    mode: ModeType;
-    label?: string;
-    startLabel?: string;
-    endLabel?: string;
-    state: LocalState;
-    collapsed: boolean;
-    onChange: (s: LocalState) => any;
-    validRange: ValidRangeType | undefined;
-    // locale: string;
-};
-
-function CalendarEdit({
-    mode,
-    state,
-    label = '',
-    startLabel = 'Start',
-    endLabel = 'End',
-    collapsed,
-    onChange,
-    validRange,
-}: // locale,
-Props) {
-    const dateInput = useRef<TextInputNative | null>(null);
-    const startInput = useRef<TextInputNative | null>(null);
-    const endInput = useRef<TextInputNative | null>(null);
-
-    // when switching views focus, or un-focus text input
-    useEffect(() => {
-        // hide open keyboard
-        if (collapsed) {
-            Keyboard.dismiss();
-        }
-
-        const inputsToFocus = [dateInput.current, startInput.current].filter(
-            n => n,
-        ) as TextInputNative[];
-
-        const inputsToBlur = [dateInput.current, startInput.current, endInput.current].filter(
-            n => n,
-        ) as TextInputNative[];
-
-        if (collapsed) {
-            inputsToBlur.forEach(ip => ip.blur());
-        } else {
-            inputsToFocus.forEach(ip => ip.focus());
-        }
-    }, [mode, startInput, endInput, dateInput, collapsed]);
-
-    const onSubmitStartInput = useCallback(() => {
-        if (endInput.current) {
-            endInput.current.focus();
-        }
-    }, [endInput]);
-
-    const onSubmitEndInput = useCallback(() => {
-        // TODO: close modal and persist range
-    }, []);
-
-    const onSubmitInput = useCallback(() => {
-        // TODO: close modal and persist range
-    }, []);
-
-    const onSingleInputChange = useCallback(
-        (date: Date | null) => onChange({ ...state, date }),
-        [onChange, state],
-    );
-
-    const onStartDateChange = useCallback(
-        (startDate: Date | null) => onChange({ ...state, startDate }),
-        [onChange, state],
-    );
-
-    const onEndDateChange = useCallback(
-        (endDate: Date | null) => onChange({ ...state, endDate }),
-        [onChange, state],
-    );
-
-    return (
-        <View style={datePickerModalEditStyles.container}>
-            <>
-                {mode === 'single' ? (
-                    <DatePickerInputWithoutModal
-                        inputMode="start"
-                        ref={dateInput}
-                        label={label}
-                        value={(state as LocalStateSingle).date}
-                        onChange={onSingleInputChange}
-                        onSubmitEditing={onSubmitInput}
-                        validRange={validRange}
-                        // locale={locale}
-                        autoComplete={'off'}
-                    />
-                ) : null}
-            </>
-
-            <>
-                {mode === 'range' ? (
-                    <View style={datePickerModalEditStyles.inner}>
-                        <DatePickerInputWithoutModal
-                            inputMode="start"
-                            ref={startInput}
-                            label={startLabel}
-                            value={(state as LocalStateRange).startDate}
-                            onChange={onStartDateChange}
-                            returnKeyType={'next'}
-                            onSubmitEditing={onSubmitStartInput}
-                            validRange={validRange}
-                            // locale={locale}
-                            autoComplete={'off'}
-                        />
-                        <View style={datePickerModalEditStyles.separator} />
-                        <DatePickerInputWithoutModal
-                            inputMode="end"
-                            ref={endInput}
-                            label={endLabel}
-                            value={(state as LocalStateRange).endDate}
-                            onChange={onEndDateChange}
-                            onSubmitEditing={onSubmitEndInput}
-                            validRange={validRange}
-                            // locale={locale}
-                            autoComplete="off"
-                        />
-                    </View>
-                ) : null}
-            </>
-        </View>
-    );
-}
-
-export default memo(CalendarEdit);