@oceanbase/ui 1.0.0-alpha.2 → 1.0.0-alpha.20

package/lib/DateRanger/PickerPanel.js

@@ -1,68 +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_util = require("../_util");
-var import_constant = require("./constant");
-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 prefix = (0, import_util.getPrefix)("ranger-picker-panel");
-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,
@@ -70,281 +50,348 @@ 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 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__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(prefix) }, /* @__PURE__ */ import_react.default.createElement(import_design.Space, { direction: "vertical", size: 12, style: { margin: "12px 0" } }, /* @__PURE__ */ import_react.default.createElement(
-    import_design.Form,
-    {
-      layout: "vertical",
-      autoComplete: "off",
-      requiredMark: false,
-      style: { width: 280 },
-      form
-    },
-    /* @__PURE__ */ import_react.default.createElement(import_design.Row, { gutter: 12, style: { marginBottom: 4 } }, /* @__PURE__ */ import_react.default.createElement(import_design.Col, { span: 12, style: { paddingLeft: 12 } }, /* @__PURE__ */ import_react.default.createElement(
-      import_design.Form.Item,
-      {
-        name: "startDate",
-        label: locale.startDate,
-        validateStatus: errorTypeMap["startDate"],
-        style: { marginBottom: 8 },
-        rules: [{ required: true }]
+  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'
       },
-      /* @__PURE__ */ import_react.default.createElement(
-        import_design.DatePicker,
-        {
-          format: {
-            format: "YYYY-MM-DD",
-            type: "mask"
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_design.Form, {
+        layout: "vertical",
+        autoComplete: "off",
+        requiredMark: false,
+        style: {
+          width: 280
+        },
+        form: form,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_design.Row, {
+          gutter: 12,
+          style: {
+            marginBottom: 4
           },
-          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__ */ import_react.default.createElement(import_design.Col, { span: 12, style: { paddingRight: 8 } }, /* @__PURE__ */ import_react.default.createElement(
-      import_design.Form.Item,
-      {
-        name: "startTime",
-        label: locale.startTime,
-        style: { marginBottom: 8 },
-        validateStatus: errorTypeMap["startTime"],
-        initialValue: defaultS || defaultTime,
-        rules: [{ required: true }]
+          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
+              },
+              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();
+                  }
+                }
+              })
+            })
+          }), /*#__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
+              },
+              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
+              },
+              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 {
+                    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
+              },
+              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'
       },
-      /* @__PURE__ */ import_react.default.createElement(
-        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"
+      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));
           }
-        }
-      )
-    ))),
-    /* @__PURE__ */ import_react.default.createElement(import_design.Row, { gutter: 12 }, /* @__PURE__ */ import_react.default.createElement(import_design.Col, { span: 12, style: { paddingLeft: 12 } }, /* @__PURE__ */ import_react.default.createElement(
-      import_design.Form.Item,
-      {
-        name: "endDate",
-        label: locale.endDate,
-        style: { marginBottom: 0 },
-        validateStatus: errorTypeMap["endDate"],
-        rules: [{ required: true }]
-      },
-      /* @__PURE__ */ import_react.default.createElement(
-        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__ */ import_react.default.createElement(import_design.Col, { span: 12, style: { paddingRight: 8 } }, /* @__PURE__ */ import_react.default.createElement(
-      import_design.Form.Item,
-      {
-        name: "endTime",
-        label: locale.endTime,
-        style: { marginBottom: 0 },
-        validateStatus: errorTypeMap["endTime"],
-        initialValue: defaultE || defaultTime,
-        rules: [{ required: true }]
+          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
       },
-      /* @__PURE__ */ import_react.default.createElement(
-        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__ */ import_react.default.createElement(
-      "div",
-      {
-        className: (0, import_classnames.default)("ant-picker-dropdown", hashId, cssVarCls, rootCls),
-        style: {
-          position: "initial",
-          pointerEvents: "auto"
-        }
+      showIcon: true
+    }), errorMessage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Alert, {
+      message: errorMessage,
+      type: "error",
+      style: {
+        marginBottom: 8
       },
-      /* @__PURE__ */ import_react.default.createElement(
-        import_rc_picker.PickerPanel,
-        {
-          prefixCls,
-          generateConfig: isMoment ? import_moment.default : import_dayjs.default,
-          value: calendarValue,
-          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,
-          showNow: false,
-          range: true,
-          needConfirm: false
-        }
-      )
-    )
-  ), /* @__PURE__ */ import_react.default.createElement(import_design.Divider, { style: { margin: "8px 0" } }), tip && !errorMessage && /* @__PURE__ */ import_react.default.createElement(import_design.Alert, { message: tip, type: "info", style: { marginBottom: 8 }, showIcon: true }), errorMessage && /* @__PURE__ */ import_react.default.createElement(import_design.Alert, { message: errorMessage, type: "error", style: { marginBottom: 8 }, showIcon: true }), /* @__PURE__ */ import_react.default.createElement(
-    import_design.Space,
-    {
+      showIcon: true
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_design.Space, {
       style: {
-        width: "100%",
-        justifyContent: "flex-end",
-        padding: "0 12px 4px 0"
-      }
-    },
-    /* @__PURE__ */ import_react.default.createElement(
-      import_design.Button,
-      {
+        width: '100%',
+        justifyContent: 'flex-end',
+        padding: '0 12px 4px 0'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Button, {
         size: "small",
         onClick: () => {
           onCancel();
-        }
-      },
-      locale.cancel
-    ),
-    /* @__PURE__ */ import_react.default.createElement(
-      import_design.Button,
-      {
+        },
+        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 [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)}`;
+          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 == null ? void 0 : rules.some((item) => {
-              if (typeof (item == null ? void 0 : item.validator) === "function") {
+            let message = '';
+            rules?.some(item => {
+              if (typeof item?.validator === 'function') {
                 const errorType = item.validator([start, end]);
                 if (errorType) {
                   errorList = Array.isArray(errorType) ? errorType : [errorType];
@@ -355,18 +402,18 @@ var InternalPickerPanel = (props) => {
               return false;
             });
             if (errorList.length > 0) {
-              setErrorTypeList(errorList.includes("all") ? ALL_ERROR_TYPE_LIST : errorList);
+              setErrorTypeList(errorList.includes('all') ? ALL_ERROR_TYPE_LIST : errorList);
               setErrorMessage(message);
             } else {
-              setErrorMessage("");
+              setErrorMessage('');
               setErrorTypeList([]);
               onOk([start, end]);
             }
           });
-        }
-      },
-      locale.confirm
-    )
-  ));
+        },
+        children: locale.confirm
+      })]
+    })]
+  });
 };
-var PickerPanel_default = InternalPickerPanel;
+var _default = exports.default = InternalPickerPanel;