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

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

package/components/DatePicker/DatePickerProvider.tsx

@@ -0,0 +1,152 @@
+import type { ReactNode } from 'react';
+import { memo, useCallback, useMemo, useRef, useState } from 'react';
+
+import { getRegisteredComponentWithFallback } from '../../core';
+import { useControlledValue } from '../../hooks';
+import type { ValidRangeType } from '../DatePickerInline';
+import type { DatePickerContextType, DatePickerMode, DatePickerValue, RangeValue } from './context';
+import { DatePickerContext, withDraftLayer } from './context';
+
+const DATE_FORMAT_BY_MODE: Record<DatePickerMode, string> = {
+    date: 'dd/MM/yyyy',
+    time: 'HH:mm',
+    datetime: 'dd/MM/yyyy HH:mm',
+    range: 'dd/MM/yyyy',
+};
+
+const emptyRange: RangeValue = { start: null, end: null };
+
+const nullValueFor = (mode: DatePickerMode): DatePickerValue =>
+    mode === 'range' ? emptyRange : null;
+
+export type DatePickerProviderProps = {
+    mode?: DatePickerMode;
+    value?: DatePickerValue;
+    defaultValue?: DatePickerValue;
+    onChange?: (value: DatePickerValue) => void;
+
+    draft?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+
+    locale?: string;
+    validRange?: ValidRangeType;
+    is24Hour?: boolean;
+    dateFormat?: string;
+    disabled?: boolean;
+
+    children: ReactNode;
+};
+
+function DatePickerProviderInner({
+    mode = 'date',
+    value: valueProp,
+    defaultValue,
+    onChange,
+    draft: draftProp,
+    open: openProp,
+    defaultOpen = false,
+    onOpenChange,
+    locale,
+    validRange,
+    is24Hour = false,
+    dateFormat,
+    disabled,
+    children,
+}: DatePickerProviderProps) {
+    const triggerRef = useRef<any>(null);
+
+    const [value, setCommittedValue] = useControlledValue<DatePickerValue>({
+        value: valueProp,
+        defaultValue: defaultValue ?? nullValueFor(mode),
+        onChange,
+    });
+
+    const [open, setOpen] = useControlledValue<boolean>({
+        value: openProp,
+        defaultValue: defaultOpen,
+        onChange: onOpenChange,
+    });
+
+    const [draftBuffer, setDraftBuffer] = useState<DatePickerValue>(value);
+
+    const prevOpenRef = useRef(open);
+    const prevValueRef = useRef(value);
+
+    if (open && !prevOpenRef.current && draftBuffer !== value) {
+        setDraftBuffer(value);
+    }
+    if (prevValueRef.current !== value && draftBuffer !== value) {
+        setDraftBuffer(value);
+    }
+    prevOpenRef.current = open;
+    prevValueRef.current = value;
+
+    const commitValue = useCallback(
+        (next: DatePickerValue) => {
+            setCommittedValue(next);
+            setDraftBuffer(next);
+        },
+        [setCommittedValue],
+    );
+
+    const resolvedFormat = dateFormat ?? DATE_FORMAT_BY_MODE[mode];
+    const defaultDraft = draftProp ?? true;
+
+    const ctx = useMemo<DatePickerContextType>(() => {
+        const base: DatePickerContextType = {
+            mode,
+            value,
+            draftBuffer,
+            setCommittedValue,
+            setDraftBuffer,
+            providerDraft: draftProp,
+
+            // Placeholders — withDraftLayer rebuilds these.
+            draft: defaultDraft,
+            draftValue: value,
+            setValue: () => {},
+            commit: () => {},
+            cancel: () => {},
+
+            commitValue,
+
+            open,
+            setOpen,
+            triggerRef,
+            locale,
+            validRange,
+            is24Hour,
+            dateFormat: resolvedFormat,
+            disabled,
+        };
+        return withDraftLayer(base, defaultDraft);
+    }, [
+        mode,
+        value,
+        draftBuffer,
+        setCommittedValue,
+        draftProp,
+        defaultDraft,
+        commitValue,
+        open,
+        setOpen,
+        locale,
+        validRange,
+        is24Hour,
+        resolvedFormat,
+        disabled,
+    ]);
+
+    return <DatePickerContext value={ctx}>{children}</DatePickerContext>;
+}
+
+const DatePickerProviderDefault = memo(DatePickerProviderInner);
+
+export default DatePickerProviderDefault;
+
+export const DatePickerProvider = getRegisteredComponentWithFallback(
+    'DatePickerProvider',
+    DatePickerProviderDefault,
+);

package/components/DatePicker/DatePickerTrigger.tsx

@@ -0,0 +1,23 @@
+import type { ReactElement } from 'react';
+import { memo, useCallback } from 'react';
+
+import { getRegisteredComponentWithFallback } from '../../core';
+import { Slot } from '../Slot';
+import { useDatePickerContext } from './context';
+
+const DatePickerTriggerDefault = memo(({ children }: { children: ReactElement }) => {
+    const { open, setOpen, disabled, triggerRef } = useDatePickerContext();
+
+    const onPress = useCallback(() => setOpen(!open), [open, setOpen]);
+
+    return (
+        <Slot ref={triggerRef} onPress={onPress} disabled={disabled}>
+            {children}
+        </Slot>
+    );
+});
+
+export const DatePickerTrigger = getRegisteredComponentWithFallback(
+    'DatePickerTrigger',
+    DatePickerTriggerDefault,
+);

package/components/DatePicker/context.tsx

@@ -0,0 +1,82 @@
+import type { RefObject } from 'react';
+import { createContext, useContext } from 'react';
+
+import type { ValidRangeType } from '../DatePickerInline';
+import { registerPortalContext } from '../Portal';
+
+export type DatePickerMode = 'date' | 'time' | 'datetime' | 'range';
+
+export type DateValue = Date | null;
+export type RangeValue = { start: Date | null; end: Date | null };
+export type DatePickerValue = DateValue | RangeValue;
+
+export type DatePickerContextType = {
+    mode: DatePickerMode;
+
+    // Raw state shared across layers.
+    value: DatePickerValue;
+    draftBuffer: DatePickerValue;
+    setCommittedValue: (value: DatePickerValue) => void;
+    setDraftBuffer: (value: DatePickerValue) => void;
+
+    // User's explicit `draft` prop on <DatePicker.Provider>. Undefined if not passed.
+    providerDraft: boolean | undefined;
+
+    // Resolved for this layer — surfaces override these via withDraftLayer.
+    draft: boolean;
+    draftValue: DatePickerValue;
+    setValue: (value: DatePickerValue) => void;
+    commit: () => void;
+    cancel: () => void;
+
+    // Bypass setter for typed-entry fields — always commits, ignores draft.
+    commitValue: (value: DatePickerValue) => void;
+
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    triggerRef: RefObject<any>;
+    locale?: string;
+    validRange?: ValidRangeType;
+    is24Hour: boolean;
+    dateFormat: string;
+    disabled?: boolean;
+};
+
+/** Rebuilds draft-derived fields on top of a base context for a specific layer's draft mode. */
+export function withDraftLayer(base: DatePickerContextType, draft: boolean): DatePickerContextType {
+    return {
+        ...base,
+        draft,
+        draftValue: draft ? base.draftBuffer : base.value,
+        setValue: next => {
+            if (draft) base.setDraftBuffer(next);
+            else base.setCommittedValue(next);
+        },
+        commit: () => {
+            if (draft) base.setCommittedValue(base.draftBuffer);
+            base.setOpen(false);
+        },
+        cancel: () => {
+            base.setDraftBuffer(base.value);
+            base.setOpen(false);
+        },
+    };
+}
+
+export const DatePickerContext = createContext<DatePickerContextType | null>(null);
+
+export function useDatePickerContext(): DatePickerContextType {
+    const ctx = useContext(DatePickerContext);
+    if (!ctx) {
+        throw new Error(
+            'useDatePickerContext must be used within a <DatePickerProvider>. Wrap your date/time components with <DatePickerProvider>.',
+        );
+    }
+    return ctx;
+}
+
+export function useOptionalDatePickerContext(): DatePickerContextType | null {
+    return useContext(DatePickerContext);
+}
+
+registerPortalContext(DatePickerContext);

package/components/DatePicker/index.tsx

@@ -0,0 +1,44 @@
+import { DateCalendar } from './DateCalendar';
+import { DatePickerActions } from './DatePickerActions';
+import { DatePickerModal } from './DatePickerModal';
+import { DatePickerPopover } from './DatePickerPopover';
+import { DatePickerProvider } from './DatePickerProvider';
+import { DatePickerTrigger } from './DatePickerTrigger';
+
+export const DatePicker = {
+    Provider: DatePickerProvider,
+    Trigger: DatePickerTrigger,
+    Actions: DatePickerActions,
+    Calendar: DateCalendar,
+    Modal: DatePickerModal,
+    Popover: DatePickerPopover,
+};
+
+export type {
+    DatePickerContextType,
+    DatePickerMode,
+    DatePickerValue,
+    DateValue,
+    RangeValue,
+} from './context';
+export { DatePickerContext, useDatePickerContext, useOptionalDatePickerContext } from './context';
+export type { DateCalendarProps } from './DateCalendar';
+export type { DatePickerActionsProps } from './DatePickerActions';
+export { DatePickerActions } from './DatePickerActions';
+export type { DatePickerModalProps } from './DatePickerModal';
+export { DatePickerModal } from './DatePickerModal';
+export type { DatePickerPopoverProps } from './DatePickerPopover';
+export { DatePickerPopover } from './DatePickerPopover';
+export type { DatePickerProviderProps } from './DatePickerProvider';
+export { DatePickerProvider } from './DatePickerProvider';
+export { DatePickerTrigger } from './DatePickerTrigger';
+export {
+    datePickerHeaderItemStyles,
+    datePickerModalContentHeaderStyles,
+    datePickerModalEditStyles,
+    datePickerModalHeaderBackgroundStyles,
+    datePickerModalHeaderStyles,
+    datePickerModalStyles,
+    datePickerMonthItemStyles,
+    datePickerMonthPickerStyles,
+} from './utils';

package/components/DatePicker/utils.ts

@@ -0,0 +1,292 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredComponentStylesWithFallback } from '../../core';
+
+const datePickerModalStylesDefault = StyleSheet.create(theme => ({
+    header: {
+        // backgroundColor: theme.colors.surfaceContainerHighest,
+    },
+    content: {
+        minWidth: 420,
+        width: 420,
+        maxWidth: undefined,
+        flex: undefined,
+        borderRadius: theme.shapes.corner.extraLarge,
+        overflow: 'hidden',
+    },
+    frame: {
+        // backgroundColor: theme.colors.surfaceContainerHighest,
+        width: '100%',
+    },
+    headlineContainer: {
+        // backgroundColor: theme.colors.surface,
+        paddingHorizontal: theme.spacings['5'],
+        paddingTop: theme.spacings['5'],
+        paddingBottom: theme.spacings['4'],
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    headerCopy: {
+        flex: 1,
+        minWidth: 0,
+    },
+    headline: {
+        ...theme.typescale.labelLarge,
+        color: theme.colors.onSurfaceVariant,
+    },
+    supporting: {
+        fontSize: 44,
+        lineHeight: 52,
+        fontWeight: theme.typescale.displaySmall.fontWeight,
+        color: theme.colors.onSurface,
+        paddingTop: theme.spacings['2'],
+        flexShrink: 1,
+    },
+    modeToggle: {
+        color: theme.colors.onSurfaceVariant,
+        marginLeft: theme.spacings['3'],
+    },
+    body: {
+        // backgroundColor: theme.colors.surfaceContainerHighest,
+        borderTopWidth: StyleSheet.hairlineWidth,
+        borderTopColor: theme.colors.outlineVariant,
+    },
+    calendarContainer: {
+        minHeight: 320,
+        minWidth: undefined,
+        // backgroundColor: theme.colors.surfaceContainerHighest,
+    },
+    calendarRoot: {
+        // backgroundColor: theme.colors.surfaceContainerHighest,
+    },
+    inputContainer: {
+        padding: theme.spacings['6'],
+        paddingTop: theme.spacings['5'],
+        paddingBottom: theme.spacings['4'],
+    },
+    footer: {
+        // backgroundColor: theme.colors.surface,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        columnGap: theme.spacings['2'],
+        paddingHorizontal: theme.spacings['4'],
+        paddingTop: theme.spacings['0'],
+        paddingBottom: theme.spacings['2'],
+    },
+}));
+
+const datePickerModalHeaderStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        color: theme.colors.onPrimary,
+    },
+    animated: {
+        paddingBottom: theme.spacings['0'],
+        elevation: 4,
+    },
+    safeContent: {
+        paddingBottom: theme.spacings['0'],
+
+        variants: {
+            state: {
+                disableSafeTop: {
+                    paddingTop: 0,
+                },
+            },
+        },
+    },
+    safeContentNoTop: {
+        paddingTop: theme.spacings['0'],
+    },
+    appbarHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: theme.spacings['2'],
+        paddingVertical: theme.spacings['2'],
+        elevation: 0,
+        backgroundColor: 'transparent',
+    },
+}));
+
+const datePickerModalContentHeaderStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        color: theme.colors.onPrimary,
+    },
+
+    fill: {
+        flex: 1,
+    },
+    header: {
+        height: 75,
+        alignItems: 'center',
+        flexDirection: 'row',
+        paddingLeft: theme.spacings['6'],
+        paddingRight: theme.spacings['3'],
+    },
+    headerContentContainer: {
+        marginTop: theme.spacings['1'],
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    label: {
+        color: theme.colors.onPrimary,
+        letterSpacing: 1,
+        fontSize: theme.typescale.bodyMedium.fontSize,
+    },
+    headerText: {
+        fontSize: theme.typescale.bodyMedium.fontSize,
+        color: theme.colors.onPrimary,
+    },
+    headerSeparator: {
+        fontSize: theme.typescale.bodyMedium.fontSize,
+        paddingLeft: theme.spacings['2'],
+        paddingRight: theme.spacings['2'],
+        color: theme.colors.onPrimary,
+    },
+    icon: {
+        color: theme.colors.onPrimary,
+    },
+}));
+
+const datePickerModalHeaderBackgroundStylesDefault = StyleSheet.create(theme => ({
+    header: {
+        backgroundColor: theme.colors.primary,
+        paddingBottom: theme.spacings['0'],
+        elevation: 4,
+    },
+    safeContent: {
+        paddingBottom: theme.spacings['0'],
+    },
+}));
+
+const datePickerModalEditStylesDefault = StyleSheet.create(theme => ({
+    container: { padding: theme.spacings['3'] },
+    inner: { flexDirection: 'row' },
+    inputContainer: { flex: 1 },
+    input: { flex: 1 },
+    separator: { width: 12 },
+}));
+
+const datePickerPopoverHeaderStylesDefault = StyleSheet.create(theme => ({
+    buttonContainer: {
+        height: 46,
+        // width: '50%',
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    buttonWrapper: {},
+    spacer: { flex: 1 },
+    labelStyle: {
+        ...theme.typescale.labelLarge,
+        color: theme.colors.onSurfaceVariant,
+        marginRight: theme.spacings['2'],
+    },
+    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 datePickerPopoverMonthPickerStylesDefault = 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 datePickerPopoverMonthItemStylesDefault = 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,
+                },
+            },
+        },
+    },
+}));
+
+export const datePickerModalStyles = getRegisteredComponentStylesWithFallback(
+    'DatePickerModal',
+    datePickerModalStylesDefault,
+);
+export const datePickerModalHeaderStyles = getRegisteredComponentStylesWithFallback(
+    'DatePickerModal_Header',
+    datePickerModalHeaderStylesDefault,
+);
+export const datePickerModalContentHeaderStyles = getRegisteredComponentStylesWithFallback(
+    'DatePickerModal_ContentHeader',
+    datePickerModalContentHeaderStylesDefault,
+);
+export const datePickerModalHeaderBackgroundStyles = getRegisteredComponentStylesWithFallback(
+    'DatePickerModal_HeaderBackground',
+    datePickerModalHeaderBackgroundStylesDefault,
+);
+export const datePickerModalEditStyles = getRegisteredComponentStylesWithFallback(
+    'DatePickerModal_Edit',
+    datePickerModalEditStylesDefault,
+);
+export const datePickerHeaderItemStyles = getRegisteredComponentStylesWithFallback(
+    'DatePicker_HeaderItem',
+    datePickerPopoverHeaderStylesDefault,
+);
+export const datePickerMonthPickerStyles = getRegisteredComponentStylesWithFallback(
+    'DatePickerPopover_MonthPicker',
+    datePickerPopoverMonthPickerStylesDefault,
+);
+export const datePickerMonthItemStyles = getRegisteredComponentStylesWithFallback(
+    'DatePickerPopover_MonthItem',
+    datePickerPopoverMonthItemStylesDefault,
+);

package/components/DatePickerInline/DatePickerContext.tsx

@@ -18,4 +18,5 @@ export const {
     Provider,
     useContext: useDatePickerStore,
     useContextValue: useDatePickerStoreValue,
+    useStoreRef: useDatePickerStoreRef,
 } = createFastContext<Store>();