@dnb/eufemia/components/stat/Root.js

DNB Eufemia Design System UI Library

import _pushInstanceProperty from "core-js-pure/stable/instance/push.js";
import React from 'react';
import clsx from 'clsx';
import Space from "../space/Space.js";
import { warn } from "../../shared/component-helper.js";
import StatRootContext from "./StatRootContext.js";
import { jsx as _jsx } from "react/jsx-runtime";
function Root(props) {
  const {
    children,
    id = null,
    className = null,
    style = null,
    visualOrder = 'label-content',
    skeleton = null,
    ...rest
  } = props;
  if (!hasOnlySupportedChildren(children)) {
    warn('Stat.Root should only contain Stat.Label and Stat.Content.');
  }
  const hasLabel = hasRequiredLabel(children);
  if (!hasLabel) {
    warn('Stat.Root should contain a Stat.Label.');
  }
  if (hasLabel && !hasValidLabelContentOrder(children)) {
    warn('Stat.Root: every Stat.Content should be preceded by a Stat.Label for valid dt/dd pairing.');
  }
  return _jsx(StatRootContext, {
    value: {
      inRoot: true,
      skeleton
    },
    children: _jsx(Space, {
      element: "dl",
      id: id,
      style: style,
      className: clsx(`dnb-stat dnb-stat__root dnb-stat__root--${visualOrder}`, className),
      ...rest,
      children: children
    })
  });
}
Root._supportsSpacingProps = true;
export default Root;
function hasOnlySupportedChildren(children) {
  return React.Children.toArray(children).every(child => isSupportedChild(child));
}
function isSupportedChild(child) {
  var _child$type;
  if (!React.isValidElement(child)) {
    if (typeof child === 'string') {
      return child.trim().length === 0;
    }
    return true;
  }
  if (child.type === React.Fragment) {
    return hasOnlySupportedChildren(child.props.children);
  }
  const role = (_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type._statRole;
  return role === 'label' || role === 'content';
}
function hasRequiredLabel(children) {
  return React.Children.toArray(children).some(child => hasLabelChild(child));
}
function hasLabelChild(child) {
  var _child$type2;
  if (!React.isValidElement(child)) {
    return false;
  }
  if (child.type === React.Fragment) {
    return hasRequiredLabel(child.props.children);
  }
  const role = (_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2._statRole;
  return role === 'label';
}
function flattenRoles(children) {
  const roles = [];
  for (const child of React.Children.toArray(children)) {
    var _child$type3;
    if (!React.isValidElement(child)) {
      continue;
    }
    if (child.type === React.Fragment) {
      _pushInstanceProperty(roles).call(roles, ...flattenRoles(child.props.children));
      continue;
    }
    const role = (_child$type3 = child.type) === null || _child$type3 === void 0 ? void 0 : _child$type3._statRole;
    if (role === 'label' || role === 'content') {
      _pushInstanceProperty(roles).call(roles, role);
    }
  }
  return roles;
}
function hasValidLabelContentOrder(children) {
  const roles = flattenRoles(children);
  let hasSeenLabel = false;
  for (const role of roles) {
    if (role === 'label') {
      hasSeenLabel = true;
    } else if (role === 'content') {
      if (!hasSeenLabel) {
        return false;
      }
    }
  }
  return true;
}
//# sourceMappingURL=Root.js.map