@pisell/materials 1.0.386 → 1.0.388

package/lib/components/date-picker/datePickerCpt.js

@@ -52,7 +52,15 @@ var isValidDate = (dateString, format) => {
   pc: 1080
 });
 var DatePickerCpt = (props) => {
-  const { picker, onChange, value, format: propsFormat, defaultValue, showTime, ...others } = props;
+  const {
+    picker,
+    onChange,
+    value,
+    format: propsFormat,
+    defaultValue,
+    showTime,
+    ...others
+  } = props;
   const { locale } = (0, import_react.useContext)(import_antd.ConfigProvider.ConfigContext);
   const [currentShortcut, setCurrentShortcut] = (0, import_react.useState)("");
   const [open, setOpen] = (0, import_react.useState)(false);
@@ -61,7 +69,9 @@ var DatePickerCpt = (props) => {
   const [valueStr, setValueStr] = (0, import_react.useState)("");
   const [error, setError] = (0, import_react.useState)(false);
   const ref = (0, import_react.useRef)(null);
+  const panelRef = (0, import_react.useRef)(null);
   const canClose = (0, import_react.useRef)(true);
+  const [panelTimeWidth, setPanelTimeWidth] = (0, import_react.useState)(0);
   const responsive = (0, import_useResponsive.default)();
   const isDesktop = !("ontouchstart" in window || navigator.maxTouchPoints);
   (0, import_react.useEffect)(() => {
@@ -71,7 +81,7 @@ var DatePickerCpt = (props) => {
     setValue(value);
   }, [value]);
   (0, import_react.useEffect)(() => {
-    setValueStr((_value == null ? void 0 : _value.format(format)) || "");
+    setValueStr((_value == null ? void 0 : _value.format(format || "YYYY-MM-DD")) || "");
   }, [_value]);
   const customPresetItems = (0, import_react.useMemo)(() => {
     const preset = [
@@ -132,6 +142,7 @@ var DatePickerCpt = (props) => {
   }, [propsFormat, locale]);
   const handleSelectChange = (e) => {
     var _a;
+    canClose.current = true;
     const shortcut = e.target.value;
     setCurrentShortcut(shortcut);
     const date = (_a = import_constants.presetDetailMap[shortcut]) == null ? void 0 : _a.getValue();
@@ -141,6 +152,7 @@ var DatePickerCpt = (props) => {
   const handleTodayClick = () => {
     const val = (0, import_dayjs.default)().startOf("day");
     handleChange(val);
+    handleOpenChange(false);
   };
   const handleOpenChange = (visible) => {
     if (!visible) {
@@ -157,15 +169,19 @@ var DatePickerCpt = (props) => {
   };
   const handleOk = (val) => {
     const returnValue = val || _value;
-    onChange == null ? void 0 : onChange(returnValue, returnValue == null ? void 0 : returnValue.format(format));
+    onChange == null ? void 0 : onChange(returnValue, returnValue == null ? void 0 : returnValue.format("YYYY-MM-DD"));
     handleOpenChange(false);
   };
-  const handleChange = (val, valStr) => {
-    canClose.current = true;
+  const handleChange = (val, valStr, isNotChange) => {
+    if (!showTime) {
+      canClose.current = true;
+    }
     setError(false);
     setCurrentShortcut("");
     setValue(val);
-    handleOk(val);
+    if (!isNotChange) {
+      handleOk(val);
+    }
   };
   const handleApply = () => {
     if (error)
@@ -183,21 +199,90 @@ var DatePickerCpt = (props) => {
       setError(true);
     }
   };
-  if ((!picker || picker === "date") && !showTime && /^[^Hhms]*$/.test(format)) {
+  (0, import_react.useEffect)(() => {
+    var _a;
+    let width = 0;
+    const childElements = ((_a = panelRef.current) == null ? void 0 : _a.getElementsByClassName(
+      "pisell-lowcode-picker-time-panel"
+    )) || [];
+    if (childElements.length > 0) {
+      const childElement = childElements[0];
+      width = childElement.offsetWidth;
+    }
+    if (width > 0) {
+      setPanelTimeWidth(width);
+    }
+  }, [open]);
+  const handleSelect = (val) => {
+    canClose.current = !showTime;
+    setValue(val);
+  };
+  const handleTimeChange = (val) => {
+    setValue(
+      (preVal) => {
+        var _a, _b;
+        return ((_b = (_a = preVal == null ? void 0 : preVal.set("hour", (val == null ? void 0 : val.get("hour")) || 0)) == null ? void 0 : _a.set("minute", (val == null ? void 0 : val.get("minute")) || 0)) == null ? void 0 : _b.set("second", (val == null ? void 0 : val.get("second")) || 0)) || null;
+      }
+    );
+  };
+  const timeInputProps = (0, import_react.useMemo)(() => {
+    let step = 1;
+    let _format = "";
+    if ((showTime == null ? void 0 : showTime.format) === "HH:mm") {
+      step = void 0;
+      _format = "HH:mm";
+    } else if ((showTime == null ? void 0 : showTime.format) === "HH:mm:ss" || showTime) {
+      step = 1;
+      _format = "HH:mm:ss";
+    }
+    return {
+      step,
+      onChange: (e) => {
+        const val = e.target.value;
+        handleTimeChange(window.dayjs(val, _format));
+      },
+      value: _value == null ? void 0 : _value.format(_format)
+    };
+  }, [showTime, _value]);
+  if (!picker || picker === "date") {
     return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
       import_antd.DatePicker,
       {
         ...others,
-        showTime: false,
         ref,
+        onSelect: handleSelect,
+        showTime: isDesktop ? showTime : false,
         defaultValue,
         showNow: false,
-        onChange: handleChange,
+        onChange: (val, valStr) => handleChange(val, valStr, !isDesktop && showTime),
         open: popupOpen,
-        className: (0, import_classnames.default)("pisell-lowcode-mode-date-picker", others.className),
+        renderExtraFooter: !(!showTime || isDesktop) ? () => {
+          return /* @__PURE__ */ import_react.default.createElement(
+            "div",
+            {
+              onMouseDown: (e) => {
+                canClose.current = false;
+                e.stopPropagation();
+              }
+            },
+            /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-time-label" }, "Time"),
+            /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+              "input",
+              {
+                type: "time",
+                className: "date-picker-input-time",
+                ...timeInputProps
+              }
+            ))
+          );
+        } : void 0,
+        className: (0, import_classnames.default)(
+          "pisell-lowcode-mode-date-picker",
+          others.className
+        ),
         value: _value,
         onOpenChange: (o) => {
-          if (!o && !canClose.current) {
+          if (!o && (!canClose.current || showTime)) {
             return;
           }
           handleOpenChange(o);
@@ -207,36 +292,54 @@ var DatePickerCpt = (props) => {
         popupClassName: "date-picker-popup-wrap",
         format: currentShortcut ? () => import_constants.presetDetailMap[currentShortcut].label() : format,
         panelRender: (panelNode) => {
-          const dom = /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-date-picker-custom-wrap" }, /* @__PURE__ */ import_react.default.createElement(
+          const dom = /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
             "div",
             {
-              className: "pisell-lowcode-date-picker-custom-action",
-              onMouseDown: (e) => {
-                canClose.current = false;
-                e.stopPropagation();
-              }
+              className: (0, import_classnames.default)(
+                "pisell-lowcode-date-picker-custom-wrap",
+                {
+                  ["pisell-lowcode-date-picker-custom-wrap-show-time"]: showTime
+                }
+              ),
+              ref: panelRef
             },
-            /* @__PURE__ */ import_react.default.createElement("div", { style: { width: "50%" } }, /* @__PURE__ */ import_react.default.createElement(
-              import_antd.Input,
-              {
-                size: "large",
-                placeholder: (0, import_dayjs.default)().format(format),
-                value: valueStr,
-                onChange: handleDataStrChange
-              }
-            ), error && /* @__PURE__ */ import_react.default.createElement("span", { className: "date-picker-error" }, (0, import_locales.getText)("date-picker-invalid-date"))),
-            /* @__PURE__ */ import_react.default.createElement(
-              import_browserSelect.default,
+            !showTime && /* @__PURE__ */ import_react.default.createElement(
+              "div",
               {
-                value: currentShortcut || "custom",
-                className: "date-picker-toolbar-select",
-                options: customPresetItems,
-                size: "large",
-                onChange: handleSelectChange,
-                style: { width: "50%" }
-              }
-            )
-          ), panelNode), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-custom-footer" }, /* @__PURE__ */ import_react.default.createElement(
+                className: "pisell-lowcode-date-picker-custom-action",
+                onMouseDown: (e) => {
+                  canClose.current = false;
+                  e.stopPropagation();
+                },
+                style: {
+                  width: `calc(100% - 48px - ${panelTimeWidth}px)`
+                }
+              },
+              /* @__PURE__ */ import_react.default.createElement("div", { style: { width: "50%" } }, /* @__PURE__ */ import_react.default.createElement(
+                import_antd.Input,
+                {
+                  size: "large",
+                  placeholder: (0, import_dayjs.default)().format(
+                    format || "YYYY-MM-DD"
+                  ),
+                  value: valueStr,
+                  onChange: handleDataStrChange
+                }
+              ), error && /* @__PURE__ */ import_react.default.createElement("span", { className: "date-picker-error" }, (0, import_locales.getText)("date-picker-invalid-date"))),
+              /* @__PURE__ */ import_react.default.createElement(
+                import_browserSelect.default,
+                {
+                  value: currentShortcut || "custom",
+                  className: "date-picker-toolbar-select",
+                  options: customPresetItems,
+                  size: "large",
+                  onChange: handleSelectChange,
+                  style: { width: "50%" }
+                }
+              )
+            ),
+            panelNode
+          ), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-custom-footer" }, /* @__PURE__ */ import_react.default.createElement(
             "span",
             {
               className: "pisell-lowcode-custom-footer-today",
@@ -253,7 +356,7 @@ var DatePickerCpt = (props) => {
               {
                 placement: "bottom",
                 open,
-                height: 565,
+                height: "auto",
                 closable: false,
                 styles: {
                   content: {