@dnb/eufemia/components/table/Table.js

DNB Eufemia Design System UI Library

"use client";

import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
const _excluded = ["className", "children", "size", "skeleton", "variant", "sticky", "stickyOffset", "fixed", "border", "outline", "accordion", "mode", "accordionChevronPlacement", "collapseAllHandleRef"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React, { useEffect } from 'react';
import classnames from 'classnames';
import Context from '../../shared/Context';
import Provider from '../../shared/Provider';
import { createSpacingClasses } from '../space/SpacingHelper';
import { createSkeletonClass } from '../skeleton/SkeletonHelper';
import { extendPropsWithContext, validateDOMAttributes } from '../../shared/component-helper';
import ScrollView from './TableScrollView';
import { TableContext } from './TableContext';
import { useStickyHeader } from './TableStickyHeader';
import { useHandleOddEven } from './TableTr';
export { ScrollView };
export const defaultProps = {
  size: 'large',
  variant: 'generic'
};
const Table = componentProps => {
  const context = React.useContext(Context);
  const allProps = extendPropsWithContext(componentProps, defaultProps, context === null || context === void 0 ? void 0 : context.Table, {
    skeleton: context === null || context === void 0 ? void 0 : context.skeleton
  });
  const {
      className,
      children,
      size,
      skeleton,
      variant,
      sticky,
      stickyOffset,
      fixed,
      border,
      outline,
      accordion,
      mode,
      accordionChevronPlacement,
      collapseAllHandleRef
    } = allProps,
    props = _objectWithoutProperties(allProps, _excluded);
  const {
    elementRef
  } = useStickyHeader(allProps);
  const {
    trCountRef,
    rerenderAlias
  } = useHandleOddEven({
    children
  });
  const collapseTrCallbacks = React.useRef([]);
  useEffect(() => {
    if (collapseAllHandleRef) {
      collapseAllHandleRef.current = () => {
        collapseTrCallbacks.current.forEach(callback => callback());
      };
    }
  }, [collapseAllHandleRef]);
  const skeletonClasses = createSkeletonClass('font', skeleton, context);
  const spacingClasses = createSpacingClasses(props);
  validateDOMAttributes(allProps, props);
  return React.createElement(Provider, {
    skeleton: Boolean(skeleton)
  }, React.createElement(TableContext.Provider, {
    value: {
      trCountRef,
      rerenderAlias,
      collapseTrCallbacks,
      allProps: _objectSpread(_objectSpread({}, allProps), context.getTranslation(componentProps).Table)
    }
  }, React.createElement("table", _extends({
    className: classnames('dnb-table', spacingClasses, skeletonClasses, className, variant && `dnb-table__variant--${variant}`, size && `dnb-table__size--${size}`, sticky && 'dnb-table--sticky', fixed && 'dnb-table--fixed', border && 'dnb-table--border', outline && 'dnb-table--outline', accordion && 'dnb-table--accordion', {
      'accordion': 'dnb-table--accordion',
      'navigation': 'dnb-table--navigation'
    }[mode]),
    ref: elementRef
  }, props), children)));
};
Table._supportsSpacingProps = true;
export default Table;
Table.ScrollView = ScrollView;
//# sourceMappingURL=Table.js.map