tdesign-react/cjs/skeleton/Skeleton.js

TDesign Component for React

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

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var slicedToArray = require('../_chunks/dep-5cb0d66d.js');
var defineProperty = require('../_chunks/dep-0fe55884.js');
var toConsumableArray = require('../_chunks/dep-a7fe58de.js');
var React = require('react');
var classNames = require('classnames');
var helper = require('../_chunks/dep-779273e7.js');
var hooks_useConfig = require('../hooks/useConfig.js');
var _util_parseTNode = require('../_util/parseTNode.js');
var skeleton_defaultProps = require('./defaultProps.js');
var hooks_useDefaultProps = require('../hooks/useDefaultProps.js');
var isNumber = require('../_chunks/dep-bb3e9667.js');
require('../_chunks/dep-737b8bd8.js');
require('../_chunks/dep-b325182b.js');
require('../_chunks/dep-40583e7c.js');
require('../_chunks/dep-b304bc94.js');
require('../_chunks/dep-4ce0670e.js');
require('../_chunks/dep-bdafd287.js');
require('../_chunks/dep-3448f35f.js');
require('../config-provider/ConfigContext.js');
require('../_chunks/dep-17dea53e.js');
require('../_chunks/dep-a0cbf081.js');
require('dayjs');
require('../_chunks/dep-481a1ecc.js');
require('../_chunks/dep-474eb386.js');
require('../_chunks/dep-3b256bc0.js');
require('../_chunks/dep-b6a3ada9.js');
require('../_chunks/dep-967e785f.js');
require('../_chunks/dep-5c8525ea.js');
require('../_chunks/dep-735cd5b9.js');
require('../_chunks/dep-4d300b8f.js');
require('../_chunks/dep-3332ad6f.js');
require('../_chunks/dep-98783318.js');
require('../_chunks/dep-fc884a8e.js');
require('../_chunks/dep-008b21d4.js');
require('../_chunks/dep-9193eded.js');
require('../_chunks/dep-afe817f9.js');
require('../_chunks/dep-0b70c7ec.js');
require('../_chunks/dep-a1e3e59b.js');
require('../_chunks/dep-24ab8f68.js');
require('../_chunks/dep-753b7d52.js');
require('../_chunks/dep-05f87b98.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);

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._toConsumableArray([3, 2, 2, 2].map(function (value) {
    return Array(value).fill({
      type: "text",
      height: "30px"
    });
  })))
};
var Skeleton = function Skeleton(originalProps) {
  var props = hooks_useDefaultProps["default"](originalProps, skeleton_defaultProps.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 = hooks_useConfig["default"](),
    classPrefix = _useConfig.classPrefix;
  var name = "".concat(classPrefix, "-skeleton");
  var renderCols = function renderCols(_cols) {
    var getColItemClass = function getColItemClass(obj) {
      return classNames__default["default"]("".concat(name, "__col"), "".concat(name, "--type-").concat(obj.type || "text"), defineProperty._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 = helper.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.isNumber(_cols)) {
      cols = new Array(_cols).fill({
        type: "text"
      });
    } else {
      cols = [_cols];
    }
    return cols.map(function (item, index) {
      return /* @__PURE__ */React__default["default"].createElement("div", {
        key: index,
        className: getColItemClass(item),
        style: getColItemStyle(item)
      }, _util_parseTNode["default"](item.content));
    });
  };
  var renderRowCol = function renderRowCol(_rowCol) {
    var renderedRowCol = _rowCol || rowCol;
    return renderedRowCol.map(function (item, index) {
      return /* @__PURE__ */React__default["default"].createElement("div", {
        key: index,
        className: "".concat(name, "__row")
      }, renderCols(item));
    });
  };
  var _useState = React.useState(loading),
    _useState2 = slicedToArray._slicedToArray(_useState, 2),
    ctrlLoading = _useState2[0],
    setCtrlLoading = _useState2[1];
  React.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__default["default"].createElement(React__default["default"].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__default["default"].createElement("div", {
    className: className,
    style: style
  }, childrenContent);
};
Skeleton.displayName = "Skeleton";

exports["default"] = Skeleton;
//# sourceMappingURL=Skeleton.js.map