react-native-molecules 0.5.0-beta.0

package/components/DatePickerInput/DateRangeInput.tsx

@@ -0,0 +1,88 @@
+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

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

package/components/DatePickerInput/inputUtils.ts

@@ -0,0 +1,138 @@
+import { type RefObject, useCallback, useEffect, useState } from 'react';
+import type { BlurEvent, FocusEvent } from 'react-native';
+
+import { useLatest } from '../../hooks';
+import { endOfDay, format, isValid, parse } from '../../utils/date-fns';
+import { isNil } from '../../utils/lodash';
+import type { ValidRangeType } from '../DatePickerInline';
+import { useRangeChecker } from '../DatePickerInline/dateUtils';
+
+const formatValue = (value: Date | null | undefined, dateFormat: string) =>
+    !isNil(value) ? format(value, dateFormat) || '' : '';
+
+export default function useDateInput({
+    // locale,
+    value,
+    validRange,
+    inputMode = 'start',
+    onChange,
+    dateFormat,
+    onBlur: onBlurProp,
+    onFocus: onFocusProp,
+    isBlurredRef,
+}: {
+    onChange?: (d: Date | null) => void;
+    onBlur?: (e: BlurEvent) => void;
+    onFocus?: (e: FocusEvent) => void;
+    // locale: undefined | string;
+    value?: Date | null;
+    validRange?: ValidRangeType;
+    inputMode: 'start' | 'end';
+    dateFormat: string;
+    isBlurredRef: RefObject<boolean>;
+}) {
+    const { isDisabled, isWithinValidRange } = useRangeChecker(validRange);
+
+    const [formattedValue, setFormattedValue] = useState(() => formatValue(value, dateFormat));
+    const formattedValueRef = useLatest(formattedValue);
+
+    // const [error, setError] = useState<null | string>(null);
+
+    const onChangeText = useCallback(
+        (date: string) => {
+            const parsedDate = parse(date, dateFormat, new Date());
+
+            setFormattedValue(
+                isBlurredRef.current
+                    ? isValid(parsedDate)
+                        ? date
+                        : formattedValueRef.current
+                    : date,
+            );
+
+            if (!isValid(parsedDate)) {
+                // TODO: Translate
+                // setError(`Date format must be ${dateFormat}`);
+                onChange?.(date ? value ?? null : null);
+
+                return;
+            }
+
+            const finalDate = inputMode === 'end' ? endOfDay(parsedDate) : parsedDate;
+
+            if (isDisabled(finalDate)) {
+                // TODO: Translate
+                // setError('Day is not allowed');
+                onChange?.(null);
+
+                return;
+            }
+            if (!isWithinValidRange(finalDate)) {
+                // TODO: Translate
+                // const errors =
+                //     validStart && validEnd
+                //         ? [
+                //               `${`Must be between ${format(validStart, dateFormat)} - ${format(
+                //                   validEnd,
+                //                   dateFormat,
+                //               )})`}`,
+                //           ]
+                //         : [
+                //               validStart ? `Must be later then ${validStart}` : '',
+                //               validEnd ? `Must be earlier then ${validEnd}` : '',
+                //           ];
+
+                // setError(errors.filter(n => n).join(' '));
+                onChange?.(null);
+
+                return;
+            }
+
+            onChange?.(finalDate);
+            // setError(null);
+        },
+        [
+            dateFormat,
+            formattedValueRef,
+            inputMode,
+            isBlurredRef,
+            isDisabled,
+            isWithinValidRange,
+            onChange,
+            value,
+        ],
+    );
+
+    const onBlur = useCallback(
+        (e: BlurEvent) => {
+            isBlurredRef.current = true;
+            onBlurProp?.(e);
+            formattedValueRef.current = formatValue(value, dateFormat);
+            setFormattedValue(formattedValueRef.current);
+        },
+        [dateFormat, formattedValueRef, isBlurredRef, onBlurProp, value],
+    );
+
+    const onFocus = useCallback(
+        (e: FocusEvent) => {
+            isBlurredRef.current = false;
+            onFocusProp?.(e);
+        },
+        [isBlurredRef, onFocusProp],
+    );
+
+    useEffect(() => {
+        if (!isBlurredRef.current) return;
+
+        setFormattedValue(formatValue(value, dateFormat));
+    }, [value, dateFormat, isBlurredRef]);
+
+    return {
+        onChange,
+        // error,
+        formattedValue,
+        onChangeText,
+        onBlur,
+        onFocus,
+    };
+}

package/components/DatePickerInput/types.ts

@@ -0,0 +1,28 @@
+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

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

package/components/DatePickerModal/AnimatedCrossView.tsx

@@ -0,0 +1,94 @@
+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

@@ -0,0 +1,139 @@
+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);

package/components/DatePickerModal/DatePickerModal.tsx

@@ -0,0 +1,85 @@
+import color from 'color';
+import { memo, useMemo } from 'react';
+import {
+    Platform,
+    StatusBar,
+    type StatusBarStyle,
+    StyleSheet,
+    useWindowDimensions,
+    View,
+} from 'react-native';
+
+import { Modal } from '../Modal';
+import { Portal } from '../Portal';
+import { DatePickerModalContent } from './DatePickerModalContent';
+import type { DatePickerModalProps } from './types';
+import { datePickerModalStyles } from './utils';
+
+export function DatePickerModal(props: DatePickerModalProps) {
+    const dimensions = useWindowDimensions();
+
+    const {
+        isOpen,
+        disableStatusBar,
+        disableStatusBarPadding,
+        mode = 'single',
+        style: styleProp,
+        ...rest
+    } = props;
+
+    const { containerStyle, headerStyle, barStyle, modalContentStyle } = useMemo(() => {
+        let isHeaderBackgroundLight = true;
+        try {
+            isHeaderBackgroundLight = color(
+                datePickerModalStyles.header?.backgroundColor,
+            ).isLight();
+        } catch (e) {}
+
+        return {
+            containerStyle: [StyleSheet.absoluteFill, styleProp],
+            headerStyle: [
+                datePickerModalStyles.header,
+                {
+                    height: Platform.OS === 'android' ? StatusBar.currentHeight : 0, // on IOS StatusBar.currentHeight isn't available
+                },
+            ],
+            barStyle: (isHeaderBackgroundLight
+                ? 'dark-content'
+                : 'light-content') as StatusBarStyle,
+            modalContentStyle:
+                dimensions.width > 650
+                    ? { flex: 1, maxHeight: 600 }
+                    : { flex: 1, maxWidth: undefined, borderRadius: 0 },
+        };
+    }, [dimensions.width, styleProp]);
+
+    return (
+        <View style={containerStyle} pointerEvents="box-none">
+            <Portal>
+                <Modal
+                    isOpen={isOpen}
+                    onClose={rest.onClose}
+                    style={modalContentStyle}
+                    elevation={0}>
+                    <>
+                        <>
+                            {disableStatusBar ? null : (
+                                <StatusBar translucent={true} barStyle={barStyle} />
+                            )}
+                        </>
+
+                        <>{disableStatusBarPadding ? null : <View style={headerStyle} />}</>
+
+                        <DatePickerModalContent
+                            {...rest}
+                            mode={mode as any}
+                            disableSafeTop={disableStatusBar}
+                        />
+                    </>
+                </Modal>
+            </Portal>
+        </View>
+    );
+}
+
+export default memo(DatePickerModal);