UNPKG

choerodon-ui

Version:

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

401 lines (321 loc) 15 kB
"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