@dnb/eufemia/cjs/components/table/useTableHighlight.js

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useTableHighlight = useTableHighlight;
var _push = _interopRequireDefault(require("core-js-pure/stable/instance/push.js"));
var _react = require("react");
var _componentHelper = require("../../shared/component-helper.js");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function isHighlighted(cell) {
  return cell.classList.contains('dnb-table__td--highlight') || cell.classList.contains('dnb-table__th--highlight');
}
function applyHighlight(table) {
  const highlightedColumns = new Set();
  const thElements = table.querySelectorAll('thead th.dnb-table__th--highlight');
  for (const th of Array.from(thElements)) {
    highlightedColumns.add(th.cellIndex);
  }
  const allHighlighted = table.querySelectorAll('.dnb-table__th--highlight, .dnb-table__td--highlight');
  for (const cell of Array.from(allHighlighted)) {
    if (cell.getAttribute('aria-label') || cell.getAttribute('aria-labelledby')) {
      continue;
    }
    const row = cell.closest('tr');
    const rowHasLabel = row && (row.getAttribute('aria-label') || row.getAttribute('aria-labelledby'));
    if (rowHasLabel) {
      continue;
    }
    if (cell.tagName === 'TD' && highlightedColumns.has(cell.cellIndex)) {
      continue;
    }
    const tag = cell.tagName === 'TH' ? 'Th' : 'Td';
    (0, _componentHelper.warn)(`Table.${tag}: a highlighted cell should have an \`aria-label\` or \`aria-labelledby\` attribute to describe the highlight for screen readers.`);
  }
  const applied = [];
  for (let r = 0; r < table.rows.length; r++) {
    const row = table.rows[r];
    for (let c = 0; c < row.cells.length; c++) {
      const cell = row.cells[c];
      if (cell.tagName === 'TD' && highlightedColumns.has(c) && !cell.classList.contains('dnb-table__td--highlight')) {
        cell.classList.add('dnb-table__td--highlight');
        (0, _push.default)(applied).call(applied, {
          cell,
          classes: ['dnb-table__td--highlight']
        });
      }
    }
  }
  for (let r = 0; r < table.rows.length; r++) {
    const row = table.rows[r];
    const prevRow = r > 0 ? table.rows[r - 1] : null;
    for (let c = 0; c < row.cells.length; c++) {
      const cell = row.cells[c];
      const cellIsHighlighted = isHighlighted(cell);
      if (cellIsHighlighted) {
        const prevCell = prevRow?.cells[c];
        if (prevCell && isHighlighted(prevCell)) {
          cell.classList.add('dnb-table__td--highlight-border');
          (0, _push.default)(applied).call(applied, {
            cell,
            classes: ['dnb-table__td--highlight-border']
          });
        }
        continue;
      }
      const classes = [];
      const leftCell = row.cells[c - 1];
      if (leftCell && isHighlighted(leftCell)) {
        (0, _push.default)(classes).call(classes, 'dnb-table--highlight-neighbor-left');
      }
      const rightCell = row.cells[c + 1];
      if (rightCell && isHighlighted(rightCell)) {
        (0, _push.default)(classes).call(classes, 'dnb-table--highlight-neighbor-right');
      }
      const topCell = prevRow?.cells[c];
      if (topCell && isHighlighted(topCell)) {
        (0, _push.default)(classes).call(classes, 'dnb-table--highlight-neighbor-top');
      }
      if (classes.length > 0) {
        cell.classList.add(...classes);
        (0, _push.default)(applied).call(applied, {
          cell,
          classes
        });
      }
    }
  }
  return () => {
    for (const {
      cell,
      classes
    } of applied) {
      cell.classList.remove(...classes);
    }
  };
}
function useTableHighlight({
  enabled = true
} = {}) {
  const ref = (0, _react.useRef)(null);
  const getTable = (0, _react.useCallback)(() => {
    const el = ref.current;
    if (!el) {
      return null;
    }
    if (el.tagName === 'TABLE') {
      return el;
    }
    return el.querySelector('table');
  }, []);
  (0, _react.useEffect)(() => {
    const el = ref.current;
    if (!el || !enabled) {
      return undefined;
    }
    const table = getTable();
    if (!table) {
      return undefined;
    }
    return applyHighlight(table);
  });
  return ref;
}
//# sourceMappingURL=useTableHighlight.js.map