@mikezimm/fps-library-v2
Version:
Library of reusable typescript/javascript functions, interfaces and constants
123 lines (122 loc) • 7.27 kB
JavaScript
/**
* CodeAnalizerComment: Updated 1 imports on 2024-09-21 23:07:24
* Update:: import { IPagesContent } to '@mikezimm/fps-core-v7/lib/components/molecules/source-props/SitePages/IPagesContent;'
*/
import * as React from 'react';
import ReactJson from '@microlink/react-json-view';
import { makeToggleJSONCmd } from '../../../atoms/Elements/ToggleJSONButton';
import { getDateStampRow } from '../../../atoms/WhoDunItRow/getDateStampRow';
import { getGoToLinks } from '../../../atoms/Links/getGoToLinks';
import { getItemProperties } from './itemProperties';
import { getItemEmbed } from './itemEmbed';
require('@mikezimm/fps-styles/dist/fpsGeneralCSS.css');
require('@mikezimm/fps-styles/dist/sourceItemPane.css');
export default class ItemPane extends React.Component {
constructor(props) {
super(props);
this.ToggleJSONCmd = makeToggleJSONCmd(this._toggleJSON.bind(this), 'Click for more details');
console.log('constructor:');
this.state = {
showPanelJSON: false,
showThisItem: this.props.item,
};
}
async componentDidMount() {
console.log('componentDidMount:');
await this.updateWebInfo('', false);
}
async updateWebInfo(webUrl, listChangeOnly) {
console.log('updateWebInfo:');
if (this.props.item && this.props.showCanvasContent1 === true) {
// getDocWiki( 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
console.log('ItemPane', this.props);
// refresh any changes in these props:
const compareProps = ['refreshId', 'imageStyle', 'showJSONDetail', 'showHeading', 'showDateStamps', 'showItemLink', 'showPermsLink', 'showListLink',];
let itemRefreshed = false;
compareProps.map(testProp => {
// here casting testProp as a valid key because casting as any throws a linting error
if (itemRefreshed === false && this.props[testProp] !== prevProps[testProp]) {
itemRefreshed = true;
this.setState({ showThisItem: this.props.item });
}
});
const compareStringy = ['canvasOptions',];
compareStringy.map(testProp => {
// here casting testProp as a valid key because casting as any throws a linting error
if (itemRefreshed === false && JSON.stringify(this.props[testProp]) !== JSON.stringify(prevProps[testProp])) {
itemRefreshed = true;
this.setState({ showThisItem: this.props.item });
}
});
}
render() {
const { primarySource, topButtons, debugMode, showCanvasContent1, showJSONDetail, showHeading, showDateStamps, showPermsLink, showItemLink, showListLink, showEmbed, } = this.props; // eslint-disable-line @typescript-eslint/no-unused-vars
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", { style: { cursor: 'default', marginLeft: '20px' } },
"App in debugMode ",
React.createElement("b", null,
React.createElement("em", null, "Currently in ItemPane")));
let panelTitle = 'Unknown Title';
if (showThisItem.Title) {
panelTitle = showThisItem.Title;
}
else if (showThisItem.Title0) {
panelTitle = showThisItem.Title0;
}
else if (showThisItem.FileLeafRef) {
panelTitle = showThisItem.FileLeafRef;
}
const panelHeading = showHeading === false ? undefined : React.createElement("div", { className: 'fps-gen-flexColWidth100' },
React.createElement("h2", null, panelTitle),
showDateStamps !== false ? getDateStampRow(showThisItem, 'Created') : undefined,
showDateStamps !== false ? getDateStampRow(showThisItem, 'Modified') : undefined,
getGoToLinks({ item: showThisItem, primarySource: primarySource, showItemLink: showItemLink, showListLink: showListLink }));
const headerComponent = React.createElement("div", null,
debugContent,
panelHeading);
const jsonContent = showJSONDetail === false || this.state.showPanelJSON !== true ? undefined : 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' }}></iframe>;
return (React.createElement("div", { className: ['source-itemPane', ''].join(' ') },
headerComponent,
this.props.customElement1 ? this.props.customElement1 : undefined,
this.props.customElement1B ? this.props.customElement1B : undefined,
showEmbed === false ? undefined : getItemEmbed({ item: showThisItem }),
this.props.customElement1C ? this.props.customElement1C : undefined,
this.props.showProperties !== false ? getItemProperties({ item: showThisItem, primarySource: primarySource, columns: ['Searched', 'Selected'], searchText: this.props.searchText }) : undefined,
this.props.customElement2 ? this.props.customElement2 : undefined,
this.props.customElement2B ? this.props.customElement2B : undefined,
this.ToggleJSONCmd,
jsonContent,
this.props.customElement3 ? this.props.customElement3 : undefined));
}
}
_toggleJSON() {
const newState = this.state.showPanelJSON === true ? false : true;
const result = this.state.showThisItem;
// result = getModernHumanReadable( result );
this.setState({ showThisItem: result, showPanelJSON: newState });
}
}
//# sourceMappingURL=component.js.map