@widergy/energy-ui 3.158.1 → 3.159.0

package/dist/esm/components/UTTable/components/TableHeader/versions/V1/styles.module.scss

@@ -0,0 +1,46 @@
+@use '../../../../../../scss/variables/mediaQueries.module.scss' as *;
+
+.tableWrapperContainer {
+  display: flex;
+  flex-direction: column;
+}
+
+.wrapperHeader {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: 24px;
+
+  @media #{$desktop} {
+    padding-bottom: 32px;
+  }
+}
+
+.textElements {
+  align-items: center;
+  display: flex;
+  grid-gap: 16px;
+}
+
+.titleAndDescription {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 4px;
+}
+
+.selectedLabel {
+  margin-top: 4px;
+}
+
+.refreshAndActions {
+  align-items: center;
+  display: flex;
+  grid-gap: 8px;
+}
+
+.wrapperHeaderMenuItem {
+  align-items: center;
+  display: flex;
+  grid-gap: 8px;
+}

package/dist/esm/components/UTTable/components/TableHeader/versions/V1/utils.js

@@ -0,0 +1,25 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import UTIcon from '../../../../../UTIcon';
+export const reloadWindow = () => {
+  var _window;
+  (_window = window) === null || _window === void 0 || (_window = _window.location) === null || _window === void 0 || _window.reload();
+};
+export const getMenuItems = (actions, closeMenu) => actions.map(action => {
+  const {
+    Icon,
+    iconProps,
+    onClick
+  } = action;
+  return {
+    ...action,
+    Icon: Icon ? typeof Icon === 'string' ? () => /*#__PURE__*/React.createElement(UTIcon, _extends({
+      name: Icon
+    }, iconProps)) : Icon : undefined,
+    label: action.children,
+    onClick: () => {
+      onClick();
+      closeMenu();
+    }
+  };
+});

package/dist/esm/components/UTTable/components/TableRow/constants.js

@@ -0,0 +1,5 @@
+export const tippyProps = {
+  appendTo: () => document.body,
+  interactive: false,
+  maxWidth: 'none'
+};

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

@@ -0,0 +1,178 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import Checkbox from '@material-ui/core/Checkbox';
+import Radio from '@material-ui/core/Radio';
+import React, { memo } from 'react';
+import { arrayOf, bool, elementType, func, number, object, oneOfType, shape, string } from 'prop-types';
+import { isEmpty } from '@widergy/web-utils/lib/array';
+import ActionIcons from '../ActionIcons';
+import PrimaryAction from '../PrimaryAction';
+import UTTooltip from '../../../UTTooltip';
+import UTTouchableWithoutFeedback from '../../../UTTouchableWithoutFeedback';
+import { ID_CONSTANTS } from '../../../../constants/testIds';
+import { COLUMN_POSITION } from '../../constants';
+import { columnSizesType } from '../../types';
+import styles from './styles.module.scss';
+import { hasVisibleActions } from './utils';
+import { tippyProps } from './constants';
+const {
+  CELL
+} = ID_CONSTANTS;
+const TableRow = _ref => {
+  let {
+    actionDataTestId,
+    CellComponent,
+    cellDataTestId,
+    cellProps,
+    checkBoxClassName,
+    checkBoxOnChange,
+    checkBoxSelected,
+    className,
+    columnSizes,
+    columnsDefinition,
+    containerStyle,
+    disableRowSelection,
+    disabledRowSelectionTooltip,
+    exclusiveSelection,
+    fixedRowsLeftClassName,
+    fixedRowsRightClassName,
+    handleRowClick,
+    isResponsive,
+    pageRows,
+    removeFixedRowsDivisors,
+    rowClassName,
+    rowStyles,
+    selectable,
+    selectionComponentDataTestId,
+    tableSize
+  } = _ref;
+  const {
+    fixedLeftColumns = [],
+    fixedRightColumns = [],
+    primaryActions = [],
+    secondaryActions = [],
+    secondaryColumns = []
+  } = columnsDefinition;
+  const SelectionComponent = exclusiveSelection ? Radio : Checkbox;
+  const hasActionsRow = selectable || hasVisibleActions(secondaryActions, cellProps.rowData);
+  const selectableCellStyles = isResponsive ? "".concat(styles.secondaryActionsContainer, "\n      ").concat(cellProps.classes.responsiveCell, "\n      ").concat(hasActionsRow ? cellProps.classes.responsiveRowTopBorder : styles.hidden, "\n      ").concat(selectable ? styles.secondaryActionsSelectable : '', "\n      ") : "\n\t".concat(styles.fixedRowLeft, "\n\t").concat(fixedRowsLeftClassName, "\n\t").concat((removeFixedRowsDivisors || isEmpty(fixedLeftColumns)) && styles.disableBorderRight, "\n\t").concat(!selectable && isEmpty(fixedLeftColumns) && styles.cleanFixedColumns, "\n");
+  return /*#__PURE__*/React.createElement(UTTouchableWithoutFeedback, {
+    className: "\n        ".concat(styles.row, "\n        ").concat((!handleRowClick || isResponsive) && styles.noClick, "\n        ").concat(isResponsive && cellProps.classes.responsiveRow, "\n        ").concat(isResponsive && styles.responsiveRow, "\n        ").concat(className, "\n      "),
+    onClick: handleRowClick,
+    style: containerStyle
+  }, !isResponsive && /*#__PURE__*/React.createElement("div", {
+    className: styles.stickyRowBackground
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.rowBackground, " ").concat(rowClassName),
+    style: {
+      width: tableSize,
+      ...rowStyles.rowBackground
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: selectableCellStyles,
+    style: {
+      ...rowStyles.fixedRowsLeft,
+      width: isResponsive ? 'auto' : columnSizes.leftColumnsSize
+    }
+  }, selectable && /*#__PURE__*/React.createElement("div", {
+    className: "\n                ".concat(styles.checkBoxCell, "\n                ").concat(checkBoxSelected ? cellProps.classes.headerDecoratorSelected : cellProps.classes.headerDecoratorUnselected, "\n                ").concat(checkBoxClassName, "\n                ").concat(cellProps.classes.checkBoxCell, "\n                ").concat(isResponsive && checkBoxSelected && cellProps.classes.selectedResponsiveCell, "\n              "),
+    style: rowStyles.selectCell
+  }, /*#__PURE__*/React.createElement(UTTooltip, {
+    content: (disableRowSelection === null || disableRowSelection === void 0 ? void 0 : disableRowSelection(cellProps.rowData, pageRows)) && (disabledRowSelectionTooltip === null || disabledRowSelectionTooltip === void 0 ? void 0 : disabledRowSelectionTooltip(cellProps.rowData, pageRows)),
+    stringContentClassName: styles.disableSelectionTooltip,
+    tippyProps: tippyProps
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(SelectionComponent, {
+    classes: {
+      root: styles.checkBoxRoot,
+      colorPrimary: "".concat(styles.checkboxColorPrimary, " ").concat(cellProps.classes.checkBoxRoot),
+      checked: cellProps.classes.checkboxColorChecked
+    },
+    checked: checkBoxSelected,
+    color: "primary",
+    disabled: disableRowSelection && disableRowSelection(cellProps.rowData, pageRows),
+    inputProps: {
+      'data-testid': selectionComponentDataTestId
+    },
+    onChange: checkBoxOnChange
+  })))), fixedLeftColumns.map((column, i) => /*#__PURE__*/React.createElement(CellComponent, _extends({
+    actionDataTestId: actionDataTestId,
+    column: column,
+    columnSizes: columnSizes,
+    dataTestId: "".concat(cellDataTestId, ".fixedLeft.column_").concat(i, ".").concat(CELL),
+    key: "cell_".concat(column.key)
+  }, cellProps))), !isEmpty(secondaryActions) && /*#__PURE__*/React.createElement("div", {
+    className: styles.secondaryActions
+  }, secondaryActions.map(action => /*#__PURE__*/React.createElement(ActionIcons, {
+    classes: cellProps.classes,
+    column: action,
+    dataTestId: "".concat(actionDataTestId, ".tableRow."),
+    key: "action_".concat(action.key),
+    rowData: cellProps.rowData
+  })))), !isEmpty(secondaryColumns) && /*#__PURE__*/React.createElement("div", {
+    className: "\n              ".concat(styles.secondaryColumns, "\n              ").concat(isResponsive && checkBoxSelected && cellProps.classes.selectedResponsiveCell, "\n              ").concat(isResponsive && selectable && styles.hideTopBorder, "\n              ").concat(isResponsive && hasActionsRow && styles.fixBorderRadius, "\n            "),
+    style: {
+      width: isResponsive ? 'auto' : columnSizes.secondaryColumnsSize
+    }
+  }, secondaryColumns.map((column, index) => /*#__PURE__*/React.createElement(CellComponent, _extends({
+    actionDataTestId: actionDataTestId,
+    column: column,
+    columnSizes: columnSizes,
+    dataTestId: "".concat(cellDataTestId, ".secondary.column_").concat(index, ".").concat(CELL),
+    key: "cell_".concat(column.key)
+  }, cellProps, {
+    showBottomBorder: index === secondaryColumns.length - 1 && isEmpty(primaryActions),
+    rowStyles: rowStyles
+  }))), primaryActions.map((column, index) => /*#__PURE__*/React.createElement(PrimaryAction, _extends({
+    actionDataTestId: actionDataTestId,
+    column: column,
+    key: "cell_".concat(column.key)
+  }, cellProps, {
+    rowStyles: rowStyles,
+    showBottomBorder: index === primaryActions.length - 1,
+    showBottomRadius: index === primaryActions.length - 1
+  })))), !isResponsive && /*#__PURE__*/React.createElement("div", {
+    className: "\n            ".concat(styles.fixedRowRight, "\n            ").concat(fixedRowsRightClassName, "\n            ").concat((removeFixedRowsDivisors || isEmpty(fixedRightColumns)) && styles.disableBorderLeft, "\n            ").concat(isEmpty(fixedRightColumns) && styles.cleanFixedColumns, "\n          "),
+    style: {
+      ...rowStyles.fixedRowsRight,
+      width: columnSizes.rightColumnsSize
+    }
+  }, fixedRightColumns.map((column, i) => /*#__PURE__*/React.createElement(CellComponent, _extends({
+    actionDataTestId: actionDataTestId,
+    align: COLUMN_POSITION.RIGHT,
+    column: column,
+    columnSizes: columnSizes,
+    dataTestId: "".concat(cellDataTestId, ".fixedRight.column_").concat(i, ".").concat(CELL),
+    key: "cell_".concat(column.key)
+  }, cellProps)))));
+};
+TableRow.propTypes = {
+  actionDataTestId: string,
+  CellComponent: elementType,
+  cellDataTestId: string,
+  cellProps: object,
+  checkBoxClassName: string,
+  checkBoxOnChange: func,
+  checkBoxSelected: bool,
+  className: string,
+  columnsDefinition: shape({
+    fixedLeftColumns: arrayOf(object),
+    fixedRightColumns: arrayOf(object),
+    secondaryColumns: arrayOf(object)
+  }),
+  columnSizes: columnSizesType,
+  containerStyle: object,
+  disableRowSelection: oneOfType([func, bool]),
+  disabledRowSelectionTooltip: oneOfType([func, string]),
+  exclusiveSelection: bool,
+  fixedRowsLeftClassName: string,
+  fixedRowsRightClassName: string,
+  handleRowClick: func,
+  isResponsive: bool,
+  pageRows: arrayOf(object),
+  removeFixedRowsDivisors: bool,
+  rowClassName: string,
+  rowStyles: object,
+  selectable: bool,
+  selectionComponentDataTestId: string,
+  tableSize: oneOfType([number, string])
+};
+export default /*#__PURE__*/memo(TableRow);

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

@@ -0,0 +1,158 @@
+$selection-element-size: 42px;
+
+.row {
+  align-items: stretch;
+  box-sizing: border-box;
+  display: flex;
+  width: fit-content;
+
+  &:last-child {
+    margin-bottom: 0 !important;
+  }
+
+  .responsiveRow & {
+    margin-bottom: 24px !important;
+  }
+}
+
+.rowBorder {
+  border-bottom: 0;
+  border-left: 0;
+  border-top: 0;
+  position: sticky;
+  z-index: 2;
+}
+
+.disableClick {
+  pointer-events: none;
+}
+
+%fixedRow {
+  display: flex;
+  flex-shrink: 0;
+  position: sticky;
+  z-index: 1;
+}
+
+.fixedRowLeft {
+  @extend %fixedRow;
+  left: 0;
+
+  .responsiveRow & {
+    border: 1;
+  }
+}
+
+.fixedRowRight {
+  @extend %fixedRow;
+  margin-left: auto;
+  right: 0;
+}
+
+.disableBorderRight {
+  border-right: 0 !important;
+  box-shadow: none !important;
+}
+
+.disableBorderLeft {
+  border-left: 0 !important;
+  box-shadow: none !important;
+}
+
+.cleanFixedColumns {
+  background: transparent !important;
+  border-bottom: 0;
+}
+
+.checkBoxCell {
+  align-items: center;
+  display: flex;
+
+  .responsiveRow & {
+    &::before {
+      content: '';
+      height: 5px;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+      z-index: 0;
+    }
+  }
+}
+
+.checkBoxRoot {
+  height: $selection-element-size;
+  margin: -10px;
+  width: $selection-element-size;
+}
+
+.checkboxColorPrimary {
+  padding: 10px !important;
+
+  .responsiveRow & {
+    padding: 0 !important;
+  }
+}
+
+.secondaryColumns {
+  display: flex;
+
+  .responsiveRow & {
+    flex-direction: column;
+  }
+}
+
+.stickyRowBackground {
+  left: 0;
+  position: sticky;
+  width: 0;
+}
+
+.rowBackground {
+  box-sizing: border-box;
+  height: 100%;
+}
+
+.noClick {
+  cursor: default;
+}
+
+.secondaryActionsContainer {
+  border-bottom: 0;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.secondaryActionsSelectable {
+  justify-content: space-between;
+}
+
+.secondaryActions {
+  align-items: center;
+  display: flex;
+  justify-content: flex-end;
+  padding: 16px;
+}
+
+.hidden {
+  display: none !important;
+}
+
+.hideTopBorder {
+  :first-child {
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+  }
+}
+
+.disableSelectionTooltip {
+  text-align: center;
+}
+
+.fixBorderRadius {
+  & :first-child {
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+  }
+}

package/dist/esm/components/UTTable/components/TableRow/utils.js

@@ -0,0 +1,8 @@
+import { isEmpty } from '@widergy/web-utils/lib/array';
+export const hasVisibleActions = (secondaryActions, rowData) => !isEmpty(secondaryActions) && secondaryActions.some(secondaryAction => {
+  var _secondaryAction$acti;
+  return secondaryAction === null || secondaryAction === void 0 || (_secondaryAction$acti = secondaryAction.actions) === null || _secondaryAction$acti === void 0 ? void 0 : _secondaryAction$acti.some(action => {
+    var _action$isVisible;
+    return (_action$isVisible = action.isVisible) === null || _action$isVisible === void 0 ? void 0 : _action$isVisible.call(action, rowData);
+  });
+});

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

@@ -0,0 +1,49 @@
+export const COLUMN_SIZES = {
+  xsmall: 70,
+  small: 90,
+  medium: 120,
+  large: 160,
+  xlarge: 260,
+  xxlarge: 350
+};
+export const ROW_SIDE_PADDING = 16;
+export const CELL_SIDE_PADDING = 16;
+export const ROW_SPACING_NAMES = {
+  NONE: 'none',
+  SMALL: 'small',
+  MEDIUM: 'medium'
+};
+export const ROW_PADDING_NAMES = {
+  SMALL: 'small',
+  MEDIUM: 'medium'
+};
+export const ROW_SPACING = {
+  [ROW_SPACING_NAMES.NONE]: 0,
+  [ROW_SPACING_NAMES.SMALL]: 5,
+  [ROW_SPACING_NAMES.MEDIUM]: 10
+};
+export const ROW_PADDING = {
+  [ROW_PADDING_NAMES.SMALL]: 16,
+  [ROW_PADDING_NAMES.MEDIUM]: 24
+};
+export const COLUMN_POSITION = {
+  LEFT: 'left',
+  RIGHT: 'right'
+};
+export const ROWS_PER_PAGE = [10, 25, 50];
+export const ROWS_BORDER_SIZE = 1;
+export const TOTAL_ROWS_LABEL = 'resultados';
+export const TOTAL_ROW_LABEL = 'resultado';
+export const NO_RESULTS_LABEL = 'Aún no hay resultados';
+export const ROW_KEY = 'id';
+export const MAX_PAGINATION_ITEMS = 5;
+export const PAGINATION_LIMIT_DOUBLE_ARROWS = 10;
+export const CELL_TYPES = {
+  STATUS: 'status',
+  ACTION_ICONS: 'action-icons',
+  ACTION_BUTTON: 'action-button',
+  TEXT: 'text'
+};
+export const CELL_ACTION_TYPES = [CELL_TYPES.ACTION_ICONS, CELL_TYPES.ACTION_BUTTON];
+export const DEFAULT_TABLET_BREAKPOINT = 1024;
+export const DEFAULT_MOBILE_BREAKPOINT = 768;

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

@@ -0,0 +1,25 @@
+import { useRef, useLayoutEffect, useState, useCallback } from 'react';
+export const useResizeObserver = () => {
+  const [observerEntry, setObserverEntry] = useState({});
+  const [node, setNode] = useState(null);
+  const observer = useRef(null);
+  const disconnect = useCallback(() => {
+    var _observer$current;
+    return (_observer$current = observer.current) === null || _observer$current === void 0 ? void 0 : _observer$current.disconnect();
+  }, []);
+  const callback = _ref => {
+    let [entry] = _ref;
+    window.requestAnimationFrame(() => {
+      setObserverEntry(entry);
+    });
+  };
+  const observe = useCallback(() => {
+    observer.current = new ResizeObserver(callback);
+    if (node) observer.current.observe(node);
+  }, [node]);
+  useLayoutEffect(() => {
+    observe();
+    return () => disconnect();
+  }, [disconnect, observe]);
+  return [setNode, observerEntry];
+};