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

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

package/components/DatePickerModal/DatePickerModal.tsx

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

package/components/DatePickerModal/DatePickerModalContent.tsx

@@ -1,155 +0,0 @@
-import { memo, useCallback, useState } from 'react';
-
-import { useControlledValue } from '../../hooks';
-import { DatePickerInlineBase, getStateValue } from '../DatePickerInline';
-import DatePickerInlineHeader from '../DatePickerInline/DatePickerInlineHeader';
-import AnimatedCrossView from './AnimatedCrossView';
-import CalendarEdit from './CalendarEdit';
-import DatePickerModalContentHeader from './DatePickerModalContentHeader';
-import DatePickerModalHeader from './DatePickerModalHeader';
-import DatePickerModalHeaderBackground from './DatePickerModalHeaderBackground';
-import type {
-    DatePickerModalContentMultiProps,
-    DatePickerModalContentRangeProps,
-    DatePickerModalContentSingleProps,
-    LocalState,
-    LocalStateMultiple,
-    LocalStateRange,
-    LocalStateSingle,
-} from './types';
-
-type Props =
-    | DatePickerModalContentSingleProps
-    | DatePickerModalContentRangeProps
-    | DatePickerModalContentMultiProps;
-
-export function DatePickerModalContent(props: Props) {
-    const {
-        mode = 'single',
-        onChange,
-        onConfirm,
-        onClose,
-        disableSafeTop,
-        disableWeekDays,
-        // locale = 'en',
-        validRange,
-        dateMode,
-        startYear,
-        endYear,
-        date,
-        startDate,
-        endDate,
-        dates,
-    } = props;
-    const [collapsed, setCollapsed] = useState<boolean>(true);
-
-    const onInnerChange = useCallback(
-        (params: any) => {
-            onChange?.(params);
-        },
-        [onChange],
-    );
-
-    const [state, onStateChange] = useControlledValue<LocalState>({
-        value: getStateValue(
-            {
-                date,
-                dates,
-                startDate,
-                endDate,
-            },
-            mode,
-        ),
-        onChange: onInnerChange,
-    });
-
-    const onInnerConfirm = useCallback(() => {
-        if (mode === 'single') {
-            (onConfirm as DatePickerModalContentSingleProps['onConfirm'])?.({
-                date: (state as LocalStateSingle)?.date,
-            });
-        } else if (mode === 'range') {
-            (onConfirm as DatePickerModalContentRangeProps['onConfirm'])?.({
-                startDate: (state as LocalStateRange)?.startDate,
-                endDate: (state as LocalStateRange)?.endDate,
-            });
-        } else if (mode === 'multiple') {
-            (onConfirm as DatePickerModalContentMultiProps['onConfirm'])?.({
-                dates: (state as LocalStateMultiple)?.dates || [],
-            });
-        }
-    }, [state, mode, onConfirm]);
-
-    const onToggleCollapse = useCallback(() => {
-        setCollapsed(prev => !prev);
-    }, [setCollapsed]);
-
-    return (
-        <>
-            <DatePickerModalHeaderBackground>
-                <DatePickerModalHeader
-                    onSave={onInnerConfirm}
-                    onClose={onClose}
-                    saveLabel={props.saveLabel}
-                    saveLabelDisabled={props.saveLabelDisabled || false}
-                    disableSafeTop={disableSafeTop}
-                    closeIcon={props.closeIcon}
-                />
-                <DatePickerModalContentHeader
-                    state={state || { startDate, dates, date, endDate }}
-                    mode={mode}
-                    collapsed={collapsed}
-                    onToggle={onToggleCollapse}
-                    headerSeparator={props.headerSeparator}
-                    emptyLabel={props.emptyLabel}
-                    label={props.label}
-                    moreLabel={props.moreLabel}
-                    startLabel={props.startLabel}
-                    endLabel={props.endLabel}
-                    uppercase={props.uppercase || true}
-                    // locale={locale}
-                    editIcon={props.editIcon}
-                    calendarIcon={props.calendarIcon}
-                />
-            </DatePickerModalHeaderBackground>
-
-            <AnimatedCrossView
-                collapsed={collapsed}
-                calendar={
-                    <DatePickerInlineBase
-                        // locale={locale}
-                        mode={mode}
-                        startDate={(state as LocalStateRange)?.startDate}
-                        endDate={(state as LocalStateRange)?.endDate}
-                        date={(state as LocalStateSingle)?.date}
-                        onChange={onStateChange as typeof onInnerChange}
-                        disableWeekDays={disableWeekDays}
-                        dates={(state as LocalStateMultiple)?.dates}
-                        validRange={validRange}
-                        dateMode={dateMode}
-                        startYear={startYear}
-                        endYear={endYear}
-                        // TODO - fix ts issues
-                        // @ts-ignore
-                        HeaderComponent={DatePickerInlineHeader}
-                    />
-                }
-                calendarEdit={
-                    <CalendarEdit
-                        mode={mode}
-                        state={state || { startDate, dates, date, endDate }}
-                        label={props.label}
-                        startLabel={props.startLabel}
-                        endLabel={props.endLabel}
-                        collapsed={collapsed}
-                        onChange={onStateChange}
-                        validRange={validRange}
-                        // locale={locale}
-                    />
-                }
-            />
-        </>
-    );
-}
-
-export default memo(DatePickerModalContent);