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 _createSuper from "@babel/runtime/helpers/createSuper";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import { __decorate } from "tslib";
import { Component } from 'react';
import { findDOMNode } from 'react-dom';
import classNames from 'classnames';
import { action, computed, observable } from 'mobx';
import omit from 'lodash/omit';
import defer from 'lodash/defer';
import noop from 'lodash/noop';
import classes from 'component-classes';
import ConfigContext from '../../../es/config-provider/ConfigContext';
import autobind from '../_util/autobind';
import { Size } from './enum';
import normalizeLanguage from '../_util/normalizeLanguage';
import localeContext from '../locale-context';
/**
 * Code生成器
 */

var CodeGen = /*#__PURE__*/_regeneratorRuntime.mark(function _callee(start) {
  return _regeneratorRuntime.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) {
  _inherits(ViewComponent, _Component);

  var _super = _createSuper(ViewComponent);

  function ViewComponent(props, context) {
    var _this;

    _classCallCheck(this, ViewComponent);

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

    _this.setCode(props);

    _this.setObservableProps(props, context);

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

  _createClass(ViewComponent, [{
    key: "lang",
    get: function get() {
      var lang = this.observableProps.lang;

      if (lang) {
        return lang;
      }

      return localeContext.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.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 = _objectSpread(_objectSpread(_objectSpread({}, wrapperProps), otherProps), {}, {
        className: classNames(wrapperProps.className, otherProps.className)
      });

      if (wrapperProps.style && otherProps.style) {
        mergedProps.style = _objectSpread(_objectSpread({}, 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) {
      _extends(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 = omit(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 = 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$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 = _objectSpread({
        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 = omit(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.apply(void 0, ["".concat(prefixCls, "-wrapper"), className, (_ref = {}, _defineProperty(_ref, "".concat(prefixCls, "-sm"), size === Size.small), _defineProperty(_ref, "".concat(prefixCls, "-lg"), size === Size.large), _defineProperty(_ref, "".concat(prefixCls, "-disabled"), this.disabled), _defineProperty(_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 : _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: "forceBlur",
    value: function forceBlur(e) {
      var _this$props$onBlur = this.props.onBlur,
          onBlur = _this$props$onBlur === void 0 ? noop : _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 || 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) {
      var _this$props3 = this.props,
          code = _this$props3.code,
          prefixCls = _this$props3.prefixCls;
      var nextPrefixCls = nextProps.prefixCls;

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

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

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

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

      if (autoFocus && (tabIndex === undefined || tabIndex > -1) && !this.disabled) {
        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: "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;
    }
  }]);

  return ViewComponent;
}(Component);

export { ViewComponent as default };

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

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

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

__decorate([computed], ViewComponent.prototype, "disabled", 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);

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

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