knk/lib/components/basic/form_item/month_range_picker.js

react components based on react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireDefault(require("react"));
var _antd = require("antd");
var _moment = _interopRequireDefault(require("moment"));
var _propTypes = _interopRequireDefault(require("prop-types"));
/**
 * MonthRangePicker 月份范围选择组件
 */

var MonthPicker = _antd.DatePicker.MonthPicker;
var MonthRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
  var monthRangePickerRef = _react.default.useRef();
  monthRangePickerRef = ref;

  /**
  * 生成 disabledMonth 函数的函数
  * @param {Number} isEnd 0,生成 disabledStartMonth; 1，生成 disabledEndMonth
  */
  var genDisabledMonth = function genDisabledMonth(isEnd) {
    return function (date) {
      var value = props.value;
      var _value = (0, _slicedToArray2.default)(value, 2),
        startMonth = _value[0],
        endMonth = _value[1];
      if (isEnd) {
        return date && startMonth && startMonth.startOf('month').valueOf() > (0, _moment.default)(date).startOf('month').valueOf();
      }
      return date && endMonth && endMonth.startOf('month').valueOf() < (0, _moment.default)(date).startOf('month').valueOf();
    };
  };
  var value = props.value,
    _onChange = props.onChange,
    locale = props.locale,
    disabled = props.disabled,
    allowClear = props.allowClear;
  var _value2 = (0, _slicedToArray2.default)(value, 2),
    startMonth = _value2[0],
    endMonth = _value2[1];
  return /*#__PURE__*/_react.default.createElement(_antd.Row, {
    ref: monthRangePickerRef,
    gutter: 8
  }, /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
    locale: locale
  }, /*#__PURE__*/_react.default.createElement(_antd.Col, {
    span: 12
  }, /*#__PURE__*/_react.default.createElement(MonthPicker, {
    allowClear: allowClear,
    disabled: disabled,
    disabledDate: genDisabledMonth(0),
    onChange: function onChange(data) {
      return _onChange([data, endMonth]);
    },
    placeholder: "\u8BF7\u9009\u62E9\u5F00\u59CB\u65F6\u95F4",
    style: {
      width: '100%'
    },
    value: startMonth
  })), /*#__PURE__*/_react.default.createElement(_antd.Col, {
    span: 12
  }, /*#__PURE__*/_react.default.createElement(MonthPicker, {
    allowClear: allowClear,
    disabled: disabled,
    disabledDate: genDisabledMonth(1),
    onChange: function onChange(data) {
      return _onChange([startMonth, data]);
    },
    placeholder: "\u8BF7\u9009\u62E9\u622A\u6B62\u65F6\u95F4",
    style: {
      width: '100%'
    },
    value: endMonth
  }))));
});
MonthRangePicker.propTypes = {
  value: _propTypes.default.any,
  onChange: _propTypes.default.func,
  disabled: _propTypes.default.bool,
  allowClear: _propTypes.default.bool,
  locale: _propTypes.default.any
};
var _default = exports.default = MonthRangePicker;