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

Set of react components.

import { useEffect } from 'react';
import PropTypes from 'prop-types';
import { ButtonIconFloating } from '@talend/design-system';
import { useListContext } from '../context';
import VirtualizedList from '../../../VirtualizedList';
import { DISPLAY_MODE, SORT } from '../constants';
import ColumnChooser from '../ColumnChooser';
import theme from '../List.module.scss';
import { get, isEqual, map } from "lodash";
import { jsx as _jsx } from "react/jsx-runtime";
const columnsFromChildrens = children => {
  return Array.isArray(children) ? children.filter(column => {
    var _column$props;
    return !!((_column$props = column.props) !== null && _column$props !== void 0 && _column$props.dataKey);
  }).map(column => column.props) : null;
};
function VList({
  children,
  columnChooser,
  ...rest
}) {
  const {
    displayMode = DISPLAY_MODE.TABLE,
    collection,
    visibleColumns,
    setSortParams,
    sortParams,
    setColumns,
    columns,
    setVisibleColumns
  } = useListContext();

  // initialize visible columns
  if (!!setVisibleColumns && !visibleColumns) {
    const foundColumns = columnsFromChildrens(children);
    setVisibleColumns(map(foundColumns, 'dataKey'));
  }
  useEffect(() => {
    const nextColumns = columnsFromChildrens(children);
    if (nextColumns && !isEqual(map(nextColumns, 'dataKey'), map(columns, 'dataKey'))) {
      setColumns(nextColumns);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [children, setColumns]);
  const headerAction = !!columnChooser && displayMode === DISPLAY_MODE.TABLE && /*#__PURE__*/_jsx(ColumnChooser, {
    ...columnChooser,
    buttonRenderer: ButtonIconFloating
  });
  return /*#__PURE__*/_jsx("div", {
    className: theme.vlist,
    children: /*#__PURE__*/_jsx(VirtualizedList, {
      collection: collection,
      type: displayMode.toUpperCase(),
      sortBy: get(sortParams, 'sortBy'),
      sortDirection: get(sortParams, 'isDescending') ? SORT.DESC : SORT.ASC,
      sort: ({
        sortBy,
        sortDirection
      }) => setSortParams({
        sortBy,
        isDescending: sortDirection === SORT.DESC
      }),
      headerAction: headerAction,
      ...rest,
      children: visibleColumns && Array.isArray(children) ? children.filter(column => {
        var _column$props2;
        return visibleColumns.includes((_column$props2 = column.props) === null || _column$props2 === void 0 ? void 0 : _column$props2.dataKey);
      }) : children
    })
  });
}
VList.propTypes = {
  children: PropTypes.arrayOf(PropTypes.node),
  columnChooser: PropTypes.oneOfType([PropTypes.bool, ...Object.values(ColumnChooser.propTypes)])
};

// we port the VirtualizedList columns to VList to allow VList.Title/Badge/...
Object.entries(VirtualizedList).forEach(([key, value]) => {
  VList[key] = value;
});
VList.displayName = 'VList';
export default VList;
//# sourceMappingURL=VList.component.js.map