@mikezimm/npmfunctions/src/Services/PropPane/FPSOptionsGroup.ts

Functions used in my SPFx webparts

import {
    //  IPropertyPanePage,
    //  IPropertyPaneGroup,
    //  PropertyPaneLabel,
    //  IPropertyPaneLabelProps,
    //  PropertyPaneHorizontalRule,
      PropertyPaneTextField, 
      // IPropertyPaneTextFieldProps,
      // PropertyPaneLink, IPropertyPaneLinkProps,
     // PropertyPaneDropdown, IPropertyPaneDropdownProps,
      // IPropertyPaneDropdownOption,
      PropertyPaneToggle,
    //  IPropertyPaneConfiguration,
    //  PropertyPaneButton,
    //  PropertyPaneButtonType,
    //   PropertyPaneSlider, IPropertyPaneSliderProps,
    } from '@microsoft/sp-property-pane';
    
    // import { IFPSBasicToggleSetting } from './FPSInterfaces';
    
    export function FPSOptionsGroup( showSearch: boolean, pageStyle: boolean, quickLaunchHide: boolean, containerMaxWidth: boolean ) {
    
        let fields: any[] = [];
        if ( showSearch === true ) {
            fields.push(
                PropertyPaneToggle('searchShow', {
                    label: 'Show search bar by default', offText: 'Hide', onText: 'Show',  }) )
        }
        if ( pageStyle === true ) {
            fields.push(
                PropertyPaneTextField('fpsPageStyle', {
                    // disabled: webPartProps.ignoreList === true ? true : false, 
                    label: 'Custom page style settings', description: 'See wiki for more information.', multiline: true, }) )
        }
        if ( containerMaxWidth === true ) {
            fields.push(
                PropertyPaneTextField('fpsContainerMaxWidth', {
                    // disabled: webPartProps.ignoreList === true ? true : false, 
                    label: 'Webpart container Max Width', description: 'ie:  100% or 2400px', }) )
        }
        if ( quickLaunchHide === true ) {
            fields.push(    
                PropertyPaneToggle('quickLaunchHide', {
                    label: 'Hide quick launch - may be seen briefly', offText: 'Show', onText: 'Hide', }) )
        }

        let optionsGroup = { groupName: 'FPS options',
        isCollapsed: true ,
        groupFields: fields

        };

        return optionsGroup;
        
    }
    
    /**
     * 
     * @param forceBanner 
     * @param modifyBannerTitle 
     * @param modifyBannerStyle 
     * @param showBanner 
     * @param showAdvanced 
     * @param showNavigation - Adds Navigate to Home Page and Parent Site
     */
    export function FPSBanner2Group( forceBanner: boolean, modifyBannerTitle: boolean, modifyBannerStyle: boolean, showBanner: boolean, showAdvanced: boolean, showNavigation: boolean ) {
    
        let fields: any[] = [];

        fields.push(
            PropertyPaneToggle('showBanner', {
                label: 'Show Banner',
                disabled: forceBanner !== false ? true : false ,
                })
        );

        fields.push(
            PropertyPaneTextField('bannerTitle', {
                label: 'Webpart Title',
                description: '',
                disabled: modifyBannerTitle !== true || showBanner !== true ? true : false,
                })
        );

        if ( showNavigation === true ) {
            fields.push(
                PropertyPaneToggle('showGoToHome', {
                    label: 'Show Go to Home Page Icon',
                    })
            );
            fields.push(
                PropertyPaneToggle('showGoToParent', {
                    label: 'Show Got to Parent Site Icon',
                    })
            );
        }
        fields.push(
            PropertyPaneTextField('bannerStyle', {
                label: 'Style options',
                'description': 'React.CSSProperties format like:  "fontSize":"larger","color":"red"',
                disabled: modifyBannerStyle !== true || showBanner !== true ? true : false,
                })
        );

        fields.push(
            PropertyPaneToggle('bannerHoverEffect', {
                label: 'Banner Hover Effect',
                disabled: modifyBannerStyle !== true || showBanner !== true ? true : false ,
                })
        );

        let bannerGroup = { groupName: 'Banner',
        isCollapsed: true ,
        groupFields: fields

        };

        return bannerGroup;
        
    }