@widergy/energy-ui 3.158.0 → 3.159.0

package/dist/esm/components/UTTable/index.js

@@ -0,0 +1,450 @@
+import 'react-perfect-scrollbar/dist/css/styles.css';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import ScrollBar from 'react-perfect-scrollbar';
+import { isDesktop, isMobile, RESIZE_EVENT } from '@widergy/web-utils/lib/browser';
+import { isEmpty } from '@widergy/web-utils/lib/array';
+import { arrayOf, bool, elementType, func, node, number, object, objectOf, oneOf, oneOfType, shape, string } from 'prop-types';
+import UTLabel from '../UTLabel';
+import UTLoading from '../UTLoading';
+import WithTheme from '../WithTheme';
+import { ID_CONSTANTS } from '../../constants/testIds';
+import { INTEGRATION_TYPES } from '../../constants/UTTable';
+import { mergeClasses } from '../../utils/classesUtils';
+import Cell from './components/Cell';
+import HeaderCell from './components/HeaderCell';
+import ResponsiveCell from './components/ResponsiveCell';
+import styles from './styles.module.scss';
+import TableFooter from './components/TableFooter';
+import TableHeader from './components/TableHeader';
+import TableRow from './components/TableRow';
+import { classesType, columnsType } from './types';
+import { getColumnDefinition, orderRows, createRowStyles, getCurrentRows, getSelectableRowIds, getInitialValidPage, getInitialValidRowsPerPage, getColumnsSizes, getEnabledHeader } from './utils';
+import { retrieveStyle } from './theme';
+import { DEFAULT_MOBILE_BREAKPOINT, DEFAULT_TABLET_BREAKPOINT, NO_RESULTS_LABEL, ROWS_PER_PAGE, ROW_KEY, ROW_PADDING_NAMES, ROW_SPACING_NAMES, TOTAL_ROWS_LABEL, TOTAL_ROW_LABEL } from './constants';
+import { useResizeObserver } from './hook';
+const {
+  ACTIONS,
+  CELL,
+  HEADER,
+  SELECTION_COMPONENT,
+  TABLE,
+  TABLE_ROW
+} = ID_CONSTANTS;
+const UTTable = _ref => {
+  let {
+    actionDataTestId,
+    actionsConfig,
+    automaticRefreshDelay = 15 * 60 * 1000,
+    cellDataTestId,
+    classNames,
+    classes: themeClasses,
+    clickableRowValidation,
+    columns,
+    data = [],
+    defaultNullValue = '-',
+    description,
+    disableAutoOrder = false,
+    disablePagination = false,
+    disableReloadRows,
+    disableRowSelection,
+    disableSelectAll,
+    disabledRowTooltip,
+    disabledSelectAllTooltip,
+    exclusiveSelection = false,
+    externalPage,
+    externalRowsPerPage,
+    Filters,
+    fitColumnsWidth,
+    GeneralActions,
+    getRowClassName = () => '',
+    headerActionDataTestId,
+    headerCellDataTestId,
+    headerPadding = ROW_PADDING_NAMES.MEDIUM,
+    headerSelectionComponentDataTestId,
+    headerVersion,
+    hidePageSelector,
+    initialOrder,
+    initialSelectedRows = [],
+    integrationType = INTEGRATION_TYPES.INTERNAL,
+    loading,
+    mobileBreakpoint = DEFAULT_MOBILE_BREAKPOINT,
+    noResultDataTestId,
+    noResultsComponent,
+    noResultsLabel = NO_RESULTS_LABEL,
+    onOrderChange,
+    onPageChange,
+    onRefresh,
+    onReloadRows,
+    onRowClick,
+    onRowsPerPageChange,
+    onSelectAllRows,
+    onSelectRow,
+    ongoingRefreshLabel,
+    refreshLabel,
+    removeDefaultOrderIcon = false,
+    removeFixedRowsDivisors = false,
+    rowKey = ROW_KEY,
+    rowPadding = ROW_PADDING_NAMES.SMALL,
+    rowSpacing = ROW_SPACING_NAMES.NONE,
+    rowsPerPageOptions = ROWS_PER_PAGE,
+    selectAllInCurrentPageOnly = false,
+    selectable = false,
+    selectedLabel,
+    selectionComponentDataTestId,
+    stickyHeader,
+    tableHeaderDataTestId,
+    tableTitle,
+    tabletBreakpoint = DEFAULT_TABLET_BREAKPOINT,
+    titleDataTestId,
+    totalRows,
+    totalRowsLabel,
+    withActionHeader,
+    withAutomaticRefresh,
+    withRefresh
+  } = _ref;
+  const initialValidRowsPerPageOption = getInitialValidRowsPerPage(externalRowsPerPage, rowsPerPageOptions, data, integrationType, totalRows);
+  const initialValidPage = getInitialValidPage(externalPage, initialValidRowsPerPageOption, data, integrationType);
+  const [order, setOrder] = useState(initialOrder || {});
+  const [rows, setRows] = useState([]);
+  const [selectedAll, setSelectedAll] = useState(false);
+  const [rowsPerPage, setRowsPerPage] = useState(initialValidRowsPerPageOption);
+  const [page, setPage] = useState(initialValidPage);
+  const [ref, entry] = useResizeObserver();
+  const [selectedRows, setSelectedRows] = useState(selectable ? initialSelectedRows : []);
+  const [isResponsive, setIsResponsive] = useState(!isDesktop(tabletBreakpoint));
+  const scrollRef = useRef();
+  const contentRef = useRef();
+  const classes = useMemo(() => mergeClasses(themeClasses, classNames), [classNames]);
+  const handleResize = () => {
+    setIsResponsive(!isDesktop(tabletBreakpoint));
+  };
+  useEffect(() => {
+    window.addEventListener(RESIZE_EVENT, handleResize);
+    return () => window.removeEventListener(RESIZE_EVENT, handleResize);
+  }, []);
+  useEffect(() => {
+    if (!selectAllInCurrentPageOnly) setSelectedAll(!isEmpty(data) && initialSelectedRows.length === data.length);
+    setSelectedRows(selectable ? initialSelectedRows : []);
+    setRows(disableAutoOrder ? data : orderRows(data, order, data, columns));
+    if (externalRowsPerPage) setRowsPerPage(initialValidRowsPerPageOption);
+    const validPage = data.length / rowsPerPage > page;
+    if (!validPage || integrationType === INTEGRATION_TYPES.EXTERNAL) setPage(initialValidPage);
+  }, [data]);
+  const currentRows = useMemo(() => disablePagination || integrationType === INTEGRATION_TYPES.EXTERNAL ? rows : getCurrentRows(rows, page, rowsPerPage), [page, rowsPerPage, rows]);
+  const handleOrder = newOrder => {
+    setOrder(newOrder);
+    if (!disableAutoOrder && !isEmpty(rows)) setRows(orderRows(rows, newOrder, data, columns));
+    if (onOrderChange) onOrderChange(newOrder);
+  };
+  const handlePageChange = newPage => {
+    setPage(newPage);
+    if (onPageChange) onPageChange(newPage);
+  };
+  const allDisplayedRowsAreSelected = newSelectedRows => {
+    const displayedRows = getSelectableRowIds(rows, rowKey, disableRowSelection);
+    return displayedRows.every(value => newSelectedRows.includes(value));
+  };
+  const selectRow = row => {
+    if (!row[rowKey]) return null;
+    const pageRowsIds = getSelectableRowIds(currentRows, rowKey, disableRowSelection);
+    let newSelectedRows = [];
+    if (exclusiveSelection) {
+      newSelectedRows = [row[rowKey]];
+    } else {
+      const rowKeyIndex = selectedRows.indexOf(row[rowKey]);
+      if (rowKeyIndex === -1) newSelectedRows = [...selectedRows, row[rowKey]];else newSelectedRows = selectedRows.filter(el => el !== row[rowKey]);
+      const pageNewSelectedRows = newSelectedRows.filter(newSelectedRow => pageRowsIds.includes(newSelectedRow));
+      const allSelected = selectAllInCurrentPageOnly ? pageNewSelectedRows.length === pageRowsIds.length : allDisplayedRowsAreSelected(newSelectedRows);
+      if (!allSelected && selectedAll) setSelectedAll(false);
+      if (allSelected && !selectedAll) setSelectedAll(true);
+    }
+    setSelectedRows(newSelectedRows);
+    if (onSelectRow) onSelectRow(row[rowKey], newSelectedRows);
+  };
+  const selectAllRows = () => {
+    const newSelectedAll = !selectedAll;
+    const pageRowsIds = getSelectableRowIds(currentRows, rowKey, disableRowSelection);
+    const newSelectedRows = selectAllInCurrentPageOnly ? newSelectedAll ? [...pageRowsIds, ...selectedRows.filter(row => !pageRowsIds.includes(row))] : selectedRows.filter(row => !pageRowsIds.includes(row)) : newSelectedAll ? getSelectableRowIds(rows, rowKey, disableRowSelection) : [];
+    setSelectedRows(newSelectedRows);
+    setSelectedAll(newSelectedAll);
+    if (onSelectAllRows) onSelectAllRows(selectAllInCurrentPageOnly ? newSelectedRows : newSelectedAll);
+  };
+  useEffect(() => {
+    if (selectAllInCurrentPageOnly) {
+      const pageRowsIds = getSelectableRowIds(currentRows, rowKey, disableRowSelection);
+      setSelectedAll(!isEmpty(pageRowsIds) && pageRowsIds.every(row => selectedRows.includes(row)));
+    }
+  }, [page, rowsPerPage, rows, order, disableSelectAll]);
+  const columnsDefinition = useMemo(() => getColumnDefinition(columns, isResponsive), [columns, isResponsive]);
+  const isFirstRow = useCallback(index => !index, []);
+  const isLastRow = useCallback(index => index === currentRows.length - 1, [currentRows]);
+  const onChangeRowPerPage = newRowsPerPage => {
+    setRowsPerPage(newRowsPerPage || rowsPerPageOptions[0]);
+    setPage(0);
+    if (onRowsPerPageChange) onRowsPerPageChange(newRowsPerPage || rowsPerPageOptions[0]);
+  };
+  const showPagination = !disablePagination && !loading && !isEmpty(currentRows);
+  const rowStyles = useMemo(() => createRowStyles(rowPadding, rowSpacing, headerPadding, isResponsive), [rowPadding, rowSpacing, headerPadding, isResponsive]);
+  const tableWidth = useMemo(() => {
+    var _entry$target;
+    return (entry === null || entry === void 0 || (_entry$target = entry.target) === null || _entry$target === void 0 ? void 0 : _entry$target.clientWidth) || '100%';
+  }, [entry]);
+  const handleScrollbarSync = ps => {
+    setTimeout(() => {
+      ps.update();
+      if (scrollRef.current) scrollRef.current.scrollLeft = 0;
+    }, 100);
+  };
+  const CellComponent = isResponsive ? ResponsiveCell : Cell;
+  const totalRowLabel = isResponsive ? '' : totalRowsLabel || (data.length === 1 ? TOTAL_ROW_LABEL : TOTAL_ROWS_LABEL);
+  const handleSinchronizeContent = event => {
+    var _event$target;
+    if (contentRef.current && stickyHeader) contentRef.current.scrollTo(event === null || event === void 0 || (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.scrollLeft, 0);
+  };
+  const columnSizes = useMemo(() => getColumnsSizes({
+    columns,
+    fitColumnsWidth,
+    selectable
+  }), [columns, fitColumnsWidth, selectable]);
+  const enabledHeader = useMemo(() => getEnabledHeader(columns), [columns]);
+  const Content = /*#__PURE__*/React.createElement("div", {
+    className: "".concat(isEmpty(currentRows) && styles.preventScrolling),
+    ref: contentRef,
+    style: {
+      overflow: !isResponsive && stickyHeader && 'hidden',
+      width: tableWidth
+    }
+  }, /*#__PURE__*/React.createElement(UTLoading, {
+    className: "".concat(styles.tableLoading, " ").concat(classes.tableLoading),
+    loading: loading
+  }, isEmpty(currentRows) ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.noResultsContainer, " ").concat(classes.noResultsContainer),
+    style: {
+      width: tableWidth
+    }
+  }, noResultsComponent || /*#__PURE__*/React.createElement(UTLabel, {
+    className: classes.noResultsLabel,
+    dataTestId: noResultDataTestId
+  }, noResultsLabel)) : currentRows.map((row, index) => {
+    const isSelected = selectedRows.includes(row[rowKey]);
+    const selectedClassNames = isSelected ? classes.selectedRow : rowSpacing === ROW_SPACING_NAMES.NONE && index < currentRows.length - 1 ? styles.unselectedSmallRow : undefined;
+    const isRowClickable = onRowClick && (!clickableRowValidation || clickableRowValidation(row));
+    const handleRowClick = isRowClickable ? event => onRowClick(event, row) : undefined;
+    return /*#__PURE__*/React.createElement(TableRow, {
+      actionDataTestId: actionDataTestId !== null && actionDataTestId !== void 0 ? actionDataTestId : "".concat(TABLE, ".").concat(TABLE_ROW, ".row_").concat(index, ".").concat(CELL, ".").concat(ACTIONS),
+      cellDataTestId: cellDataTestId !== null && cellDataTestId !== void 0 ? cellDataTestId : "".concat(TABLE, ".").concat(TABLE_ROW, ".row_").concat(index),
+      CellComponent: CellComponent,
+      cellProps: {
+        defaultNullValue,
+        classes,
+        rowData: {
+          ...row,
+          index
+        },
+        style: rowStyles.cell
+      },
+      checkBoxOnChange: () => selectRow(row),
+      checkBoxSelected: isSelected,
+      className: "\n                  ".concat(isResponsive && styles.responsiveRow, "\n                  ").concat(isRowClickable && classes.rowContainerClickable, "\n                  ").concat(getRowClassName(row), "\n                  "),
+      columnsDefinition: columnsDefinition,
+      columnSizes: columnSizes,
+      containerStyle: {
+        ...rowStyles.rowContainer,
+        minWidth: tableWidth
+      },
+      disableRowSelection: disableRowSelection,
+      disabledRowSelectionTooltip: disabledRowTooltip,
+      exclusiveSelection: exclusiveSelection,
+      fixedRowsLeftClassName: "".concat(classes.fixedRowLeft, " ").concat(selectedClassNames, " ").concat(isFirstRow(index) && classes.firstFixedRowLeft, " ").concat(isLastRow(index) && classes.lastFixedRowLeft),
+      fixedRowsRightClassName: "".concat(classes.fixedRowRight, " ").concat(selectedClassNames, " ").concat(isFirstRow(index) && classes.firstFixedRowRight, " ").concat(isLastRow(index) && classes.lastFixedRowRight),
+      handleRowClick: handleRowClick,
+      isResponsive: isResponsive,
+      key: row[rowKey] && "row_".concat(row[rowKey]),
+      pageRows: currentRows,
+      removeFixedRowsDivisors: removeFixedRowsDivisors,
+      rowClassName: "".concat(classes.row, " ").concat(selectedClassNames, " ").concat(isLastRow(index) && classes.lastRow, " ").concat(isFirstRow(index) && classes.firstRow),
+      rowKey: rowKey,
+      rowStyles: rowStyles,
+      selectable: selectable,
+      selectionComponentDataTestId: selectionComponentDataTestId !== null && selectionComponentDataTestId !== void 0 ? selectionComponentDataTestId : "".concat(TABLE, ".").concat(TABLE_ROW, ".row_").concat(index, ".").concat(CELL, ".").concat(SELECTION_COMPONENT),
+      selectedRows: selectedRows,
+      tableSize: tableWidth
+    });
+  })));
+  const Header = /*#__PURE__*/React.createElement(TableRow, {
+    actionDataTestId: headerActionDataTestId !== null && headerActionDataTestId !== void 0 ? headerActionDataTestId : "".concat(TABLE, ".").concat(TABLE_ROW, ".").concat(HEADER, "Cell.").concat(ACTIONS),
+    CellComponent: HeaderCell,
+    cellDataTestId: headerCellDataTestId !== null && headerCellDataTestId !== void 0 ? headerCellDataTestId : "".concat(TABLE, ".").concat(TABLE_ROW, ".").concat(HEADER, "Cell"),
+    cellProps: {
+      classes,
+      handleOrder,
+      order,
+      removeDefaultOrderIcon,
+      style: rowStyles.headerCell
+    },
+    checkBoxClassName: "".concat(exclusiveSelection && styles.hideCheckBox),
+    checkBoxOnChange: selectAllRows,
+    checkBoxSelected: selectedAll,
+    className: "".concat(isEmpty(currentRows) && styles.disableHeader),
+    columnSizes: columnSizes,
+    columnsDefinition: columnsDefinition,
+    containerStyle: {
+      ...rowStyles.headerRowContainer,
+      minWidth: tableWidth
+    },
+    disableRowSelection: disableSelectAll,
+    disabledRowSelectionTooltip: disabledSelectAllTooltip,
+    fixedRowsLeftClassName: classes.fixedHeaderRowLeft,
+    fixedRowsRightClassName: classes.fixedHeaderRowRight,
+    pageRows: currentRows,
+    removeFixedRowsDivisors: removeFixedRowsDivisors,
+    rowClassName: classes.header,
+    rowKey: rowKey,
+    rowStyles: rowStyles,
+    selectable: selectable,
+    selectionComponentDataTestId: headerSelectionComponentDataTestId !== null && headerSelectionComponentDataTestId !== void 0 ? headerSelectionComponentDataTestId : "".concat(TABLE, ".").concat(TABLE_ROW, ".").concat(HEADER, "Cell.").concat(SELECTION_COMPONENT),
+    selectedRows: selectedRows,
+    tableSize: tableWidth
+  });
+  const shouldRenderTableHeader = headerVersion === 'V0' || !headerVersion ? tableTitle || GeneralActions : withActionHeader;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.table, " ").concat(classes.table),
+    ref: ref
+  }, shouldRenderTableHeader && /*#__PURE__*/React.createElement(TableHeader, {
+    actions: actionsConfig,
+    automaticRefreshDelay: automaticRefreshDelay,
+    classes: classes,
+    description: description,
+    disabled: disableReloadRows,
+    isDesktop: isDesktop(tabletBreakpoint),
+    isMobile: isMobile(mobileBreakpoint),
+    GeneralActions: GeneralActions,
+    loading: loading,
+    onRefresh: onRefresh,
+    onReload: onReloadRows,
+    ongoingRefreshLabel: ongoingRefreshLabel,
+    refreshLabel: refreshLabel,
+    selectedLabel: selectedLabel,
+    tableHeaderDataTestId: tableHeaderDataTestId,
+    title: tableTitle,
+    titleDataTestId: titleDataTestId,
+    version: headerVersion,
+    withAutomaticRefresh: withAutomaticRefresh,
+    withRefresh: withRefresh
+  }), Filters, !isResponsive && /*#__PURE__*/React.createElement("div", {
+    className: stickyHeader && "".concat(styles.stickyHeader, " ").concat(classes.stickyHeader || '')
+  }, /*#__PURE__*/React.createElement(ScrollBar, {
+    className: "\n                ".concat(styles.scrollbar, "\n                ").concat(classes.scrollbar, "\n                ").concat(loading && styles.disableHeader),
+    containerRef: el => scrollRef.current = el,
+    onScroll: handleSinchronizeContent,
+    onSync: handleScrollbarSync,
+    options: {
+      suppressScrollX: fitColumnsWidth,
+      suppressScrollY: true
+    },
+    style: {
+      width: tableWidth
+    }
+  }, enabledHeader && Header, !stickyHeader && Content)), (isResponsive || stickyHeader) && Content, showPagination && /*#__PURE__*/React.createElement(TableFooter, {
+    classes: classes,
+    handlePageChange: handlePageChange,
+    isResponsive: isResponsive,
+    onChangeRowPerPage: onChangeRowPerPage,
+    hidePageSelector: hidePageSelector,
+    page: page,
+    rowsPerPage: rowsPerPage,
+    rowsPerPageOptions: rowsPerPageOptions,
+    totalRows: totalRows || rows.length,
+    totalRowsLabel: totalRowLabel
+  }));
+};
+UTTable.propTypes = {
+  actionsConfig: arrayOf(shape({
+    classes: objectOf(string),
+    classNames: objectOf(string),
+    colorTheme: string,
+    count: number,
+    dataTestId: string,
+    disabled: bool,
+    hideTextOnResponsive: bool,
+    Icon: oneOfType([elementType, string]),
+    iconPlacement: string,
+    loading: bool,
+    onClick: func,
+    size: string,
+    type: string,
+    variant: string
+  })),
+  actionDataTestId: string,
+  automaticRefreshDelay: number,
+  cellDataTestId: string,
+  classNames: classesType,
+  classes: classesType,
+  clickableRowValidation: func,
+  columns: columnsType,
+  data: arrayOf(object),
+  defaultNullValue: string,
+  description: string,
+  disableAutoOrder: bool,
+  disablePagination: bool,
+  disableReloadRows: bool,
+  disableRowSelection: oneOfType([func, bool]),
+  disableSelectAll: oneOfType([func, bool]),
+  disabledRowTooltip: func,
+  disabledSelectAllTooltip: func,
+  exclusiveSelection: bool,
+  externalPage: number,
+  externalRowsPerPage: number,
+  Filters: node,
+  fitColumnsWidth: bool,
+  GeneralActions: node,
+  getRowClassName: func,
+  headerActionDataTestId: string,
+  headerCellDataTestId: string,
+  headerPadding: string,
+  headerSelectionComponentDataTestId: string,
+  headerVersion: string,
+  hidePageSelector: bool,
+  initialOrder: shape({
+    direction: string,
+    key: string
+  }),
+  initialSelectedRows: arrayOf(oneOfType([number, string])),
+  integrationType: oneOf([...Object.values(INTEGRATION_TYPES)]),
+  loading: bool,
+  mobileBreakpoint: number,
+  noResultDataTestId: string,
+  noResultsComponent: node,
+  noResultsLabel: string,
+  onOrderChange: func,
+  onPageChange: func,
+  onRefresh: func,
+  onReloadRows: func,
+  onRowClick: func,
+  onRowsPerPageChange: func,
+  onSelectAllRows: func,
+  onSelectRow: func,
+  ongoingRefreshLabel: string,
+  refreshLabel: string,
+  removeDefaultOrderIcon: bool,
+  removeFixedRowsDivisors: bool,
+  rowKey: string,
+  rowPadding: string,
+  rowSpacing: string,
+  rowsPerPageOptions: arrayOf(number),
+  selectAllInCurrentPageOnly: bool,
+  selectable: bool,
+  selectedLabel: string,
+  selectionComponentDataTestId: string,
+  stickyHeader: bool,
+  tableHeaderDataTestId: string,
+  tableTitle: string,
+  tabletBreakpoint: number,
+  titleDataTestId: string,
+  totalRows: number,
+  totalRowsLabel: string,
+  withActionHeader: bool,
+  withAutomaticRefresh: bool,
+  withRefresh: bool
+};
+export default WithTheme(retrieveStyle)(UTTable);

package/dist/esm/components/UTTable/styles.module.scss

@@ -0,0 +1,69 @@
+@use '../../scss/variables/colors.module.scss' as *;
+
+.table {
+  position: relative;
+  word-break: break-word;
+}
+
+.disableHeader {
+  pointer-events: none;
+}
+
+.stickyHeader {
+  background-color: $white;
+  position: sticky;
+  top: 0;
+  z-index: 3;
+}
+
+.scrollbar {
+  :global {
+    .ps__rail-x {
+      background: transparent !important;
+      bottom: auto !important;
+      height: 6px !important;
+      opacity: 1 !important;
+      top: 0;
+      z-index: 2;
+    }
+
+    .ps__thumb-x {
+      bottom: 0;
+      cursor: pointer;
+      height: 6px !important;
+      opacity: 1;
+    }
+  }
+}
+
+.noResultsContainer {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
+.preventScrolling {
+  left: 0;
+  position: sticky;
+}
+
+.hideCheckBox {
+  pointer-events: none;
+  visibility: hidden;
+}
+
+.unselectedSmallRow {
+  border-bottom-color: transparent;
+}
+
+.tableLoading {
+  left: 0;
+  min-height: 300px;
+  position: sticky;
+}
+
+.responsiveRow {
+  display: flex;
+  flex-direction: column !important;
+  margin-bottom: 16px !important;
+}