tdesign-react/es/skeleton/Skeleton.js

TDesign Component for React

/**
 * tdesign v1.13.2
 * (c) 2025 tdesign
 * @license MIT
 */

import { _ as _slicedToArray } from '../_chunks/dep-118954e6.js';
import { _ as _defineProperty } from '../_chunks/dep-8618a2f1.js';
import { _ as _toConsumableArray } from '../_chunks/dep-132961ab.js';
import React, { useState, useEffect } from 'react';
import { isNumber } from 'lodash-es';
import classNames from 'classnames';
import useConfig from '../hooks/useConfig.js';
import { pxCompat } from '../_util/helper.js';
import parseTNode from '../_util/parseTNode.js';
import { skeletonDefaultProps } from './defaultProps.js';
import useDefaultProps from '../hooks/useDefaultProps.js';
import '../_chunks/dep-61f5e3d1.js';
import '../_chunks/dep-c37cc2fd.js';
import '../config-provider/ConfigContext.js';
import '../locale/zh_CN.js';
import '../_chunks/dep-ab140eb0.js';
import 'dayjs';
import '../_chunks/dep-95bd7102.js';
import '../_chunks/dep-30ed04a0.js';
import '../_chunks/dep-4e5b1475.js';
import '../_chunks/dep-d104053f.js';

var ThemeMap = {
  text: [1],
  avatar: [{
    type: "circle",
    size: "56px"
  }],
  paragraph: [1, 1, {
    width: "70%"
  }],
  "avatar-text": [[{
    type: "circle"
  }, {
    type: "text",
    height: "32px"
  }]],
  tab: [{
    height: "30px"
  }, {
    height: "200px"
  }],
  article: [{
    type: "rect",
    height: "30px",
    width: "100%"
  }, {
    type: "rect",
    height: "200px",
    width: "100%"
  }].concat(_toConsumableArray([3, 2, 2, 2].map(function (value) {
    return Array(value).fill({
      type: "text",
      height: "30px"
    });
  })))
};
var Skeleton = function Skeleton(originalProps) {
  var props = useDefaultProps(originalProps, skeletonDefaultProps);
  var animation = props.animation,
    loading = props.loading,
    rowCol = props.rowCol,
    theme = props.theme,
    className = props.className,
    style = props.style,
    _props$delay = props.delay,
    delay = _props$delay === void 0 ? 0 : _props$delay,
    children = props.children;
  var _useConfig = useConfig(),
    classPrefix = _useConfig.classPrefix;
  var name = "".concat(classPrefix, "-skeleton");
  var renderCols = function renderCols(_cols) {
    var getColItemClass = function getColItemClass(obj) {
      return classNames("".concat(name, "__col"), "".concat(name, "--type-").concat(obj.type || "text"), _defineProperty({}, "".concat(name, "--animation-").concat(animation), animation));
    };
    var getColItemStyle = function getColItemStyle(obj) {
      var styleName = ["width", "height", "marginRight", "marginLeft", "margin", "size", "background", "backgroundColor"];
      var style2 = {};
      styleName.forEach(function (name2) {
        if (name2 in obj) {
          var px = pxCompat(obj[name2]);
          if (name2 === "size") {
            var _ref = [px, px];
            style2.width = _ref[0];
            style2.height = _ref[1];
          } else {
            style2[name2] = px;
          }
        }
      });
      return style2;
    };
    var cols = [];
    if (Array.isArray(_cols)) {
      cols = _cols;
    } else if (isNumber(_cols)) {
      cols = new Array(_cols).fill({
        type: "text"
      });
    } else {
      cols = [_cols];
    }
    return cols.map(function (item, index) {
      return /* @__PURE__ */React.createElement("div", {
        key: index,
        className: getColItemClass(item),
        style: getColItemStyle(item)
      }, parseTNode(item.content));
    });
  };
  var renderRowCol = function renderRowCol(_rowCol) {
    var renderedRowCol = _rowCol || rowCol;
    return renderedRowCol.map(function (item, index) {
      return /* @__PURE__ */React.createElement("div", {
        key: index,
        className: "".concat(name, "__row")
      }, renderCols(item));
    });
  };
  var _useState = useState(loading),
    _useState2 = _slicedToArray(_useState, 2),
    ctrlLoading = _useState2[0],
    setCtrlLoading = _useState2[1];
  useEffect(function () {
    if (delay > 0 && !loading) {
      var timeout = setTimeout(function () {
        setCtrlLoading(loading);
      }, delay);
      return function () {
        return clearTimeout(timeout);
      };
    }
    setCtrlLoading(loading);
  }, [delay, loading]);
  if (!ctrlLoading) {
    return /* @__PURE__ */React.createElement(React.Fragment, null, children);
  }
  var childrenContent = [];
  if (theme && !rowCol) {
    childrenContent.push(renderRowCol(ThemeMap[theme]));
  }
  if (rowCol) {
    childrenContent.push(renderRowCol(rowCol));
  }
  if (!theme && !rowCol) {
    childrenContent.push(renderRowCol([1, 1, 1, {
      width: "70%"
    }]));
  }
  return /* @__PURE__ */React.createElement("div", {
    className: className,
    style: style
  }, childrenContent);
};
Skeleton.displayName = "Skeleton";

export { Skeleton as default };
//# sourceMappingURL=Skeleton.js.map