@multiplatform.one/forms 7.4.1 → 7.6.0

package/dist/cjs/fields/DatePicker/DatetimePicker.cjs

@@ -32,7 +32,6 @@ var import_fieldValueSync = require("./fieldValueSync.cjs");
 var import_tamagui = require("tamagui");
 var import_fieldLayout = require("../../fieldLayout.cjs");
 var import_FloatingPanel = require("../../FloatingPanel/index.cjs");
-var import_colorRamps = require("../../shared/colorRamps.cjs");
 var import_t = require("../../shared/t.cjs");
 var import_TimeColumn = require("../../shared/TimeColumn.cjs");
 var import_utils2 = require("../../shared/utils.cjs");
@@ -55,9 +54,6 @@ function formatDatetimeDisplay(date, timeFormat, showSeconds) {
     seconds: showSeconds
   });
 }
-const hours24 = (0, import_TimeColumn.generateRange)(0, 23);
-const hours12 = (0, import_TimeColumn.generateRange)(1, 12);
-const secondValues = (0, import_TimeColumn.generateRange)(0, 59);
 function DayGrid({
   calendarData,
   selectedDate,
@@ -81,132 +77,24 @@ function TimeSection({
   minuteStep,
   showSeconds
 }) {
-  const {
-    knobProps
-  } = (0, import_parts.useCalendarKnobs)();
   const {
     h,
     m,
     s
   } = parseTimeFromDate(selectedDate);
-  const minuteValues = (0, import_react.useMemo)(() => (0, import_TimeColumn.generateRange)(0, 59, minuteStep), [minuteStep]);
-  const makeNewDate = (0, import_react.useCallback)((newH, newM, newS) => {
-    const newDate = new Date(selectedDate);
-    newDate.setHours(newH, newM, newS);
-    return newDate;
-  }, [selectedDate]);
-  const secondsColumn = showSeconds && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumnSeparator, {
-      knobProps
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumn, {
-      label: (0, import_t.t)("Sec"),
-      values: secondValues,
-      selected: s,
-      onChange: newS => onTimeChange(makeNewDate(h, m, newS)),
-      knobProps
-    })]
-  });
-  if (timeFormat === "24h") {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
-      flexDirection: "row",
-      gap: "$2",
-      alignItems: "flex-start",
-      justifyContent: "center",
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumn, {
-        label: (0, import_t.t)("Hour"),
-        values: hours24,
-        selected: h,
-        onChange: newH => onTimeChange(makeNewDate(newH, m, s)),
-        knobProps
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumnSeparator, {
-        knobProps
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumn, {
-        label: (0, import_t.t)("Min"),
-        values: minuteValues,
-        selected: m,
-        onChange: newM => onTimeChange(makeNewDate(h, newM, s)),
-        knobProps
-      }), secondsColumn]
-    });
-  }
-  const period = h >= 12 ? "PM" : "AM";
-  const display12H = h === 0 ? 12 : h > 12 ? h - 12 : h;
-  const handleHourChange = newDisplayH => {
-    let h24 = newDisplayH;
-    if (period === "AM") {
-      h24 = newDisplayH === 12 ? 0 : newDisplayH;
-    } else {
-      h24 = newDisplayH === 12 ? 12 : newDisplayH + 12;
-    }
-    onTimeChange(makeNewDate(h24, m, s));
-  };
-  const handlePeriodChange = newPeriod => {
-    if (newPeriod === period) return;
-    const newH = newPeriod === "AM" ? h >= 12 ? h - 12 : h : h < 12 ? h + 12 : h;
-    onTimeChange(makeNewDate(newH, m, s));
-  };
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
-    flexDirection: "row",
-    gap: "$2",
-    alignItems: "flex-start",
-    justifyContent: "center",
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumn, {
-      label: (0, import_t.t)("Hour"),
-      values: hours12,
-      selected: display12H,
-      onChange: handleHourChange,
-      knobProps
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumnSeparator, {
-      knobProps
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumn, {
-      label: (0, import_t.t)("Min"),
-      values: minuteValues,
-      selected: m,
-      onChange: newM => onTimeChange(makeNewDate(h, newM, s)),
-      knobProps
-    }), secondsColumn, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
-      alignItems: "center",
-      gap: "$1",
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-        fontSize: "$1",
-        ...knobProps.body,
-        color: import_colorRamps.formCommonColors.muted,
-        textTransform: "uppercase",
-        letterSpacing: 1,
-        children: " "
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-        ...knobProps.borderRadius,
-        backgroundColor: import_colorRamps.formInputColors.background.base,
-        borderWidth: knobProps.inputSurface.borderWidth,
-        borderColor: import_colorRamps.formInputColors.border.base,
-        overflow: "hidden",
-        children: ["AM", "PM"].map(p => {
-          const isSelected = p === period;
-          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-            height: 36,
-            width: 48,
-            alignItems: "center",
-            justifyContent: "center",
-            cursor: "pointer",
-            backgroundColor: isSelected ? import_colorRamps.formInputColors.background.focus : "transparent",
-            hoverStyle: {
-              backgroundColor: import_colorRamps.formInputColors.background.focus
-            },
-            onPress: () => handlePeriodChange(p),
-            ...(knobProps.transition ? {
-              transition: knobProps.transition
-            } : void 0),
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-              fontSize: "$3",
-              ...knobProps.body,
-              fontWeight: isSelected ? "700" : "400",
-              color: isSelected ? import_colorRamps.formCommonColors.text : import_colorRamps.formCommonColors.muted,
-              children: p
-            })
-          }, p);
-        })
-      })]
-    })]
+  const handleChange = (0, import_react.useCallback)((hour24, minute, second) => {
+    const next = new Date(selectedDate);
+    next.setHours(hour24, minute, second);
+    onTimeChange(next);
+  }, [onTimeChange, selectedDate]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeWheels, {
+    hour24: h,
+    minute: m,
+    second: s,
+    timeFormat,
+    minuteStep,
+    showSeconds,
+    onChange: handleChange
   });
 }
 function DatetimePickerBody({
@@ -245,8 +133,9 @@ function DatetimePickerBody({
     flexDirection: "column",
     alignItems: "center",
     ...knobProps.gap,
-    width: px * 7,
-    alignSelf: "center",
+    width: activeTab === "date" ? px * 7 : "100%",
+    minWidth: px * 7,
+    alignSelf: activeTab === "date" ? "center" : "stretch",
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
       flexDirection: "row",
       width: "100%",
@@ -302,7 +191,6 @@ function DatetimePickerBody({
         })]
       })
     }) : selectedDatetime && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-      padding: "$2",
       width: "100%",
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(TimeSection, {
         selectedDate: selectedDatetime,
@@ -321,7 +209,7 @@ function DatetimePicker(props) {
     onChange,
     onValueChange,
     form,
-    inputProps,
+    inputProps: _inputProps,
     placeholder = (0, import_t.t)("Select date and time"),
     minDate,
     maxDate,
@@ -367,7 +255,6 @@ function DatetimePicker(props) {
     setDisplayDate,
     navigateMonth
   } = (0, import_parts.useDateNavigation)(selectedDatetime ?? void 0);
-  const popoverRef = (0, import_react.useRef)(null);
   const selectedDatetimeRef = (0, import_react.useRef)(selectedDatetime);
   selectedDatetimeRef.current = selectedDatetime;
   const openPicker = (0, import_react.useCallback)(() => {
@@ -375,10 +262,6 @@ function DatetimePicker(props) {
     if (seed) setDisplayDate(seed);
     setOpen(true);
   }, [setDisplayDate]);
-  const closePopover = (0, import_react.useCallback)(() => {
-    setOpen(false);
-    popoverRef.current?.close();
-  }, []);
   const handleDatetimeSelect = (0, import_react.useCallback)((date, fieldChange) => {
     if (minDate && date < minDate) return;
     if (maxDate && date > maxDate) return;
@@ -445,10 +328,13 @@ function DatetimePicker(props) {
       open,
       onOpenChange: handleOpenChange,
       trigger: renderTrigger(displayValue, hasError, fieldChange),
+      triggerEnd: !import_tamagui.isWeb && displayValue ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.DatePickerClearButton, {
+        onReset: () => handleClearDatetime(fieldChange),
+        disabled
+      }) : void 0,
       disabled,
-      scrollable: true,
       sizing: "grow",
-      fitContent: true,
+      widthMode: "at-least-trigger",
       children: pickerContent(fieldChange)
     });
   };

package/dist/cjs/fields/DatePicker/DatetimePicker.native.js

@@ -35,7 +35,6 @@ var import_fieldValueSync = require("./fieldValueSync.native.js");
 var import_tamagui = require("tamagui");
 var import_fieldLayout = require("../../fieldLayout.native.js");
 var import_FloatingPanel = require("../../FloatingPanel");
-var import_colorRamps = require("../../shared/colorRamps.native.js");
 var import_t = require("../../shared/t.native.js");
 var import_TimeColumn = require("../../shared/TimeColumn.native.js");
 var import_utils2 = require("../../shared/utils.native.js");
@@ -57,9 +56,6 @@ function formatDatetimeDisplay(date, timeFormat, showSeconds) {
     seconds: showSeconds
   });
 }
-var hours24 = (0, import_TimeColumn.generateRange)(0, 23);
-var hours12 = (0, import_TimeColumn.generateRange)(1, 12);
-var secondValues = (0, import_TimeColumn.generateRange)(0, 59);
 function DayGrid(param) {
   var {
     calendarData,
@@ -89,145 +85,24 @@ function TimeSection(param) {
     minuteStep,
     showSeconds
   } = param;
-  var {
-    knobProps
-  } = (0, import_parts.useCalendarKnobs)();
   var {
     h,
     m,
     s
   } = parseTimeFromDate(selectedDate);
-  var minuteValues = (0, import_react.useMemo)(function () {
-    return (0, import_TimeColumn.generateRange)(0, 59, minuteStep);
-  }, [minuteStep]);
-  var makeNewDate = (0, import_react.useCallback)(function (newH, newM, newS) {
-    var newDate = new Date(selectedDate);
-    newDate.setHours(newH, newM, newS);
-    return newDate;
-  }, [selectedDate]);
-  var secondsColumn = showSeconds && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumnSeparator, {
-      knobProps
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumn, {
-      label: (0, import_t.t)("Sec"),
-      values: secondValues,
-      selected: s,
-      onChange: function onChange(newS) {
-        return onTimeChange(makeNewDate(h, m, newS));
-      },
-      knobProps
-    })]
-  });
-  if (timeFormat === "24h") {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
-      flexDirection: "row",
-      gap: "$2",
-      alignItems: "flex-start",
-      justifyContent: "center",
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumn, {
-        label: (0, import_t.t)("Hour"),
-        values: hours24,
-        selected: h,
-        onChange: function onChange(newH) {
-          return onTimeChange(makeNewDate(newH, m, s));
-        },
-        knobProps
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumnSeparator, {
-        knobProps
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumn, {
-        label: (0, import_t.t)("Min"),
-        values: minuteValues,
-        selected: m,
-        onChange: function onChange(newM) {
-          return onTimeChange(makeNewDate(h, newM, s));
-        },
-        knobProps
-      }), secondsColumn]
-    });
-  }
-  var period = h >= 12 ? "PM" : "AM";
-  var display12H = h === 0 ? 12 : h > 12 ? h - 12 : h;
-  var handleHourChange = function handleHourChange2(newDisplayH) {
-    var h24 = newDisplayH;
-    if (period === "AM") {
-      h24 = newDisplayH === 12 ? 0 : newDisplayH;
-    } else {
-      h24 = newDisplayH === 12 ? 12 : newDisplayH + 12;
-    }
-    onTimeChange(makeNewDate(h24, m, s));
-  };
-  var handlePeriodChange = function handlePeriodChange2(newPeriod) {
-    if (newPeriod === period) return;
-    var newH = newPeriod === "AM" ? h >= 12 ? h - 12 : h : h < 12 ? h + 12 : h;
-    onTimeChange(makeNewDate(newH, m, s));
-  };
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
-    flexDirection: "row",
-    gap: "$2",
-    alignItems: "flex-start",
-    justifyContent: "center",
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumn, {
-      label: (0, import_t.t)("Hour"),
-      values: hours12,
-      selected: display12H,
-      onChange: handleHourChange,
-      knobProps
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumnSeparator, {
-      knobProps
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumn, {
-      label: (0, import_t.t)("Min"),
-      values: minuteValues,
-      selected: m,
-      onChange: function onChange(newM) {
-        return onTimeChange(makeNewDate(h, newM, s));
-      },
-      knobProps
-    }), secondsColumn, /* AM/PM selector */
-    /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
-      alignItems: "center",
-      gap: "$1",
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-        fontSize: "$1",
-        ...knobProps.body,
-        color: import_colorRamps.formCommonColors.muted,
-        textTransform: "uppercase",
-        letterSpacing: 1,
-        children: " "
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-        ...knobProps.borderRadius,
-        backgroundColor: import_colorRamps.formInputColors.background.base,
-        borderWidth: knobProps.inputSurface.borderWidth,
-        borderColor: import_colorRamps.formInputColors.border.base,
-        overflow: "hidden",
-        children: ["AM", "PM"].map(function (p) {
-          var isSelected = p === period;
-          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-            height: 36,
-            width: 48,
-            alignItems: "center",
-            justifyContent: "center",
-            cursor: "pointer",
-            backgroundColor: isSelected ? import_colorRamps.formInputColors.background.focus : "transparent",
-            hoverStyle: {
-              backgroundColor: import_colorRamps.formInputColors.background.focus
-            },
-            onPress: function onPress() {
-              return handlePeriodChange(p);
-            },
-            ...(knobProps.transition ? {
-              transition: knobProps.transition
-            } : void 0),
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-              fontSize: "$3",
-              ...knobProps.body,
-              fontWeight: isSelected ? "700" : "400",
-              color: isSelected ? import_colorRamps.formCommonColors.text : import_colorRamps.formCommonColors.muted,
-              children: p
-            })
-          }, p);
-        })
-      })]
-    })]
+  var handleChange = (0, import_react.useCallback)(function (hour24, minute, second) {
+    var next = new Date(selectedDate);
+    next.setHours(hour24, minute, second);
+    onTimeChange(next);
+  }, [onTimeChange, selectedDate]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeWheels, {
+    hour24: h,
+    minute: m,
+    second: s,
+    timeFormat,
+    minuteStep,
+    showSeconds,
+    onChange: handleChange
   });
 }
 function DatetimePickerBody(param) {
@@ -269,8 +144,9 @@ function DatetimePickerBody(param) {
     flexDirection: "column",
     alignItems: "center",
     ...knobProps.gap,
-    width: px * 7,
-    alignSelf: "center",
+    width: activeTab === "date" ? px * 7 : "100%",
+    minWidth: px * 7,
+    alignSelf: activeTab === "date" ? "center" : "stretch",
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
       flexDirection: "row",
       width: "100%",
@@ -332,7 +208,6 @@ function DatetimePickerBody(param) {
         })]
       })
     }) : selectedDatetime && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-      padding: "$2",
       width: "100%",
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(TimeSection, {
         selectedDate: selectedDatetime,
@@ -351,7 +226,7 @@ function DatetimePicker(props) {
     onChange,
     onValueChange,
     form,
-    inputProps,
+    inputProps: _inputProps,
     placeholder = (0, import_t.t)("Select date and time"),
     minDate,
     maxDate,
@@ -399,7 +274,6 @@ function DatetimePicker(props) {
     setDisplayDate,
     navigateMonth
   } = (0, import_parts.useDateNavigation)(selectedDatetime !== null && selectedDatetime !== void 0 ? selectedDatetime : void 0);
-  var popoverRef = (0, import_react.useRef)(null);
   var selectedDatetimeRef = (0, import_react.useRef)(selectedDatetime);
   selectedDatetimeRef.current = selectedDatetime;
   var openPicker = (0, import_react.useCallback)(function () {
@@ -407,11 +281,6 @@ function DatetimePicker(props) {
     if (seed) setDisplayDate(seed);
     setOpen(true);
   }, [setDisplayDate]);
-  var closePopover = (0, import_react.useCallback)(function () {
-    var _popoverRef_current;
-    setOpen(false);
-    (_popoverRef_current = popoverRef.current) === null || _popoverRef_current === void 0 ? void 0 : _popoverRef_current.close();
-  }, []);
   var handleDatetimeSelect = (0, import_react.useCallback)(function (date, fieldChange) {
     if (minDate && date < minDate) return;
     if (maxDate && date > maxDate) return;
@@ -488,10 +357,15 @@ function DatetimePicker(props) {
       open,
       onOpenChange: handleOpenChange,
       trigger: renderTrigger(displayValue, hasError, fieldChange),
+      triggerEnd: !import_tamagui.isWeb && displayValue ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.DatePickerClearButton, {
+        onReset: function onReset() {
+          return handleClearDatetime(fieldChange);
+        },
+        disabled
+      }) : void 0,
       disabled,
-      scrollable: true,
       sizing: "grow",
-      fitContent: true,
+      widthMode: "at-least-trigger",
       children: pickerContent(fieldChange)
     });
   };