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

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

"use strict";

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

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

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

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

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

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 _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));

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

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

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

var _omit = _interopRequireDefault(require("lodash/omit"));

var _isFunction = _interopRequireDefault(require("lodash/isFunction"));

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

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

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

var _warning = _interopRequireDefault(require("../_util/warning"));

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

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

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

var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));

function createPicker(TheCalendar) {
  var _a;

  return _a = /*#__PURE__*/function (_Component) {
    (0, _inherits2["default"])(CalenderWrapper, _Component);

    var _super = (0, _createSuper2["default"])(CalenderWrapper);

    function CalenderWrapper(props, context) {
      var _this;

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

      _this.renderFooter = function () {
        var renderExtraFooter = _this.props.renderExtraFooter;

        var prefixCls = _this.getPrefixCls();

        return renderExtraFooter ? /*#__PURE__*/_react["default"].createElement("div", {
          className: "".concat(prefixCls, "-footer-extra")
        }, renderExtraFooter.apply(void 0, arguments)) : null;
      };

      _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.handleChange = function (_value) {
        var props = _this.props;
        var processV = props.processValue;
        var value = (0, _isFunction["default"])(processV) ? processV(_value) : _value;

        if (!('value' in props)) {
          _this.setState({
            value: value,
            showDate: value
          });
        }

        props.onChange(value, value && value.format(props.format) || '');
      };

      _this.handleCalendarChange = function (value) {
        _this.setState({
          showDate: value
        });
      };

      _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.saveInput = function (node) {
        _this.input = node;
      };

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

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

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

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

    (0, _createClass2["default"])(CalenderWrapper, [{
      key: "componentWillReceiveProps",
      value: function componentWillReceiveProps(nextProps) {
        if ('value' in nextProps) {
          this.setState({
            value: nextProps.value,
            showDate: nextProps.value
          });
        }
      }
    }, {
      key: "focus",
      value: function focus() {
        this.input.focus();
      }
    }, {
      key: "blur",
      value: function blur() {
        this.input.blur();
      }
    }, {
      key: "getPrefixCls",
      value: function getPrefixCls() {
        var prefixCls = this.props.prefixCls;
        var getPrefixCls = this.context.getPrefixCls;
        return getPrefixCls('calendar', prefixCls);
      }
    }, {
      key: "render",
      value: function render() {
        var _classNames,
            _this2 = this;

        var _this$state = this.state,
            value = _this$state.value,
            showDate = _this$state.showDate,
            focused = _this$state.focused;
        var props = (0, _omit["default"])(this.props, ['onChange']);
        var label = props.label,
            disabled = props.disabled,
            pickerInputClass = props.pickerInputClass,
            locale = props.locale,
            localeCode = props.localeCode;
        var prefixCls = this.getPrefixCls();
        var placeholder = 'placeholder' in props ? props.placeholder : locale.lang.placeholder;
        var disabledTime = props.showTime ? props.disabledTime : null;
        var calendarClassName = (0, _classnames["default"])((_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-time"), props.showTime), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-month"), _MonthCalendar["default"] === TheCalendar), _classNames));

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

        var pickerProps = {};
        var calendarProps = {};

        if (props.showTime) {
          calendarProps = {
            onSelect: this.handleChange
          };
        } else {
          pickerProps = {
            onChange: this.handleChange
          };
        }

        if ('mode' in props) {
          calendarProps.mode = props.mode;
        }

        (0, _warning["default"])(!('onOK' in props), 'It should be `DatePicker[onOk]` or `MonthPicker[onOk]`, instead of `onOK`!');

        var calendar = /*#__PURE__*/_react["default"].createElement(TheCalendar, (0, _extends2["default"])({}, calendarProps, {
          disabledDate: props.disabledDate,
          disabledTime: disabledTime,
          locale: locale.lang,
          timePicker: props.timePicker,
          defaultValue: props.defaultPickerValue || (0, _moment["default"])(),
          dateInputPlaceholder: placeholder,
          prefixCls: prefixCls,
          className: calendarClassName,
          onOk: props.onOk,
          dateRender: props.dateRender,
          format: props.format,
          showToday: props.showToday,
          monthCellContentRender: props.monthCellContentRender,
          renderFooter: this.renderFooter,
          onPanelChange: props.onPanelChange,
          onChange: this.handleCalendarChange,
          value: showDate
        }));

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

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

        var inputProps = {
          label: label,
          disabled: disabled,
          placeholder: placeholder,
          suffix: suffix,
          focused: focused
        };

        var input = function input(_ref) {
          var inputValue = _ref.value;
          return /*#__PURE__*/_react["default"].createElement(_input["default"], (0, _extends2["default"])({}, inputProps, {
            ref: _this2.saveInput,
            value: inputValue && inputValue.format(props.format) || '',
            className: pickerInputClass,
            readOnly: true
          }));
        };

        return /*#__PURE__*/_react["default"].createElement("span", {
          id: props.id,
          className: (0, _classnames["default"])(props.className, props.pickerClass),
          style: props.style,
          onFocus: props.onFocus,
          onBlur: props.onBlur
        }, /*#__PURE__*/_react["default"].createElement(_Picker["default"], (0, _extends2["default"])({}, props, pickerProps, {
          onOpenChange: this.handleOpenChange,
          calendar: calendar,
          value: value,
          prefixCls: "".concat(prefixCls, "-picker-container"),
          style: props.popupStyle,
          ref: this.savePicker
        }), input));
      }
    }], [{
      key: "contextType",
      get: function get() {
        return _ConfigContext["default"];
      }
    }]);
    return CalenderWrapper;
  }(_react.Component), _a.displayName = 'CalenderWrapper', _a.defaultProps = {
    allowClear: true,
    showToday: true
  }, _a;
}
//# sourceMappingURL=createPicker.js.map