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

Set of react components.

import { Children, useEffect, useRef, useState } from 'react';
import { AutoSizer } from 'react-virtualized';
import { listTypes, SELECTION_MODE } from './utils/constants';
import Loader from '../Loader';
import RendererSelector from './RendererSelector.component';
import propTypes from './PropTypes';
import { insertSelectionConfiguration, toColumns } from './utils/tablerow';
import { resizeColumns, extractResizableProps } from './utils/resizable';
import theme from './VirtualizedList.module.scss';
import tableTheme from './ListTable/ListTable.module.scss';
import { virtualizedListContext } from './virtualizedListContext';
import { get } from "lodash";
import { jsx as _jsx } from "react/jsx-runtime";
const {
  LARGE
} = listTypes;

/**
 * Composable List based on react-virtualized
 */
function VirtualizedList(props) {
  const {
    children,
    collection,
    defaultHeight,
    disableHeader,
    noRowsRenderer,
    id,
    isActive,
    isSelected,
    getRowState,
    inProgress,
    isToggleAllDisabled,
    onRowClick,
    onRowDoubleClick,
    onRowsRendered,
    onScroll,
    onToggleAll,
    registerChild,
    rowHeight,
    rowRenderers,
    scrollToIndex,
    scrollToAlignment,
    selectionToggle,
    selectionMode,
    sort,
    sortBy,
    sortDirection,
    rowCount,
    type,
    widthsOfColumns,
    setWidthsOfColumns,
    headerAction,
    headerHeight,
    disableHeight = false
  } = props;
  const columnDefinitionsWithSelection = insertSelectionConfiguration({
    children,
    collection,
    isSelected,
    isToggleAllDisabled,
    onToggleAll,
    selectionToggle,
    getRowState,
    selectionMode
  });
  const [widthsOfColumnsState, setWidthsOfColumnsState] = useState();
  const rendererSelectorRef = useRef();
  const setWidths = setWidthsOfColumns || setWidthsOfColumnsState;
  const columnsWidths = widthsOfColumns || widthsOfColumnsState;

  // Settings the data for resizable columns only at mount.
  useEffect(() => {
    setWidths(extractResizableProps(Children.toArray(children)));
  }, []);
  const resizeColumn = (dataKey, deltaX) => {
    const listWidth = get(rendererSelectorRef, 'current.props.width', 0);
    setWidths(resizeColumns(deltaX, columnsWidths, listWidth, dataKey));
  };
  const columnDefinitions = toColumns({
    id,
    theme: tableTheme,
    children: columnDefinitionsWithSelection,
    columnsWidths,
    getRowState
  });
  if (type === LARGE && inProgress) {
    return /*#__PURE__*/_jsx(Loader, {
      id: id && `${id}-loader`,
      className: theme['tc-list-progress']
    });
  }
  return /*#__PURE__*/_jsx(virtualizedListContext.Provider, {
    value: {
      resizeColumn
    },
    children: /*#__PURE__*/_jsx(AutoSizer, {
      disableHeight: disableHeight,
      children: ({
        height,
        width
      }) => /*#__PURE__*/_jsx(RendererSelector, {
        ref: rendererSelectorRef,
        collection: collection,
        noRowsRenderer: noRowsRenderer,
        height: height || defaultHeight,
        id: id,
        isActive: isActive,
        isSelected: isSelected,
        getRowState: getRowState,
        onRowClick: onRowClick,
        onRowDoubleClick: onRowDoubleClick,
        onScroll: onScroll,
        rowHeight: rowHeight,
        sort: sort,
        sortBy: sortBy,
        sortDirection: sortDirection,
        type: type,
        width: width,
        disableHeader: disableHeader,
        inProgress: inProgress,
        rowRenderers: rowRenderers,
        rowCount: rowCount,
        onRowsRendered: onRowsRendered,
        registerChild: registerChild,
        scrollToIndex: scrollToIndex,
        scrollToAlignment: scrollToAlignment,
        headerAction: headerAction,
        headerHeight: headerHeight,
        children: columnDefinitions
      })
    })
  });
}
VirtualizedList.displayName = 'VirtualizedList';
VirtualizedList.propTypes = propTypes;
VirtualizedList.defaultProps = {
  defaultHeight: 250,
  selectionMode: SELECTION_MODE.MULTI
};
export default VirtualizedList;
//# sourceMappingURL=VirtualizedList.component.js.map