choerodon-ui/pro/lib/core/ViewComponent.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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

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 _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 = require("react");

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

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

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

var _mobx = require("mobx");

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

var _defer = _interopRequireDefault(require("lodash/defer"));

var _merge = _interopRequireDefault(require("lodash/merge"));

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

var _componentClasses = _interopRequireDefault(require("component-classes"));

var _configure = require("../../../lib/configure");

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

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

var _normalizeLanguage = _interopRequireDefault(require("../_util/normalizeLanguage"));

var _localeContext = _interopRequireDefault(require("../locale-context"));

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

/* eslint-disable react/no-unused-prop-types */
var ViewComponent =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2["default"])(ViewComponent, _Component);

  var _super = _createSuper(ViewComponent);

  function ViewComponent(props, context) {
    var _this;

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

    _this.setObservableProps(props, context);

    return _this;
  }

  (0, _createClass2["default"])(ViewComponent, [{
    key: "getMergedClassNames",
    value: function getMergedClassNames() {
      for (var _len = arguments.length, props = new Array(_len), _key = 0; _key < _len; _key++) {
        props[_key] = arguments[_key];
      }

      return _classnames["default"].apply(void 0, [this.getClassName(), this.getWrapperClassNames()].concat(props));
    }
  }, {
    key: "getMergedProps",
    value: function getMergedProps() {
      var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
      return (0, _objectSpread2["default"])({}, (0, _merge["default"])(this.getWrapperProps(props), this.getOtherProps()), {
        className: this.getMergedClassNames()
      });
    }
  }, {
    key: "getObservableProps",
    value: function getObservableProps(props, _context) {
      return {
        lang: props.lang
      };
    }
  }, {
    key: "setObservableProps",
    value: function setObservableProps(props, context) {
      this.observableProps = this.getObservableProps(props, context);
    }
  }, {
    key: "updateObservableProps",
    value: function updateObservableProps(props, context) {
      (0, _extends2["default"])(this.observableProps, this.getObservableProps(props, context));
    }
  }, {
    key: "getOtherProps",
    value: function getOtherProps() {
      var _this$props = this.props,
          tabIndex = _this$props.tabIndex,
          lang = _this$props.lang,
          _this$props$style = _this$props.style,
          style = _this$props$style === void 0 ? {} : _this$props$style;
      var otherProps = (0, _omit["default"])(this.props, ['prefixCls', 'suffixCls', 'className', 'elementClassName', 'style', 'size', 'autoFocus', 'onFocus', 'onBlur', 'children', 'dataSet']);

      if (this.isDisabled()) {
        otherProps = (0, _omit["default"])(otherProps, ['onClick', 'onMouseUp', 'onMouseDown', 'onMouseEnter', 'onMouseLeave', 'onMouseOver', 'onMouseOut', 'onKeyDown', 'onKeyUp', 'onKeyPress', 'onContextMenu']);

        if (tabIndex !== undefined) {
          otherProps.tabIndex = -1;
        }
      } else {
        otherProps.onFocus = this.handleFocus;
        otherProps.onBlur = this.handleBlur;
      }

      otherProps.ref = this.elementReference;
      otherProps.disabled = this.isDisabled();
      otherProps.className = this.getClassName();
      otherProps.style = {};

      if (this.height) {
        otherProps.style.height = this.height;
      } else if ('height' in style) {
        otherProps.style.height = style.height;
      }

      if ('minHeight' in style) {
        otherProps.style.minHeight = style.minHeight;
      }

      otherProps.lang = (0, _normalizeLanguage["default"])(lang);
      return otherProps;
    }
  }, {
    key: "getClassName",
    value: function getClassName() {
      var prefixCls = this.prefixCls,
          elementClassName = this.props.elementClassName;

      for (var _len2 = arguments.length, props = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
        props[_key2] = arguments[_key2];
      }

      return _classnames["default"].apply(void 0, [prefixCls, elementClassName].concat(props));
    }
  }, {
    key: "getWrapperProps",
    value: function getWrapperProps() {
      var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
      var _this$props2 = this.props,
          style = _this$props2.style,
          hidden = _this$props2.hidden;
      var wrapperProps = (0, _objectSpread2["default"])({
        ref: this.wrapperReference,
        className: this.getWrapperClassNames(),
        hidden: hidden
      }, props);

      if (style) {
        wrapperProps.style = (0, _omit["default"])(style, ['height', 'minHeight']);
      }

      return wrapperProps;
    }
  }, {
    key: "getWrapperClassNames",
    value: function getWrapperClassNames() {
      var _ref;

      var prefixCls = this.prefixCls,
          _this$props3 = this.props,
          className = _this$props3.className,
          size = _this$props3.size;

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

      return _classnames["default"].apply(void 0, ["".concat(prefixCls, "-wrapper"), className, (_ref = {}, (0, _defineProperty2["default"])(_ref, "".concat(prefixCls, "-sm"), size === 'small'), (0, _defineProperty2["default"])(_ref, "".concat(prefixCls, "-lg"), size === 'large'), (0, _defineProperty2["default"])(_ref, "".concat(prefixCls, "-disabled"), this.isDisabled()), (0, _defineProperty2["default"])(_ref, "".concat(prefixCls, "-focused"), this.useFocusedClassName() && this.isFocus), _ref)].concat(args));
    }
  }, {
    key: "isDisabled",
    value: function isDisabled() {
      var _this$props$disabled = this.props.disabled,
          disabled = _this$props$disabled === void 0 ? false : _this$props$disabled;
      return disabled;
    }
  }, {
    key: "useFocusedClassName",
    value: function useFocusedClassName() {
      return true;
    }
  }, {
    key: "handleFocus",
    value: function handleFocus(e) {
      this.isFocused = true;
      this.isFocus = true;
      var _this$props$onFocus = this.props.onFocus,
          onFocus = _this$props$onFocus === void 0 ? _noop["default"] : _this$props$onFocus,
          prefixCls = this.prefixCls;

      if (this.useFocusedClassName()) {
        var element = this.wrapper || (0, _reactDom.findDOMNode)(this);

        if (element) {
          (0, _componentClasses["default"])(element).add("".concat(prefixCls, "-focused"));
        }
      }

      onFocus(e);
    }
  }, {
    key: "handleBlur",
    value: function handleBlur(e) {
      if (!e.isDefaultPrevented()) {
        var _this$props$onBlur = this.props.onBlur,
            onBlur = _this$props$onBlur === void 0 ? _noop["default"] : _this$props$onBlur,
            prefixCls = this.prefixCls;
        onBlur(e);

        if (!e.isDefaultPrevented()) {
          this.isFocused = false;
          this.isFocus = false;

          if (this.useFocusedClassName()) {
            var element = this.wrapper || (0, _reactDom.findDOMNode)(this);

            if (element) {
              (0, _componentClasses["default"])(element).remove("".concat(prefixCls, "-focused"));
            }
          }
        }
      }
    }
  }, {
    key: "focus",
    value: function focus() {
      if (this.element) {
        this.element.focus();
      }
    }
  }, {
    key: "blur",
    value: function blur() {
      if (this.element) {
        this.element.blur();
      }
    }
  }, {
    key: "elementReference",
    value: function elementReference(node) {
      this.element = node;
    }
  }, {
    key: "wrapperReference",
    value: function wrapperReference(node) {
      this.wrapper = node;
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps, nextContext) {
      this.updateObservableProps(nextProps, nextContext);
    }
  }, {
    key: "componentWillMount",
    value: function componentWillMount() {
      var _this2 = this;

      var _this$props4 = this.props,
          tabIndex = _this$props4.tabIndex,
          autoFocus = _this$props4.autoFocus;

      if (!this.isDisabled() && autoFocus && (tabIndex === undefined || tabIndex > -1)) {
        (0, _defer["default"])(function () {
          return _this2.focus();
        });
      }
    }
  }, {
    key: "setHeight",
    value: function setHeight(height) {
      this.height = height;
      var element = this.element;

      if (element) {
        element.style.height = height;
      }
    }
  }, {
    key: "prefixCls",
    get: function get() {
      var _this$props5 = this.props,
          suffixCls = _this$props5.suffixCls,
          prefixCls = _this$props5.prefixCls;
      return (0, _configure.getProPrefixCls)(suffixCls, prefixCls);
    }
  }, {
    key: "lang",
    get: function get() {
      var lang = this.observableProps.lang;

      if (lang) {
        return lang;
      }

      return _localeContext["default"].locale.lang;
    }
  }]);
  return ViewComponent;
}(_react.Component);

exports["default"] = ViewComponent;
ViewComponent.propTypes = {
  /**
   * 组件id
   */
  id: _propTypes["default"].string,

  /**
   * 组件大小<未实现>
   * 可选值 `default` `small` `big`
   */
  size: _propTypes["default"].oneOf([_enum.Size.small, _enum.Size["default"], _enum.Size.large]),

  /**
   * 样式后缀
   */
  suffixCls: _propTypes["default"].string,

  /**
   * 样式前缀
   */
  prefixCls: _propTypes["default"].string,

  /**
   * 悬浮提示，建议用ToolTip组件
   */
  title: _propTypes["default"].node,

  /**
   *  是否禁用
   */
  disabled: _propTypes["default"].bool,

  /**
   * 是否隐藏
   */
  hidden: _propTypes["default"].bool,

  /**
   * 自动获取焦点，多个组件同时设置该参数时，以节点树的顺序最末的组件获取焦点
   */
  autoFocus: _propTypes["default"].bool,

  /**
   * 内链样式
   */
  style: _propTypes["default"].object,

  /**
   * 自定义样式名
   */
  className: _propTypes["default"].string,

  /**
   * 键盘Tab键焦点序号，设为-1时不会获得焦点，设为0时为节点树的顺序。
   */
  tabIndex: _propTypes["default"].number,

  /**
   * 语言
   */
  lang: _propTypes["default"].string,

  /**
   * 拼写校验
   */
  spellCheck: _propTypes["default"].bool,

  /**
   * 获取焦点回调
   */
  onFocus: _propTypes["default"].func,

  /**
   * 失去焦点回调
   */
  onBlur: _propTypes["default"].func,

  /**
   * 单击回调
   */
  onClick: _propTypes["default"].func,

  /**
   * 双击回调
   */
  onDoubleClick: _propTypes["default"].func,

  /**
   * 鼠标抬起回调
   */
  onMouseUp: _propTypes["default"].func,

  /**
   * 鼠标点下回调
   */
  onMouseDown: _propTypes["default"].func,

  /**
   * 鼠标移动回调
   */
  onMouseMove: _propTypes["default"].func,

  /**
   * 鼠标进入回调
   */
  onMouseEnter: _propTypes["default"].func,

  /**
   * 鼠标离开回调
   */
  onMouseLeave: _propTypes["default"].func,

  /**
   * 鼠标进入回调，与onMouseEnter区别在于鼠标进入子节点时会触发onMouseOut
   */
  onMouseOver: _propTypes["default"].func,

  /**
   * 鼠标离开回调，与onMouseLeave区别在于子节点的onMouseout会冒泡触发本回调
   */
  onMouseOut: _propTypes["default"].func,

  /**
   * 鼠标右击后的回调
   */
  onContextMenu: _propTypes["default"].func,

  /**
   * 键盘按下时的回调
   */
  onKeyDown: _propTypes["default"].func,

  /**
   * 键盘抬起时的回调
   */
  onKeyUp: _propTypes["default"].func,

  /**
   * 键盘敲击后的回调
   */
  onKeyPress: _propTypes["default"].func
};
(0, _tslib.__decorate)([_mobx.observable], ViewComponent.prototype, "isFocused", void 0);
(0, _tslib.__decorate)([_mobx.observable], ViewComponent.prototype, "observableProps", void 0);
(0, _tslib.__decorate)([_mobx.computed], ViewComponent.prototype, "lang", null);
(0, _tslib.__decorate)([_mobx.action], ViewComponent.prototype, "setObservableProps", null);
(0, _tslib.__decorate)([_mobx.action], ViewComponent.prototype, "updateObservableProps", null);
(0, _tslib.__decorate)([_autobind["default"], _mobx.action], ViewComponent.prototype, "handleFocus", null);
(0, _tslib.__decorate)([_autobind["default"], _mobx.action], ViewComponent.prototype, "handleBlur", null);
(0, _tslib.__decorate)([_autobind["default"]], ViewComponent.prototype, "elementReference", null);
(0, _tslib.__decorate)([_autobind["default"], _mobx.action], ViewComponent.prototype, "wrapperReference", null);
//# sourceMappingURL=ViewComponent.js.map