choerodon-ui/lib/rc-components/calendar/Picker.js

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

"use strict";

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

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

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

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

var _reactDom = _interopRequireDefault(require("react-dom"));

var _createReactClass = _interopRequireDefault(require("create-react-class"));

var _noop = _interopRequireDefault(require("lodash/noop"));

var _createChainedFunction = _interopRequireDefault(require("../util/createChainedFunction"));

var _KeyCode = _interopRequireDefault(require("../../_util/KeyCode"));

var _placements = _interopRequireWildcard(require("./picker/placements"));

var _trigger = _interopRequireDefault(require("../trigger"));

function refFn(field, component) {
  this[field] = component;
}

var Picker = (0, _createReactClass["default"])({
  displayName: "Picker",
  getDefaultProps: function getDefaultProps() {
    return {
      prefixCls: 'rc-calendar-picker',
      style: {},
      align: {},
      placement: 'bottomLeft',
      defaultOpen: false,
      onChange: _noop["default"],
      onOpenChange: _noop["default"]
    };
  },
  getInitialState: function getInitialState() {
    var props = this.props;
    var open;

    if ('open' in props) {
      open = props.open;
    } else {
      open = props.defaultOpen;
    }

    var value = props.value || props.defaultValue;
    this.saveCalendarRef = refFn.bind(this, 'calendarInstance');
    return {
      open: open,
      value: value
    };
  },
  componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
    var value = nextProps.value,
        open = nextProps.open;

    if ('value' in nextProps) {
      this.setState({
        value: value
      });
    }

    if (open !== undefined) {
      this.setState({
        open: open
      });
    }
  },
  componentDidUpdate: function componentDidUpdate(_, prevState) {
    if (!prevState.open && this.state.open) {
      // setTimeout is for making sure saveCalendarRef happen before focusCalendar
      this.focusTimeout = setTimeout(this.focusCalendar, 0, this);
    }
  },
  componentWillUnmount: function componentWillUnmount() {
    clearTimeout(this.focusTimeout);
  },
  onCalendarKeyDown: function onCalendarKeyDown(event) {
    if (event.keyCode === _KeyCode["default"].ESC) {
      event.stopPropagation();
      this.close(this.focus);
    }
  },
  onCalendarSelect: function onCalendarSelect(value) {
    var cause = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
    var props = this.props;

    if (!('value' in props)) {
      this.setState({
        value: value
      });
    }

    if (cause.source === 'keyboard' || !props.calendar.props.timePicker && cause.source !== 'dateInput' || cause.source === 'todayButton') {
      this.close(this.focus);
    }

    props.onChange(value);
  },
  onKeyDown: function onKeyDown(event) {
    if (event.keyCode === _KeyCode["default"].DOWN && !this.state.open) {
      this.open();
      event.preventDefault();
    }
  },
  onCalendarOk: function onCalendarOk() {
    this.close(this.focus);
  },
  onCalendarClear: function onCalendarClear() {
    this.close(this.focus);
  },
  onVisibleChange: function onVisibleChange(open) {
    this.setOpen(open);
  },
  getCalendarElement: function getCalendarElement() {
    var props = this.props;
    var state = this.state;
    var calendarProps = props.calendar.props;
    var value = state.value;
    var defaultValue = value;
    var extraProps = {
      ref: this.saveCalendarRef,
      defaultValue: defaultValue || calendarProps.defaultValue,
      selectedValue: value,
      onKeyDown: this.onCalendarKeyDown,
      onOk: (0, _createChainedFunction["default"])(calendarProps.onOk, this.onCalendarOk),
      onSelect: (0, _createChainedFunction["default"])(calendarProps.onSelect, this.onCalendarSelect),
      onClear: (0, _createChainedFunction["default"])(calendarProps.onClear, this.onCalendarClear)
    };
    return /*#__PURE__*/(0, _react.cloneElement)(props.calendar, extraProps);
  },
  setOpen: function setOpen(open, callback) {
    var onOpenChange = this.props.onOpenChange;

    if (this.state.open !== open) {
      if (!('open' in this.props)) {
        this.setState({
          open: open
        }, callback);
      }

      onOpenChange(open);
    }
  },
  open: function open(callback) {
    this.setOpen(true, callback);
  },
  close: function close(callback) {
    this.setOpen(false, callback);
  },
  focus: function focus() {
    if (!this.state.open) {
      _reactDom["default"].findDOMNode(this).focus();
    }
  },
  focusCalendar: function focusCalendar() {
    if (this.state.open && !!this.calendarInstance) {
      this.calendarInstance.focus();
    }
  },
  getBuiltInPlacements: function getBuiltInPlacements() {
    var label = this.props.label;
    var placement_haslabel = {
      'bottomLeft': [0, -19],
      'bottomRight': [0, -19]
    };

    if (label) {
      return (0, _placements.getPlacements)(placement_haslabel);
    }

    return _placements["default"];
  },
  render: function render() {
    var props = this.props;
    var prefixCls = props.prefixCls,
        placement = props.placement,
        style = props.style,
        getCalendarContainer = props.getCalendarContainer,
        align = props.align,
        animation = props.animation,
        disabled = props.disabled,
        dropdownClassName = props.dropdownClassName,
        transitionName = props.transitionName,
        children = props.children;
    var state = this.state;
    var getBuiltInPlacements = this.getBuiltInPlacements();
    return /*#__PURE__*/_react["default"].createElement(_trigger["default"], {
      popup: this.getCalendarElement(),
      popupAlign: align,
      builtinPlacements: getBuiltInPlacements,
      popupPlacement: placement,
      action: disabled && !state.open ? [] : ['click'],
      destroyPopupOnHide: true,
      getPopupContainer: getCalendarContainer,
      popupStyle: style,
      popupAnimation: animation,
      popupTransitionName: transitionName,
      popupVisible: state.open,
      onPopupVisibleChange: this.onVisibleChange,
      prefixCls: prefixCls,
      popupClassName: dropdownClassName
    }, /*#__PURE__*/(0, _react.cloneElement)(children(state, props), {
      onKeyDown: this.onKeyDown
    }));
  }
});
var _default = Picker;
exports["default"] = _default;
//# sourceMappingURL=Picker.js.map