choerodon-ui/es/button/Button.js

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

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
var _excluded = ["prefixCls", "type", "shape", "size", "className", "htmlType", "children", "icon", "ghost", "funcType", "disabled", "rippleDisabled", "renderIcon"],
    _excluded2 = ["style", "onMouseEnter", "onMouseLeave"];
import React, { Children, cloneElement, PureComponent } from 'react';
import { findDOMNode } from 'react-dom';
import classNames from 'classnames';
import omit from 'lodash/omit';
import noop from 'lodash/noop';
import isNil from 'lodash/isNil';
import isString from 'lodash/isString';
import getReactNodeText from '../../pro/es/_util/getReactNodeText';
import { ButtonTooltip } from '../../pro/es/button/enum';
import isOverflow from '../../pro/es/overflow-tip/util';
import { hide, show } from '../../pro/es/tooltip/singleton';
import Icon from '../icon';
import Ripple from '../ripple';
import { Size } from '../_util/enum';
import { ProgressType } from '../progress/enum';
import Progress from '../progress';
import ConfigContext from '../config-provider/ConfigContext';
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 (isNil(child)) {
    return;
  }

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

  if (typeof child !== 'string' && typeof child !== 'number' && isString(child.type) && isTwoCNChar(child.props.children)) {
    return /*#__PURE__*/cloneElement(child, {}, child.props.children.split('').join(SPACE));
  }

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

    return /*#__PURE__*/React.createElement("span", null, child);
  }

  return child;
}

function defaultRenderIcon(type) {
  return /*#__PURE__*/React.createElement(Icon, {
    type: type
  });
}

var Button = /*#__PURE__*/function (_PureComponent) {
  _inherits(Button, _PureComponent);

  var _super = _createSuper(Button);

  function Button(props) {
    var _this;

    _classCallCheck(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 || getReactNodeText(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 = _assertThisInitialized(_this),
          element = _assertThisInitialize.element;

      if (element && (tooltip === ButtonTooltip.always || tooltip === ButtonTooltip.overflow && isOverflow(element))) {
        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 : _this$props$onMouseEn;
      onMouseEnter(e);
    };

    _this.handleMouseLeave = function (e) {
      hide();
      var _this$props$onMouseLe = _this.props.onMouseLeave,
          onMouseLeave = _this$props$onMouseLe === void 0 ? noop : _this$props$onMouseLe;
      onMouseLeave(e);
    };

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

  _createClass(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 = 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 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 = _objectWithoutProperties(_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 && [ButtonTooltip.always, ButtonTooltip.overflow].includes(tooltip)) {
        others.onMouseEnter = this.handleMouseEnter;
        others.onMouseLeave = this.handleMouseLeave;
      } // large => lg
      // small => sm


      var sizeCls = '';

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

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

        default:
      }

      var ComponentProp = others.href ? 'a' : 'button';
      var classes = classNames(prefixCls, className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-").concat(type), type), _defineProperty(_classNames, "".concat(prefixCls, "-").concat(shape), shape), _defineProperty(_classNames, "".concat(prefixCls, "-").concat(sizeCls), sizeCls), _defineProperty(_classNames, "".concat(prefixCls, "-icon-only"), !children && icon), _defineProperty(_classNames, "".concat(prefixCls, "-loading"), loading), _defineProperty(_classNames, "".concat(prefixCls, "-clicked"), clicked), _defineProperty(_classNames, "".concat(prefixCls, "-background-ghost"), ghost), _defineProperty(_classNames, "".concat(prefixCls, "-two-chinese-chars"), hasTwoCNChar), _defineProperty(_classNames, "".concat(prefixCls, "-").concat(funcType), funcType), _classNames));
      var iconNode = loading ? /*#__PURE__*/React.createElement(Progress, {
        key: "loading",
        type: ProgressType.loading,
        size: Size.small
      }) : icon ? renderIcon(icon) : null;
      var kids = children || children === 0 ? Children.map(children, function (child) {
        return insertSpace(child, _this3.isNeedInserted());
      }) : null;

      var style = others.style,
          onMouseEnter = others.onMouseEnter,
          onMouseLeave = others.onMouseLeave,
          otherProps = _objectWithoutProperties(others, _excluded2);

      var useWrapper = disabled && ComponentProp === 'button' && (onMouseEnter || onMouseLeave);
      var button = /*#__PURE__*/React.createElement(Ripple, {
        disabled: rippleDisabled || disabled
      }, /*#__PURE__*/React.createElement(ComponentProp, _extends({
        disabled: disabled,
        onMouseEnter: onMouseEnter,
        onMouseLeave: onMouseLeave
      }, omit(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.createElement("span", {
        // @ts-ignore
        disabled: true,
        style: style,
        className: classNames(classes, "".concat(prefixCls, "-disabled-wrapper")),
        onMouseEnter: onMouseEnter,
        onMouseLeave: onMouseLeave
      }, button) : button;
    }
  }], [{
    key: "contextType",
    get: function get() {
      return ConfigContext;
    }
  }]);

  return Button;
}(PureComponent);

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