@oceanbase/ui
Version:
The UI library based on OceanBase Design
639 lines (637 loc) • 32.7 kB
JavaScript
var _excluded = ["selects", "value", "defaultValue", "defaultQuickValue", "hasRewind", "hasPlay", "hasSync", "hasForward", "hasZoomOut", "hasTagInPicker", "pastOnly", "simpleMode", "hideYear", "hideSecond", "autoCalcRange", "history", "onChange", "disabledDate", "locale", "size", "stickRangeName", "tooltipProps", "isMoment", "rules", "tip", "autoAdjustOverflow", "overlayClassName", "overlayStyle", "getPopupContainer"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
import React, { useEffect, useRef, useState, useImperativeHandle, useMemo } from 'react';
import { Button, DatePicker, Divider, Dropdown, Flex, Menu, Radio, Space, Tooltip, message, theme } from '@oceanbase/design';
import { LeftOutlined, RightOutlined, ZoomOutOutlined, SyncOutlined, ArrowLeftOutlined, CopyOutlined, DeleteOutlined } from '@oceanbase/icons';
import dayjs from 'dayjs';
import { findIndex, isEqual as _isEqual, isNil, noop, omit } from 'lodash';
import moment from 'moment';
import classNames from 'classnames';
import LocaleWrapper from "../locale/LocaleWrapper";
import { getPrefix } from "../_util";
import { CUSTOMIZE, DATE_TIME_FORMAT, NEAR_1_MINUTES, NEAR_30_MINUTES, NEAR_1_HOURS, NEAR_3_HOURS, NEAR_6_HOURS, TODAY, YEAR_DATE_TIME_FORMAT, LAST_3_DAYS, DATE_TIME_SECOND_FORMAT, YEAR_DATE_TIME_SECOND_FORMAT, DATE_TIME_FORMAT_CN, DATE_TIME_SECOND_FORMAT_CN, YEAR_DATE_TIME_FORMAT_CN, YEAR_DATE_TIME_SECOND_FORMAT_CN } from "./constant";
import InternalPickerPanel from "./PickerPanel";
import zhCN from "./locale/zh-CN";
import "./index.less";
import { useClickAway } from 'ahooks';
import { useLocalStorageState } from '@oceanbase/util';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var DefaultMaxHistoryCapacity = 20;
var prefix = getPrefix('date-ranger');
var Ranger = /*#__PURE__*/React.forwardRef(function (props, ref) {
var _selects$;
var _props$selects = props.selects,
selects = _props$selects === void 0 ? [NEAR_1_MINUTES, NEAR_30_MINUTES, NEAR_1_HOURS, NEAR_3_HOURS, NEAR_6_HOURS, TODAY, LAST_3_DAYS] : _props$selects,
value = props.value,
defaultValue = props.defaultValue,
defaultQuickValue = props.defaultQuickValue,
_props$hasRewind = props.hasRewind,
hasRewind = _props$hasRewind === void 0 ? true : _props$hasRewind,
_props$hasPlay = props.hasPlay,
hasPlay = _props$hasPlay === void 0 ? false : _props$hasPlay,
_props$hasSync = props.hasSync,
hasSync = _props$hasSync === void 0 ? true : _props$hasSync,
_props$hasForward = props.hasForward,
hasForward = _props$hasForward === void 0 ? true : _props$hasForward,
_props$hasZoomOut = props.hasZoomOut,
hasZoomOut = _props$hasZoomOut === void 0 ? false : _props$hasZoomOut,
_props$hasTagInPicker = props.hasTagInPicker,
hasTagInPicker = _props$hasTagInPicker === void 0 ? false : _props$hasTagInPicker,
_props$pastOnly = props.pastOnly,
pastOnly = _props$pastOnly === void 0 ? false : _props$pastOnly,
_props$simpleMode = props.simpleMode,
simpleMode = _props$simpleMode === void 0 ? false : _props$simpleMode,
_props$hideYear = props.hideYear,
hideYear = _props$hideYear === void 0 ? false : _props$hideYear,
_props$hideSecond = props.hideSecond,
hideSecond = _props$hideSecond === void 0 ? false : _props$hideSecond,
_props$autoCalcRange = props.autoCalcRange,
autoCalcRange = _props$autoCalcRange === void 0 ? false : _props$autoCalcRange,
_props$history = props.history,
historyProp = _props$history === void 0 ? false : _props$history,
_props$onChange = props.onChange,
onChange = _props$onChange === void 0 ? noop : _props$onChange,
disabledDate = props.disabledDate,
locale = props.locale,
size = props.size,
_props$stickRangeName = props.stickRangeName,
stickRangeName = _props$stickRangeName === void 0 ? false : _props$stickRangeName,
tooltipProps = props.tooltipProps,
isMomentProps = props.isMoment,
rules = props.rules,
tip = props.tip,
autoAdjustOverflow = props.autoAdjustOverflow,
overlayClassName = props.overlayClassName,
overlayStyle = props.overlayStyle,
getPopupContainer = props.getPopupContainer,
rest = _objectWithoutProperties(props, _excluded);
var _theme$useToken = theme.useToken(),
token = _theme$useToken.token;
var isCn = locale.antLocale === 'zh-cn';
var isEN = locale.antLocale === 'en';
// 是否为 moment 时间对象
var isMoment = moment.isMoment(defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue[0]) || moment.isMoment(defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue[1]) || moment.isMoment(value === null || value === void 0 ? void 0 : value[0]) || moment.isMoment(value === null || value === void 0 ? void 0 : value[1]) || isMomentProps;
var defaultRangeName = value || defaultValue ? CUSTOMIZE : defaultQuickValue !== null && defaultQuickValue !== void 0 ? defaultQuickValue : selects === null || selects === void 0 || (_selects$ = selects[0]) === null || _selects$ === void 0 ? void 0 : _selects$.name;
var _useState = useState(defaultRangeName),
_useState2 = _slicedToArray(_useState, 2),
rangeName = _useState2[0],
setRangeName = _useState2[1];
var _useState3 = useState(function () {
var _ref, _selects$find;
var initValue = (_ref = value !== null && value !== void 0 ? value : defaultValue) !== null && _ref !== void 0 ? _ref : (_selects$find = selects.find(function (item) {
return item.name === defaultRangeName;
})) === null || _selects$find === void 0 ? void 0 : _selects$find.range(isMoment ? moment() : dayjs());
if (onChange) {
onChange(initValue);
}
return initValue;
}),
_useState4 = _slicedToArray(_useState3, 2),
innerValue = _useState4[0],
setInnerValue = _useState4[1];
var _useState5 = useState(false),
_useState6 = _slicedToArray(_useState5, 2),
open = _useState6[0],
setOpen = _useState6[1];
var _useState7 = useState(false),
_useState8 = _slicedToArray(_useState7, 2),
tooltipOpen = _useState8[0],
setTooltipOpen = _useState8[1];
var _useState9 = useState(false),
_useState10 = _slicedToArray(_useState9, 2),
backRadioFocused = _useState10[0],
setBackRadioFocused = _useState10[1];
var _useState11 = useState(false),
_useState12 = _slicedToArray(_useState11, 2),
historyMenuVisible = _useState12[0],
setHistoryMenuVisible = _useState12[1];
var rangeRef = useRef(null);
var popRef = useRef(null);
var labelRef = useRef(null);
// 没有 selects 时，回退到普通 RangePicker, 当前时间选项为自定义时，应该显示 RangePicker
var _useState13 = useState(rangeName !== CUSTOMIZE),
_useState14 = _slicedToArray(_useState13, 2),
isPlay = _useState14[0],
setIsPlay = _useState14[1];
var history = useMemo(function () {
if (historyProp) {
return {
capacity: _typeof(historyProp) === 'object' ? historyProp.capacity : DefaultMaxHistoryCapacity
};
}
return false;
}, [historyProp]);
var _useLocalStorageState = useLocalStorageState('ob-design-date-ranger-local-storage-range-history-state', {
defaultValue: [],
listenStorageChange: true
}),
_useLocalStorageState2 = _slicedToArray(_useLocalStorageState, 2),
rangeHistory = _useLocalStorageState2[0],
setRangeHistory = _useLocalStorageState2[1];
var updateRangeHistory = function updateRangeHistory(range) {
if (!range) {
return;
}
if (range.length < 2 || !history) {
return;
}
var formattedValue = [range[0].format(YEAR_DATE_TIME_SECOND_FORMAT_CN), range[1].format(YEAR_DATE_TIME_SECOND_FORMAT_CN)];
if (rangeHistory.find(function (item) {
return _isEqual(item, formattedValue);
})) {
return;
}
var updatedValue = [formattedValue].concat(_toConsumableArray(rangeHistory));
if (updatedValue.length > history.capacity) {
updatedValue.splice(0, history.capacity);
}
setRangeHistory(updatedValue);
};
var delRangeHistory = function delRangeHistory(range) {
var updatedValue = rangeHistory.filter(function (item) {
return !_isEqual(item, range);
});
setRangeHistory(updatedValue);
};
var compare = function compare(m1, m2) {
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];
};
useClickAway(function () {
closeTooltip();
}, [].concat(_toConsumableArray(!simpleMode || !isPlay ? [rangeRef] : []), [popRef, labelRef]));
useEffect(function () {
if (isNil(value) && isNil(innerValue)) return;
// FIXME: 当前存在值的时候赋空值给组件，不好处理先 workaround 绕过，后面再想一个整体的方案
if (isNil(value) && !isNil(innerValue)) return;
var isEqual = compare(value, innerValue);
// 前后时间有差异时，进行赋值
if (!isEqual) {
setInnerValue(value);
if (!stickRangeName) {
setRangeName(CUSTOMIZE);
}
}
}, [value, stickRangeName]);
var closeTooltip = function closeTooltip() {
setOpen(false);
setTooltipOpen(false);
};
var handleNameChange = function handleNameChange(name) {
if (name !== CUSTOMIZE) {
closeTooltip();
}
setRangeName(name);
};
var rangeChange = function rangeChange(range) {
setInnerValue(range);
onChange(range);
updateRangeHistory(range);
};
var datePickerChange = function datePickerChange(range) {
rangeChange(range);
setRangeName(CUSTOMIZE);
};
var disabledFuture = function disabledFuture(current) {
var futureDay = moment.isMoment(current) ? moment().endOf('day') : dayjs().endOf('day');
// 禁止选择未来日期
return current && futureDay && current > futureDay;
};
var startTime = innerValue === null || innerValue === void 0 ? void 0 : innerValue[0];
var endTime = innerValue === null || innerValue === void 0 ? void 0 : innerValue[1];
var differenceMs = endTime === null || endTime === void 0 ? void 0 : endTime.diff(startTime);
var differenceSeconds = endTime === null || endTime === void 0 ? void 0 : endTime.diff(startTime, 'seconds');
var differenceMinutes = endTime === null || endTime === void 0 ? void 0 : endTime.diff(startTime, 'minutes');
var differenceHours = endTime === null || endTime === void 0 ? void 0 : endTime.diff(startTime, 'hours');
var differenceDays = endTime === null || endTime === void 0 ? void 0 : endTime.diff(startTime, 'days');
var differenceWeeks = endTime === null || endTime === void 0 ? void 0 : endTime.diff(startTime, 'weeks');
var differenceMonths = endTime === null || endTime === void 0 ? void 0 : endTime.diff(startTime, 'months');
var differenceYears = endTime === null || endTime === void 0 ? void 0 : endTime.diff(startTime, 'years');
var getCustomizeRangeLabel = function getCustomizeRangeLabel() {
if (!autoCalcRange) {
return locale.customize;
}
if (differenceYears > 0) {
return "".concat(differenceYears, "y");
}
if (differenceMonths > 0) {
return "".concat(differenceMonths, "mon");
}
if (differenceWeeks > 0) {
return "".concat(differenceWeeks, "w");
}
if (differenceDays > 0) {
return "".concat(differenceDays, "d");
}
if (differenceHours > 0) {
return "".concat(differenceHours, "h");
}
if (differenceMinutes > 0) {
return "".concat(differenceMinutes, "m");
}
return "".concat(differenceSeconds, "s");
};
var getCustomizeLabel = function getCustomizeLabel() {
if (differenceYears > 0) {
return isEN ? "Nearly ".concat(differenceYears, " years") : "\u8FD1 ".concat(differenceYears, " \u5E74");
}
if (differenceMonths > 0) {
return isEN ? "Nearly ".concat(differenceMonths, " months") : "\u8FD1 ".concat(differenceMonths, " \u6708");
}
if (differenceWeeks > 0) {
return isEN ? "Nearly ".concat(differenceWeeks, " weeks") : "\u8FD1 ".concat(differenceWeeks, " \u5468");
}
if (differenceHours > 0) {
return isEN ? "Nearly ".concat(differenceHours, " hours") : "\u8FD1 ".concat(differenceHours, " \u5C0F\u65F6");
}
if (differenceMinutes > 0) {
return isEN ? "Nearly ".concat(differenceMinutes, " minutes") : "\u8FD1 ".concat(differenceMinutes, " \u5206");
}
return isEN ? "Nearly ".concat(differenceSeconds, " seconds") : "\u8FD1 ".concat(differenceSeconds, " \u79D2");
};
var getHistoryTitle = function getHistoryTitle() {
return isEN ? 'History records' : '历史记录';
};
var setNow = function setNow() {
var selected = selects.find(function (item) {
return item.name === rangeName;
});
if (selected !== null && selected !== void 0 && selected.range) {
rangeChange(selected.range(isMoment ? moment() : dayjs()));
}
if (rangeName === CUSTOMIZE) {
var eTime = isMoment ? moment() : dayjs();
rangeChange([eTime === null || eTime === void 0 ? void 0 : eTime.clone().subtract(differenceMs), eTime]);
}
};
useImperativeHandle(ref, function () {
return {
updateCurrentTime: setNow
};
});
var currentRange = selects.find(function (_item) {
return _item.name === rangeName;
});
var rangeLabel = rangeName === CUSTOMIZE ? getCustomizeRangeLabel() : currentRange === null || currentRange === void 0 ? void 0 : currentRange.rangeLabel;
var label = rangeName === CUSTOMIZE ? getCustomizeLabel() : isEN ? currentRange.enLabel || currentRange.label : currentRange.label;
var thisYear = new Date().getFullYear();
var isThisYear = (startTime === null || startTime === void 0 ? void 0 : startTime.year()) === thisYear && (endTime === null || endTime === void 0 ? void 0 : endTime.year()) === thisYear;
var rangeNameIndex = findIndex(selects, function (item) {
return item.name === rangeName;
});
var nextRangeItem = rangeNameIndex === -1 ? selects.find(function (item) {
var _ref2 = item.range(isMoment ? moment() : dayjs()),
_ref3 = _slicedToArray(_ref2, 2),
s = _ref3[0],
e = _ref3[1];
// 自定义模式下，对比毫秒来选出比当前范围大一级的 rangeItem
var diffMs = e.diff(s);
return diffMs > differenceMs;
}) : selects[rangeNameIndex + 1];
return /*#__PURE__*/_jsxs(Space, {
className: classNames(rest.className, _defineProperty(_defineProperty(_defineProperty({}, prefix, true), "".concat(prefix, "-show-range"), true), "".concat(prefix, "-back-radio-focused"), backRadioFocused)),
style: rest.style,
children: [/*#__PURE__*/_jsxs(Space, {
size: 0,
children: [/*#__PURE__*/_jsxs("div", {
className: classNames("".concat(prefix, "-wrapper"), _defineProperty({}, "".concat(prefix, "-wrapper-has-jumper"), hasRewind || hasForward)),
children: [/*#__PURE__*/_jsx(Dropdown, {
trigger: ['click'],
open: open,
placement: rest.placement,
autoAdjustOverflow: autoAdjustOverflow,
getPopupContainer: getPopupContainer
// 关闭后进行销毁，才可以将 Tooltip 进行同步关闭
,
destroyOnHidden: true,
onOpenChange: function onOpenChange(o) {
if (o === false && tooltipOpen) {
return;
}
setOpen(o);
},
popupRender: function popupRender(originNode) {
return /*#__PURE__*/_jsxs("div", {
ref: popRef,
className: classNames("".concat(prefix, "-dropdown-picker"), overlayClassName),
style: overlayStyle,
children: [/*#__PURE__*/_jsxs(Flex, {
vertical: true,
justify: "space-between",
children: [!historyMenuVisible && /*#__PURE__*/_jsx("div", {
className: "options",
children: originNode
}), history && historyMenuVisible && /*#__PURE__*/_jsxs("div", {
className: "history",
children: [/*#__PURE__*/_jsxs(Button, {
type: "link",
style: {
paddingLeft: 8,
color: token.colorTextBase
},
onClick: function onClick(e) {
setHistoryMenuVisible(false);
e.stopPropagation();
},
children: [/*#__PURE__*/_jsx(ArrowLeftOutlined, {
color: token.colorTextLabel
}), getHistoryTitle()]
}), /*#__PURE__*/_jsx(Menu, {
onClick: function onClick(_ref4) {
var rangeString = _ref4.key;
var vList = rangeString.split(',').map(function (v) {
return v.trim();
});
rangeChange(vList.map(function (v) {
return isMoment ? moment(v) : dayjs(v);
}));
handleNameChange(CUSTOMIZE);
},
style: {
maxHeight: 480,
overflowY: 'auto'
},
items: rangeHistory.map(function (range) {
return {
key: String(range),
label: /*#__PURE__*/_jsxs(Flex, {
className: "".concat(prefix, "-history-menu-item"),
vertical: true,
children: [/*#__PURE__*/_jsxs("span", {
children: [(isMoment ? moment(range[0]) : dayjs(range[0])).format(YEAR_DATE_TIME_SECOND_FORMAT_CN), "~"]
}), /*#__PURE__*/_jsx("span", {
children: (isMoment ? moment(range[1]) : dayjs(range[1])).format(YEAR_DATE_TIME_SECOND_FORMAT_CN)
}), /*#__PURE__*/_jsxs(Space, {
className: "".concat(prefix, "-menu-text-btn-wrapper"),
children: [/*#__PURE__*/_jsx(Button, {
className: "".concat(prefix, "-menu-text-btn"),
type: "text",
color: "default",
variant: "filled",
size: "small",
onClick: function onClick(e) {
e.stopPropagation();
var vList = range.map(function (v) {
return v;
});
var text = "".concat(vList.join('~'));
navigator.clipboard.writeText(text);
message.success(text);
},
children: /*#__PURE__*/_jsx(CopyOutlined, {})
}), /*#__PURE__*/_jsx(Button, {
className: "".concat(prefix, "-menu-text-btn"),
type: "text",
color: "default",
variant: "filled",
size: "small",
onClick: function onClick(e) {
e.stopPropagation();
delRangeHistory(range);
},
children: /*#__PURE__*/_jsx(DeleteOutlined, {})
})]
})]
}, String(range))
};
})
})]
}), history && !historyMenuVisible && /*#__PURE__*/_jsxs(Button, {
type: "link",
style: {
width: 'max-content'
},
onClick: function onClick(e) {
setHistoryMenuVisible(true);
e.stopPropagation();
},
children: [getHistoryTitle(), /*#__PURE__*/_jsx(RightOutlined, {})]
})]
}), /*#__PURE__*/_jsx(Divider, {
type: "vertical",
style: {
height: 'auto',
margin: '0px 4px 0px 0px'
}
}), /*#__PURE__*/_jsx(InternalPickerPanel, {
defaultValue: innerValue || []
// @ts-ignore
,
locale: locale,
disabledDate: pastOnly ? disabledFuture : disabledDate,
tip: tip,
isMoment: isMoment,
rules: rules,
hideSecond: hideSecond,
onOk: function onOk(vList) {
setIsPlay(false);
handleNameChange(CUSTOMIZE);
rangeChange(vList.map(function (v) {
return isMoment ? moment(v) : dayjs(v);
}));
closeTooltip();
},
onCancel: function onCancel() {
closeTooltip();
}
})]
});
},
menu: {
selectable: true,
defaultSelectedKeys: [rangeName],
onClick: function onClick(_ref5) {
var key = _ref5.key,
domEvent = _ref5.domEvent;
var selected = selects.find(function (_item) {
return _item.name === key;
});
// 存在快捷选项切换为极简模式
if (selected !== null && selected !== void 0 && selected.range) {
handleNameChange(key);
setIsPlay(true);
rangeChange(selected.range(isMoment ? moment() : dayjs()));
}
},
items: selects.filter(function (item) {
return !!item;
}).map(function (item) {
return {
key: item.name,
label: /*#__PURE__*/_jsxs(Space, {
size: 8,
style: {
minWidth: 100
},
children: [hasTagInPicker && /*#__PURE__*/_jsx("span", {
className: "".concat(prefix, "-label"),
children: item.rangeLabel
}), isEN ? item.enLabel || item.label : item.label]
})
};
})
},
children: /*#__PURE__*/_jsxs(Space, {
ref: labelRef,
size: 0,
onClick: function onClick() {
setOpen(true);
setTooltipOpen(true);
},
children: [/*#__PURE__*/_jsx("span", {
className: "".concat(prefix, "-label"),
style: {
marginLeft: 8
},
children: rangeLabel
}), simpleMode && isPlay && /*#__PURE__*/_jsx("div", {
className: "".concat(prefix, "-play"),
children: label
})]
})
}), (!simpleMode || !isPlay) && /*#__PURE__*/_jsx("span", {
ref: rangeRef,
onClick: function onClick() {
setOpen(true);
setTooltipOpen(true);
},
children: /*#__PURE__*/_jsx(DatePicker.RangePicker, _objectSpread(_objectSpread({
className: classNames("".concat(prefix, "-picker")),
style: {
// pointerEvents: 'none',
border: 0
},
format: function format(v) {
// format 会影响布局，原先采用 v.year() === new Date().getFullYear() 进行判断，value 一共会传入三次(range0 range1 now), 会传入最新的时间导致判断异常
if (hideYear && isThisYear) {
return hideSecond ? v.format(isCn ? DATE_TIME_FORMAT_CN : DATE_TIME_FORMAT) : v.format(isCn ? DATE_TIME_SECOND_FORMAT_CN : DATE_TIME_SECOND_FORMAT);
}
return hideSecond ? v.format(isCn ? YEAR_DATE_TIME_FORMAT_CN : YEAR_DATE_TIME_FORMAT) : v.format(isCn ? YEAR_DATE_TIME_SECOND_FORMAT_CN : YEAR_DATE_TIME_SECOND_FORMAT);
}
// @ts-ignore
,
value: innerValue,
onChange: datePickerChange,
allowClear: false,
size: size,
suffixIcon: null
// 透传 props 到 antd Ranger
}, omit(rest, 'value', 'onChange', 'style', 'className')), {}, {
open: false
}))
})]
}), /*#__PURE__*/_jsxs(Radio.Group, {
value: isPlay ? 'play' : '',
className: "".concat(prefix, "-playback-control"),
buttonStyle: "solid",
children: [hasRewind && /*#__PURE__*/_jsx(Tooltip, {
title: locale.jumpBack,
getPopupContainer: function getPopupContainer(trigger) {
return trigger.parentNode;
},
children: /*#__PURE__*/_jsx(Radio.Button, {
value: "stepBack",
style: {
paddingInline: 8,
borderInlineStart: 0,
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0
},
onMouseEnter: function onMouseEnter() {
return setBackRadioFocused(true);
},
onMouseLeave: function onMouseLeave() {
return setBackRadioFocused(false);
},
onClick: function onClick() {
if (isPlay) {
setIsPlay(false);
}
if (startTime && endTime) {
var newStartTime = startTime.clone().subtract(differenceMs, 'milliseconds');
var newEndTime = startTime === null || startTime === void 0 ? void 0 : startTime.clone();
rangeChange([newStartTime, newEndTime]);
}
},
children: /*#__PURE__*/_jsx(LeftOutlined, {})
})
}), hasForward && /*#__PURE__*/_jsx(Tooltip, {
title: locale.jumpForward,
getPopupContainer: function getPopupContainer(trigger) {
return trigger.parentNode;
},
children: /*#__PURE__*/_jsx(Radio.Button, {
value: "stepForward",
style: {
paddingInline: 8,
borderInlineStart: 0,
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0
}
// disabled={isPlay}
,
onClick: function onClick() {
if (startTime && endTime) {
var newStartTime = endTime.clone();
var newEndTime = endTime.clone().add(differenceMs);
if (newEndTime.isBefore(new Date())) {
rangeChange([newStartTime, newEndTime]);
} else {
setIsPlay(true);
setNow();
}
}
},
children: /*#__PURE__*/_jsx(RightOutlined, {})
})
})]
})]
}), hasSync && rangeName !== CUSTOMIZE && /*#__PURE__*/_jsx(Button, {
style: {
paddingInline: 8,
color: token.colorTextSecondary
},
onClick: function onClick() {
setNow();
},
children: /*#__PURE__*/_jsx(SyncOutlined, {})
}), hasZoomOut && /*#__PURE__*/_jsx(Button, {
disabled: !nextRangeItem,
style: {
color: token.colorTextSecondary
},
onClick: function onClick() {
setIsPlay(true);
if (nextRangeItem) {
setRangeName(nextRangeItem.name);
rangeChange(nextRangeItem.range(isMoment ? moment() : dayjs()));
return;
}
},
icon: /*#__PURE__*/_jsx(ZoomOutOutlined, {})
})]
});
});
export default LocaleWrapper({
componentName: 'DateRanger',
defaultLocale: zhCN
})(Ranger);