@pnp/spfx-property-controls/lib-commonjs/propertyFields/swatchColorPicker/PropertyFieldSwatchColorPicker.js

Reusable property pane controls for SharePoint Framework solutions

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PropertyFieldSwatchColorPicker = PropertyFieldSwatchColorPicker;
const tslib_1 = require("tslib");
const sp_property_pane_1 = require("@microsoft/sp-property-pane");
const react_1 = require("@fluentui/react");
const React = tslib_1.__importStar(require("react"));
const ReactDom = tslib_1.__importStar(require("react-dom"));
const GeneralHelper_1 = require("../../helpers/GeneralHelper");
const IPropertyFieldSwatchColorPicker_1 = require("./IPropertyFieldSwatchColorPicker");
const PropertyFieldSwatchColorPickerHost_1 = tslib_1.__importDefault(require("./PropertyFieldSwatchColorPickerHost"));
class PropertyFieldSwatchColorPickerBuilder {
    constructor(_targetProperty, _properties) {
        //Properties defined by IPropertyPaneField
        this.type = sp_property_pane_1.PropertyPaneFieldType.Custom;
        this.targetProperty = _targetProperty;
        this.properties = {
            key: _properties.key,
            label: _properties.label,
            onPropertyChange: _properties.onPropertyChange,
            selectedColor: _properties.selectedColor,
            colors: _properties.colors,
            showAsCircles: _properties.showAsCircles,
            columnCount: _properties.columnCount,
            disabled: _properties.disabled,
            properties: _properties.properties,
            style: _properties.style,
            iconName: _properties.iconName,
            onRender: this.onRender.bind(this)
        };
        if (typeof _properties.selectedColor === 'undefined') {
            this.color = null;
        }
        else {
            if (typeof _properties.selectedColor === 'string') {
                this.color = _properties.selectedColor;
            }
            else {
                this.color = _properties.selectedColor.str;
            }
        }
        this.valueAsObject = _properties.valueAsObject;
    }
    render() {
        if (!this.elem) {
            return;
        }
        this.onRender(this.elem);
    }
    onRender(elem, ctx, changeCallback) {
        if (!this.elem) {
            this.elem = elem;
        }
        this.changeCB = changeCallback;
        const element = React.createElement(PropertyFieldSwatchColorPickerHost_1.default, {
            label: this.properties.label,
            disabled: this.properties.disabled,
            colors: (typeof this.properties.colors === 'undefined' || this.properties.colors.length === 0) ? [{ color: '#FFFFFF' }] : this.properties.colors,
            showAsCircles: this.properties.showAsCircles,
            columnCount: typeof this.properties.columnCount === 'undefined' ? 6 : Math.min(Math.max(1, this.properties.columnCount), 8),
            selectedColor: this.color,
            style: this.properties.style || IPropertyFieldSwatchColorPicker_1.PropertyFieldSwatchColorPickerStyle.Inline,
            iconName: this.properties.iconName || 'Color',
            onColorChanged: this.onColorChanged.bind(this)
        });
        ReactDom.render(element, elem);
    }
    onColorChanged(id, newColor) {
        if (this.properties.onPropertyChange && newColor !== null) {
            const newValue = (this.valueAsObject ? (0, react_1.getColorFromString)(newColor) : newColor);
            const oldValue = (this.valueAsObject ? (0, react_1.getColorFromString)(this.color) : this.color);
            this.color = newColor;
            this.properties.onPropertyChange(this.targetProperty, oldValue, newValue);
            (0, GeneralHelper_1.setPropertyValue)(this.properties.properties, this.targetProperty, newValue);
            if (typeof this.changeCB !== 'undefined' && this.changeCB !== null) {
                this.changeCB(this.targetProperty, newValue);
            }
        }
    }
}
function PropertyFieldSwatchColorPicker(targetProperty, properties) {
    return new PropertyFieldSwatchColorPickerBuilder(targetProperty, properties);
}
//# sourceMappingURL=PropertyFieldSwatchColorPicker.js.map