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

package/components/DateField/DateField.tsx

@@ -0,0 +1,110 @@
+import { memo, useCallback, useMemo, useRef } from 'react';
+
+import type { DatePickerValue, RangeValue } from '../DatePicker/context';
+import { useDatePickerContext } from '../DatePicker/context';
+import type { TextInputProps } from '../TextInput';
+import { TextInputWithMask } from '../TextInputWithMask';
+import { useDateFieldState } from './useDateFieldState';
+
+export type DateFieldInputMode = 'start' | 'end';
+
+export type DateFieldProps = Omit<
+    TextInputProps,
+    'value' | 'defaultValue' | 'onChangeText' | 'inputMode'
+> & {
+    inputMode?: DateFieldInputMode;
+    dateFormat?: string;
+};
+
+const DEFAULT_DATE_FORMAT = 'dd/MM/yyyy';
+
+const isRange = (value: DatePickerValue): value is RangeValue =>
+    value !== null && typeof value === 'object' && 'start' in value && 'end' in value;
+
+const preserveTime = (next: Date | null, prev: Date | null): Date | null => {
+    if (!next || !prev) return next;
+
+    const combined = new Date(next);
+
+    combined.setHours(
+        prev.getHours(),
+        prev.getMinutes(),
+        prev.getSeconds(),
+        prev.getMilliseconds(),
+    );
+    return combined;
+};
+
+function DateField({
+    ref,
+    inputMode = 'start',
+    dateFormat = DEFAULT_DATE_FORMAT,
+    disabled: disabledProp,
+    onBlur,
+    onFocus,
+    ...rest
+}: DateFieldProps) {
+    const {
+        mode,
+        value,
+        commitValue,
+        validRange,
+        disabled: providerDisabled,
+    } = useDatePickerContext();
+    const isBlurredRef = useRef(true);
+
+    const disabled = disabledProp ?? providerDisabled;
+
+    const fieldValue = useMemo<Date | null>(() => {
+        if (mode === 'range') {
+            if (!isRange(value)) return null;
+            return inputMode === 'end' ? value.end : value.start;
+        }
+        return isRange(value) ? null : value;
+    }, [value, mode, inputMode]);
+
+    const onChange = useCallback(
+        (next: Date | null) => {
+            if (mode === 'range') {
+                const current: RangeValue = isRange(value) ? value : { start: null, end: null };
+                commitValue({ ...current, [inputMode]: next });
+                return;
+            }
+            commitValue(preserveTime(next, isRange(value) ? null : value));
+        },
+        [mode, value, inputMode, commitValue],
+    );
+
+    const {
+        formattedValue,
+        onChangeText,
+        onBlur: onInnerBlur,
+        onFocus: onInnerFocus,
+    } = useDateFieldState({
+        value: fieldValue,
+        validRange,
+        inputMode,
+        dateFormat,
+        onChange,
+        onBlur,
+        onFocus,
+        isBlurredRef,
+    });
+
+    return (
+        <TextInputWithMask
+            {...rest}
+            ref={ref}
+            disabled={disabled}
+            value={formattedValue}
+            placeholder={dateFormat}
+            keyboardType="number-pad"
+            mask={dateFormat}
+            onChangeText={onChangeText}
+            onBlur={onInnerBlur}
+            onFocus={onInnerFocus}
+        />
+    );
+}
+
+export default memo(DateField);

package/components/DateField/index.tsx

@@ -0,0 +1,6 @@
+import { getRegisteredComponentWithFallback } from '../../core';
+import DateFieldDefault from './DateField';
+
+export const DateField = getRegisteredComponentWithFallback('DateField', DateFieldDefault);
+
+export type { DateFieldInputMode, DateFieldProps } from './DateField';

package/components/{DatePickerInput/inputUtils.ts → DateField/useDateFieldState.ts}

@@ -10,34 +10,31 @@ 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;
+type Props = {
     value?: Date | null;
     validRange?: ValidRangeType;
     inputMode: 'start' | 'end';
     dateFormat: string;
     isBlurredRef: RefObject<boolean>;
-}) {
-    const { isDisabled, isWithinValidRange } = useRangeChecker(validRange);
+    onChange?: (value: Date | null) => void;
+    onBlur?: (e: BlurEvent) => void;
+    onFocus?: (e: FocusEvent) => void;
+};
 
+export function useDateFieldState({
+    value,
+    validRange,
+    inputMode,
+    dateFormat,
+    isBlurredRef,
+    onChange,
+    onBlur: onBlurProp,
+    onFocus: onFocusProp,
+}: Props) {
+    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());
@@ -51,45 +48,18 @@ export default function useDateInput({
             );
 
             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');
+            if (isDisabled(finalDate) || !isWithinValidRange(finalDate)) {
                 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,
@@ -128,8 +98,6 @@ export default function useDateInput({
     }, [value, dateFormat, isBlurredRef]);
 
     return {
-        onChange,
-        // error,
         formattedValue,
         onChangeText,
         onBlur,

package/components/DatePicker/DateCalendar.tsx

@@ -0,0 +1,83 @@
+import { memo } from 'react';
+
+import { getRegisteredComponentWithFallback } from '../../core';
+import {
+    DatePickerInline,
+    type DatePickerInlineProps,
+    type RangeChange,
+    type SingleChange,
+} from '../DatePickerInline';
+import { useOptionalDatePickerContext } from './context';
+
+export type DateCalendarProps = DatePickerInlineProps;
+
+const DateCalendarDefault = memo((props: DateCalendarProps) => {
+    const ctx = useOptionalDatePickerContext();
+
+    const hasExplicitState =
+        props.date !== undefined ||
+        props.startDate !== undefined ||
+        props.endDate !== undefined ||
+        props.dates !== undefined ||
+        props.onChange !== undefined;
+
+    const isRange = props.mode === 'range' || ctx?.mode === 'range';
+    const effectiveHeaderLayout = props.headerLayout ?? (ctx ? 'docked' : 'inline');
+    const showOutsideDays =
+        props.showOutsideDays ?? (effectiveHeaderLayout === 'docked' && !isRange);
+
+    if (!ctx || hasExplicitState) {
+        return <DatePickerInline {...props} showOutsideDays={showOutsideDays} />;
+    }
+
+    const locale = props.locale ?? ctx.locale;
+    const validRange = props.validRange ?? ctx.validRange;
+
+    if (ctx.mode === 'range') {
+        const range =
+            ctx.draftValue && typeof ctx.draftValue === 'object' && 'start' in ctx.draftValue
+                ? ctx.draftValue
+                : { start: null, end: null };
+        const onChange: RangeChange = ({ startDate, endDate }) => {
+            ctx.setValue({ start: startDate ?? null, end: endDate ?? null });
+        };
+        return (
+            <DatePickerInline
+                {...props}
+                mode="range"
+                startDate={range.start ?? undefined}
+                endDate={range.end ?? undefined}
+                onChange={onChange}
+                locale={locale}
+                validRange={validRange}
+                headerLayout={props.headerLayout ?? 'docked'}
+                showOutsideDays={showOutsideDays}
+            />
+        );
+    }
+
+    const single =
+        ctx.draftValue && typeof ctx.draftValue === 'object' && 'start' in ctx.draftValue
+            ? null
+            : ctx.draftValue;
+    const onChange: SingleChange = ({ date }) => {
+        ctx.setValue(date ?? null);
+    };
+
+    return (
+        <DatePickerInline
+            {...props}
+            mode="single"
+            date={single ?? undefined}
+            onChange={onChange}
+            locale={locale}
+            validRange={validRange}
+            headerLayout={props.headerLayout ?? 'docked'}
+            showOutsideDays={showOutsideDays}
+        />
+    );
+});
+
+DateCalendarDefault.displayName = 'DateCalendar';
+
+export const DateCalendar = getRegisteredComponentWithFallback('DateCalendar', DateCalendarDefault);

package/components/DatePicker/DatePickerActions.tsx

@@ -0,0 +1,73 @@
+import { useCallback } from 'react';
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+import {
+    getRegisteredComponentStylesWithFallback,
+    getRegisteredComponentWithFallback,
+} from '../../core';
+import { Button } from '../Button';
+import { useDatePickerContext } from './context';
+
+export type DatePickerActionsProps = {
+    cancelLabel?: string;
+    confirmLabel?: string;
+    onCancel?: () => void;
+    onConfirm?: () => void;
+};
+
+function DatePickerActionsDefault({
+    cancelLabel = 'Cancel',
+    confirmLabel = 'OK',
+    onCancel,
+    onConfirm,
+}: DatePickerActionsProps) {
+    const { draft, commit, cancel } = useDatePickerContext();
+
+    const handleCancel = useCallback(() => {
+        onCancel?.();
+        cancel();
+    }, [onCancel, cancel]);
+
+    const handleConfirm = useCallback(() => {
+        onConfirm?.();
+        commit();
+    }, [onConfirm, commit]);
+
+    if (!draft) return null;
+
+    return (
+        <View style={datePickerActionsStyles.footer}>
+            <Button variant="text" onPress={handleCancel}>
+                <Button.Text>{cancelLabel}</Button.Text>
+            </Button>
+            <Button variant="text" onPress={handleConfirm}>
+                <Button.Text>{confirmLabel}</Button.Text>
+            </Button>
+        </View>
+    );
+}
+
+export default DatePickerActionsDefault;
+
+export const DatePickerActions = getRegisteredComponentWithFallback(
+    'DatePickerActions',
+    DatePickerActionsDefault,
+);
+
+const datePickerActionsStylesDefault = StyleSheet.create(theme => ({
+    footer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        columnGap: theme.spacings['2'],
+        paddingHorizontal: theme.spacings['4'],
+        paddingTop: theme.spacings['0'],
+        paddingBottom: theme.spacings['2'],
+    },
+}));
+
+const datePickerActionsStyles = getRegisteredComponentStylesWithFallback(
+    'DatePickerActions',
+    datePickerActionsStylesDefault,
+);

package/components/DatePicker/DatePickerModal.tsx

@@ -0,0 +1,234 @@
+import type { ReactNode } from 'react';
+import { memo, useCallback, useMemo, useState } from 'react';
+import {
+    Platform,
+    StatusBar,
+    type StatusBarStyle,
+    StyleSheet,
+    useWindowDimensions,
+    View,
+} from 'react-native';
+
+import { getRegisteredComponentWithFallback } from '../../core';
+import { format } from '../../utils/date-fns';
+import { DateField } from '../DateField';
+import { IconButton } from '../IconButton';
+import { Modal, type ModalProps } from '../Modal';
+import { Portal } from '../Portal';
+import { Text } from '../Text';
+import { TextInput } from '../TextInput';
+import type { DatePickerContextType, DatePickerValue } from './context';
+import {
+    DatePickerContext,
+    useDatePickerContext,
+    useOptionalDatePickerContext,
+    withDraftLayer,
+} from './context';
+import { DateCalendar } from './DateCalendar';
+import { DatePickerActions } from './DatePickerActions';
+import { DatePickerProvider } from './DatePickerProvider';
+import { datePickerModalStyles } from './utils';
+
+export type DatePickerModalProps = Omit<ModalProps, 'children' | 'isOpen' | 'onClose'> & {
+    children?: ReactNode;
+    isOpen?: boolean;
+    onClose?: () => void;
+    value?: DatePickerValue;
+    onChange?: (value: DatePickerValue) => void;
+    label?: string;
+    disableStatusBar?: boolean;
+    disableStatusBarPadding?: boolean;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    editIcon?: string;
+    calendarIcon?: string;
+    headerLayout?: 'inline' | 'docked';
+    /** Override the surface default draft mode. Modal defaults to `true` (staged commit). */
+    draft?: boolean;
+};
+
+type BodyProps = Omit<DatePickerModalProps, 'isOpen' | 'onClose' | 'value' | 'onChange' | 'draft'>;
+
+function DatePickerModalBody({
+    children,
+    style,
+    label = 'Select date',
+    disableStatusBar,
+    disableStatusBarPadding,
+    confirmLabel = 'OK',
+    cancelLabel = 'Cancel',
+    editIcon = 'pencil',
+    calendarIcon = 'calendar',
+    headerLayout,
+    ...rest
+}: BodyProps) {
+    const ctx = useDatePickerContext();
+    const dimensions = useWindowDimensions();
+    const [editing, setEditing] = useState(false);
+
+    const { containerStyle, headerStyle, barStyle, modalStyle } = useMemo(() => {
+        const isHeaderBackgroundLight = true;
+        return {
+            containerStyle: [StyleSheet.absoluteFill, styles.container],
+            headerStyle: [
+                datePickerModalStyles.headlineContainer,
+                {
+                    paddingTop:
+                        disableStatusBarPadding || Platform.OS !== 'android'
+                            ? datePickerModalStyles.headlineContainer.paddingTop
+                            : (datePickerModalStyles.headlineContainer.paddingTop as number) +
+                              (StatusBar.currentHeight || 0),
+                },
+            ],
+            barStyle: (isHeaderBackgroundLight
+                ? 'dark-content'
+                : 'light-content') as StatusBarStyle,
+            modalStyle: [
+                datePickerModalStyles.content,
+                dimensions.width > 650 ? { maxHeight: 600 } : { borderRadius: 0 },
+                style,
+            ],
+        };
+    }, [dimensions.width, disableStatusBarPadding, style]);
+
+    const draft =
+        ctx.draftValue && typeof ctx.draftValue === 'object' && 'start' in ctx.draftValue
+            ? null
+            : ctx.draftValue;
+
+    const summaryLabel = useMemo(() => {
+        if (editing) return 'Enter dates';
+        if (!draft) return 'Select date';
+        return format(draft, 'EEE, MMM d');
+    }, [draft, editing]);
+
+    const body = editing ? (
+        <View style={datePickerModalStyles.inputContainer}>
+            <DateField autoFocus>
+                <TextInput.Label>Date</TextInput.Label>
+            </DateField>
+        </View>
+    ) : (
+        children ?? <DateCalendar headerLayout={headerLayout} showOutsideDays={false} />
+    );
+
+    return (
+        <View style={containerStyle} pointerEvents="box-none">
+            <Portal>
+                <Modal
+                    {...rest}
+                    isOpen={ctx.open}
+                    onClose={ctx.cancel}
+                    style={modalStyle}
+                    elevation={0}>
+                    <>
+                        {disableStatusBar ? null : (
+                            <StatusBar translucent={true} barStyle={barStyle} />
+                        )}
+                        <View style={datePickerModalStyles.frame}>
+                            <View style={headerStyle}>
+                                <View style={datePickerModalStyles.headerCopy}>
+                                    <Text style={datePickerModalStyles.headline}>{label}</Text>
+                                    <Text
+                                        style={datePickerModalStyles.supporting}
+                                        numberOfLines={1}
+                                        adjustsFontSizeToFit={true}>
+                                        {summaryLabel}
+                                    </Text>
+                                </View>
+                                <IconButton
+                                    name={editing ? calendarIcon : editIcon}
+                                    accessibilityLabel={
+                                        editing ? 'Show calendar' : 'Enter date manually'
+                                    }
+                                    onPress={() => setEditing(prev => !prev)}
+                                    style={datePickerModalStyles.modeToggle}
+                                />
+                            </View>
+                            <View style={datePickerModalStyles.body}>{body}</View>
+                            <DatePickerActions
+                                cancelLabel={cancelLabel}
+                                confirmLabel={confirmLabel}
+                            />
+                        </View>
+                    </>
+                </Modal>
+            </Portal>
+        </View>
+    );
+}
+
+function DatePickerModalLayer({
+    base,
+    draft: draftProp,
+    bodyProps,
+}: {
+    base: DatePickerContextType;
+    draft: boolean | undefined;
+    bodyProps: BodyProps;
+}) {
+    const effectiveDraft = draftProp ?? base.providerDraft ?? true;
+    const ctx = useMemo(() => withDraftLayer(base, effectiveDraft), [base, effectiveDraft]);
+    if (!base.open) return null;
+    return (
+        <DatePickerContext value={ctx}>
+            <DatePickerModalBody {...bodyProps} />
+        </DatePickerContext>
+    );
+}
+
+function DatePickerModalAdapter({
+    draft,
+    bodyProps,
+}: {
+    draft: boolean | undefined;
+    bodyProps: BodyProps;
+}) {
+    const base = useDatePickerContext();
+    return <DatePickerModalLayer base={base} draft={draft} bodyProps={bodyProps} />;
+}
+
+function DatePickerModalInner({
+    isOpen: isOpenProp,
+    onClose: onCloseProp,
+    value: valueProp,
+    onChange: onChangeProp,
+    draft: draftProp,
+    ...rest
+}: DatePickerModalProps) {
+    const outer = useOptionalDatePickerContext();
+
+    const onOpenChange = useCallback(
+        (next: boolean) => {
+            if (!next) onCloseProp?.();
+        },
+        [onCloseProp],
+    );
+
+    if (outer) {
+        return <DatePickerModalLayer base={outer} draft={draftProp} bodyProps={rest} />;
+    }
+
+    return (
+        <DatePickerProvider
+            value={valueProp}
+            onChange={onChangeProp}
+            open={isOpenProp}
+            onOpenChange={onOpenChange}>
+            <DatePickerModalAdapter draft={draftProp} bodyProps={rest} />
+        </DatePickerProvider>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: { backgroundColor: 'transparent' },
+});
+
+const DatePickerModalDefault = memo(DatePickerModalInner);
+
+export default DatePickerModalDefault;
+
+export const DatePickerModal = getRegisteredComponentWithFallback(
+    'DatePickerModal',
+    DatePickerModalDefault,
+);

package/components/DatePicker/DatePickerPopover.tsx

@@ -0,0 +1,79 @@
+import type { ReactNode, RefObject } from 'react';
+import { memo, useMemo } from 'react';
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredComponentWithFallback } from '../../core';
+import { Popover, type PopoverProps } from '../Popover';
+import { DatePickerContext, useOptionalDatePickerContext, withDraftLayer } from './context';
+import { DatePickerActions } from './DatePickerActions';
+
+export type DatePickerPopoverProps = Omit<
+    PopoverProps,
+    'children' | 'triggerRef' | 'isOpen' | 'onClose'
+> & {
+    children: ReactNode;
+    triggerRef?: RefObject<any>;
+    isOpen?: boolean;
+    onClose?: () => void;
+    /** Override the surface default draft mode. Popover defaults to `false` (auto-save). */
+    draft?: boolean;
+};
+
+function DatePickerPopoverInner({
+    children,
+    triggerRef: triggerRefProp,
+    isOpen: isOpenProp,
+    onClose: onCloseProp,
+    draft: draftProp,
+    ...rest
+}: DatePickerPopoverProps) {
+    const base = useOptionalDatePickerContext();
+
+    const effectiveDraft = draftProp ?? base?.providerDraft ?? false;
+    const ctx = useMemo(
+        () => (base ? withDraftLayer(base, effectiveDraft) : null),
+        [base, effectiveDraft],
+    );
+
+    const triggerRef = triggerRefProp ?? ctx?.triggerRef;
+    const isOpen = isOpenProp ?? ctx?.open ?? false;
+    const onClose = onCloseProp ?? (() => ctx?.setOpen(false));
+
+    if (!triggerRef || !ctx) return null;
+
+    return (
+        <DatePickerContext value={ctx}>
+            <Popover
+                align="end"
+                position="bottom"
+                offset={20}
+                {...rest}
+                style={[styles.popover, rest.style]}
+                triggerRef={triggerRef}
+                isOpen={isOpen}
+                onClose={onClose}>
+                <View>
+                    {children}
+                    <DatePickerActions />
+                </View>
+            </Popover>
+        </DatePickerContext>
+    );
+}
+
+const styles = StyleSheet.create(theme => ({
+    popover: {
+        borderRadius: theme.shapes.corner.large,
+        overflow: 'hidden',
+    },
+}));
+
+const DatePickerPopoverDefault = memo(DatePickerPopoverInner);
+
+export default DatePickerPopoverDefault;
+
+export const DatePickerPopover = getRegisteredComponentWithFallback(
+    'DatePickerPopover',
+    DatePickerPopoverDefault,
+);