linkmore-design/lib/lm-filter/components/DateFilter.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 _react = _interopRequireWildcard(require("react"));
var _moment = _interopRequireDefault(require("moment"));
var _radio = _interopRequireDefault(require("../../radio"));
var _iconFont = _interopRequireDefault(require("../../icon-font"));
var _datePicker = _interopRequireDefault(require("../../date-picker"));
var _utils = require("../utils");
const RangePicker = ({
  instance,
  onChange,
  itemProps
}) => {
  const {
    filterValue,
    setFilterValue,
    visible,
    setVisible,
    locale
  } = instance;
  const defaultValue = (0, _react.useMemo)(() => {
    let nValue;
    if ((0, _utils.getIsHas)(filterValue)) {
      nValue = [(0, _moment.default)(filterValue[0]), (0, _moment.default)(filterValue[1])];
    }
    return nValue;
  }, [filterValue]);

  // 最近的时间段, 值为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(dates, (0, _utils.getIsHas)(dateStrings.filter(v => !!v)) ? dateStrings : null);
  };

  // 最近的时间触发事件
  const handleLastDateOnChange = e => {
    const nValue = JSON.parse(e.target.value);
    setFilterValue(nValue);
  };
  const panelRender = panelNode => {
    const activeValue = JSON.stringify(filterValue);
    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 && `${filterValue[0]} - ${filterValue[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]
  }, itemProps, {
    value: defaultValue,
    onChange: handleOnChange,
    open: visible,
    onOpenChange: vis => setVisible(vis),
    panelRender: panelRender,
    dropdownClassName: "lm_filter_dropdown_picker",
    size: "middle",
    inputReadOnly: true
  })));
};

// 日期范围选择器
const DatePickerFilter = ({
  instance,
  item: itemProps
}) => {
  const {
    filterValue,
    setFilterValue,
    visible,
    setVisible,
    locale
  } = instance;
  const {
    props
  } = itemProps;
  const {
    picker = 'date'
  } = props || {};
  const defaultValue = (0, _react.useMemo)(() => {
    let nValue;
    // 周/月/季/年 需要处理回显
    if (picker !== 'date') return nValue;
    if (filterValue) {
      nValue = (0, _moment.default)(filterValue);
    }
    return nValue;
  }, [filterValue]);

  // 选中时间段的触发
  const onChange = (dates, dateStrings) => {
    setFilterValue((0, _utils.getIsHas)(dateStrings) ? dateStrings : null);
  };
  if (['range', 'rangePicker'].includes(itemProps.dateType || itemProps.datetype)) {
    return /*#__PURE__*/_react.default.createElement(RangePicker, {
      instance: instance,
      onChange: onChange,
      itemProps: props
    });
  }
  return /*#__PURE__*/_react.default.createElement(_datePicker.default, (0, _extends2.default)({
    placeholder: locale.datePickerPlaceholder
  }, props, {
    defaultValue: defaultValue,
    onChange: onChange,
    open: visible,
    onOpenChange: vis => setVisible(vis),
    size: "middle",
    inputReadOnly: true,
    dropdownClassName: "lm_filter_dropdown_picker"
  }));
};
var _default = DatePickerFilter;
exports.default = _default;