@mikezimm/fps-library-v2
Version:
Library of reusable typescript/javascript functions, interfaces and constants
213 lines (211 loc) • 13.1 kB
JavaScript
/**
* CodeAnalizerComment: Updated 2 imports on 2024-09-22 14:49:52
* Update:: import { ISingleModernPageProps } to '@mikezimm/fps-core-v7/lib/components/molecules/ModernPages/Interfaces/ISingleModernPageProps;'
* Update:: import { ISingleModernPageState } to '@mikezimm/fps-core-v7/lib/components/molecules/ModernPages/Interfaces/ISingleModernPageProps;'
*/
/**
* CodeAnalizerComment: Updated 5 imports on 2024-09-21 23:07:24
* Update:: import { ISingleModernPageProps } to '@mikezimm/fps-core-v7/lib/components/molecules/ModernPages/Interfaces/ISingleModernPageProps;'
* Update:: import { ISingleModernPageState } to '@mikezimm/fps-core-v7/lib/components/molecules/ModernPages/Interfaces/ISingleModernPageProps;'
* Update:: import { IPagesContent } to '@mikezimm/fps-core-v7/lib/components/molecules/source-props/SitePages/IPagesContent;'
* Update:: import { DefaultSiteLogo } to '@mikezimm/fps-core-v7/lib/components/atoms/easy-icons/SystemIcons/DefaultEasyIcons;'
* Update:: import { getEasyIcon } to '@mikezimm/fps-core-v7/lib/components/atoms/easy-icons/functions/getEasyIcon;'
*/
import * as React from 'react';
require('@mikezimm/fps-styles/dist/ModernPages.css');
// import * as strings from 'AlvFinManWebPartStrings';
import ReactJson from '@microlink/react-json-view';
// import { makeToggleJSONCmd } from '../../../fpsReferences';
import { getDocWikiAPI } from "@mikezimm/fps-core-v7/lib/components/molecules/ModernPages/functions/getDocWikiAPI";
import { getModernHumanReadable } from "@mikezimm/fps-core-v7/lib/components/molecules/ModernPages/functions/processModernContent";
import { LimitedVersionPage } from './LimitedVersion';
import { PageDetailsComponent } from './PageDetails';
import { makeToggleJSONCmd } from '../../../atoms/Elements/ToggleJSONButton';
import { getItemProperties } from '../../SourceList/ItemPane/itemProperties';
import { getItemEmbed } from '../../SourceList/ItemPane/itemEmbed';
import { DefaultSiteLogo } from '@mikezimm/fps-core-v7/lib/components/atoms/easy-icons/SystemIcons/DefaultEasyIcons';
import { getEasyIcon } from '@mikezimm/fps-core-v7/lib/components/atoms/easy-icons/functions/getEasyIcon';
import { CurrentOrigin } from '@mikezimm/fps-core-v7/lib/components/molecules/source-props/WindowLocationConstants';
// const consoleLineItemBuild: boolean = false; // eslint-disable-line @typescript-eslint/no-unused-vars
export default class SingleModernPage extends React.Component {
constructor(props) {
super(props);
this.cke_editable = this.props.canvasOptions.addCkeEditToDiv !== false ? 'cke_editable' : '';
this.ToggleJSONCmd = makeToggleJSONCmd(this._toggleJSON.bind(this), 'Click for more details');
console.log('constructor:');
this.state = {
showPanelJSON: false,
showThisItem: this.props.page,
showPageDetails: false,
};
}
componentDidMount() {
console.log('SMP: componentDidMount:');
this.updateWebInfo('', false);
}
updateWebInfo(webUrl, listChangeOnly) {
console.log('SMP: updateWebInfo:');
if (this.props.page && this.props.showCanvasContent1 === true) {
getDocWikiAPI(this.props.page, this.props.source, this.props.canvasOptions, this.props.showCanvasContent1, this.updateModernState.bind(this));
}
}
/***
* d8888b. d888888b d8888b. db db d8888b. d8888b. .d8b. d888888b d88888b
* 88 `8D `88' 88 `8D 88 88 88 `8D 88 `8D d8' `8b `~~88~~' 88'
* 88 88 88 88 88 88 88 88oodD' 88 88 88ooo88 88 88ooooo
* 88 88 88 88 88 88 88 88~~~ 88 88 88~~~88 88 88~~~~~
* 88 .8D .88. 88 .8D 88b d88 88 88 .8D 88 88 88 88.
* Y8888D' Y888888P Y8888D' ~Y8888P' 88 Y8888D' YP YP YP Y88888P
*
*
*/
componentDidUpdate(prevProps) {
//Just rebuild the component
if (this.props.refreshId !== prevProps.refreshId) {
this.setState({ showThisItem: this.props.page });
}
else if (this.props.page && !prevProps.page) {
this.setState({ showThisItem: this.props.page });
}
else if (this.props.imageStyle !== prevProps.imageStyle) {
this.setState({ showThisItem: this.props.page });
}
else if (JSON.stringify(this.props.canvasOptions) !== JSON.stringify(prevProps.canvasOptions)) {
this.setState({ showThisItem: this.props.page, });
}
else if (this.props.page === null) {
//Do nothing if page is null
}
else if (this.props.page.ID !== prevProps.page.ID) {
this.setState({ showThisItem: this.props.page, });
}
}
render() {
const { showCanvasContent1, source } = this.props;
const { showThisItem, } = this.state;
if (!showThisItem) {
// const FetchingSpinner = <Spinner size={SpinnerSize.large} label={"Fetching Page ..."} style={{ padding: 30 }} />;
// return ( <div>{ FetchingSpinner }</div> );
return (React.createElement("div", null));
}
else {
const debugContent = this.props.debugMode !== true ? null : React.createElement("div", { className: 'flex2ColFullWidth', style: { cursor: 'default', marginLeft: '20px' } },
"App in debugMode - Change in Web Part Properties - Page Preferences. ",
React.createElement("b", null,
React.createElement("em", null, "Currently in SinglePage")));
let panelHeading = null;
let panelTitle = 'Unknown Title';
if (showThisItem.Title) {
panelTitle = showThisItem.Title;
}
else if (showThisItem.Title0) {
panelTitle = showThisItem.Title0;
}
else if (showThisItem.FileLeafRef) {
panelTitle = showThisItem.FileLeafRef;
}
let articleDesc = showThisItem ? showThisItem.Description : '';
panelHeading = React.createElement("div", { className: 'headerHeading', style: { paddingBottom: '20px' } },
React.createElement("h2", null, panelTitle),
articleDesc ? React.createElement("h3", null, "Description:") : null,
articleDesc);
let imageUrl = showThisItem && showThisItem.BannerImageUrl ? showThisItem.BannerImageUrl.Url : null;
// https://github.com/fps-solutions/HubCon/issues/97
if (this.props.source.EasyIcons && (!imageUrl || imageUrl.indexOf(DefaultSiteLogo) > -1))
imageUrl = getEasyIcon(this.props.source.EasyIcons, showThisItem, true, imageUrl);
const image = !showThisItem || !imageUrl ? null :
React.createElement("img", { className: 'headerImage', src: imageUrl, height: "100px", width: "100%", style: { objectFit: "contain" }, title: imageUrl });
const headerComponent = React.createElement("div", { className: 'modernPageHeader' },
debugContent,
image,
panelHeading,
PageDetailsComponent(showThisItem, this.props.debugMode));
/* eslint-disable dot-notation */
if (!showThisItem) {
return null;
//Add warning to link outside of our system.
}
else if (showThisItem && showThisItem['OData__OriginalSourceUrl'] && showThisItem['OData__OriginalSourceUrl'].indexOf(CurrentOrigin) < 0) { // eslint-disable-line dot-notation
//Link is external... Use different instructions
return (React.createElement("div", { style: { paddingTop: '15px' } },
headerComponent,
React.createElement("div", { style: { paddingBottom: '10px', fontWeight: 600 } },
"To go to article: ",
React.createElement("span", { style: { cursor: 'pointer', color: 'darkblue' }, onClick: this.openThisLink.bind(this, showThisItem['OData__OriginalSourceUrl']) }, "click here")),
React.createElement("div", { style: { color: 'red', } }, "Security check :) This is the full link you will be clicking on"),
React.createElement("div", null,
showThisItem['OData__OriginalSourceUrl'],
" ")));
}
else if (showCanvasContent1 !== true) {
return (React.createElement("div", { style: { paddingTop: '15px' } },
headerComponent,
React.createElement("div", null,
"To go to article: ",
React.createElement("span", { style: { cursor: 'pointer', color: 'darkblue' }, onClick: this.openArticleNewTab.bind(this, showThisItem) }, "click here")),
React.createElement("div", null,
"To open article in NEW full-size tab: ",
React.createElement("b", null, "CTRL-Click the Title"),
" "),
React.createElement("div", null,
"To show it right here: ",
React.createElement("b", null, "CTRL-ALT-Click the Title")),
React.createElement("div", null,
"To show it in a side panel: ",
React.createElement("b", null, "ALT-Click the Title"))));
}
else {
/**
* NOTE with setDisplayNone, in this type of replace, it is actually looking for \ AND " like \"
* If you search or replace \\\" it will not find or replace
* This specific target image is just the blank title image... does not adjust any other title images.
* https://github.com/fps-solutions/HubCon/issues/109
*/
const setDisplayNone = `src=\"/_layouts/15/images/sleektemplateimagetile.jpg\"`;
const hideLargeEmptyCanvasContent1 = !showThisItem || !showThisItem.CanvasContent1Str ? null :
showThisItem.CanvasContent1Str.replace(`${setDisplayNone} />`, `${setDisplayNone} style=\"display:none;\" />`);
const CanvasContent1 = !showThisItem || !showThisItem.CanvasContent1Str ? null :
React.createElement("div", null,
LimitedVersionPage(showThisItem, this.props.source),
React.createElement("div", { className: ['singleDangerouslyInnerHtml', this.cke_editable].join(' '), dangerouslySetInnerHTML: { __html: hideLargeEmptyCanvasContent1 } }));
if (CanvasContent1) {
articleDesc = null;
} //Remove Description because full article is shown below
const jsonContent = this.state.showPanelJSON !== true ? null : React.createElement("div", null,
React.createElement(ReactJson, { src: showThisItem, name: 'Summary', collapsed: false, displayDataTypes: true, displayObjectSize: true, enableClipboard: true, style: { padding: '20px 0px' } }));
// const fileEmbed = !showThisItem || !showThisItem.ServerRedirectedEmbedUrl ? null : <iframe src={ showThisItem.ServerRedirectedEmbedUrl } height='350px' width='100%' style={{paddingTop: '20px' }}/>;
const DetailsElement = this.state.showPanelJSON !== true ? null :
React.createElement("div", { style: { paddingTop: '1.5em' } },
getItemProperties({ item: showThisItem, primarySource: source, columns: ['Searched', 'Selected'], searchText: this.props.searchText }),
jsonContent);
return (React.createElement("div", { className: ['fps-modern-article', ''].join(' '), style: { paddingBottom: '3em' } },
headerComponent,
CanvasContent1,
getItemEmbed({ item: showThisItem }),
this.ToggleJSONCmd,
DetailsElement));
}
}
}
updateModernState(item) {
this.setState({
showThisItem: item
});
}
openArticleNewTab(item) {
window.open(item.File.ServerRelativeUrl, '_blank');
}
openThisLink(link) {
window.open(link, '_blank');
}
// export { openThisLinkInNewTab } from '../fpsPreferences';
// private clickOpenInNewTab( href ) {
// }
_toggleJSON() {
const newState = this.state.showPanelJSON === true ? false : true;
let result = this.state.showThisItem;
result = getModernHumanReadable(result);
this.setState({ showThisItem: result, showPanelJSON: newState });
}
}
//# sourceMappingURL=SingleModernPage.js.map