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

package/components/DatePickerDocked/DatePickerDockedHeader.tsx

@@ -1,129 +0,0 @@
-import { add, format } from 'date-fns';
-import { memo, useCallback, useMemo } from 'react';
-import { View, type ViewStyle } from 'react-native';
-
-import { useDatePickerStore } from '../DatePickerInline/DatePickerContext';
-import type { DisableWeekDaysType } from '../DatePickerInline/dateUtils';
-import DayNames from '../DatePickerInline/DayNames';
-import HeaderItem from '../DatePickerInline/HeaderItem';
-import { dayNamesHeight } from '../DatePickerInline/utils';
-import { datePickerDockedHeaderStyles } from './utils';
-
-const buttonContainerHeight = 56;
-const buttonContainerMarginTop = 4;
-const buttonContainerMarginBottom = 8;
-
-export type CalendarHeaderProps = {
-    locale?: string;
-    disableWeekDays?: DisableWeekDaysType;
-    style?: ViewStyle;
-};
-
-function DatePickerDockedHeader({
-    locale = 'en',
-    disableWeekDays,
-    style: styleProp,
-}: CalendarHeaderProps) {
-    const [{ localDate, pickerType, startDateYear, endDateYear }, setStore] = useDatePickerStore(
-        state => ({
-            localDate: state.localDate,
-            pickerType: state.pickerType,
-            startDateYear: state.startDateYear,
-            endDateYear: state.endDateYear,
-        }),
-    );
-
-    // const componentStyles = useComponentStyles('DatePickerDocked_Header', styleProp);
-
-    const monthName = useMemo(() => {
-        return format(localDate, 'MMM');
-    }, [localDate]);
-
-    const { containerStyle, daysWrapperStyle } = useMemo(() => {
-        return {
-            containerStyle: [datePickerDockedHeaderStyles.datePickerHeader, styleProp],
-            daysWrapperStyle: datePickerDockedHeaderStyles.daysWrapperStyle,
-        };
-    }, [styleProp]);
-
-    const handlePressDropDown = useCallback(
-        (type: 'month' | 'year') => {
-            setStore(prev => ({
-                pickerType: prev.pickerType ? undefined : type,
-            }));
-        },
-        [setStore],
-    );
-
-    const isNotInRange = useCallback(
-        (date: Date) => {
-            const year = date.getFullYear();
-            const month = date.getMonth();
-            if (year < startDateYear || year > endDateYear || month > 11 || month < 0) {
-                return true;
-            }
-            return false;
-        },
-        [startDateYear, endDateYear],
-    );
-
-    const handleChange = useCallback(
-        (offset: number, type?: 'month' | 'year') => {
-            let newDate = localDate;
-            const prop = type === 'month' ? 'months' : 'years';
-            newDate = add(newDate, { [prop]: offset });
-
-            if (isNotInRange(newDate)) return;
-
-            setStore(() => ({
-                localDate: newDate,
-            }));
-        },
-        [isNotInRange, localDate, setStore],
-    );
-
-    const handleChangePrevious = useMemo(() => handleChange.bind(null, -1), [handleChange]);
-    const handleChangeNext = useMemo(() => handleChange.bind(null, 1), [handleChange]);
-
-    return (
-        <View>
-            <View style={containerStyle} pointerEvents={'box-none'}>
-                <HeaderItem
-                    selecting={!!pickerType}
-                    type="month"
-                    value={monthName}
-                    onNext={handleChangeNext}
-                    onPrev={handleChangePrevious}
-                    onPressDropdown={handlePressDropDown}
-                    pickerType={pickerType}
-                />
-                <HeaderItem
-                    selecting={!!pickerType}
-                    type="year"
-                    value={localDate.getFullYear()}
-                    onNext={handleChangeNext}
-                    onPrev={handleChangePrevious}
-                    onPressDropdown={handlePressDropDown}
-                    pickerType={pickerType}
-                />
-            </View>
-            <View style={daysWrapperStyle}>
-                <DayNames disableWeekDays={disableWeekDays} locale={locale} />
-            </View>
-        </View>
-    );
-}
-
-export function getCalendarHeaderHeight(scrollMode: 'horizontal' | 'vertical') {
-    if (scrollMode === 'horizontal') {
-        return (
-            buttonContainerHeight +
-            buttonContainerMarginTop +
-            buttonContainerMarginBottom +
-            dayNamesHeight
-        );
-    }
-    return dayNamesHeight;
-}
-
-export default memo(DatePickerDockedHeader);

package/components/DatePickerDocked/index.tsx

@@ -1,17 +0,0 @@
-import { getRegisteredComponentWithFallback } from '../../core';
-import DatePickerDockedDefault from './DatePickerDocked';
-
-export const DatePickerDocked = getRegisteredComponentWithFallback(
-    'DatePickerDocked',
-    DatePickerDockedDefault,
-);
-
-export type { DatePickerDockedProps } from './types';
-export {
-    datePickerDockedHeaderStyles,
-    datePickerDockedMonthItemStyles,
-    datePickerDockedMonthStyles,
-    datePickerDockedStyles,
-    datePickerHeaderItemStyles,
-    datePickerMonthPickerStyles,
-} from './utils';

package/components/DatePickerDocked/types.ts

@@ -1,11 +0,0 @@
-import type { ViewProps } from 'react-native';
-
-import type { DatePickerSingleProps } from '../DatePickerInline';
-
-export type DatePickerDockedProps = DatePickerSingleProps & {
-    triggerRef: any;
-    onToggle: () => void;
-    onClose: () => void;
-    isOpen: boolean;
-    popoverContentProps?: ViewProps;
-};

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'> {}