@talend/react-components
Version:
Set of react components.
100 lines (99 loc) • 3.29 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = ActionSplitDropdown;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _reactBootstrap = require("@talend/react-bootstrap");
var _utils = require("@talend/utils");
var _reactI18next = require("react-i18next");
var _Icon = _interopRequireDefault(require("../../Icon"));
var _ActionSplitDropdownModule = _interopRequireDefault(require("./ActionSplitDropdown.module.scss"));
var _wrapOnClick = _interopRequireDefault(require("../wrapOnClick"));
var _constants = _interopRequireDefault(require("../../constants"));
var _jsxRuntime = require("react/jsx-runtime");
var _react = require("react");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/**
* @param {object} props react props
* @example
const props = {
label: 'Add File',
icon: 'fa fa-plus',
onClick: action('onAdd'),
items: [
{
label: 'From Local',
onClick: action('From Local click'),
},
{
label: 'From Remote',
onClick: action('From Remote click'),
},
],
emptyDropdownLabel: 'No option',
};
<ActionSplitDropdown {...props} />
*/function ActionSplitDropdown(props) {
const {
t
} = (0, _reactI18next.useTranslation)(_constants.default);
const {
icon,
items,
label,
emptyDropdownLabel,
className,
...rest
} = props;
const Title = /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
children: [icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
name: icon
}) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
children: label
})]
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.SplitButton, {
onClick: (0, _wrapOnClick.default)(props),
title: Title,
id: (0, _utils.randomUUID)(),
className: (0, _classnames.default)(className, _ActionSplitDropdownModule.default['tc-split-dropdown']),
"aria-label": label,
toggleLabel: t('ACTION_MENU_OPEN', {
defaultValue: 'Open {{label}} menu',
label
}),
...rest,
children: items.length ? items.map((item, index) => /*#__PURE__*/(0, _react.createElement)(_reactBootstrap.MenuItem, {
...item,
key: index,
onClick: (0, _wrapOnClick.default)(item)
}, item.icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
name: item.icon
}), item.label)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.MenuItem, {
disabled: true,
children: emptyDropdownLabel
})
});
}
ActionSplitDropdown.displayName = 'ActionSplitDropdown';
ActionSplitDropdown.propTypes = {
icon: _propTypes.default.string,
items: _propTypes.default.arrayOf(_propTypes.default.shape({
icon: _propTypes.default.string,
label: _propTypes.default.string,
..._reactBootstrap.MenuItem.propTypes
})),
label: _propTypes.default.string.isRequired,
model: _propTypes.default.object,
// eslint-disable-line react/forbid-prop-types
onClick: _propTypes.default.func,
emptyDropdownLabel: _propTypes.default.string,
className: _propTypes.default.string,
t: _propTypes.default.func
};
ActionSplitDropdown.defaultProps = {
items: []
};
//# sourceMappingURL=ActionSplitDropdown.component.js.map