330 lines
9.3 KiB
JavaScript
330 lines
9.3 KiB
JavaScript
"use strict";
|
|
|
|
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.default = exports.TableSkeleton = exports.TableItemSkeleton = exports.DescriptionsSkeleton = void 0;
|
|
var _antd = require("antd");
|
|
var _useBreakpoint = _interopRequireDefault(require("antd/lib/grid/hooks/useBreakpoint"));
|
|
var _react = _interopRequireWildcard(require("react"));
|
|
var _List = require("../List");
|
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
var MediaQueryKeyEnum = {
|
|
xs: 1,
|
|
sm: 2,
|
|
md: 3,
|
|
lg: 3,
|
|
xl: 3,
|
|
xxl: 4
|
|
};
|
|
var DescriptionsLargeItemSkeleton = function DescriptionsLargeItemSkeleton(_ref) {
|
|
var active = _ref.active;
|
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
style: {
|
|
marginBlockStart: 32
|
|
},
|
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Skeleton.Button, {
|
|
active: active,
|
|
size: "small",
|
|
style: {
|
|
width: 100,
|
|
marginBlockEnd: 16
|
|
}
|
|
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
style: {
|
|
width: '100%',
|
|
justifyContent: 'space-between',
|
|
display: 'flex'
|
|
},
|
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
style: {
|
|
flex: 1,
|
|
marginInlineEnd: 24,
|
|
maxWidth: 300
|
|
},
|
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Skeleton, {
|
|
active: active,
|
|
paragraph: false,
|
|
title: {
|
|
style: {
|
|
marginBlockStart: 0
|
|
}
|
|
}
|
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Skeleton, {
|
|
active: active,
|
|
paragraph: false,
|
|
title: {
|
|
style: {
|
|
marginBlockStart: 8
|
|
}
|
|
}
|
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Skeleton, {
|
|
active: active,
|
|
paragraph: false,
|
|
title: {
|
|
style: {
|
|
marginBlockStart: 8
|
|
}
|
|
}
|
|
})]
|
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
style: {
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'center'
|
|
},
|
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
style: {
|
|
maxWidth: 300,
|
|
margin: 'auto'
|
|
},
|
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Skeleton, {
|
|
active: active,
|
|
paragraph: false,
|
|
title: {
|
|
style: {
|
|
marginBlockStart: 0
|
|
}
|
|
}
|
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Skeleton, {
|
|
active: active,
|
|
paragraph: false,
|
|
title: {
|
|
style: {
|
|
marginBlockStart: 8
|
|
}
|
|
}
|
|
})]
|
|
})
|
|
})]
|
|
})]
|
|
});
|
|
};
|
|
var DescriptionsItemSkeleton = function DescriptionsItemSkeleton(_ref2) {
|
|
var size = _ref2.size,
|
|
active = _ref2.active;
|
|
var defaultCol = (0, _react.useMemo)(function () {
|
|
return {
|
|
lg: true,
|
|
md: true,
|
|
sm: false,
|
|
xl: false,
|
|
xs: false,
|
|
xxl: false
|
|
};
|
|
}, []);
|
|
var col = (0, _useBreakpoint.default)() || defaultCol;
|
|
var colSize = Object.keys(col).filter(function (key) {
|
|
return col[key] === true;
|
|
})[0] || 'md';
|
|
var arraySize = size === undefined ? MediaQueryKeyEnum[colSize] || 3 : size;
|
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
style: {
|
|
width: '100%',
|
|
justifyContent: 'space-between',
|
|
display: 'flex'
|
|
},
|
|
children: new Array(arraySize).fill(null).map(function (_, index) {
|
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
style: {
|
|
flex: 1,
|
|
paddingInlineStart: index === 0 ? 0 : 24,
|
|
paddingInlineEnd: index === arraySize - 1 ? 0 : 24
|
|
},
|
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Skeleton, {
|
|
active: active,
|
|
paragraph: false,
|
|
title: {
|
|
style: {
|
|
marginBlockStart: 0
|
|
}
|
|
}
|
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Skeleton, {
|
|
active: active,
|
|
paragraph: false,
|
|
title: {
|
|
style: {
|
|
marginBlockStart: 8
|
|
}
|
|
}
|
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Skeleton, {
|
|
active: active,
|
|
paragraph: false,
|
|
title: {
|
|
style: {
|
|
marginBlockStart: 8
|
|
}
|
|
}
|
|
})]
|
|
}, index);
|
|
})
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Table 的子项目骨架屏
|
|
*
|
|
* @param param0
|
|
*/
|
|
var TableItemSkeleton = exports.TableItemSkeleton = function TableItemSkeleton(_ref3) {
|
|
var active = _ref3.active,
|
|
_ref3$header = _ref3.header,
|
|
header = _ref3$header === void 0 ? false : _ref3$header;
|
|
var defaultCol = (0, _react.useMemo)(function () {
|
|
return {
|
|
lg: true,
|
|
md: true,
|
|
sm: false,
|
|
xl: false,
|
|
xs: false,
|
|
xxl: false
|
|
};
|
|
}, []);
|
|
var col = (0, _useBreakpoint.default)() || defaultCol;
|
|
var colSize = Object.keys(col).filter(function (key) {
|
|
return col[key] === true;
|
|
})[0] || 'md';
|
|
var arraySize = MediaQueryKeyEnum[colSize] || 3;
|
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
style: {
|
|
display: 'flex',
|
|
background: header ? 'rgba(0,0,0,0.02)' : 'none',
|
|
padding: '24px 8px'
|
|
},
|
|
children: [new Array(arraySize).fill(null).map(function (_, index) {
|
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
style: {
|
|
flex: 1,
|
|
paddingInlineStart: header && index === 0 ? 0 : 20,
|
|
paddingInlineEnd: 32
|
|
},
|
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Skeleton, {
|
|
active: active,
|
|
paragraph: false,
|
|
title: {
|
|
style: {
|
|
margin: 0,
|
|
height: 24,
|
|
width: header ? '75px' : '100%'
|
|
}
|
|
}
|
|
})
|
|
}, index);
|
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
style: {
|
|
flex: 3,
|
|
paddingInlineStart: 32
|
|
},
|
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Skeleton, {
|
|
active: active,
|
|
paragraph: false,
|
|
title: {
|
|
style: {
|
|
margin: 0,
|
|
height: 24,
|
|
width: header ? '75px' : '100%'
|
|
}
|
|
}
|
|
})
|
|
})]
|
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_List.Line, {
|
|
padding: "0px 0px"
|
|
})]
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Table 骨架屏
|
|
*
|
|
* @param param0
|
|
*/
|
|
var TableSkeleton = exports.TableSkeleton = function TableSkeleton(_ref4) {
|
|
var active = _ref4.active,
|
|
_ref4$size = _ref4.size,
|
|
size = _ref4$size === void 0 ? 4 : _ref4$size;
|
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Card, {
|
|
bordered: false,
|
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Skeleton.Button, {
|
|
active: active,
|
|
size: "small",
|
|
style: {
|
|
width: 100,
|
|
marginBlockEnd: 16
|
|
}
|
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(TableItemSkeleton, {
|
|
header: true,
|
|
active: active
|
|
}), new Array(size).fill(null).map(function (_, index) {
|
|
return (
|
|
/*#__PURE__*/
|
|
// eslint-disable-next-line react/no-array-index-key
|
|
(0, _jsxRuntime.jsx)(TableItemSkeleton, {
|
|
active: active
|
|
}, index)
|
|
);
|
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
style: {
|
|
display: 'flex',
|
|
justifyContent: 'flex-end',
|
|
paddingBlockStart: 16
|
|
},
|
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Skeleton, {
|
|
active: active,
|
|
paragraph: false,
|
|
title: {
|
|
style: {
|
|
margin: 0,
|
|
height: 32,
|
|
float: 'right',
|
|
maxWidth: '630px'
|
|
}
|
|
}
|
|
})
|
|
})]
|
|
});
|
|
};
|
|
var DescriptionsSkeleton = exports.DescriptionsSkeleton = function DescriptionsSkeleton(_ref5) {
|
|
var active = _ref5.active;
|
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Card, {
|
|
bordered: false,
|
|
style: {
|
|
borderStartEndRadius: 0,
|
|
borderTopLeftRadius: 0
|
|
},
|
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Skeleton.Button, {
|
|
active: active,
|
|
size: "small",
|
|
style: {
|
|
width: 100,
|
|
marginBlockEnd: 16
|
|
}
|
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(DescriptionsItemSkeleton, {
|
|
active: active
|
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(DescriptionsLargeItemSkeleton, {
|
|
active: active
|
|
})]
|
|
});
|
|
};
|
|
var DescriptionsPageSkeleton = function DescriptionsPageSkeleton(_ref6) {
|
|
var _ref6$active = _ref6.active,
|
|
active = _ref6$active === void 0 ? true : _ref6$active,
|
|
pageHeader = _ref6.pageHeader,
|
|
list = _ref6.list;
|
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
style: {
|
|
width: '100%'
|
|
},
|
|
children: [pageHeader !== false && /*#__PURE__*/(0, _jsxRuntime.jsx)(_List.PageHeaderSkeleton, {
|
|
active: active
|
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(DescriptionsSkeleton, {
|
|
active: active
|
|
}), list !== false && /*#__PURE__*/(0, _jsxRuntime.jsx)(_List.Line, {}), list !== false && /*#__PURE__*/(0, _jsxRuntime.jsx)(TableSkeleton, {
|
|
active: active,
|
|
size: list
|
|
})]
|
|
});
|
|
};
|
|
var _default = exports.default = DescriptionsPageSkeleton; |