@talend/react-components/lib/VirtualizedList/ListTable/ListTable.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 _reactVirtualized = require("react-virtualized");
var _RowSelection = _interopRequireDefault(require("../RowSelection"));
var _ActionDropdown = require("../../Actions/ActionDropdown");
var _Skeleton = _interopRequireDefault(require("../../Skeleton"));
var _rowclick = require("../event/rowclick");
var _theme = require("../../theme");
var _ListTableModule = _interopRequireDefault(require("./ListTable.module.scss"));
var _RowThemes = _interopRequireDefault(require("./RowThemes"));
var _lodash = require("lodash");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const css = (0, _theme.getTheme)(_ListTableModule.default);
function SkeletonRow({
  columns
}) {
  return columns.map(column => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    ...column.props,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
      type: "text",
      size: "xlarge"
    })
  }, column.key));
}
function ListTableRowRenderer(props) {
  return (0, _lodash.isEmpty)(props.rowData) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactVirtualized.defaultTableRowRenderer, {
    ...props,
    columns: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SkeletonRow, {
      ...props
    })]
  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactVirtualized.defaultTableRowRenderer, {
    ...props
  });
}
ListTableRowRenderer.propTypes = {
  rowData: _propTypes.default.object
};

/**
 * List renderer that renders a react-virtualized Table
 */
function ListTable(props) {
  const {
    collection,
    id,
    isActive,
    isSelected,
    getRowState,
    onRowClick,
    onRowDoubleClick,
    rowCount,
    headerAction,
    headerHeight = 40,
    ...restProps
  } = props;
  let RowTableRenderer = ListTableRowRenderer;
  if (isActive || isSelected || getRowState) {
    RowTableRenderer = (0, _RowSelection.default)(RowTableRenderer, {
      isSelected,
      isActive,
      getRowState,
      getRowData: rowProps => rowProps.rowData
    });
  }
  const onRowClickCallback = (0, _rowclick.decorateRowClick)(onRowClick);
  const onRowDoubleClickCallback = (0, _rowclick.decorateRowDoubleClick)(onRowDoubleClick);
  const headerRowRenderer = ({
    className,
    columns,
    style
  }) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    className: css('tc-list-headerRow', className),
    role: "row",
    style: style,
    children: columns
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [headerAction && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: css('tc-list-table-right-action'),
      children: headerAction
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactVirtualized.Table, {
      className: css('tc-list-table', {
        'right-action': !!headerAction
      }),
      gridClassName: `${_ListTableModule.default.grid} ${_ActionDropdown.DROPDOWN_CONTAINER_CN}`,
      headerHeight: headerHeight,
      id: id,
      onRowClick: onRowClickCallback,
      onRowDoubleClick: onRowDoubleClickCallback,
      rowClassName: ({
        index
      }) => {
        var _collection$index;
        return css('tc-list-item', _RowThemes.default, {
          [(_collection$index = collection[index]) === null || _collection$index === void 0 ? void 0 : _collection$index.className]: collection[index]
        });
      },
      rowCount: rowCount || collection.length,
      rowGetter: ({
        index
      }) => collection[index] || {},
      rowRenderer: RowTableRenderer,
      headerRowRenderer: headerRowRenderer,
      ...restProps
    })]
  });
}
ListTable.displayName = 'VirtualizedList(ListTable)';
ListTable.propTypes = {
  children: _propTypes.default.arrayOf(_propTypes.default.element),
  collection: _propTypes.default.arrayOf(_propTypes.default.object),
  disableHeader: _propTypes.default.bool,
  height: _propTypes.default.number,
  id: _propTypes.default.string,
  isActive: _propTypes.default.func,
  isSelected: _propTypes.default.func,
  getRowState: _propTypes.default.func,
  noRowsRenderer: _propTypes.default.func,
  onRowClick: _propTypes.default.func,
  onRowDoubleClick: _propTypes.default.func,
  rowHeight: _propTypes.default.number,
  sort: _propTypes.default.func,
  sortBy: _propTypes.default.string,
  sortDirection: _propTypes.default.string,
  width: _propTypes.default.number,
  rowCount: _propTypes.default.number,
  headerAction: _propTypes.default.element,
  headerHeight: _propTypes.default.number
};
ListTable.defaultProps = {
  disableHeader: false,
  rowHeight: 50
};
var _default = exports.default = ListTable;
//# sourceMappingURL=ListTable.component.js.map