@mikezimm/npmfunctions/src/Services/PropPane/zReusablePropPane.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 { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';

import * as links from '../../Links/LinksRepos';

import { camelToSentanceCase } from '../Strings/stringCase';

import { fpsLogo326 } from '../../SVGIcons/fpsLogo326';

import { createLink, createRepoLinks, IRepoLinks } from '../../Links/CreateLinks';

export const JSON_Edit_Link = PropertyPaneLink('JSON Link' , {
    text: 'Use this site to more easily work on JSON',
    href: 'https://codebeautify.org/jsonviewer',
    target: '_blank',
});

export const ValidLocalLanguages = PropertyPaneLink('languagesLink' , {
  text: 'See list of valid languages',
  href: 'https://docs.microsoft.com/en-us/previous-versions/windows/desktop/indexsrv/valid-locale-identifiers',
  target: '_blank',
});

export function WebPartInfoGroup( gitRepoLinks : IRepoLinks, shortDescription: any ) {

  let infoGroup = { groupName: 'Web Part Info',
  isCollapsed: true ,
  groupFields: [
    PropertyPaneWebPartInformation({
      description: `<img src='${fpsLogo326}'/>`,
      key: 'webPartInfoId'
    }) ,
    PropertyPaneWebPartInformation({
      description: `<p><i>"If you change the way you look at things, the things you look at change."</i></p>`,
      key: 'webPartInfoId2'
    }) ,
  /*
    PropertyPanePropertyEditor({
      webpart: this,
      key: 'propertyEditor'
    })  ,
  */
    PropertyPaneWebPartInformation({
      description: shortDescription,
      key: 'webPartInfoId3'
    }) ,

    PropertyPaneLink('About Link' , {
      text: 'Github Repo:  ' + gitRepoLinks.desc ,
      href: gitRepoLinks.href,
      target: gitRepoLinks.target,
    }),

    PropertyPaneLink('Issues Link' , {
      text: 'Report Issues:  ' + gitRepoLinks.desc ,
      href: gitRepoLinks.href  + '/issues',
      target: gitRepoLinks.target,
    }),

  ]
  };

  return infoGroup;

}



/**
* makePropDataToggles creates an array of data Toggle elements based on a camelCase string array like prop keys
* and turns the keys into Sentance Case text
* @param props 
* @param off 
* @param on 
* @param checked 
*/

export function makePropDataToggles( newProps: string[], prevArray: any[] = [], off: string = 'Off', on: string = 'On', checked: boolean = true, disabled: boolean = false ) {

  let newArray : any[] = prevArray;
  newProps.map( propName => {
    let newLabel = camelToSentanceCase(propName);
    newArray.push(
        PropertyPaneToggle(propName, {
          label: newLabel,
          onAriaLabel: newLabel + ' ' + on,
          offAriaLabel: newLabel + ' ' + off,
          offText: off,
          onText: on,
          disabled: disabled,
          checked: checked,
        })
    );
  });
  return newArray;
}

/**
* makePropDataText creates an array of data Toggle elements based on a camelCase string array like prop keys
* and turns the keys into Sentance Case text
* 
* @param newProps 
* @param prevArray 
* @param description 
* @param disabled 
*/
export function makePropDataText( newProps: string[], prevArray: any[] = [], description: string = '', disabled: boolean = false ) {
  let newArray : any[] = prevArray;
  newProps.map( propName => {
    let newLabel = camelToSentanceCase(propName);
    newArray.push(
      PropertyPaneTextField(propName, {
        label: newLabel,
        ariaLabel: newLabel,
        disabled: disabled,
        description: description,
      })
    );
  });
  return newArray;
}

/**
* makePropDataSliders creates an array of data Slider elements based on a camelCase string array like prop keys
* and turns the keys into Sentance Case text

 * @param newProps 
 * @param prevArray 
 * @param min 
 * @param max 
 * @param step 
 * @param disabled 
 */
export function makePropDataSliders( newProps: string[], prevArray: any[] = [], min: number, max: number, step: number, disabled: boolean = false ) {
  let newArray : any[] = prevArray;
  newProps.map( propName => {
    let newLabel = camelToSentanceCase(propName);
    newArray.push(
      PropertyPaneSlider(propName, {
        label: newLabel,
        ariaLabel: newLabel,
        disabled: disabled,
        min: min,
        max: max,
        step: step,
        showValue: true,
      }),

    );
  });
  return newArray;
}