choerodon-ui/pro/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 _regeneratorRuntime from "@babel/runtime/regenerator";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _get from "@babel/runtime/helpers/get";
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 React, { Children } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import omit from 'lodash/omit';
import noop from 'lodash/noop';
import debounce from 'lodash/debounce';
import isString from 'lodash/isString';
import { computed, runInAction } from 'mobx';
import { observer } from 'mobx-react';
import isPromise from 'is-promise';
import { ProgressType } from '../../../es/progress/enum';
import { getConfig } from '../../../es/configure';
import { getTooltip, getTooltipTheme } from '../../../es/_util/TooltipUtils';
import Icon from '../icon';
import FormContext from '../form/FormContext';
import Progress from '../progress';
import Ripple from '../ripple';
import { ButtonColor, ButtonTooltip, ButtonType, FuncType } from './enum';
import { DataSetStatus } from '../data-set/enum';
import { Size, WaitType } from '../core/enum';
import DataSetComponent from '../data-set/DataSetComponent';
import autobind from '../_util/autobind';
import { hide, show } from '../tooltip/singleton';
import isOverflow from '../overflow-tip/util';

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

  var _super = _createSuper(Button);

  function Button(props, context) {
    var _this;

    _classCallCheck(this, Button);

    _this = _super.call(this, props, context);
    _this.handleClickWait = _this.getHandleClick(props);
    return _this;
  }

  _createClass(Button, [{
    key: "getObservableProps",
    value: function getObservableProps(props, context) {
      return _objectSpread({}, _get(_getPrototypeOf(Button.prototype), "getObservableProps", this).call(this, props, context), {
        dataSet: 'dataSet' in props ? props.dataSet : context.dataSet,
        loading: 'loading' in props ? props.loading : this.observableProps ? this.loading : false,
        type: props.type,
        disabled: context.disabled || props.disabled
      });
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps, nextContext) {
      _get(_getPrototypeOf(Button.prototype), "componentWillReceiveProps", this).call(this, nextProps, nextContext);

      var _this$props = this.props,
          wait = _this$props.wait,
          waitType = _this$props.waitType;

      if (wait !== nextProps.wait || waitType !== nextProps.waitType) {
        this.handleClickWait = this.getHandleClick(nextProps);
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.handleClickWait.cancel();

      if (this.isTooltipShown) {
        hide();
        delete this.isTooltipShown;
      }
    }
  }, {
    key: "getHandleClick",
    value: function getHandleClick(props) {
      var wait = props.wait,
          waitType = props.waitType;

      if (wait && waitType) {
        var options = {
          leading: true,
          trailing: true
        };

        if (waitType === WaitType.throttle) {
          options.trailing = false;
          options.maxWait = wait;
        } else if (waitType === WaitType.debounce) {
          options.leading = false;
        }

        return debounce(this.handleClick, wait, options);
      }

      return debounce(this.handleClick, 0);
    }
  }, {
    key: "handleClickIfBubble",
    value: function handleClickIfBubble(e) {
      var _this$props2 = this.props,
          wait = _this$props2.wait,
          waitType = _this$props2.waitType;

      if (wait && waitType) {
        e.stopPropagation();
        this.handleClickWait(e);
      } else {
        this.handleClick(e);
      }
    }
  }, {
    key: "handleClick",
    value: function () {
      var _handleClick = _asyncToGenerator(
      /*#__PURE__*/
      _regeneratorRuntime.mark(function _callee(e) {
        var onClick, afterClick;
        return _regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                onClick = this.props.onClick;

                if (!onClick) {
                  _context.next = 12;
                  break;
                }

                afterClick = onClick(e);

                if (!isPromise(afterClick)) {
                  _context.next = 12;
                  break;
                }

                _context.prev = 4;
                this.loading = true;
                _context.next = 8;
                return afterClick;

              case 8:
                _context.prev = 8;
                this.loading = false; // Fix asynchronous out of focus

                this.focus();
                return _context.finish(8);

              case 12:
              case "end":
                return _context.stop();
            }
          }
        }, _callee, this, [[4,, 8, 12]]);
      }));

      function handleClick(_x) {
        return _handleClick.apply(this, arguments);
      }

      return handleClick;
    }()
  }, {
    key: "handleMouseEnter",
    value: function handleMouseEnter(e) {
      var _this$props3 = this.props,
          _this$props3$tooltip = _this$props3.tooltip,
          tooltip = _this$props3$tooltip === void 0 ? getTooltip('button') : _this$props3$tooltip,
          children = _this$props3.children;
      var element = this.element;

      if (tooltip === ButtonTooltip.always || tooltip === ButtonTooltip.overflow && isOverflow(element)) {
        show(element, {
          title: children,
          theme: getTooltipTheme('button')
        });
        this.isTooltipShown = true;
      }

      var _this$props$onMouseEn = this.props.onMouseEnter,
          onMouseEnter = _this$props$onMouseEn === void 0 ? noop : _this$props$onMouseEn;
      onMouseEnter(e);
    }
  }, {
    key: "handleMouseLeave",
    value: function handleMouseLeave(e) {
      hide();
      var _this$props$onMouseLe = this.props.onMouseLeave,
          onMouseLeave = _this$props$onMouseLe === void 0 ? noop : _this$props$onMouseLe;
      onMouseLeave(e);
    }
  }, {
    key: "isDisabled",
    value: function isDisabled() {
      return _get(_getPrototypeOf(Button.prototype), "isDisabled", this).call(this) || this.loading;
    }
  }, {
    key: "getOmitPropsKeys",
    value: function getOmitPropsKeys() {
      return _get(_getPrototypeOf(Button.prototype), "getOmitPropsKeys", this).call(this).concat(['icon', 'funcType', 'color', 'loading', 'wait', 'waitType', 'tooltip', 'block']);
    }
  }, {
    key: "getOtherProps",
    value: function getOtherProps() {
      var otherProps = _get(_getPrototypeOf(Button.prototype), "getOtherProps", this).call(this);

      var _this$props$tooltip = this.props.tooltip,
          tooltip = _this$props$tooltip === void 0 ? getTooltip('button') : _this$props$tooltip;

      if (!this.disabled) {
        otherProps.onClick = this.handleClickIfBubble;
      }

      if (tooltip && [ButtonTooltip.always, ButtonTooltip.overflow].includes(tooltip)) {
        otherProps.onMouseEnter = this.handleMouseEnter;
        otherProps.onMouseLeave = this.handleMouseLeave;
      }

      return otherProps;
    }
  }, {
    key: "getClassName",
    value: function getClassName() {
      var _get2, _ref;

      var prefixCls = this.prefixCls,
          _this$props4 = this.props,
          _this$props4$color = _this$props4.color,
          color = _this$props4$color === void 0 ? getConfig('buttonColor') : _this$props4$color,
          _this$props4$funcType = _this$props4.funcType,
          funcType = _this$props4$funcType === void 0 ? getConfig('buttonFuncType') : _this$props4$funcType,
          children = _this$props4.children,
          icon = _this$props4.icon,
          block = _this$props4.block;
      var childrenCount = Children.count(children);

      for (var _len = arguments.length, props = new Array(_len), _key = 0; _key < _len; _key++) {
        props[_key] = arguments[_key];
      }

      return (_get2 = _get(_getPrototypeOf(Button.prototype), "getClassName", this)).call.apply(_get2, [this, (_ref = {}, _defineProperty(_ref, "".concat(prefixCls, "-").concat(funcType), funcType), _defineProperty(_ref, "".concat(prefixCls, "-").concat(color), color), _defineProperty(_ref, "".concat(prefixCls, "-icon-only"), icon ? childrenCount === 0 || children === false : childrenCount === 1 && children.type && children.type.__C7N_ICON), _defineProperty(_ref, "".concat(prefixCls, "-block"), block), _ref)].concat(props));
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props5 = this.props,
          children = _this$props5.children,
          icon = _this$props5.icon,
          href = _this$props5.href,
          funcType = _this$props5.funcType;
      var buttonIcon = this.loading ? React.createElement(Progress, {
        key: "loading",
        type: ProgressType.loading,
        size: Size.small
      }) : icon && React.createElement(Icon, {
        type: icon
      });
      var hasString = Children.toArray(children).some(function (child) {
        return isString(child);
      });
      var Cmp = href ? 'a' : 'button';
      var props = this.getMergedProps();
      var disabled = this.disabled;
      var onMouseEnter = props.onMouseEnter,
          onMouseLeave = props.onMouseLeave;
      var tooltipWrapper = disabled && !href && (onMouseEnter || onMouseLeave);
      var buttonProps = tooltipWrapper ? omit(props, ['className', 'style']) : props;
      var rippleDisabled = disabled || funcType === FuncType.link;
      var button = React.createElement(Ripple, {
        disabled: rippleDisabled
      }, React.createElement(Cmp, _extends({}, href ? omit(buttonProps, ['type']) : buttonProps), buttonIcon, hasString ? React.createElement("span", null, children) : children));
      return tooltipWrapper ? React.createElement("span", {
        className: classNames(props.className, "".concat(this.prefixCls, "-disabled-wrapper")),
        style: props.style,
        onMouseEnter: onMouseEnter,
        onMouseLeave: onMouseLeave
      }, button) : button;
    }
  }, {
    key: "loading",
    get: function get() {
      var _this$observableProps = this.observableProps,
          type = _this$observableProps.type,
          dataSet = _this$observableProps.dataSet,
          loading = _this$observableProps.loading;
      return loading || type === ButtonType.submit && !!dataSet && dataSet.status === DataSetStatus.submitting;
    },
    set: function set(loading) {
      var _this2 = this;

      runInAction(function () {
        _this2.observableProps.loading = loading;
      });
    }
  }]);

  return Button;
}(DataSetComponent);

Button.displayName = 'Button'; // eslint-disable-next-line camelcase

Button.__PRO_BUTTON = true;
Button.contextType = FormContext;
Button.propTypes = _objectSpread({
  /**
   * 按钮展现模式
   * 可选值：'flat' | 'raised'
   * @default raised
   */
  funcType: PropTypes.oneOf([FuncType.flat, FuncType.raised, FuncType.link]),

  /**
   * 按钮颜色风格
   * 可选值：'default' | 'primary' | 'gray' | 'blue' | 'red' | 'green' | 'yellow' | 'purple' | 'dark'
   * @default 'default'
   */
  color: PropTypes.oneOf([ButtonColor["default"], ButtonColor.primary, ButtonColor.gray, ButtonColor.blue, ButtonColor.red, ButtonColor.green, ButtonColor.yellow, ButtonColor.purple, ButtonColor.dark]),

  /**
   * 按钮类型
   * 可选值：'button' | 'submit' | 'reset'
   * @default 'button'
   */
  type: PropTypes.oneOf([ButtonType.button, ButtonType.submit, ButtonType.reset]),

  /**
   * 按钮是否是加载状态
   */
  loading: PropTypes.bool,

  /**
   * 点击跳转的地址，指定此属性 button 的行为和 a 链接一致
   */
  href: PropTypes.string,

  /**
   * 相当于 a 链接的 target 属性，href 存在时生效
   */
  target: PropTypes.string,

  /**
   * 点击等待时间
   */
  wait: PropTypes.number,

  /**
   * 点击间隔类型，可选值：throttle | debounce
   * @default throttle
   */
  waitType: PropTypes.oneOf([WaitType.throttle, WaitType.debounce]),

  /**
   * 用tooltip显示按钮内容
   * 可选值：`none` `always` `overflow`
   */
  tooltip: PropTypes.string,

  /**
   * 将按钮宽度调整为其父宽度的选项
   */
  block: PropTypes.bool
}, DataSetComponent.propTypes);
Button.defaultProps = {
  suffixCls: 'btn',
  type: ButtonType.button,
  waitType: WaitType.throttle
};

__decorate([computed], Button.prototype, "loading", null);

__decorate([autobind], Button.prototype, "handleClickIfBubble", null);

__decorate([autobind], Button.prototype, "handleClick", null);

__decorate([autobind], Button.prototype, "handleMouseEnter", null);

__decorate([autobind], Button.prototype, "handleMouseLeave", null);

Button = __decorate([observer], Button);
export default Button;
//# sourceMappingURL=Button.js.map