@dnb/eufemia/cjs/components/skeleton/Skeleton.js

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _componentHelper = require("../../shared/component-helper.js");
var _defaults = require("../../shared/defaults.js");
var _Space = _interopRequireDefault(require("../space/Space.js"));
var _SpacingUtils = require("../space/SpacingUtils.js");
var _Context = _interopRequireDefault(require("../../shared/Context.js"));
var _Provider = _interopRequireDefault(require("../../shared/Provider.js"));
var _withComponentMarkers = _interopRequireDefault(require("../../shared/helpers/withComponentMarkers.js"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const skeletonDefaultProps = {
  show: null,
  skeleton: null,
  noAnimation: null,
  figure: null,
  ariaBusy: null,
  ariaReady: null,
  element: null,
  className: null,
  children: null
};
function Skeleton(props) {
  const context = _react.default.useContext(_Context.default);
  const [ariaLiveUpdate, setAriaLiveUpdate] = _react.default.useState(null);
  const ariaLiveUpdateTimeoutRef = _react.default.useRef(null);
  const prevShowRef = _react.default.useRef(props.show);
  const getProps = _react.default.useCallback((propsToExtend = props, ctx = context) => {
    return (0, _componentHelper.extendExistingPropsWithContext)({
      ...skeletonDefaultProps,
      ...(0, _componentHelper.removeUndefinedProps)({
        ...propsToExtend
      })
    }, skeletonDefaultProps, {
      skeleton: ctx.Skeleton || ctx.skeleton,
      noAnimation: ctx.skeletonNoAnimation
    }, ctx.getTranslation(propsToExtend).Skeleton);
  }, [props, context]);
  const updateAriaLive = _react.default.useCallback(() => {
    clearTimeout(ariaLiveUpdateTimeoutRef.current);
    ariaLiveUpdateTimeoutRef.current = setTimeout(() => {
      const {
        ariaBusy,
        ariaReady
      } = getProps();
      let newString = null;
      if (props.show) {
        newString = ariaBusy;
      } else {
        newString = ariaReady;
      }
      if (newString) {
        setAriaLiveUpdate(newString);
        ariaLiveUpdateTimeoutRef.current = setTimeout(() => {
          setAriaLiveUpdate(null);
        }, 1e3);
      }
    }, 1e3);
  }, [props.show, getProps]);
  _react.default.useEffect(() => {
    if (prevShowRef.current !== props.show) {
      updateAriaLive();
    }
    prevShowRef.current = props.show;
  }, [props.show, updateAriaLive]);
  _react.default.useEffect(() => {
    return () => {
      clearTimeout(ariaLiveUpdateTimeoutRef.current);
    };
  }, []);
  const extendedProps = getProps();
  const {
    show,
    noAnimation,
    figure,
    skeleton,
    ariaBusy,
    ariaReady,
    className,
    children,
    ...attributes
  } = extendedProps;
  const showSkeleton = typeof show === 'boolean' || typeof show === 'string' ? show : skeleton;
  const params = (0, _SpacingUtils.applySpacing)(extendedProps, {
    className: (0, _clsx.default)(figure ? 'dnb-skeleton__figure' : 'dnb-skeleton__root', className, showSkeleton && 'dnb-skeleton', noAnimation && 'dnb-skeleton--no-animation'),
    'aria-busy': showSkeleton,
    'aria-label': showSkeleton ? ariaBusy : undefined,
    lang: context.locale || _defaults.LOCALE,
    ...attributes
  });
  (0, _componentHelper.validateDOMAttributes)(props, params);
  return (0, _jsxRuntime.jsxs)(_Space.default, {
    ...params,
    children: [figure ? showSkeleton ? typeof figure === 'function' ? figure() : figure : children : (0, _jsxRuntime.jsx)(_Provider.default, {
      skeleton: showSkeleton,
      skeletonNoAnimation: noAnimation,
      children: children
    }), (0, _jsxRuntime.jsx)("span", {
      className: "dnb-sr-only",
      "aria-live": "assertive",
      children: ariaLiveUpdate
    })]
  });
}
var _default = exports.default = Skeleton;
function Exclude(props) {
  return (0, _jsxRuntime.jsx)(_Provider.default, {
    ...props,
    skeleton: false
  });
}
Skeleton.Exclude = Exclude;
(0, _withComponentMarkers.default)(Skeleton, {
  _supportsSpacingProps: true
});
//# sourceMappingURL=Skeleton.js.map