linkmore-design/lib/complex-filter/widgets/DateRangeRender.js

🌈 🚀lm组件库。🚀

"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 _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"));
var _utils = require("../utils");
const RangePicker = props => {
  const {
    value,
    onChange,
    visible,
    locale = {},
    componentProps
  } = props;
  const defaultValue = (0, _react.useMemo)(() => {
    let nValue;
    if ((0, _utils.getIsHas)(value)) {
      nValue = [(0, _moment.default)(value[0]), (0, _moment.default)(value[1])];
    }
    return nValue;
  }, [value]);

  // 最近的时间段, 值为JSON转换后的字符串
  const ranges = (0, _react.useMemo)(() => {
    return Object.entries((0, _utils.getRanges)()).map((item, i) => ({
      id: i,
      label: item[0],
      value: JSON.stringify(item[1])
    }));
  }, []);

  // 选中时间段的触发
  const handleOnChange = (dates, dateStrings) => {
    onChange((0, _utils.getIsHas)(dateStrings.filter(v => !!v)) ? dateStrings : null);
  };

  // 最近的时间触发事件
  const handleLastDateOnChange = e => {
    const nValue = JSON.parse(e.target.value);
    onChange((0, _utils.getIsHas)(nValue) ? nValue : null);
  };
  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, {
      value: activeValue,
      onChange: handleLastDateOnChange,
      size: "small"
    }, ranges.map(v => /*#__PURE__*/_react.default.createElement(_radio.default.Button, {
      key: v.label,
      value: v.value
    }, v.label))))), 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]
  }, componentProps, {
    value: defaultValue,
    onChange: handleOnChange,
    open: visible,
    panelRender: panelRender,
    popupClassName: "lm_filter_dropdown_picker",
    size: "middle",
    inputReadOnly: true
  })));
};
var _default = RangePicker;
exports.default = _default;