@multiplatform.one/frappe-ui 6.7.0 → 7.0.0

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

@@ -1,299 +0,0 @@
-import {
-  formatAbsoluteDate,
-  formatAbsoluteDateTime,
-  formatTimeOfDay,
-  useResolvedKnobs,
-} from "@multiplatform.one/theme";
-import React, { useState, useCallback, useMemo } from "react";
-import { Modal, Pressable, StyleSheet, View } from "react-native";
-import { platform } from "@multiplatform.one/platform";
-import DateTimePicker, { type DateTimePickerEvent } from "@react-native-community/datetimepicker";
-import { Button, Label, Text, XStack, YStack, type YStackProps } from "tamagui";
-import { fromFrappeDateValue, toFrappeDateValue } from "./wire";
-
-export interface DateProps extends Omit<YStackProps, "children" | "onChange"> {
-  label?: string;
-  value?: string;
-  onChange: (value: string) => void;
-  type?: "date" | "datetime" | "time";
-  disabled?: boolean;
-  required?: boolean;
-  error?: string;
-  placeholder?: string;
-  minDate?: Date;
-  maxDate?: Date;
-}
-
-/**
- * Display value for the button — 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: "date" | "datetime" | "time"): 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;
-  }
-}
-
-/**
- * Native DateField component for iOS and Android
- * Uses @react-native-community/datetimepicker for native date/time pickers
- */
-export function DateNative({
-  label,
-  value = "",
-  onChange,
-  type = "date",
-  disabled = false,
-  required = false,
-  error,
-  placeholder,
-  minDate,
-  maxDate,
-  ...stackProps
-}: DateProps) {
-  const { knobProps } = useResolvedKnobs();
-  const [showPicker, setShowPicker] = useState(false);
-  const [showTimePicker, setShowTimePicker] = useState(false);
-  const [tempDate, setTempDate] = useState<Date | null>(null);
-
-  // Parse current value to Date
-  const currentDate = useMemo(() => {
-    return value ? fromFrappeDateValue(value, type) : new Date();
-  }, [value, type]);
-
-  // Determine picker mode
-  const pickerMode = useMemo(() => {
-    if (type === "time") return "time";
-    if (type === "datetime" && showTimePicker) return "time";
-    return "date";
-  }, [type, showTimePicker]);
-
-  const handlePress = useCallback(() => {
-    if (disabled) return;
-    setTempDate(currentDate);
-    setShowPicker(true);
-    setShowTimePicker(false);
-  }, [disabled, currentDate]);
-
-  const handleChange = useCallback(
-    (event: DateTimePickerEvent, selectedDate?: Date) => {
-      const isAndroid = platform.isAndroid;
-
-      if (event.type === "dismissed") {
-        setShowPicker(false);
-        setShowTimePicker(false);
-        setTempDate(null);
-        return;
-      }
-
-      if (event.type === "set" && selectedDate) {
-        if (type === "datetime" && !showTimePicker && !isAndroid) {
-          // On iOS, show time picker after date selection for datetime
-          setTempDate(selectedDate);
-          setShowTimePicker(true);
-          return;
-        }
-
-        if (type === "datetime" && isAndroid && !showTimePicker) {
-          // On Android, first show date, then time
-          setTempDate(selectedDate);
-          setShowPicker(false);
-          setShowTimePicker(true);
-          // Show time picker immediately
-          setTimeout(() => setShowPicker(true), 100);
-          return;
-        }
-
-        // Final value selection
-        const finalDate =
-          type === "datetime" && tempDate
-            ? new Date(
-                tempDate.getFullYear(),
-                tempDate.getMonth(),
-                tempDate.getDate(),
-                selectedDate.getHours(),
-                selectedDate.getMinutes(),
-              )
-            : selectedDate;
-
-        onChange(toFrappeDateValue(finalDate, type));
-        setShowPicker(false);
-        setShowTimePicker(false);
-        setTempDate(null);
-      }
-    },
-    [type, showTimePicker, tempDate, onChange],
-  );
-
-  const handleIOSConfirm = useCallback(() => {
-    if (tempDate) {
-      onChange(toFrappeDateValue(tempDate, type));
-    }
-    setShowPicker(false);
-    setShowTimePicker(false);
-    setTempDate(null);
-  }, [tempDate, type, onChange]);
-
-  const handleIOSCancel = useCallback(() => {
-    setShowPicker(false);
-    setShowTimePicker(false);
-    setTempDate(null);
-  }, []);
-
-  const handleIOSDateChange = useCallback(
-    (_event: DateTimePickerEvent, selectedDate?: Date) => {
-      if (selectedDate) {
-        if (type === "datetime" && !showTimePicker) {
-          setTempDate(selectedDate);
-        } else if (type === "datetime" && showTimePicker && tempDate) {
-          // Merge date from tempDate with time from selectedDate
-          const merged = new Date(
-            tempDate.getFullYear(),
-            tempDate.getMonth(),
-            tempDate.getDate(),
-            selectedDate.getHours(),
-            selectedDate.getMinutes(),
-          );
-          setTempDate(merged);
-        } else {
-          setTempDate(selectedDate);
-        }
-      }
-    },
-    [type, showTimePicker, tempDate],
-  );
-
-  const displayValue = useMemo(() => formatDisplayValue(value, type), [value, type]);
-
-  const isIOS = platform.isIos;
-
-  return (
-    <YStack {...knobProps.gap} {...stackProps}>
-      {label && (
-        <Label>
-          {label}
-          {required && (
-            <Text color="$red10" fontSize="$3">
-              {" *"}
-            </Text>
-          )}
-        </Label>
-      )}
-
-      <Button
-        onPress={handlePress}
-        disabled={disabled}
-        justifyContent="flex-start"
-        paddingHorizontal="$3"
-        height={44}
-        {...knobProps.borderRadius}
-        borderColor={error ? "$red8" : "$borderColor"}
-        backgroundColor={disabled ? "$color4" : "$background"}
-      >
-        <Text color={value ? "$color" : "$color9"}>
-          {displayValue || placeholder || `Select ${type}...`}
-        </Text>
-      </Button>
-
-      {error && (
-        <Text color="$red10" fontSize="$2">
-          {error}
-        </Text>
-      )}
-
-      {/* Android: Inline picker */}
-      {showPicker && !isIOS && (
-        <DateTimePicker
-          value={tempDate || currentDate}
-          mode={pickerMode}
-          display="default"
-          onChange={handleChange}
-          minimumDate={minDate}
-          maximumDate={maxDate}
-        />
-      )}
-
-      {/* iOS: Modal picker */}
-      {showPicker && isIOS && (
-        <Modal
-          transparent
-          animationType="slide"
-          visible={showPicker}
-          onRequestClose={handleIOSCancel}
-        >
-          <Pressable style={styles.modalOverlay} onPress={handleIOSCancel}>
-            <View style={styles.modalContent}>
-              <Pressable onPress={(e) => e.stopPropagation()}>
-                <XStack
-                  justifyContent="space-between"
-                  paddingHorizontal="$4"
-                  paddingVertical="$2"
-                  {...{ backgroundColor: "$color2" }}
-                  borderTopLeftRadius="$4"
-                  borderTopRightRadius="$4"
-                >
-                  <Button size="$3" chromeless onPress={handleIOSCancel}>
-                    <Text color="$red10">Cancel</Text>
-                  </Button>
-
-                  {type === "datetime" && !showTimePicker && (
-                    <Button size="$3" chromeless onPress={() => setShowTimePicker(true)}>
-                      <Text color="$accentBackground">Next</Text>
-                    </Button>
-                  )}
-
-                  {(type !== "datetime" || showTimePicker) && (
-                    <Button size="$3" chromeless onPress={handleIOSConfirm}>
-                      <Text color="$accentBackground">Done</Text>
-                    </Button>
-                  )}
-                </XStack>
-
-                <View style={styles.pickerContainer}>
-                  <DateTimePicker
-                    value={tempDate || currentDate}
-                    mode={pickerMode}
-                    display="spinner"
-                    onChange={handleIOSDateChange}
-                    minimumDate={type !== "time" ? minDate : undefined}
-                    maximumDate={type !== "time" ? maxDate : undefined}
-                    style={styles.picker}
-                  />
-                </View>
-              </Pressable>
-            </View>
-          </Pressable>
-        </Modal>
-      )}
-    </YStack>
-  );
-}
-
-const styles = StyleSheet.create({
-  modalOverlay: {
-    flex: 1,
-    justifyContent: "flex-end",
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
-  },
-  modalContent: {
-    backgroundColor: "white",
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
-  },
-  pickerContainer: {
-    backgroundColor: "white",
-    paddingBottom: 20,
-  },
-  picker: {
-    height: 200,
-  },
-});

package/types/fields/Date/date.native.d.ts

@@ -1,19 +0,0 @@
-import { type YStackProps } from "tamagui";
-export interface DateProps extends Omit<YStackProps, "children" | "onChange"> {
-    label?: string;
-    value?: string;
-    onChange: (value: string) => void;
-    type?: "date" | "datetime" | "time";
-    disabled?: boolean;
-    required?: boolean;
-    error?: string;
-    placeholder?: string;
-    minDate?: Date;
-    maxDate?: Date;
-}
-/**
- * Native DateField component for iOS and Android
- * Uses @react-native-community/datetimepicker for native date/time pickers
- */
-export declare function DateNative({ label, value, onChange, type, disabled, required, error, placeholder, minDate, maxDate, ...stackProps }: DateProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=date.native.d.ts.map

package/types/fields/Date/date.native.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"date.native.d.ts","sourceRoot":"","sources":["../../../src/fields/Date/date.native.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAuC,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AAGhF,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,UAAU,CAAC;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;CAChB;AAqBD;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAU,EACV,QAAQ,EACR,IAAa,EACb,QAAgB,EAChB,QAAgB,EAChB,KAAK,EACL,WAAW,EACX,OAAO,EACP,OAAO,EACP,GAAG,UAAU,EACd,EAAE,SAAS,2CAyNX"}