choerodon-ui/pro/lib/trigger-field/TriggerField.js

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

"use strict";

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

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

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

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

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

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

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

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 _tslib = require("tslib");

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

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

var _propTypes = _interopRequireDefault(require("prop-types"));

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

var _mobx = require("mobx");

var _mobxReact = require("mobx-react");

var _Trigger = _interopRequireDefault(require("../../../lib/trigger/Trigger"));

var _enum = require("../../../lib/trigger/enum");

var _utils = require("../data-set/utils");

var _TextField2 = require("../text-field/TextField");

var _autobind = _interopRequireDefault(require("../_util/autobind"));

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

var _TaskRunner = _interopRequireDefault(require("../_util/TaskRunner"));

var _placements = _interopRequireDefault(require("./placements"));

var _singleton = require("../tooltip/singleton");

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);
  };
}

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

  var _super = _createSuper(TriggerField);

  function TriggerField(props, context) {
    var _this;

    (0, _classCallCheck2["default"])(this, TriggerField);
    _this = _super.call(this, props, context);
    (0, _mobx.runInAction)(function () {
      _this.statePopup = false;
    });
    return _this;
  }

  (0, _createClass2["default"])(TriggerField, [{
    key: "saveTrigger",
    value: function saveTrigger(node) {
      this.trigger = node;
    }
  }, {
    key: "isValidationMessageHidden",
    value: function isValidationMessageHidden(message) {
      return (0, _get3["default"])((0, _getPrototypeOf2["default"])(TriggerField.prototype), "isValidationMessageHidden", this).call(this, message) || this.popup;
    }
  }, {
    key: "setPopup",
    value: function setPopup(statePopup) {
      if (statePopup !== this.statePopup) {
        this.statePopup = statePopup;
        var _this$props$onPopupHi = this.props.onPopupHiddenChange,
            onPopupHiddenChange = _this$props$onPopupHi === void 0 ? _noop["default"] : _this$props$onPopupHi;
        onPopupHiddenChange(!statePopup);

        if (statePopup) {
          (0, _singleton.hide)();
        }
      }
    }
  }, {
    key: "getRootDomNode",
    value: function getRootDomNode() {
      return (0, _reactDom.findDOMNode)(this);
    }
  }, {
    key: "getOmitPropsKeys",
    value: function getOmitPropsKeys() {
      return (0, _get3["default"])((0, _getPrototypeOf2["default"])(TriggerField.prototype), "getOmitPropsKeys", this).call(this).concat(['popupContent', 'popupCls', 'popupStyle', 'popupPlacement', 'editable', 'trigger', 'triggerShowDelay', 'triggerHiddenDelay', 'onPopupHiddenChange', 'getPopupContainer', 'getPopupAlignTarget', 'extraFooterPlacement', 'renderExtraFooter', 'treeDefaultExpandedKeys', 'treeDefaultExpandAll', 'tabIntoPopupContent', 'viewMode']);
    }
  }, {
    key: "getObservableProps",
    value: function getObservableProps(props, context) {
      return (0, _objectSpread2["default"])({}, (0, _get3["default"])((0, _getPrototypeOf2["default"])(TriggerField.prototype), "getObservableProps", this).call(this, props, context), {
        viewMode: props.viewMode
      });
    }
  }, {
    key: "getPopupProps",
    value: function getPopupProps() {
      return {
        setValue: this.setValue.bind(this),
        setPopup: this.setPopup.bind(this)
      };
    }
  }, {
    key: "getPopupClassName",
    value: function getPopupClassName(defaultClassName) {
      return defaultClassName;
    }
  }, {
    key: "getPopupWrapper",
    value: function getPopupWrapper() {
      var trigger = this.trigger;

      if (trigger) {
        return trigger.getPopupWrapper();
      }
    }
  }, {
    key: "renderPopupContent",
    value: function renderPopupContent() {
      var popupContent = this.props.popupContent;

      if (popupContent === undefined) {
        return this.getPopupContent();
      }

      if (popupContent instanceof Function) {
        return popupContent(this.getPopupProps());
      }

      return popupContent;
    }
  }, {
    key: "getDefaultAction",
    value: function getDefaultAction() {
      return [_enum.Action.focus, _enum.Action.click];
    }
  }, {
    key: "getWrappedEditor",
    value: function getWrappedEditor(renderedValue) {
      var prefixCls = this.prefixCls,
          _this$props = this.props,
          popupCls = _this$props.popupCls,
          popupStyle = _this$props.popupStyle,
          popupPlacement = _this$props.popupPlacement,
          hidden = _this$props.hidden,
          _this$props$trigger = _this$props.trigger,
          trigger = _this$props$trigger === void 0 ? this.getDefaultAction() : _this$props$trigger,
          triggerShowDelay = _this$props.triggerShowDelay,
          triggerHiddenDelay = _this$props.triggerHiddenDelay,
          getPopupContainer = _this$props.getPopupContainer,
          tabIntoPopupContent = _this$props.tabIntoPopupContent,
          _this$props$getPopupA = _this$props.getPopupAlignTarget,
          getPopupAlignTarget = _this$props$getPopupA === void 0 ? this.getRootDomNode : _this$props$getPopupA;
      return _react["default"].createElement(_Trigger["default"], {
        ref: this.saveTrigger,
        action: this.readOnly || this.disabled ? [] : trigger,
        focusDelay: triggerShowDelay,
        blurDelay: triggerHiddenDelay,
        mouseEnterDelay: triggerShowDelay,
        mouseLeaveDelay: triggerHiddenDelay,
        prefixCls: prefixCls,
        popupCls: this.getPopupClassName(popupCls),
        popupStyle: popupStyle,
        popupContent: this.renderPopupContent,
        popupPlacement: popupPlacement,
        popupHidden: hidden || !this.popup,
        builtinPlacements: _placements["default"],
        onPopupAnimateAppear: this.handlePopupAnimateAppear,
        onPopupAnimateEnd: this.handlePopupAnimateEnd,
        onPopupHiddenChange: this.handlePopupHiddenChange,
        getPopupStyleFromAlign: this.getPopupStyleFromAlign,
        getRootDomNode: getPopupAlignTarget,
        getPopupContainer: getPopupContainer,
        tabIntoPopupContent: tabIntoPopupContent,
        childrenProps: renderedValue
      }, this.getEditor);
    }
  }, {
    key: "getWrapperClassNames",
    value: function getWrapperClassNames() {
      var _get2, _ref;

      var prefixCls = this.prefixCls;

      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
        args[_key] = arguments[_key];
      }

      return (_get2 = (0, _get3["default"])((0, _getPrototypeOf2["default"])(TriggerField.prototype), "getWrapperClassNames", this)).call.apply(_get2, [this].concat(args, [(_ref = {}, (0, _defineProperty2["default"])(_ref, "".concat(prefixCls, "-expand"), this.popup), (0, _defineProperty2["default"])(_ref, "".concat(prefixCls, "-not-editable"), !this.disabled && !this.editable), _ref)]));
    }
  }, {
    key: "getDefaultSuffix",
    value: function getDefaultSuffix() {
      var prefixCls = this.prefixCls;
      return _react["default"].createElement(_icon["default"], {
        type: this.getTriggerIconFont(),
        className: "".concat(prefixCls, "-trigger")
      });
    }
  }, {
    key: "handleTagAnimateEnd",
    value: function handleTagAnimateEnd() {
      this.forcePopupAlign();
    }
  }, {
    key: "handlePopupMouseDown",
    value: function handlePopupMouseDown(e) {
      e.preventDefault();
      var _this$props$onMouseDo = this.props.onMouseDown,
          onMouseDown = _this$props$onMouseDo === void 0 ? _noop["default"] : _this$props$onMouseDo;
      onMouseDown(e);
    }
  }, {
    key: "handlePopupHiddenChange",
    value: function handlePopupHiddenChange(hidden) {
      this.setPopup(!hidden);
    }
  }, {
    key: "forcePositionChanged",
    value: function forcePositionChanged() {
      this.forcePopupAlign();
    }
  }, {
    key: "forcePopupAlign",
    value: function forcePopupAlign() {
      if (this.trigger) {
        this.trigger.forcePopupAlign();
      }
    }
  }, {
    key: "expand",
    value: function expand() {
      var _this2 = this;

      var popupTask = (0, _utils.getIf)(this, 'popupTask', function () {
        return new _TaskRunner["default"]();
      });
      popupTask.cancel();

      if (!this.readOnly && !this.popup) {
        popupTask.delay(this.props.triggerShowDelay, function () {
          _this2.setPopup(true);
        });
      }
    }
  }, {
    key: "collapse",
    value: function collapse() {
      var _this3 = this;

      var popupTask = (0, _utils.getIf)(this, 'popupTask', function () {
        return new _TaskRunner["default"]();
      });
      popupTask.cancel();

      if (!this.readOnly && this.popup) {
        var element = this.element; // 如果当前焦点在popup中，将焦点换给输入框

        var triggerHiddenDelay = this.props.triggerHiddenDelay;

        if (this.isFocused && element !== document.activeElement) {
          element.focus();
          var triggerShowDelay = this.props.triggerShowDelay;
          triggerHiddenDelay += triggerShowDelay;
        }

        popupTask.delay(triggerHiddenDelay, function () {
          _this3.setPopup(false);
        });
      }
    }
  }, {
    key: "popup",
    get: function get() {
      return this.statePopup;
    }
  }]);
  return TriggerField;
}(_TextField2.TextField);

exports["default"] = TriggerField;
TriggerField.displayName = 'TriggerField';
TriggerField.propTypes = (0, _objectSpread2["default"])({
  /**
   * 下拉框的自定义内容
   */
  popupContent: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),

  /**
   * 下拉框的自定义样式名
   */
  popupCls: _propTypes["default"].string,

  /**
   * 下拉框的内链样式
   */
  popupStyle: _propTypes["default"].object,

  /**
   * 下拉框对齐方式
   */
  popupPlacement: _propTypes["default"].string,

  /**
   * 触发下拉框的方式
   * 可选值：click | focus | hover | contextMenu
   */
  trigger: _mobxReact.PropTypes.arrayOrObservableArrayOf(_propTypes["default"].string),

  /**
   * 下拉框显示延迟
   * @defualt 150
   */
  triggerShowDelay: _propTypes["default"].number,

  /**
   * 下拉框隐藏延迟
   * @defualt 50
   */
  triggerHiddenDelay: _propTypes["default"].number,

  /**
   * 下拉框变化钩子
   */
  onPopupHiddenChange: _propTypes["default"].func,

  /**
   * 定义浮层的容器，默认为 body
   */
  getPopupContainer: _propTypes["default"].func,

  /**
   * 定义浮层对齐的目标，默认为组件最外层元素
   */
  getPopupAlignTarget: _propTypes["default"].func,

  /**
   * 当popup中有可获取焦点对象时，是否按tab键时获取焦点
   */
  tabIntoPopupContent: _propTypes["default"].bool,
  viewMode: _propTypes["default"].oneOf(['none', 'popup', 'modal', 'list', 'drawer'])
}, _TextField2.TextField.propTypes);
TriggerField.defaultProps = (0, _objectSpread2["default"])({}, _TextField2.TextField.defaultProps, {
  suffixCls: 'trigger',
  clearButton: true,
  popupPlacement: 'bottomLeft',
  triggerShowDelay: 150,
  triggerHiddenDelay: 50,
  viewMode: 'popup'
});
(0, _tslib.__decorate)([_mobx.observable], TriggerField.prototype, "statePopup", void 0);
(0, _tslib.__decorate)([_autobind["default"]], TriggerField.prototype, "saveTrigger", null);
(0, _tslib.__decorate)([_autobind["default"]], TriggerField.prototype, "isValidationMessageHidden", null);
(0, _tslib.__decorate)([_mobx.action], TriggerField.prototype, "setPopup", null);
(0, _tslib.__decorate)([_autobind["default"]], TriggerField.prototype, "getRootDomNode", null);
(0, _tslib.__decorate)([_autobind["default"]], TriggerField.prototype, "getPopupWrapper", null);
(0, _tslib.__decorate)([_autobind["default"]], TriggerField.prototype, "renderPopupContent", null);
(0, _tslib.__decorate)([_autobind["default"]], TriggerField.prototype, "handleTagAnimateEnd", null);
(0, _tslib.__decorate)([_autobind["default"]], TriggerField.prototype, "handlePopupMouseDown", null);
(0, _tslib.__decorate)([_autobind["default"]], TriggerField.prototype, "handlePopupHiddenChange", null);
//# sourceMappingURL=TriggerField.js.map