@novin-dev/formalite
Version:
Generate MUI form with few line of code
54 lines (47 loc) • 3.49 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var tslib = require('tslib');
var Skeleton = require('@mui/material/Skeleton');
var Grid = require('@mui/material/Grid');
var React = require('react');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var Skeleton__default = /*#__PURE__*/_interopDefaultLegacy(Skeleton);
var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var roundedRectSX = {
borderRadius: "8px",
};
var helperTextSX = {
marginLeft: "10px",
marginTop: "2px",
};
var TextViewSkeleton = function (props) {
return (React__default["default"].createElement(React__default["default"].Fragment, null,
React__default["default"].createElement(Skeleton__default["default"], { variant: "rectangular", animation: "wave", height: props.height || 56, sx: roundedRectSX }),
props.hasHelper && (React__default["default"].createElement(Skeleton__default["default"], { animation: "wave", width: 150, sx: helperTextSX }))));
};
var GroupViewSkeleton = function (_a) {
var hasHelper = _a.hasHelper;
return (React__default["default"].createElement(React__default["default"].Fragment, null,
React__default["default"].createElement(Skeleton__default["default"], { animation: "wave", width: 150 }),
React__default["default"].createElement(Grid__default["default"], { container: true, spacing: 1 },
React__default["default"].createElement(Grid__default["default"], { item: true, xs: 4 },
React__default["default"].createElement(Skeleton__default["default"], { variant: "rectangular", animation: "wave", sx: roundedRectSX })),
React__default["default"].createElement(Grid__default["default"], { item: true, xs: 4 },
React__default["default"].createElement(Skeleton__default["default"], { variant: "rectangular", animation: "wave", sx: roundedRectSX })),
React__default["default"].createElement(Grid__default["default"], { item: true, xs: 4 },
React__default["default"].createElement(Skeleton__default["default"], { variant: "rectangular", animation: "wave", sx: roundedRectSX }))),
hasHelper && React__default["default"].createElement(Skeleton__default["default"], { animation: "wave", width: 150, sx: helperTextSX })));
};
var AvatarViewSkeleton = function (_a) {
var hasHelper = _a.hasHelper, height = _a.height;
return (React__default["default"].createElement(Grid__default["default"], { sx: { display: "flex", alignItems: "center", flexDirection: "column" } },
React__default["default"].createElement(Skeleton__default["default"], { variant: "circular", animation: "wave", width: height, height: height }),
hasHelper && (React__default["default"].createElement(React__default["default"].Fragment, null,
React__default["default"].createElement(Skeleton__default["default"], { animation: "wave", width: 150, sx: tslib.__assign(tslib.__assign({}, helperTextSX), { marginTop: 2 }) }),
React__default["default"].createElement(Skeleton__default["default"], { animation: "wave", width: 100, sx: helperTextSX })))));
};
exports.AvatarViewSkeleton = AvatarViewSkeleton;
exports.GroupViewSkeleton = GroupViewSkeleton;
exports.TextViewSkeleton = TextViewSkeleton;
//# sourceMappingURL=SkeletonBase.js.map