linkmore-design
Version:
🌈 🚀lm组件库。🚀
89 lines (87 loc) • 3.53 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _dayjs = _interopRequireDefault(require("dayjs"));
var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
var _moment = _interopRequireDefault(require("moment"));
var _react = _interopRequireWildcard(require("react"));
var _datePicker = _interopRequireDefault(require("../../date-picker"));
var _iconFont = _interopRequireDefault(require("../../icon-font"));
var _radio = _interopRequireDefault(require("../../radio"));
// 最近的时间段
const quickRanges = [{
label: '近一周',
value: 'week',
range: [(0, _dayjs.default)().subtract(7, 'day').add(1, 'day').format('YYYY-MM-DD'), (0, _dayjs.default)().format('YYYY-MM-DD')]
}, {
label: '近一月',
value: 'month',
range: [(0, _dayjs.default)().subtract(1, 'month').add(1, 'day').format('YYYY-MM-DD'), (0, _dayjs.default)().format('YYYY-MM-DD')]
}, {
label: '近一年',
value: 'year',
range: [(0, _dayjs.default)().subtract(1, 'year').add(1, 'day').format('YYYY-MM-DD'), (0, _dayjs.default)().format('YYYY-MM-DD')]
}];
const RangePicker = props => {
const {
value,
onChange,
locale = {},
...restProps
} = props;
const defaultValue = (0, _react.useMemo)(() => {
if ((0, _isEmpty.default)(value)) return undefined;
return [(0, _moment.default)(value[0]), (0, _moment.default)(value[1])];
}, [value]);
// 最近的时间触发事件
const handleLastDateOnChange = e => {
const {
range
} = quickRanges.find(item => item.value === e.target.value) || {};
onChange(range);
};
const panelRender = panelNode => {
const activeValue = JSON.stringify(value);
return /*#__PURE__*/_react.default.createElement("div", {
className: "filter_picker_box"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "filter_picker_main"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "filter_picker_header"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "filter_picker_header_tip"
}, defaultValue && `${value[0]} - ${value[1]}`), /*#__PURE__*/_react.default.createElement("div", {
className: "filter_picker_header_operate"
}, /*#__PURE__*/_react.default.createElement(_radio.default.Group, {
options: quickRanges,
value: activeValue,
onChange: handleLastDateOnChange,
size: "small",
optionType: "button"
}))), panelNode));
};
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_datePicker.default.RangePicker, (0, _extends2.default)({
picker: "date",
separator: /*#__PURE__*/_react.default.createElement(_iconFont.default, {
type: "lmweb-swap-right",
style: {
color: 'var(--text-color)'
}
}),
placeholder: [locale.rangePickerStartPlaceholder, locale.rangePickerEndPlaceholder]
}, restProps, {
value: defaultValue,
onChange: (dates, dateStrings) => onChange?.(dateStrings),
panelRender: panelRender,
popupClassName: "lm_filter_dropdown_picker",
size: "middle",
inputReadOnly: true
})));
};
var _default = RangePicker;
exports.default = _default;