choerodon-ui/lib/button/Button.js

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));

var _react = _interopRequireWildcard(require("react"));

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

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

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

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

var _isNil = _interopRequireDefault(require("lodash/isNil"));

var _isString = _interopRequireDefault(require("lodash/isString"));

var _getReactNodeText = _interopRequireDefault(require("../../pro/lib/_util/getReactNodeText"));

var _enum = require("../../pro/lib/button/enum");

var _util = _interopRequireDefault(require("../../pro/lib/overflow-tip/util"));

var _singleton = require("../../pro/lib/tooltip/singleton");

var _icon = _interopRequireDefault(require("../icon"));

var _ripple = _interopRequireDefault(require("../ripple"));

var _enum2 = require("../_util/enum");

var _enum3 = require("../progress/enum");

var _progress = _interopRequireDefault(require("../progress"));

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

var _excluded = ["prefixCls", "type", "shape", "size", "className", "htmlType", "children", "icon", "ghost", "funcType", "disabled", "rippleDisabled", "renderIcon"],
    _excluded2 = ["style", "onMouseEnter", "onMouseLeave"];
var rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
var isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar); // Insert one space between two chinese characters automatically.

function insertSpace(child, needInserted) {
  // Check the child if is undefined or null.
  if ((0, _isNil["default"])(child)) {
    return;
  }

  var SPACE = needInserted ? ' ' : ''; // strictNullChecks oops.

  if (typeof child !== 'string' && typeof child !== 'number' && (0, _isString["default"])(child.type) && isTwoCNChar(child.props.children)) {
    return /*#__PURE__*/(0, _react.cloneElement)(child, {}, child.props.children.split('').join(SPACE));
  }

  if (typeof child === 'string') {
    if (isTwoCNChar(child)) {
      child = child.split('').join(SPACE);
    }

    return /*#__PURE__*/_react["default"].createElement("span", null, child);
  }

  return child;
}

function defaultRenderIcon(type) {
  return /*#__PURE__*/_react["default"].createElement(_icon["default"], {
    type: type
  });
}

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

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

  function Button(props) {
    var _this;

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

    _this.saveRef = function (element) {
      _this.element = element;
    };

    _this.handleClick = function (e) {
      // Add click effect
      _this.setState({
        clicked: true
      });

      clearTimeout(_this.timeout);
      _this.timeout = window.setTimeout(function () {
        return _this.setState({
          clicked: false
        });
      }, 500);
      var getConfig = _this.context.getConfig;
      var onButtonClick = getConfig('onButtonClick');

      if (onButtonClick) {
        var target = e.target;
        var _this$props = _this.props,
            children = _this$props.children,
            icon = _this$props.icon;
        var promise = Promise.resolve(target && target.textContent || (0, _getReactNodeText["default"])(children));
        promise.then(function (title) {
          return onButtonClick({
            icon: icon,
            title: title
          });
        });
      }

      var onClick = _this.props.onClick;

      if (onClick) {
        onClick(e);
      }
    };

    _this.handleMouseEnter = function (e) {
      var _this$context = _this.context,
          getTooltip = _this$context.getTooltip,
          getTooltipTheme = _this$context.getTooltipTheme,
          getTooltipPlacement = _this$context.getTooltipPlacement;
      var children = _this.props.children;
      var tooltip = getTooltip('button');

      var _assertThisInitialize = (0, _assertThisInitialized2["default"])(_this),
          element = _assertThisInitialize.element;

      if (element && (tooltip === _enum.ButtonTooltip.always || tooltip === _enum.ButtonTooltip.overflow && (0, _util["default"])(element))) {
        (0, _singleton.show)(element, {
          title: children,
          theme: getTooltipTheme('button'),
          placement: getTooltipPlacement('button')
        });
        _this.isTooltipShown = true;
      }

      var _this$props$onMouseEn = _this.props.onMouseEnter,
          onMouseEnter = _this$props$onMouseEn === void 0 ? _noop["default"] : _this$props$onMouseEn;
      onMouseEnter(e);
    };

    _this.handleMouseLeave = function (e) {
      (0, _singleton.hide)();
      var _this$props$onMouseLe = _this.props.onMouseLeave,
          onMouseLeave = _this$props$onMouseLe === void 0 ? _noop["default"] : _this$props$onMouseLe;
      onMouseLeave(e);
    };

    _this.state = {
      loading: props.loading,
      clicked: false,
      hasTwoCNChar: false
    };
    return _this;
  }

  (0, _createClass2["default"])(Button, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.fixTwoCNChar();
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      var _this2 = this;

      var currentLoading = this.props.loading;
      var loading = nextProps.loading;

      if (currentLoading) {
        clearTimeout(this.delayTimeout);
      }

      if (typeof loading !== 'boolean' && loading && loading.delay) {
        this.delayTimeout = window.setTimeout(function () {
          return _this2.setState({
            loading: loading
          });
        }, loading.delay);
      } else {
        this.setState({
          loading: loading
        });
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      this.fixTwoCNChar();
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      if (this.timeout) {
        clearTimeout(this.timeout);
      }

      if (this.delayTimeout) {
        clearTimeout(this.delayTimeout);
      }
    }
  }, {
    key: "fixTwoCNChar",
    value: function fixTwoCNChar() {
      var twoCNChar = this.props.twoCNChar;

      if (twoCNChar) {
        // Fix for HOC usage like <FormatMessage />
        var node = (0, _reactDom.findDOMNode)(this);
        var buttonText = node.textContent || node.innerText;
        var hasTwoCNChar = this.state.hasTwoCNChar;

        if (this.isNeedInserted() && isTwoCNChar(buttonText)) {
          if (!hasTwoCNChar) {
            this.setState({
              hasTwoCNChar: true
            });
          }
        } else if (hasTwoCNChar) {
          this.setState({
            hasTwoCNChar: false
          });
        }
      }
    }
  }, {
    key: "isNeedInserted",
    value: function isNeedInserted() {
      var _this$props2 = this.props,
          icon = _this$props2.icon,
          children = _this$props2.children;
      return _react.Children.count(children) === 1 && !icon;
    }
  }, {
    key: "render",
    value: function render() {
      var _classNames,
          _this3 = this;

      var _this$props3 = this.props,
          customizePrefixCls = _this$props3.prefixCls,
          type = _this$props3.type,
          shape = _this$props3.shape,
          size = _this$props3.size,
          className = _this$props3.className,
          htmlType = _this$props3.htmlType,
          children = _this$props3.children,
          icon = _this$props3.icon,
          ghost = _this$props3.ghost,
          funcType = _this$props3.funcType,
          disabled = _this$props3.disabled,
          rippleDisabled = _this$props3.rippleDisabled,
          _this$props3$renderIc = _this$props3.renderIcon,
          renderIcon = _this$props3$renderIc === void 0 ? defaultRenderIcon : _this$props3$renderIc,
          others = (0, _objectWithoutProperties2["default"])(_this$props3, _excluded);
      var _this$state = this.state,
          loading = _this$state.loading,
          clicked = _this$state.clicked,
          hasTwoCNChar = _this$state.hasTwoCNChar;
      var _this$context2 = this.context,
          getPrefixCls = _this$context2.getPrefixCls,
          getTooltip = _this$context2.getTooltip;
      var prefixCls = getPrefixCls('btn', customizePrefixCls);
      var tooltip = getTooltip('button');

      if (tooltip && [_enum.ButtonTooltip.always, _enum.ButtonTooltip.overflow].includes(tooltip)) {
        others.onMouseEnter = this.handleMouseEnter;
        others.onMouseLeave = this.handleMouseLeave;
      } // large => lg
      // small => sm


      var sizeCls = '';

      switch (size) {
        case _enum2.Size.large:
          sizeCls = 'lg';
          break;

        case _enum2.Size.small:
          sizeCls = 'sm';
          break;

        default:
      }

      var ComponentProp = others.href ? 'a' : 'button';
      var classes = (0, _classnames["default"])(prefixCls, className, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-").concat(type), type), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-").concat(shape), shape), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-").concat(sizeCls), sizeCls), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-icon-only"), !children && icon), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-loading"), loading), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-clicked"), clicked), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-background-ghost"), ghost), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-two-chinese-chars"), hasTwoCNChar), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-").concat(funcType), funcType), _classNames));
      var iconNode = loading ? /*#__PURE__*/_react["default"].createElement(_progress["default"], {
        key: "loading",
        type: _enum3.ProgressType.loading,
        size: _enum2.Size.small
      }) : icon ? renderIcon(icon) : null;
      var kids = children || children === 0 ? _react.Children.map(children, function (child) {
        return insertSpace(child, _this3.isNeedInserted());
      }) : null;
      var style = others.style,
          onMouseEnter = others.onMouseEnter,
          onMouseLeave = others.onMouseLeave,
          otherProps = (0, _objectWithoutProperties2["default"])(others, _excluded2);
      var useWrapper = disabled && ComponentProp === 'button' && (onMouseEnter || onMouseLeave);

      var button = /*#__PURE__*/_react["default"].createElement(_ripple["default"], {
        disabled: rippleDisabled || disabled
      }, /*#__PURE__*/_react["default"].createElement(ComponentProp, (0, _extends2["default"])({
        disabled: disabled,
        onMouseEnter: onMouseEnter,
        onMouseLeave: onMouseLeave
      }, (0, _omit["default"])(otherProps, ['loading', 'twoCNChar']), {
        // 如果没有href属性，则表示组件使用button标签，type为'submit' | 'reset' | 'button'
        type: others.href ? undefined : htmlType || 'button',
        style: useWrapper ? undefined : style,
        className: useWrapper ? undefined : classes,
        onClick: loading ? undefined : this.handleClick,
        ref: this.saveRef
      }), iconNode, kids));

      return useWrapper ? /*#__PURE__*/_react["default"].createElement("span", {
        // @ts-ignore
        disabled: true,
        style: style,
        className: (0, _classnames["default"])(classes, "".concat(prefixCls, "-disabled-wrapper")),
        onMouseEnter: onMouseEnter,
        onMouseLeave: onMouseLeave
      }, button) : button;
    }
  }], [{
    key: "contextType",
    get: function get() {
      return _ConfigContext["default"];
    }
  }]);
  return Button;
}(_react.PureComponent);

exports["default"] = Button;
Button.displayName = 'Button';
Button.__C7N_BUTTON = true;
Button.defaultProps = {
  loading: false,
  ghost: false,
  funcType: 'flat'
};
//# sourceMappingURL=Button.js.map