@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
108 lines • 4.59 kB
JavaScript
;
/* eslint-disable @typescript-eslint/explicit-function-return-type */
Object.defineProperty(exports, "__esModule", { value: true });
exports.useDocumentListStyles = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var jotai_1 = require("jotai");
var react_1 = require("@fluentui/react");
var constants_1 = require("../../constants/constants");
var atoms_1 = require("../../jotai/atoms");
/* eslint-disable @typescript-eslint/no-empty-function */
var useDocumentListStyles = function () {
var appGlobalState = (0, jotai_1.useAtom)(atoms_1.globalState)[0];
var themeVariant = appGlobalState.themeVariant, containerWidth = appGlobalState.containerWidth, pageSize = appGlobalState.pageSize, files = appGlobalState.files;
var containerHeight = React.useMemo(function () {
return containerWidth && files.length
? (Math.ceil(pageSize !== null && pageSize !== void 0 ? pageSize : constants_1.DEFAULT_PAGE_SIZE) / Math.ceil(containerWidth / 180)) * 180
: 0;
}, [containerWidth, pageSize, files]);
var bootomContainerStyles = React.useMemo(function () {
return {
root: {
paddingLeft: 20,
paddingRight: 20,
paddingBottom: 20,
}
};
}, []);
var scollableContainerStyles = React.useMemo(function () {
return {
root: {
position: "relative",
height: containerHeight,
minHeight: 500,
overflowY: "auto",
overflowX: "hidden",
},
contentContainer: {
"::-webkit-scrollbar-thumb": {
backgroundColor: themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette.themeLight,
},
"::-webkit-scrollbar": {
height: 10,
width: 7,
},
"scrollbar-color": themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.semanticColors.bodyFrameBackground,
"scrollbar-width": "thin",
},
};
}, [themeVariant, containerHeight]);
var documentListStyles = React.useMemo(function () {
var _a;
return (0, react_1.mergeStyleSets)({
fileIconHeaderIcon: {
padding: 0,
fontSize: "16px",
},
fileIconCell: (0, react_1.mergeStyles)({
textAlign: "center",
selectors: {
"&:before": {
content: ".",
display: "inline-block",
verticalAlign: "middle",
height: "100%",
width: "0px",
visibility: "hidden",
},
},
}),
fileIconImg: (0, react_1.mergeStyles)({
verticalAlign: "middle",
maxHeight: "16px",
maxWidth: "16px",
}),
controlWrapper: (0, react_1.mergeStyles)({
display: "flex",
flexWrap: "wrap",
}),
selectionDetails: (0, react_1.mergeStyles)({
marginBottom: "20px",
}),
filesContainerGrid: (0, react_1.mergeStyles)({
width: "100%",
display: "grid",
gridTemplateColumns: "repeat(auto-fill, minmax(min(100%, 160px), 1fr))",
columnGap: "15px",
rowGap: 15,
}),
noDataFoundStyles: {
width: "300px",
height: "300px",
},
separator: (0, react_1.mergeStyles)({
height: "1px",
backgroundColor: (_a = themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette) === null || _a === void 0 ? void 0 : _a.neutralLight,
opacity: (themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.isInverted) ? "0.2" : "1",
width: "100%",
}),
documentList: (0, react_1.mergeStyles)({
width: "100%",
}),
});
}, [themeVariant]);
return { bootomContainerStyles: bootomContainerStyles, documentListStyles: documentListStyles, scollableContainerStyles: scollableContainerStyles };
};
exports.useDocumentListStyles = useDocumentListStyles;
//# sourceMappingURL=useDocumentListStyles.js.map