@mikezimm/npmfunctions
Version:
Functions used in my SPFx webparts
216 lines (186 loc) • 7.56 kB
text/typescript
import {
// IPropertyPanePage,
// IPropertyPaneGroup,
// PropertyPaneLabel,
// IPropertyPaneLabelProps,
// PropertyPaneHorizontalRule,
PropertyPaneTextField,
// IPropertyPaneTextFieldProps,
// PropertyPaneLink,
// IPropertyPaneLinkProps,
PropertyPaneDropdown, IPropertyPaneDropdownProps,
// IPropertyPaneDropdownOption,
PropertyPaneToggle,
// IPropertyPaneConfiguration,
// PropertyPaneButton,
// PropertyPaneButtonType,
// PropertyPaneSlider, IPropertyPaneSliderProps,
PropertyPaneSlider
} from '@microsoft/sp-property-pane';
// import * as links from '../../Links/LinksRepos';
// import { camelToSentanceCase } from '../Strings/stringCase';
// import { createLink, createRepoLinks, IRepoLinks } from '../../Links/CreateLinks';
import { IFPSBasicToggleSetting } from './FPSInterfaces';
import { EveryoneAudienceChoices } from './Audiences';
/**
* 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 options - Basic',
isCollapsed: true ,
groupFields: fields
};
return optionsGroup;
}
/**
*
* @param forceBanner
* @param modifyBannerTitle
* @param modifyBannerStyle
* @param showBanner
* @param showAdvanced
* @param showNavigation - Adds Navigate to Home Page and Parent Site
*/
export function FPSBanner2Group( forceBanner: boolean, modifyBannerTitle: boolean, modifyBannerStyle: boolean, showBanner: boolean, showAdvanced: boolean, showNavigation: 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,
})
);
if ( showNavigation === true ) {
fields.push(
PropertyPaneToggle('showGoToHome', {
label: 'Show Go to Home Page Icon',
}) );
fields.push(
PropertyPaneToggle('showGoToParent', {
label: 'Show Got to Parent Site Icon',
}) );
fields.push(
PropertyPaneDropdown('homeParentGearAudience', <IPropertyPaneDropdownProps>{
label: 'Gear, Home, Parent audience',
options: EveryoneAudienceChoices,
}) );
}
fields.push(
PropertyPaneTextField('bannerStyle', {
label: 'Style options',
description: 'React.CSSProperties format like: "fontSize":"larger","color":"red"',
disabled: modifyBannerStyle !== true || showBanner !== true ? true : false,
}) );
fields.push(
PropertyPaneToggle('bannerHoverEffect', {
label: 'Banner Hover Effect',
disabled: modifyBannerStyle !== true || showBanner !== true ? true : false ,
}) );
let bannerGroup = { groupName: 'Banner',
isCollapsed: true ,
groupFields: fields
};
return bannerGroup;
}