@talend/react-components
Version:
Set of react components.
319 lines (317 loc) • 12.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DROPDOWN_CONTAINER_CN = void 0;
exports.InjectDropdownMenuItem = InjectDropdownMenuItem;
exports.default = void 0;
exports.getMenuItem = getMenuItem;
var _react = require("react");
var _reactDom = _interopRequireDefault(require("react-dom"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
var _classnames = _interopRequireDefault(require("classnames"));
var _immutable = require("immutable");
var _reactBootstrap = require("@talend/react-bootstrap");
var _reactI18next = require("react-i18next");
var _Inject = _interopRequireDefault(require("../../Inject"));
var _OverlayTrigger = _interopRequireDefault(require("../../OverlayTrigger"));
var _ActionDropdownModule = _interopRequireDefault(require("./ActionDropdown.module.scss"));
var _Tag = _interopRequireDefault(require("../../Tag"));
var _TooltipTrigger = _interopRequireDefault(require("../../TooltipTrigger"));
var _Icon = _interopRequireDefault(require("../../Icon"));
var _wrapOnClick = _interopRequireDefault(require("../wrapOnClick"));
var _CircularProgress = _interopRequireDefault(require("../../CircularProgress/CircularProgress.component"));
var _constants = _interopRequireDefault(require("../../constants"));
var _translate = _interopRequireDefault(require("../../translate"));
var _getTabBarBadgeLabel = _interopRequireDefault(require("../../utils/getTabBarBadgeLabel"));
var _lodash = require("lodash");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const DROPDOWN_CONTAINER_CN = exports.DROPDOWN_CONTAINER_CN = 'tc-dropdown-container';
function InjectDropdownMenuItem({
getComponent,
component,
divider,
withMenuItem,
liProps,
menuItemProps,
onSelect,
onKeyDown,
...rest
}) {
const Renderers = _Inject.default.getAll(getComponent, {
MenuItem: _reactBootstrap.MenuItem
});
if (divider) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Renderers.MenuItem, {
...menuItemProps,
divider: true
});
}
if (withMenuItem) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Renderers.MenuItem, {
...menuItemProps,
onSelect: onSelect,
onKeyDown: onKeyDown,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Inject.default, {
component: component,
getComponent: getComponent,
...rest
})
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
role: "presentation",
...liProps,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Inject.default, {
component: component,
getComponent: getComponent,
onSelect: onSelect,
...rest
})
});
}
InjectDropdownMenuItem.propTypes = {
getComponent: _propTypes.default.func.isRequired,
component: _propTypes.default.string,
divider: _propTypes.default.bool,
withMenuItem: _propTypes.default.bool,
liProps: _propTypes.default.object,
menuItemProps: _propTypes.default.object,
onSelect: _propTypes.default.func,
onKeyDown: _propTypes.default.func
};
InjectDropdownMenuItem.displayname = 'InjectDropdownMenuItem';
function renderMutableMenuItem(item, index, getComponent) {
const Renderers = _Inject.default.getAll(getComponent, {
MenuItem: _reactBootstrap.MenuItem
});
if (item.divider) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Renderers.MenuItem, {
divider: true
}, index);
}
const title = item.title || item.label;
const badgeLabel = (0, _lodash.get)(item, 'badge.label', '');
return /*#__PURE__*/(0, _react.createElement)(Renderers.MenuItem, {
...item,
key: index,
eventKey: item,
onClick: (0, _wrapOnClick.default)(item),
title: badgeLabel ? `${badgeLabel} ${title}` : title,
className: (0, _classnames.default)(_ActionDropdownModule.default['tc-dropdown-item'], 'tc-dropdown-item')
}, item.icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
name: item.icon
}, "icon"), !item.hideLabel && item.label, item.badge && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
className: (0, _classnames.default)(_ActionDropdownModule.default['tc-dropdown-item-badge'], 'tc-dropdown-item-badge'),
bsStyle: item.badge.bsStyle || 'default',
children: (0, _getTabBarBadgeLabel.default)(item.badge.label)
}));
}
function getMenuItem(item, index, getComponent) {
if (_immutable.Iterable.isIterable(item)) {
return renderMutableMenuItem(item.toJS(), index, getComponent);
}
return renderMutableMenuItem(item, index, getComponent);
}
function getDropdownContainer(dropdownElement) {
let dropdownContainer = dropdownElement;
do {
dropdownContainer = dropdownContainer.parentElement;
} while (dropdownContainer && dropdownContainer.tagName !== 'BODY' && !dropdownContainer.classList.contains(DROPDOWN_CONTAINER_CN));
return dropdownContainer;
}
/**
* @param {object} props react props
* @example
const props = {
label: 'related items',
icon: 'fa fa-file-excel-o',
items: [
{
icon: 'talend-icon',
label: 'document 1',
onClick: action('document 1 click'),
},
{
divider: true,
},
{
label: 'document 2',
onClick: action('document 2 click'),
},
],
tooltipPlacement: 'right',
hideLabel: true,
link: true,
onSelect: action('item selected'),
};
<ActionDropdown {...props} />
*/
class ActionDropdown extends _react.Component {
constructor(props) {
super(props);
this.onToggle = this.onToggle.bind(this);
this.onItemSelect = this.onItemSelect.bind(this);
this.state = {};
}
componentDidUpdate(prevProps, prevState) {
/*
Dropdown/Dropup automatic switch:
depending on its position with a defined container, it will switch from down and up mode.
By default it checks its position with the <body>.
Specific container support with "tc-dropdown-container" classname on the parent container.
*/
if (!prevState.isOpen && this.state.isOpen) {
// eslint-disable-next-line react/no-find-dom-node
const dropdown = _reactDom.default.findDOMNode(this.ref);
const dropdownTrigger = dropdown.querySelector('.dropdown-toggle');
const dropdownMenu = dropdownTrigger.nextSibling;
const dropdownContainer = getDropdownContainer(dropdownTrigger);
if (dropdownContainer) {
const dropdownRect = dropdownMenu.getBoundingClientRect();
const containerRect = dropdownContainer.getBoundingClientRect();
if (!dropdown.classList.contains('dropup') && dropdownRect.bottom > containerRect.bottom && dropdownRect.height < containerRect.top) {
dropdown.classList.add('dropup');
} else if (dropdown.classList.contains('dropup') && dropdownRect.top < containerRect.top) {
dropdown.classList.remove('dropup');
}
}
}
}
onToggle(isOpen) {
this.setState({
isOpen
}, () => {
if (this.props.onToggle) {
this.props.onToggle(isOpen);
}
});
}
onItemSelect(object, event) {
if (this.props.onSelect) {
this.props.onSelect(event, object);
}
}
render() {
const {
bsStyle = 'default',
hideLabel,
icon,
iconTransform,
items = [],
badge,
label,
link,
onSelect,
tooltipPlacement = 'top',
tooltipLabel,
getComponent,
components,
className,
loading,
children,
ellipsis,
t = (0, _translate.default)(),
...rest
} = this.props;
const Renderers = _Inject.default.getAll(getComponent, {
MenuItem: _reactBootstrap.MenuItem,
DropdownButton: _reactBootstrap.DropdownButton
});
const injected = _Inject.default.all(getComponent, components, InjectDropdownMenuItem);
const title = !ellipsis && [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
name: icon,
transform: iconTransform
}, "icon"), !hideLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: "tc-dropdown-button-title-label",
children: label
}, "label"), badge && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
className: (0, _classnames.default)(_ActionDropdownModule.default['tc-dropdown-item-badge'], 'tc-dropdown-item-badge'),
bsStyle: badge.bsStyle || 'default',
children: (0, _getTabBarBadgeLabel.default)(badge.label)
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
name: "talend-caret-down",
className: (0, _classnames.default)(_ActionDropdownModule.default['tc-dropdown-caret'], {
[_ActionDropdownModule.default['tc-dropdown-caret-open']]: this.state.isOpen
})
}, "caret")].filter(Boolean);
const style = link || ellipsis ? 'link' : bsStyle;
const dropdown = /*#__PURE__*/(0, _jsxRuntime.jsxs)(Renderers.DropdownButton, {
id: this.props.id,
title: title,
bsStyle: style,
role: "button",
onSelect: this.onItemSelect,
className: (0, _classnames.default)(_ActionDropdownModule.default['tc-dropdown-button'], 'tc-dropdown-button', className, {
[_ActionDropdownModule.default.ellipsis]: ellipsis
}),
"aria-label": tooltipLabel || label,
...(0, _lodash.omit)(rest, 'tReady'),
onToggle: this.onToggle,
ref: ref => {
this.ref = ref;
},
noCaret: true,
children: [!children && !items.length && !items.size && !loading && !components && /*#__PURE__*/(0, _jsxRuntime.jsx)(Renderers.MenuItem, {
disabled: true,
children: t('ACTION_DROPDOWN_EMPTY', {
defaultValue: 'No options'
})
}, "empty"), injected('beforeItemsDropdown'), items.map((item, key) => getMenuItem(item, key, getComponent)), loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Renderers.MenuItem, {
header: true,
className: (0, _classnames.default)(_ActionDropdownModule.default['tc-dropdown-item'], 'tc-dropdown-item', _ActionDropdownModule.default['tc-dropdown-loader'], 'tc-dropdown-loader'),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {})
}, items ? items.length + 1 : 0), injected('itemsDropdown'), children, injected('afterItemsDropdown')]
});
if (hideLabel || tooltipLabel || ellipsis) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipTrigger.default, {
label: tooltipLabel || label,
tooltipPlacement: tooltipPlacement,
children: dropdown
});
}
return dropdown;
}
}
ActionDropdown.displayName = 'ActionDropdown';
ActionDropdown.propTypes = {
id: _propTypes.default.string,
bsStyle: _propTypes.default.string,
className: _propTypes.default.string,
dropup: _propTypes.default.bool,
hideLabel: _propTypes.default.bool,
noCaret: _propTypes.default.bool,
pullRight: _propTypes.default.bool,
icon: _propTypes.default.string,
iconTransform: _propTypes.default.string,
items: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.shape({
icon: _propTypes.default.string,
label: _propTypes.default.string,
..._reactBootstrap.MenuItem.propTypes
})), _reactImmutableProptypes.default.list]),
badge: _propTypes.default.shape({
className: _propTypes.default.string,
label: _propTypes.default.string,
bsStyle: _propTypes.default.string
}),
label: _propTypes.default.string.isRequired,
link: _propTypes.default.bool,
loading: _propTypes.default.bool,
ellipsis: _propTypes.default.bool,
onToggle: _propTypes.default.func,
onSelect: _propTypes.default.func,
tooltipPlacement: _OverlayTrigger.default.propTypes.placement,
tooltipLabel: _propTypes.default.string,
getComponent: _propTypes.default.func,
components: _propTypes.default.shape({
beforeItemsDropdown: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.array]),
itemsDropdown: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.array]),
afterItemsDropdown: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.array])
}),
t: _propTypes.default.func,
children: _propTypes.default.node
};
var _default = exports.default = (0, _reactI18next.withTranslation)(_constants.default)(ActionDropdown);
//# sourceMappingURL=ActionDropdown.component.js.map