choerodon-ui/pro/es/core/ViewComponent.js

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

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _extends from "@babel/runtime/helpers/extends";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
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 { Component } from 'react';
import { findDOMNode } from 'react-dom';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import { action, computed, observable } from 'mobx';
import omit from 'lodash/omit';
import defer from 'lodash/defer';
import merge from 'lodash/merge';
import noop from 'lodash/noop';
import classes from 'component-classes';
import { getProPrefixCls } from '../../../es/configure';
import autobind from '../_util/autobind';
import { Size } from './enum';
import normalizeLanguage from '../_util/normalizeLanguage';
import localeContext from '../locale-context';
/* eslint-disable react/no-unused-prop-types */

var ViewComponent =
/*#__PURE__*/
function (_Component) {
  _inherits(ViewComponent, _Component);

  var _super = _createSuper(ViewComponent);

  function ViewComponent(props, context) {
    var _this;

    _classCallCheck(this, ViewComponent);

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

    _this.setObservableProps(props, context);

    return _this;
  }

  _createClass(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.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 _objectSpread({}, merge(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) {
      _extends(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 = omit(this.props, ['prefixCls', 'suffixCls', 'className', 'elementClassName', 'style', 'size', 'autoFocus', 'onFocus', 'onBlur', 'children', 'dataSet']);

      if (this.isDisabled()) {
        otherProps = omit(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 = normalizeLanguage(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.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 = _objectSpread({
        ref: this.wrapperReference,
        className: this.getWrapperClassNames(),
        hidden: hidden
      }, props);

      if (style) {
        wrapperProps.style = omit(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.apply(void 0, ["".concat(prefixCls, "-wrapper"), className, (_ref = {}, _defineProperty(_ref, "".concat(prefixCls, "-sm"), size === 'small'), _defineProperty(_ref, "".concat(prefixCls, "-lg"), size === 'large'), _defineProperty(_ref, "".concat(prefixCls, "-disabled"), this.isDisabled()), _defineProperty(_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 : _this$props$onFocus,
          prefixCls = this.prefixCls;

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

        if (element) {
          classes(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 : _this$props$onBlur,
            prefixCls = this.prefixCls;
        onBlur(e);

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

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

            if (element) {
              classes(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)) {
        defer(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 getProPrefixCls(suffixCls, prefixCls);
    }
  }, {
    key: "lang",
    get: function get() {
      var lang = this.observableProps.lang;

      if (lang) {
        return lang;
      }

      return localeContext.locale.lang;
    }
  }]);

  return ViewComponent;
}(Component);

export { ViewComponent as default };
ViewComponent.propTypes = {
  /**
   * 组件id
   */
  id: PropTypes.string,

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

  /**
   * 样式后缀
   */
  suffixCls: PropTypes.string,

  /**
   * 样式前缀
   */
  prefixCls: PropTypes.string,

  /**
   * 悬浮提示，建议用ToolTip组件
   */
  title: PropTypes.node,

  /**
   *  是否禁用
   */
  disabled: PropTypes.bool,

  /**
   * 是否隐藏
   */
  hidden: PropTypes.bool,

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

  /**
   * 内链样式
   */
  style: PropTypes.object,

  /**
   * 自定义样式名
   */
  className: PropTypes.string,

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

  /**
   * 语言
   */
  lang: PropTypes.string,

  /**
   * 拼写校验
   */
  spellCheck: PropTypes.bool,

  /**
   * 获取焦点回调
   */
  onFocus: PropTypes.func,

  /**
   * 失去焦点回调
   */
  onBlur: PropTypes.func,

  /**
   * 单击回调
   */
  onClick: PropTypes.func,

  /**
   * 双击回调
   */
  onDoubleClick: PropTypes.func,

  /**
   * 鼠标抬起回调
   */
  onMouseUp: PropTypes.func,

  /**
   * 鼠标点下回调
   */
  onMouseDown: PropTypes.func,

  /**
   * 鼠标移动回调
   */
  onMouseMove: PropTypes.func,

  /**
   * 鼠标进入回调
   */
  onMouseEnter: PropTypes.func,

  /**
   * 鼠标离开回调
   */
  onMouseLeave: PropTypes.func,

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

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

  /**
   * 鼠标右击后的回调
   */
  onContextMenu: PropTypes.func,

  /**
   * 键盘按下时的回调
   */
  onKeyDown: PropTypes.func,

  /**
   * 键盘抬起时的回调
   */
  onKeyUp: PropTypes.func,

  /**
   * 键盘敲击后的回调
   */
  onKeyPress: PropTypes.func
};

__decorate([observable], ViewComponent.prototype, "isFocused", void 0);

__decorate([observable], ViewComponent.prototype, "observableProps", void 0);

__decorate([computed], ViewComponent.prototype, "lang", null);

__decorate([action], ViewComponent.prototype, "setObservableProps", null);

__decorate([action], ViewComponent.prototype, "updateObservableProps", null);

__decorate([autobind, action], ViewComponent.prototype, "handleFocus", null);

__decorate([autobind, action], ViewComponent.prototype, "handleBlur", null);

__decorate([autobind], ViewComponent.prototype, "elementReference", null);

__decorate([autobind, action], ViewComponent.prototype, "wrapperReference", null);
//# sourceMappingURL=ViewComponent.js.map