choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
362 lines (313 loc) • 13 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
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 _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
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 React, { Children } from 'react';
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 Icon from '../icon';
import FormContext from '../form/FormContext';
import Progress from '../progress';
import Ripple from '../ripple';
import { 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';
import getReactNodeText from '../_util/getReactNodeText';
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: "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;
});
}
}, {
key: "getObservableProps",
value: function getObservableProps(props, context) {
return _objectSpread(_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.observableProps.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 onButtonClick, target, _this$props3, children, icon, promise, onClick, afterClick;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
onButtonClick = this.context.getConfig('onButtonClick');
if (onButtonClick) {
target = e.target;
_this$props3 = this.props, children = _this$props3.children, icon = _this$props3.icon;
promise = Promise.resolve(target && target.textContent || getReactNodeText(children));
promise.then(function (title) {
return onButtonClick({
icon: icon,
title: title
});
});
}
onClick = this.props.onClick;
if (!onClick) {
_context.next = 13;
break;
}
afterClick = onClick(e);
if (!isPromise(afterClick)) {
_context.next = 13;
break;
}
_context.prev = 6;
this.loading = true;
_context.next = 10;
return afterClick;
case 10:
_context.prev = 10;
this.loading = false;
return _context.finish(10);
case 13:
case "end":
return _context.stop();
}
}
}, _callee, this, [[6,, 10, 13]]);
}));
function handleClick(_x) {
return _handleClick.apply(this, arguments);
}
return handleClick;
}()
}, {
key: "handleMouseEnter",
value: function handleMouseEnter(e) {
var _this$context = this.context,
getTooltip = _this$context.getTooltip,
getTooltipTheme = _this$context.getTooltipTheme,
getTooltipPlacement = _this$context.getTooltipPlacement;
var _this$props4 = this.props,
_this$props4$tooltip = _this$props4.tooltip,
tooltip = _this$props4$tooltip === void 0 ? getTooltip('button') : _this$props4$tooltip,
children = _this$props4.children;
var element = this.element;
if (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);
}
}, {
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: "getOmitPropsKeys",
value: function getOmitPropsKeys() {
return _get(_getPrototypeOf(Button.prototype), "getOmitPropsKeys", this).call(this).concat(['icon', 'funcType', 'color', 'loading', 'wait', 'waitType', 'tooltip', 'block', 'onClick']);
}
}, {
key: "getOtherProps",
value: function getOtherProps() {
var otherProps = _get(_getPrototypeOf(Button.prototype), "getOtherProps", this).call(this);
var getTooltip = this.context.getTooltip;
var _this$props$tooltip = this.props.tooltip,
tooltip = _this$props$tooltip === void 0 ? getTooltip('button') : _this$props$tooltip;
if (!this.disabled && !this.loading) {
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$props5 = this.props,
_this$props5$color = _this$props5.color,
color = _this$props5$color === void 0 ? this.getContextConfig('buttonColor') : _this$props5$color,
_this$props5$funcType = _this$props5.funcType,
funcType = _this$props5$funcType === void 0 ? this.getContextConfig('buttonFuncType') : _this$props5$funcType,
children = _this$props5.children,
icon = _this$props5.icon,
block = _this$props5.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), _defineProperty(_ref, "".concat(prefixCls, "-loading"), this.loading), _ref)].concat(props));
}
}, {
key: "render",
value: function render() {
var _this$props6 = this.props,
children = _this$props6.children,
icon = _this$props6.icon,
href = _this$props6.href,
funcType = _this$props6.funcType;
var loading = this.loading,
disabled = this.disabled;
var buttonIcon = loading ? /*#__PURE__*/React.createElement(Progress, {
key: "loading",
type: ProgressType.loading,
size: Size.small
}) : icon && /*#__PURE__*/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 onMouseEnter = props.onMouseEnter,
onMouseLeave = props.onMouseLeave;
var tooltipWrapper = disabled && !href && (onMouseEnter || onMouseLeave);
var omits = [];
if (tooltipWrapper) {
omits.push('className', 'style');
}
if (href) {
omits.push('type');
if (disabled || loading) {
omits.push('href');
}
}
var button = /*#__PURE__*/React.createElement(Ripple, {
disabled: disabled || funcType === FuncType.link
}, /*#__PURE__*/React.createElement(Cmp, _extends({}, omit(props, omits)), buttonIcon, hasString ? /*#__PURE__*/React.createElement("span", null, children) : children));
return tooltipWrapper ? /*#__PURE__*/React.createElement("span", {
className: classNames(props.className, "".concat(this.prefixCls, "-disabled-wrapper")),
style: props.style,
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave
}, button) : button;
}
}], [{
key: "contextType",
get: function get() {
return FormContext;
}
}]);
return Button;
}(DataSetComponent);
Button.displayName = 'Button'; // eslint-disable-next-line camelcase
Button.__PRO_BUTTON = true;
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