react-native-molecules 0.5.0-beta.16 → 0.5.0-beta.17

package/components/DatePickerDocked/utils.ts

@@ -1,157 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-
-import { getRegisteredComponentStylesWithFallback } from '../../core';
-
-const datePickerDockedStylesDefault = StyleSheet.create(theme => ({
-    root: {
-        roundness: theme.shapes.corner.extraSmall,
-        headerBackgroundColor: theme.colors.surface,
-    } as any,
-
-    container: {
-        minHeight: 360,
-        minWidth: 360,
-    },
-}));
-
-const datePickerDockedHeaderStylesDefault = StyleSheet.create(theme => ({
-    datePickerHeader: {
-        position: 'relative',
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-evenly',
-    },
-    daysWrapperStyle: {
-        marginHorizontal: theme.spacings['3'],
-    },
-}));
-
-const datePickerHeaderItemStylesDefault = StyleSheet.create(theme => ({
-    buttonContainer: {
-        height: 46,
-        width: '50%',
-        flexDirection: 'row',
-        alignItems: 'center',
-    },
-    buttonWrapper: {},
-    spacer: { flex: 1 },
-    labelStyle: {
-        ...theme.typescale.bodyMedium,
-        opacity: 0.7,
-    },
-    buttonStyle: {
-        alignSelf: 'center',
-        borderRadius: theme.shapes.corner.extraSmall,
-    },
-    innerStyle: {
-        paddingLeft: theme.spacings['0'],
-        flexDirection: 'row',
-        alignItems: 'center',
-        borderRadius: theme.shapes.corner.extraSmall,
-    },
-    emtpyView: {
-        width: 30,
-    },
-}));
-
-const datePickerMonthPickerStylesDefault = StyleSheet.create(theme => ({
-    root: {
-        backgroundColor: theme.colors.surface,
-    },
-    month: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'flex-start',
-    },
-    selectedMonth: { color: theme.colors.onSurface },
-    monthButton: {
-        width: '100%',
-        overflow: 'hidden',
-    },
-    monthInner: {
-        height: 46,
-        alignItems: 'center',
-        justifyContent: 'flex-start',
-        flexDirection: 'row',
-    },
-    selectedMonthInner: { backgroundColor: theme.colors.surfaceVariant },
-    monthLabel: {
-        fontSize: 16,
-    },
-}));
-
-const datePickerDockedMonthItemStylesDefault = StyleSheet.create(theme => ({
-    root: {
-        backgroundColor: theme.colors.surface,
-    },
-
-    monthButton: {
-        width: '100%',
-        overflow: 'hidden',
-        padding: theme.spacings['0'],
-
-        variants: {
-            state: {
-                selected: {
-                    backgroundColor: theme.colors.surfaceVariant,
-                },
-            },
-        },
-    },
-    monthInner: {
-        height: 46,
-        alignItems: 'center',
-        justifyContent: 'flex-start',
-        flexDirection: 'row',
-        padding: theme.spacings['0'],
-    },
-    monthLabel: {
-        fontSize: 16,
-
-        variants: {
-            state: {
-                selected: {
-                    color: theme.colors.onSurface,
-                },
-            },
-        },
-    },
-}));
-
-const datePickerDockedMonthStylesDefault = StyleSheet.create(theme => ({
-    dockedHeaderStyle: {
-        alignItems: 'flex-start',
-        marginLeft: theme.spacings['4'],
-    },
-    weekContainerStyle: {
-        marginHorizontal: theme.spacings['3'],
-    },
-    backDropStyle: {
-        backgroundColor: 'transparent',
-    },
-}));
-
-export const datePickerDockedStyles = getRegisteredComponentStylesWithFallback(
-    'DatePickerDocked',
-    datePickerDockedStylesDefault,
-);
-export const datePickerDockedHeaderStyles = getRegisteredComponentStylesWithFallback(
-    'DatePickerDocked_Header',
-    datePickerDockedHeaderStylesDefault,
-);
-export const datePickerHeaderItemStyles = getRegisteredComponentStylesWithFallback(
-    'DatePicker_HeaderItem',
-    datePickerHeaderItemStylesDefault,
-);
-export const datePickerMonthPickerStyles = getRegisteredComponentStylesWithFallback(
-    'DatePickerDocked_MonthPicker',
-    datePickerMonthPickerStylesDefault,
-);
-export const datePickerDockedMonthItemStyles = getRegisteredComponentStylesWithFallback(
-    'DatePickerDocked_MonthItem',
-    datePickerDockedMonthItemStylesDefault,
-);
-export const datePickerDockedMonthStyles = getRegisteredComponentStylesWithFallback(
-    'DatePickerDocked_Month',
-    datePickerDockedMonthStylesDefault,
-);

package/components/DatePickerInput/DatePickerInput.tsx

@@ -1,130 +0,0 @@
-import { forwardRef, memo, useCallback, useMemo, useRef } 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 { TextInput } from '../TextInput';
-import DatePickerInputModal from './DatePickerInputModal';
-import DatePickerInputWithoutModal from './DatePickerInputWithoutModal';
-import type { DatePickerInputProps } from './types';
-import { DatePickerInputContext } from './utils';
-
-function DatePickerInput(
-    {
-        withModal = true,
-        calendarIcon = 'calendar',
-        value,
-        locale,
-        inputMode,
-        validRange,
-        onChange = noop,
-        disabled = false,
-        pickerMode = 'modal',
-        startYear,
-        endYear,
-        dockedPopoverContentProps,
-        children,
-        //locale = 'en',
-        ...rest
-    }: DatePickerInputProps,
-    ref: any,
-) {
-    const triggerRef = useRef(null);
-    const { state: isOpen, onToggle, handleOpen, handleClose } = useToggle(false);
-
-    const onDismiss = useCallback(() => {
-        handleClose();
-    }, [handleClose]);
-
-    const onChangeRef = useLatest(onChange);
-
-    const onInnerConfirm = useCallback(
-        ({ date }: any) => {
-            handleClose();
-            onChangeRef.current(date);
-        },
-        [handleClose, onChangeRef],
-    );
-
-    const onPressCalendarIcon = useCallback(() => {
-        if (pickerMode === 'docked') {
-            onToggle();
-        } else {
-            handleOpen();
-        }
-    }, [pickerMode, onToggle, handleOpen]);
-
-    const renderers = {
-        modal: (
-            <DatePickerInputModal
-                date={value}
-                mode="single"
-                isOpen={isOpen}
-                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}
-            />
-        ),
-    };
-
-    const contextValue = useMemo(
-        () => ({ isOpen, onPressTrigger: onPressCalendarIcon }),
-        [isOpen, onPressCalendarIcon],
-    );
-
-    return (
-        <DatePickerInputContext value={contextValue}>
-            <DatePickerInputWithoutModal
-                ref={ref}
-                {...rest}
-                disabled={disabled}
-                value={value}
-                inputMode={inputMode}
-                validRange={validRange}
-                onChange={onChange}
-                // locale={locale}
-            >
-                <TextInput.Right>
-                    {withModal || pickerMode === 'docked' ? (
-                        <>
-                            <IconButton
-                                ref={triggerRef}
-                                style={styles.calendarButton}
-                                name={calendarIcon}
-                                onPress={onPressCalendarIcon}
-                                disabled={disabled}
-                            />
-                        </>
-                    ) : null}
-                </TextInput.Right>
-                {children}
-                {renderers[pickerMode]}
-            </DatePickerInputWithoutModal>
-        </DatePickerInputContext>
-    );
-}
-
-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,73 +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(
-    {
-        value,
-        onChange: onChangeProp,
-        // locale = 'en',
-        validRange,
-        inputMode,
-        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}
-            value={formattedValue}
-            keyboardType={'number-pad'}
-            mask={dateFormat}
-            onChangeText={onChangeText}
-            // keyboardAppearance={theme.dark ? 'dark' : 'default'}
-            // error={formattedValue ? !!error : false}
-            // 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,11 +0,0 @@
-import { getRegisteredComponentWithFallback } from '../../core';
-import DatePickerInputDefault from './DatePickerInput';
-
-export const DatePickerInput = getRegisteredComponentWithFallback(
-    'DatePickerInput',
-    DatePickerInputDefault,
-);
-
-export type { DatePickerInputProps } from './types';
-export type { DatePickerInputContextType } from './utils';
-export { DatePickerInputContext, datePickerInputStyles } from './utils';

package/components/DatePickerInput/types.ts

@@ -1,26 +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'> {}

package/components/DatePickerInput/utils.ts

@@ -1,24 +0,0 @@
-import { createContext } from 'react';
-import { StyleSheet } from 'react-native-unistyles';
-
-import { getRegisteredComponentStylesWithFallback } from '../../core';
-
-export type DatePickerInputContextType = {
-    onPressTrigger: () => void;
-};
-
-export const DatePickerInputContext = createContext<DatePickerInputContextType>({
-    onPressTrigger: () => {},
-});
-
-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,
-    },
-}));