@talend/react-components/lib-esm/ActionBar/ActionBar.component.js

Set of react components.

import PropTypes from 'prop-types';
import { createElement } from 'react';
import classNames from 'classnames';
import { useTranslation } from 'react-i18next';
import { Action, Actions, ActionDropdown, ActionSplitDropdown } from '../Actions';
import Inject from '../Inject';
import I18N_DOMAIN_COMPONENTS from '../constants';
import css from './ActionBar.module.scss';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const DISPLAY_MODES = {
  DROPDOWN: 'dropdown',
  SPLIT_DROPDOWN: 'splitDropdown',
  BTN_GROUP: 'btnGroup',
  DIVIDER: 'divider'
};
const TAG_TYPES = {
  DIV: 'div',
  P: 'p',
  FORM: 'form',
  BUTTON: 'button',
  A: 'a'
};
const actionsShape = {
  left: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape(Action.propTypes), PropTypes.shape(ActionSplitDropdown.propTypes)])),
  right: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape(Action.propTypes), PropTypes.shape(ActionSplitDropdown.propTypes)])),
  children: PropTypes.node
};
function getActionsToRender({
  selected,
  actions,
  multiSelectActions = {},
  appMultiSelectActions
}) {
  if (selected > 0) {
    if (appMultiSelectActions) {
      return ['left', 'center', 'right'].reduce((result, type) => {
        if (multiSelectActions[type] && appMultiSelectActions[type]) {
          return {
            ...result,
            [type]: [...multiSelectActions[type], {
              displayMode: 'divider'
            }, ...appMultiSelectActions[type]]
          };
        }
        return {
          ...result,
          [type]: multiSelectActions[type] || appMultiSelectActions[type]
        };
      }, {});
    }
    return multiSelectActions || {};
  }
  return actions || {};
}
function getContentClassName(tag, left, center, right, className) {
  return classNames(className, {
    [`${css['navbar-left']}`]: left,
    [`${css['navbar-right']}`]: right,
    [`${css['navbar-center']}`]: center,
    'navbar-left': left,
    'navbar-right': right,
    'navbar-text': tag === TAG_TYPES.P,
    'navbar-btn': tag === TAG_TYPES.BUTTON,
    'navbar-form': tag === TAG_TYPES.FORM,
    'navbar-link': tag === TAG_TYPES.A
  });
}
function Content({
  tag = TAG_TYPES.DIV,
  left,
  right,
  center,
  className,
  children,
  ...rest
}) {
  const props = {
    className: getContentClassName(tag, left, center, right, className),
    ...rest
  };
  return /*#__PURE__*/createElement(tag, props, children);
}
Content.propTypes = {
  children: PropTypes.node,
  className: PropTypes.string,
  left: PropTypes.bool,
  right: PropTypes.bool,
  center: PropTypes.bool,
  tag: PropTypes.oneOf([TAG_TYPES.P, TAG_TYPES.BUTTON, TAG_TYPES.FORM, TAG_TYPES.A, TAG_TYPES.DIV])
};
function getActionsFromRenderers(actions, getComponent) {
  const Renderers = Inject.getAll(getComponent, {
    Action,
    Actions,
    ActionDropdown,
    ActionSplitDropdown
  });
  function getActionsElements(action, index) {
    const {
      displayMode,
      ...rest
    } = action;
    switch (displayMode) {
      case DISPLAY_MODES.DIVIDER:
        return /*#__PURE__*/_jsx("span", {
          className: "divider",
          children: "|"
        }, index);
      case DISPLAY_MODES.DROPDOWN:
        return /*#__PURE__*/_jsx(Renderers.ActionDropdown, {
          ...rest
        }, index);
      case DISPLAY_MODES.SPLIT_DROPDOWN:
        return /*#__PURE__*/_jsx(Renderers.ActionSplitDropdown, {
          ...rest
        }, index);
      case DISPLAY_MODES.BTN_GROUP:
        return /*#__PURE__*/_jsx(Renderers.Actions, {
          ...rest
        }, index);
      default:
        if (displayMode) {
          return /*#__PURE__*/_jsx(Renderers.Action, {
            displayMode: displayMode,
            ...rest
          }, index);
        }
        return /*#__PURE__*/_jsx(Renderers.Action, {
          ...rest
        }, index);
    }
  }
  return actions.map(getActionsElements);
}
function SwitchActions({
  actions,
  left,
  right,
  center,
  getComponent,
  components
}) {
  if (!actions.length && !components) {
    return null;
  }
  const injected = Inject.all(getComponent, components);
  return /*#__PURE__*/_jsxs(Content, {
    left: left,
    right: right,
    center: center,
    children: [injected('before-actions'), getActionsFromRenderers(actions, getComponent), injected('after-actions')]
  });
}
SwitchActions.propTypes = {
  actions: PropTypes.arrayOf(PropTypes.shape(actionsShape)),
  left: PropTypes.bool,
  right: PropTypes.bool,
  center: PropTypes.bool,
  getComponent: PropTypes.func,
  components: PropTypes.object
};
SwitchActions.defaultProps = {
  actions: []
};
function Count({
  selected
}) {
  const {
    t
  } = useTranslation(I18N_DOMAIN_COMPONENTS);
  if (!selected) {
    return null;
  }
  return /*#__PURE__*/_jsx("span", {
    "data-test": "selected-count",
    className: classNames(css['tc-actionbar-selected-count'], 'tc-actionbar-selected-count'),
    children: t('ACTION_BAR_COUNT_SELECTED', {
      defaultValue: '{{selected}} selected',
      selected
    })
  });
}
Count.propTypes = {
  selected: PropTypes.number
};
function defineComponentLeft(parentComponentLeft, selected, hideCount) {
  if (parentComponentLeft) {
    return parentComponentLeft;
  }
  if (!hideCount && selected > 0) {
    return {
      'before-actions': /*#__PURE__*/_jsx(Count, {
        selected: selected
      })
    };
  }
  return undefined;
}
export function ActionBar(props) {
  const {
    left,
    right,
    center
  } = getActionsToRender(props);
  const cssClass = classNames(css['tc-actionbar-container'], 'tc-actionbar-container', 'nav', props.className);
  const componentsLeft = defineComponentLeft(props.components.left, props.selected, props.hideCount);
  const componentsCenter = props.components.center;
  const componentsRight = props.components.right;
  return /*#__PURE__*/_jsxs("div", {
    className: cssClass,
    children: [/*#__PURE__*/_jsx(SwitchActions, {
      getComponent: props.getComponent,
      actions: left,
      left: true,
      components: componentsLeft
    }, 0), props.children, /*#__PURE__*/_jsx(SwitchActions, {
      getComponent: props.getComponent,
      actions: center,
      center: true,
      components: componentsCenter
    }, 1), /*#__PURE__*/_jsx(SwitchActions, {
      getComponent: props.getComponent,
      actions: right,
      right: true,
      components: componentsRight
    }, 2)]
  });
}
ActionBar.propTypes = {
  selected: PropTypes.number,
  hideCount: PropTypes.bool,
  children: PropTypes.node,
  className: PropTypes.string,
  getComponent: PropTypes.func,
  components: PropTypes.object
};
ActionBar.defaultProps = {
  components: {}
};
ActionBar.displayName = 'ActionBar';
ActionBar.DISPLAY_MODES = DISPLAY_MODES;
ActionBar.Count = Count;
ActionBar.SwitchActions = SwitchActions;
ActionBar.getActionsToRender = getActionsToRender;
ActionBar.Content = Content;
ActionBar.getContentClassName = getContentClassName;
export default ActionBar;
//# sourceMappingURL=ActionBar.component.js.map