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

🌈 🚀lm组件库。🚀

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["value", "onChange", "locale"];
import dayjs from 'dayjs';
import isEmpty from 'lodash/isEmpty';
import moment from 'moment';
import React, { useMemo } from 'react';
import DatePicker from "../../date-picker";
import IconFont from "../../icon-font";
import Radio from "../../radio";

// 最近的时间段
var quickRanges = [{
  label: '近一周',
  value: 'week',
  range: [dayjs().subtract(7, 'day').add(1, 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
}, {
  label: '近一月',
  value: 'month',
  range: [dayjs().subtract(1, 'month').add(1, 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
}, {
  label: '近一年',
  value: 'year',
  range: [dayjs().subtract(1, 'year').add(1, 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
}];
var RangePicker = function RangePicker(props) {
  var value = props.value,
    _onChange = props.onChange,
    _props$locale = props.locale,
    locale = _props$locale === void 0 ? {} : _props$locale,
    restProps = _objectWithoutProperties(props, _excluded);
  var defaultValue = useMemo(function () {
    if (isEmpty(value)) return undefined;
    return [moment(value[0]), moment(value[1])];
  }, [value]);

  // 最近的时间触发事件
  var handleLastDateOnChange = function handleLastDateOnChange(e) {
    var _ref = quickRanges.find(function (item) {
        return item.value === e.target.value;
      }) || {},
      range = _ref.range;
    _onChange(range);
  };
  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, {
      options: quickRanges,
      value: activeValue,
      onChange: handleLastDateOnChange,
      size: "small",
      optionType: "button"
    }))), 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]
  }, restProps, {
    value: defaultValue,
    onChange: function onChange(dates, dateStrings) {
      return _onChange === null || _onChange === void 0 ? void 0 : _onChange(dateStrings);
    },
    panelRender: panelRender,
    popupClassName: "lm_filter_dropdown_picker",
    size: "middle",
    inputReadOnly: true
  })));
};
export default RangePicker;