tdesign-react
Version:
TDesign Component for React
200 lines (192 loc) • 6.48 kB
JavaScript
/**
* tdesign v1.11.6
* (c) 2025 tdesign
* @license MIT
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
var slicedToArray = require('../_chunks/dep-48e1db8c.js');
var defineProperty = require('../_chunks/dep-56a79f9c.js');
var toConsumableArray = require('../_chunks/dep-f500d2b7.js');
var React = require('react');
var classNames = require('classnames');
var hooks_useConfig = require('../hooks/useConfig.js');
var _util_helper = require('../_util/helper.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-82a8b824.js');
require('../_chunks/dep-6b4846c3.js');
require('../_chunks/dep-5b35215f.js');
require('../config-provider/ConfigContext.js');
require('../_chunks/dep-fa2097c1.js');
require('../_chunks/dep-f6f16bd8.js');
require('dayjs');
require('../_chunks/dep-59bb0827.js');
require('../_chunks/dep-68f8743f.js');
require('../_chunks/dep-a8d0483a.js');
require('../_chunks/dep-6e34d7d7.js');
require('../_chunks/dep-d45b3350.js');
require('../_chunks/dep-ec3beb8d.js');
require('../_chunks/dep-b7e21379.js');
require('../_chunks/dep-73937edb.js');
require('../_chunks/dep-8d4e8f1c.js');
require('../_chunks/dep-1d022321.js');
require('../_chunks/dep-ab08e148.js');
require('../_chunks/dep-9df70348.js');
require('../_chunks/dep-af16359b.js');
require('../_chunks/dep-e11afe29.js');
require('../_chunks/dep-346ac5f4.js');
require('../_chunks/dep-612ec5c9.js');
require('../_chunks/dep-4d25d6c0.js');
require('../_chunks/dep-496c0353.js');
require('../_chunks/dep-1f530d81.js');
require('../_chunks/dep-a4bc3144.js');
require('../_chunks/dep-535a3b69.js');
require('../_chunks/dep-d11b328f.js');
require('../_chunks/dep-da07bc8c.js');
require('../_chunks/dep-3b342ce7.js');
require('../_chunks/dep-dc26f226.js');
require('../_chunks/dep-02a1b59c.js');
require('../_chunks/dep-35df84a1.js');
require('../_chunks/dep-fe42fca8.js');
require('../_chunks/dep-4546f1ae.js');
require('../_chunks/dep-fca46a1f.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 = _util_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