@mikezimm/npmfunctions
Version:
Functions used in my SPFx webparts
586 lines • 41.1 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
var Panel_1 = require("office-ui-fabric-react/lib/Panel");
var Pivot_1 = require("office-ui-fabric-react/lib/Pivot");
var MessageBar_1 = require("office-ui-fabric-react/lib/MessageBar");
var sp_core_library_1 = require("@microsoft/sp-core-library");
var Icon_1 = require("office-ui-fabric-react/lib/Icon");
// import { getHelpfullErrorV2 } from "../../../Services/Logging/ErrorHandler";
var StringToReactCSS_1 = require("../../../Services/PropPane/StringToReactCSS");
var bannerGearFunctions_1 = require("./bannerGearFunctions");
var properties_1 = require("../../../Services/Objects/properties");
var site_1 = require("../../../Services/Navigation/site");
var FPSExpandoramic_1 = require("../../../Services/DOM/Expando/FPSExpandoramic");
var defaults_1 = require("../../../HelpPanelOnNPM/onNpm/defaults");
var links = __importStar(require("../../../Links/LinksRepos"));
var WebPartLinks_1 = __importDefault(require("./WebPartLinks"));
var SinglePage_1 = __importDefault(require("../SinglePage/SinglePage"));
var react_json_view_1 = __importDefault(require("react-json-view"));
var tables_1 = require("../../../Performance/tables");
var component_1 = require("../../special/component");
require('./banner.css');
var pivotStyles = {
root: {
whiteSpace: "normal",
// textAlign: "center"
}
};
var pivotHeadingX = ''; //2022-01-31: Added Pivot Tiles
var pivotHeading0 = 'Why'; //2022-01-31: Added Pivot Tiles
var pivotHeading1 = 'Getting started'; //Templates
var pivotHeading2 = 'Basics'; //Templates
var pivotHeading3 = 'Advanced'; //Templates
var pivotHeading4 = 'Future'; //Templates
var pivotHeading5 = 'Dev'; //Templates
var pivotHeading6 = 'Errors'; //Templates
var pivotHeading7 = 'Tricks'; //Templates
var pivotHeading8 = 'About'; //Templates
var pivotHeading9 = 'Export'; //Templates
var pivotHeadingA = 'History'; //Templates
var pivotHeadingB = 'Health'; //Templates
var WebpartBanner = /** @class */ (function (_super) {
__extends(WebpartBanner, _super);
function WebpartBanner(props) {
var _this = _super.call(this, props) || this;
_this.hoverEffect = _this.props.hoverEffect === false ? false : true;
_this.dev = undefined; //devTable( ); https://github.com/mikezimm/ALVFinMan/issues/171
_this.wideToggle = _this.props.wideToggle === null || _this.props.wideToggle === undefined ? true : _this.props.wideToggle;
_this.hasNear = _this.props.nearElements.length > 0 ? true : false;
_this.hasFar = _this.props.farElements.length > 0 ? true : false;
_this.hasNearOrFar = _this.hasNear === true || _this.hasFar === true ? true : false;
_this.nearElements = [];
_this.showSettingsAsPivot = false;
_this.settingsContent = null;
_this.isShowTricks = _this.props.showTricks;
_this.isSiteAdmin = _this.props.pageContext.legacyPageContext.isSiteAdmin;
_this.isSiteOwner = _this.isSiteAdmin === true ? true : _this.props.pageContext.legacyPageContext.isSiteOwner;
_this.PropPaneCmdStyles = _this.makeYellowStyles(_this.props.bannerCmdReactCSS);
_this._selectedIndex = function (item) {
//This sends back the correct pivot category which matches the category on the tile.
var e = event;
var itemKey = item.props.itemKey;
_this.setState({ selectedKey: itemKey });
};
var pageContext = _this.props.pageContext;
var LimtedDowload = null;
var spFeatures = pageContext.spFeatureInfo && pageContext.spFeatureInfo.features && pageContext.spFeatureInfo.features.length > 0 ? pageContext.spFeatureInfo.features : null;
if (spFeatures) {
spFeatures.map(function (feature) {
if (feature.key === 'FollowingContent') {
if (feature.value && feature.value.enabled === true) {
}
if (feature.value && feature.value.version === 2) {
}
}
});
}
var keySiteProps = {
SiteLogoUrl: pageContext.web.logoUrl,
LimitedDownload: null,
WebTimezone: (0, properties_1.checkDeepProperty)(pageContext, ['web', 'timeZoneInfo', 'description'], 'ShortError'),
WebLanguage: "".concat((0, properties_1.checkDeepProperty)(pageContext, ['cultureInfo', 'currentCultureName'], 'ShortError'), " - ").concat((0, properties_1.checkDeepProperty)(pageContext, ['web', 'language'], 'ShortError')),
UserTimezone: (0, properties_1.checkDeepProperty)(pageContext, ['user', 'timeZoneInfo', 'description'], 'ShortError'),
UserTimePref: (0, properties_1.checkDeepProperty)(pageContext, ['user', 'preferUserTimeZone'], 'ShortError'),
BrokenPermissions: null, // TBD
};
_this.updateNearElements(keySiteProps);
_this.state = {
keySiteProps: keySiteProps,
showPanel: false,
selectedKey: _this.props.replacePanelHTML ? pivotHeadingX : pivotHeading0,
panelType: Panel_1.PanelType.medium,
showSettings: false,
expandoramicMode: _this.props.enableExpandoramic === true && _this.props.expandoDefault === true ? true : false,
renderCount: 0,
showPropsHelp: false,
};
return _this;
}
WebpartBanner.prototype.getRandomTip = function (webParTipsX) {
return webParTipsX[Math.floor(Math.random() * webParTipsX.length)];
};
WebpartBanner.prototype.showSettings = function () { this.setState({ showSettings: !this.state.showSettings }); };
WebpartBanner.prototype.makeYellowStyles = function (defStyles) {
if (!defStyles) {
return {};
}
else {
var newStyle = JSON.parse(JSON.stringify(defStyles));
newStyle.color = 'black';
newStyle.background = 'yellow';
newStyle.fontSize = '20px';
newStyle.fontWeight = 400;
newStyle.padding = '7px';
newStyle.marginLeft = '10px';
return newStyle;
}
};
WebpartBanner.prototype.createHistoryItem = function (item) {
if (item.changes.length === 0) {
return null;
}
var changes = item.changes.map(function (change, idx) {
return React.createElement("tr", null,
React.createElement("td", null,
change.prop,
" : "),
React.createElement("td", { title: change.value }, change.value ? change.value : 'Empty'));
});
return React.createElement("div", { className: 'history-item' },
React.createElement("div", null,
item.user,
" : ",
new Date(item.time).toLocaleString()),
React.createElement("table", null, changes));
};
WebpartBanner.prototype.jumpToParentSite = function () {
var e = event;
(0, site_1.goToParentSite)(e, this.props.pageContext);
};
WebpartBanner.prototype.jumpToHomePage = function () {
var e = event;
(0, site_1.goToHomePage)(e, this.props.pageContext);
};
WebpartBanner.prototype.updateNearElements = function (keySiteProps) {
var _a;
this.nearElements = [];
if (this.props.showBeAUserIcon === true && this.props.beAUserFunction) {
this.nearElements.push(React.createElement(Icon_1.Icon, { iconName: 'Glasses', onClick: this.props.beAUserFunction, style: this.props.bannerCmdReactCSS, title: "Simulate a typical visitor experience" }));
this.hasNear = true;
this.hasNearOrFar = true;
}
if (this.props.showBannerGear === true) {
this.nearElements.push(React.createElement(Icon_1.Icon, { iconName: 'PlayerSettings', onClick: this.showSettings.bind(this), style: this.props.bannerCmdReactCSS, title: "Show Settings quick links and info" }));
this.hasNear = true;
this.hasNearOrFar = true;
// (property) pageContext: PageContext
// Argument of type 'import("C:/Users/dev/Documents/GitHub/ALVFinMan7/node_modules/@mikezimm/npmfunctions/node_modules/@microsoft/sp-page-context/dist/index-internal").PageContext' is not assignable to parameter of type 'import("C:/Users/dev/Documents/GitHub/ALVFinMan7/node_modules/@microsoft/sp-page-context/dist/index-internal").PageContext'.
// Type 'PageContext' is missing the following properties from type 'PageContext': _searchData, _getUrlParser, _isQueryStringParamsKSActivatedts(2345)
//2022-04-19: Had to add as any to pageContext due to error
var bannerContent = (0, bannerGearFunctions_1.bannerSettingsContent)(this.props.showTricks, this.props.pageContext, keySiteProps, defaults_1.defaultBannerCommandStyles, this.props.bannerWidth, this.props.forceNarrowStyles);
this.settingsContent = bannerContent.content;
// console.log('b4 showSettingsAsPivot, forceNarrowStyles', this.showSettingsAsPivot, this.props.forceNarrowStyles );
this.showSettingsAsPivot = this.props.forceNarrowStyles === true ? true : bannerContent.showSettingsAsPivot;
// console.log('af showSettingsAsPivot, forceNarrowStyles', this.showSettingsAsPivot, this.props.forceNarrowStyles );
}
if (this.props.enableExpandoramic === true) {
var thisIcon = this.props.expandoDefault === true ? 'BackToWindow' : 'ChromeFullScreen';
this.nearElements.push(React.createElement(Icon_1.Icon, { iconName: 'ChromeFullScreen', onClick: this._toggleExpando.bind(this), style: this.props.bannerCmdReactCSS, title: "Toggle Expandoramic Mode" }));
this.hasNear = true;
this.hasNearOrFar = true;
}
if (this.props.onHomePage !== true && this.props.showGoToHome === true) {
var titleHome = 'Go to Home Page of current site';
this.hasNear = true;
this.hasNearOrFar = true;
//This is the easy fix that assumes the page is not in a folder in site pages.
this.nearElements.push(React.createElement("div", { style: { paddingRight: undefined }, className: '', title: titleHome },
React.createElement(Icon_1.Icon, { iconName: 'Home', onClick: this.jumpToHomePage.bind(this), style: this.props.bannerCmdReactCSS })));
}
if (this.props.showGoToParent === true && this.props.pageContext.site.absoluteUrl !== this.props.pageContext.web.absoluteUrl) {
var title = 'Go to parent site';
this.hasNear = true;
this.hasNearOrFar = true;
this.nearElements.push(React.createElement("div", { style: { paddingRight: undefined }, className: '', title: title },
React.createElement(Icon_1.Icon, { iconName: 'Up', onClick: this.jumpToParentSite.bind(this), style: this.props.bannerCmdReactCSS })));
}
(_a = this.nearElements).push.apply(_a, this.props.nearElements);
};
// Tried this to get it to update when prop pane was changed but it does
WebpartBanner.prototype.componentDidUpdate = function (prevProps) {
var rebuildNearElements = JSON.stringify(this.props.bannerCmdReactCSS) !== JSON.stringify(prevProps.bannerCmdReactCSS) ? true : false;
if (this.props.webpartHistory.thisInstance && (JSON.stringify(this.props.webpartHistory.thisInstance.changes) !==
JSON.stringify(prevProps.webpartHistory.thisInstance.changes))) {
rebuildNearElements = true;
}
if (this.props.beAUser != prevProps.beAUser) {
rebuildNearElements = true;
}
if (this.props.infoElement != prevProps.infoElement) {
rebuildNearElements = true;
}
if (this.props.hoverEffect != prevProps.hoverEffect) {
rebuildNearElements = true;
this.hoverEffect = this.props.hoverEffect === false ? false : true;
}
if (this.props.forceNarrowStyles != prevProps.forceNarrowStyles) {
rebuildNearElements = true;
}
//Check if cmd style props changed and update EditPropPane styles
if (JSON.stringify(this.props.bannerCmdReactCSS) != JSON.stringify(prevProps.bannerCmdReactCSS)) {
this.PropPaneCmdStyles = this.makeYellowStyles(this.props.bannerCmdReactCSS);
rebuildNearElements = true;
}
if (prevProps.refreshId !== this.props.refreshId) {
rebuildNearElements = true;
}
if (rebuildNearElements) {
this.updateNearElements(this.state.keySiteProps);
rebuildNearElements = true;
var renderCount = this.state.renderCount + 1;
this.setState({ renderCount: renderCount });
}
};
WebpartBanner.prototype.render = function () {
var _this = this;
var _a = this.props, showBanner = _a.showBanner, showTricks = _a.showTricks, showRepoLinks = _a.showRepoLinks;
var showPanel = this.state.showPanel;
if (showBanner !== true) {
return (React.createElement("div", null));
}
else {
var propsHelp = null;
if (this.props.WebPartHelpElement) {
propsHelp = React.createElement("div", { className: this.state.showPropsHelp !== true ? 'fps-pph-hide' : 'fps-pph-show' }, this.props.WebPartHelpElement ? this.props.WebPartHelpElement : null);
}
// Estimated width pixels used by banner. Used to determine max size of the title component.
var usedWidth = 40; //20px padding on outside of all elements
usedWidth += this.nearElements.length * 43 + this.props.farElements.length * 43; //Add 45px per icon button
// usedWidth += 40; //Padding between near/far elements and the text part of heading
var remainingWidth = this.props.bannerWidth - usedWidth - 40;
var moreInfoText = this.props.infoElement ? this.props.infoElement : 'More Information';
var bannerTitleText = this.props.title && this.props.title.length > 0 ? this.props.title.trim() : 'FPS Webpart';
var textWidth = (moreInfoText.length + bannerTitleText.length) * 19 + 40; //characters * 19px + 40 padding
if (bannerTitleText && ['hide', 'ignore', 'empty'].indexOf(bannerTitleText.toLowerCase()) >= 0) {
bannerTitleText = '';
}
// If space between < estimated space needed, apply ratio, else just leave large on both sides so the math works.
var moreInfoRatio = textWidth > remainingWidth ? moreInfoText.length / (moreInfoText.length + bannerTitleText.length) : .7;
var titleRatio = textWidth > remainingWidth ? 1 - moreInfoRatio : .7;
if (this.props.bannerWidth < 700 && moreInfoText.length > 5) {
moreInfoText = moreInfoText === 'More Information' ? 'Info' : moreInfoText.substring(0, 5) + '...';
}
// usedWidth += 18 * bannerTitleText.length; //Est 18px per character of title
var bannerStyle = {};
if (this.props.bannerReactCSS) {
bannerStyle = this.props.bannerReactCSS;
}
else if (this.props.styleString) {
bannerStyle = (0, StringToReactCSS_1.createStyleFromString)(this.props.styleString, { background: 'green' }, 'bannerStyle in banner/component.tsx ~ 81');
}
if (!bannerStyle.height) {
bannerStyle.height = '35px';
}
if (!bannerStyle.paddingLeft) {
bannerStyle.paddingLeft = '20px';
}
if (!bannerStyle.paddingRight) {
bannerStyle.paddingRight = '20px';
}
if (this.hasNearOrFar === false) {
bannerStyle.cursor = 'pointer';
}
var classNames = ['container', this.hoverEffect === true ? 'opacity' : null, 'flex-container'].join(' ');
// On clicks need to be defined like this and only put on specific elements in certain cases.
// OR ELSE they will all get fired messing up panel open
var bannerOnClick = this.hasNearOrFar !== true ? this._openPanel.bind(this) : undefined;
var titleInfoOnClick = this.hasNearOrFar === true ? this._openPanel.bind(this) : undefined;
var titleInfoCursor = this.hasNearOrFar === true ? 'pointer' : undefined;
var styleFlexElements = { padding: '10px', cursor: titleInfoCursor };
//Added for https://github.com/mikezimm/PageInfo/issues/30
var isPinned = this.props.domElement && this.props.domElement.offsetParent && this.props.domElement.offsetParent.classList.contains('pinMeWebPartDefault') ? true : false;
var isPageInfo = this.props.gitHubRepo.desc === links.gitRepoPageInfoSmall.desc ? true : false;
var maxWidth = isPinned === true || isPageInfo === true ? '200px' : titleRatio * remainingWidth;
var styleLeftTitle = { padding: '10px', cursor: titleInfoCursor, maxWidth: maxWidth, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' };
var styleRightTitle = { padding: '10px', cursor: titleInfoCursor, maxWidth: moreInfoRatio * remainingWidth, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' };
var isMoreInfoButton = typeof this.props.infoElement === 'string' && this.props.infoElement.toLowerCase().indexOf('iconname=') === 0 ? true : false;
var infoElement = [];
if (this.props.feedbackEmail) {
infoElement.push(React.createElement(Icon_1.Icon, { title: 'Submit Feedback', iconName: 'Feedback', onClick: this.sendFeedback.bind(this), style: this.props.bannerCmdReactCSS }));
}
;
if (isMoreInfoButton === true) {
var iconName = this.props.infoElement.split('=')[1];
infoElement.push(React.createElement(Icon_1.Icon, { iconName: iconName, onClick: titleInfoOnClick, style: this.props.bannerCmdReactCSS, title: "More Information on webpart" }));
}
else {
infoElement.push(React.createElement("div", { style: styleRightTitle, onClick: titleInfoOnClick, title: 'More Information on webpart' }, moreInfoText));
}
if (this.props.displayMode === sp_core_library_1.DisplayMode.Edit && this.props.WebPartHelpElement) {
infoElement.push(
//Found I had to makeYellowStyles every render to make this work.
React.createElement(Icon_1.Icon, { iconName: 'OpenEnrollment', onClick: this.togglePropsHelp.bind(this), style: this.makeYellowStyles(this.props.bannerCmdReactCSS), title: 'Property Pane Help' }));
}
var appendTitle = this.props.appendTitle ? this.props.appendTitle : '';
var bannerLeft = this.nearElements.length === 0 ? React.createElement("div", { style: styleFlexElements, onClick: titleInfoOnClick },
" ",
bannerTitleText,
" ") :
React.createElement("div", { className: 'flex-left-nowrap-start' },
this.nearElements,
React.createElement("div", { style: styleLeftTitle, onClick: titleInfoOnClick, title: bannerTitleText },
" ",
bannerTitleText,
" ",
appendTitle,
" "));
var bannerRight = this.props.farElements.length === 0 && infoElement.length === 0 ? React.createElement("div", { style: styleFlexElements, onClick: titleInfoOnClick }, moreInfoText) :
React.createElement("div", { className: 'flex-left-nowrap-start' }, __spreadArray(__spreadArray([], this.props.farElements, true), infoElement, true));
var showSettingStyle = this.showSettingsAsPivot === true ? 'show-settings show-settings-pivot' : 'show-settings show-settings-flex';
console.log('showSettingStyle ~ 326', showSettingStyle);
var bannerContent = React.createElement("div", null,
React.createElement("div", { className: classNames, style: bannerStyle, onClick: bannerOnClick },
bannerLeft,
bannerRight),
React.createElement("div", { className: this.state.showSettings ? showSettingStyle : 'hide-settings', style: {} }, this.settingsContent));
var thisPage = null;
var panelContent = null;
if (showPanel === true && this.props.showFullPanel !== true) {
var bonusHTML1 = this.props.bonusHTML1 ? this.props.bonusHTML1 : null;
var panelPerformance = this.props.panelPerformance ? (0, tables_1.createPerformanceTableVisitor)(this.props.panelPerformance, []) : null;
var bonusHTML2 = this.props.bonusHTML2 ? this.props.bonusHTML2 : null;
panelContent = React.createElement("div", null,
this.props.replacePanelHTML,
bonusHTML1 ? React.createElement("div", null, bonusHTML1) : null,
panelPerformance ? React.createElement("div", null, panelPerformance) : null,
bonusHTML2 ? React.createElement("div", null, bonusHTML2) : null);
}
else if (showPanel === true) {
var webPartLinks = React.createElement(WebPartLinks_1.default, { parentListURL: '', childListURL: '', parentListName: '', childListName: '', repoObject: this.props.gitHubRepo, showRepoLinks: this.props.showRepoLinks });
var thisWindow = window;
var content = null;
// let showMedical = this.isShowTricks && ( thisWindow.FPSUser || thisWindow.FPSOptions ) ? true : false;
var showMedical = this.isShowTricks === true && (thisWindow.FPSUser || thisWindow.FPSOptions) ? true : false;
var bonusHTML1 = this.props.bonusHTML1 ? this.props.bonusHTML1 : null;
var panelPerformance = this.props.panelPerformance ? (0, tables_1.createPerformanceTableVisitor)(this.props.panelPerformance, []) : null;
var bonusHTML2 = this.props.bonusHTML2 ? this.props.bonusHTML2 : null;
if (this.state.selectedKey === pivotHeadingX) {
console.log('Banner component -build content');
content = React.createElement("div", null,
React.createElement("div", { style: { padding: '10px 20px 20px 20px', background: 'yellow', marginTop: '20px' } }, this.props.replacePanelWarning),
React.createElement("div", null, this.props.replacePanelHTML),
bonusHTML1 ? React.createElement("div", null, bonusHTML1) : null,
panelPerformance ? React.createElement("div", null, panelPerformance) : null,
bonusHTML2 ? React.createElement("div", null, bonusHTML2) : null);
// import { whyContent } from './HelpPanel/Content/Whyme';
// import { aboutTable } from './HelpPanel/Content/About';
// import { gettingStartedContent } from './HelpPanel/Content/GettingStarted';
// import { errorsContent } from './HelpPanel/Content/Errors';
// import { advancedContent } from './HelpPanel/Content/Advanced';
// import { futureContent } from './HelpPanel/Content/FuturePlans';
// import { basicsContent } from './HelpPanel/Content/Basics';
// import { tricksTable } from './HelpPanel/Content/Tricks';
// import { webParTips } from './HelpPanel/Content/Tips';
}
else if (this.state.selectedKey === pivotHeading1) {
content = this.props.contentPages.gettingStartedContent;
}
else if (this.state.selectedKey === pivotHeading2) {
content = this.props.contentPages.basicsContent;
}
else if (this.state.selectedKey === pivotHeading3) {
content = this.props.contentPages.advancedContent;
}
else if (this.state.selectedKey === pivotHeading4) {
content = this.props.contentPages.futureContent;
}
else if (this.state.selectedKey === pivotHeading5) {
content = this.dev;
}
else if (this.state.selectedKey === pivotHeading6) {
content = this.props.contentPages.errorsContent;
}
else if (this.state.selectedKey === pivotHeading7) {
content = this.props.contentPages.tricksTable;
}
else if (this.state.selectedKey === pivotHeading8) {
content = this.props.contentPages.aboutTable;
}
else if (this.state.selectedKey === pivotHeading0) { //2022-01-31: Added Pivot Tiles
content = this.props.contentPages.whyContent;
}
else if (this.state.selectedKey === pivotHeading9) { //2022-01-31: Added Pivot Tiles
content = React.createElement("div", { id: "CommandsJSONPanel", style: { paddingTop: '20px' } },
React.createElement("h3", null, "Summary of Exportable Properties"),
React.createElement(react_json_view_1.default, { src: this.props.exportProps, name: 'Export Properties', collapsed: false, displayDataTypes: true, displayObjectSize: true, enableClipboard: true, style: { padding: '10px 0px' } }),
React.createElement(react_json_view_1.default, { src: this.props.webpartHistory, name: 'Webpart History', collapsed: true, displayDataTypes: true, displayObjectSize: true, enableClipboard: true, style: { padding: '10px 0px' } }));
}
else if (this.state.selectedKey === pivotHeadingA) { //2022-01-31: Added Pivot Tiles
var thisInstance = this.createHistoryItem(this.props.webpartHistory.thisInstance);
var thisInstanceChanges = this.props.webpartHistory.thisInstance.changes.length === 0 ? null : React.createElement("div", null,
React.createElement("div", { style: { fontSize: 'large', textDecoration: 'underline' } }, "This edit session"),
thisInstance);
var priorHistoryChanges = null;
if (this.props.webpartHistory.history && this.props.webpartHistory.history.length > 0) {
var priorHistory_1 = [];
this.props.webpartHistory.history.map(function (item) {
if (_this.props.webpartHistory.thisInstance.time !== item.time) {
priorHistory_1.push(_this.createHistoryItem(item));
}
});
priorHistoryChanges = React.createElement("div", null,
React.createElement("div", { style: { fontSize: 'large', textDecoration: 'underline' } }, "Previous edit sessions"),
priorHistory_1);
}
content = React.createElement("div", { id: "HistoryPanel", style: { paddingTop: '20px' } },
thisInstanceChanges,
priorHistoryChanges);
}
else if (this.state.selectedKey === pivotHeadingB) { //2022-01-31: Added Pivot Tiles
if (showMedical === true) {
var medicalElements = [];
if (thisWindow.FPSUser) {
medicalElements.push(React.createElement(react_json_view_1.default, { src: thisWindow.FPSUser, name: 'FPSUser', collapsed: true, displayDataTypes: true, displayObjectSize: true, enableClipboard: false, style: { padding: '10px 0px' } }));
}
if (thisWindow.FPSUser) {
medicalElements.push(React.createElement(react_json_view_1.default, { src: thisWindow.FPSOptions, name: 'FPSOptions', collapsed: false, displayDataTypes: true, displayObjectSize: true, enableClipboard: false, style: { padding: '10px 0px' } }));
}
content = React.createElement("div", { id: "MedicalPanel", style: { paddingTop: '20px' } }, medicalElements);
}
}
if (this.state.selectedKey === pivotHeading9 || this.state.selectedKey === pivotHeadingA || this.state.selectedKey === pivotHeadingB || this.state.selectedKey === pivotHeadingX) {
thisPage = content;
}
else {
thisPage = content === undefined ? undefined : React.createElement(SinglePage_1.default, { allLoaded: true, showInfo: true, content: content });
}
var tipHeaderStyle = { paddingRight: '10px', textAlign: 'left' };
var tipsTable = React.createElement("table", null,
React.createElement("tr", null,
React.createElement("th", { style: tipHeaderStyle }, "Do this"),
React.createElement("th", { style: tipHeaderStyle }, "Where"),
React.createElement("th", { style: { textAlign: 'left' } }, "Result")),
this.getRandomTip(this.props.contentPages.webParTips));
var tips = this.props.contentPages.webParTips.length === 0 ? null :
React.createElement(MessageBar_1.MessageBar, { messageBarType: MessageBar_1.MessageBarType.warning },
React.createElement("div", { style: { fontWeight: 600, fontSize: 'large', marginBottom: '12px' } }, "Pro TIP:"),
React.createElement("div", { style: { minHeight: '30px' } }, tipsTable));
var wideIcon = this.wideToggle !== true ? null : React.createElement(Icon_1.Icon, { iconName: this.state.panelType === Panel_1.PanelType.medium ? 'MaximumValue' : 'MinimumValue', style: { fontSize: 'xx-large', cursor: 'pointer' }, onClick: this._panelWidth.bind(this) });
var showExport = this.props.showExport === true && this.props.exportProps !== null ? true : false;
var showHistory = this.props.webpartHistory ? true : false;
var panelTitle = this.props.panelTitle;
if (panelTitle && ['hide', 'ignore', 'empty'].indexOf(panelTitle.toLowerCase()) >= 0) {
panelTitle = this.props.gitHubRepo.desc;
}
panelContent = React.createElement("div", { style: { paddingBottom: '50px' } },
tips,
webPartLinks,
React.createElement("div", { style: { display: 'flex', flexWrap: 'nowrap', justifyContent: 'space-between', alignItems: 'center' } },
React.createElement("h3", null,
" ",
panelTitle),
React.createElement("div", { title: this.state.panelType === Panel_1.PanelType.medium ? 'Make panel wider' : 'Make panel narrower' }, wideIcon)),
React.createElement(Pivot_1.Pivot, { linkFormat: Pivot_1.PivotLinkFormat.links, linkSize: Pivot_1.PivotLinkSize.normal, onLinkClick: this._selectedIndex.bind(this) },
this.props.replacePanelHTML == '' ? undefined : React.createElement(Pivot_1.PivotItem, { headerText: pivotHeadingX, ariaLabel: pivotHeadingX, title: pivotHeadingX, itemKey: pivotHeadingX, itemIcon: 'SunQuestionMark' }),
this.props.contentPages.whyContent === undefined ? undefined : React.createElement(Pivot_1.PivotItem, { headerText: pivotHeading0, ariaLabel: pivotHeading0, title: pivotHeading0, itemKey: pivotHeading0, itemIcon: 'QandA' }),
this.props.contentPages.gettingStartedContent === undefined ? undefined : React.createElement(Pivot_1.PivotItem, { headerText: pivotHeading1, ariaLabel: pivotHeading1, title: pivotHeading1, itemKey: pivotHeading1, itemIcon: undefined }),
this.props.contentPages.basicsContent === undefined ? undefined : React.createElement(Pivot_1.PivotItem, { headerText: pivotHeading2, ariaLabel: pivotHeading2, title: pivotHeading2, itemKey: pivotHeading2, itemIcon: undefined }),
this.props.contentPages.advancedContent === undefined ? undefined : React.createElement(Pivot_1.PivotItem, { headerText: pivotHeading3, ariaLabel: pivotHeading3, title: pivotHeading3, itemKey: pivotHeading3, itemIcon: undefined }),
this.props.contentPages.futureContent === undefined ? undefined : React.createElement(Pivot_1.PivotItem, { headerText: pivotHeading4, ariaLabel: pivotHeading4, title: pivotHeading4, itemKey: pivotHeading4, itemIcon: 'RenewalFuture' }),
this.props.contentPages.errorsContent === undefined ? undefined : React.createElement(Pivot_1.PivotItem, { headerText: pivotHeading6, ariaLabel: pivotHeading6, title: pivotHeading6, itemKey: pivotHeading6, itemIcon: 'Warning12' }),
this.dev === undefined ? undefined : React.createElement(Pivot_1.PivotItem, { headerText: undefined, ariaLabel: pivotHeading5, title: pivotHeading5, itemKey: pivotHeading5, itemIcon: 'TestAutoSolid' }),
showTricks !== true || this.props.contentPages.tricksTable === undefined ? undefined : React.createElement(Pivot_1.PivotItem, { headerText: undefined, ariaLabel: pivotHeading7, title: pivotHeading7, itemKey: pivotHeading7, itemIcon: 'AutoEnhanceOn' }),
this.props.contentPages.aboutTable === undefined ? undefined : React.createElement(Pivot_1.PivotItem, { headerText: undefined, ariaLabel: pivotHeading8, title: pivotHeading8, itemKey: pivotHeading8, itemIcon: 'Info' }),
showExport !== true ? null : React.createElement(Pivot_1.PivotItem, { headerText: undefined, ariaLabel: pivotHeading9, title: pivotHeading9, itemKey: pivotHeading9, itemIcon: 'Export' }),
showHistory !== true ? null : React.createElement(Pivot_1.PivotItem, { headerText: undefined, ariaLabel: pivotHeadingA, title: pivotHeadingA, itemKey: pivotHeadingA, itemIcon: 'FullHistory' }),
showMedical !== true ? null : React.createElement(Pivot_1.PivotItem, { headerText: undefined, ariaLabel: pivotHeadingB, title: pivotHeadingB, itemKey: pivotHeadingB, itemIcon: 'Medical' })),
thisPage);
}
var bannerPanel = React.createElement("div", null,
React.createElement(Panel_1.Panel, { isOpen: showPanel,
// this prop makes the panel non-modal
isBlocking: true, onDismiss: this._closePanel.bind(this), closeButtonAriaLabel: "Close", type: this.state.panelType, isLightDismiss: true }, panelContent));
var SpecialElement = this.props.SpecialMessage ? (0, component_1.createSpecialElement)(this.props.SpecialMessage) : undefined;
return (React.createElement("div", { className: 'banner-component' },
SpecialElement,
bannerContent,
propsHelp,
bannerPanel));
}
};
WebpartBanner.prototype._toggleExpando = function () {
var newMode = this.state.expandoramicMode === true ? false : true;
(0, FPSExpandoramic_1.setExpandoRamicMode)(this.props.domElement, newMode, this.props.expandoStyle, this.props.expandAlert, this.props.expandConsole, this.props.expandoPadding, this.props.pageLayout);
// if ( this.state.expandoramicMode === true ) {
this.setState({ expandoramicMode: newMode, });
// } else {
// this.setState({ showPanel: true,});
// }
};
WebpartBanner.prototype._closePanel = function () {
this.setState({ showPanel: false, });
};
WebpartBanner.prototype._openPanel = function (event) {
var textCallback = event.currentTarget.dataset.callback;
if (textCallback && textCallback.length > 0) {
//Do Nothing
}
else {
this.setState({ showPanel: true, });
}
};
WebpartBanner.prototype._panelWidth = function () {
var newPanelType = this.state.panelType !== Panel_1.PanelType.medium ? Panel_1.PanelType.medium : Panel_1.PanelType.large;
this.setState({ panelType: newPanelType, });
};
WebpartBanner.prototype.togglePropsHelp = function () {
var newState = this.state.showPropsHelp === true ? false : true;
this.setState({ showPropsHelp: newState });
};
WebpartBanner.prototype.sendFeedback = function () {
var lbreak = '%0D%0A';
var pageName = window.location.pathname.substring(window.location.pathname.lastIndexOf("/") + 1);
var mailTemplate = "mailto:".concat(this.props.feedbackEmail);
// let mailTemplate = `mailto:${`UpdateEmail@someday.com`}`;
mailTemplate += "?subject=".concat(this.props.gitHubRepo.desc, " Webpart Question or Issue on PAGE: ").concat(pageName);
mailTemplate += "&body=Add your question or comment here: ".concat(lbreak).concat(lbreak).concat(lbreak);
mailTemplate += "Page Name: ".concat(pageName).concat(lbreak).concat(lbreak);
mailTemplate += "Link to page:".concat(lbreak).concat(window.location.href).concat(lbreak).concat(lbreak);
mailTemplate += "Best Regards, ".concat(lbreak).concat(lbreak);
window.open(mailTemplate);
};
return WebpartBanner;
}(React.Component));
exports.default = WebpartBanner;
//# sourceMappingURL=component.js.map