@carbon/react
Version:
React components for the Carbon Design System
83 lines (81 loc) • 2.93 kB
JavaScript
/**
* Copyright IBM Corp. 2016, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_usePrefix = require("../../internal/usePrefix.js");
const require_useIsomorphicEffect = require("../../internal/useIsomorphicEffect.js");
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let react_jsx_runtime = require("react/jsx-runtime");
//#region src/components/SkeletonText/SkeletonText.tsx
/**
* Copyright IBM Corp. 2016, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const randoms = [
.973051493507435,
.15334737213558558,
.5671034553053769
];
function getRandomInt(min, max, n) {
return Math.floor(randoms[n % 3] * (max - min + 1)) + min;
}
const SkeletonText = ({ paragraph = false, lineCount = 3, width = "100%", heading = false, className = "", ...rest }) => {
const prefix = require_usePrefix.usePrefix();
const skeletonTextClasses = (0, classnames.default)({
[`${prefix}--skeleton__text`]: true,
[`${prefix}--skeleton__heading`]: heading,
[className]: className
});
const widthNum = parseInt(width, 10);
const widthPx = width.includes("px");
const widthPercent = width.includes("%");
let lineCountNumber = 1;
if (paragraph) lineCountNumber = lineCount;
const refs = (0, react.useRef)([]);
require_useIsomorphicEffect.default(() => {
refs.current.map((item, j) => {
const randomPercentWidth = getRandomInt(0, 75, j) + "px";
const randomPxWidth = getRandomInt(Math.max(widthNum - 75, 0), widthNum, j) + "px";
if (item) if (widthPercent && paragraph) item.style.width = `calc(${width} - ${randomPercentWidth})`;
else if (widthPx && paragraph) item.style.width = randomPxWidth;
else item.style.width = width;
});
}, [
lineCountNumber,
paragraph,
refs,
width,
widthNum,
widthPercent,
widthPx
]);
const lines = [];
for (let i = 0; i < lineCountNumber; i++) lines.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
className: skeletonTextClasses,
ref: (el) => {
refs.current = [...refs.current, el];
},
...rest
}, i));
if (lineCountNumber !== 1) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: lines });
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: lines });
};
SkeletonText.propTypes = {
className: prop_types.default.string,
heading: prop_types.default.bool,
lineCount: prop_types.default.number,
paragraph: prop_types.default.bool,
width: prop_types.default.string
};
//#endregion
exports.default = SkeletonText;