choerodon-ui/lib/date-picker/WeekPicker.js

An enterprise-class UI design language and React-based implementation

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _react = _interopRequireWildcard(require("react"));

var _moment = _interopRequireDefault(require("moment"));

var _classnames = _interopRequireDefault(require("classnames"));

var _icon = _interopRequireDefault(require("../icon"));

var _input = _interopRequireDefault(require("../input"));

var _button = _interopRequireDefault(require("../button"));

var _interopDefault = _interopRequireDefault(require("../_util/interopDefault"));

var _calendar = _interopRequireDefault(require("../rc-components/calendar"));

var _Picker = _interopRequireDefault(require("../rc-components/calendar/Picker"));

var _enum = require("../_util/enum");

function _createSuper(Derived) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;

    try {
      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
      return true;
    } catch (e) {
      return false;
    }
  }

  return function () {
    var Super = (0, _getPrototypeOf2["default"])(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor;
      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return (0, _possibleConstructorReturn2["default"])(this, result);
  };
}

function formatValue(value, format) {
  return value && value.format(format) || '';
}

var WeekPicker =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2["default"])(WeekPicker, _Component);

  var _super = _createSuper(WeekPicker);

  function WeekPicker(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, WeekPicker);
    _this = _super.call(this, props);

    _this.weekDateRender = function (current) {
      var value = _this.state.value;
      var prefixCls = _this.props.prefixCls;

      if (value && current.year() === value.year() && current.week() === value.week()) {
        return _react["default"].createElement("div", {
          className: "".concat(prefixCls, "-selected-day")
        }, _react["default"].createElement("div", {
          className: "".concat(prefixCls, "-date")
        }, current.date()));
      }

      return _react["default"].createElement("div", {
        className: "".concat(prefixCls, "-calendar-date")
      }, current.date());
    };

    _this.handleOpenChange = function (status) {
      var onOpenChange = _this.props.onOpenChange;
      var focused = _this.state.focused;

      if (status !== focused) {
        _this.setState({
          focused: status
        });
      }

      if (onOpenChange) {
        onOpenChange(status);
      }
    };

    _this.handleChange = function (value) {
      if (!('value' in _this.props)) {
        _this.setState({
          value: value
        });
      }

      var _this$props = _this.props,
          onChange = _this$props.onChange,
          format = _this$props.format;
      onChange(value, formatValue(value, format));
    };

    _this.clearSelection = function (e) {
      e.preventDefault();
      e.stopPropagation();

      _this.handleChange(null);
    };

    _this.onPickerIconClick = function (e) {
      e.preventDefault();
      e.stopPropagation();
      var disabled = _this.props.disabled;

      if (disabled) {
        return;
      }

      var focused = _this.state.focused;

      _this.picker.setOpen(!focused);
    };

    _this.saveInput = function (node) {
      _this.input = node;
    };

    _this.savePicker = function (node) {
      _this.picker = node;
    };

    var value = props.value || props.defaultValue;

    if (value && !(0, _interopDefault["default"])(_moment["default"]).isMoment(value)) {
      throw new Error('The value/defaultValue of DatePicker or MonthPicker must be a moment object');
    }

    _this.state = {
      value: value,
      focused: false
    };
    return _this;
  }

  (0, _createClass2["default"])(WeekPicker, [{
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      if ('value' in nextProps) {
        this.setState({
          value: nextProps.value
        });
      }
    }
  }, {
    key: "focus",
    value: function focus() {
      this.input.focus();
    }
  }, {
    key: "blur",
    value: function blur() {
      this.input.blur();
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var props = this.props;
      var _this$state = this.state,
          focused = _this$state.focused,
          value = _this$state.value;
      var prefixCls = props.prefixCls,
          className = props.className,
          disabled = props.disabled,
          pickerClass = props.pickerClass,
          popupStyle = props.popupStyle,
          pickerInputClass = props.pickerInputClass,
          format = props.format,
          allowClear = props.allowClear,
          locale = props.locale,
          localeCode = props.localeCode,
          disabledDate = props.disabledDate,
          style = props.style,
          onFocus = props.onFocus,
          onBlur = props.onBlur,
          label = props.label,
          id = props.id;
      var pickerValue = value;

      if (pickerValue && localeCode) {
        pickerValue.locale(localeCode);
      }

      var placeholder = 'placeholder' in props ? props.placeholder : locale.lang.placeholder;

      var calendar = _react["default"].createElement(_calendar["default"], {
        showWeekNumber: true,
        dateRender: this.weekDateRender,
        prefixCls: prefixCls,
        format: format,
        locale: locale.lang,
        showDateInput: false,
        showToday: false,
        disabledDate: disabledDate
      });

      var clearIcon = !disabled && allowClear && value ? _react["default"].createElement(_button["default"], {
        className: "".concat(prefixCls, "-picker-clear"),
        onClick: this.clearSelection,
        shape: "circle",
        icon: "close",
        size: _enum.Size.small
      }) : null;

      var suffix = _react["default"].createElement("span", {
        className: "".concat(prefixCls, "-picker-icon-wrapper"),
        onClick: this.onPickerIconClick
      }, clearIcon, _react["default"].createElement(_icon["default"], {
        type: "date_range",
        className: "".concat(prefixCls, "-picker-icon")
      }));

      var input = function input(_ref) {
        var inputValue = _ref.value;
        return _react["default"].createElement(_input["default"], {
          ref: _this2.saveInput,
          disabled: disabled,
          readOnly: true,
          value: inputValue && inputValue.format(format) || '',
          placeholder: placeholder,
          className: pickerInputClass,
          onFocus: onFocus,
          onBlur: onBlur,
          style: style,
          suffix: suffix,
          label: label,
          focused: focused
        });
      };

      return _react["default"].createElement("span", {
        className: (0, _classnames["default"])(className, pickerClass),
        id: id
      }, _react["default"].createElement(_Picker["default"], (0, _extends2["default"])({}, this.props, {
        calendar: calendar,
        prefixCls: "".concat(prefixCls, "-picker-container"),
        value: pickerValue,
        onChange: this.handleChange,
        onOpenChange: this.handleOpenChange,
        style: popupStyle,
        ref: this.savePicker
      }), input));
    }
  }]);
  return WeekPicker;
}(_react.Component);

exports["default"] = WeekPicker;
WeekPicker.defaultProps = {
  format: 'gggg-wo',
  allowClear: true
};
//# sourceMappingURL=WeekPicker.js.map