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

Functions used in my SPFx webparts

  import {  IPropertyPaneDropdownOption } from '@microsoft/sp-property-pane';
  import { Image, ImageFit, ImageCoverStyle, } from 'office-ui-fabric-react/lib/Image';

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


  export class ImageOptionsGroup {

    public 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'  },
    ];

    public 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;
        }
    }

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

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

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

    public 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)"  },
    ];

    public 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";
        }
    }

    public 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"  },
    ];

    public 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"  },
    ];

    public 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 let imageOptionsGroup = new ImageOptionsGroup();