@mikezimm/npmfunctions/src/Services/PropPane/FPSOptionsGroup3.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,
    PropertyPaneHorizontalRule,
    PropertyPaneSlider
  } from '@microsoft/sp-property-pane';
  
import { IFPSBasicToggleSetting } from './FPSInterfaces';

import { bannerThemeChoices, bannerThemeChoicesWSiteTheme, bannerInfoEleChoices } from '../../HelpPanelOnNPM/onNpm/defaults';
import { EveryoneAudienceChoices, PageEditorAudienceChoices } from './Audiences';

// import { IMinWPBannerProps } from '../../HelpPanelOnNPM/onNpm/BannerInterface';

  // { FPSBanner3Group, FPSBanner3BasicGroup,FPSBanner3NavGroup, FPSBanner3ThemeGroup }

  /**
   * This is the legacy options which were more complex with more options
   * @param showSearch 
   * @param pageStyle 
   * @param quickLaunchHide 
   * @param containerMaxWidth 
   */
  export function FPSOptionsGroupAdvanced( pageStyle: boolean, containerMaxWidth: boolean ) {
  
      let fields: any[] = [];
      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', }) );
      }

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

      };

      return optionsGroup;
      
  }
  /**
   * This is the second version which is more simple (toggles and sliders)
   * @param showSearch
   * @param pageStyle 
   * @param quickLaunchHide 
   * @param containerMaxWidth 
   */
  export function FPSOptionsGroupBasic( showSearch: boolean, quickLaunchHide: boolean, pageHeaderHide: boolean, allSectWidth: IFPSBasicToggleSetting, allSectionMaxWidthEnable: any, allSectMargin: IFPSBasicToggleSetting, allSectionMarginEnable: any, toolBarHide: IFPSBasicToggleSetting ) {
  
      let fields: any[] = [];
      if ( showSearch === true ) {
          fields.push(
              PropertyPaneToggle('searchShow', {
                  label: 'Show search bar by default', offText: 'Hide', onText: 'Show',  }) );
      }
      if ( quickLaunchHide === true ) {
          fields.push(    
              PropertyPaneToggle('quickLaunchHide', {
                  label: 'Hide quick launch - may be seen briefly', offText: 'Ignore', onText: 'Hidden', }) );
      }

      if ( pageHeaderHide === true ) {
          fields.push(
              PropertyPaneToggle('pageHeaderHide', {
                  label: 'Hide Page Header - may be seen briefly',
                  offText: 'Ignore',
                  onText: 'Hidden',
                })
          );
      }
      if ( allSectWidth !== 'skip' ) {
          fields.push(
              PropertyPaneToggle('allSectionMaxWidthEnable', {
                  label: 'All Sections Max Width',
                  offText: 'Off',
                  onText: 'On',
                })
          );
          fields.push(
              PropertyPaneSlider('allSectionMaxWidth', { //hidePageHeader, allSectionMaxWidthEnable, allSectionMaxWidth, allSectionMarginEnable, allSectionMargin
                  label: 'Max width of all sections',
                  disabled: allSectionMaxWidthEnable === true ? false : true ,
                  min: 1200,
                  max: 3200,
                  step: 100,
                })
          );
      }
      if ( allSectMargin !== 'skip' ) {
          fields.push(
              PropertyPaneToggle('allSectionMarginEnable', {
                  label: 'All Sections Margin',
                  offText: 'Off',
                  onText: 'On',
                })
          );
          fields.push(
              PropertyPaneSlider('allSectionMargin', { //hidePageHeader, allSectionMaxWidthEnable, allSectionMaxWidth, allSectionMarginEnable, allSectionMargin
                  label: 'Top and Bottom Margin',
                  disabled: allSectionMarginEnable === true ? false : true ,
                  min: 0,
                  max: 100,
                  step: 2,
                })
          );
      }
      if ( toolBarHide === true ) {
          fields.push(
              PropertyPaneToggle('toolBarHide', {
                  label: 'Hide Toolbar - while viewing',
                  offText: 'Ignore',
                  onText: 'Hidden',
                })
          );
      }

      let optionsGroup = { groupName: 'FPS Page Layout - Basic',
      isCollapsed: true ,
      groupFields: fields

      };

      return optionsGroup;
      
  }
  


  /**
   * BannerPropPaneButtonBasics - Builds Basic FIELDS for Banner
   * @param forceBanner 
   * @param modifyBannerTitle 
   * @param showBanner 
   * @param infoElementText 
   * @returns 
   */
  export function BannerPropPaneButtonBasics( forceBanner: boolean, modifyBannerTitle: boolean, showBanner: boolean, 
    infoElementText: boolean, feedback: boolean, enableBeAUser: 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,
            })
      );

    fields.push(
        PropertyPaneDropdown('infoElementChoice', <IPropertyPaneDropdownProps>{
            label: 'More Info text-button',
            options: bannerInfoEleChoices,
            disabled: showBanner !== true ? true : false,
        }) );


    fields.push(
        PropertyPaneTextField('infoElementText', {
            label: 'More Information text on right of banner',
            description: 'Keep simple to one word if possible.',
            disabled:infoElementText !== true || showBanner !== true ? true : false,
        }) );
//feedbackEmail: string;
    fields.push(
        PropertyPaneTextField('feedbackEmail', {
            label: 'Feedback email',
            description: 'Adds Feedback icon in the banner.',
            disabled:feedback !== true || showBanner !== true ? true : false,
        }) );
    
    if ( enableBeAUser === true ) { 
        fields.push(
        PropertyPaneDropdown('beAUserAudience', <IPropertyPaneDropdownProps>{
            label: 'Audience for Be A User mode',
            options: PageEditorAudienceChoices,
            disabled: showBanner !== true ? true : false,
        }) );
    }


    return fields;
    
  }

/**
 * FPSBanner3BasicGroup builds FPS Banner Basics Prop Pane Group: showBanner, bannerTitle, infoElementChoice, infoElementText,
 * @param forceBanner 
 * @param modifyBannerTitle 
 * @param showBanner 
 * @param infoElementText 
 * @returns 
 */
export function FPSBanner3BasicGroup( forceBanner: boolean, modifyBannerTitle: boolean, showBanner: boolean, infoElementText: boolean, feedback: boolean ) {
    let fields: any[] = BannerPropPaneButtonBasics( forceBanner, modifyBannerTitle, showBanner, infoElementText, feedback, false );
    let bannerGroup = { groupName: 'FPS Banner - Basics',
        isCollapsed: true ,
        groupFields: fields
    };
    return bannerGroup;
}

/**
 * FPSBanner3BasicGroup builds FPS Banner Basics Prop Pane Group: showBanner, bannerTitle, infoElementChoice, infoElementText,
 * @param forceBanner 
 * @param modifyBannerTitle 
 * @param showBanner 
 * @param infoElementText 
 * @returns 
 */
 export function FPSBanner4BasicGroup( forceBanner: boolean, modifyBannerTitle: boolean, showBanner: boolean, infoElementText: boolean, 
    feedback: boolean, enableBeAUser: boolean ) {
    let fields: any[] = BannerPropPaneButtonBasics( forceBanner, modifyBannerTitle, showBanner, infoElementText, feedback, enableBeAUser );
    let bannerGroup = { groupName: 'FPS Banner - Basics',
        isCollapsed: true ,
        groupFields: fields
    };
    return bannerGroup;
}


/**
 * BannerPropNavButtonFields - Builds Fields for FPS Banner Nav Group
 */
  export const BannerPropNavButtonFields : any[] = [

    PropertyPaneToggle('showGoToHome', {
        label: 'Show Go to Home Page Icon',
    }),

    PropertyPaneToggle('showGoToParent', {
        label: 'Show Got to Parent Site Icon',
    }),

    PropertyPaneDropdown('homeParentGearAudience', <IPropertyPaneDropdownProps>{
        label: 'Gear, Home, Parent audience',
        options: EveryoneAudienceChoices,
    }),

];

/**
 * FPSBanner3NavGroup - Builds Prop Pane group for Nav Buttons:  showGoToHome, showGoToParent, homeParentGearAudience
 * @returns 
 */
export function FPSBanner3NavGroup(  ) {
    let fields: any[] = BannerPropNavButtonFields;
    let bannerGroup = { groupName: 'FPS Banner - Navigation',
        isCollapsed: true ,
        groupFields: fields
    };
    return bannerGroup;
}


  /**
   * 
   * @param forceBanner 
   * @param modifyBannerTitle 
   * @param modifyBannerStyle 
   * @param showBanner 
   * @param showAdvanced 
   * @param showNavigation - Adds Navigate to Home Page and Parent Site
   */
  export function FPSBanner3Group( forceBanner: boolean, modifyBannerTitle: boolean, modifyBannerStyle: boolean, showBanner: boolean, 
    showAdvanced: boolean, showNavigation: boolean, lockStyles: boolean, infoElementText: boolean, showFeedBackEmail: boolean = true, includeSiteTheme: boolean = false ) {
  
      let fields: any[] = [];

    //Add basic properties
    BannerPropPaneButtonBasics( forceBanner, modifyBannerTitle, showBanner, infoElementText, showFeedBackEmail, false ).map( field => {
            fields.push( field )
        });

      //Add button properties
      if ( showNavigation === true ) {
        BannerPropNavButtonFields.map( field => {
                fields.push( field )
            });
        } 

        fields.push( PropertyPaneHorizontalRule());

        //Add Theme properties
        BannerPropButtonThemes( modifyBannerStyle, showBanner, lockStyles, includeSiteTheme ).map( field => {
            fields.push( field )
        });


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

      };

      return bannerGroup;

  }


  /**
   * FPSBanner3ThemeGroup - Builds FPS Banner Theme Group:  bannerStyleChoice, bannerStyle, bannerCmdStyle, bannerHoverEffect
   * @param modifyBannerStyle 
   * @param showBanner 
   * @param lockStyles 
   * @returns 
   */
  export function FPSBanner3ThemeGroup( modifyBannerStyle: boolean, showBanner: boolean, lockStyles: boolean, includeSiteTheme: boolean ) {
    let fields: any[] = BannerPropButtonThemes( modifyBannerStyle, showBanner, lockStyles, includeSiteTheme );
    let bannerGroup = { groupName: 'FPS Banner - Theme',
        isCollapsed: true ,
        groupFields: fields
    };
    return bannerGroup;
}

  /**
   * Generates prop pane FIELDS for:  bannerStyleChoice, bannerStyle, bannerCmdStyle, bannerHoverEffect
   * @param modifyBannerStyle 
   * @param showBanner 
   * @param lockStyles 
   * @returns 
   */
   export function BannerPropButtonThemes( modifyBannerStyle: boolean, showBanner: boolean, lockStyles: boolean, includeSiteTheme: boolean ){

    let fields : any[] = [];


    fields.push(
        PropertyPaneDropdown('bannerStyleChoice', <IPropertyPaneDropdownProps>{
            label: 'Banner Theme',
            options: includeSiteTheme === true ? bannerThemeChoicesWSiteTheme : bannerThemeChoices,
            disabled: modifyBannerStyle !== true || showBanner !== true ? true : false,
        }) );

    // if ( lockStyles !== true ) {
    fields.push(
        PropertyPaneTextField('bannerStyle', {
            label: 'Style options',
            description: 'React.CSSProperties format like:  "fontSize":"larger","color":"red"',
            disabled: modifyBannerStyle !== true || showBanner !== true || lockStyles === true ? true : false,
            multiline: true,
        }) );
    // }

    // if ( lockStyles !== true ) {
    fields.push(
        PropertyPaneTextField('bannerCmdStyle', {
            label: 'Button Style options',
            description: 'React.CSSProperties format like:  "fontSize":"larger","color":"red"',
            disabled: modifyBannerStyle !== true || showBanner !== true || lockStyles === true ? true : false,
            multiline: true,
            }) );
    // }

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

    return fields;

  }