@mikezimm/npmfunctions/src/Services/PropPane/ReactImage/v2/Options.ts

Functions used in my SPFx webparts

import {  IPropertyPaneDropdownOption } from '@microsoft/sp-property-pane';

import { IImageFit, IImageCover, IImageTarget, IImageZoom, IGetHeroChoice } from './Types';

import { ImageFit, ImageCoverStyle, } from 'office-ui-fabric-react/lib/Image';

export const imgFitChoices: IPropertyPaneDropdownOption[] = <IPropertyPaneDropdownOption[]>[
    {   index: 0,   key: 'center', text: 'Center'  },
    {   index: 1,   key: 'contain', text: 'Contain'  },
    {   index: 2,   key: 'cover', text: 'Cover'  },
    {   index: 3,   key: 'none', text: 'None'  },
    {   index: 4,   key: 'centerCover', text: 'CenterCover'  },
    {   index: 5,   key: 'centerContain', text: 'CenterContain'  },
];

export function getImgFit (findMe: IImageFit) {
    if (findMe === 'center') {
        return ImageFit.center;

    } else if (findMe === 'contain') {
        return ImageFit.contain;

    } else if (findMe === 'cover') {
        return ImageFit.cover;

    } else if (findMe === 'none') {
        return ImageFit.none;

    } else if (findMe === 'centerContain') {
        return ImageFit.centerContain;

    } else if (findMe === 'centerCover') {
        return ImageFit.centerCover;

    } else {
        return ImageFit.centerCover;
    }
}

export const imgCoverChoices: IPropertyPaneDropdownOption[] = <IPropertyPaneDropdownOption[]>[
    {   index: 0,   key: 'landscape', text: "Landscape ^ stretch full height v"  },
    {   index: 1,   key: 'portrait', text: "Portrait < stretch full width >"  },
];

export function getImgCover (findMe: IImageCover) {
    if (findMe === 'landscape') {
        return ImageCoverStyle.landscape;
    } else {
        return ImageCoverStyle.portrait;
    }
}

export const imgTargetChoices: IPropertyPaneDropdownOption[] = <IPropertyPaneDropdownOption[]>[
    {   index: 0,   key: 'top', text: "Full Body (_top)"  },
    {   index: 1,   key: 'blank', text: "New Window (_blank)"  },
];

export const imgTargetChoicesAll: IPropertyPaneDropdownOption[] = <IPropertyPaneDropdownOption[]>[
    {   index: 0,   key: 'top', text: "Full Body (_top)"  },
    {   index: 1,   key: 'blank', text: "New Window (_blank)"  },
    //  These do not seem to  work. 
    // {   index: 2,   key: 'self', text: "Same Frame (_self)"  },
    // {   index: 3,   key: 'parent', text: "Parent Frameset (_parent)"  },
];

export function getTarget (findMe: IImageTarget) {
    if (findMe === 'blank') {
        return "_blank";

    } else if (findMe === 'self') {
        return "_self";

    } else if (findMe === 'parent') {
        return "_parent";

    } else if (findMe === 'top') {
        return "_top";

    } else {
        return "_top";
    }
}

export const heroChoices: IPropertyPaneDropdownOption[] = <IPropertyPaneDropdownOption[]>[
    {   index: 0,   key: 'inLine', text: "Single In Line (below pivot)"  },
    {   index: 8,   key: 'carouselLayout', text: "Carousel Layout (below pivot)"  },
    {   index: 7,   key: 'carouselBuilder', text: "Alternate Carousel Layout (below pivot)"  },
    {   index: 3,   key: 'header', text: "Above"  },
    {   index: 4,   key: 'footer', text: "Below"  },  
    {   index: 1,   key: 'left', text: "Left side"  },
    {   index: 2,   key: 'right', text: "Right side"  },
    {   index: 9,   key: 'none', text: "None"  },
];

export function getHeroChoice (findMe: IGetHeroChoice) {
    if (findMe === 'left') {
        return "left";
    } else if (findMe === 'right') {
        return "right";
    } else if (findMe === 'header') {
        return "header";
    } else if (findMe === 'footer') {
        return "footer";
    } else if (findMe === 'none') {
        return "none";
    } else {
        return "left";
    }
}

export const hoverZoomChoices: IPropertyPaneDropdownOption[] = <IPropertyPaneDropdownOption[]>[
    {   index: 0,   key: '1.1', text: "1.1 x"  },
    {   index: 1,   key: '1.2', text: "1.2 x"  },
    {   index: 9,   key: '1.0', text: "1.0 - no zoom animation"  },
];

export const hoverZoomChoicesAll: IPropertyPaneDropdownOption[] = <IPropertyPaneDropdownOption[]>[
    {   index: 0,   key: '1.1', text: "1.1 x"  },
    {   index: 1,   key: '1.2', text: "1.2 x"  },
    {   index: 2,   key: '1.5', text: "1.5 x"  },
    {   index: 3,   key: '2.0', text: "2.0 x"  },
    {   index: 9,   key: '1.0', text: "1.0 - no zoom animation"  },
];

export function getHoverZoom (findMe: IImageZoom) {
    if (findMe === '1.0') {
        return 1;
    } else if (findMe === '1.1') {
        return 1.1;
    } else if (findMe === '1.2') {
        return 1.2;
    } else if (findMe === '1.5') {
        return 1.2;
    } else if (findMe === '2.0') {
        return 1.2;
    } else {
        return 0;
    }
}

export const hoverEffectChoices: IPropertyPaneDropdownOption[] = <IPropertyPaneDropdownOption[]>[
    {   index: 0,   key: 'slideUp', text: "Slide panel up"  },
    {   index: 1,   key: 'fadeUp', text: "Fade panel"  },
    {   index: 9,   key: 'none', text: "None"  },
];


/**
 * Currently just place holder in case needed.
 * @param findMe
 */
export function getHoverEffect (findMe: string ) {
  if (findMe === '1.0') {
      return 1;
  } else if (findMe === '1.5') {
  } else if (findMe === '1.1') {
      return 1.2;
      return 1.1;
  } else if (findMe === '2.0') {
  } else if (findMe === '1.2') {
      return 1.2;
  } else {
      return 0;
  }
}