@mikezimm/fps-library-v2/lib/components/atoms/Inputs/PeoplePicker/fps-PropPanePeoplePicker.js

Library of reusable typescript/javascript functions, interfaces and constants

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import FpsPeoplePicker from './fps-PeoplePicker'; // Assuming this is the location of your custom People Picker
/**
 * PropertyPaneFpsPeoplePicker - replacement for { PropertyFieldPeoplePicker } from '@pnp/spfx-property-controls/lib/PropertyFieldPeoplePicker';
 *    Function-based implementation for the custom Property Pane field
 *    Original use cases:  BannerPropVisHelp, PivotTiles Groups Audience, PivotTiles Permissions Audience
 *
 * @param props
 * @returns
 */
export function PropertyPaneFpsPeoplePicker(props) {
    const { fpsSpService, targetProperty, label, description, initialData, onPropertyChange, multiSelect, disabled, preFilter, size, typeToShow } = props;
    return {
        // Define the field as a custom property pane field
        type: 1,
        targetProperty: targetProperty,
        properties: {
            // Provide a unique key for the custom field to track its identity
            key: `${targetProperty}`,
            // Define the render function to create the React component
            onRender: (elem) => {
                // Use ReactDOM.render to render the FpsPeoplePicker component into the given DOM element
                ReactDOM.render(React.createElement(FpsPeoplePicker, { key: targetProperty, label: label, description: description, fpsSpService: fpsSpService, siteUrl: '', sendSelectedUsers: onPropertyChange, initialData: initialData, multiSelect: multiSelect, disabled: disabled, preFilter: preFilter, size: size, typeToShow: typeToShow, styles: { border: '0px', padding: '5px 0px 0px' }, 
                    // styles={ null }
                    // className={ '' }
                    labelStyles: { fontSize: 'inherit' } }), elem // Render into this DOM element
                );
            },
            // Define the cleanup function to remove the React component when the field is disposed
            onDispose: (elem) => {
                ReactDOM.unmountComponentAtNode(elem);
            },
        },
    };
}
//# sourceMappingURL=fps-PropPanePeoplePicker.js.map