@oceanbase/ui 1.0.0-alpha.8 → 1.0.0

package/lib/DateRanger/PickerPanel.js

@@ -1,67 +1,48 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/DateRanger/PickerPanel.tsx
-var PickerPanel_exports = {};
-__export(PickerPanel_exports, {
-  default: () => PickerPanel_default
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(PickerPanel_exports);
-var import_react = __toESM(require("react"));
-var import_dayjs = __toESM(require("rc-picker/es/generate/dayjs"));
-var import_moment = __toESM(require("rc-picker/es/generate/moment"));
-var import_useCSSVarCls = __toESM(require("antd/es/config-provider/hooks/useCSSVarCls"));
-var import_style = __toESM(require("antd/es/date-picker/style/index"));
-var import_rc_picker = require("rc-picker");
-var import_classnames = __toESM(require("classnames"));
-var import_design = require("@oceanbase/design");
-var import_lodash = require("lodash");
-var import_moment2 = __toESM(require("moment"));
-var import_dayjs2 = __toESM(require("dayjs"));
-var import_constant = require("./constant");
-var import_jsx_runtime = require("react/jsx-runtime");
-var ALL_ERROR_TYPE_LIST = ["endDate", "startDate", "endTime", "startTime"];
-var CLICK_STATE = {
-  START: "START",
-  END: "END"
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _dayjs = _interopRequireDefault(require("rc-picker/es/generate/dayjs"));
+var _moment = _interopRequireDefault(require("rc-picker/es/generate/moment"));
+var _useCSSVarCls = _interopRequireDefault(require("antd/es/config-provider/hooks/useCSSVarCls"));
+var _index = _interopRequireDefault(require("antd/es/date-picker/style/index"));
+var _rcPicker = require("rc-picker");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _design = require("@oceanbase/design");
+var _lodash = require("lodash");
+var _moment2 = _interopRequireDefault(require("moment"));
+var _dayjs2 = _interopRequireDefault(require("dayjs"));
+var _constant = require("./constant");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const ALL_ERROR_TYPE_LIST = ['endDate', 'startDate', 'endTime', 'startTime'];
+/**
+ * 点击交互/时间选择交互
+ *  - 首次点击时，开始时间和结束时间都置为所点击的时间
+ *  - 第二次点击时，根据点击的时间，判断是开始时间还是结束时间进行赋值
+ *  - 新一轮交互开始...
+ */
+const CLICK_STATE = {
+  START: 'START',
+  END: 'END'
 };
-var useClickFSA = () => {
-  const [state, setState] = (0, import_react.useState)(CLICK_STATE.END);
+const useClickFSA = () => {
+  const [state, setState] = (0, _react.useState)(CLICK_STATE.END);
   const next = () => {
-    setState((ps) => {
+    setState(ps => {
       return ps === CLICK_STATE.START ? CLICK_STATE.END : CLICK_STATE.START;
     });
   };
   return [state, next];
 };
-var prefixCls = "ant-picker";
-var TIME_FORMAT = "HH:mm:ss";
-var InternalPickerPanel = (props) => {
+const prefixCls = 'ant-picker';
+const TIME_FORMAT = 'HH:mm:ss';
+const InternalPickerPanel = props => {
   const {
     defaultValue,
     isMoment,
@@ -69,322 +50,370 @@ var InternalPickerPanel = (props) => {
     tip,
     rules,
     required = true,
-    onOk = import_lodash.noop,
-    onCancel = import_lodash.noop,
+    onOk = _lodash.noop,
+    onCancel = _lodash.noop,
     disabledDate,
     hideSecond
   } = props;
-  const { getPrefixCls } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
-  const prefix = getPrefixCls("ranger-picker-panel");
-  const rootCls = (0, import_useCSSVarCls.default)(prefixCls);
-  const [wrapCSSVar, hashId, cssVarCls] = (0, import_style.default)(prefixCls, rootCls);
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_design.ConfigProvider.ConfigContext);
+  const prefix = getPrefixCls('ranger-picker-panel');
+  const rootCls = (0, _useCSSVarCls.default)(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = (0, _index.default)(prefixCls, rootCls);
   const [clickFSA, clickFSANext] = useClickFSA();
   const [defaultS, defaultE] = defaultValue;
-  const [calendarValue, setCalendarValue] = import_react.default.useState(defaultValue);
-  const [internalHoverValues, setInternalHoverValues] = import_react.default.useState(null);
-  const [activeIndex, setActiveIndex] = import_react.default.useState(0);
-  const isEn = (locale == null ? void 0 : locale.antLocale) === "en";
-  const DATE_FORMAT = isEn ? import_constant.DATE_TIME_MONTH_FORMAT : import_constant.DATE_TIME_MONTH_FORMAT_CN;
-  const getDateInstance = (0, import_react.useCallback)(
-    (v, format, strict) => {
-      return isMoment ? (0, import_moment2.default)(v, format, strict) : (0, import_dayjs2.default)(v, format, strict);
-    },
-    [isMoment]
-  );
-  const hoverValues = import_react.default.useMemo(() => {
+  const [calendarValue, setCalendarValue] = _react.default.useState(defaultValue);
+  const [internalHoverValues, setInternalHoverValues] = _react.default.useState(null);
+  const [activeIndex, setActiveIndex] = _react.default.useState(0);
+  const isEn = locale?.antLocale === 'en';
+
+  // 监听外部传入的 defaultValue 变化，同步更新 calendarValue
+  _react.default.useEffect(() => {
+    if (defaultValue && defaultValue.length === 2) {
+      setCalendarValue(defaultValue);
+    }
+  }, [defaultValue?.[0]?.valueOf(), defaultValue?.[1]?.valueOf()]);
+
+  //
+  const DATE_FORMAT = isEn ? _constant.DATE_TIME_MONTH_FORMAT : _constant.DATE_TIME_MONTH_FORMAT_CN;
+  const getDateInstance = (0, _react.useCallback)((v, format, strict) => {
+    return isMoment ? (0, _moment2.default)(v, format, strict) : (0, _dayjs2.default)(v, format, strict);
+  }, [isMoment]);
+  const hoverValues = _react.default.useMemo(() => {
     return internalHoverValues || calendarValue;
   }, [internalHoverValues, calendarValue]);
-  const fillCalendarValue = (date, index) => (
-    // Trigger change only when date changed
-    fillIndex(calendarValue, index, date)
-  );
+
+  // ======================== Change ========================
+  const fillCalendarValue = (date, index) =>
+  // Trigger change only when date changed
+  fillIndex(calendarValue, index, date);
   function fillIndex(ori, index, value) {
     const clone = [...ori];
     clone[index] = value;
     return clone;
   }
-  const onPanelHover = (date) => {
-    setInternalHoverValues(
-      date && clickFSA === CLICK_STATE.START ? fillCalendarValue(date, activeIndex) : null
-    );
+  const onPanelHover = date => {
+    setInternalHoverValues(date && clickFSA === CLICK_STATE.START ? fillCalendarValue(date, activeIndex) : null);
   };
-  const formatValues = [...calendarValue].sort((a, b) => {
-    return (a == null ? void 0 : a.valueOf()) - (b == null ? void 0 : b.valueOf());
-  }).map((item) => {
-    return item == null ? void 0 : item.format(DATE_FORMAT);
+
+  // 保持原始顺序，不进行排序（只在提交时排序）
+  const formatValues = calendarValue.map(item => {
+    return item?.format(DATE_FORMAT);
   });
-  const [form] = import_design.Form.useForm();
+  const [form] = _design.Form.useForm();
   const [_sDate, _eDate] = formatValues;
   const setFormatDateToForm = () => {
+    const [startVal, endVal] = calendarValue;
     form.setFieldsValue({
       startDate: getDateInstance(_sDate),
-      endDate: getDateInstance(_eDate)
+      endDate: getDateInstance(_eDate),
+      // 同步更新时间值，保持原始顺序
+      startTime: startVal || getDateInstance(),
+      endTime: endVal || getDateInstance()
     });
   };
-  (0, import_react.useEffect)(() => {
+  (0, _react.useEffect)(() => {
     setFormatDateToForm();
-  }, [_sDate, _eDate]);
-  const defaultTime = (0, import_react.useMemo)(() => {
+  }, [calendarValue?.[0]?.valueOf(), calendarValue?.[1]?.valueOf()]);
+  const defaultTime = (0, _react.useMemo)(() => {
     return getDateInstance();
   }, []);
-  const [errorMessage, setErrorMessage] = (0, import_react.useState)("");
-  const [errorTypeList, setErrorTypeList] = (0, import_react.useState)([]);
+  const [errorMessage, setErrorMessage] = (0, _react.useState)('');
+  const [errorTypeList, setErrorTypeList] = (0, _react.useState)([]);
   const errorTypeMap = errorTypeList.reduce((pre, errorKey) => {
-    pre[errorKey] = "error";
+    pre[errorKey] = 'error';
     return pre;
   }, {});
-  const formatDate = (v) => {
+  const formatDate = v => {
     const date = getDateInstance(v, DATE_FORMAT, true);
     return date.isValid() ? date.format(DATE_FORMAT) : null;
   };
-  const validateInputDate = (e) => {
+  const validateInputDate = e => {
     const v = e.target.value;
     return formatDate(v);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_classnames.default)(prefix), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Space, { direction: "vertical", size: 12, style: { margin: "12px 0" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_design.Form,
-      {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames.default)(prefix),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Space, {
+      direction: "vertical",
+      size: 12,
+      style: {
+        margin: '12px 0'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_design.Form, {
         layout: "vertical",
         autoComplete: "off",
         requiredMark: false,
-        style: { width: 280 },
-        form,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Row, { gutter: 12, style: { marginBottom: 4 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Col, { span: 12, style: { paddingLeft: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_design.Form.Item,
-              {
-                name: "startDate",
-                label: locale.startDate,
-                validateStatus: errorTypeMap["startDate"],
-                style: { marginBottom: 8 },
-                rules: [{ required: true }],
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_design.DatePicker,
-                  {
-                    format: {
-                      format: "YYYY-MM-DD",
-                      type: "mask"
-                    },
-                    style: { width: 128 },
-                    open: false,
-                    suffixIcon: null,
-                    allowClear: false,
-                    onBlur: (e) => {
-                      const v = validateInputDate(e);
-                      if (v) {
-                        form.setFieldValue("startDate", getDateInstance(v));
-                        setCalendarValue(([, eDate]) => {
-                          return [getDateInstance(v), eDate];
-                        });
-                      } else {
-                        setFormatDateToForm();
-                      }
-                    }
-                  }
-                )
-              }
-            ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Col, { span: 12, style: { paddingRight: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_design.Form.Item,
-              {
-                name: "startTime",
-                label: locale.startTime,
-                style: { marginBottom: 8 },
-                validateStatus: errorTypeMap["startTime"],
-                initialValue: defaultS || defaultTime,
-                rules: [{ required: true }],
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_design.TimePicker,
-                  {
-                    allowClear: false,
-                    suffixIcon: null,
-                    needConfirm: false,
-                    getPopupContainer: (triggerNode) => triggerNode.parentNode,
-                    style: { width: "100%" },
-                    format: {
-                      format: hideSecond ? "HH:mm" : "HH:mm:ss",
-                      type: "mask"
-                    }
-                  }
-                )
-              }
-            ) })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Row, { gutter: 12, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Col, { span: 12, style: { paddingLeft: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_design.Form.Item,
-              {
-                name: "endDate",
-                label: locale.endDate,
-                style: { marginBottom: 0 },
-                validateStatus: errorTypeMap["endDate"],
-                rules: [{ required: true }],
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_design.DatePicker,
-                  {
-                    format: {
-                      format: "YYYY-MM-DD",
-                      type: "mask"
-                    },
-                    style: { width: 128 },
-                    open: false,
-                    suffixIcon: null,
-                    allowClear: false,
-                    onBlur: (e) => {
-                      const v = validateInputDate(e);
-                      if (v) {
-                        form.setFieldValue("endDate", getDateInstance(v));
-                        setCalendarValue(([sDate]) => {
-                          return [sDate, getDateInstance(v)];
-                        });
-                      } else {
-                        setFormatDateToForm();
-                      }
-                    }
-                  }
-                )
-              }
-            ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Col, { span: 12, style: { paddingRight: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_design.Form.Item,
-              {
-                name: "endTime",
-                label: locale.endTime,
-                style: { marginBottom: 0 },
-                validateStatus: errorTypeMap["endTime"],
-                initialValue: defaultE || defaultTime,
-                rules: [{ required: true }],
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_design.TimePicker,
-                  {
-                    allowClear: false,
-                    suffixIcon: null,
-                    needConfirm: false,
-                    getPopupContainer: (triggerNode) => triggerNode.parentNode,
-                    style: { width: "100%" },
-                    format: {
-                      format: hideSecond ? "HH:mm" : "HH:mm:ss",
-                      type: "mask"
-                    }
-                  }
-                )
-              }
-            ) })
-          ] })
-        ]
-      }
-    ) }),
-    wrapCSSVar(
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "div",
-        {
-          className: (0, import_classnames.default)("ant-picker-dropdown", hashId, cssVarCls, rootCls),
+        style: {
+          width: 280
+        },
+        form: form,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_design.Row, {
+          gutter: 12,
           style: {
-            position: "initial",
-            pointerEvents: "auto"
+            marginBottom: 4
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_rc_picker.PickerPanel,
-            {
-              prefixCls,
-              generateConfig: isMoment ? import_moment.default : import_dayjs.default,
-              value: calendarValue,
-              disabledDate,
-              onHover: (...res) => {
-                onPanelHover(res[0]);
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Col, {
+            span: 12,
+            style: {
+              paddingLeft: 12
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Form.Item, {
+              name: "startDate",
+              label: locale.startDate,
+              validateStatus: errorTypeMap['startDate'],
+              style: {
+                marginBottom: 8
               },
-              onSelect: (...res) => {
-                clickFSANext();
-                if (clickFSA === CLICK_STATE.END) {
-                  setCalendarValue([res[0], res[0]]);
-                } else {
-                  setCalendarValue(fillCalendarValue(res[0], activeIndex));
+              rules: [{
+                required: true
+              }],
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.DatePicker, {
+                format: {
+                  format: DATE_FORMAT,
+                  type: 'mask'
+                },
+                style: {
+                  width: 128
+                },
+                open: false,
+                suffixIcon: null,
+                allowClear: false,
+                onBlur: e => {
+                  const v = validateInputDate(e);
+                  if (v) {
+                    form.setFieldValue('startDate', getDateInstance(v));
+                    setCalendarValue(([, eDate]) => {
+                      return [getDateInstance(v), eDate];
+                    });
+                  } else {
+                    setFormatDateToForm();
+                  }
                 }
-                setActiveIndex((index) => {
-                  return index + 1 === 2 ? 0 : index + 1;
-                });
+              })
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Col, {
+            span: 12,
+            style: {
+              paddingRight: 8
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Form.Item, {
+              name: "startTime",
+              label: locale.startTime,
+              style: {
+                marginBottom: 8
               },
-              hoverRangeValue: hoverValues,
-              activeOffset: 0,
-              allowEmpty: [false, false],
-              mode: "date",
-              internalMode: "date",
-              picker: "date",
-              locale,
-              showNow: false,
-              range: true,
-              needConfirm: false
-            }
-          )
-        }
-      )
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Divider, { style: { margin: "8px 0" } }),
-    tip && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Alert, { message: tip, type: "info", style: { marginBottom: 8 }, showIcon: true }),
-    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Alert, { message: errorMessage, type: "error", style: { marginBottom: 8 }, showIcon: true }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_design.Space,
-      {
-        style: {
-          width: "100%",
-          justifyContent: "flex-end",
-          padding: "0 12px 4px 0"
-        },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_design.Button,
-            {
-              size: "small",
-              onClick: () => {
-                onCancel();
+              validateStatus: errorTypeMap['startTime'],
+              initialValue: defaultS || defaultTime,
+              rules: [{
+                required: true
+              }],
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.TimePicker, {
+                allowClear: false,
+                suffixIcon: null,
+                needConfirm: false,
+                getPopupContainer: triggerNode => triggerNode.parentNode,
+                style: {
+                  width: '100%'
+                },
+                format: {
+                  format: hideSecond ? 'HH:mm' : 'HH:mm:ss',
+                  type: 'mask'
+                }
+              })
+            })
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_design.Row, {
+          gutter: 12,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Col, {
+            span: 12,
+            style: {
+              paddingLeft: 12
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Form.Item, {
+              name: "endDate",
+              label: locale.endDate,
+              style: {
+                marginBottom: 0
               },
-              children: locale.cancel
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_design.Button,
-            {
-              size: "small",
-              type: "primary",
-              onClick: () => {
-                form.validateFields().then((values) => {
-                  const { startDate, startTime, endDate, endTime } = values;
-                  const [sTime, eTime] = startDate.isSame(endDate) ? [startTime, endTime].sort((a, b) => {
-                    return (a == null ? void 0 : a.valueOf()) - (b == null ? void 0 : b.valueOf());
-                  }) : [startTime, endTime];
-                  const start = `${formatDate(startDate)} ${sTime.format(TIME_FORMAT)}`;
-                  const end = `${formatDate(endDate)} ${eTime.format(TIME_FORMAT)}`;
-                  let errorList = [];
-                  let message = "";
-                  rules == null ? void 0 : rules.some((item) => {
-                    if (typeof (item == null ? void 0 : item.validator) === "function") {
-                      const errorType = item.validator([start, end]);
-                      if (errorType) {
-                        errorList = Array.isArray(errorType) ? errorType : [errorType];
-                        message = item.message;
-                        return true;
-                      }
-                    }
-                    return false;
-                  });
-                  if (errorList.length > 0) {
-                    setErrorTypeList(errorList.includes("all") ? ALL_ERROR_TYPE_LIST : errorList);
-                    setErrorMessage(message);
+              validateStatus: errorTypeMap['endDate'],
+              rules: [{
+                required: true
+              }],
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.DatePicker, {
+                format: {
+                  format: DATE_FORMAT,
+                  type: 'mask'
+                },
+                style: {
+                  width: 128
+                },
+                open: false,
+                suffixIcon: null,
+                allowClear: false,
+                onBlur: e => {
+                  const v = validateInputDate(e);
+                  if (v) {
+                    form.setFieldValue('endDate', getDateInstance(v));
+                    setCalendarValue(([sDate]) => {
+                      return [sDate, getDateInstance(v)];
+                    });
                   } else {
-                    setErrorMessage("");
-                    setErrorTypeList([]);
-                    onOk([start, end]);
+                    setFormatDateToForm();
                   }
-                });
+                }
+              })
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Col, {
+            span: 12,
+            style: {
+              paddingRight: 8
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Form.Item, {
+              name: "endTime",
+              label: locale.endTime,
+              style: {
+                marginBottom: 0
               },
-              children: locale.confirm
-            }
-          )
-        ]
+              validateStatus: errorTypeMap['endTime'],
+              initialValue: defaultE || defaultTime,
+              rules: [{
+                required: true
+              }],
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.TimePicker, {
+                allowClear: false,
+                suffixIcon: null,
+                needConfirm: false,
+                getPopupContainer: triggerNode => triggerNode.parentNode,
+                style: {
+                  width: '100%'
+                },
+                format: {
+                  format: hideSecond ? 'HH:mm' : 'HH:mm:ss',
+                  type: 'mask'
+                }
+              })
+            })
+          })]
+        })]
+      })
+    }), wrapCSSVar( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames.default)('ant-picker-dropdown', hashId, cssVarCls, rootCls),
+      style: {
+        position: 'initial',
+        pointerEvents: 'auto'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_rcPicker.PickerPanel, {
+        prefixCls: prefixCls
+        // @ts-ignore
+        ,
+        generateConfig: isMoment ? _moment.default : _dayjs.default
+        // @ts-ignore
+        ,
+        value: calendarValue,
+        disabledDate: disabledDate,
+        onHover: (...res) => {
+          onPanelHover(res[0]);
+        },
+        onSelect: (...res) => {
+          clickFSANext();
+          if (clickFSA === CLICK_STATE.END) {
+            setCalendarValue([res[0], res[0]]);
+          } else {
+            setCalendarValue(fillCalendarValue(res[0], activeIndex));
+          }
+          setActiveIndex(index => {
+            return index + 1 === 2 ? 0 : index + 1;
+          });
+        },
+        hoverRangeValue: hoverValues,
+        activeOffset: 0,
+        allowEmpty: [false, false],
+        mode: "date",
+        internalMode: "date",
+        picker: "date",
+        locale: locale,
+        showNow: false,
+        range: true,
+        needConfirm: false
+      })
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Divider, {
+      style: {
+        margin: '8px 0'
       }
-    )
-  ] });
+    }), tip && !errorMessage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Alert, {
+      message: tip,
+      type: "info",
+      style: {
+        marginBottom: 8
+      },
+      showIcon: true
+    }), errorMessage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Alert, {
+      message: errorMessage,
+      type: "error",
+      style: {
+        marginBottom: 8
+      },
+      showIcon: true
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_design.Space, {
+      style: {
+        width: '100%',
+        justifyContent: 'flex-end',
+        padding: '0 12px 4px 0'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Button, {
+        size: "small",
+        onClick: () => {
+          onCancel();
+        },
+        children: locale.cancel
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Button, {
+        size: "small",
+        type: "primary",
+        onClick: () => {
+          form.validateFields().then(values => {
+            const {
+              startDate,
+              startTime,
+              endDate,
+              endTime
+            } = values;
+
+            // 组合日期和时间
+            const startDateTime = `${formatDate(startDate)} ${startTime.format(TIME_FORMAT)}`;
+            const endDateTime = `${formatDate(endDate)} ${endTime.format(TIME_FORMAT)}`;
+
+            // 对完整的日期时间进行排序，保证开始时间在结束时间之前
+            const startMoment = getDateInstance(startDateTime, `${DATE_FORMAT} ${TIME_FORMAT}`);
+            const endMoment = getDateInstance(endDateTime, `${DATE_FORMAT} ${TIME_FORMAT}`);
+            const [start, end] = startMoment.valueOf() <= endMoment.valueOf() ? [startDateTime, endDateTime] : [endDateTime, startDateTime];
+            let errorList = [];
+            let message = '';
+            rules?.some(item => {
+              if (typeof item?.validator === 'function') {
+                const errorType = item.validator([start, end]);
+                if (errorType) {
+                  errorList = Array.isArray(errorType) ? errorType : [errorType];
+                  message = item.message;
+                  return true;
+                }
+              }
+              return false;
+            });
+            if (errorList.length > 0) {
+              setErrorTypeList(errorList.includes('all') ? ALL_ERROR_TYPE_LIST : errorList);
+              setErrorMessage(message);
+            } else {
+              setErrorMessage('');
+              setErrorTypeList([]);
+              onOk([start, end]);
+            }
+          });
+        },
+        children: locale.confirm
+      })]
+    })]
+  });
 };
-var PickerPanel_default = InternalPickerPanel;
+var _default = exports.default = InternalPickerPanel;