@talend/react-components/lib-esm/List/Toolbar/Toolbar.component.js

Set of react components.

import PropTypes from 'prop-types';
import { Navbar } from '@talend/react-bootstrap';
import { withTranslation } from 'react-i18next';
import classNames from 'classnames';
import Pagination from './Pagination';
import FilterBar from '../../FilterBar';
import Label from './Label';
import ItemsNumber from './ItemsNumber';
import ActionBar from '../../ActionBar';
import ColumnChooserButton from './ColumnChooserButton';
import DisplayModeToggle from './DisplayModeToggle';
import theme from './Toolbar.module.scss';
import I18N_DOMAIN_COMPONENTS from '../../constants';
import '../../translate';
import Inject from '../../Inject';
import SelectSortBy from './SelectSortBy/SelectSortBy.component';
import { omit } from "lodash";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function adaptActionsIds(actions, parentId) {
  return actions && actions.map(action => {
    if (action.id) {
      return {
        ...action,
        id: `${parentId}-actions-${action.id}`
      };
    }
    return action;
  });
}
function adaptLeftAndRightActions(actions, parentId) {
  return actions && {
    left: adaptActionsIds(actions.left, parentId)
  };
}

/**
 * @param {string} id the id of Toolbar
 * @param {object} actionBar the ActionBar properties
 * @param {object} display the SelectDisplayMode properties
 * @param {object} sort the SelectSortBy properties
 * @param {object} pagination the Pagination properties
 * @param {object} filter the Filter properties
 * @param {function} t the translate function
 * @example
 <Toolbar id="my-toolbar"></Toolbar>
 */
function Toolbar({
  actionBar,
  columnChooser,
  components,
  display,
  filter,
  getComponent,
  id,
  itemsNumber,
  pagination,
  sort,
  t
}) {
  const Renderer = Inject.getAll(getComponent, {
    ActionBar,
    FilterBar
  });
  const injected = Inject.all(getComponent, components);
  let actionBarProps = actionBar;
  if (id && actionBar) {
    const {
      actions,
      multiSelectActions
    } = actionBar;
    actionBarProps = {
      ...actionBar,
      getComponent,
      actions: adaptLeftAndRightActions(actions, id),
      multiSelectActions: adaptLeftAndRightActions(multiSelectActions, id)
    };
  }
  const displayModeId = id && `${id}-display-mode`;
  return /*#__PURE__*/_jsxs("div", {
    className: classNames(theme['tc-list-toolbar'], 'tc-list-toolbar'),
    children: [injected('before-actionbar'), actionBar && /*#__PURE__*/_jsx(Renderer.ActionBar, {
      ...actionBarProps,
      className: "list-action-bar",
      children: /*#__PURE__*/_jsx(ActionBar.Content, {
        right: true,
        children: /*#__PURE__*/_jsxs("ul", {
          children: [injected('before-itemsnumber'), itemsNumber && /*#__PURE__*/_jsx("li", {
            className: "separated",
            children: /*#__PURE__*/_jsx(ItemsNumber, {
              id: id && `${id}-items-number`,
              ...itemsNumber,
              selected: actionBar.selected,
              t: t
            })
          }), injected('before-filter'), filter && /*#__PURE__*/_jsx("li", {
            className: "separated",
            children: /*#__PURE__*/_jsx(Renderer.FilterBar, {
              id: id && `${id}-filter`,
              ...filter,
              t: t,
              navbar: true
            })
          }), injected('after-filter'), injected('before-sort'), sort && /*#__PURE__*/_jsxs("li", {
            className: "select-sort-by separated",
            children: [/*#__PURE__*/_jsx(Label, {
              text: t('LIST_TOOLBAR_SORT_BY', {
                defaultValue: 'Sort by:'
              }),
              htmlFor: id && `${id}-sort-by`
            }), /*#__PURE__*/_jsx(SelectSortBy, {
              id: id && `${id}-sort`,
              ...sort,
              t: t
            })]
          }), injected('after-sort'), columnChooser && /*#__PURE__*/_jsx("li", {
            className: "separated",
            children: /*#__PURE__*/_jsx(ColumnChooserButton, {
              id: `${id}-column-chooser`,
              ...columnChooser,
              t: t
            })
          }), injected('before-displaymode'), display && /*#__PURE__*/_jsx("li", {
            className: "separated",
            children: /*#__PURE__*/_jsx(DisplayModeToggle, {
              id: displayModeId,
              ...display,
              t: t
            })
          }), injected('after-displaymode')]
        })
      })
    }), injected('after-actionbar'), pagination && /*#__PURE__*/_jsxs(Navbar, {
      componentClass: "div",
      className: theme['tc-list-toolbar'],
      role: "toolbar",
      fluid: true,
      children: [injected('before-pagination'), pagination && /*#__PURE__*/_jsx(Label, {
        text: t('LIST_TOOLBAR_PAGINATION_SHOW', {
          defaultValue: 'Show:'
        }),
        htmlFor: id && `${id}-pagination-size`
      }), pagination && /*#__PURE__*/_jsx(Pagination, {
        id: id && `${id}-pagination`,
        ...pagination,
        t: t
      }), injected('after-pagination')]
    })]
  });
}
Toolbar.propTypes = {
  id: PropTypes.string,
  actionBar: PropTypes.shape(ActionBar.propTypes),
  display: PropTypes.shape(omit(DisplayModeToggle.propTypes, 't')),
  sort: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
    field: PropTypes.string,
    isDescending: PropTypes.bool,
    onChange: PropTypes.func.isRequired
  })]),
  pagination: PropTypes.shape(Pagination.propTypes),
  filter: PropTypes.shape(omit(FilterBar.propTypes, 't')),
  itemsNumber: PropTypes.shape(omit(ItemsNumber.propTypes, 't')),
  t: PropTypes.func.isRequired,
  getComponent: PropTypes.func,
  components: PropTypes.object,
  columnChooser: PropTypes.shape({
    submit: PropTypes.func,
    columns: PropTypes.array
  })
};
Toolbar.defaultProps = {};
export default withTranslation(I18N_DOMAIN_COMPONENTS)(Toolbar);
//# sourceMappingURL=Toolbar.component.js.map