@mikezimm/fps-library-v2
Version:
Library of reusable typescript/javascript functions, interfaces and constants
144 lines (142 loc) • 7.3 kB
JavaScript
/**
* CodeAnalizerComment: Updated 4 imports on 2024-09-22 14:49:52
* Update:: import { IPropertyPaneGroup } to '@mikezimm/fps-core-v7/lib/types/@msft/1.15.2/sp-property-pane;'
* Update:: import { IPropertyPaneDropdownProps } to '@mikezimm/fps-core-v7/lib/types/@msft/1.15.2/sp-property-pane;'
* Update:: import { IPropertyPaneField } to '@mikezimm/fps-core-v7/lib/types/@msft/1.15.2/sp-property-pane;'
* Update:: import { IMinWPBannerProps } to '@mikezimm/fps-core-v7/lib/banner/interfaces/MinWP/IMinWPBannerProps;'
*/
/**
* CodeAnalizerComment: Updated 4 imports on 2024-09-21 23:07:24
* Update:: import { IPropertyPaneDropdownProps } to '@mikezimm/fps-core-v7/lib/types/@msft/1.15.2/sp-property-pane;'
* Update:: import { imgFitChoices } to '@mikezimm/fps-core-v7/lib/common/Images/imgFit;'
* Update:: import { imgCoverChoices } to '@mikezimm/fps-core-v7/lib/common/Images/imgFit;'
* Update:: import { IMinWPBannerProps } to '@mikezimm/fps-core-v7/lib/banner/interfaces/MinWP/IMinWPBannerProps;'
*/
import { PropertyPaneTextField, PropertyPaneDropdown, PropertyPaneToggle, PropertyPaneSlider, PropertyPaneLabel } from '@microsoft/sp-property-pane';
import { imgFitChoices, imgCoverChoices, } from '@mikezimm/fps-core-v7/lib/common/Images/imgFit';
export const highlightColorChoices = [
{ index: 0, key: 'yellow', text: "Yellow" },
{ index: 1, key: 'white', text: "White" },
{ index: 2, key: 'lightblue', text: "Light Blue" },
{ index: 3, key: 'lime', text: "Lime" },
{ index: 4, key: 'orange', text: "Orange" },
{ index: 5, key: 'pink', text: "Pink" },
{ index: 6, key: 'coral', text: "Coral" },
{ index: 7, key: 'lightgray', text: "Light Gray" },
];
// Should match: IFPSTileLayout = 'small' | 'med' | 'hover' | 'list1' | 'list2' | 'card' | 'box' | 'image' ; // 'small' and 'med' must match IFPSCompactTileSize
export const fpsTileLayoutChoices = [
{ index: 0, key: 'small', text: "Small" },
{ index: 1, key: 'med', text: "Medium" },
{ index: 2, key: 'hover', text: "Hover Tile" },
{ index: 3, key: 'tight', text: "Tight" },
// { index: 3, key: 'image', text: "Image" },
// { index: 4, key: 'card', text: "Card" },
];
// Should match: IFPSTileLayout = 'small' | 'med' | 'hover' | 'list1' | 'list2' | 'card' | 'box' | 'image' ; // 'small' and 'med' must match IFPSCompactTileSize
export const fpsBoxTileLayoutChoices = [
...fpsTileLayoutChoices,
{ index: 3, key: 'list1', text: 'List View' },
{ index: 4, key: 'list2', text: 'List View Details' },
{ index: 5, key: 'box', text: 'Box' },
];
// Should match: IFPSTileLayout = 'small' | 'med' | 'hover' | 'list1' | 'list2' | 'card' | 'box' | 'image' ; // 'small' and 'med' must match IFPSCompactTileSize
export const fpsImageTileLayoutChoices = [
...fpsBoxTileLayoutChoices,
{ index: 6, key: 'image', text: 'Image View' },
];
// Should match: IFPSFileImagePriority = 'icon' | 'preview' | 'default' ;
export const fpsTileFileImagePriorityChoices = [
{ index: 0, key: 'icon', text: "Icon" },
{ index: 1, key: 'preview', text: "Preview Image" },
{ index: 1, key: 'default', text: "Default" },
{ index: 1, key: 'code', text: "Predetermined Logic" },
];
export function createFPSTileLayoutChoiceField(type) {
const choices = type === 'image' ? fpsImageTileLayoutChoices : type === 'box' ? fpsBoxTileLayoutChoices : fpsTileLayoutChoices;
const field = PropertyPaneDropdown('tileLayout', {
label: `Tile Layout`,
description: `Default Tile layout. You can toggle layouts live in webpart but this is the default when page loads.`,
options: choices,
});
return field;
}
// This constant can be reused in case of using 'Simple' mode instead of entire prop pane group.
// export const FPSTileLayoutChoiceProperty: IPropertyPaneField<any> = PropertyPaneDropdown('tileLayout', <IPropertyPaneDropdownProps>{
// label: `Tile Layout`,
// description: `Default Tile layout. You can toggle layouts live in webpart but this is the default when page loads.`,
// options: fpsTileLayoutChoices,
// });
// https://github.com/fps-solutions/LinkUp/issues/24
export function FPSTileWPGroup(wpProps, isCollapsed = false, tileChoice) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const groupFields = [];
// https://github.com/fps-solutions/LinkUp/issues/24
const propsEasyMode = wpProps.propsEasyMode;
groupFields.push(createFPSTileLayoutChoiceField(tileChoice));
if (propsEasyMode !== true) {
groupFields.push(PropertyPaneSlider('tileImgHeight', {
label: 'Image Height (pixels)',
min: 100,
max: 400,
step: 25,
}));
groupFields.push(PropertyPaneSlider('tileImgWidth', {
label: 'Image width (pixels)',
min: 100,
max: 500,
step: 25,
}));
/**
*
*
* NOTE WITH tileImgFit and tileImgCover...
* per https://github.com/fps-solutions/HubCon/issues/11
* It seems like timeImgFit should be CenterCover for the tileImgCover to work as expected.
*
*
*/
groupFields.push(PropertyPaneDropdown('tileImgFit', {
label: `Image Fit`,
options: imgFitChoices,
}));
// https://github.com/fps-solutions/HubCon/issues/11
groupFields.push(PropertyPaneLabel('tileImgCover', {
text: `Set Image Fit to 'CenterCover' for Image Cover setting to work properly.`,
}));
groupFields.push(PropertyPaneDropdown('tileImgCover', {
label: `Image Cover`,
options: imgCoverChoices,
}));
// https://github.com/mikezimm/pivottiles7/issues/306
groupFields.push(PropertyPaneTextField('tileImgBackground', {
label: `Image Background color`,
description: `'theme ; yellow' will set imageBackgrounds to theme and Icon backgrounds to yellow`,
// disabled: wpProps.ignoreList === true ? true : false,
}));
// https://github.com/mikezimm/pivottiles7/issues/306
groupFields.push(PropertyPaneToggle('tileTitleWrap', {
label: `Tile Title wrap`,
onText: `pre-wrap`,
offText: `no-wrap`,
// disabled: wpProps.ignoreList === true ? true : false,
}));
// https://github.com/mikezimm/pivottiles7/issues/306 tileHighlightColor
groupFields.push(PropertyPaneDropdown('tileHighlightColor', {
label: `Highlighted color`,
description: `Any html color code. 'yellow' will set the Tile Description text to be yellow and more readable.`,
options: highlightColorChoices,
}));
groupFields.push(PropertyPaneDropdown('tileFileImagePriority', {
label: `File Image Priority`,
options: fpsTileFileImagePriorityChoices,
}));
}
const ExportThisGroup = {
groupName: `Tile styles`,
isCollapsed: isCollapsed,
groupFields: groupFields
};
return ExportThisGroup;
}
//# sourceMappingURL=FPSTileWPGroup.js.map