@multiplatform.one/frappe-ui 6.7.0 → 7.0.0

package/src/fields/Date/index.native.tsx

@@ -0,0 +1,410 @@
+import {
+  formatAbsoluteDate,
+  formatAbsoluteDateTime,
+  formatTimeOfDay,
+} from "@multiplatform.one/theme";
+import {
+  Field,
+  FieldLayout,
+  Skeleton,
+  formCommonColors,
+  getFieldError,
+  mergeFieldHandler,
+  useFormField,
+  useResolvedValidators,
+} from "@multiplatform.one/forms";
+import { useState } from "react";
+import { Modal, Pressable, StyleSheet, useColorScheme } from "react-native";
+import { platform } from "@multiplatform.one/platform";
+import DateTimePicker, { type DateTimePickerEvent } from "@react-native-community/datetimepicker";
+import { Button, Text, View, XStack, YStack, useProps, useTheme, useThemeName } from "tamagui";
+import type { DateProps } from "./types";
+import { fromFrappeDateValue, toFrappeDateValue } from "./wire";
+
+export type { DateProps } from "./types";
+
+type FieldType = "date" | "datetime" | "time";
+
+/**
+ * Display value for the trigger — the house registers (LC-12 render channel),
+ * so the native picker reads the same voice as the web picker, table date
+ * cells and the timeline. A picker is an editing surface, so the year is
+ * always shown.
+ */
+function formatDisplayValue(value: string, type: FieldType): string {
+  if (!value) return "";
+  try {
+    const date = fromFrappeDateValue(value, type);
+    if (type === "time") return formatTimeOfDay(date);
+    if (type === "datetime") return formatAbsoluteDateTime(date, { year: "always" });
+    return formatAbsoluteDate(date, { year: "always" });
+  } catch {
+    return value;
+  }
+}
+
+/**
+ * The form branch stores what the picker committed (a `Date`, matching the
+ * web half); the standalone branch is handed the Frappe wire string. Both
+ * arrive here so the rest of the component reads one shape.
+ */
+function toWireValue(raw: unknown, type: FieldType): string {
+  if (raw == null || raw === "") return "";
+  if (raw instanceof Date) return Number.isNaN(raw.getTime()) ? "" : toFrappeDateValue(raw, type);
+  return String(raw);
+}
+
+/** What the picker opens on: the current value, else now. */
+function seedDate(wire: string, type: FieldType): Date {
+  if (!wire) return new Date();
+  try {
+    const parsed = fromFrappeDateValue(wire, type);
+    return Number.isNaN(parsed.getTime()) ? new Date() : parsed;
+  } catch {
+    return new Date();
+  }
+}
+
+/**
+ * The OS picker renders itself, so the only styling channel it exposes is
+ * light/dark plus an accent — see the R-IDENTITY declaration for this part.
+ * Read the app theme first and fall back to the OS scheme, the same order
+ * the native rich-text editor uses.
+ */
+function useNativePickerScheme(): "light" | "dark" {
+  const themeName = useThemeName();
+  const osScheme = useColorScheme();
+  if (themeName) return String(themeName).startsWith("dark") ? "dark" : "light";
+  return osScheme === "dark" ? "dark" : "light";
+}
+
+/**
+ * Native `Date` field for iOS and Android.
+ *
+ * Resolution picks this file over `index.tsx` on native, so the field is the
+ * real OS picker: the iOS 14+ calendar for dates (`inline`), the wheel for
+ * times, and the Material dialog on Android. Declared as `Date` rather than
+ * written as `function Date` so the global `Date` constructor stays reachable
+ * inside this module.
+ */
+function DateField<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+>(props: DateProps<TData, TName>) {
+  const {
+    compact,
+    defaultValue,
+    disabled,
+    error: errorProp,
+    form,
+    helperText,
+    id: idProp,
+    inputProps: _inputProps,
+    label,
+    labelProps,
+    maxDate,
+    minDate,
+    mode,
+    name,
+    onBlur,
+    onChange,
+    placeholder,
+    preserveValue,
+    readOnly,
+    required,
+    size,
+    skeleton,
+    type = "date",
+    validators,
+    value,
+  } = useProps(props) as DateProps<TData, TName> & Record<string, unknown>;
+
+  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp, compact });
+  const resolvedValidators = useResolvedValidators(required, validators, label, name);
+  const themeVariant = useNativePickerScheme();
+  const theme = useTheme();
+  const accentColor = theme.accentBackground?.val;
+
+  const [showPicker, setShowPicker] = useState(false);
+  const [showTimePicker, setShowTimePicker] = useState(false);
+  const [tempDate, setTempDate] = useState<Date | null>(null);
+
+  const fieldType = type as FieldType;
+  const isIOS = platform.isIos;
+  const pickerMode: "date" | "time" =
+    fieldType === "time" || (fieldType === "datetime" && showTimePicker) ? "time" : "date";
+  // iOS 14 made the calendar the date presentation and left the wheel to time;
+  // `spinner` for a date is Apple's legacy style. `inline` rather than
+  // `compact` because the picker already lives in a sheet with its own
+  // Cancel/Done — `compact` would be a field that opens a second popover.
+  const iosDisplay = pickerMode === "time" ? "spinner" : "inline";
+
+  function closePicker() {
+    setShowPicker(false);
+    setShowTimePicker(false);
+    setTempDate(null);
+  }
+
+  function renderControl(
+    wire: string,
+    hasError: boolean,
+    commit?: (value: unknown) => void,
+    blur?: () => void,
+  ) {
+    const seed = seedDate(wire, fieldType);
+    const displayValue = formatDisplayValue(wire, fieldType);
+    const resolvedPlaceholder =
+      placeholder ??
+      (fieldType === "time"
+        ? "Select time"
+        : fieldType === "datetime"
+          ? "Select date & time"
+          : "Select date");
+
+    function emit(picked: Date) {
+      // No `previousValue`: the native picker chooses date and time itself,
+      // so there is no earlier time part to preserve (the web half's case).
+      commit?.(picked);
+      (onChange as ((v: string) => void) | undefined)?.(toFrappeDateValue(picked, fieldType));
+    }
+
+    function openPicker() {
+      if (disabled || readOnly) return;
+      setTempDate(seed);
+      setShowPicker(true);
+      setShowTimePicker(false);
+    }
+
+    function cancel() {
+      closePicker();
+      blur?.();
+    }
+
+    /** Android commits on the dialog's own OK; datetime runs date then time. */
+    function handleAndroidChange(event: DateTimePickerEvent, selected?: Date) {
+      if (event.type === "dismissed") {
+        cancel();
+        return;
+      }
+      if (event.type !== "set" || !selected) return;
+      if (fieldType === "datetime" && !showTimePicker) {
+        setTempDate(selected);
+        setShowPicker(false);
+        setShowTimePicker(true);
+        setTimeout(() => setShowPicker(true), 100);
+        return;
+      }
+      const picked =
+        fieldType === "datetime" && tempDate
+          ? new Date(
+              tempDate.getFullYear(),
+              tempDate.getMonth(),
+              tempDate.getDate(),
+              selected.getHours(),
+              selected.getMinutes(),
+            )
+          : selected;
+      emit(picked);
+      closePicker();
+      blur?.();
+    }
+
+    /** iOS stages into `tempDate`; the sheet's Done commits. */
+    function handleIOSChange(_event: DateTimePickerEvent, selected?: Date) {
+      if (!selected) return;
+      if (fieldType === "datetime" && showTimePicker && tempDate) {
+        setTempDate(
+          new Date(
+            tempDate.getFullYear(),
+            tempDate.getMonth(),
+            tempDate.getDate(),
+            selected.getHours(),
+            selected.getMinutes(),
+          ),
+        );
+        return;
+      }
+      setTempDate(selected);
+    }
+
+    function confirm() {
+      emit(tempDate ?? seed);
+      closePicker();
+      blur?.();
+    }
+
+    return (
+      <YStack {...knobProps.gap}>
+        <Button
+          onPress={openPicker}
+          disabled={disabled || readOnly}
+          justifyContent="flex-start"
+          size={size || knobProps.sizeToken}
+          {...knobProps.borderRadius}
+          borderColor={hasError ? "$red8" : "$borderColor"}
+          backgroundColor={disabled ? "$color4" : "$background"}
+          aria-label={typeof label === "string" ? label : undefined}
+          aria-invalid={hasError || undefined}
+          aria-required={required || undefined}
+        >
+          <Text color={displayValue ? formCommonColors.text : formCommonColors.muted}>
+            {displayValue || resolvedPlaceholder}
+          </Text>
+        </Button>
+
+        {/* Android: the Material dialog is its own window. */}
+        {showPicker && !isIOS && (
+          <DateTimePicker
+            value={tempDate || seed}
+            mode={pickerMode}
+            display="default"
+            onChange={handleAndroidChange}
+            minimumDate={fieldType !== "time" ? minDate : undefined}
+            maximumDate={fieldType !== "time" ? maxDate : undefined}
+          />
+        )}
+
+        {/* iOS: the picker has no chrome of its own, so it rides a sheet. */}
+        {showPicker && isIOS && (
+          <Modal transparent animationType="slide" visible={showPicker} onRequestClose={cancel}>
+            <Pressable style={styles.modalOverlay} onPress={cancel}>
+              <View
+                pointerEvents="none"
+                position="absolute"
+                top={0}
+                right={0}
+                bottom={0}
+                left={0}
+                backgroundColor="$shadow6"
+              />
+              <Pressable onPress={(e) => e.stopPropagation()}>
+                <YStack
+                  {...knobProps.elevatedSurface}
+                  // Bottom sheet: the two off-screen corners eject from the
+                  // surface fragment's radius, the visible pair keeps it.
+                  borderBottomLeftRadius={0}
+                  borderBottomRightRadius={0}
+                >
+                  <XStack justifyContent="space-between" {...knobProps.panelPadding}>
+                    <Button size="$3" chromeless onPress={cancel}>
+                      <Text color={formCommonColors.text}>Cancel</Text>
+                    </Button>
+
+                    {fieldType === "datetime" && !showTimePicker && (
+                      <Button size="$3" chromeless onPress={() => setShowTimePicker(true)}>
+                        <Text color="$accentBackground">Next</Text>
+                      </Button>
+                    )}
+
+                    {(fieldType !== "datetime" || showTimePicker) && (
+                      <Button size="$3" chromeless onPress={confirm}>
+                        <Text color="$accentBackground">Done</Text>
+                      </Button>
+                    )}
+                  </XStack>
+
+                  <YStack {...knobProps.panelPadding}>
+                    <DateTimePicker
+                      value={tempDate || seed}
+                      mode={pickerMode}
+                      display={iosDisplay}
+                      themeVariant={themeVariant}
+                      accentColor={accentColor}
+                      onChange={handleIOSChange}
+                      minimumDate={fieldType !== "time" ? minDate : undefined}
+                      maximumDate={fieldType !== "time" ? maxDate : undefined}
+                      style={pickerMode === "time" ? styles.wheel : styles.calendar}
+                    />
+                  </YStack>
+                </YStack>
+              </Pressable>
+            </Pressable>
+          </Modal>
+        )}
+      </YStack>
+    );
+  }
+
+  if (skeleton) {
+    return (
+      <FieldLayout id={id} label={label} size={size} knobProps={knobProps}>
+        <Skeleton variant="rounded" width="100%" height={knobProps.sizeToken} />
+      </FieldLayout>
+    );
+  }
+
+  if (!resolvedForm || !name) {
+    return (
+      <FieldLayout
+        id={id}
+        label={label}
+        labelProps={labelProps}
+        error={errorProp}
+        helperText={helperText}
+        required={required}
+        size={size}
+        knobProps={knobProps}
+        onBlur={onBlur}
+        // LC-40: FieldLayout owns the dimWhole assembly dim (keepLabel pins
+        // the sibling label/helper readable) — it needs the disabled state.
+        disabled={disabled}
+      >
+        {renderControl(toWireValue(value, fieldType), !!errorProp, undefined, onBlur)}
+      </FieldLayout>
+    );
+  }
+
+  return (
+    <Field
+      defaultValue={defaultValue}
+      form={resolvedForm}
+      mode={mode}
+      name={name as string}
+      preserveValue={preserveValue}
+      validators={resolvedValidators}
+    >
+      {(field) => {
+        const resolvedError = getFieldError(field, errorProp);
+        return (
+          <FieldLayout
+            id={id}
+            label={label}
+            labelProps={labelProps}
+            error={resolvedError}
+            helperText={helperText}
+            required={required}
+            size={size}
+            knobProps={knobProps}
+            disabled={disabled}
+          >
+            {renderControl(
+              toWireValue(value ?? field.state.value, fieldType),
+              !!resolvedError,
+              mergeFieldHandler(field, "handleChange"),
+              mergeFieldHandler(field, "handleBlur", onBlur),
+            )}
+          </FieldLayout>
+        );
+      }}
+    </Field>
+  );
+}
+
+export { DateField as Date };
+
+const styles = StyleSheet.create({
+  modalOverlay: {
+    flex: 1,
+    justifyContent: "flex-end",
+  },
+  // The OS picker sizes itself from its presentation: the inline calendar
+  // needs a grid's worth of height, the wheel needs a wheel's.
+  calendar: {
+    height: 360,
+    width: "100%",
+  },
+  wheel: {
+    height: 200,
+    width: "100%",
+  },
+});

package/src/fields/Date/index.tsx

@@ -1,45 +1,62 @@
-import type { FormFieldProps, FieldComponentProps } from "@multiplatform.one/forms";
-import { DatePicker as FormsDatePicker } from "@multiplatform.one/forms";
-import type { DeepKeys } from "@tanstack/form-core";
+/**
+ * Web `Date` field for the three Frappe date fieldtypes.
+ *
+ * The field used to render ONE date-only calendar for all three types, with
+ * only the placeholder varying — so a `Datetime` silently dropped its time
+ * component from the picker and a `Time` rendered EMPTY, because the calendar
+ * adopts its value through `coerceToDate`, for which a bare `HH:mm` is not a
+ * date (SB-M-617). Each type now gets the house primitive that matches it:
+ *
+ *   date      → forms `DatePicker`      (month grid)
+ *   datetime  → forms `DatetimePicker`  (Date/Time tabs — grid, then columns)
+ *   time      → the package's own `TimePicker`, which is also what the field
+ *               registry routes the Frappe `Time` fieldtype to, so a
+ *               `Date type="time"` and a `Time` field are one control
+ *
+ * This mirrors what the native half already does (calendar / wheel /
+ * calendar-then-wheel), and every branch serializes through the one shared
+ * `wire.ts` body, so a web pick and a native pick of the same moment persist
+ * byte-identical strings.
+ */
+
+import {
+  DatePicker as FormsDatePicker,
+  DatetimePicker as FormsDatetimePicker,
+} from "@multiplatform.one/forms";
+import { useMemo } from "react";
 import { useProps } from "tamagui";
-import { toFrappeDateValue } from "./wire";
+import { TimePicker, type TimePickerProps } from "../TimePicker";
+import type { DateProps } from "./types";
+import { fromFrappeDateValue, toFrappeDateValue } from "./wire";
 
-export type DateProps<
-  TData extends Record<string, unknown> = Record<string, unknown>,
-  TName extends string = string,
-> = Omit<
-  FormFieldProps<
-    TData,
-    TName extends DeepKeys<TData> ? TName : DeepKeys<TData>,
-    unknown,
-    unknown,
-    string
-  >,
-  // "onChange": FormFieldProps carries the DOM ChangeEventHandler from
-  // YStackProps; this field exposes a canonical value callback instead.
-  "children" | "field" | "onChange"
-> &
-  Partial<
-    Omit<
-      FieldComponentProps<
-        TData,
-        TName extends DeepKeys<TData> ? TName : DeepKeys<TData>,
-        unknown,
-        unknown,
-        string
-      >,
-      "children"
-    >
-  > & {
-    value?: string;
-    onChange?: (value: string) => void;
-    type?: "date" | "datetime" | "time";
-    disabled?: boolean;
-    readOnly?: boolean;
-    skeleton?: boolean;
-    compact?: boolean;
-    inputProps?: Record<string, unknown>;
-  };
+export type { DateProps } from "./types";
+
+/**
+ * Adopt a Frappe datetime wire string through the shared read body rather
+ * than handing the raw string to the picker, whose `coerceToDate` falls
+ * through to `new Date(string)` for anything that is not date-only —
+ * implementation-defined for the space-separated shape Frappe writes.
+ * Memoized by the caller so the Date identity is stable across renders: the
+ * picker re-seeds its display state from every new `value` identity, which
+ * would otherwise discard an in-progress edit on an unrelated re-render.
+ */
+function toPickerDate(value: string | undefined): Date | null {
+  if (!value) return null;
+  const date = fromFrappeDateValue(value, "datetime");
+  return Number.isNaN(date.getTime()) ? null : date;
+}
+
+/**
+ * `TimePicker` speaks `HH:mm`; Frappe stores `HH:mm:ss`. Round-tripping
+ * through the shared wire body — rather than padding the string here — is
+ * what keeps the two platform halves byte-identical, since the native half
+ * serializes its wheel pick through exactly this call.
+ */
+function toTimeWireValue(picked: string): string {
+  if (!picked) return "";
+  const date = fromFrappeDateValue(picked, "time");
+  return Number.isNaN(date.getTime()) ? "" : toFrappeDateValue(date, "time");
+}
 
 export function Date<
   TData extends Record<string, unknown> = Record<string, unknown>,
@@ -61,6 +78,82 @@ export function Date<
     ...fieldProps
   } = useProps(props) as DateProps<TData, TName> & Record<string, unknown>;
 
+  const wireValue = value as string | undefined;
+  const emit = onChange as ((v: string) => void) | undefined;
+  const datetimeValue = useMemo(
+    () => (type === "datetime" ? toPickerDate(wireValue) : null),
+    [type, wireValue],
+  );
+
+  const placeholder =
+    (fieldProps.placeholder as string | undefined) ??
+    (type === "time" ? "Select time" : type === "datetime" ? "Select date & time" : "Select date");
+
+  if (type === "time") {
+    return (
+      <TimePicker
+        // `TimePicker` is not generic over the form's data shape, so the
+        // three form props are re-cast to its own non-generic surface.
+        name={name as TimePickerProps["name"]}
+        form={form as TimePickerProps["form"]}
+        validators={validators as TimePickerProps["validators"]}
+        // The wire shape is what this control already speaks: `HH:mm[:ss]`,
+        // 24h. It adopts the string directly, so nothing has to widen the
+        // shared date parser to let a Time field display its own value.
+        value={wireValue}
+        onChange={(picked) => emit?.(toTimeWireValue(picked))}
+        defaultValue={defaultValue as string | undefined}
+        label={fieldProps.label}
+        labelProps={fieldProps.labelProps}
+        error={fieldProps.error}
+        helperText={fieldProps.helperText}
+        readOnly={fieldProps.readOnly}
+        skeleton={fieldProps.skeleton}
+        compact={fieldProps.compact}
+        required={fieldProps.required}
+        id={fieldProps.id}
+        size={fieldProps.size}
+        disabled={disabled}
+        placeholder={placeholder}
+        onBlur={onBlur}
+      />
+    );
+  }
+
+  if (type === "datetime") {
+    return (
+      <FormsDatetimePicker
+        name={name}
+        form={form}
+        validators={validators}
+        value={datetimeValue}
+        // No `previousValue`: this picker owns both halves of the value and
+        // preserves an existing time across a day change itself, so carrying
+        // the old time part here would overwrite a time the user just set.
+        // The native half passes nothing for the same reason.
+        onChange={(date) => emit?.(date ? toFrappeDateValue(date, "datetime") : "")}
+        defaultValue={defaultValue as string}
+        label={fieldProps.label}
+        labelProps={fieldProps.labelProps}
+        error={fieldProps.error}
+        helperText={fieldProps.helperText}
+        readOnly={fieldProps.readOnly}
+        skeleton={fieldProps.skeleton}
+        compact={fieldProps.compact}
+        required={fieldProps.required}
+        id={fieldProps.id}
+        size={fieldProps.size}
+        disabled={disabled}
+        minDate={fieldProps.minDate}
+        maxDate={fieldProps.maxDate}
+        placeholder={placeholder}
+        onBlur={onBlur}
+        mode={mode}
+        preserveValue={preserveValue}
+      />
+    );
+  }
+
   return (
     <FormsDatePicker
       name={name}
@@ -71,20 +164,8 @@ export function Date<
       // engine seeding) never displayed — and `onChange` was dropped, so
       // picks never reached the consumer doc. `undefined` stays undefined so
       // uncontrolled (defaultValue-only) use keeps its semantics.
-      value={value as string | undefined}
-      onChange={(date) => {
-        const emit = onChange as ((v: string) => void) | undefined;
-        if (!emit) return;
-        emit(
-          date
-            ? toFrappeDateValue(
-                date,
-                type as "date" | "datetime" | "time",
-                value as string | undefined,
-              )
-            : "",
-        );
-      }}
+      value={wireValue}
+      onChange={(date) => emit?.(date ? toFrappeDateValue(date, "date") : "")}
       defaultValue={defaultValue as string}
       label={fieldProps.label}
       labelProps={fieldProps.labelProps}
@@ -97,9 +178,9 @@ export function Date<
       id={fieldProps.id}
       size={fieldProps.size}
       disabled={disabled}
-      placeholder={
-        type === "time" ? "Select time" : type === "datetime" ? "Select date & time" : "Select date"
-      }
+      minDate={fieldProps.minDate}
+      maxDate={fieldProps.maxDate}
+      placeholder={placeholder}
       onBlur={onBlur}
       mode={mode}
       preserveValue={preserveValue}