@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
218 lines • 8.91 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useWeekViewStyles = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var css_1 = require("@emotion/css");
var react_components_1 = require("@fluentui/react-components");
var useWeekViewStyles = function () {
var styles = {
container: (0, css_1.css)({
display: 'flex',
flexDirection: 'column',
width: 'calc(100% - 40px)',
height: '100vh',
overflow: 'hidden',
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),
}),
weekGrid: (0, css_1.css)({
display: 'grid',
gridTemplateColumns: '80px repeat(7, 1fr)',
gridTemplateRows: '50px 40px repeat(48, 33px)',
height: 'fit-content',
overflowY: 'auto',
border: "1px solid ".concat(react_components_1.tokens.colorNeutralStroke1),
maxHeight: 'calc(100vh - 100px)',
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%',
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',
display: 'grid',
gridTemplateColumns: '80px repeat(7, 1fr)',
gap: '0',
padding: '0',
backgroundColor: react_components_1.tokens.colorNeutralBackground2,
borderBottom: "3px solid ".concat(react_components_1.tokens.colorNeutralStroke2),
}),
fullDayLabel: (0, css_1.css)({
gridColumn: '1',
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),
borderBottom: "3px solid ".concat(react_components_1.tokens.colorNeutralStroke2),
}),
fullDayCell: (0, css_1.css)({
borderRight: "1px solid ".concat(react_components_1.tokens.colorNeutralStroke1),
display: 'flex',
flexDirection: 'row',
gap: '0px',
padding: '4px',
borderBottom: "3px solid ".concat(react_components_1.tokens.colorNeutralStroke2),
overflow: 'hidden',
}),
fullDayEvent: (0, css_1.css)({
flex: '1 1 auto',
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,
zIndex: 10,
}),
todayHeaderCell: (0, css_1.css)({
borderTop: "5px solid ".concat(react_components_1.tokens.colorBrandBackground),
}),
eventCard: (0, css_1.css)({
padding: 2,
alignItems: 'center',
justifyContent: 'center',
marginRight: '2px',
zIndex: 1,
position: 'absolute',
alignContent: 'center',
overflow: 'hidden',
':hover': {
pointerEvents: 'auto',
cursor: 'pointer',
},
}),
event: (0, css_1.css)({
height: '100%',
backgroundColor: react_components_1.tokens.colorBrandBackground,
borderRadius: '4px',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
overflow: 'hidden',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
marginRight: '2px',
zIndex: 1,
position: 'absolute',
alignContent: 'center',
':hover': {
pointerEvents: 'auto',
cursor: 'pointer',
},
}),
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',
}),
popoverContent: (0, css_1.css)({
padding: 0,
borderTopWidth: 20,
borderTopStyle: 'solid',
}),
};
var applyEventHouverColorClass = react_1.default.useCallback(function (backgroundColor, hoverColor) {
return (0, css_1.css)({
backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : react_components_1.tokens.colorBrandBackground,
':hover': {
backgroundColor: hoverColor !== null && hoverColor !== void 0 ? hoverColor : react_components_1.tokens.colorBrandBackgroundHover,
},
});
}, [react_components_1.tokens.colorBrandBackground, react_components_1.tokens.colorBrandBackgroundHover]);
var appyDynamicStyles = react_1.default.useCallback(function (eventIndex, eventCount, rowHeight, spanSlots) {
return (0, css_1.css)({
flex: "0 0 calc(100% / ".concat(eventCount, ")"),
height: "".concat(rowHeight * spanSlots, "px"),
left: "".concat(eventIndex * 10, "%"),
width: "calc(".concat(100 - eventIndex * 10, "% - 8px)"),
margin: 4,
marginTop: 0,
marginBottom: 0,
});
}, []);
return { styles: styles, applyEventHouverColorClass: applyEventHouverColorClass, appyDynamicStyles: appyDynamicStyles };
};
exports.useWeekViewStyles = useWeekViewStyles;
//# sourceMappingURL=useWeekViewStyles.js.map