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

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

import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _get from "@babel/runtime/helpers/get";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";

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 = _getPrototypeOf(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = _getPrototypeOf(this).constructor;

      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return _possibleConstructorReturn(this, result);
  };
}

import { __decorate } from "tslib";
import React from 'react';
import { findDOMNode } from 'react-dom';
import PropTypes from 'prop-types';
import omit from 'lodash/omit';
import noop from 'lodash/noop';
import { action, computed, observable } from 'mobx';
import { PropTypes as MobxPropTypes } from 'mobx-react';
import Trigger from '../trigger/Trigger';
import { TextField } from '../text-field/TextField';
import autobind from '../_util/autobind';
import Icon from '../icon';
import TaskRunner from '../_util/TaskRunner';
var BUILT_IN_PLACEMENTS = {
  bottomLeft: {
    points: ['tl', 'bl'],
    offset: [0, 4],
    overflow: {
      adjustX: 1,
      adjustY: 1
    }
  },
  bottomRight: {
    points: ['tr', 'br'],
    offset: [0, 4],
    overflow: {
      adjustX: 1,
      adjustY: 1
    }
  },
  topLeft: {
    points: ['bl', 'tl'],
    offset: [0, -4],
    overflow: {
      adjustX: 1,
      adjustY: 1
    }
  },
  topRight: {
    points: ['br', 'tr'],
    offset: [0, -4],
    overflow: {
      adjustX: 1,
      adjustY: 1
    }
  }
};

var TriggerField =
/*#__PURE__*/
function (_TextField) {
  _inherits(TriggerField, _TextField);

  var _super = _createSuper(TriggerField);

  function TriggerField(props, context) {
    var _this;

    _classCallCheck(this, TriggerField);

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

    _this.setPopup(false);

    return _this;
  }

  _createClass(TriggerField, [{
    key: "isValidationMessageHidden",
    value: function isValidationMessageHidden(message) {
      return _get(_getPrototypeOf(TriggerField.prototype), "isValidationMessageHidden", this).call(this, message) || this.popup;
    }
  }, {
    key: "setPopup",
    value: function setPopup(statePopup) {
      this.statePopup = statePopup;
    }
  }, {
    key: "getRootDomNode",
    value: function getRootDomNode() {
      return findDOMNode(this);
    }
  }, {
    key: "getOtherProps",
    value: function getOtherProps() {
      return omit(_get(_getPrototypeOf(TriggerField.prototype), "getOtherProps", this).call(this), ['popupContent', 'popupCls', 'editable', 'trigger', 'triggerShowDelay', 'triggerHiddenDelay', 'onPopupHiddenChange', 'getPopupContainer', 'extraFooterPlacement', 'renderExtraFooter', 'treeDefaultExpandedKeys', 'treeDefaultExpandAll']);
    }
  }, {
    key: "getPopupProps",
    value: function getPopupProps() {
      return {};
    }
  }, {
    key: "getWrappedEditor",
    value: function getWrappedEditor() {
      var _this2 = this;

      var prefixCls = this.prefixCls,
          _this$props = this.props,
          popupCls = _this$props.popupCls,
          popupStyle = _this$props.popupStyle,
          popupContent = _this$props.popupContent,
          hidden = _this$props.hidden,
          trigger = _this$props.trigger,
          triggerShowDelay = _this$props.triggerShowDelay,
          triggerHiddenDelay = _this$props.triggerHiddenDelay,
          getPopupContainer = _this$props.getPopupContainer;
      var content;

      if (popupContent !== undefined) {
        if (popupContent instanceof Function) {
          content = popupContent(this.getPopupProps());
        } else {
          content = popupContent;
        }
      } else {
        content = this.getPopupContent();
      }

      return React.createElement(Trigger, {
        ref: function ref(node) {
          return _this2.trigger = node;
        },
        action: this.isReadOnly() || this.isDisabled() ? [] : trigger,
        focusDelay: triggerShowDelay,
        blurDelay: triggerHiddenDelay,
        mouseEnterDelay: triggerShowDelay,
        mouseLeaveDelay: triggerHiddenDelay,
        prefixCls: prefixCls,
        popupCls: popupCls,
        popupStyle: popupStyle,
        popupContent: content,
        popupPlacement: "bottomLeft",
        popupHidden: hidden || !this.popup,
        builtinPlacements: BUILT_IN_PLACEMENTS,
        onPopupAnimateAppear: this.handlePopupAnimateAppear,
        onPopupAnimateEnd: this.handlePopupAnimateEnd,
        onPopupHiddenChange: this.handlePopupHiddenChange,
        getPopupStyleFromAlign: this.getPopupStyleFromAlign,
        getRootDomNode: this.getRootDomNode,
        getPopupContainer: getPopupContainer
      }, 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 = _get(_getPrototypeOf(TriggerField.prototype), "getWrapperClassNames", this)).call.apply(_get2, [this].concat(args, [(_ref = {}, _defineProperty(_ref, "".concat(prefixCls, "-expand"), this.popup), _defineProperty(_ref, "".concat(prefixCls, "-not-editable"), !this.isDisabled() && !this.editable), _ref)]));
    }
  }, {
    key: "getDefaultSuffix",
    value: function getDefaultSuffix() {
      var prefixCls = this.prefixCls;
      return React.createElement(Icon, {
        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 : _this$props$onMouseDo;
      onMouseDown(e);
    }
  }, {
    key: "handlePopupHiddenChange",
    value: function handlePopupHiddenChange(hidden) {
      this.setPopup(!hidden);
      var _this$props$onPopupHi = this.props.onPopupHiddenChange,
          onPopupHiddenChange = _this$props$onPopupHi === void 0 ? noop : _this$props$onPopupHi;
      onPopupHiddenChange(hidden);
    }
  }, {
    key: "forcePopupAlign",
    value: function forcePopupAlign() {
      if (this.trigger) {
        this.trigger.forcePopupAlign();
      }
    }
  }, {
    key: "expand",
    value: function expand() {
      var _this3 = this;

      this.popupTask.cancel();

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

      this.popupTask.cancel();

      if (!this.isReadOnly() && this.popup) {
        this.popupTask.delay(this.props.triggerHiddenDelay, function () {
          _this4.setPopup(false);
        });
      }
    }
  }, {
    key: "popup",
    get: function get() {
      return this.statePopup;
    }
  }]);

  return TriggerField;
}(TextField);

export { TriggerField as default };
TriggerField.displayName = 'TriggerField';
TriggerField.propTypes = _objectSpread({
  /**
   * 下拉框的自定义内容
   */
  popupContent: PropTypes.element,

  /**
   * 下拉框的自定义样式名
   */
  popupCls: PropTypes.string,

  /**
   * 下拉框的内链样式
   */
  popupStyle: PropTypes.object,

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

  /**
   * 下拉框显示延迟
   * @defualt 150
   */
  triggerShowDelay: PropTypes.number,

  /**
   * 下拉框隐藏延迟
   * @defualt 50
   */
  triggerHiddenDelay: PropTypes.number,

  /**
   * 下拉框变化钩子
   */
  onPopupHiddenChange: PropTypes.func,

  /**
   * 定义浮层的容器，默认为 body
   */
  getPopupContainer: PropTypes.func
}, TextField.propTypes);
TriggerField.defaultProps = _objectSpread({}, TextField.defaultProps, {
  suffixCls: 'trigger',
  clearButton: true,
  trigger: ['focus', 'click'],
  triggerShowDelay: 150,
  triggerHiddenDelay: 50
});

__decorate([observable], TriggerField.prototype, "statePopup", void 0);

__decorate([computed], TriggerField.prototype, "popup", null);

__decorate([action], TriggerField.prototype, "setPopup", null);

__decorate([autobind], TriggerField.prototype, "getRootDomNode", null);

__decorate([autobind], TriggerField.prototype, "handleTagAnimateEnd", null);

__decorate([autobind], TriggerField.prototype, "handlePopupMouseDown", null);

__decorate([autobind], TriggerField.prototype, "handlePopupHiddenChange", null);
//# sourceMappingURL=TriggerField.js.map