react-native-molecules 0.5.0-beta.0

package/components/DatePickerInline/utils.ts

@@ -0,0 +1,367 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { daySize } from './dateUtils';
+
+export const dayNamesHeight = 44;
+
+// TODO make it flexible
+export const weekMargin = 6;
+export const weekSize = daySize + weekMargin;
+export const montHeaderHeight = 56;
+export const monthHeaderSingleMarginTop = 4;
+export const monthHeaderSingleMarginBottom = 8 + 22 + 12;
+export const monthHeaderSingleHeight = monthHeaderSingleMarginTop + monthHeaderSingleMarginBottom;
+
+const datePickerStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        backgroundColor: theme.colors.surface,
+        // ...({
+        //     roundness: theme.shapes.corner.extraSmall,
+        //     headerBackgroundColor: theme.colors.surface,
+        // } as any),
+    },
+
+    container: {
+        minHeight: 360,
+        minWidth: 360,
+    },
+}));
+
+const datePickerMonthStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        backgroundColor: theme.colors.surface,
+    },
+    monthLabel: {
+        ...theme.typescale.bodyMedium,
+        opacity: 0.7,
+    },
+    yearButton: {
+        alignSelf: 'flex-start',
+        marginLeft: 6,
+        borderRadius: theme.shapes.corner.extraSmall,
+    },
+    yearButtonInner: {
+        paddingLeft: theme.spacings['4'],
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderRadius: theme.shapes.corner.extraSmall,
+    },
+    month: {},
+    monthHeader: {
+        height: montHeaderHeight,
+        justifyContent: 'center',
+        overflow: 'hidden',
+    },
+
+    monthButton: {
+        borderRadius: theme.shapes.corner.extraLarge,
+        overflow: 'hidden',
+    },
+    buttonContainerStyle: { flexDirection: 'row', alignItems: 'center' },
+    dockedHeaderStyle: {},
+    weekContainerStyle: {},
+}));
+
+const datePickerYearPickerStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        backgroundColor: theme.colors.surface,
+    },
+    yearContainer: {
+        alignItems: 'center',
+    },
+    yearButton: {
+        borderRadius: theme.shapes.corner.extraLarge,
+        overflow: 'hidden',
+        height: 46,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginLeft: theme.spacings['4'],
+        marginRight: theme.spacings['4'],
+    },
+    yearInner: {
+        borderRadius: theme.shapes.corner.extraLarge,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    yearLabel: {
+        fontSize: 16,
+    },
+}));
+
+const datePickerDayStylesDefault = StyleSheet.create(theme => ({
+    containerStyle: {
+        flex: 1,
+        flexBasis: 0,
+        justifyContent: 'center',
+        alignItems: 'center',
+        position: 'relative',
+
+        variants: {
+            state: {
+                disabled: {
+                    opacity: 0.3,
+                },
+            },
+        },
+    },
+    disabled: {
+        opacity: 0.3,
+    },
+    button: {
+        width: daySize,
+        height: daySize,
+        overflow: 'hidden',
+        borderRadius: daySize / 2,
+
+        variants: {
+            state: {
+                inRange: {
+                    backgroundColor: theme.colors.primary,
+                },
+            },
+        },
+    },
+    day: {
+        flexBasis: 0,
+        flex: 1,
+        borderRadius: daySize / 2,
+        width: daySize,
+        height: daySize,
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderWidth: 1,
+        borderColor: 'transparent',
+
+        variants: {
+            state: {
+                selected: {
+                    backgroundColor: theme.colors.primary,
+                },
+
+                inRange: {
+                    borderColor: theme.colors.primary,
+                    button: {
+                        backgroundColor: theme.colors.primary,
+                    },
+                    today: {
+                        borderColor: theme.colors.primary,
+                    },
+                },
+            },
+        },
+    },
+    today: {
+        borderColor: theme.colors.primary,
+        variants: {
+            state: {
+                inRange: {
+                    borderColor: theme.colors.primary,
+                    button: {
+                        backgroundColor: theme.colors.primary,
+                    },
+                },
+            },
+        },
+    },
+    text: {
+        variants: {
+            state: {
+                selected: {
+                    color: theme.colors.onPrimary,
+                    day: {
+                        backgroundColor: theme.colors.primary,
+                    },
+                },
+
+                inRange: {
+                    color: theme.colors.onPrimary,
+
+                    day: {
+                        borderColor: theme.colors.primary,
+                    },
+                    button: {
+                        backgroundColor: theme.colors.primary,
+                    },
+                    today: {
+                        borderColor: theme.colors.primary,
+                    },
+                },
+            },
+        },
+    },
+    flex1: {
+        flex: 1,
+    },
+}));
+
+const datePickerDayEmptyStylesDefault = StyleSheet.create({
+    root: {
+        flex: 1,
+        flexBasis: 0,
+    },
+});
+
+const datePickerWeekStylesDefault = StyleSheet.create({
+    root: {
+        flexDirection: 'row',
+        height: daySize,
+    },
+});
+
+const datePickerHeaderStylesDefault = StyleSheet.create(theme => ({
+    datePickerHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginHorizontal: theme.spacings['5'],
+    },
+    buttonContainer: {
+        height: 56,
+        marginTop: theme.spacings['1'],
+        marginBottom: theme.spacings['2'],
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    buttonWrapper: {},
+    spacer: { flex: 1 },
+    yearLabelStyle: {
+        ...theme.typescale.bodyMedium,
+        opacity: 0.7,
+    },
+    yearButtonStyle: {
+        alignSelf: 'flex-start',
+        marginLeft: 6,
+        borderRadius: theme.shapes.corner.extraSmall,
+    },
+    yearInnerStyle: {
+        paddingLeft: theme.spacings['4'],
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderRadius: theme.shapes.corner.extraSmall,
+    },
+}));
+
+const dateDayNameStylesDefault = StyleSheet.create(theme => ({
+    container: {
+        height: dayNamesHeight,
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: theme.colors.surface,
+    },
+    dayName: { flex: 1, alignItems: 'center' },
+    dayNameLabel: {
+        opacity: 0.7,
+        ...theme.typescale.bodyMedium,
+    },
+}));
+
+const datePickerDayRangeStylesDefault = StyleSheet.create(theme => ({
+    container: {
+        flexDirection: 'row',
+
+        variants: {
+            state: {
+                bothWays: {
+                    borderRadius: daySize / 2,
+                },
+                inRange: {
+                    backgroundColor: theme.colors.primary,
+                },
+                isCrop: {
+                    backgroundColor: undefined,
+                },
+            },
+        },
+    },
+    rightCrop: {
+        flex: 1,
+
+        variants: {
+            state: {
+                isRightCrop: {
+                    backgroundColor: theme.colors.primary,
+                },
+            },
+        },
+    },
+    leftCrop: {
+        flex: 1,
+
+        variants: {
+            state: {
+                isLeftCrop: {
+                    backgroundColor: theme.colors.primary,
+                },
+            },
+        },
+    },
+    centerCrop: {
+        backgroundColor: theme.colors.primary,
+        minWidth: daySize,
+        minHeight: daySize,
+
+        variants: {
+            state: {
+                isLeftCrop: {
+                    borderTopLeftRadius: daySize / 2,
+                    borderBottomLeftRadius: daySize / 2,
+                },
+                isRightCrop: {
+                    borderTopRightRadius: daySize / 2,
+                    borderBottomRightRadius: daySize / 2,
+                },
+            },
+        },
+    },
+}));
+
+const datePickerYearItemStylesDefault = StyleSheet.create(theme => ({
+    yearButton: {
+        variants: {
+            state: {
+                selected: {
+                    backgroundColor: theme.colors.primary,
+                },
+            },
+        },
+    },
+
+    yearLabel: {
+        variants: {
+            state: {
+                selected: {
+                    color: theme.colors.onPrimary,
+                },
+            },
+        },
+    },
+}));
+
+registerComponentsStyles({
+    DatePickerInline: datePickerStylesDefault,
+    DatePicker_Month: datePickerMonthStylesDefault,
+    DatePicker_YearPicker: datePickerYearPickerStylesDefault,
+    DatePicker_Day: datePickerDayStylesDefault,
+    DatePicker_DayEmpty: datePickerDayEmptyStylesDefault,
+    DatePicker_Week: datePickerWeekStylesDefault,
+    DatePicker_Header: datePickerHeaderStylesDefault,
+    DatePicker_DayName: dateDayNameStylesDefault,
+    DatePicker_DayRange: datePickerDayRangeStylesDefault,
+    DatePicker_YearItem: datePickerYearItemStylesDefault,
+});
+
+export const datePickerStyles = getRegisteredMoleculesComponentStyles('DatePickerInline');
+export const datePickerMonthStyles = getRegisteredMoleculesComponentStyles('DatePicker_Month');
+export const datePickerYearPickerStyles =
+    getRegisteredMoleculesComponentStyles('DatePicker_YearPicker');
+export const datePickerDayStyles = getRegisteredMoleculesComponentStyles('DatePicker_Day');
+export const datePickerDayEmptyStyles =
+    getRegisteredMoleculesComponentStyles('DatePicker_DayEmpty');
+export const datePickerWeekStyles = getRegisteredMoleculesComponentStyles('DatePicker_Week');
+export const datePickerHeaderStyles = getRegisteredMoleculesComponentStyles('DatePicker_Header');
+export const dateDayNameStyles = getRegisteredMoleculesComponentStyles('DatePicker_DayName');
+export const datePickerDayRangeStyles =
+    getRegisteredMoleculesComponentStyles('DatePicker_DayRange');
+export const datePickerYearItemStyles =
+    getRegisteredMoleculesComponentStyles('DatePicker_YearItem');

package/components/DatePickerInput/DatePickerInput.tsx

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

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

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