@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
140 lines • 7.08 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useFileCommandBarStyles = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var jotai_1 = require("jotai");
var Styling_1 = require("@fluentui/react/lib/Styling");
/* eslint-disable @typescript-eslint/explicit-function-return-type */
var atoms_1 = require("../../jotai/atoms");
var useFileCommandBarStyles = function () {
var appGlobalState = (0, jotai_1.useAtom)(atoms_1.globalState)[0];
var themeVariant = appGlobalState.themeVariant, selectedFiles = appGlobalState.selectedFiles;
var checkBoxStyles = React.useCallback(function (props) {
var _a, _b, _c, _d;
return {
checkbox: {
borderRadius: "50%",
borderWidth: 1,
borderStyle: "solid",
borderColor: "".concat((_a = themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette) === null || _a === void 0 ? void 0 : _a.themePrimary, " !important"),
color: "".concat(themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.semanticColors.bodyText, " !important"),
backgroundColor: !props.checked ? themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette.white : themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette.themeLighter,
},
root: {
alignItems: "center",
borderColor: "".concat((_b = themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette) === null || _b === void 0 ? void 0 : _b.themePrimary, " !important"),
color: "".concat(themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.semanticColors.bodyText, " !important"),
":hover": {
".ms-Checkbox-checkbox": {
backgroundColor: "".concat(themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette.themeLight, " !important"),
},
},
},
checkmark: {
color: "".concat((_c = themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.semanticColors) === null || _c === void 0 ? void 0 : _c.bodyText, " !important"),
},
text: {
color: "".concat(themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.semanticColors.bodyText, " !important"),
":hover": {
color: "".concat(themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.semanticColors.bodyText, " !important"),
},
},
label: {
color: "".concat(themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.semanticColors.bodyText, " !important"),
":hover": {
borderColor: "".concat((_d = themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette) === null || _d === void 0 ? void 0 : _d.themePrimary, " !important"),
color: "".concat(themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.semanticColors.bodyText, " !important"),
},
},
};
}, [themeVariant]);
var buttonIconStyles = React.useMemo(function () {
return {
root: {
color: "".concat(themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.semanticColors.bodyText, " !important"),
},
};
}, [themeVariant]);
var controlStyles = React.useMemo(function () {
var _a, _b;
return (0, Styling_1.mergeStyleSets)({
fileIconHeaderIcon: {
padding: 0,
fontSize: "16px",
},
fileIconCell: (0, Styling_1.mergeStyles)({
textAlign: "center",
selectors: {
"&:before": {
content: ".",
display: "inline-block",
verticalAlign: "middle",
height: "100%",
width: "0px",
visibility: "hidden",
},
},
}),
fileIconImg: (0, Styling_1.mergeStyles)({
verticalAlign: "middle",
maxHeight: "16px",
maxWidth: "16px",
}),
separator: (0, Styling_1.mergeStyles)({
margin: 20,
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",
}),
separatorVertrical: (0, Styling_1.mergeStyles)({
height: 25,
width: "1px",
borderLeftStyle: "solid",
borderLeftWidth: "1px",
borderLeftColor: (_b = themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.palette) === null || _b === void 0 ? void 0 : _b.themePrimary,
}),
});
}, [themeVariant]);
var commandBarStyles = React.useMemo(function () {
return {
root: {
paddingLeft: 0,
backgroundColor: themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.semanticColors.bodyBackground,
},
};
}, [themeVariant]);
var commandbarButtonStyles = React.useMemo(function () {
return {
rootHovered: {
color: "".concat(themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.semanticColors.bodyText, " !important"),
},
labelHovered: {
color: "".concat(themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.semanticColors.bodyText, " !important"),
},
root: {
paddingLeft: 15,
display: selectedFiles.length ? "block" : "none",
color: themeVariant === null || themeVariant === void 0 ? void 0 : themeVariant.semanticColors.bodyText,
},
};
}, [selectedFiles]);
var stackContainerStyles = React.useMemo(function () {
return {
root: {
width: "100%",
padding: "0 20px",
},
};
}, [themeVariant]);
return {
buttonIconStyles: buttonIconStyles,
checkBoxStyles: checkBoxStyles,
stackContainerStyles: stackContainerStyles,
controlStyles: controlStyles,
commandBarStyles: commandBarStyles,
commandbarButtonStyles: commandbarButtonStyles,
};
};
exports.useFileCommandBarStyles = useFileCommandBarStyles;
//# sourceMappingURL=useFileCommandBarStyles.js.map