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

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ActionBar = ActionBar;
exports.default = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = require("react");
var _classnames = _interopRequireDefault(require("classnames"));
var _reactI18next = require("react-i18next");
var _Actions = require("../Actions");
var _Inject = _interopRequireDefault(require("../Inject"));
var _constants = _interopRequireDefault(require("../constants"));
var _ActionBarModule = _interopRequireDefault(require("./ActionBar.module.scss"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape(_Actions.Action.propTypes), _propTypes.default.shape(_Actions.ActionSplitDropdown.propTypes)])),
  right: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape(_Actions.Action.propTypes), _propTypes.default.shape(_Actions.ActionSplitDropdown.propTypes)])),
  children: _propTypes.default.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 (0, _classnames.default)(className, {
    [`${_ActionBarModule.default['navbar-left']}`]: left,
    [`${_ActionBarModule.default['navbar-right']}`]: right,
    [`${_ActionBarModule.default['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__*/(0, _react.createElement)(tag, props, children);
}
Content.propTypes = {
  children: _propTypes.default.node,
  className: _propTypes.default.string,
  left: _propTypes.default.bool,
  right: _propTypes.default.bool,
  center: _propTypes.default.bool,
  tag: _propTypes.default.oneOf([TAG_TYPES.P, TAG_TYPES.BUTTON, TAG_TYPES.FORM, TAG_TYPES.A, TAG_TYPES.DIV])
};
function getActionsFromRenderers(actions, getComponent) {
  const Renderers = _Inject.default.getAll(getComponent, {
    Action: _Actions.Action,
    Actions: _Actions.Actions,
    ActionDropdown: _Actions.ActionDropdown,
    ActionSplitDropdown: _Actions.ActionSplitDropdown
  });
  function getActionsElements(action, index) {
    const {
      displayMode,
      ...rest
    } = action;
    switch (displayMode) {
      case DISPLAY_MODES.DIVIDER:
        return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
          className: "divider",
          children: "|"
        }, index);
      case DISPLAY_MODES.DROPDOWN:
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(Renderers.ActionDropdown, {
          ...rest
        }, index);
      case DISPLAY_MODES.SPLIT_DROPDOWN:
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(Renderers.ActionSplitDropdown, {
          ...rest
        }, index);
      case DISPLAY_MODES.BTN_GROUP:
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(Renderers.Actions, {
          ...rest
        }, index);
      default:
        if (displayMode) {
          return /*#__PURE__*/(0, _jsxRuntime.jsx)(Renderers.Action, {
            displayMode: displayMode,
            ...rest
          }, index);
        }
        return /*#__PURE__*/(0, _jsxRuntime.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.default.all(getComponent, components);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Content, {
    left: left,
    right: right,
    center: center,
    children: [injected('before-actions'), getActionsFromRenderers(actions, getComponent), injected('after-actions')]
  });
}
SwitchActions.propTypes = {
  actions: _propTypes.default.arrayOf(_propTypes.default.shape(actionsShape)),
  left: _propTypes.default.bool,
  right: _propTypes.default.bool,
  center: _propTypes.default.bool,
  getComponent: _propTypes.default.func,
  components: _propTypes.default.object
};
SwitchActions.defaultProps = {
  actions: []
};
function Count({
  selected
}) {
  const {
    t
  } = (0, _reactI18next.useTranslation)(_constants.default);
  if (!selected) {
    return null;
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
    "data-test": "selected-count",
    className: (0, _classnames.default)(_ActionBarModule.default['tc-actionbar-selected-count'], 'tc-actionbar-selected-count'),
    children: t('ACTION_BAR_COUNT_SELECTED', {
      defaultValue: '{{selected}} selected',
      selected
    })
  });
}
Count.propTypes = {
  selected: _propTypes.default.number
};
function defineComponentLeft(parentComponentLeft, selected, hideCount) {
  if (parentComponentLeft) {
    return parentComponentLeft;
  }
  if (!hideCount && selected > 0) {
    return {
      'before-actions': /*#__PURE__*/(0, _jsxRuntime.jsx)(Count, {
        selected: selected
      })
    };
  }
  return undefined;
}
function ActionBar(props) {
  const {
    left,
    right,
    center
  } = getActionsToRender(props);
  const cssClass = (0, _classnames.default)(_ActionBarModule.default['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__*/(0, _jsxRuntime.jsxs)("div", {
    className: cssClass,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SwitchActions, {
      getComponent: props.getComponent,
      actions: left,
      left: true,
      components: componentsLeft
    }, 0), props.children, /*#__PURE__*/(0, _jsxRuntime.jsx)(SwitchActions, {
      getComponent: props.getComponent,
      actions: center,
      center: true,
      components: componentsCenter
    }, 1), /*#__PURE__*/(0, _jsxRuntime.jsx)(SwitchActions, {
      getComponent: props.getComponent,
      actions: right,
      right: true,
      components: componentsRight
    }, 2)]
  });
}
ActionBar.propTypes = {
  selected: _propTypes.default.number,
  hideCount: _propTypes.default.bool,
  children: _propTypes.default.node,
  className: _propTypes.default.string,
  getComponent: _propTypes.default.func,
  components: _propTypes.default.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;
var _default = exports.default = ActionBar;
//# sourceMappingURL=ActionBar.component.js.map