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

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactBootstrap = require("@talend/react-bootstrap");
var _reactI18next = require("react-i18next");
var _classnames = _interopRequireDefault(require("classnames"));
var _Pagination = _interopRequireDefault(require("./Pagination"));
var _FilterBar = _interopRequireDefault(require("../../FilterBar"));
var _Label = _interopRequireDefault(require("./Label"));
var _ItemsNumber = _interopRequireDefault(require("./ItemsNumber"));
var _ActionBar = _interopRequireDefault(require("../../ActionBar"));
var _ColumnChooserButton = _interopRequireDefault(require("./ColumnChooserButton"));
var _DisplayModeToggle = _interopRequireDefault(require("./DisplayModeToggle"));
var _ToolbarModule = _interopRequireDefault(require("./Toolbar.module.scss"));
var _constants = _interopRequireDefault(require("../../constants"));
require("../../translate");
var _Inject = _interopRequireDefault(require("../../Inject"));
var _SelectSortBy = _interopRequireDefault(require("./SelectSortBy/SelectSortBy.component"));
var _lodash = require("lodash");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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.default.getAll(getComponent, {
    ActionBar: _ActionBar.default,
    FilterBar: _FilterBar.default
  });
  const injected = _Inject.default.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__*/(0, _jsxRuntime.jsxs)("div", {
    className: (0, _classnames.default)(_ToolbarModule.default['tc-list-toolbar'], 'tc-list-toolbar'),
    children: [injected('before-actionbar'), actionBar && /*#__PURE__*/(0, _jsxRuntime.jsx)(Renderer.ActionBar, {
      ...actionBarProps,
      className: "list-action-bar",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionBar.default.Content, {
        right: true,
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
          children: [injected('before-itemsnumber'), itemsNumber && /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
            className: "separated",
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ItemsNumber.default, {
              id: id && `${id}-items-number`,
              ...itemsNumber,
              selected: actionBar.selected,
              t: t
            })
          }), injected('before-filter'), filter && /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
            className: "separated",
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Renderer.FilterBar, {
              id: id && `${id}-filter`,
              ...filter,
              t: t,
              navbar: true
            })
          }), injected('after-filter'), injected('before-sort'), sort && /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
            className: "select-sort-by separated",
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Label.default, {
              text: t('LIST_TOOLBAR_SORT_BY', {
                defaultValue: 'Sort by:'
              }),
              htmlFor: id && `${id}-sort-by`
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectSortBy.default, {
              id: id && `${id}-sort`,
              ...sort,
              t: t
            })]
          }), injected('after-sort'), columnChooser && /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
            className: "separated",
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColumnChooserButton.default, {
              id: `${id}-column-chooser`,
              ...columnChooser,
              t: t
            })
          }), injected('before-displaymode'), display && /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
            className: "separated",
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DisplayModeToggle.default, {
              id: displayModeId,
              ...display,
              t: t
            })
          }), injected('after-displaymode')]
        })
      })
    }), injected('after-actionbar'), pagination && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Navbar, {
      componentClass: "div",
      className: _ToolbarModule.default['tc-list-toolbar'],
      role: "toolbar",
      fluid: true,
      children: [injected('before-pagination'), pagination && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Label.default, {
        text: t('LIST_TOOLBAR_PAGINATION_SHOW', {
          defaultValue: 'Show:'
        }),
        htmlFor: id && `${id}-pagination-size`
      }), pagination && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pagination.default, {
        id: id && `${id}-pagination`,
        ...pagination,
        t: t
      }), injected('after-pagination')]
    })]
  });
}
Toolbar.propTypes = {
  id: _propTypes.default.string,
  actionBar: _propTypes.default.shape(_ActionBar.default.propTypes),
  display: _propTypes.default.shape((0, _lodash.omit)(_DisplayModeToggle.default.propTypes, 't')),
  sort: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.shape({
    field: _propTypes.default.string,
    isDescending: _propTypes.default.bool,
    onChange: _propTypes.default.func.isRequired
  })]),
  pagination: _propTypes.default.shape(_Pagination.default.propTypes),
  filter: _propTypes.default.shape((0, _lodash.omit)(_FilterBar.default.propTypes, 't')),
  itemsNumber: _propTypes.default.shape((0, _lodash.omit)(_ItemsNumber.default.propTypes, 't')),
  t: _propTypes.default.func.isRequired,
  getComponent: _propTypes.default.func,
  components: _propTypes.default.object,
  columnChooser: _propTypes.default.shape({
    submit: _propTypes.default.func,
    columns: _propTypes.default.array
  })
};
Toolbar.defaultProps = {};
var _default = exports.default = (0, _reactI18next.withTranslation)(_constants.default)(Toolbar);
//# sourceMappingURL=Toolbar.component.js.map