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")["default"];

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 _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

var _tslib = require("tslib");

var _react = require("react");

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

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

var _mobx = require("mobx");

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

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

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

var _isElement = _interopRequireDefault(require("lodash/isElement"));

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

var _ConfigContext = _interopRequireDefault(require("../../../lib/config-provider/ConfigContext"));

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

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

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

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

/**
 * Code生成器
 */
var CodeGen = /*#__PURE__*/_regenerator["default"].mark(function _callee(start) {
  return _regenerator["default"].wrap(function _callee$(_context2) {
    while (1) {
      switch (_context2.prev = _context2.next) {
        case 0:
          if (!true) {
            _context2.next = 5;
            break;
          }

          _context2.next = 3;
          return "anonymous-".concat(++start);

        case 3:
          _context2.next = 0;
          break;

        case 5:
        case "end":
          return _context2.stop();
      }
    }
  }, _callee);
})(1000);
/* eslint-disable react/no-unused-prop-types */


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

  var _super = (0, _createSuper2["default"])(ViewComponent);

  function ViewComponent(props, context) {
    var _this;

    (0, _classCallCheck2["default"])(this, ViewComponent);
    _this = _super.call(this, props, context); // why the props is undefined ?

    if (props) {
      _this.setCode(props);

      _this.setObservableProps(props, context);

      _this.prefixCls = _this.getContextProPrefixCls(props.suffixCls, props.prefixCls);
    }

    return _this;
  }

  (0, _createClass2["default"])(ViewComponent, [{
    key: "lang",
    get: function get() {
      var lang = this.observableProps.lang;

      if (lang) {
        return lang;
      }

      return _localeContext["default"].locale.lang;
    }
  }, {
    key: "disabled",
    get: function get() {
      return this.isDisabled();
    }
  }, {
    key: "setCode",
    value: function setCode(props) {
      this.code = props.code || CodeGen.next().value;
    }
  }, {
    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] : {};
      var wrapperProps = this.getWrapperProps(props);
      var otherProps = this.getOtherProps();
      var mergedProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, wrapperProps), otherProps), {}, {
        className: (0, _classnames["default"])(wrapperProps.className, otherProps.className)
      });

      if (wrapperProps.style && otherProps.style) {
        mergedProps.style = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, wrapperProps.style), otherProps.style);
      }

      return mergedProps;
    }
  }, {
    key: "getObservableProps",
    value: function getObservableProps(props, _context) {
      return {
        lang: props.lang,
        disabled: props.disabled
      };
    }
  }, {
    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: "getOmitPropsKeys",
    value: function getOmitPropsKeys() {
      var keys = ['code', 'prefixCls', 'suffixCls', 'className', 'elementClassName', 'style', 'size', 'autoFocus', 'onFocus', 'onBlur', 'children', 'dataSet'];

      if (this.disabled) {
        return keys.concat(['onClick', 'onMouseUp', 'onMouseDown', 'onMouseEnter', 'onMouseLeave', // 'onMouseOver',
        // 'onMouseOut',
        'onKeyDown', 'onKeyUp', 'onKeyPress', 'onContextMenu']);
      }

      return keys;
    }
  }, {
    key: "getOtherProps",
    value: function getOtherProps() {
      var props = this.props,
          disabled = this.disabled;
      var tabIndex = props.tabIndex,
          lang = props.lang,
          _props$style = props.style,
          style = _props$style === void 0 ? {} : _props$style;
      var otherProps = (0, _omit["default"])(props, this.getOmitPropsKeys());

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

      otherProps.ref = this.elementReference;
      otherProps.disabled = disabled;
      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;
      }

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

      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$props = this.props,
          style = _this$props.style,
          hidden = _this$props.hidden,
          onMouseEnter = _this$props.onMouseEnter,
          onMouseLeave = _this$props.onMouseLeave;
      var mergedStyle = props.style || style;
      var wrapperProps = (0, _objectSpread2["default"])({
        ref: this.wrapperReference,
        className: this.getWrapperClassNames(),
        hidden: hidden
      }, props);

      if (this.disabled) {
        if (!wrapperProps.onMouseEnter) {
          wrapperProps.onMouseEnter = onMouseEnter;
        }

        if (!wrapperProps.onMouseLeave) {
          wrapperProps.onMouseLeave = onMouseLeave;
        }
      }

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

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

      var prefixCls = this.prefixCls,
          _this$props2 = this.props,
          className = _this$props2.className,
          size = _this$props2.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 === _enum.Size.small), (0, _defineProperty2["default"])(_ref, "".concat(prefixCls, "-lg"), size === _enum.Size.large), (0, _defineProperty2["default"])(_ref, "".concat(prefixCls, "-disabled"), this.disabled), (0, _defineProperty2["default"])(_ref, "".concat(prefixCls, "-focused"), this.useFocusedClassName() && this.isFocus), _ref)].concat(args));
    }
  }, {
    key: "isDisabled",
    value: function isDisabled() {
      var _this$observableProps = this.observableProps.disabled,
          disabled = _this$observableProps === void 0 ? false : _this$observableProps;
      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: "forceBlur",
    value: function forceBlur(e) {
      var _this$props$onBlur = this.props.onBlur,
          onBlur = _this$props$onBlur === void 0 ? _noop["default"] : _this$props$onBlur;
      onBlur(e);
    }
  }, {
    key: "handleBlur",
    value: function handleBlur(e) {
      if (!e.isDefaultPrevented()) {
        var prefixCls = this.prefixCls;
        this.forceBlur(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) {
        this.element.focus();
      }
    }
  }, {
    key: "blur",
    value: function blur() {
      if (this.element && this.element.blur) {
        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) {
      var _this2 = this;

      var _this$props3 = this.props,
          code = _this$props3.code,
          prefixCls = _this$props3.prefixCls,
          disabled = _this$props3.disabled,
          hidden = _this$props3.hidden;
      var nextPrefixCls = nextProps.prefixCls;

      if (prefixCls !== nextPrefixCls) {
        this.prefixCls = this.getContextProPrefixCls(nextProps.suffixCls, nextPrefixCls);
      }

      if (nextProps.code !== code) {
        this.setCode(nextProps);
      }

      if (disabled !== nextProps.disabled || hidden !== nextProps.hidden) {
        (0, _defer["default"])(function () {
          _this2.blur();

          if (_this2.useFocusedClassName()) {
            if (_this2.element && (0, _isElement["default"])(_this2.element)) {
              (0, _componentClasses["default"])(_this2.element).remove("".concat(_this2.prefixCls, "-focused"));
            }
          }
        });
        (0, _mobx.runInAction)(function () {
          _this2.isFocus = false;
          _this2.isFocused = false;
        });
      }

      this.updateObservableProps(nextProps, nextContext);
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this3 = this;

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

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

      if (element) {
        element.style.height = height;
      }
    }
  }, {
    key: "getContextConfig",
    value: function getContextConfig(key) {
      var context = this.context;
      return context.getConfig(key);
    }
  }, {
    key: "getContextProPrefixCls",
    value: function getContextProPrefixCls(suffixCls, customizePrefixCls) {
      var context = this.context;
      return context.getProPrefixCls(suffixCls, customizePrefixCls);
    }
  }], [{
    key: "contextType",
    get: function get() {
      return _ConfigContext["default"];
    }
  }]);
  return ViewComponent;
}(_react.Component);

exports["default"] = ViewComponent;
(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.computed], ViewComponent.prototype, "disabled", 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);
(0, _tslib.__decorate)([_autobind["default"]], ViewComponent.prototype, "getContextConfig", null);
(0, _tslib.__decorate)([_autobind["default"]], ViewComponent.prototype, "getContextProPrefixCls", null);
//# sourceMappingURL=ViewComponent.js.map