@pisell/materials 1.0.387 → 1.0.388

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

@@ -1,4 +1,8 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 var _excluded = ["picker", "onChange", "value", "format", "defaultValue", "showTime"];
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -10,7 +14,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import dayjs from 'dayjs';
-import classNames from "classnames";
+import classNames from 'classnames';
 import { Button, ConfigProvider, DatePicker, Drawer, Input, Modal } from 'antd';
 import BrowserSelect from "../browserSelect";
 import { isFunction } from '@pisell/utils';
@@ -62,7 +66,12 @@ var DatePickerCpt = function DatePickerCpt(props) {
     error = _useState12[0],
     setError = _useState12[1];
   var ref = useRef(null);
+  var panelRef = useRef(null);
   var canClose = useRef(true);
+  var _useState13 = useState(0),
+    _useState14 = _slicedToArray(_useState13, 2),
+    panelTimeWidth = _useState14[0],
+    setPanelTimeWidth = _useState14[1];
 
   // const isDesktop = useMediaQuery('@media (pointer: fine)');
 
@@ -75,7 +84,7 @@ var DatePickerCpt = function DatePickerCpt(props) {
     setValue(value);
   }, [value]);
   useEffect(function () {
-    setValueStr((_value === null || _value === void 0 ? void 0 : _value.format(format)) || '');
+    setValueStr((_value === null || _value === void 0 ? void 0 : _value.format(format || 'YYYY-MM-DD')) || '');
   }, [_value]);
   var customPresetItems = useMemo(function () {
     var preset = [{
@@ -126,6 +135,7 @@ var DatePickerCpt = function DatePickerCpt(props) {
   }, [propsFormat, locale]);
   var handleSelectChange = function handleSelectChange(e) {
     var _presetDetailMap;
+    canClose.current = true;
     var shortcut = e.target.value;
     setCurrentShortcut(shortcut);
     var date = (_presetDetailMap = presetDetailMap[shortcut]) === null || _presetDetailMap === void 0 ? void 0 : _presetDetailMap.getValue();
@@ -135,6 +145,7 @@ var DatePickerCpt = function DatePickerCpt(props) {
   var handleTodayClick = function handleTodayClick() {
     var val = dayjs().startOf('day');
     handleChange(val);
+    handleOpenChange(false);
   };
   var handleOpenChange = function handleOpenChange(visible) {
     if (!visible) {
@@ -151,15 +162,19 @@ var DatePickerCpt = function DatePickerCpt(props) {
   };
   var handleOk = function handleOk(val) {
     var returnValue = val || _value;
-    onChange === null || onChange === void 0 ? void 0 : onChange(returnValue, returnValue === null || returnValue === void 0 ? void 0 : returnValue.format(format));
+    onChange === null || onChange === void 0 ? void 0 : onChange(returnValue, returnValue === null || returnValue === void 0 ? void 0 : returnValue.format('YYYY-MM-DD'));
     handleOpenChange(false);
   };
-  var handleChange = function handleChange(val, valStr) {
-    canClose.current = true;
+  var handleChange = function handleChange(val, valStr, isNotChange) {
+    if (!showTime) {
+      canClose.current = true;
+    }
     setError(false);
     setCurrentShortcut('');
     setValue(val);
-    handleOk(val);
+    if (!isNotChange) {
+      handleOk(val);
+    }
   };
   var handleApply = function handleApply() {
     if (error) return;
@@ -176,18 +191,75 @@ var DatePickerCpt = function DatePickerCpt(props) {
       setError(true);
     }
   };
-  if ((!picker || picker === 'date') && !showTime && /^[^Hhms]*$/.test(format)) {
+  useEffect(function () {
+    var _panelRef$current;
+    var width = 0;
+    var childElements = ((_panelRef$current = panelRef.current) === null || _panelRef$current === void 0 ? void 0 : _panelRef$current.getElementsByClassName('pisell-lowcode-picker-time-panel')) || [];
+    if (childElements.length > 0) {
+      var childElement = childElements[0];
+      width = childElement.offsetWidth;
+    }
+    if (width > 0) {
+      setPanelTimeWidth(width);
+    }
+  }, [open]);
+  var handleSelect = function handleSelect(val) {
+    canClose.current = !showTime;
+    setValue(val);
+  };
+  var handleTimeChange = function handleTimeChange(val) {
+    setValue(function (preVal) {
+      var _preVal$set, _preVal$set$set;
+      return (preVal === null || preVal === void 0 ? void 0 : (_preVal$set = preVal.set('hour', (val === null || val === void 0 ? void 0 : val.get('hour')) || 0)) === null || _preVal$set === void 0 ? void 0 : (_preVal$set$set = _preVal$set.set('minute', (val === null || val === void 0 ? void 0 : val.get('minute')) || 0)) === null || _preVal$set$set === void 0 ? void 0 : _preVal$set$set.set('second', (val === null || val === void 0 ? void 0 : val.get('second')) || 0)) || null;
+    });
+  };
+  var timeInputProps = useMemo(function () {
+    var step = 1;
+    var _format = '';
+    if ((showTime === null || showTime === void 0 ? void 0 : showTime.format) === 'HH:mm') {
+      step = undefined;
+      _format = 'HH:mm';
+    } else if ((showTime === null || showTime === void 0 ? void 0 : showTime.format) === 'HH:mm:ss' || showTime) {
+      step = 1;
+      _format = 'HH:mm:ss';
+    }
+    return {
+      step: step,
+      onChange: function onChange(e) {
+        var val = e.target.value;
+        handleTimeChange(window.dayjs(val, _format));
+      },
+      value: _value === null || _value === void 0 ? void 0 : _value.format(_format)
+    };
+  }, [showTime, _value]);
+  if (!picker || picker === 'date') {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DatePicker, _extends({}, others, {
-      showTime: false,
       ref: ref,
+      onSelect: handleSelect,
+      showTime: isDesktop ? showTime : false,
       defaultValue: defaultValue,
       showNow: false,
-      onChange: handleChange,
+      onChange: function onChange(val, valStr) {
+        return handleChange(val, valStr, !isDesktop && showTime);
+      },
       open: popupOpen,
-      className: classNames("pisell-lowcode-mode-date-picker", others.className),
+      renderExtraFooter: !(!showTime || isDesktop) ? function () {
+        return /*#__PURE__*/React.createElement("div", {
+          onMouseDown: function onMouseDown(e) {
+            canClose.current = false;
+            e.stopPropagation();
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "date-picker-time-label"
+        }, "Time"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", _extends({
+          type: "time",
+          className: "date-picker-input-time"
+        }, timeInputProps))));
+      } : undefined,
+      className: classNames('pisell-lowcode-mode-date-picker', others.className),
       value: _value,
       onOpenChange: function onOpenChange(o) {
-        if (!o && !canClose.current) {
+        if (!o && (!canClose.current || showTime)) {
           return;
         }
         handleOpenChange(o);
@@ -200,12 +272,16 @@ var DatePickerCpt = function DatePickerCpt(props) {
       } : format,
       panelRender: function panelRender(panelNode) {
         var dom = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-          className: "pisell-lowcode-date-picker-custom-wrap"
-        }, /*#__PURE__*/React.createElement("div", {
+          className: classNames('pisell-lowcode-date-picker-custom-wrap', _defineProperty({}, 'pisell-lowcode-date-picker-custom-wrap-show-time', showTime)),
+          ref: panelRef
+        }, !showTime && /*#__PURE__*/React.createElement("div", {
           className: "pisell-lowcode-date-picker-custom-action",
           onMouseDown: function onMouseDown(e) {
             canClose.current = false;
             e.stopPropagation();
+          },
+          style: {
+            width: "calc(100% - 48px - ".concat(panelTimeWidth, "px)")
           }
         }, /*#__PURE__*/React.createElement("div", {
           style: {
@@ -213,7 +289,7 @@ var DatePickerCpt = function DatePickerCpt(props) {
           }
         }, /*#__PURE__*/React.createElement(Input, {
           size: "large",
-          placeholder: dayjs().format(format),
+          placeholder: dayjs().format(format || 'YYYY-MM-DD'),
           value: valueStr,
           onChange: handleDataStrChange
         }), error && /*#__PURE__*/React.createElement("span", {
@@ -252,7 +328,7 @@ var DatePickerCpt = function DatePickerCpt(props) {
           return /*#__PURE__*/React.createElement(Drawer, {
             placement: "bottom",
             open: open,
-            height: 565,
+            height: "auto",
             closable: false,
             styles: {
               content: {