@mikezimm/fps-library-v2
Version:
Library of reusable typescript/javascript functions, interfaces and constants
92 lines • 6.45 kB
JavaScript
import * as React from 'react';
// import ReactJson from '@microlink/react-json-view';
import { PivotItem, } from '@fluentui/react/lib/Pivot';
import ReactJson from '@microlink/react-json-view';
import { HandleBarReplacements } from '@mikezimm/fps-core-v7/lib/logic/strings/handleBarsContext';
// import {HandleBarReplacements, } from '../fpsReferences';
// export function putObjectIntoJSON ( obj: any, name: string = null ): JSX.Element {
// // return <ReactJson src={ obj } name={ 'panelItem' } collapsed={ true } displayDataTypes={ true } displayObjectSize={ true } enableClipboard={ true } style={{ padding: '20px 0px' }}/>;
// return <ReactJson src={ obj } name={ name } collapsed={ false } displayDataTypes={ false } displayObjectSize={ false } enableClipboard={ true } style={{ padding: '20px 0px' }} theme= { 'rjv-default' } indentWidth={ 2}/>;
// }
/**
* FPS Slick Sections Notes:
*
* ForceWhite does NOT work on collapsible sections.... might at first but if you collapse then expand, no go because web part does not re-apply the classes to the web parts.
* @returns
*/
const SampleRelatedInfoProps = {
description: 'Standards',
showItems: true,
isExpanded: true,
web: '/sites/financemanual/manual',
listTitle: 'Site Pages',
restFilter: 'StandardDocumentsId eq {{PageId}}',
linkProp: 'File/ServerRelativeUrl',
displayProp: 'Title',
itemsStyle: '{ escape( `"fontWeight":600,"color":"yellow"` )}',
};
const padRight40 = { paddingRight: '40px' };
const ReactCSSPropsNote = React.createElement("span", { style: { color: 'darkred', fontWeight: 500 } }, "React.CSSProperties string like (with quotes):");
export function getWebPartHelpElementRelatedProps() {
const WebPartHelpElement = React.createElement(PivotItem, { headerText: 'RelatedInfo' },
React.createElement("div", { className: 'fps-pph-content' },
React.createElement("div", { className: 'fps-pph-topic' }, "Related Info is a way to show items that are related to this page."),
React.createElement("div", null,
React.createElement("li", null,
React.createElement("b", null, "showItems - "),
"Enable or Disable this feature"),
React.createElement("li", null,
React.createElement("b", null, "description - "),
"Heading for this feature - clickable to expand/collapse"),
React.createElement("li", null,
React.createElement("b", null, "web - "),
"Server Relative Url of list-item you are relating to"),
React.createElement("li", null,
React.createElement("b", null, "listTitle - "),
"List Title which has the related info"),
React.createElement("li", null,
React.createElement("b", null, "restFilter - "),
"rest based filter - see context-based substitutions below"),
React.createElement("li", null,
React.createElement("b", null, "linkProp - "),
"Static/Internal name of the field with the go-to link. Leave empty to not have it clickable."),
React.createElement("li", null,
React.createElement("b", null, "displayProp - "),
"Static/Internal name of the field with the related info text"),
React.createElement("li", null,
React.createElement("b", null, "isExpanded - "),
"Default state when loading the page"),
React.createElement("li", null,
React.createElement("b", null, "itemsStyle - "),
" ",
ReactCSSPropsNote,
" ",
`"fontWeight":600,"color":"yellow"`,
" ")),
React.createElement("div", { style: { display: 'flex', flexDirection: 'row' } },
React.createElement("div", null,
React.createElement("div", { className: 'fps-pph-topic' }, "Sample of tested settings."),
React.createElement(ReactJson, { src: SampleRelatedInfoProps, name: 'Sample Props', collapsed: false, displayDataTypes: false, displayObjectSize: false, enableClipboard: true, style: { padding: '20px 0px' }, theme: 'rjv-default', indentWidth: 2 })),
React.createElement("div", null,
React.createElement("h3", null, "This will do the following"),
React.createElement("ol", null,
React.createElement("li", null, "showItems == true > enables feature"),
React.createElement("li", null, "Sets the heading for this section to Standards"),
React.createElement("li", null, "Sets default visibility to Expanded"),
React.createElement("li", null, "Gets related info from web: /sites/financemanual/manual"),
React.createElement("li", null, "Gets related info from Library: Site Pages"),
React.createElement("li", null,
"Gets items where the lookup column StandardDocuments has the same value as the current ",
`site's`,
" PageId"),
React.createElement("li", null, "Sets the goto link location as File/ServerRelativeUrl. You could also use a text column for the link or build up a link to anything"),
React.createElement("li", null, "Sets the display text of the link to the Title of the lookup item")))),
React.createElement("div", { className: 'fps-pph-topic' }, "Use the following subsitutions to customize restFilters."),
React.createElement("div", { style: { display: 'flex' } }, Object.keys(HandleBarReplacements).map(key => {
return React.createElement("div", { key: key, style: padRight40 },
React.createElement("div", { className: 'fps-pph-topic' }, key),
React.createElement("ul", null, HandleBarReplacements[key].map((rule) => React.createElement("li", { key: rule }, rule))));
}))));
return WebPartHelpElement;
}
//# sourceMappingURL=RelatedPropsHelp.js.map