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

🌈 🚀lm组件库。🚀

import _extends from "@babel/runtime/helpers/esm/extends";
import moment from 'moment';
import React, { useMemo } from 'react';
import DatePicker from "../../date-picker";
import IconFont from "../../icon-font";
import Radio from "../../radio";
import { getIsHas, getRanges } from "../utils";
var RangePicker = function RangePicker(props) {
  var value = props.value,
    onChange = props.onChange,
    visible = props.visible,
    _props$locale = props.locale,
    locale = _props$locale === void 0 ? {} : _props$locale,
    componentProps = props.componentProps;
  var defaultValue = useMemo(function () {
    var nValue;
    if (getIsHas(value)) {
      nValue = [moment(value[0]), moment(value[1])];
    }
    return nValue;
  }, [value]);

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

  // 最近的时间触发事件
  var handleLastDateOnChange = function handleLastDateOnChange(e) {
    var nValue = JSON.parse(e.target.value);
    onChange(getIsHas(nValue) ? nValue : null);
  };
  var panelRender = function panelRender(panelNode) {
    var activeValue = JSON.stringify(value);
    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(value[0], " - ").concat(value[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]
  }, componentProps, {
    value: defaultValue,
    onChange: handleOnChange,
    open: visible,
    panelRender: panelRender,
    popupClassName: "lm_filter_dropdown_picker",
    size: "middle",
    inputReadOnly: true
  })));
};
export default RangePicker;