@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
178 lines • 7.95 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useDayViewStyles = void 0;
var css_1 = require("@emotion/css");
var react_components_1 = require("@fluentui/react-components");
var useDayViewStyles = function () {
var styles = {
container: (0, css_1.css)({
display: 'flex',
flexDirection: 'column',
width: 'calc(100% - 40px)',
height: '100vh', // Make the container take the full viewport height
overflow: 'hidden', // Prevent window scrolling
padding: '20px',
}),
header: (0, css_1.css)({
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: '16px',
borderBottom: "1px solid ".concat(react_components_1.tokens.colorNeutralStroke1),
}),
dayGrid: (0, css_1.css)({
display: 'grid',
gridTemplateColumns: '80px 1fr',
gridTemplateRows: '50px 40px repeat(48, 33px)',
height: 'calc(100vh - 100px)',
overflowY: 'auto',
border: "1px solid ".concat(react_components_1.tokens.colorNeutralStroke1),
maxHeight: 'fit-content',
scrollbarWidth: 'thin',
scrollbarColor: "".concat(react_components_1.tokens.colorBrandBackground, " ").concat(react_components_1.tokens.colorNeutralBackground1),
'&::-webkit-scrollbar': {
width: '8px',
},
'&::-webkit-scrollbar-track': {
background: react_components_1.tokens.colorNeutralBackground1,
},
'&::-webkit-scrollbar-thumb': {
background: react_components_1.tokens.colorBrandBackground,
borderRadius: '4px',
},
'&::-webkit-scrollbar-thumb:hover': {
background: react_components_1.tokens.colorBrandBackgroundHover,
},
}),
blankHeader: (0, css_1.css)({
gridColumn: '1',
backgroundColor: react_components_1.tokens.colorNeutralBackground3,
borderBottom: "3px solid ".concat(react_components_1.tokens.colorNeutralStroke3),
position: 'sticky',
top: 0,
zIndex: 10,
}),
timeColumn: (0, css_1.css)({
gridColumn: '1',
gridRow: '3 / span 49',
display: 'flex',
flexDirection: 'column',
backgroundColor: react_components_1.tokens.colorNeutralBackground1,
borderRight: "1px solid ".concat(react_components_1.tokens.colorNeutralStroke1),
}),
timeCell: (0, css_1.css)({
height: '100%',
maxHeight: '32px',
minHeight: '32px',
display: 'flex',
alignItems: 'center',
fontSize: '12px',
color: react_components_1.tokens.colorNeutralForeground3,
borderBottom: "1px solid ".concat(react_components_1.tokens.colorNeutralStroke1),
justifyContent: 'center',
}),
fullDayRow: (0, css_1.css)({
gridRow: '2', // Full-day events occupy the second row
display: 'grid',
gridTemplateColumns: '80px 33px', // Time column + 7 day columns
gap: '0', // Ensure cells align properly
padding: '0', // Remove padding for proper alignment
backgroundColor: react_components_1.tokens.colorNeutralBackground2,
borderBottom: "3px solid ".concat(react_components_1.tokens.colorNeutralStroke2), // Bottom border for the row
}),
fullDayLabel: (0, css_1.css)({
gridColumn: '1', // Place in the first column
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
alignContent: 'center',
color: react_components_1.tokens.colorBrandBackground,
padding: '5px',
borderRight: "1px solid ".concat(react_components_1.tokens.colorNeutralStroke1), // Right border for the label cell
borderBottom: "3px solid ".concat(react_components_1.tokens.colorNeutralStroke2), // Bottom border for the cell
}),
fullDayCell: (0, css_1.css)({
borderRight: "1px solid ".concat(react_components_1.tokens.colorNeutralStroke1), // Right border between day cells
display: 'flex',
flexDirection: 'row', // Arrange events horizontally
gap: '2px',
padding: '4px', // Ensure events have spacing within the cell
borderBottom: "3px solid ".concat(react_components_1.tokens.colorNeutralStroke2), // Bottom border for the cell
overflow: 'hidden', // Ensure events don’t overflow the cell
}),
fullDayEvent: (0, css_1.css)({
flex: '1 1 auto', // Allow events to share space equally
minWidth: '24px',
height: '24px',
padding: '4px 8px',
backgroundColor: react_components_1.tokens.colorBrandBackground,
borderRadius: '4px',
overflow: 'hidden',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}),
dayHeaderCell: (0, css_1.css)({
textAlign: 'center',
backgroundColor: react_components_1.tokens.colorNeutralBackground2,
padding: '8px',
fontWeight: 'bold',
borderBottom: "1px solid ".concat(react_components_1.tokens.colorNeutralStroke1),
position: 'sticky',
top: 0, // Sticks to the top of the scrollable container
zIndex: 10, // Ensures it stays above the scrolling grid
}),
todayHeaderCell: (0, css_1.css)({
borderTop: "5px solid ".concat(react_components_1.tokens.colorBrandBackground),
}),
eventCard: (0, css_1.css)({
alignItems: 'center',
justifyContent: 'center',
marginRight: '2px',
zIndex: 1,
position: 'absolute',
alignContent: 'center',
overflow: 'hidden',
}),
dayCell: (0, css_1.css)({
borderBottom: "1px solid ".concat(react_components_1.tokens.colorNeutralStroke1),
borderRight: "1px solid ".concat(react_components_1.tokens.colorNeutralStroke1),
position: 'relative',
overflow: 'visible',
flexDirection: 'column',
gap: '4px',
}),
currentTimeIndicator: (0, css_1.css)({
position: 'absolute',
left: 0,
height: '2px',
backgroundColor: react_components_1.tokens.colorPaletteRedBorderActive,
width: '100%',
zIndex: 1,
}),
currentHalfHourCell: (0, css_1.css)({
border: "2px solid ".concat(react_components_1.tokens.colorPaletteRedBorderActive),
}),
eventTitle: (0, css_1.css)({
display: '-webkit-box',
'-webkit-line-clamp': '1',
'-webkit-box-orient': 'vertical',
textAlign: 'start',
textOverflow: 'ellipsis',
paddingLeft: '8px',
wordBreak: 'break-word',
overflow: 'hidden',
}),
};
var applyEventHouverColorClass = function (backgroundColor, houveColor) {
return (0, css_1.css)({
backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : react_components_1.tokens.colorBrandBackground,
':hover': {
backgroundColor: houveColor !== null && houveColor !== void 0 ? houveColor : react_components_1.tokens.colorBrandBackgroundHover,
},
});
};
return { styles: styles, applyEventHouverColorClass: applyEventHouverColorClass };
};
exports.useDayViewStyles = useDayViewStyles;
//# sourceMappingURL=useDayViewStyles.js.map