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

Set of react components.

import classNames from 'classnames';
import PropTypes from 'prop-types';
import Inject from '../Inject';
import ListToVirtualizedList from './ListToVirtualizedList';
import Toolbar from './Toolbar';
import theme from './List.module.scss';
import { omit } from "lodash";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const SelectAll = Toolbar.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__*/_jsx(Toolbar, {
    ...toolbarProps,
    sort: !shouldHideSortOptions && toolbarProps.sort
  });
}
ListToolbar.propTypes = {
  id: PropTypes.string,
  displayMode: PropTypes.string,
  list: PropTypes.shape({
    items: PropTypes.arrayOf(PropTypes.object),
    itemProps: PropTypes.shape({
      classNameKey: PropTypes.string,
      isActive: PropTypes.func,
      isSelected: PropTypes.func,
      onRowClick: PropTypes.func,
      onSelect: PropTypes.func,
      onToggle: PropTypes.func,
      onToggleAll: PropTypes.func,
      width: PropTypes.string
    }),
    sort: PropTypes.shape({
      field: PropTypes.string,
      isDescending: PropTypes.bool,
      onChange: PropTypes.func.isRequired
    })
  }),
  toolbar: PropTypes.shape(omit(Toolbar.propTypes, 't')),
  columnChooser: PropTypes.shape({
    submit: PropTypes.func,
    columns: PropTypes.arrayOf(PropTypes.shape({
      hidden: PropTypes.bool,
      label: PropTypes.string,
      locked: PropTypes.bool,
      order: PropTypes.oneOfType([PropTypes.number, PropTypes.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 = classNames('tc-list', theme.list);
  const injected = Inject.all(getComponent, 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__*/_jsxs("div", {
    className: classnames,
    children: [injected('before-component'), injected('before-toolbar'), /*#__PURE__*/_jsx(ListToolbar, {
      id: id,
      toolbar: toolbar,
      displayMode: displayMode,
      list: list,
      columnChooser: columnChooser,
      getComponent: getComponent,
      components: components
    }), injected('after-toolbar'), selectAllCheckbox && /*#__PURE__*/_jsx(SelectAll, {
      ...selectAllCheckbox
    }), injected('before-list-wrapper'), /*#__PURE__*/_jsxs("div", {
      className: classNames('tc-list-display-virtualized', theme[`display-mode-${displayMode}`]),
      children: [injected('before-list'), /*#__PURE__*/_jsx(ListToVirtualizedList, {
        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;
export default List;
//# sourceMappingURL=List.component.js.map