zent
Version:
一套前端设计语言和基于React的实现
65 lines (64 loc) • 4.06 kB
JavaScript
import { __assign, __extends } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Component, createRef } from 'react';
import cx from 'classnames';
import capitalize from '../utils/capitalize';
import Button from '../button';
import Popover from '../popover';
import Menu from '../menu';
import Icon from '../icon';
import { DisabledContext } from '../disabled';
var MenuItem = Menu.MenuItem;
var SplitButton = (function (_super) {
__extends(SplitButton, _super);
function SplitButton() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.splitButton = createRef();
_this.state = {
isShowDropdown: false,
};
_this.toggleDropdown = function (isShow) {
_this.setState({ isShowDropdown: isShow });
};
_this.handleSelect = function (e, key) {
_this.props.onSelect && _this.props.onSelect(key);
_this.toggleDropdown(false);
};
return _this;
}
SplitButton.prototype.render = function () {
var _this = this;
var _a = this.props, type = _a.type, size = _a.size, _b = _a.disabled, disabled = _b === void 0 ? this.context.value : _b, loading = _a.loading, dropdownTrigger = _a.dropdownTrigger, dropdownData = _a.dropdownData, dropdownValue = _a.dropdownValue, dropdownText = _a.dropdownText, dropdownPosition = _a.dropdownPosition, dropdownIcon = _a.dropdownIcon, className = _a.className, children = _a.children, onClick = _a.onClick;
var classString = cx('zent-split-button', className);
var trigger = capitalize(dropdownTrigger);
var Trigger = disabled || loading
? Popover.Trigger.Base
: Popover.Trigger[trigger];
var position = dropdownPosition
.split('-')
.map(function (s) { return capitalize(s); })
.join('');
return (_jsxs("div", __assign({ ref: this.splitButton, className: classString, "data-zv": '10.0.17' }, { children: [children && (_jsx(Button, __assign({ className: "zent-split-button__main", type: type, size: size, onClick: onClick, disabled: disabled, loading: loading }, { children: children }), void 0)), _jsx("div", __assign({ className: cx('zent-split-button__dropdown-wrapper', {
'zent-split-button__dropdown-wrapper-text': type === 'text',
}), "data-zv": '10.0.17' }, { children: _jsxs(Popover, __assign({ visible: this.state.isShowDropdown, onVisibleChange: function (isShow) { return _this.toggleDropdown(isShow); }, position: Popover.Position[position], cushion: 5 }, { children: [_jsx(Trigger, { children: _jsx(Button, __assign({ className: cx('zent-split-button__dropdown', {
'zent-split-button__dropdown-disabled': loading,
'zent-split-button__dropdown-icononly': !children,
}), type: type, size: size, disabled: disabled }, { children: _jsx(Icon, { className: "zent-split-button__dropdown-icon", type: dropdownIcon }, void 0) }), void 0) }, void 0), _jsx(Popover.Content, { children: _jsx(Menu, __assign({ className: "zent-split-button__dropdown-menu", onClick: this.handleSelect }, { children: dropdownData.map(function (item) {
return (_jsx(MenuItem, __assign({ className: "zent-split-button__dropdown-menu-item-" + type }, { children: item[dropdownText] }), "" + item[dropdownValue]));
}) }), void 0) }, void 0)] }), void 0) }), void 0)] }), void 0));
};
SplitButton.defaultProps = {
type: 'default',
size: 'medium',
dropdownTrigger: 'click',
dropdownData: [],
dropdownValue: 'value',
dropdownText: 'text',
dropdownIcon: 'down',
dropdownPosition: 'auto-bottom-right',
};
SplitButton.contextType = DisabledContext;
return SplitButton;
}(Component));
export { SplitButton };
export default SplitButton;