@novin-dev/formalite
Version:
Generate MUI form with few line of code
42 lines (39 loc) • 2.29 kB
JavaScript
import { __assign } from 'tslib';
import Skeleton from '@mui/material/Skeleton';
import Grid from '@mui/material/Grid';
import React from 'react';
var roundedRectSX = {
borderRadius: "8px",
};
var helperTextSX = {
marginLeft: "10px",
marginTop: "2px",
};
var TextViewSkeleton = function (props) {
return (React.createElement(React.Fragment, null,
React.createElement(Skeleton, { variant: "rectangular", animation: "wave", height: props.height || 56, sx: roundedRectSX }),
props.hasHelper && (React.createElement(Skeleton, { animation: "wave", width: 150, sx: helperTextSX }))));
};
var GroupViewSkeleton = function (_a) {
var hasHelper = _a.hasHelper;
return (React.createElement(React.Fragment, null,
React.createElement(Skeleton, { animation: "wave", width: 150 }),
React.createElement(Grid, { container: true, spacing: 1 },
React.createElement(Grid, { item: true, xs: 4 },
React.createElement(Skeleton, { variant: "rectangular", animation: "wave", sx: roundedRectSX })),
React.createElement(Grid, { item: true, xs: 4 },
React.createElement(Skeleton, { variant: "rectangular", animation: "wave", sx: roundedRectSX })),
React.createElement(Grid, { item: true, xs: 4 },
React.createElement(Skeleton, { variant: "rectangular", animation: "wave", sx: roundedRectSX }))),
hasHelper && React.createElement(Skeleton, { animation: "wave", width: 150, sx: helperTextSX })));
};
var AvatarViewSkeleton = function (_a) {
var hasHelper = _a.hasHelper, height = _a.height;
return (React.createElement(Grid, { sx: { display: "flex", alignItems: "center", flexDirection: "column" } },
React.createElement(Skeleton, { variant: "circular", animation: "wave", width: height, height: height }),
hasHelper && (React.createElement(React.Fragment, null,
React.createElement(Skeleton, { animation: "wave", width: 150, sx: __assign(__assign({}, helperTextSX), { marginTop: 2 }) }),
React.createElement(Skeleton, { animation: "wave", width: 100, sx: helperTextSX })))));
};
export { AvatarViewSkeleton, GroupViewSkeleton, TextViewSkeleton };
//# sourceMappingURL=SkeletonBase.js.map