@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
275 lines • 13.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useUtils = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_components_1 = require("@fluentui/react-components");
var date_fns_1 = require("date-fns");
var useUtils = function () {
var getSpanSlots = React.useCallback(function (start, end) {
var startDate = new Date(start);
var endDate = new Date(end);
// Calculate the start and end slots based on event times
var startHour = startDate.getHours();
var startMinute = startDate.getMinutes();
var startSlot = startHour * 2 + (startMinute >= 1 ? 1 : 0); // Adjust for 30-minute slots
var endHour = endDate.getHours();
var endMinute = endDate.getMinutes();
var endSlot = endHour * 2 + (endMinute >= 1 ? 2 : 0); // Adjust for 30-minute slots
var spanSlots = endSlot - startSlot;
return { spanSlots: spanSlots, startSlot: startSlot, endSlot: endSlot };
}, []);
var generateLightAndHoverColors = React.useCallback(function (baseColor, lightnessIncrease, // Increase in lightness for light variant
hoverIncrease // Increase in lightness for hover variant
) {
if (lightnessIncrease === void 0) { lightnessIncrease = 20; }
if (hoverIncrease === void 0) { hoverIncrease = 10; }
// Function to convert hex to HSL
var hexToHsl = function (hex) {
var r = parseInt(hex.slice(1, 3), 16) / 255;
var g = parseInt(hex.slice(3, 5), 16) / 255;
var b = parseInt(hex.slice(5, 7), 16) / 255;
var max = Math.max(r, g, b);
var min = Math.min(r, g, b);
var delta = max - min;
var h = 0;
var s = 0;
var l = (max + min) / 2;
if (delta !== 0) {
s = l > 0.5 ? delta / (2 - max - min) : delta / (max + min);
switch (max) {
case r:
h = (g - b) / delta + (g < b ? 6 : 0);
break;
case g:
h = (b - r) / delta + 2;
break;
case b:
h = (r - g) / delta + 4;
break;
}
h /= 6;
}
return { h: h * 360, s: s * 100, l: l * 100 };
};
// Function to convert HSL to hex
var hslToHex = function (h, s, l) {
var a = (s * Math.min(l, 100 - l)) / 100;
var f = function (n) {
var k = (n + h / 30) % 12;
var color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
return Math.round(255 * color)
.toString(16)
.padStart(2, '0');
};
return "#".concat(f(0)).concat(f(8)).concat(f(4));
};
// Convert base color to HSL
var _a = hexToHsl(baseColor), h = _a.h, s = _a.s, l = _a.l;
// Generate light and hover colors by adjusting lightness
var lightColor = hslToHex(h, s, Math.min(l + lightnessIncrease, 100));
var hoverColor = hslToHex(h, s, Math.min(l + hoverIncrease, 100));
return { lightColor: lightColor, hoverColor: hoverColor };
}, []);
var getEventColors = React.useCallback(function (category) {
// Define a color map using Fluent UI 9 tokens
var colorMap = {
meeting: {
backgroundColor: react_components_1.tokens.colorPaletteBlueBackground2,
hoverColor: react_components_1.tokens.colorPaletteBlueBorderActive,
},
appointment: {
backgroundColor: react_components_1.tokens.colorPaletteGreenBackground2,
hoverColor: react_components_1.tokens.colorPaletteGreenBorderActive,
},
task: {
backgroundColor: react_components_1.tokens.colorPaletteRedBackground2,
hoverColor: react_components_1.tokens.colorPaletteRedBorderActive,
},
deadline: {
backgroundColor: react_components_1.tokens.colorPaletteYellowBackground2,
hoverColor: react_components_1.tokens.colorPaletteYellowBorderActive,
},
holiday: {
backgroundColor: react_components_1.tokens.colorPalettePurpleBackground2,
hoverColor: react_components_1.tokens.colorPalettePurpleBorderActive,
},
celebration: {
backgroundColor: react_components_1.tokens.colorPaletteDarkOrangeBackground2,
hoverColor: react_components_1.tokens.colorPaletteDarkOrangeBorderActive,
},
reminder: {
backgroundColor: react_components_1.tokens.colorPaletteTealBackground2,
hoverColor: react_components_1.tokens.colorPaletteTealBorderActive,
},
workshop: {
backgroundColor: react_components_1.tokens.colorPaletteTealBackground2,
hoverColor: react_components_1.tokens.colorPaletteTealBorderActive,
},
webinar: {
backgroundColor: react_components_1.tokens.colorPaletteMagentaBackground2,
hoverColor: react_components_1.tokens.colorPaletteMagentaBorderActive,
},
conference: {
backgroundColor: react_components_1.tokens.colorPaletteBrownBackground2,
hoverColor: react_components_1.tokens.colorPaletteBrownBorderActive,
},
};
// Default colors if the category is not recognized
var defaultColors = {
backgroundColor: react_components_1.tokens.colorNeutralBackground3,
hoverColor: react_components_1.tokens.colorNeutralBackground3Hover,
};
// Return the corresponding colors or fallback to the default
return colorMap[category.toLowerCase()] || defaultColors;
}, []);
var generateColor = React.useCallback(function (str) {
var hash = 0;
for (var i = 0; i < str.length; i++) {
hash = str.charCodeAt(i) + ((hash << 5) - hash);
}
var c = (hash & 0x00ffffff).toString(16).toUpperCase();
return "#".concat('00000'.substring(0, 6 - c.length) + c);
}, []);
var getCalendarColors = React.useCallback(function (colorName) {
var calendarColorMap = {
beige: {
backgroundColor: react_components_1.tokens.colorPaletteBeigeBackground2,
hoverColor: react_components_1.tokens.colorPaletteBeigeBorderActive,
},
blue: {
backgroundColor: react_components_1.tokens.colorPaletteBlueBackground2,
hoverColor: react_components_1.tokens.colorPaletteBlueBorderActive,
},
brown: {
backgroundColor: react_components_1.tokens.colorPaletteBrownBackground2,
hoverColor: react_components_1.tokens.colorPaletteBrownBorderActive,
},
gold: {
backgroundColor: react_components_1.tokens.colorPaletteGoldBackground2,
hoverColor: react_components_1.tokens.colorPaletteGoldBorderActive,
},
lavender: {
backgroundColor: react_components_1.tokens.colorPaletteLavenderBackground2,
hoverColor: react_components_1.tokens.colorPaletteLavenderBorderActive,
},
magenta: {
backgroundColor: react_components_1.tokens.colorPaletteMagentaBackground2,
hoverColor: react_components_1.tokens.colorPaletteMagentaBorderActive,
},
navy: {
backgroundColor: react_components_1.tokens.colorPaletteNavyBackground2,
hoverColor: react_components_1.tokens.colorPaletteNavyBorderActive,
},
pink: {
backgroundColor: react_components_1.tokens.colorPalettePinkBackground2,
hoverColor: react_components_1.tokens.colorPalettePinkBorderActive,
},
plum: {
backgroundColor: react_components_1.tokens.colorPalettePlumBackground2,
hoverColor: react_components_1.tokens.colorPalettePlumBorderActive,
},
purple: {
backgroundColor: react_components_1.tokens.colorPalettePurpleBackground2,
hoverColor: react_components_1.tokens.colorPalettePurpleBorderActive,
},
red: {
backgroundColor: react_components_1.tokens.colorPaletteRedBackground2,
hoverColor: react_components_1.tokens.colorPaletteRedBorderActive,
},
teal: {
backgroundColor: react_components_1.tokens.colorPaletteTealBackground2,
hoverColor: react_components_1.tokens.colorPaletteTealBorderActive,
},
anchor: {
backgroundColor: react_components_1.tokens.colorPaletteAnchorBackground2,
hoverColor: react_components_1.tokens.colorPaletteAnchorBorderActive,
},
'dark-red': {
backgroundColor: react_components_1.tokens.colorPaletteDarkRedBackground2,
hoverColor: react_components_1.tokens.colorPaletteDarkRedBorderActive,
},
cranberry: {
backgroundColor: react_components_1.tokens.colorPaletteCranberryBackground2,
hoverColor: react_components_1.tokens.colorPaletteCranberryBorderActive,
},
pumpkin: {
backgroundColor: react_components_1.tokens.colorPalettePumpkinBackground2,
hoverColor: react_components_1.tokens.colorPalettePumpkinBorderActive,
},
peach: {
backgroundColor: react_components_1.tokens.colorPalettePeachBackground2,
hoverColor: react_components_1.tokens.colorPalettePeachBorderActive,
},
marigold: {
backgroundColor: react_components_1.tokens.colorPaletteMarigoldBackground2,
hoverColor: react_components_1.tokens.colorPaletteMarigoldBorderActive,
},
brass: {
backgroundColor: react_components_1.tokens.colorPaletteBrassBackground2,
hoverColor: react_components_1.tokens.colorPaletteBrassBorderActive,
},
forest: {
backgroundColor: react_components_1.tokens.colorPaletteForestBackground2,
hoverColor: react_components_1.tokens.colorPaletteForestBorderActive,
},
seafoam: {
backgroundColor: react_components_1.tokens.colorPaletteSeafoamBackground2,
hoverColor: react_components_1.tokens.colorPaletteSeafoamBorderActive,
},
'dark-green': {
backgroundColor: react_components_1.tokens.colorPaletteDarkGreenBackground2,
hoverColor: react_components_1.tokens.colorPaletteDarkGreenBorderActive,
},
'light-teal': {
backgroundColor: react_components_1.tokens.colorPaletteLightTealBackground2,
hoverColor: react_components_1.tokens.colorPaletteLightTealBorderActive,
},
steel: {
backgroundColor: react_components_1.tokens.colorPaletteSteelBackground2,
hoverColor: react_components_1.tokens.colorPaletteSteelBorderActive,
},
'royal-blue': {
backgroundColor: react_components_1.tokens.colorPaletteRoyalBlueBackground2,
hoverColor: react_components_1.tokens.colorPaletteRoyalBlueBorderActive,
},
cornflower: {
backgroundColor: react_components_1.tokens.colorPaletteCornflowerBackground2,
hoverColor: react_components_1.tokens.colorPaletteCornflowerBorderActive,
},
grape: {
backgroundColor: react_components_1.tokens.colorPaletteGrapeBackground2,
hoverColor: react_components_1.tokens.colorPaletteGrapeBorderActive,
},
lilac: {
backgroundColor: react_components_1.tokens.colorPaletteLilacBackground2,
hoverColor: react_components_1.tokens.colorPaletteLilacBorderActive,
},
mink: {
backgroundColor: react_components_1.tokens.colorPaletteMinkBackground2,
hoverColor: react_components_1.tokens.colorPaletteMinkBorderActive,
},
platinum: {
backgroundColor: react_components_1.tokens.colorPalettePlatinumBackground2,
hoverColor: react_components_1.tokens.colorPalettePlatinumBorderActive,
},
};
// Fallback to royal-blue if the provided color isn't mapped
var defaultColor = calendarColorMap['royal-blue'];
return calendarColorMap[colorName] || defaultColor;
}, []);
var formatDate = React.useCallback(function (dateISO, dateFormat) {
var date = (0, date_fns_1.parseISO)(dateISO);
return (0, date_fns_1.format)(date, dateFormat);
}, []);
return {
getSpanSlots: getSpanSlots,
generateLightAndHoverColors: generateLightAndHoverColors,
getEventColors: getEventColors,
generateColor: generateColor,
getCalendarColors: getCalendarColors,
formatDate: formatDate,
};
};
exports.useUtils = useUtils;
//# sourceMappingURL=useUtils.js.map