gd-sprest-bs/build/propertyPane/multiDropdown.js

SharePoint JavaScript, TypeScript and Web Components designed using the Bootstrap framework.

import { Components } from "../components/core";
import { BasePropertyPane } from "./base";
/**
 * Multi-Dropdown
 */
export class _MultiDropdown extends BasePropertyPane {
    // Internal rendering event
    onRendering(props) { return props; }
    // Override the render event
    onRender(el, context, onChange) {
        let currentValue = this.currentValueAsObject();
        if (currentValue) {
            let values = [];
            // Parse the values
            for (let i = 0; i < currentValue.length; i++) {
                values.push(currentValue[i]["value"] || currentValue[i]["text"] || currentValue[i]["label"]);
            }
            // Update the current value
            currentValue = values;
        }
        // Set the properties
        let config = this.config;
        let props = {
            description: config.description,
            items: config.items,
            label: config.label,
            name: this.targetProperty,
            type: Components.FormControlTypes.MultiDropdown,
            value: currentValue,
            onChange: (items) => {
                // Convert the object as a string
                let value = undefined;
                try {
                    value = JSON.stringify(items);
                }
                catch (_a) { }
                // Call the event
                value = config.onSave ? config.onSave(value) : value;
                // Update the property
                onChange(this.targetProperty, value);
            }
        };
        // Call the rendering events
        props = this.onRendering(props);
        props = config.onRendering ? config.onRendering(props) : props;
        // Render the dropdown
        Components.Form({
            el,
            controls: [props],
            onControlRendered: (ctrl) => {
                // Call the event
                config.onRendered ? config.onRendered(ctrl.dropdown, ctrl.props) : null;
            }
        });
    }
}
export const MultiDropdown = (targetProperty, config, context) => {
    return new _MultiDropdown(targetProperty, config, context);
};