@oceanbase/ui 1.0.0-alpha.10 → 1.0.0-alpha.11

package/lib/Ranger/QuickPicker.js

@@ -1,47 +1,23 @@
-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);
+"use strict";
 
-// src/Ranger/QuickPicker.tsx
-var QuickPicker_exports = {};
-__export(QuickPicker_exports, {
-  default: () => QuickPicker_default
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(QuickPicker_exports);
-var import_icons = require("@oceanbase/icons");
-var import_design = require("@oceanbase/design");
-var import_classnames = __toESM(require("classnames"));
-var import_dayjs = __toESM(require("dayjs"));
-var import_lodash = require("lodash");
-var import_moment = __toESM(require("moment"));
-var import_react = require("react");
-var import_constant = require("./constant");
-var import_jsx_runtime = require("react/jsx-runtime");
-var RangeDropdown = ({
+exports.default = void 0;
+var _icons = require("@oceanbase/icons");
+var _design = require("@oceanbase/design");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _lodash = require("lodash");
+var _moment = _interopRequireDefault(require("moment"));
+var _react = _interopRequireWildcard(require("react"));
+var _constant = require("./constant");
+var _jsxRuntime = require("react/jsx-runtime");
+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; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+"use client";
+const RangeDropdown = ({
   selects,
   onChange,
   value,
@@ -49,29 +25,37 @@ var RangeDropdown = ({
   locale = {},
   ...rest
 }) => {
-  const { getPrefixCls } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
-  const prefix = getPrefixCls("ranger-quick-picker");
-  const menu = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    import_design.Menu,
-    {
-      onClick: (e) => {
-        onChange(e.key);
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_design.ConfigProvider.ConfigContext);
+  const prefix = getPrefixCls('ranger-quick-picker');
+  const menu = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_design.Menu, {
+    onClick: e => {
+      onChange(e.key);
+    },
+    style: {
+      minWidth: 120
+    },
+    children: [selects.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Menu.Item, {
+      children: locale[item.name] || item.name
+    }, item.name)), customable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Menu.Item, {
+      children: locale.customize
+    }, _constant.CUSTOMIZE)]
+  });
+  const match = selects.find(item => item.name === value);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Dropdown, {
+    overlay: menu,
+    ...rest,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_design.Space, {
+      style: {
+        cursor: 'pointer'
       },
-      style: { minWidth: 120 },
-      children: [
-        selects.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Menu.Item, { children: locale[item.name] || item.name }, item.name)),
-        customable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Menu.Item, { children: locale.customize }, import_constant.CUSTOMIZE)
-      ]
-    }
-  );
-  const match = selects.find((item) => item.name === value);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Dropdown, { overlay: menu, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Space, { style: { cursor: "pointer" }, className: (0, import_classnames.default)(prefix, `${prefix}-dropdown`), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ClockCircleOutlined, {}),
-    locale[match == null ? void 0 : match.name] || (match == null ? void 0 : match.name),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.DownOutlined, {})
-  ] }) });
+      className: (0, _classnames.default)(prefix, `${prefix}-dropdown`),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ClockCircleOutlined, {}), locale[match?.name] || match?.name, /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DownOutlined, {})]
+    })
+  });
 };
-var RangeSelect = ({
+const RangeSelect = ({
   selects,
   onChange,
   value,
@@ -80,54 +64,68 @@ var RangeSelect = ({
   size,
   ...rest
 }) => {
-  const { getPrefixCls } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
-  const prefix = getPrefixCls("ranger-quick-picker");
-  const handleChange = (nextValue) => {
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_design.ConfigProvider.ConfigContext);
+  const prefix = getPrefixCls('ranger-quick-picker');
+  const handleChange = nextValue => {
     onChange(nextValue);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    import_design.Select,
-    {
-      className: (0, import_classnames.default)(prefix, `${prefix}-select`),
-      style: { minWidth: 120 },
-      onSelect: handleChange,
-      value,
-      size,
-      ...rest,
-      children: [
-        selects.map((item) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Select.Option, { value: item.name, children: locale[item.name] || item.name }, item.name);
-        }),
-        customable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Select.Option, { value: import_constant.CUSTOMIZE, children: locale.customize }, import_constant.CUSTOMIZE)
-      ]
-    }
-  );
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_design.Select, {
+    className: (0, _classnames.default)(prefix, `${prefix}-select`),
+    style: {
+      minWidth: 120
+    },
+    onSelect: handleChange,
+    value: value,
+    size: size,
+    ...rest,
+    children: [selects.map(item => {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Select.Option, {
+        value: item.name,
+        children: locale[item.name] || item.name
+      }, item.name);
+    }), customable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Select.Option, {
+      value: _constant.CUSTOMIZE,
+      children: locale.customize
+    }, _constant.CUSTOMIZE)]
+  });
 };
-var QuickPicker_default = (props) => {
-  var _a;
+var _default = props => {
   const {
-    type = "select",
+    type = 'select',
     name,
     defaultName,
     selects,
     onChange,
-    onNameChange = import_lodash.noop,
+    onNameChange = _lodash.noop,
     isMoment,
     ...rest
   } = props;
-  const [innerName, setInnerName] = (0, import_react.useState)(name ?? defaultName ?? ((_a = selects == null ? void 0 : selects[0]) == null ? void 0 : _a.name));
-  (0, import_react.useEffect)(() => {
+  const [innerName, setInnerName] = (0, _react.useState)(name ?? defaultName ?? selects?.[0]?.name);
+  (0, _react.useEffect)(() => {
     if (name) {
       setInnerName(name);
     }
   }, [name]);
-  const handleChange = (value) => {
-    const selected = selects.find((item) => item.name === value);
+  const handleChange = value => {
+    const selected = selects.find(item => item.name === value);
     setInnerName(value);
-    if (value !== import_constant.CUSTOMIZE) {
-      onChange(selected.range(isMoment ? (0, import_moment.default)() : (0, import_dayjs.default)()));
+    if (value !== _constant.CUSTOMIZE) {
+      onChange(selected.range(isMoment ? (0, _moment.default)() : (0, _dayjs.default)()));
     }
     onNameChange(value);
   };
-  return type === "select" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RangeSelect, { value: innerName, selects, onChange: handleChange, ...rest }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RangeDropdown, { value: innerName, selects, onChange: handleChange, ...rest });
+  return type === 'select' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(RangeSelect, {
+    value: innerName,
+    selects: selects,
+    onChange: handleChange,
+    ...rest
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(RangeDropdown, {
+    value: innerName,
+    selects: selects,
+    onChange: handleChange,
+    ...rest
+  });
 };
+exports.default = _default;

package/lib/Ranger/Ranger.js

@@ -1,60 +1,35 @@
-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);
+"use strict";
 
-// src/Ranger/Ranger.tsx
-var Ranger_exports = {};
-__export(Ranger_exports, {
-  default: () => Ranger_default
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(Ranger_exports);
-var import_design = require("@oceanbase/design");
-var import_dayjs = __toESM(require("dayjs"));
-var import_lodash = require("lodash");
-var import_moment = __toESM(require("moment"));
-var import_classnames = __toESM(require("classnames"));
-var import_react = require("react");
-var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
-var import_constant = require("./constant");
-var import_style = __toESM(require("./style"));
-var import_zh_CN = __toESM(require("./locale/zh-CN"));
-var import_QuickPicker = __toESM(require("./QuickPicker"));
-var import_jsx_runtime = require("react/jsx-runtime");
-var Ranger = (props) => {
-  var _a;
+exports.default = void 0;
+var _design = require("@oceanbase/design");
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _lodash = require("lodash");
+var _moment = _interopRequireDefault(require("moment"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+var _LocaleWrapper = _interopRequireDefault(require("../locale/LocaleWrapper"));
+var _constant = require("./constant");
+var _style = _interopRequireDefault(require("./style"));
+var _zhCN = _interopRequireDefault(require("./locale/zh-CN"));
+var _QuickPicker = _interopRequireDefault(require("./QuickPicker"));
+var _jsxRuntime = require("react/jsx-runtime");
+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; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+"use client";
+const Ranger = props => {
   const {
-    selects = [import_constant.NEAR_1_MINUTES, import_constant.NEAR_30_MINUTES, import_constant.NEAR_1_HOURS],
+    selects = [_constant.NEAR_1_MINUTES, _constant.NEAR_30_MINUTES, _constant.NEAR_1_HOURS],
     value,
     defaultValue,
     defaultQuickValue,
-    mode = "default",
-    quickType = "select",
+    mode = 'default',
+    quickType = 'select',
     pastOnly = false,
-    onChange = import_lodash.noop,
+    onChange = _lodash.noop,
     disabledDate,
     locale,
     size,
@@ -63,115 +38,105 @@ var Ranger = (props) => {
     quickPickerProps = {},
     ...rest
   } = props;
-  const { getPrefixCls } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
-  const prefixCls = getPrefixCls("ranger");
-  const { wrapSSR } = (0, import_style.default)(prefixCls);
-  const isMoment = import_moment.default.isMoment(defaultValue == null ? void 0 : defaultValue[0]) || import_moment.default.isMoment(defaultValue == null ? void 0 : defaultValue[1]) || import_moment.default.isMoment(value == null ? void 0 : value[0]) || import_moment.default.isMoment(value == null ? void 0 : value[1]);
-  const [innerValue, setInnerValue] = (0, import_react.useState)(value ?? defaultValue);
-  const [rangeName, setRangeName] = (0, import_react.useState)(
-    value || defaultValue ? import_constant.CUSTOMIZE : defaultQuickValue ?? ((_a = selects == null ? void 0 : selects[0]) == null ? void 0 : _a.name)
-  );
-  const defaultInternalValue = (0, import_react.useMemo)(() => {
-    var _a2;
-    return (_a2 = selects.find((item) => item.name === rangeName)) == null ? void 0 : _a2.range(isMoment ? (0, import_moment.default)() : (0, import_dayjs.default)());
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_design.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('ranger');
+  const {
+    wrapSSR
+  } = (0, _style.default)(prefixCls);
+  // 是否为 moment 时间对象
+  const isMoment = _moment.default.isMoment(defaultValue?.[0]) || _moment.default.isMoment(defaultValue?.[1]) || _moment.default.isMoment(value?.[0]) || _moment.default.isMoment(value?.[1]);
+  const [innerValue, setInnerValue] = (0, _react.useState)(value ?? defaultValue);
+  const [rangeName, setRangeName] = (0, _react.useState)(value || defaultValue ? _constant.CUSTOMIZE : defaultQuickValue ?? selects?.[0]?.name);
+  const defaultInternalValue = (0, _react.useMemo)(() => {
+    return selects.find(item => item.name === rangeName)?.range(isMoment ? (0, _moment.default)() : (0, _dayjs.default)());
   }, [defaultValue]);
   const compare = (m1, m2) => {
-    if (Array.isArray(m1) && !Array.isArray(m2))
-      return false;
-    if (Array.isArray(m2) && !Array.isArray(m1))
-      return false;
+    if (Array.isArray(m1) && !Array.isArray(m2)) return false;
+    if (Array.isArray(m2) && !Array.isArray(m1)) return false;
     return value[0] === innerValue[0] || value[1] === innerValue[1];
   };
-  (0, import_react.useEffect)(() => {
-    if ((0, import_lodash.isNil)(value) && (0, import_lodash.isNil)(innerValue))
-      return;
-    if ((0, import_lodash.isNil)(value) && !(0, import_lodash.isNil)(innerValue))
-      return;
+  (0, _react.useEffect)(() => {
+    if ((0, _lodash.isNil)(value) && (0, _lodash.isNil)(innerValue)) return;
+    // FIXME: 当前存在值的时候赋空值给组件，不好处理先 workaround 绕过，后面再想一个整体的方案
+    if ((0, _lodash.isNil)(value) && !(0, _lodash.isNil)(innerValue)) return;
     const isEqual = compare(value, innerValue);
+    // 前后时间有差异时，进行赋值
     if (!isEqual) {
       setInnerValue(value);
       if (!stickRangeName) {
-        setRangeName(import_constant.CUSTOMIZE);
+        setRangeName(_constant.CUSTOMIZE);
       }
     }
   }, [value, stickRangeName]);
-  (0, import_react.useEffect)(() => {
+  (0, _react.useEffect)(() => {
     if (defaultInternalValue) {
       rangeChange(defaultInternalValue);
     }
   }, []);
-  const handleNameChange = (name) => {
+  const handleNameChange = name => {
     setRangeName(name);
   };
-  const rangeChange = (range) => {
+  const rangeChange = range => {
     setInnerValue(range);
     onChange(range);
   };
-  const datePickerChange = (range) => {
+  const datePickerChange = range => {
     rangeChange(range);
-    setRangeName(import_constant.CUSTOMIZE);
+    setRangeName(_constant.CUSTOMIZE);
   };
-  const disabledFuture = (current) => {
-    const futureDay = import_moment.default.isMoment(current) ? (0, import_moment.default)().endOf("day") : (0, import_dayjs.default)().endOf("day");
+  const disabledFuture = current => {
+    const futureDay = _moment.default.isMoment(current) ? (0, _moment.default)().endOf('day') : (0, _dayjs.default)().endOf('day');
+    // 禁止选择未来日期
     return current && futureDay && current > futureDay;
   };
   let internalQuickType;
-  if (quickType === "dropdown" && rangeName !== import_constant.CUSTOMIZE) {
-    internalQuickType = "dropdown";
+  if (quickType === 'dropdown' && rangeName !== _constant.CUSTOMIZE) {
+    internalQuickType = 'dropdown';
   } else {
-    internalQuickType = "select";
+    internalQuickType = 'select';
   }
-  const showRange = mode === "default" || rangeName === import_constant.CUSTOMIZE;
+  // 普通模式或者当前时间选项为自定义时，应该显示 rangePicker
+  const showRange = mode === 'default' || rangeName === _constant.CUSTOMIZE;
+  // 没有 selects 时，回退到普通 RangePicker
   const showQuickPicker = selects.length !== 0;
-  return wrapSSR(
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_design.Space,
-      {
-        size: 0,
-        className: (0, import_classnames.default)(
-          {
-            [`${prefixCls}-show-range`]: showRange
-          },
-          prefixCls
-        ),
-        style: rest.style,
-        children: [
-          showQuickPicker && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_QuickPicker.default,
-            {
-              customable: true,
-              type: internalQuickType,
-              onChange: rangeChange,
-              onNameChange: handleNameChange,
-              selects,
-              name: rangeName,
-              locale,
-              isMoment,
-              size,
-              ...quickPickerProps
-            }
-          ),
-          showRange && // @ts-ignore
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_design.DatePicker.RangePicker,
-            {
-              disabledDate: pastOnly ? disabledFuture : disabledDate,
-              format: import_constant.DATE_TIME_FORMAT,
-              defaultValue,
-              value: innerValue || defaultInternalValue,
-              onChange: datePickerChange,
-              showTime: true,
-              className: `${prefixCls}-range-picker`,
-              size,
-              ...(0, import_lodash.omit)(rest, "value", "onChange")
-            }
-          )
-        ]
-      }
-    )
-  );
+  return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_design.Space, {
+    size: 0,
+    className: (0, _classnames.default)({
+      [`${prefixCls}-show-range`]: showRange
+    }, prefixCls),
+    style: rest.style,
+    children: [showQuickPicker && /*#__PURE__*/(0, _jsxRuntime.jsx)(_QuickPicker.default, {
+      customable: true,
+      type: internalQuickType,
+      onChange: rangeChange,
+      onNameChange: handleNameChange,
+      selects: selects,
+      name: rangeName,
+      locale: locale,
+      isMoment: isMoment,
+      size: size,
+      ...quickPickerProps
+    }), showRange &&
+    /*#__PURE__*/
+    // @ts-ignore
+    (0, _jsxRuntime.jsx)(_design.DatePicker.RangePicker, {
+      disabledDate: pastOnly ? disabledFuture : disabledDate,
+      format: _constant.DATE_TIME_FORMAT,
+      defaultValue: defaultValue,
+      value: innerValue || defaultInternalValue,
+      onChange: datePickerChange,
+      showTime: true,
+      className: `${prefixCls}-range-picker`,
+      size: size
+      // 透传 props 到 antd Ranger
+      ,
+      ...(0, _lodash.omit)(rest, 'value', 'onChange')
+    })]
+  }));
 };
-var Ranger_default = (0, import_LocaleWrapper.default)({
-  componentName: "Ranger",
-  defaultLocale: import_zh_CN.default
-})(Ranger);
+var _default = exports.default = (0, _LocaleWrapper.default)({
+  componentName: 'Ranger',
+  defaultLocale: _zhCN.default
+})(Ranger);