@pnp/spfx-property-controls
Version:
Reusable property pane controls for SharePoint Framework solutions
37 lines • 2.82 kB
JavaScript
import * as React from "react";
import { Dropdown, OptionGroup, Option, FluentProvider, Tooltip, } from "@fluentui/react-components";
import { usePalettePickerStyles } from "./usePalettePickerStyles";
import { IdPrefixProvider } from "@fluentui/react-components";
import strings from "PropertyControlStrings";
export const SelectPalette = (props) => {
var _a;
const { selectedPalette, onPaletteChange, theme, palettes = {} } = props;
const [selected, setSelected] = React.useState(selectedPalette);
const { styles } = usePalettePickerStyles();
React.useEffect(() => {
setSelected(selectedPalette);
}, [selectedPalette]);
return (React.createElement(IdPrefixProvider, { value: "select-palette-" },
React.createElement(FluentProvider, { theme: theme, applyStylesToPortals: true },
React.createElement("div", { className: styles.palettePickerContainer },
React.createElement(Dropdown, { className: styles.dropDown, "aria-label": strings.PropertyFieldPalettePickerTitle, title: strings.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(OptionGroup, { key: paletteName, label: paletteName },
React.createElement(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(Tooltip, { content: color, key: index, relationship: "label" },
React.createElement("div", { key: index, className: styles.color, style: {
backgroundColor: color,
} }))))))));
}))))));
};
//# sourceMappingURL=SelectPalette.js.map