choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
401 lines (321 loc) • 15 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _get3 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
var _tslib = require("tslib");
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _omit = _interopRequireDefault(require("lodash/omit"));
var _noop = _interopRequireDefault(require("lodash/noop"));
var _debounce = _interopRequireDefault(require("lodash/debounce"));
var _isString = _interopRequireDefault(require("lodash/isString"));
var _mobx = require("mobx");
var _mobxReact = require("mobx-react");
var _isPromise = _interopRequireDefault(require("is-promise"));
var _enum = require("../../../lib/progress/enum");
var _icon = _interopRequireDefault(require("../icon"));
var _FormContext = _interopRequireDefault(require("../form/FormContext"));
var _progress = _interopRequireDefault(require("../progress"));
var _ripple = _interopRequireDefault(require("../ripple"));
var _enum2 = require("./enum");
var _enum3 = require("../data-set/enum");
var _enum4 = require("../core/enum");
var _DataSetComponent2 = _interopRequireDefault(require("../data-set/DataSetComponent"));
var _autobind = _interopRequireDefault(require("../_util/autobind"));
var _singleton = require("../tooltip/singleton");
var _util = _interopRequireDefault(require("../overflow-tip/util"));
var _getReactNodeText = _interopRequireDefault(require("../_util/getReactNodeText"));
var Button = /*#__PURE__*/function (_DataSetComponent) {
(0, _inherits2["default"])(Button, _DataSetComponent);
var _super = (0, _createSuper2["default"])(Button);
function Button(props, context) {
var _this;
(0, _classCallCheck2["default"])(this, Button);
_this = _super.call(this, props, context);
_this.handleClickWait = _this.getHandleClick(props);
return _this;
}
(0, _createClass2["default"])(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 === _enum2.ButtonType.submit && !!dataSet && dataSet.status === _enum3.DataSetStatus.submitting;
},
set: function set(loading) {
var _this2 = this;
(0, _mobx.runInAction)(function () {
_this2.observableProps.loading = loading;
});
}
}, {
key: "getObservableProps",
value: function getObservableProps(props, context) {
return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (0, _get3["default"])((0, _getPrototypeOf2["default"])(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) {
(0, _get3["default"])((0, _getPrototypeOf2["default"])(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) {
(0, _singleton.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 === _enum4.WaitType.throttle) {
options.trailing = false;
options.maxWait = wait;
} else if (waitType === _enum4.WaitType.debounce) {
options.leading = false;
}
return (0, _debounce["default"])(this.handleClick, wait, options);
}
return (0, _debounce["default"])(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 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(e) {
var onButtonClick, target, _this$props3, children, icon, promise, onClick, afterClick;
return _regenerator["default"].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 || (0, _getReactNodeText["default"])(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 (!(0, _isPromise["default"])(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 === _enum2.ButtonTooltip.always || tooltip === _enum2.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);
}
}, {
key: "handleMouseLeave",
value: function handleMouseLeave(e) {
(0, _singleton.hide)();
var _this$props$onMouseLe = this.props.onMouseLeave,
onMouseLeave = _this$props$onMouseLe === void 0 ? _noop["default"] : _this$props$onMouseLe;
onMouseLeave(e);
}
}, {
key: "getOmitPropsKeys",
value: function getOmitPropsKeys() {
return (0, _get3["default"])((0, _getPrototypeOf2["default"])(Button.prototype), "getOmitPropsKeys", this).call(this).concat(['icon', 'funcType', 'color', 'loading', 'wait', 'waitType', 'tooltip', 'block', 'onClick']);
}
}, {
key: "getOtherProps",
value: function getOtherProps() {
var otherProps = (0, _get3["default"])((0, _getPrototypeOf2["default"])(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 && [_enum2.ButtonTooltip.always, _enum2.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 = _react.Children.count(children);
for (var _len = arguments.length, props = new Array(_len), _key = 0; _key < _len; _key++) {
props[_key] = arguments[_key];
}
return (_get2 = (0, _get3["default"])((0, _getPrototypeOf2["default"])(Button.prototype), "getClassName", this)).call.apply(_get2, [this, (_ref = {}, (0, _defineProperty2["default"])(_ref, "".concat(prefixCls, "-").concat(funcType), funcType), (0, _defineProperty2["default"])(_ref, "".concat(prefixCls, "-").concat(color), color), (0, _defineProperty2["default"])(_ref, "".concat(prefixCls, "-icon-only"), icon ? childrenCount === 0 || children === false : childrenCount === 1 && children.type && children.type.__C7N_ICON), (0, _defineProperty2["default"])(_ref, "".concat(prefixCls, "-block"), block), (0, _defineProperty2["default"])(_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["default"].createElement(_progress["default"], {
key: "loading",
type: _enum.ProgressType.loading,
size: _enum4.Size.small
}) : icon && /*#__PURE__*/_react["default"].createElement(_icon["default"], {
type: icon
});
var hasString = _react.Children.toArray(children).some(function (child) {
return (0, _isString["default"])(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["default"].createElement(_ripple["default"], {
disabled: disabled || funcType === _enum2.FuncType.link
}, /*#__PURE__*/_react["default"].createElement(Cmp, (0, _extends2["default"])({}, (0, _omit["default"])(props, omits)), buttonIcon, hasString ? /*#__PURE__*/_react["default"].createElement("span", null, children) : children));
return tooltipWrapper ? /*#__PURE__*/_react["default"].createElement("span", {
className: (0, _classnames["default"])(props.className, "".concat(this.prefixCls, "-disabled-wrapper")),
style: props.style,
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave
}, button) : button;
}
}], [{
key: "contextType",
get: function get() {
return _FormContext["default"];
}
}]);
return Button;
}(_DataSetComponent2["default"]);
Button.displayName = 'Button'; // eslint-disable-next-line camelcase
Button.__PRO_BUTTON = true;
Button.defaultProps = {
suffixCls: 'btn',
type: _enum2.ButtonType.button,
waitType: _enum4.WaitType.throttle
};
(0, _tslib.__decorate)([_mobx.computed], Button.prototype, "loading", null);
(0, _tslib.__decorate)([_autobind["default"]], Button.prototype, "handleClickIfBubble", null);
(0, _tslib.__decorate)([_autobind["default"]], Button.prototype, "handleClick", null);
(0, _tslib.__decorate)([_autobind["default"]], Button.prototype, "handleMouseEnter", null);
(0, _tslib.__decorate)([_autobind["default"]], Button.prototype, "handleMouseLeave", null);
Button = (0, _tslib.__decorate)([_mobxReact.observer], Button);
var _default = Button;
exports["default"] = _default;
//# sourceMappingURL=Button.js.map