linkmore-design/es/lm-filter/components/DateFilter.js

🌈 🚀lm组件库。🚀

import _extends from "@babel/runtime/helpers/esm/extends";
import React, { useMemo } from 'react';
import moment from 'moment';
import Radio from "../../radio";
import IconFont from "../../icon-font";
import DatePicker from "../../date-picker";
import { getIsHas, getRanges } from "../utils";
var RangePicker = function RangePicker(_ref) {
  var instance = _ref.instance,
    onChange = _ref.onChange,
    itemProps = _ref.itemProps;
  var filterValue = instance.filterValue,
    setFilterValue = instance.setFilterValue,
    visible = instance.visible,
    setVisible = instance.setVisible,
    locale = instance.locale;
  var defaultValue = useMemo(function () {
    var nValue;
    if (getIsHas(filterValue)) {
      nValue = [moment(filterValue[0]), moment(filterValue[1])];
    }
    return nValue;
  }, [filterValue]);

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

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

  // 最近的时间触发事件
  var handleLastDateOnChange = function handleLastDateOnChange(e) {
    var nValue = JSON.parse(e.target.value);
    setFilterValue(nValue);
  };
  var panelRender = function panelRender(panelNode) {
    var activeValue = JSON.stringify(filterValue);
    return /*#__PURE__*/React.createElement("div", {
      className: "filter_picker_box"
    }, /*#__PURE__*/React.createElement("div", {
      className: "filter_picker_main"
    }, /*#__PURE__*/React.createElement("div", {
      className: "filter_picker_header"
    }, /*#__PURE__*/React.createElement("div", {
      className: "filter_picker_header_tip"
    }, defaultValue && "".concat(filterValue[0], " - ").concat(filterValue[1])), /*#__PURE__*/React.createElement("div", {
      className: "filter_picker_header_operate"
    }, /*#__PURE__*/React.createElement(Radio.Group, {
      value: activeValue,
      onChange: handleLastDateOnChange,
      size: "small"
    }, ranges.map(function (v) {
      return /*#__PURE__*/React.createElement(Radio.Button, {
        key: v.label,
        value: v.value
      }, v.label);
    })))), panelNode));
  };
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DatePicker.RangePicker, _extends({
    picker: "date",
    separator: /*#__PURE__*/React.createElement(IconFont, {
      type: "lmweb-swap-right",
      style: {
        color: 'var(--text-color)'
      }
    }),
    placeholder: [locale.rangePickerStartPlaceholder, locale.rangePickerEndPlaceholder]
  }, itemProps, {
    value: defaultValue,
    onChange: handleOnChange,
    open: visible,
    onOpenChange: function onOpenChange(vis) {
      return setVisible(vis);
    },
    panelRender: panelRender,
    dropdownClassName: "lm_filter_dropdown_picker",
    size: "middle",
    inputReadOnly: true
  })));
};

// 日期范围选择器
var DatePickerFilter = function DatePickerFilter(_ref2) {
  var instance = _ref2.instance,
    itemProps = _ref2.item;
  var filterValue = instance.filterValue,
    setFilterValue = instance.setFilterValue,
    visible = instance.visible,
    setVisible = instance.setVisible,
    locale = instance.locale;
  var props = itemProps.props;
  var _ref3 = props || {},
    _ref3$picker = _ref3.picker,
    picker = _ref3$picker === void 0 ? 'date' : _ref3$picker;
  var defaultValue = useMemo(function () {
    var nValue;
    // 周/月/季/年 需要处理回显
    if (picker !== 'date') return nValue;
    if (filterValue) {
      nValue = moment(filterValue);
    }
    return nValue;
  }, [filterValue]);

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