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

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _classnames = _interopRequireDefault(require("classnames"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Inject = _interopRequireDefault(require("../Inject"));
var _ListToVirtualizedList = _interopRequireDefault(require("./ListToVirtualizedList"));
var _Toolbar = _interopRequireDefault(require("./Toolbar"));
var _ListModule = _interopRequireDefault(require("./List.module.scss"));
var _lodash = require("lodash");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const SelectAll = _Toolbar.default.SelectAll;
function ListToolbar({
  id,
  columnChooser,
  toolbar,
  displayMode,
  list,
  getComponent,
  components = {}
}) {
  if (!toolbar) {
    return null;
  }
  const shouldHideSortOptions = !!(displayMode === 'table' && toolbar.sort);
  const shouldHideSelectAll = displayMode === 'table';
  const toolbarProps = {
    ...toolbar,
    id,
    columnChooser,
    getComponent,
    components
  };
  if (toolbar.display) {
    toolbarProps.display.mode = displayMode;
  }
  if (!shouldHideSelectAll && list.itemProps && list.itemProps.isSelected && list.itemProps.onToggleAll) {
    toolbarProps.selectAllCheckbox = {
      id,
      items: list.items,
      isSelected: list.itemProps.isSelected,
      onToggleAll: list.itemProps.onToggleAll
    };
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.default, {
    ...toolbarProps,
    sort: !shouldHideSortOptions && toolbarProps.sort
  });
}
ListToolbar.propTypes = {
  id: _propTypes.default.string,
  displayMode: _propTypes.default.string,
  list: _propTypes.default.shape({
    items: _propTypes.default.arrayOf(_propTypes.default.object),
    itemProps: _propTypes.default.shape({
      classNameKey: _propTypes.default.string,
      isActive: _propTypes.default.func,
      isSelected: _propTypes.default.func,
      onRowClick: _propTypes.default.func,
      onSelect: _propTypes.default.func,
      onToggle: _propTypes.default.func,
      onToggleAll: _propTypes.default.func,
      width: _propTypes.default.string
    }),
    sort: _propTypes.default.shape({
      field: _propTypes.default.string,
      isDescending: _propTypes.default.bool,
      onChange: _propTypes.default.func.isRequired
    })
  }),
  toolbar: _propTypes.default.shape((0, _lodash.omit)(_Toolbar.default.propTypes, 't')),
  columnChooser: _propTypes.default.shape({
    submit: _propTypes.default.func,
    columns: _propTypes.default.arrayOf(_propTypes.default.shape({
      hidden: _propTypes.default.bool,
      label: _propTypes.default.string,
      locked: _propTypes.default.bool,
      order: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
    }))
  })
};

/**
 * @param {object} props react props
 * @example
 const props = {
	displayMode: 'table' / 'large'
	list: {
		items: [{}, {}, ...],
		columns: [
			{key, label},
			{key, label},
		],
	},
	toolbar: {
		display: {
			onChange: function,
		},
		sort: {
			field: key,
			options: [
				{key, label},
			],
			isDescending: true / false,
			onChange: function,
		},
		pagination: {
			onChange: function,
			itemsLength: number,
		},
		filter: {
			onFilter: function,
		},
	}
}
 <List {...props}></List>
 */
function List({
  columnChooser,
  components = {},
  defaultHeight,
  displayMode,
  getComponent,
  id,
  list,
  rowHeight,
  rowRenderers,
  toolbar
}) {
  const classnames = (0, _classnames.default)('tc-list', _ListModule.default.list);
  const injected = _Inject.default.all(getComponent, (0, _lodash.omit)(components, ['toolbar', 'list']));
  let selectAllCheckbox;
  if (displayMode !== 'table' && list.itemProps && list.itemProps.isSelected && list.itemProps.onToggleAll) {
    selectAllCheckbox = {
      id,
      items: list.items,
      isSelected: list.itemProps.isSelected,
      onToggleAll: list.itemProps.onToggleAll
    };
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: classnames,
    children: [injected('before-component'), injected('before-toolbar'), /*#__PURE__*/(0, _jsxRuntime.jsx)(ListToolbar, {
      id: id,
      toolbar: toolbar,
      displayMode: displayMode,
      list: list,
      columnChooser: columnChooser,
      getComponent: getComponent,
      components: components
    }), injected('after-toolbar'), selectAllCheckbox && /*#__PURE__*/(0, _jsxRuntime.jsx)(SelectAll, {
      ...selectAllCheckbox
    }), injected('before-list-wrapper'), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: (0, _classnames.default)('tc-list-display-virtualized', _ListModule.default[`display-mode-${displayMode}`]),
      children: [injected('before-list'), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListToVirtualizedList.default, {
        id: id,
        displayMode: displayMode,
        defaultHeight: defaultHeight,
        rowHeight: rowHeight,
        getComponent: getComponent,
        rowRenderers: rowRenderers,
        ...list
      }), injected('after-list')]
    }), injected('after-list-wrapper'), injected('after-component')]
  });
}
List.displayName = 'List';
List.propTypes = {
  ...ListToolbar.propTypes
};
List.defaultProps = {
  displayMode: 'table'
};
List.Toolbar = _Toolbar.default;
var _default = exports.default = List;
//# sourceMappingURL=List.component.js.map