@talend/react-components/lib-esm/Actions/ActionSplitDropdown/ActionSplitDropdown.component.js

Set of react components.

import PropTypes from 'prop-types';
import classNames from 'classnames';
import { SplitButton, MenuItem } from '@talend/react-bootstrap';
import { randomUUID } from '@talend/utils';
import { useTranslation } from 'react-i18next';
import Icon from '../../Icon';
import theme from './ActionSplitDropdown.module.scss';
import wrapOnClick from '../wrapOnClick';
import I18N_DOMAIN_COMPONENTS from '../../constants';

/**
 * @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} />
 */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { createElement as _createElement } from "react";
export default function ActionSplitDropdown(props) {
  const {
    t
  } = useTranslation(I18N_DOMAIN_COMPONENTS);
  const {
    icon,
    items,
    label,
    emptyDropdownLabel,
    className,
    ...rest
  } = props;
  const Title = /*#__PURE__*/_jsxs("span", {
    children: [icon ? /*#__PURE__*/_jsx(Icon, {
      name: icon
    }) : null, /*#__PURE__*/_jsx("span", {
      children: label
    })]
  });
  return /*#__PURE__*/_jsx(SplitButton, {
    onClick: wrapOnClick(props),
    title: Title,
    id: randomUUID(),
    className: classNames(className, theme['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__*/_createElement(MenuItem, {
      ...item,
      key: index,
      onClick: wrapOnClick(item)
    }, item.icon && /*#__PURE__*/_jsx(Icon, {
      name: item.icon
    }), item.label)) : /*#__PURE__*/_jsx(MenuItem, {
      disabled: true,
      children: emptyDropdownLabel
    })
  });
}
ActionSplitDropdown.displayName = 'ActionSplitDropdown';
ActionSplitDropdown.propTypes = {
  icon: PropTypes.string,
  items: PropTypes.arrayOf(PropTypes.shape({
    icon: PropTypes.string,
    label: PropTypes.string,
    ...MenuItem.propTypes
  })),
  label: PropTypes.string.isRequired,
  model: PropTypes.object,
  // eslint-disable-line react/forbid-prop-types
  onClick: PropTypes.func,
  emptyDropdownLabel: PropTypes.string,
  className: PropTypes.string,
  t: PropTypes.func
};
ActionSplitDropdown.defaultProps = {
  items: []
};
//# sourceMappingURL=ActionSplitDropdown.component.js.map