@pnp/spfx-property-controls
Version:
Reusable property pane controls for SharePoint Framework solutions
42 lines • 3.23 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SelectPalette = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_components_1 = require("@fluentui/react-components");
const usePalettePickerStyles_1 = require("./usePalettePickerStyles");
const react_components_2 = require("@fluentui/react-components");
const PropertyControlStrings_1 = tslib_1.__importDefault(require("PropertyControlStrings"));
const SelectPalette = (props) => {
var _a;
const { selectedPalette, onPaletteChange, theme, palettes = {} } = props;
const [selected, setSelected] = React.useState(selectedPalette);
const { styles } = (0, usePalettePickerStyles_1.usePalettePickerStyles)();
React.useEffect(() => {
setSelected(selectedPalette);
}, [selectedPalette]);
return (React.createElement(react_components_2.IdPrefixProvider, { value: "select-palette-" },
React.createElement(react_components_1.FluentProvider, { theme: theme, applyStylesToPortals: true },
React.createElement("div", { className: styles.palettePickerContainer },
React.createElement(react_components_1.Dropdown, { className: styles.dropDown, "aria-label": PropertyControlStrings_1.default.PropertyFieldPalettePickerTitle, title: PropertyControlStrings_1.default.PropertyFieldPalettePickerTitle, value: selected, defaultSelectedOptions: selected ? [selected] : [(_a = Object.keys(palettes !== null && palettes !== void 0 ? palettes : {})) === null || _a === void 0 ? void 0 : _a[0]], onOptionSelect: (e, data) => {
var _a;
if (data.optionValue) {
setSelected(data.optionValue);
const paletteColors = (_a = (palettes !== null && palettes !== void 0 ? palettes : {})[data.optionValue]) !== null && _a !== void 0 ? _a : [];
const selectedPaletteItem = {
[data.optionValue]: paletteColors
};
onPaletteChange(selectedPaletteItem);
}
} }, Object.keys(palettes !== null && palettes !== void 0 ? palettes : {}).map((paletteName) => {
var _a;
return (React.createElement(react_components_1.OptionGroup, { key: paletteName, label: paletteName },
React.createElement(react_components_1.Option, { text: paletteName, value: paletteName },
React.createElement("div", { className: styles.optionsContainer }, (_a = (palettes !== null && palettes !== void 0 ? palettes : {})[paletteName]) === null || _a === void 0 ? void 0 : _a.map((color, index) => (React.createElement(react_components_1.Tooltip, { content: color, key: index, relationship: "label" },
React.createElement("div", { key: index, className: styles.color, style: {
backgroundColor: color,
} }))))))));
}))))));
};
exports.SelectPalette = SelectPalette;
//# sourceMappingURL=SelectPalette.js.map