@mikezimm/fps-library-v2/lib/banner/propPane/FPSWebPartInfoGroup.js

Library of reusable typescript/javascript functions, interfaces and constants

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import FPSToggle from '../../components/atoms/Inputs/Toggle/component';
import { fpsLogo326 } from '@mikezimm/fps-core-v7/lib/components/atoms/SVGIcons/fpsLogo326';
/**
 * 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 thisWPClass
 * @param shortDescription
 * @param hideEasyToggle - Hide it here if you have it in it's own group
 * @param onPropertyPaneFieldChanged
 * @returns
 */
export function FPSWebPartInfoGroup(thisWPClass, shortDescription, 
// eslint-disable-next-line @typescript-eslint/no-explicit-any
onPropertyPaneFieldChanged, hideEasyToggle = false) {
    const gitLinks = thisWPClass._repoLink;
    const allowPropsEasyMode = thisWPClass._allowPropsEasyMode ? true : false; // Allows for auto expanding WebPartInfoGroup on opening the prop pane if desired;
    const { propsEasyMode } = thisWPClass.properties;
    function updateProp(checked) {
        thisWPClass.properties.propsEasyMode = checked;
        void onPropertyPaneFieldChanged('propsEasyMode', propsEasyMode, checked);
    }
    const imgSrc = thisWPClass._imageWPInfo ? thisWPClass._imageWPInfo : fpsLogo326;
    const field = {
        // 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) => {
                ReactDOM.render(React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '.5em' } },
                    React.createElement("img", { src: imgSrc, alt: "" }),
                    React.createElement("div", null,
                        React.createElement("i", null, `"If you change the way you look at things, the things you look at change."`)),
                    shortDescription ? React.createElement("div", { style: { marginTop: '16px' } }, shortDescription) : undefined,
                    React.createElement("a", { className: 'ui-Link ms-Link', href: gitLinks.href, target: gitLinks.target, style: { marginBottom: '0px' } },
                        "Github Repo:  ",
                        gitLinks.desc),
                    React.createElement("a", { className: 'ui-Link ms-Link', href: `${gitLinks.href}/issues`, target: gitLinks.target, style: { marginBottom: '8px' } },
                        "Report Issues:  ",
                        gitLinks.desc),
                    hideEasyToggle !== true && allowPropsEasyMode === true ? React.createElement(FPSToggle, { layout: 'labelUp', forceChecked: propsEasyMode, label: `Easy Mode - Proeprty Pane options`, onText: `Easy Mode - Keep it simple mode`, offText: `Complex - All options`, disabled: false, onChange: updateProp, containerStyle: { display: 'flex', flexDirection: 'column', gap: '0.5em', margin: '8px 0px 0px' }, labelStyle: { fontWeight: 'bold', marginBottom: '0' }, onOffTextStyle: { display: 'flex', justifyContent: 'start', width: '20em', fontWeight: 'inherit' } }) : undefined), 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);
            },
        },
    };
    const ExportThisGroup = {
        groupName: `Web Part Info`,
        isCollapsed: thisWPClass._wpInfoGroupExpanded === true && (allowPropsEasyMode === true || thisWPClass.properties.propsEasyMode === true) ? false : true,
        groupFields: [field],
    };
    return ExportThisGroup;
}
//# sourceMappingURL=FPSWebPartInfoGroup.js.map