@mikezimm/fps-library-v2
Version:
Library of reusable typescript/javascript functions, interfaces and constants
824 lines • 50.1 kB
JavaScript
// /**
// * CodeAnalizerComment: Updated 5 imports on 2024-09-22 14:49:52
// * Update:: import { PanelType } to '@mikezimm/fps-core-v7/lib/types/@fluentUI/@7.199.1/Panel;'
// * Update:: import { replaceHandleBarsValues } to '@mikezimm/fps-core-v7/lib/logic/Strings/handleBarsSub;'
// * Update:: import { IDrillItemInfo } to '@mikezimm/fps-core-v7/lib/components/webparts/Drilldown/IDrillItem;'
// * Update:: import { IQuickButton } to '@mikezimm/fps-core-v7/lib/components/webparts/Drilldown/QuickCommands/IQuickCommands;'
// * Update:: import { IAnySourceItemAny } to '@mikezimm/fps-core-v7/lib/components/molecules/AnyContent/IAnyContent;'
// */
// /**
// * CodeAnalizerComment: Updated 3 imports on 2024-09-21 23:07:24
// * Update:: import { doesObjectExistInArray } to '@mikezimm/fps-core-v7/lib/logic/Arrays/searching/objectfind;'
// * Update:: import { check4This } to '@mikezimm/fps-core-v7/lib/logic/Links/CheckSearch;'
// * Update:: import { IAnySourceItemAny } to '@mikezimm/fps-core-v7/lib/components/molecules/AnyContent/IAnyContent;'
// */
// import * as React from 'react';
// import { Icon, } from '@fluentui/react/lib/Icon';
// import { Pivot, PivotItem,} from '@fluentui/react/lib/Pivot';
// import ReactJson from '@microlink/react-json-view';
// import { getMaxRichHeightNum } from '../functions/richHeight';
// import { ListView, SelectionMode, IGrouping, } from "@pnp/spfx-controls-react/lib/ListView";
// import { Panel, PanelType } from '@fluentui/react/lib/Panel';
// import { PrimaryButton, DefaultButton } from '@fluentui/react/lib/Button';
// import PageArrows from '../../Arrows/PageArrows';
// import { IReactListItemsProps } from './IReactListItemsProps';
// import { IReactListItemsState } from './IReactListItemsState';
// import { replaceHandleBarsValues } from '@mikezimm/fps-core-v7/lib/logic/Strings/handleBarsSub';
// import { IDrillItemInfo } from '@mikezimm/fps-core-v7/lib/components/webparts/Drilldown/IDrillItem';
// import { IQuickButton } from '@mikezimm/fps-core-v7/lib/components/webparts/Drilldown/QuickCommands/IQuickCommands';
// import { IViewFieldDD } from '../interfaces/IViewFieldDD';
// import { buildConfirmDialogBig, IMyBigDialogProps } from '../../../atoms/Elements/confirmDialogBig';
// import { IContentsToggles, makeToggles } from '../atoms/toggleFieldBuilder';
// import { autoDetailsList } from '../atoms/detailsList';
// import { findParentElementPropLikeThis } from '@mikezimm/fps-core-v7/lib/logic/DOM/Search/domSearch';
// import { updateReactListItem } from '../functions/updateReactListItem';
// import { doesObjectExistInArray } from '@mikezimm/fps-core-v7/lib/logic/Arrays/searching/objectfind';
// import { createPanelButtonsV2 } from '../atoms/createPanelButtonsV2';
// import { createPanelAttachmentElements } from '../functions/fetchAttachments';
// import { check4This } from '@mikezimm/fps-core-v7/lib/logic/Links/CheckSearch';
// import { IAnySourceItemAny } from '@mikezimm/fps-core-v7/lib/components/molecules/AnyContent/IAnyContent';
// import { createItemSharingTable } from '../../../atoms/SharedItems/createItemSharingTable';
// import { makeAbsoluteUrl } from '@mikezimm/fps-core-v7/lib/logic/Strings/getSiteCollectionUrlFromLink';
// import { ReactViewSpecialKeys } from '../interfaces/SpecialViewKeys';
// import { getWebPartVersionElement } from '../../../../banner/bannerX/VersionElement';
// require('@mikezimm/fps-styles/dist/reactListView.css');
// export default class ReactListItems extends React.Component<IReactListItemsProps, IReactListItemsState> {
// private _componentWidth: number = null;
// /**
// * createPanelAttachments is identical on ActionNews and Drilldown7 except panelItem interface
// * @param thisId
// * @param panelItem
// */
// private async _createPanelAttachments( thisId: any, panelItem: IDrillItemInfo ): Promise<void>{
// const attachments = await createPanelAttachmentElements( this.props.bannerProps.fpsSpService, this.props.webUrl, this.props.listTitle, panelItem );
// this.setState({
// panelAttachments: attachments,
// lastAttachId: thisId,
// });
// }
// private delim = '|||';
// private handleExpandedFieldInfoToIViewFields( viewFields?: IViewFieldDD[] ) {
// //Before this line was added, I think it was mutating props causing double render
// viewFields = JSON.parse(JSON.stringify( viewFields ));
// viewFields.map( vf => {
// //2022-03-18: MEMO TO SELF... SOMETHING SEEMS OFF about this replace...
// vf.name = vf.name.replace(/\//g,'');
// });
// return viewFields;
// }
// private createBlankDialog() {
// let myDialog: IMyBigDialogProps = {
// title: '',
// dialogMessage: '',
// showDialog: false,
// confirmButton: '',
// _confirmDialog: this._confirmUpdateDialog.bind(this),
// _closeDialog: this._closeDialog.bind(this),
// };
// return myDialog;
// }
// /***
// * .o88b. .d88b. d8b db .d8888. d888888b d8888b. db db .o88b. d888888b .d88b. d8888b.
// * d8P Y8 .8P Y8. 888o 88 88' YP `~~88~~' 88 `8D 88 88 d8P Y8 `~~88~~' .8P Y8. 88 `8D
// * 8P 88 88 88V8o 88 `8bo. 88 88oobY' 88 88 8P 88 88 88 88oobY'
// * 8b 88 88 88 V8o88 `Y8b. 88 88`8b 88 88 8b 88 88 88 88`8b
// * Y8b d8 `8b d8' 88 V888 db 8D 88 88 `88. 88b d88 Y8b d8 88 `8b d8' 88 `88.
// * `Y88P' `Y88P' VP V8P `8888Y' YP 88 YD ~Y8888P' `Y88P' YP `Y88P' 88 YD
// *
// *
// */
// private _ListViewFontSizes: any[] = [ `default-font-size`, `larger-font-size`, `large-font-size` ];
// constructor(props: IReactListItemsProps) {
// super(props);
// if ( check4This( Check4.sourceResults_Eq_true, false) === true ) console.log( 'listView PROPS: ', this.props, );
// let viewFields : IViewFieldDD[] = [];
// if ( this.props.viewFields.length > 0 ) {
// viewFields = this.handleExpandedFieldInfoToIViewFields( this.props.viewFields );
// }
// let groupByFields : IGrouping[] = [];
// if ( this.props.groupByFields && this.props.groupByFields.length > 0 ) {
// //Added this reparse to prevent mutating props
// groupByFields = JSON.parse(JSON.stringify( this.props.groupByFields ));
// groupByFields.map( gF => { gF.name = gF.name.replace(/\//g,'') ; });
// }
// const richHeightNum = getMaxRichHeightNum( this.props.autoRichHeight, this.props.richHeights[0], this.props.items );
// this.state = {
// fontSize: this._ListViewFontSizes[0] , //=>> address: https://github.com/mikezimm/drilldown7/issues/169
// maxChars: this.props.maxChars ? this.props.maxChars : 50,
// viewFields: viewFields,
// groupByFields: groupByFields,
// showPanel: false,
// showAttach: false,
// panelId: null,
// lastPanelId: null,
// panelItem: null,
// panelAttachments: [],
// lastAttachId: null,
// clickedAttach: false,
// myDialog: this.createBlankDialog(),
// pickedCommand: null,
// panelWidth: PanelType.medium,
// richHeightNum: richHeightNum,
// richHeightStr: `${richHeightNum}em`,
// firstVisible: 0,
// lastVisible: this.props.itemsPerPage - 1,
// commandResult: null,
// commandError: false,
// showCommandCode: false,
// };
// }
// public componentDidMount() {
// //this._getListItems();
// }
// /***
// * 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
// *
// *
// */
// public componentDidUpdate(prevProps: IReactListItemsProps, prevState: IReactListItemsState): void {
// /* eslint-disable @typescript-eslint/no-unused-vars */
// let redraw = false;
// let updateViewFields = false;
// let resetArrows = false;
// if ( JSON.stringify(prevProps.viewFields) !== JSON.stringify(this.props.viewFields )) {
// updateViewFields = true;
// redraw = true;
// }
// if ( JSON.stringify(prevProps.groupByFields) !== JSON.stringify(this.props.groupByFields )) {
// updateViewFields = true;
// redraw = true;
// }
// if ( prevProps.resetArrows !== this.props.resetArrows ) {
// // updateViewFields = true;
// resetArrows = true;
// this.setState({
// firstVisible: 0,
// lastVisible: this.props.itemsPerPage - 1,
// });
// }
// if ( prevProps.richHeights.join('') !== this.props.richHeights.join('') ) {
// updateViewFields = true;
// redraw = true;
// }
// // if ( prevProps.items.length !== this.props.items.length ) {
// // this._setMaxRichHeight( this.props.autoRichHeight, this.props.richHeight, this.props.items );
// // redraw = true; }
// if ( prevProps.listUrl !== this.props.listUrl ) { redraw = true; }
// /* eslint-enable @typescript-eslint/no-unused-vars */
// this._updateStateOnPropsChange( updateViewFields );
// }
// /***
// * d8888b. d88888b d8b db d8888b. d88888b d8888b.
// * 88 `8D 88' 888o 88 88 `8D 88' 88 `8D
// * 88oobY' 88ooooo 88V8o 88 88 88 88ooooo 88oobY'
// * 88`8b 88~~~~~ 88 V8o88 88 88 88~~~~~ 88`8b
// * 88 `88. 88. 88 V888 88 .8D 88. 88 `88.
// * 88 YD Y88888P VP V8P Y8888D' Y88888P 88 YD
// *
// *
// */
// public render(): React.ReactElement<IReactListItemsProps> {
// //console.log( 'ReactListItems props & state: ', this.props, this.state );
// // let thisLog = null;
// let showRichHeightButton: any = false;
// //2022-02-01: Updated this from drilldown7
// if (this.props.items === null || this.props.items.length === 0) {
// return (
// <div className={'' }>
// List View has NO Items to show
// </div>
// );
// } else {
// const { bannerProps } = this.props;
// let attachments = this.state.panelAttachments.length > 0 ? this.state.panelAttachments : null ;
// let dialog = !this.state.myDialog.showDialog ? null : buildConfirmDialogBig( this.state.myDialog );
// const { quickCommands, } = this.props;
// const { commandError, commandResult } = this.state;
// /***
// * d888888b .d88b. d888b d888b db d88888b .d8888.
// * `~~88~~' .8P Y8. 88' Y8b 88' Y8b 88 88' 88' YP
// * 88 88 88 88 88 88 88ooooo `8bo.
// * 88 88 88 88 ooo 88 ooo 88 88~~~~~ `Y8b.
// * 88 `8b d8' 88. ~8~ 88. ~8~ 88booo. 88. db 8D
// * YP `Y88P' Y888P Y888P Y88888P Y88888P `8888Y'
// *
// *
// */
// let toggles = !this.state.showPanel ? null : <div style={{ float: 'right' }}> { makeToggles(this.getPageToggles( )) } </div>;
// const itemLink: any = <div style={{ cursor: 'pointer', fontSize: 'larger', 'fontWeight': 600, color: 'darkblue', padding: '10px 10px 10px 0px', margin: '20px 0px' }}
// onClick={ () => { window.open( this.state.panelItem.goToPropsLink, '_blank' ) ; }}>Click to open item</div>;
// let SharingElement = !this.state.panelItem || !this.state.panelItem.ItemSharingInfo ? undefined : <div>
// <h3>Sharing History</h3>
// { createItemSharingTable( this.state.panelItem as any, true ) }
// </div>
// let fullPanel = null;
// if ( this.state.showPanel === true && this.state.panelId ) {
// fullPanel = <Panel
// isOpen={ this.state.showPanel }
// type={ this.state.panelWidth }
// onDismiss={ this._onClosePanel }
// headerText={ this.state.panelId.toString() }
// closeButtonAriaLabel="Close"
// onRenderFooterContent={ this._onRenderFooterContent }
// isLightDismiss={ true }
// isFooterAtBottom={ true }
// >
// { toggles }
// <Pivot
// aria-label="React List View Panel"
// defaultSelectedIndex ={ 0 }
// style={{ paddingTop: '16px'}}
// >
// <PivotItem headerText="Commands" itemKey= "Commands"><div>
// {/* https://github.com/mikezimm/drilldown7/issues/168 */}
// { itemLink }
// <div id='20pxSpacer' style={{ height: '20px'}}/>
// { attachments }
// {/* { createPanelButtonsV1( this.props.quickCommands, this.state.panelItem, this.props.sourceUserInfo, this._panelButtonClicked.bind(this), this.delim ) } */}
// { createPanelButtonsV2( this.props.quickCommands, this.state.panelItem, this.props.sourceUserInfo, this._panelButtonClickedv2.bind(this), this.delim, this.state.showCommandCode ) }
// {/* { <Icon iconName= { 'Add' } style={ defaultBannerCommandStyles }/> } */}
// { SharingElement }
// </div>
// </PivotItem>
// <PivotItem headerText="Details" itemKey= "Details">
// {/* https://github.com/mikezimm/drilldown7/issues/168 */}
// { itemLink }
// { SharingElement }
// { autoDetailsList(this.state.panelItem, ["Title","refiners"],["search","meta","searchString"],true) }
// </PivotItem>
// <PivotItem headerText="JSON" itemKey= "JSON"><div id="CommandsJSONPanel" style={{paddingTop: '20px'}}>
// {/* https://github.com/mikezimm/drilldown7/issues/168 */}
// { itemLink }
// <ReactJson src={ this.state.panelItem } name={ 'panelItem' } collapsed={ true } displayDataTypes={ true } displayObjectSize={ true } enableClipboard={ true } style={{ padding: '20px 0px' }}/>
// { SharingElement }
// </div>
// </PivotItem>
// </Pivot>
// { getWebPartVersionElement( this.props.bannerProps, { paddingTop: '4em' } ) }
// </Panel>;
// }
// /**
// * 2022-02-01: This was copied/updated from drilldown7 to actionnews
// */
// let attachPanel = null;
// if ( this.state.showAttach === true && this.state.panelId ) {
// attachPanel = <Panel
// isOpen={this.state.showAttach}
// type={ this.state.panelWidth }
// onDismiss={this._onClosePanel}
// headerText={ this.state.panelId.toString() }
// closeButtonAriaLabel="Close"
// onRenderFooterContent={this._onRenderFooterContent}
// isLightDismiss={ true }
// isFooterAtBottom={ true }
// >
// { attachments }
// { SharingElement }
// </Panel>;
// }
// let viewFieldsBase: IViewFieldDD[] = this.state.viewFields;
// let attachField: IViewFieldDD[] = [];
// if ( this.props.includeAttach ) {
// //Add attachments column:
// let callBack = this.props.includeDetails ? null : this._onShowPanel.bind(this);
// attachField.push({
// name: 'Attachments',
// displayName: 'Attach',
// sorting: true,
// minWidth: 25,
// maxWidth: 35,
// render: (item: IDrillItemInfo) => {
// let cursor = item.Attachments ? "pointer" : '';
// return <div id= { 'ButtonID' + item.Id } onClick={ callBack } style={{ fontSize: 'larger' , fontWeight: 'bolder', width: '25px', textAlign: 'center', cursor: cursor }}><Icon iconName= { item.Attachments ? "Attach" : ''}/></div>;
// },
// });
// }
// let viewFields = attachField.concat( viewFieldsBase );
// let filtered : IDrillItemInfo[]= [];
// this.props.items.map( ( item, idx ) => {
// if ( idx >= this.state.firstVisible && idx <= this.state.lastVisible ) {
// filtered.push( item );
// }
// });
// const pageArrows = <PageArrows
// itemCount={ this.props.items.length }
// itemsPerPage={ this.props.itemsPerPage }
// setParentStateFirstLast={ this._updateFirstLastVisible.bind(this) }
// debugMode = { this.props.debugMode }
// fontSize = { this._componentWidth && this._componentWidth > 800 ? 28 : 24 }
// resetArrows = { this.props.resetArrows }
// pageArrowStyles = {{ marginTop: '-7px' }}
// />;
// viewFields.map ( field => {
// // https://github.com/mikezimm/drilldown7/issues/337
// if ( field.name === 'HasUniqueRoleAssignments' || field.name === 'ItemSharingInfo' ) { // ContactLock
// field.render = ( item: IAnySourceItemAny ) => {
// const unique = item.HasUniqueRoleAssignments === true ? true : false;
// const itemIcon = item[`ItemSharingInfo.ID`] ? 'Share' : item.HasUniqueRoleAssignments === true ? 'Shield' : '';
// const fontSize = itemIcon ? 'large' : 'default';
// const title = item[`ItemSharingInfo.ID`] ? 'Item was shared' : item.HasUniqueRoleAssignments === true ? 'Item has unique permissions' : '';
// // return <Icon style={{ fontSize: fontSize, color: unique === true ? 'red' : 'gray' }} iconName={ itemIcon } title={ title } />;
// return <Icon style={{ fontSize: fontSize, color: 'black' }} iconName={ itemIcon } title={ title } />;
// }
// //This is for: https://github.com/mikezimm/drilldown7/issues/224
// } else if ( this.props.richColumns.indexOf( field.name ) > -1 ) {
// showRichHeightButton = true;
// const fieldStyles = [ `list-view-rt` ];
// if ( this.props.richMarginAuto === true ) fieldStyles.push( 'list-view-rt-start' );
// // fieldStyles.push( this._RichTextRowHeight[ this.state.richHeight ] );
// field.render = ( item: { [x: string]: any; }, index: any ) => { return <div style={{ maxHeight: this.state.richHeightStr }} className={ fieldStyles.join(' ') } dangerouslySetInnerHTML={{__html: item[ field.name ]}} /> }
// // field.render = ( item, index ) => { this._renderRich( item, field.name ) }
// } else if ( field.linkSubstitute || field.textSubstitute ) {
// // Testing to see if Url value is valid... has a value, is a string, and either starts with http or /sites/
// // Testing to see if Url value is valid... has a value, is a string, and either starts with http or /sites/
// const isValidSubLink = typeof field.linkSubstitute === "string" &&
// ( field.linkSubstitute.indexOf("/sites/") === 0 || field.linkSubstitute.indexOf("http") === 0 ) ? true : false;
// // Testing to see if Url value is valid... has a value, is a string, and either starts with http or /sites/
// const isValidText = typeof field.textSubstitute === "string" ? true : false;
// if ( isValidSubLink !== true && isValidText !== true ) {
// return;
// } else {
// // Start on https://github.com/mikezimm/drilldown7/issues/70, https://github.com/mikezimm/drilldown7/issues/268
// field.render = ( item: { [x: string]: any; }, index: any ) => {
// const linkSubstitute = isValidSubLink === true ? replaceHandleBarsValues( item, field.linkSubstitute, true ) : '';
// const textSubstitute = isValidText === true ? replaceHandleBarsValues( item, field.textSubstitute, field.showEmptyAsEmpty === true ? true : false ) : item[field.name];
// // Return element as a link if the Url passes simple validation. Else just return the displayed value as normal span
// if ( isValidSubLink === true && linkSubstitute ) {
// return <a href={ linkSubstitute }>{ textSubstitute }</a>;
// } else {
// return <span >{ textSubstitute }</span>;
// }
// } // close: field.render = ( item, index ) => {
// } // close if ( isValid === true ) {
// /**
// * 2025-01-27: Added this loop for rendering better link labels
// * https://github.com/mikezimm/drilldown7/issues/463
// */
// } else if ( field.name.indexOf( `${field.displayName}Show`) === 0 ) { // This is a special column like
// const { linkPropertyName, displayName } = field;
// if ( linkPropertyName && ReactViewSpecialKeys.indexOf( linkPropertyName ) > -1 ) {
// field.render = ( item: IAnySourceItemAny ) => {
// // use the actual column value (strigified) if it exists, else use a
// const title = displayName && item[ displayName ] ? JSON.stringify( item[ displayName ] ) : linkPropertyName.replace('goTo', '');
// // return <Icon style={{ fontSize: fontSize, color: unique === true ? 'red' : 'gray' }} iconName={ itemIcon } title={ title } />;
// return <a style={{ }} href={ item[ linkPropertyName as 'Title'] } onClick={ ( event ) => {
// event.preventDefault(); // Prevent default navigation
// window.open( item[ linkPropertyName as 'Title'], '_blank' );
// }} title={ title }>{ title }</a>;
// }
// }
// }// close: } else if ( field.linkSubstitute ) {
// }); // close: viewFields.map ( field => {
// //=>> address: https://github.com/mikezimm/drilldown7/issues/270
// const changeRichHeight = showRichHeightButton !== true ? null :
// <div title={ `Change row height from ${this.state.richHeightStr}`} onClick={ this._updateRichHeightState.bind(this) }
// style={{ fontSize: 'larger' , fontWeight: 'bolder', width: '25px', textAlign: 'center', cursor: 'pointer' }}>
// <Icon iconName= 'CollapseMenu'/></div>;
// // determine iconFieldName https://github.com/mikezimm/drilldown7/issues/163
// const iconFieldName = this.props.isLibrary === true ? 'FileRef' : undefined;
// //=>> address: https://github.com/mikezimm/drilldown7/issues/169
// const changeFont = <div title="Change font size" onClick={ this._changeFontSize.bind(this) } style={{ fontSize: 'larger' , fontWeight: 'bolder', width: '25px', textAlign: 'center', cursor: 'pointer' }}><Icon iconName= 'FontSize'/></div>;
// let listView = <div className={ this.state.fontSize }>
// <ListView
// items={ filtered }
// viewFields={ viewFields }
// // className={ 'font-size-14' }
// // listClassName={ stylesL.fontSizeLarger }
// compact={true}
// selectionMode={ this.props.includeDetails ? SelectionMode.single : SelectionMode.none }
// selection={this._onShowPanel.bind(this)}
// showFilter={false}
// iconFieldName={ iconFieldName }
// //defaultFilter="John"
// filterPlaceHolder="Search..."
// groupByFields={ this.props.groupByFields }
// /></div>;
// // let logTable = itemRows === null ? <div>Nothing to show</div> : <table style={{ display: 'block'}} className={stylesInfo.infoTable}>
// let barText = this.props.blueBar && this.props.blueBar != null ? this.props.blueBar : <span>Items</span>; // eslint-disable-line eqeqeq
// let webTitle = null;
// let listLink = !this.props.includeListLink ? null : <div className={ `info-heading` } onClick={ this._onGoToList.bind(this) }
// style={{ marginRight: 30, whiteSpace: 'nowrap', paddingTop: 0, cursor: 'pointer', fontSize: 'smaller',background: 'transparent' }}>
// <span style={{ background: 'transparent' }} className={ [ 'fps-gen-inBlockNoWrap', 'fps-gen-goToLink-theme' ].join(' ') }>Go to list</span></div>;
// let createItemLink = !this.props.createItemLink ? null : <div title="Create new item" className={ `info-heading` } onClick={ this._CreateNewItem.bind(this) }
// style={{ marginRight: 30, whiteSpace: 'nowrap', paddingTop: 0, cursor: 'pointer', fontSize: 'larger',background: 'transparent' }}>
// <span style={{ background: 'transparent' }} className={ `` }><Icon iconName="AddTo"/></span></div>;
// // https://github.com/mikezimm/drilldown7/issues/249
// let maxBlueBarLeft = createItemLink ? 35 : 40;
// if ( !listLink ) maxBlueBarLeft += 15;
// const headerBarClass = [`info-heading`, `inner-shadow`, `fps-list-header-bar`, this.props.themeClass ];
// let headerBarStyles: React.CSSProperties = { display: 'flex', justifyContent: 'space-between', };
// if ( bannerProps.bannerPillShape === true ) headerBarStyles = { ...headerBarStyles, ...{ borderRadius: '50px' }};
// if ( barText !== null ) {
// webTitle =<div style={ headerBarStyles } className={ headerBarClass.join(' ') }>
// {/* https://github.com/mikezimm/drilldown7/issues/249 */}
// <span className={ `blue-bar-left` } style={{ maxWidth: `${maxBlueBarLeft}%`}} title={ this.props.blueBarTitleText }>( { this.props.items.length } ) { barText }</span>
// { pageArrows }
// {/* //=>> address: https://github.com/mikezimm/drilldown7/issues/169 */}
// <span style={{ gridRow: 'nowrap', display: 'inline-flex', gridGap: '.75em', marginRight: '25px' }}>
// { changeFont }
// { changeRichHeight }
// </span>
// <span style={{ whiteSpace: 'nowrap', display: 'flex', marginRight: '25px' }}>
// { createItemLink }
// { listLink }
// </span>
// </div>;
// /**
// * Brought this in directly from Drilldown web part
// * added quickCommands && due to testing on spfx-v2-tester
// */
// const createFooter = quickCommands && quickCommands.successBanner > 0 ? true : false; //CommandItemNotUpdatedMessage
// const footerEleClasses = ['quickCommandFooterStyles', commandResult ? 'quickCommandShow' : 'quickCommandHide' ];
// if ( !commandResult ) {
// //Do nothing if no result
// } else if (commandResult.status === 'Success') {
// } else if (commandResult.status === 'Unknown') {
// footerEleClasses.push('quickCommandWarn');
// } else {
// footerEleClasses.push('quickCommandError');
// }
// const footerInfo = !commandResult ? '' :
// commandResult.statusElement ? commandResult.statusElement :
// commandResult.errorInfo ? commandResult.errorInfo.returnMess : ''
// /**
// * NOTE: You ALWAYS need a footer element if it's active, even if there is nothing to show.
// * If not, then you do not get the smooth transitions when it is visible.
// */
// const footerElement = createFooter === false ? null : <div className={ footerEleClasses.join(' ') }>
// { footerInfo }
// </div>;
// /*stylesL.reactListView*/
// return (
// <div className={ '' }
// ref={el => {
// // el can be null - see https://reactjs.org/docs/refs-and-the-dom.html#caveats-with-callback-refs
// if (!el) return;
// this._componentWidth = el.getBoundingClientRect().width ;
// // console.log('componentWidth', this._componentWidth ) ;
// } }
// >
// <div style={{ paddingTop: 10}} className={ `info-pane-tight` }>
// { webTitle }
// { fullPanel }
// { attachPanel }
// { dialog }
// { footerElement }
// { listView }
// </div>
// </div>
// );
// }
// } //if ( this.props.items != null && this.props.items.length > 0 ) {
// } // Render
// /***
// * db db d8888b. d8888b. .d8b. d888888b d88888b .d8888. d888888b .d8b. d888888b d88888b
// * 88 88 88 `8D 88 `8D d8' `8b `~~88~~' 88' 88' YP `~~88~~' d8' `8b `~~88~~' 88'
// * 88 88 88oodD' 88 88 88ooo88 88 88ooooo `8bo. 88 88ooo88 88 88ooooo
// * 88 88 88~~~ 88 88 88~~~88 88 88~~~~~ `Y8b. 88 88~~~88 88 88~~~~~
// * 88b d88 88 88 .8D 88 88 88 88. db 8D 88 88 88 88 88.
// * ~Y8888P' 88 Y8888D' YP YP YP Y88888P `8888Y' YP YP YP YP Y88888P
// *
// *
// */
// private _updateRichHeightState(): void {
// const oldValue = this.state.richHeightNum;
// const oldIdx = this.props.richHeights.indexOf( oldValue );
// const nextIdx = oldIdx === this.props.richHeights.length -1 ? 0 : oldIdx + 1;
// const richHeightNum = this.props.richHeights[ nextIdx ];
// this.setState({ richHeightNum: richHeightNum, richHeightStr: `${richHeightNum}em` });
// }
// private _onGoToList = () : void => {
// if ( !this.props.listUrl || this.props.listUrl === null || this.props.listUrl === undefined || this.props.listUrl.length === 0 ) {
// return; // Do nothing
// }
// let e: any = event;
// let isAltClick = e.altKey;
// let isShfitClick = e.shiftKey;
// let isCtrlClick = e.ctrlKey;
// console.log('AltClick, ShfitClick, CtrlClick:', isAltClick, isShfitClick, isCtrlClick );
// window.open( `${this.props.listUrl}?Source=${window.location.pathname}`, "_blank");
// }
// private _CreateNewItem = () : void => {
// if ( this.props.isLibrary === true ) {
// window.open( `${this.props.listUrl}`, "_blank");
// } else {
// // https://github.com/mikezimm/drilldown7/issues/422
// if ( this.props.listNewForm.indexOf( '/sites/') === 0 || this.props.listNewForm.indexOf( 'http' ) === 0 ) {
// window.open( `${this.props.listNewForm}.aspx?Source=${this.props.itemLinkSource}`, "_blank");
// } else {
// // window.open(`${this.props.listUrl}/NewForm.aspx?Source=${window.location.pathname}&${window.location.search}`, "_blank");
// window.open( `${this.props.listUrl}/${this.props.listNewForm}.aspx?Source=${this.props.itemLinkSource}`, "_blank");
// }
// }
// }
// private _updateStateOnPropsChange( pushViewFieldsToState : boolean ): void {
// let viewFields : IViewFieldDD[] = [];
// if ( this.props.viewFields.length > 0 ) {
// viewFields = this.handleExpandedFieldInfoToIViewFields( this.props.viewFields );
// }
// let groupByFields : IGrouping[] = [];
// if ( this.props.groupByFields && this.props.groupByFields.length > 0 ) {
// groupByFields = JSON.parse(JSON.stringify( this.props.groupByFields ));
// groupByFields.map( gF => { gF.name = gF.name.replace(/\//g,'') ; });
// }
// if ( pushViewFieldsToState === true ) {
// this.setState({
// viewFields: viewFields,
// groupByFields: groupByFields,
// });
// }
// }
// /***
// * d8888b. db db d888888b d888888b .d88b. d8b db .o88b. db d888888b .o88b. db dD
// * 88 `8D 88 88 `~~88~~' `~~88~~' .8P Y8. 888o 88 d8P Y8 88 `88' d8P Y8 88 ,8P'
// * 88oooY' 88 88 88 88 88 88 88V8o 88 8P 88 88 8P 88,8P
// * 88~~~b. 88 88 88 88 88 88 88 V8o88 8b 88 88 8b 88`8b
// * 88 8D 88b d88 88 88 `8b d8' 88 V888 Y8b d8 88booo. .88. Y8b d8 88 `88.
// * Y8888P' ~Y8888P' YP YP `Y88P' VP V8P `Y88P' Y88888P Y888888P `Y88P' YP YD
// *
// *
// */
// private async _panelButtonClickedv2 ( b: any, item: any, event: React.MouseEvent<HTMLElement> ): Promise<void> {
// console.log( '_panelButtonClickedv2', item );
// if ( !item ) {
// alert('Whoops! Can not find ID of _panelButtonClicked!');
// return null;
// } else {
// // Add Command Code to panel https://github.com/mikezimm/drilldown7/issues/252
// if ( event.ctrlKey === true || event.altKey === true ) {
// this.setState({ showCommandCode: !this.state.showCommandCode });
// } else {
// try {
// await this.startThisQuickUpdate2( b, item );
// } catch (ev) {
// console.log('_panelButtonClicked error:', ev );
// }
// }
// }
// }
// /**
// * Open the dialog
// */
// //private _confirmUpdateDialog = () => {
// private async _confirmUpdateDialog (item: any): Promise<void> {
// let e: any = event; // eslint-disable-line @typescript-eslint/no-unused-vars
// let thisButtonObject : IQuickButton = this.state.pickedCommand ;
// await this.completeThisQuickUpdate( this.state.panelId.toString(), thisButtonObject );
// this.setState({
// myDialog: this.createBlankDialog(),
// });
// }
// //=>> address: https://github.com/mikezimm/drilldown7/issues/169
// private _changeFontSize() {
// const oldValue = this.state.fontSize;
// const oldIdx = this._ListViewFontSizes.indexOf( oldValue );
// const nextIdx = oldIdx === this._ListViewFontSizes.length -1 ? 0 : oldIdx + 1;
// this.setState({ fontSize: this._ListViewFontSizes[ nextIdx ] });
// }
// private async startThisQuickUpdate2 ( thisButtonObject: any, item: any ): Promise<void>{
// const itemId = item.Id;
// if ( !thisButtonObject ) {
// alert('_panelButtonClicked - can not find thisButtonObject - ' + itemId );
// } else {
// if ( thisButtonObject.updateItem ) {
// let readyToUpdate = true;
// if ( !this.props.webUrl ) { alert('Missing listWebUrl for quickCommands') ; readyToUpdate = false ; }
// if ( !this.props.listTitle ) { alert('Missing listTitle for quickCommands') ; readyToUpdate = false ; }
// if ( readyToUpdate === true ) {
// //Attempt to update item:
// if ( thisButtonObject.confirm && thisButtonObject.confirm.length > 0 ) {
// let myDialog: IMyBigDialogProps = this.createBlankDialog();
// myDialog.title = "Are you sure you want to make this update?";
// myDialog.dialogMessage = thisButtonObject.confirm + '';
// myDialog.confirmButton = thisButtonObject.label + '';
// myDialog.showDialog = true;
// myDialog.maxWidth = 600;
// this.setState({
// pickedCommand: thisButtonObject,
// myDialog: myDialog as IMyBigDialogProps,
// });
// } else {
// await this.completeThisQuickUpdate ( itemId, thisButtonObject );
// }
// } else {
// //Don't update item:
// }
// }
// if ( thisButtonObject.panelMessage ) {
// this.setState({
// panelMessage: thisButtonObject.panelMessage,
// });
// }
// }
// }
// private async completeThisQuickUpdate( itemId: string, thisButtonObject : IQuickButton ): Promise<void> {
// /**
// * https://github.com/mikezimm/drilldown7/issues/407
// * added useWeb update to solve this issue here...
// * will also look upstream as well
// */
// const { webUrl, listTitle, sourceUserInfo, quickCommands, bannerProps } = this.props;
// const useWeb = makeAbsoluteUrl(webUrl);
// const result = await updateReactListItem( bannerProps.fpsSpService, useWeb, listTitle, parseInt(itemId), thisButtonObject, sourceUserInfo, this.state.panelItem );
// //If success (result is error message and null by default )
// // if ( result === null && quickCommands.onUpdateReload === true ) {
// /**
// * Updated this logic based on returning resultInfo not null for errors:
// * https://github.com/mikezimm/fps-library-v2/issues/20
// */
// if ( quickCommands.successBanner > 0 && result.status === 'Success') {
// let updates = Object.keys(thisButtonObject.updateItem).map( k => {
// return k;
// });
// result.statusElement = <div style={{ marginTop: '5px'}}> { [
// <h3 key="h3Finished" style={{paddingTop: '10px'}}>Finished updating item [ {itemId} ]</h3>,
// <div key="bannerIncluding">Including: { updates.join(', ')} </div>
// ] }</div>;
// quickCommands.refreshCallback( result, false );
// //https://github.com/mikezimm/fps-library-v2/issues/20
// } else if ( result ) {
// quickCommands.refreshCallback( result, true );
// }
// this.setState({
// /**
// * Added 'as any' to commandResult: result, due to typescript error:
// * Types of property 'statusElement' are incompatible.
// Type 'IJsxElement' is not assignable to type 'Element'.
// Property 'key' is optional in type 'IJsxElement' but required in type 'Element'.ts(2322)
// */
// commandResult: result as any,
// commandError: result.status === 'Success' ? false : true,
// });
// if ( result ) {
// const delay = result.status !== 'Success' ? 10000 : quickCommands.successBanner;
// setTimeout(() => {
// this.setState({
// commandResult: null,
// commandError: false,
// });
// } , delay);
// }
// }
// /**
// * Close the dialog
// */
// private _closeDialog = () => {
// this.setState({
// myDialog: this.createBlankDialog(),
// });
// }
// private _renderSecurity = ( item: IAnySourceItemAny , fieldName: string, ) => {
// if ( check4This( Check4.fpsReactRender_Eq_true, false ) ) console.log('_renderSecurity: ', fieldName, item );
// const unique : boolean = item.HasUniqueRoleAssignments === true ? true : false;
// const itemIcon: string = item.HasUniqueRoleAssignments === true ? 'Shield' : item.ItemSharingInfo ? 'Share' : '';
// return ( item: any, index: number ) => {
// const unique = item.HasUniqueRoleAssignments === true ? true : false;
// const itemIcon = item.HasUniqueRoleAssignments === true ? 'Shield' : item.ItemSharingInfo ? 'Share' : '';
// if (check4This(fpsReactRender_Eq_true, false))
// console.log('_renderSecurity: ', fieldName, unique, itemIcon, item);
// return <Icon style={{ color: unique === true ? 'red' : 'gray' }} iconName={ itemIcon } />
// };
// }
// /***
// * .d8888. db db .d88b. db d8b db d8888b. .d8b. d8b db d88888b db
// * 88' YP 88 88 .8P Y8. 88 I8I 88 88 `8D d8' `8b 888o 88 88' 88
// * `8bo. 88ooo88 88 88 88 I8I 88 88oodD' 88ooo88 88V8o 88 88ooooo 88
// * `Y8b. 88~~~88 88 88 Y8 I8I 88 88~~~ 88~~~88 88 V8o88 88~~~~~ 88
// * db 8D 88 88 `8b d8' `8b d8'8b d8' 88 88 88 88 V888 88. 88booo.
// * `8888Y' YP YP `Y88P' `8b8' `8d8' 88 YP YP VP V8P Y88888P Y88888P
// *
// *
// */
// private async _onShowPanel (item: IAnySourceItemAny) {
// let e: any = event;
// // console.log('_onShowPanel: e',e);
// // console.log('_onShowPanel item clicked:',item);
// let isLink = e && e.srcElement && e.srcElement.href && e.srcElement.href.length > 0 ? true : false;
// /**
// * Added to solve https://github.com/mikezimm/drilldown7/issues/159
// * on /sites/ChinaSustainabilitySteeringCommittee/SitePages/Climate-Articles.aspx
// * Have never seen this error before. Tried same exact config to same list on another site and do not get the error.
// *
// */
// if ( e === undefined ) {
// return;
// } else if ( isLink === true ) {
// window.open(e.srcElement.href, '_blank');
// } else {
// let clickedAttachIcon = e?.target?.dataset?.iconName === 'Attach' ? true : false;
// if (clickedAttachIcon === true || item.length > 0 ) {
// let thisID = clickedAttachIcon === true ? findParentElementPropLikeThis(e.target, 'id', 'ButtonID', 5, 'begins') : item[0].Id;
// thisID = typeof thisID === 'string' ? thisID.replace('ButtonID','') : thisID;
// let panelItem : IDrillItemInfo = this._getItemFromId(this.props.items, 'Id', thisID );
// let lastPanelId = this.state.panelId;
// let clickedAttach = false;
// if ( e.srcElement.dataset && e.srcElement.dataset.iconName === 'Attach' ) {
// clickedAttach = true;
// }
// await this._createPanelAttachments(thisID, panelItem );
// let canShowAPanel = thisID === null || thisID === undefined || panelItem === null ? false : true;
// let showFullPanel = canShowAPanel === true && clickedAttach !== true ? true : false;
// // 2020-10-13: The last check in this row just didn't seem right... was && this.props.includeListLink === true ? true : false;
// let showAttachPanel = canShowAPanel === true && clickedAttach === true && this.props.includeAttach === true ? true : false;
// this.setState({
// showPanel: showFullPanel,
// showAttach: showAttachPanel ,
// clickedAttach: clickedAttach,
// panelId: thisID,
// panelItem: panelItem,
// lastPanelId: lastPanelId,
// panelAttachments: this.state.lastAttachId === thisID ? this.state.panelAttachments : [],
// });
// }
// }
// }
// private _getItemFromId( items: IDrillItemInfo[], key: string, val: any ) {
// let panelItem : IDrillItemInfo = null;
// let showIndex: any | false = doesObjectExistInArray(this.props.items, key, val, false);
// if (showIndex !== false ) {
// panelItem = this.props.items[showIndex];
// // console.log('showPanelPropsItem', panelItem );
// }
// return panelItem;
// }
// private _onClosePanel = (): void => {
// this.setState({
// showPanel: false,
// showAttach: false ,
// clickedAttach: false,
// });
// }
// /***
// * d8888b. .d8b. d8b db d88888b db d88888b .d88b. .d88b. d888888b d88888b d8888b.
// * 88 `8D d8' `8b 888o 88 88' 88 88' .8P Y8. .8P Y8. `~~88~~' 88' 88 `8D
// * 88oodD' 88ooo88 88V8o 88 88ooooo 88 88ooo 88 88 88 88 88 88ooooo 88oobY'
// * 88~~~ 88~~~88 88 V8o88 88~~~~~ 88 88~~~ 88 88 88 88 88 88~~~~~ 88`8b
// * 88 88 88 88 V888 88. 88booo. 88 `8b d8' `8b d8' 88 88. 88 `88.
// * 88 YP YP VP V8P Y88888P Y88888P YP `Y88P' `Y88P' YP Y88888P 88 YD
// *
// *
// */
// /**
// * This was copied from codepen example code to render a footer with buttons:
// * https://fabricweb.z5.web.core.windows.net/oufr/6.50.2/#/examples/panel
// *
// */
// private _onRenderFooterContent = (): JSX.Element => {
// return null;
// return (
// <div>
// <PrimaryButton onClick={this._onClosePanel} style={{ marginRight: '8px' }}>
// Save
// </PrimaryButton>
// <DefaultButton onClick={this._onClosePanel}>Cancel</DefaultButton>
// </div>
// );
// }
// /***
// * d888888b .d88b. d888b d888b db d88888b .d8888.
// * `~~88~~' .8P Y8. 88' Y8b 88' Y8b 88 88' 88' YP
// * 88 88 88 88 88 88 88ooooo `8bo.
// * 88 88 88 88 ooo 88 ooo 88 88~~~~~ `Y8b.
// * 88 `8b d8' 88. ~8~ 88. ~8~ 88booo. 88. db 8D
// * YP `Y88P' Y888P Y888P Y88888P Y88888P `8888Y'
// *
// *
// */
// private getPageToggles( ) {
// let togRefinerCounts = {
// //label: <span style={{ color: 'red', fontWeight: 900}}>Rails Off!</span>,
// label: <span>Panel width</span>,
// key: 'togggleWidth',
// _onChange: this.updatePanelWidth.bind(this),
// checked: this.state.panelWidth === PanelType.medium ? false : true,
// onText: 'Wide',
// offText: 'Medium',
// className: '',
// styles: '',
// };
// let theseToggles = [];
// theseToggles.push( togRefinerCounts ) ;
// let pageToggles : IContentsToggles = {
// toggles: theseToggles,
// childGap: 10,
// vertical: false,
// hAlign: 'end',
// vAlign: 'start',
// rootStyle: { width: 100 , paddingTop: 0, paddingRight: 0, }, //This defines the styles on each toggle
// };
// return pageToggles;
// }
// private updatePanelWidth() {
// this.setState({
// panelWidth: this.state.panelWidth === PanelType.medium ? PanelType.large : PanelType.medium,
// });
// }
// private _updateFirstLastVisible( firstVisible: number, lastVisible: number ) {
// this.setState({
// firstVisible: firstVisible,
// lastVisible: lastV