@pnp/spfx-property-controls/lib/propertyFields/PalettePicker/PalettePicker.js

Reusable property pane controls for SharePoint Framework solutions

import { FluentProvider, IdPrefixProvider, Label, webLightTheme } from "@fluentui/react-components";
import * as React from "react";
import { SelectPalette } from "./SelectPalette";
export class PalettePicker extends React.Component {
    constructor(props) {
        super(props);
        this.onPaletteChange = (palette) => {
            this.setState({ selectedPalette: Object.keys(palette)[0] });
            this.props.onPropertyChange(this.props.targetProperty, Object.keys(palette)[0]);
            if (this.props.onSelectedPalette) {
                this.props.onSelectedPalette(palette);
            }
        };
        const availablePalettes = props.palettes || {};
        const firstPaletteKey = Object.keys(availablePalettes)[0] || "";
        this.state = {
            selectedPalette: props.selectedPalette || firstPaletteKey,
        };
    }
    render() {
        return (React.createElement(React.Fragment, null,
            React.createElement(IdPrefixProvider, { value: "color-selected-" },
                React.createElement(FluentProvider, { theme: this.props.theme || webLightTheme, applyStylesToPortals: true },
                    React.createElement(Label, null, this.props.label),
                    React.createElement(SelectPalette, { selectedPalette: this.state.selectedPalette, palettes: this.props.palettes, onPaletteChange: this.onPaletteChange })))));
    }
}
//# sourceMappingURL=PalettePicker.js.map