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

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

import _extends from "@babel/runtime/helpers/extends";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import React, { Component } from 'react';
import { isMoment } from 'moment';
import classNames from 'classnames';
import Icon from '../icon';
import Input from '../input';
import Button from '../button';
import Calendar from '../rc-components/calendar';
import RcDatePicker from '../rc-components/calendar/Picker';
import { Size } from '../_util/enum';
import ConfigContext from '../config-provider/ConfigContext';

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

var WeekPicker = /*#__PURE__*/function (_Component) {
  _inherits(WeekPicker, _Component);

  var _super = _createSuper(WeekPicker);

  function WeekPicker(props, context) {
    var _this;

    _classCallCheck(this, WeekPicker);

    _this = _super.call(this, props, context);

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

      var prefixCls = _this.getPrefixCls();

      if (value && current.year() === value.year() && current.week() === value.week()) {
        return /*#__PURE__*/React.createElement("div", {
          className: "".concat(prefixCls, "-selected-day")
        }, /*#__PURE__*/React.createElement("div", {
          className: "".concat(prefixCls, "-date")
        }, current.date()));
      }

      return /*#__PURE__*/React.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 && !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;
  }

  _createClass(WeekPicker, [{
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      if ('value' in nextProps) {
        this.setState({
          value: nextProps.value
        });
      }
    }
  }, {
    key: "getPrefixCls",
    value: function getPrefixCls() {
      var prefixCls = this.props.prefixCls;
      var getPrefixCls = this.context.getPrefixCls;
      return getPrefixCls('calendar', prefixCls);
    }
  }, {
    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 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 prefixCls = this.getPrefixCls();
      var pickerValue = value;

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

      var placeholder = 'placeholder' in props ? props.placeholder : locale.lang.placeholder;
      var calendar = /*#__PURE__*/React.createElement(Calendar, {
        showWeekNumber: true,
        dateRender: this.weekDateRender,
        prefixCls: prefixCls,
        format: format,
        locale: locale.lang,
        showDateInput: false,
        showToday: false,
        disabledDate: disabledDate
      });
      var clearIcon = !disabled && allowClear && value ? /*#__PURE__*/React.createElement(Button, {
        className: "".concat(prefixCls, "-picker-clear"),
        onClick: this.clearSelection,
        shape: "circle",
        icon: "close",
        size: Size.small
      }) : null;
      var suffix = /*#__PURE__*/React.createElement("span", {
        className: "".concat(prefixCls, "-picker-icon-wrapper"),
        onClick: this.onPickerIconClick
      }, clearIcon, /*#__PURE__*/React.createElement(Icon, {
        type: "date_range",
        className: "".concat(prefixCls, "-picker-icon")
      }));

      var input = function input(_ref) {
        var inputValue = _ref.value;
        return /*#__PURE__*/React.createElement(Input, {
          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 /*#__PURE__*/React.createElement("span", {
        className: classNames(className, pickerClass),
        id: id
      }, /*#__PURE__*/React.createElement(RcDatePicker, _extends({}, this.props, {
        calendar: calendar,
        prefixCls: "".concat(prefixCls, "-picker-container"),
        value: pickerValue,
        onChange: this.handleChange,
        onOpenChange: this.handleOpenChange,
        style: popupStyle,
        ref: this.savePicker
      }), input));
    }
  }], [{
    key: "contextType",
    get: function get() {
      return ConfigContext;
    }
  }]);

  return WeekPicker;
}(Component);

export { WeekPicker as default };
WeekPicker.defaultProps = {
  format: 'gggg-wo',
  allowClear: true
};
//# sourceMappingURL=WeekPicker.js.map