@zgfe/business-lib 1.2.50 → 1.2.51-ljy.1

package/es/datePickerOld/index.js

@@ -0,0 +1,218 @@
+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); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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 _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."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useEffect, useState } from 'react';
+import BizSelect from '../select';
+import { DatePickerTypes } from './types';
+import './styles/index.less';
+import { Popover, Skeleton } from 'antd';
+import DatePickerContext from './context';
+import _ from 'lodash';
+import { getDateRange } from './utils';
+import PopoverContent from './popoverContent';
+import IconFont from '../icon/iconFont';
+export var classPrefix = 'biz-date-picker-old-wrap';
+var typeMap = {
+  hour: '按小时',
+  day: '按天',
+  week: '按周',
+  month: '按月',
+  quarter: '按季度',
+  custom: '自定义'
+};
+var BizDatePicker = function BizDatePicker(_ref) {
+  var defaultValue = _ref.defaultValue,
+    value = _ref.value,
+    includeToday = _ref.includeToday,
+    mode = _ref.mode,
+    dateTypeList = _ref.dateTypeList,
+    onChange = _ref.onChange,
+    selectRange = _ref.selectRange,
+    timeRangeOpen = _ref.timeRangeOpen;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    ready = _useState2[0],
+    setReady = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    typeList = _useState4[0],
+    setTypeList = _useState4[1];
+  var _useState5 = useState(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    currentType = _useState6[0],
+    setCurrentType = _useState6[1];
+  var _useState7 = useState(),
+    _useState8 = _slicedToArray(_useState7, 2),
+    dateRange = _useState8[0],
+    setDateRange = _useState8[1];
+  var _useState9 = useState(),
+    _useState10 = _slicedToArray(_useState9, 2),
+    relative = _useState10[0],
+    setRelative = _useState10[1];
+  var _useState11 = useState(),
+    _useState12 = _slicedToArray(_useState11, 2),
+    setTimer = _useState12[1];
+  var _useState13 = useState(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    open = _useState14[0],
+    setOpen = _useState14[1];
+  var _useState15 = useState('个月'),
+    _useState16 = _slicedToArray(_useState15, 2),
+    label = _useState16[0],
+    setLabel = _useState16[1];
+  function init(initValue) {
+    setReady(false);
+    var list = dateTypeList === null || dateTypeList === void 0 ? void 0 : dateTypeList.map(function (type) {
+      return {
+        label: typeMap[type],
+        value: type
+      };
+    });
+    setTypeList(list);
+    var currentType = (initValue === null || initValue === void 0 ? void 0 : initValue.unit) ? list.find(function (item) {
+      return item.value === initValue.unit;
+    }) : list[0];
+    setCurrentType(currentType);
+    if (initValue === null || initValue === void 0 ? void 0 : initValue.relative) {
+      setRelative(initValue.relative);
+      switch (currentType === null || currentType === void 0 ? void 0 : currentType.value) {
+        case 'day':
+          setLabel(initValue.relative[0] + '天');
+          break;
+        case 'week':
+          setLabel(initValue.relative[0] + '周');
+          break;
+        case 'month':
+          setLabel(initValue.relative[0] + '个月');
+          break;
+        case 'quarter':
+          setLabel(initValue.relative[0] + '个季度');
+          break;
+      }
+    }
+    setDateRange({
+      begin: initValue.begin,
+      end: initValue.end
+    });
+    setReady(true);
+  }
+  useEffect(function () {
+    if (defaultValue) init(defaultValue);
+  }, []);
+  useEffect(function () {
+    if (_.isEqual(value, _objectSpread(_objectSpread({}, dateRange), {}, {
+      relative: relative,
+      unit: currentType === null || currentType === void 0 ? void 0 : currentType.value
+    })) || !value) return;
+    init(value);
+  }, [value]);
+  useEffect(function () {
+    if (!onChange || !ready) return;
+    setTimer(function (pre) {
+      clearTimeout(pre);
+      return setTimeout(function () {
+        onChange(_objectSpread(_objectSpread({}, dateRange), {}, {
+          relative: relative,
+          unit: currentType === null || currentType === void 0 ? void 0 : currentType.value
+        }));
+      }, 100);
+    });
+  }, [dateRange, currentType, relative, ready]);
+  if (!typeList.length || !currentType || !ready) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classPrefix
+    }, /*#__PURE__*/React.createElement(Skeleton.Input, {
+      active: true
+    }));
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: classPrefix
+  }, /*#__PURE__*/React.createElement(DatePickerContext.Provider, {
+    value: {
+      includeToday: includeToday,
+      mode: mode,
+      dateRange: dateRange,
+      setDateRange: setDateRange,
+      currentType: currentType.value,
+      relative: relative,
+      setRelative: setRelative,
+      setOpen: setOpen,
+      setLabel: setLabel
+    }
+  }, mode == 'general' && /*#__PURE__*/React.createElement(BizSelect, {
+    className: "".concat(classPrefix, "-type"),
+    theme: "secondary",
+    keyField: "value",
+    labelField: "label",
+    value: currentType,
+    options: typeList,
+    onChange: function onChange(type) {
+      setCurrentType(type);
+      if (type.value === 'custom') {
+        setDateRange(getDateRange(DatePickerTypes.Unit.day, 7, includeToday));
+      }
+      if (type.value === 'hour') {
+        setDateRange(getDateRange(DatePickerTypes.Unit.day, 1, includeToday));
+      }
+      if (type.value === 'day') {
+        setDateRange(getDateRange(DatePickerTypes.Unit.day, 7, includeToday));
+        setRelative([7, includeToday ? 0 : 1]);
+      }
+      if (type.value === 'week') {
+        setDateRange(getDateRange(DatePickerTypes.Unit.week, 4, includeToday));
+        setRelative([4, includeToday ? 0 : 1]);
+      }
+      if (type.value === 'month') {
+        setDateRange(getDateRange(DatePickerTypes.Unit.month, 1, includeToday));
+        setRelative([1, includeToday ? 0 : 1]);
+      }
+      if (type.value === 'quarter') {
+        setDateRange(getDateRange(DatePickerTypes.Unit.quarter, 1, includeToday));
+        setRelative([1, includeToday ? 0 : 1]);
+      }
+    }
+  }), /*#__PURE__*/React.createElement(Popover, {
+    overlayClassName: "".concat(classPrefix, "-input-popover"),
+    open: open,
+    placement: "bottomLeft",
+    trigger: "click",
+    content: /*#__PURE__*/React.createElement(PopoverContent, {
+      setDateRange: setDateRange,
+      setOpen: setOpen,
+      selectRange: selectRange,
+      timeRangeOpen: timeRangeOpen,
+      currentType: currentType.value
+    }),
+    onOpenChange: function onOpenChange() {
+      return setOpen(!open);
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-input ").concat(open ? classPrefix + '-input-active' : ''),
+    onClick: function onClick() {
+      return setOpen(true);
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-input-label")
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: "rili-2",
+    size: 14
+  }), /*#__PURE__*/React.createElement("span", null, currentType.value == DatePickerTypes.Unit.hour ? label ? label : dateRange === null || dateRange === void 0 ? void 0 : dateRange.begin : relative ? '最近' + label : (dateRange === null || dateRange === void 0 ? void 0 : dateRange.begin) + ' 至 ' + (dateRange === null || dateRange === void 0 ? void 0 : dateRange.end))), /*#__PURE__*/React.createElement(IconFont, {
+    type: "xiangxia",
+    size: 14
+  })))));
+};
+BizDatePicker.defaultProps = {
+  includeToday: true,
+  mode: 'general',
+  dateTypeList: [DatePickerTypes.Unit.hour, DatePickerTypes.Unit.day, DatePickerTypes.Unit.week, DatePickerTypes.Unit.month]
+};
+export default BizDatePicker;

package/es/datePickerOld/popoverContent.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { DatePickerTypes } from './types';
+interface PopoverContent {
+    setDateRange?: any;
+    setOpen?: any;
+    timeRangeOpen?: number;
+    selectRange?: number;
+    currentType?: DatePickerTypes.Unit;
+}
+declare const _default: (props: PopoverContent) => React.JSX.Element;
+export default _default;

package/es/datePickerOld/popoverContent.js

@@ -0,0 +1,48 @@
+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); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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); }
+import { Button, Tabs } from 'antd';
+import React, { useRef } from 'react';
+import PickerShortcut from './shortcut';
+import BizDate from './datePicker';
+import { classPrefix } from '.';
+export default (function (props) {
+  var selectRange = props.selectRange,
+    setDateRange = props.setDateRange,
+    setOpen = props.setOpen,
+    currentType = props.currentType;
+  var ref = useRef();
+  return /*#__PURE__*/React.createElement(Tabs, {
+    defaultActiveKey: "1"
+  }, /*#__PURE__*/React.createElement(Tabs.TabPane, {
+    tab: "\u6700\u8FD1",
+    key: "1"
+  }, /*#__PURE__*/React.createElement(PickerShortcut, {
+    selectRange: selectRange,
+    currentType: currentType
+  })), /*#__PURE__*/React.createElement(Tabs.TabPane, {
+    tab: "\u81EA\u5B9A\u4E49",
+    key: "2"
+  }, /*#__PURE__*/React.createElement(BizDate, _objectSpread({
+    ref: ref
+  }, props)), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-popoverContent-btns")
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return setOpen(false);
+    }
+  }, "\u53D6\u6D88"), /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    onClick: function onClick() {
+      if (ref.current) {
+        var _ref$current;
+        var dateValue = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getDateValue();
+        setDateRange(dateValue);
+        setOpen(false);
+      }
+    }
+  }, "\u786E\u5B9A"))));
+});

package/es/datePickerOld/shortcut.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { DatePickerTypes } from './types';
+declare const PickerShortcut: React.FC<{
+    selectRange?: number;
+    currentType?: DatePickerTypes.Unit;
+}>;
+export default PickerShortcut;

package/es/datePickerOld/shortcut.js

@@ -0,0 +1,202 @@
+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."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useContext, useEffect, useState } from 'react';
+import { DatePickerTypes } from './types';
+import { classPrefix } from '.';
+import DatePickerContext from './context';
+import moment from 'moment';
+import { getDateRange } from './utils';
+import { Button, InputNumber } from 'antd';
+var getTypeList = function getTypeList(currentType, mode, includeToday) {
+  var _shortcuts$find;
+  var shortcuts = [{
+    label: '按小时',
+    value: DatePickerTypes.Unit.hour,
+    children: [{
+      value: '昨天',
+      count: 1
+    }, {
+      value: '前天',
+      count: 2
+    }]
+  }, {
+    label: '按天',
+    value: DatePickerTypes.Unit.day,
+    children: [{
+      value: '今天',
+      count: 0
+    }, {
+      value: '昨天',
+      count: 1
+    }, {
+      value: '7天',
+      count: 7
+    }, {
+      value: '14天',
+      count: 14
+    }, {
+      value: '30天',
+      count: 30
+    }]
+  }, {
+    label: '按周',
+    value: DatePickerTypes.Unit.week,
+    children: [{
+      value: '4周',
+      count: 4
+    }, {
+      value: '8周',
+      count: 8
+    }, {
+      value: '12周',
+      count: 12
+    }]
+  }, {
+    label: '按月',
+    value: DatePickerTypes.Unit.month,
+    children: [{
+      value: '1个月',
+      count: 1
+    }, {
+      value: '2个月',
+      count: 2
+    }, {
+      value: '3个月',
+      count: 3
+    }]
+  }, {
+    label: '按季度',
+    value: DatePickerTypes.Unit.quarter,
+    children: [{
+      value: '1季度',
+      count: 1
+    }, {
+      value: '2季度',
+      count: 2
+    }, {
+      value: '4季度',
+      count: 4
+    }]
+  }];
+  var list = (((_shortcuts$find = shortcuts.find(function (item) {
+    return item.value === currentType;
+  })) === null || _shortcuts$find === void 0 ? void 0 : _shortcuts$find.children) || []).filter(function (item) {
+    if (currentType === 'day') {
+      if ((mode === 'general' || !includeToday) && (item.count === 0 || item.count === 1)) return false;
+      return true;
+    }
+    return true;
+  });
+  return list;
+};
+var DateOptionMap = {
+  day: '天',
+  week: '周',
+  month: '月',
+  quarter: '季度'
+};
+var PickerShortcut = function PickerShortcut(_ref) {
+  var selectRange = _ref.selectRange;
+  var _useContext = useContext(DatePickerContext),
+    currentType = _useContext.currentType,
+    mode = _useContext.mode,
+    includeToday = _useContext.includeToday,
+    dateRange = _useContext.dateRange,
+    relative = _useContext.relative,
+    setDateRange = _useContext.setDateRange,
+    setRelative = _useContext.setRelative,
+    setLabel = _useContext.setLabel,
+    setOpen = _useContext.setOpen;
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    active = _useState2[0],
+    setActive = _useState2[1];
+  var _useState3 = useState(active),
+    _useState4 = _slicedToArray(_useState3, 2),
+    numbers = _useState4[0],
+    setNumbers = _useState4[1];
+  var list = getTypeList(currentType, mode, includeToday);
+  useEffect(function () {
+    list = getTypeList(currentType, mode, includeToday);
+    if (!relative && !dateRange) {
+      var _active = list[0];
+      setActive(_active === null || _active === void 0 ? void 0 : _active.count);
+      setLabel === null || setLabel === void 0 ? void 0 : setLabel(_active === null || _active === void 0 ? void 0 : _active.value);
+      if (_active && setRelative) {
+        setRelative([_active === null || _active === void 0 ? void 0 : _active.count, includeToday ? 0 : 1]);
+      }
+    }
+  }, [currentType, mode, includeToday]);
+  useEffect(function () {
+    if (!dateRange || !dateRange.begin || !dateRange.end) return;
+    var begin = dateRange.begin,
+      end = dateRange.end;
+    var item = list.find(function (item) {
+      var match = getDateRange(currentType, item.count, includeToday);
+      return moment(begin).isSame(match.begin) && moment(end).isSame(match.end);
+    });
+    setActive(item === null || item === void 0 ? void 0 : item.count);
+    setLabel === null || setLabel === void 0 ? void 0 : setLabel(item === null || item === void 0 ? void 0 : item.value);
+    if (relative && (!item || item.count !== relative[0]) && setRelative) {
+      setRelative(undefined);
+    }
+  }, [dateRange]);
+  useEffect(function () {
+    if (active === undefined || !setDateRange) return;
+    setDateRange(getDateRange(currentType, active, includeToday));
+    setNumbers(active);
+  }, [active]);
+  useEffect(function () {
+    if (!relative || !setDateRange) return;
+    var _relative = _slicedToArray(relative, 1),
+      count = _relative[0];
+    var item = list.find(function (item) {
+      return item.count === count;
+    });
+    setActive(item === null || item === void 0 ? void 0 : item.count);
+    setLabel === null || setLabel === void 0 ? void 0 : setLabel(item === null || item === void 0 ? void 0 : item.value);
+    setDateRange(getDateRange(currentType, count, includeToday));
+  }, [relative]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-shortcut")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-list")
+  }, mode !== 'superSimple' && /*#__PURE__*/React.createElement(React.Fragment, null, list.map(function (item, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: "".concat(classPrefix, "-item ").concat(active === item.count ? 'active' : ''),
+      onClick: function onClick() {
+        setActive(item.count);
+        setLabel === null || setLabel === void 0 ? void 0 : setLabel(item === null || item === void 0 ? void 0 : item.value);
+        if (setRelative) setRelative([item.count, includeToday ? 0 : 1]);
+      }
+    }, item.value);
+  }))), currentType !== DatePickerTypes.Unit.hour && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-list-relative")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-list-relative-content")
+  }, /*#__PURE__*/React.createElement("span", null, "\u8FD1"), /*#__PURE__*/React.createElement(InputNumber, {
+    min: 1,
+    max: currentType == DatePickerTypes.Unit.month ? selectRange || 12 : selectRange || 365,
+    controls: false,
+    style: {
+      width: '58px'
+    },
+    value: numbers,
+    onChange: function onChange(value) {
+      return setNumbers(value);
+    }
+  }), /*#__PURE__*/React.createElement("span", null, Reflect.get(DateOptionMap, currentType))), /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    onClick: function onClick() {
+      if (!setDateRange) return;
+      setDateRange(getDateRange(currentType, numbers, includeToday));
+      setOpen === null || setOpen === void 0 ? void 0 : setOpen(false);
+    }
+  }, "\u786E\u8BA4")));
+};
+export default PickerShortcut;

package/es/datePickerOld/styles/index.less

@@ -0,0 +1,165 @@
+@import '../../assets/styles/inner.less';
+
+.biz-date-picker-old-wrap {
+  display: flex;
+
+  &-type {
+    width: 88px;
+  }
+
+  &-shortcut {
+    display: flex;
+  }
+
+  &-list {
+    display: flex;
+    margin: 0 16px 0 0;
+
+    &-relative {
+      display: flex;
+      gap: 24px;
+      align-items: center;
+
+      &-content {
+        display: flex;
+        align-items: center;
+        span {
+          margin: 0 8px;
+        }
+
+        .ant-input-number {
+          background-color: #fff !important;
+          border: 1px solid var(---, #ecedf0);
+          border-radius: 4px;
+        }
+      }
+    }
+  }
+
+  .biz-select-handle {
+    margin-right: 16px;
+    padding: 0;
+  }
+
+  &-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 58px;
+    height: @height-base;
+    color: @text-color-secondary;
+    border: 1px solid @border-color-base;
+    cursor: pointer;
+
+    &:first-child {
+      border-radius: @border-radius-small 0px 0px @border-radius-small;
+    }
+
+    &:last-child {
+      border-radius: 0px @border-radius-small @border-radius-small 0px;
+    }
+
+    &:hover {
+      .__default-hover();
+      border-color: @border-color-base;
+    }
+
+    &.active {
+      color: @primary-color;
+      background: @primary-color-hover;
+      border: 1px solid @primary-color;
+    }
+  }
+
+  &-input {
+    display: flex;
+    flex-shrink: 0;
+    gap: 4px;
+    align-items: center;
+    justify-content: space-between;
+    width: 262px;
+    padding: 0px 12px;
+    font-size: 14px;
+    background: #fff;
+    border: 1px solid var(---, #ecedf0);
+    border-radius: 4px;
+
+    &-label {
+      display: flex;
+      gap: 4px;
+      align-items: center;
+    }
+
+    &:hover {
+      // color: #165dff;
+      border-color: @primary-color;
+      cursor: pointer;
+    }
+
+    &:focus {
+      border-color: @primary-color;
+    }
+
+    &:active {
+      border-color: @primary-color;
+    }
+
+    &-active {
+      border-color: @primary-color;
+      box-shadow: 0 0 0 4px #f0f7ff;
+    }
+
+    &-popover {
+      padding-top: 0;
+      .ant-popover-arrow {
+        display: none;
+      }
+
+      .ant-popover-inner-content {
+        padding: 0 16px 16px;
+      }
+
+      .ant-picker-dropdown {
+        padding-top: 0;
+
+        .ant-picker-range-arrow {
+          display: none;
+        }
+      }
+
+      .ant-tabs-top > .ant-tabs-nav::before {
+        border-bottom: 1px solid #fafafb;
+      }
+
+      .ant-popover-inner {
+        background: #fff;
+        border-radius: 8px;
+        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
+      }
+    }
+  }
+
+  &-panel {
+    & div:last-of-type {
+      position: relative !important;
+    }
+
+    .ant-picker-panel-container {
+      background: #fff;
+      border: 1px solid var(--io-n-02, #fafafb);
+      border-radius: 10px;
+      box-shadow: none;
+    }
+
+    .ant-picker-panel-container .ant-picker-panel-focused {
+      border-color: var(--io-n-02, #fafafb);
+    }
+  }
+
+  &-popoverContent-btns {
+    display: flex;
+    gap: 16px;
+    justify-content: flex-end;
+    padding-top: 16px;
+  }
+}