@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
188 lines • 6.19 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useListItemCommentsStyles = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var Styling_1 = require("@fluentui/react/lib/Styling");
var common_1 = require("../../common");
var constants_1 = require("../../common/constants");
var useListItemCommentsStyles = function () {
var _a = React.useContext(common_1.AppContext), theme = _a.theme, numberCommentsPerPage = _a.numberCommentsPerPage;
var fluentTheme = (0, Styling_1.getTheme)();
// Calc Height List tiles Container Based on number Items per Page
var tilesHeight = numberCommentsPerPage
? (numberCommentsPerPage < 5 ? 5 : numberCommentsPerPage) * constants_1.TILE_HEIGHT + 35
: 7 * constants_1.TILE_HEIGHT;
var itemContainerStyles = {
root: {
paddingTop: 0,
paddingLeft: 20,
paddingRight: 20,
paddingBottom: 20,
},
};
var buttonsContainerStyles = {
root: {
position: 'absolute',
top: 0,
right: 0,
},
};
var userListContainerStyles = {
root: { paddingLeft: 2, paddingRight: 2, paddingBottom: 2, minWidth: 206 },
};
var renderUserContainerStyles = {
root: {
paddingTop: 5,
paddingBottom: 5,
paddingLeft: 10,
paddingRight: 10,
},
};
var documentCardStyles = {
root: {
maxWidth: "initial",
marginBottom: 7,
width: "100%",
backgroundColor: theme.neutralLighterAlt,
userSelect: "text",
boxSizing: "border-box",
":hover": {
borderColor: theme.themePrimary,
borderWidth: 1,
},
},
};
var documentCardHighlightedStyles = {
root: {
maxWidth: "initial",
marginBottom: 7,
width: "100%",
backgroundColor: theme.themeLighter,
userSelect: "text",
border: "solid 3px " + theme.themePrimary,
boxSizing: "border-box",
":hover": {
borderColor: theme.themePrimary,
borderWidth: 1,
},
},
};
var documentCardDeleteStyles = {
root: {
marginBottom: 5,
backgroundColor: theme.neutralLighterAlt,
boxSizing: "border-box",
":hover": {
borderColor: theme.themePrimary,
borderWidth: 1,
},
},
};
var documentCardUserStyles = {
root: {
marginTop: 2,
backgroundColor: theme === null || theme === void 0 ? void 0 : theme.white,
boxShadow: "0 5px 15px rgba(50, 50, 90, .1)",
boxSizing: "border-box",
':hover': {
borderColor: theme.themePrimary,
backgroundColor: theme.neutralLighterAlt,
borderWidth: 1,
},
},
};
var configurationListClasses = (0, Styling_1.mergeStyleSets)({
listIcon: (0, Styling_1.mergeStyles)({
fontSize: 18,
width: 18,
height: 18,
color: theme.themePrimary,
}),
nolistItemIcon: (0, Styling_1.mergeStyles)({
fontSize: 28,
width: 28,
height: 28,
color: theme.themePrimary,
}),
divContainer: {
display: 'block',
},
titlesContainer: {
width: "100%",
height: tilesHeight,
marginBottom: 10,
display: 'flex',
marginTop: 15,
overflow: 'auto',
'&::-webkit-scrollbar-thumb': {
backgroundColor: theme.neutralLighter,
},
'&::-webkit-scrollbar': {
width: 5,
},
},
});
var contentStyles = (0, Styling_1.mergeStyleSets)({
container: {
display: 'flex',
flexFlow: 'column nowrap',
alignItems: 'stretch',
},
header: [
// eslint-disable-next-line @typescript-eslint/no-deprecated
fluentTheme.fonts.xLargePlus,
{
flex: '1 1 auto',
borderTop: "4px solid ".concat(theme.themePrimary),
color: theme.neutralPrimary,
display: 'flex',
alignItems: 'center',
fontWeight: Styling_1.FontWeights.semibold,
padding: '12px 12px 14px 24px',
},
],
heading: {
color: theme.neutralPrimary,
fontWeight: Styling_1.FontWeights.semibold,
fontSize: 'inherit',
margin: '0',
},
body: {
flex: '4 4 auto',
padding: '0 24px 24px 24px',
overflowY: 'hidden',
selectors: {
p: { margin: '14px 0' },
'p:first-child': { marginTop: 0 },
'p:last-child': { marginBottom: 0 },
},
},
});
var iconButtonStyles = {
root: {
color: theme.neutralPrimary,
marginLeft: 'auto',
marginTop: '4px',
marginRight: '2px',
},
rootHovered: {
color: theme.neutralDark,
},
};
return {
itemContainerStyles: itemContainerStyles,
buttonsContainerStyles: buttonsContainerStyles,
userListContainerStyles: userListContainerStyles,
renderUserContainerStyles: renderUserContainerStyles,
documentCardStyles: documentCardStyles,
documentCardDeleteStyles: documentCardDeleteStyles,
documentCardHighlightedStyles: documentCardHighlightedStyles,
documentCardUserStyles: documentCardUserStyles,
configurationListClasses: configurationListClasses,
contentStyles: contentStyles,
iconButtonStyles: iconButtonStyles,
};
};
exports.useListItemCommentsStyles = useListItemCommentsStyles;
//# sourceMappingURL=useListItemCommentsStyles.js.map