tdesign-react
Version:
TDesign Component for React
200 lines (192 loc) • 6.48 kB
JavaScript
/**
* tdesign v1.15.1
* (c) 2025 tdesign
* @license MIT
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
var slicedToArray = require('../_chunks/dep-8e4d656d.js');
var defineProperty = require('../_chunks/dep-0006fcfa.js');
var toConsumableArray = require('../_chunks/dep-e4e1901e.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-2ffa3ff1.js');
require('../_chunks/dep-00b49251.js');
require('../_chunks/dep-667ac7af.js');
require('../config-provider/ConfigContext.js');
require('../_chunks/dep-1df1dad8.js');
require('../_chunks/dep-5b5ab11b.js');
require('dayjs');
require('../_chunks/dep-f32c03f1.js');
require('../_chunks/dep-31c4bc3d.js');
require('../_chunks/dep-eea2872a.js');
require('../_chunks/dep-25585736.js');
require('../_chunks/dep-62e73936.js');
require('../_chunks/dep-64577888.js');
require('../_chunks/dep-71455db7.js');
require('../_chunks/dep-9e5a468d.js');
require('../_chunks/dep-ec8d2dca.js');
require('../_chunks/dep-fc596d16.js');
require('../_chunks/dep-f26edb7b.js');
require('../_chunks/dep-f33c1939.js');
require('../_chunks/dep-21ece627.js');
require('../_chunks/dep-25e4aa84.js');
require('../_chunks/dep-e1fbe1c3.js');
require('../_chunks/dep-df2b541f.js');
require('../_chunks/dep-edd366db.js');
require('../_chunks/dep-a56c4939.js');
require('../_chunks/dep-6c297e20.js');
require('../_chunks/dep-b7ad4d54.js');
require('../_chunks/dep-a2cb9299.js');
require('../_chunks/dep-f981815b.js');
require('../_chunks/dep-8fa3a4c2.js');
require('../_chunks/dep-840b1644.js');
require('../_chunks/dep-255ceed8.js');
require('../_chunks/dep-79629634.js');
require('../_chunks/dep-66114ce9.js');
require('../_chunks/dep-62d1dd66.js');
require('../_chunks/dep-7a148045.js');
require('../_chunks/dep-59671c87.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