@mikezimm/fps-library-v2 1.0.38 → 1.0.40

package/lib/components/molecules/ReactListV1/component/reactListView.js

@@ -0,0 +1,846 @@
+import * as React from 'react';
+import { Icon } from 'office-ui-fabric-react/lib/Icon';
+// import { Icon, IIconProps } from 'office-ui-fabric-react';
+import { Web, } from "@pnp/sp/presets/all";
+import { Link, } from 'office-ui-fabric-react';
+import { Pivot, PivotItem, } from 'office-ui-fabric-react/lib/Pivot';
+import ReactJson from "react-json-view";
+// import { IUser } from '../../fpsReferences';
+// import { IQuickButton, IQuickCommands } from '@mikezimm/npmfunctions/dist/QuickCommands/IQuickCommands';
+// import { IDrillItemInfo } from '../../fpsReferences';
+// import { autoDetailsList } from '../../../../services/hoverCardService';
+// import { doesObjectExistInArray } from '../../fpsReferences';
+// import { findParentElementPropLikeThis } from '@mikezimm/npmfunctions/dist/Elements/functions';
+// import { getHelpfullError } from '../../fpsReferences';
+// import { buildConfirmDialogBig, IMyBigDialogProps } from '@mikezimm/npmfunctions/dist/Elements/dialogBox'; 
+// import stylesL from '../ListView/listView.module.scss';
+import { ListView, SelectionMode, } from "@pnp/spfx-controls-react/lib/ListView";
+// import { IGroup } from 'office-ui-fabric-react/lib/components/DetailsList';
+// import { mergeStyles } from 'office-ui-fabric-react/lib/Styling';
+import { Stack } from 'office-ui-fabric-react';
+import { Panel, PanelType } from 'office-ui-fabric-react/lib/Panel';
+import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';
+// import { Dialog, DialogType, DialogFooter, IDialogProps } 	from 'office-ui-fabric-react/lib/Dialog';
+// import { Button, ButtonType, } 			from 'office-ui-fabric-react/lib/Button';
+// import { Label } 			from 'office-ui-fabric-react/lib/Label';
+// import { updateReactListItem } from './listFunctions';
+// import { IContentsToggles, makeToggles } from '../fields/toggleFieldBuilder';
+// import styles from '../Contents/listView.module.scss';
+// import stylesRLV from './reactListView.module.scss';
+// import stylesInfo from './InfoPane.module.scss';
+import PageArrows from '../../Arrows/PageArrows';
+import { NoCommandsInfo } from '../atoms/noCommandsInfo';
+import { replaceHandleBarsValues } from '../../../../logic/Strings/handleBarsSub';
+import { getHelpfullError } from '../../../../logic/Errors/friendly';
+import { defaultBannerCommandStyles } from '../../../../common/commandStyles/defaults';
+import { buildConfirmDialogBig } from '../../../atoms/Elements/confirmDialogBig';
+import { makeToggles } from '../atoms/toggleFieldBuilder';
+import { autoDetailsList } from '../atoms/detailsList';
+import { findParentElementPropLikeThis } from '../../../../logic/DOM/Search/domSearch';
+import { updateReactListItem } from '../functions/updateReactListItem';
+import { doesObjectExistInArray } from '../../../../logic/Arrays/searching/objectfind';
+require('./reactListView.css');
+export default class ReactListItems extends React.Component {
+    createAttachPanel() {
+        return null;
+    }
+    /**
+     * createPanelAttachments is identical on ActionNews and Drilldown7 except panelItem interface
+     * @param thisId
+     * @param panelItem
+     */
+    async createPanelAttachments(thisId, panelItem) {
+        const thisListWeb = Web(this.props.webURL);
+        const thisListObject = thisListWeb.lists.getByTitle(this.props.listName);
+        let allItems = [];
+        let errMessage = null;
+        const attachments = [];
+        if (panelItem.Attachments && panelItem.Attachments === true) {
+            try {
+                allItems = await thisListObject.items.getById(thisId).attachmentFiles();
+                if (allItems.length > 0) {
+                    attachments.push(React.createElement("h2", null,
+                        "(",
+                        allItems.length,
+                        ") Attachments"));
+                    attachments.push(React.createElement("div", { style: { paddingBottom: "10px" } },
+                        React.createElement("b", null, "CTRL-Click"),
+                        " to open in new window"));
+                    allItems.map(a => {
+                        let attachmentItem = React.createElement("div", null,
+                            React.createElement(Link, { target: "_blank", href: a.ServerRelativeUrl },
+                                " ",
+                                a.FileName));
+                        attachments.push(attachmentItem);
+                    });
+                }
+            }
+            catch (e) {
+                errMessage = getHelpfullError(e, true, true); // eslint-disable-line @typescript-eslint/no-unused-vars
+            }
+        }
+        this.setState({
+            panelAttachments: attachments,
+            lastAttachId: thisId,
+        });
+    }
+    /**
+     *
+     * @param quickCommands
+     * @param item
+     * @param sourceUserInfo  //This is just passed in in order to allow for user targeted b.showWhenEvalTrue checks
+     */
+    createPanelButtons(quickCommands, item, sourceUserInfo) {
+        let allButtonRows = [];
+        //Adjusted per:  https://github.com/mikezimm/drilldown7/issues/211
+        if (!quickCommands || !quickCommands.buttons || quickCommands.buttons.length === 0) {
+            return NoCommandsInfo;
+        }
+        else {
+            let buildAllButtonsTest = true;
+            if (quickCommands.showWhenEvalTrue && quickCommands.showWhenEvalTrue.length > 0) {
+                //2022-01-18:  Added Try catch when testing and found my typed in quick command had error.
+                try {
+                    buildAllButtonsTest = eval(quickCommands.showWhenEvalTrue);
+                    if (buildAllButtonsTest === true) {
+                        //build all the buttons ( subject to individual button checks )
+                    }
+                    else {
+                        buildAllButtonsTest = false;
+                    }
+                }
+                catch (e) {
+                    let errMessage = getHelpfullError(e, false, false);
+                    console.log(`ERROR:  createPanelButtons: quickCommands.showWhenEvalTrue !!!`, quickCommands.showWhenEvalTrue);
+                    console.log(`ERROR:  createPanelButtons: quickCommands.showWhenEvalTrue Error Details`, errMessage);
+                    alert(`createPanelButtons: quickCommands.showWhenEvalTrue error !!! Check the console for details:   ${quickCommands.showWhenEvalTrue}`);
+                }
+            }
+            if (buildAllButtonsTest === true) {
+                quickCommands.buttons.map((buttonRow, r) => {
+                    if (buttonRow && buttonRow.length > 0) {
+                        let rowResult = null;
+                        const buttons = [];
+                        buttonRow.map((b, i) => {
+                            let buildThisButton = true;
+                            /**
+                             * showWhenEvalTrue must be run in the context of this section of code to be valid.
+                             */
+                            if (b.showWhenEvalTrue && b.showWhenEvalTrue.length > 0) {
+                                //2022-01-18:  Added Try catch when testing and found my typed in quick command had error.
+                                try {
+                                    const buildButtonTest = eval(b.showWhenEvalTrue);
+                                    if (buildButtonTest === true) {
+                                        //build all the buttons
+                                    }
+                                    else {
+                                        buildThisButton = false;
+                                    }
+                                }
+                                catch (e) {
+                                    const errMessage = getHelpfullError(e, false, false);
+                                    console.log(`createPanelButtons: b[${i}].showWhenEvalTrue error !!!`, b.showWhenEvalTrue);
+                                    console.log(`createPanelButtons: b[${i}].showWhenEvalTrue Error Details`, errMessage);
+                                    alert(`createPanelButtons: quickCommands.showWhenEvalTrue error !!! Check the console for details:   ${quickCommands.showWhenEvalTrue}`);
+                                }
+                            }
+                            if (buildThisButton === true) {
+                                const buttonStyles = b.styleButton ? b.styleButton : { minWidth: buttonRow.length === 1 ? '350px' : '', padding: '25px', marginBottom: '10px', fontSize: 'larger' };
+                                //Tried adding 
+                                // const IconElement = b.icon ? <Icon iconName= { 'Emoji2' } style={ defaultBannerCommandStyles }/> : undefined;
+                                const buttonID = ['ButtonID', r, i, item.Id].join(this.delim);
+                                const buttonTitle = b.label;
+                                // const iconName: string = b.icon;
+                                const buttonIcon = { iconName: b.icon, style: defaultBannerCommandStyles };
+                                const thisButton = b.primary === true ?
+                                    //Tried adding  iconName into Primary Button, does not work,
+                                    //Tried adding IconElement into icon Props, can't see it.
+                                    //Tried adding Icon Element into the div next to Primary button and could see it.
+                                    //
+                                    React.createElement("div", { id: buttonID, title: buttonTitle },
+                                        React.createElement(PrimaryButton, { style: buttonStyles, iconProps: buttonIcon, text: b.label, onClick: this._panelButtonClicked.bind(this), disabled: b.disabled, checked: b.checked })) :
+                                    React.createElement("div", { id: buttonID, title: buttonTitle },
+                                        React.createElement(DefaultButton, { style: buttonStyles, iconProps: buttonIcon, text: b.label, onClick: this._panelButtonClicked.bind(this), disabled: b.disabled, checked: b.checked }));
+                                buttons.push(thisButton);
+                            }
+                        }); //END buttonRow.map( (b,i) => {
+                        const stackQuickCommands = { childrenGap: 10 };
+                        rowResult = React.createElement(Stack, { horizontal: true, tokens: stackQuickCommands }, buttons);
+                        const styleRows = { paddingBottom: 10 };
+                        if (quickCommands.styleRow) {
+                            try {
+                                Object.keys(quickCommands.styleRow).map(k => {
+                                    styleRows[k] = quickCommands.styleRow[k];
+                                });
+                            }
+                            catch (e) {
+                                alert(`quickCommands.styleRow is not valid JSON... please fix: ${quickCommands.styleRow}`);
+                            }
+                        }
+                        allButtonRows.push(React.createElement("div", { style: styleRows },
+                            " ",
+                            rowResult,
+                            " "));
+                    } //END   if ( buttonRow && buttonRow.length > 0 ) {
+                }); //END  quickCommands.buttons.map( (buttonRow, r) => {
+                allButtonRows.push(React.createElement(Icon, { iconName: 'Emoji2', style: { fontSize: '24px', } }));
+            } //END   if ( buildAllButtonsTest === true ) {
+        }
+        return allButtonRows;
+    }
+    covertFieldInfoToIViewFields(parentListFieldTitles, fieldsToShow) {
+        /**
+         * This is the export format required:
+            export const  initials : IViewField = {
+            name: "userInitials",
+            displayName: "User",
+            isResizable: true,
+            sorting: true,
+            minWidth: 10,
+            maxWidth: 30
+        };
+         */
+        let viewFields = [];
+        if (fieldsToShow.length === 0) { //Do all in order of fieldInfo
+            if (parentListFieldTitles.length > 0) { //Do all in order of fieldInfo
+                parentListFieldTitles.map(f => {
+                    viewFields.push({
+                        name: f[0],
+                        displayName: f[1],
+                        isResizable: true,
+                        sorting: true,
+                        minWidth: 50,
+                        maxWidth: 100
+                    });
+                });
+            }
+        }
+        console.log('covertFieldInfoToIViewFields - viewFields', viewFields);
+        return viewFields;
+    }
+    handleExpandedFieldInfoToIViewFields(viewFields) {
+        //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;
+    }
+    createBlankDialog() {
+        let myDialog = {
+            title: '',
+            dialogMessage: '',
+            showDialog: false,
+            confirmButton: '',
+            _confirmDialog: this._confirmUpdateDialog.bind(this),
+            _closeDialog: this._closeDialog.bind(this),
+        };
+        return myDialog;
+    }
+    constructor(props) {
+        super(props);
+        this._componentWidth = null;
+        this.delim = '|||';
+        /***
+     *          .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
+     *
+     *
+     */
+        this._ListViewFontSizes = [`default-font-size`, `larger-font-size`, `large-font-size`];
+        /***
+     *         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
+     *
+     *
+     */
+        this._onGoToList = () => {
+            if (!this.props.parentListURL || this.props.parentListURL === null || this.props.parentListURL === undefined || this.props.parentListURL.length === 0) {
+                return; // Do nothing
+            }
+            let e = 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.parentListURL}?Source=${window.location.pathname}`, "_blank");
+        };
+        this._CreateNewItem = () => {
+            if (this.props.isLibrary === true) {
+                window.open(`${this.props.parentListURL}`, "_blank");
+            }
+            else {
+                window.open(`${this.props.parentListURL}/NewForm.aspx?Source=${window.location.pathname}&${window.location.search}`, "_blank");
+            }
+        };
+        /**
+         * Close the dialog
+         */
+        this._closeDialog = () => {
+            this.setState({
+                myDialog: this.createBlankDialog(),
+            });
+        };
+        this._onClosePanel = () => {
+            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
+         *
+         */
+        this._onRenderFooterContent = () => {
+            return null;
+            return (React.createElement("div", null,
+                React.createElement(PrimaryButton, { onClick: this._onClosePanel, style: { marginRight: '8px' } }, "Save"),
+                React.createElement(DefaultButton, { onClick: this._onClosePanel }, "Cancel")));
+        };
+        console.log('listView PROPS: ', this.props);
+        let parentListFieldTitles = this.props.parentListFieldTitles !== undefined && this.props.parentListFieldTitles !== null ? JSON.parse(this.props.parentListFieldTitles) : '';
+        //       console.log( 'parentListFieldTitles', parentListFieldTitles );
+        let viewFields = [];
+        if (this.props.viewFields.length > 0) {
+            viewFields = this.handleExpandedFieldInfoToIViewFields(this.props.viewFields);
+        }
+        else {
+            viewFields = this.covertFieldInfoToIViewFields(parentListFieldTitles, []);
+        }
+        let groupByFields = [];
+        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, ''); });
+        }
+        this.state = {
+            fontSize: this._ListViewFontSizes[0],
+            maxChars: this.props.maxChars ? this.props.maxChars : 50,
+            parentListFieldTitles: parentListFieldTitles,
+            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,
+            firstVisible: 0,
+            lastVisible: this.props.itemsPerPage - 1,
+        };
+    }
+    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
+     *
+     *
+     */
+    componentDidUpdate(prevProps, prevState) {
+        /* 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.richHeight !== this.props.richHeight) {
+            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.parentListURL !== this.props.parentListURL) {
+            redraw = true;
+        }
+        if (prevProps.richHeight !== this.props.richHeight) {
+            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
+     *
+     *
+     */
+    render() {
+        //console.log( 'ReactListItems props & state: ', this.props, this.state );
+        // let thisLog = null;
+        let showRichHeightButton = false;
+        //2022-02-01:  Updated this from drilldown7
+        if (this.props.items !== null && this.props.items.length > 0) {
+            let attachments = this.state.panelAttachments.length > 0 ? this.state.panelAttachments : null;
+            let dialog = !this.state.myDialog.showDialog ? null : buildConfirmDialogBig(this.state.myDialog);
+            /***
+             *    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 : React.createElement("div", { style: { float: 'right' } },
+                " ",
+                makeToggles(this.getPageToggles()),
+                " ");
+            const itemLink = React.createElement("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");
+            let fullPanel = null;
+            if (this.state.showPanel === true && this.state.panelId) {
+                fullPanel = React.createElement(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,
+                    React.createElement(Pivot, { "aria-label": "Basic Pivot Example", defaultSelectedIndex: 0, style: { paddingTop: '16px' } },
+                        React.createElement(PivotItem, { headerText: "Commands", itemKey: "Commands" },
+                            React.createElement("div", null,
+                                itemLink,
+                                React.createElement("div", { id: '20pxSpacer', style: { height: '20px' } }),
+                                attachments,
+                                this.createPanelButtons(this.props.quickCommands, this.state.panelItem, this.props.sourceUserInfo))),
+                        React.createElement(PivotItem, { headerText: "Details", itemKey: "Details" },
+                            itemLink,
+                            autoDetailsList(this.state.panelItem, ["Title", "refiners"], ["search", "meta", "searchString"], true)),
+                        React.createElement(PivotItem, { headerText: "JSON", itemKey: "JSON" },
+                            React.createElement("div", { id: "CommandsJSONPanel", style: { paddingTop: '20px' } },
+                                itemLink,
+                                React.createElement(ReactJson, { src: this.state.panelItem, name: 'panelItem', collapsed: true, displayDataTypes: true, displayObjectSize: true, enableClipboard: true, style: { padding: '20px 0px' } })))));
+            }
+            /**
+             * 2022-02-01:  This was copied/updated from drilldown7 to actionnews
+             */
+            let attachPanel = null;
+            if (this.state.showAttach === true && this.state.panelId) {
+                attachPanel = React.createElement(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);
+            }
+            let viewFieldsBase = this.state.viewFields;
+            let attachField = [];
+            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) => {
+                        let cursor = item.Attachments ? "pointer" : '';
+                        return React.createElement("div", { id: 'ButtonID' + item.Id, onClick: callBack, style: { fontSize: 'larger', fontWeight: 'bolder', width: '25px', textAlign: 'center', cursor: cursor } },
+                            React.createElement(Icon, { iconName: item.Attachments ? "Attach" : '' }));
+                    },
+                });
+            }
+            let viewFields = attachField.concat(viewFieldsBase);
+            let filtered = [];
+            this.props.items.map((item, idx) => {
+                if (idx >= this.state.firstVisible && idx <= this.state.lastVisible) {
+                    filtered.push(item);
+                }
+            });
+            const pageArrows = React.createElement(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 => {
+                //This is for:  https://github.com/mikezimm/drilldown7/issues/224
+                if (this.props.richColumns.indexOf(field.name) > -1) {
+                    showRichHeightButton = true;
+                    const fieldStyles = [`list-view-rt`];
+                    // fieldStyles.push( this._RichTextRowHeight[ this.state.richHeight ] );
+                    field.render = (item, index) => { return React.createElement("div", { style: { maxHeight: this.props.richHeight }, 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, index) => {
+                            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 React.createElement("a", { href: linkSubstitute }, textSubstitute);
+                            }
+                            else {
+                                return React.createElement("span", null, textSubstitute);
+                            }
+                        }; //  close:  field.render = ( item, index ) => { 
+                    } //    close   if ( isValid === true ) {
+                } //      close: } else if ( field.linkSubstitute ) {
+            }); //      close:  viewFields.map ( field => {
+            //=>> address:  https://github.com/mikezimm/drilldown7/issues/270
+            const changeRichHeight = showRichHeightButton !== true ? null :
+                React.createElement("div", { title: `Change row height from ${this.props.richHeight}`, onClick: this.props.updateRichHeightProps, style: { fontSize: 'larger', fontWeight: 'bolder', width: '25px', textAlign: 'center', cursor: 'pointer' } },
+                    React.createElement(Icon, { iconName: 'CollapseMenu' }));
+            //=>> address:  https://github.com/mikezimm/drilldown7/issues/169
+            const changeFont = React.createElement("div", { title: "Change font size", onClick: this._changeFontSize.bind(this), style: { fontSize: 'larger', fontWeight: 'bolder', width: '25px', textAlign: 'center', cursor: 'pointer' } },
+                React.createElement(Icon, { iconName: 'FontSize' }));
+            let listView = React.createElement("div", { className: this.state.fontSize },
+                React.createElement(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, 
+                    //defaultFilter="John"
+                    filterPlaceHolder: "Search...", groupByFields: this.props.groupByFields }));
+            //        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 : React.createElement("span", null, "Items"); // eslint-disable-line eqeqeq
+            let webTitle = null;
+            let listLink = !this.props.includeListLink ? null : React.createElement("div", { className: `info-heading`, onClick: this._onGoToList.bind(this), style: { marginRight: 30, whiteSpace: 'nowrap', paddingTop: 0, cursor: 'pointer', fontSize: 'smaller', background: 'transparent' } },
+                React.createElement("span", { style: { background: 'transparent' }, className: `list-link` }, "Go to list"));
+            let createItemLink = !this.props.createItemLink ? null : React.createElement("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' } },
+                React.createElement("span", { style: { background: 'transparent' }, className: `list-link` },
+                    React.createElement(Icon, { iconName: "AddTo" })));
+            // https://github.com/mikezimm/drilldown7/issues/249
+            let maxBlueBarLeft = createItemLink ? 35 : 40;
+            if (!listLink)
+                maxBlueBarLeft += 15;
+            if (barText !== null) {
+                webTitle = React.createElement("div", { style: { display: 'flex', justifyContent: 'space-between', }, className: [`info-heading`, `inner-shadow`].join(' ') },
+                    React.createElement("span", { className: `blue-bar-left`, style: { maxWidth: `${maxBlueBarLeft}%` }, title: this.props.blueBarTitleText },
+                        "( ",
+                        this.props.items.length,
+                        "  ) ",
+                        barText),
+                    pageArrows,
+                    React.createElement("span", { style: { gridRow: 'nowrap', display: 'inline-flex', gridGap: '.75em', marginRight: '25px' } },
+                        changeFont,
+                        changeRichHeight),
+                    React.createElement("span", { style: { whiteSpace: 'nowrap', display: 'flex', marginRight: '25px' } },
+                        createItemLink,
+                        listLink));
+                /*stylesL.reactListView*/
+                return (React.createElement("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 ) ;
+                    } },
+                    React.createElement("div", { style: { paddingTop: 10 }, className: `info-pane-tight` },
+                        webTitle,
+                        fullPanel,
+                        attachPanel,
+                        dialog,
+                        listView)));
+            }
+            // } else {
+            // <div className={ styles.container }></div>
+            //  return (
+            //     <div className={ styles.logListView }>
+            //         { thisLog }
+            //     </div>
+            //     );
+            // } 
+        } //if ( this.props.items != null && this.props.items.length > 0 ) {    
+    } // Render
+    _updateStateOnPropsChange(pushViewFieldsToState) {
+        let viewFields = [];
+        let parentListFieldTitles = this.props.parentListFieldTitles !== undefined && this.props.parentListFieldTitles !== null ? JSON.parse(this.props.parentListFieldTitles) : '';
+        if (this.props.viewFields.length > 0) {
+            viewFields = this.handleExpandedFieldInfoToIViewFields(this.props.viewFields);
+        }
+        else {
+            viewFields = this.covertFieldInfoToIViewFields(parentListFieldTitles, []);
+        }
+        let groupByFields = [];
+        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 ensureTrackTimeList(myListName: string, myListDesc: string, ProjectOrTime: string): Promise<boolean> {
+    async _panelButtonClicked(item) {
+        let e = event;
+        let thisID = findParentElementPropLikeThis(e.target, 'id', 'ButtonID', 5, 'begins');
+        if (!thisID) {
+            alert('Whoops! Can not find ID of _panelButtonClicked!');
+            return null;
+        }
+        else {
+            try {
+                await this.startThisQuickUpdate(thisID);
+            }
+            catch (ev) {
+                console.log('_panelButtonClicked error:', ev);
+            }
+        }
+    }
+    /**
+     * Open the dialog
+     */
+    //private _confirmUpdateDialog = () => {
+    async _confirmUpdateDialog(item) {
+        let e = event; // eslint-disable-line @typescript-eslint/no-unused-vars
+        let thisButtonObject = this.state.pickedCommand;
+        await this.completeThisQuickUpdate(this.state.panelId.toString(), thisButtonObject);
+        this.setState({
+            myDialog: this.createBlankDialog(),
+        });
+    }
+    //=>> address:  https://github.com/mikezimm/drilldown7/issues/169
+    _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] });
+    }
+    async startThisQuickUpdate(thisID) {
+        const buttonID = thisID.split(this.delim);
+        //let buttonID = ['ButtonID', r, i , item.Id].join(this.delim);
+        const buttonRow = buttonID[1];
+        const buttonIndex = buttonID[2];
+        const itemId = buttonID[3];
+        const thisButtonObject = this.props.quickCommands.buttons[buttonRow][buttonIndex];
+        if (!thisButtonObject) {
+            alert('_panelButtonClicked - can not find thisButtonObject - ' + thisID);
+        }
+        else {
+            if (thisButtonObject.updateItem) {
+                let readyToUpdate = true;
+                if (!this.props.webURL) {
+                    alert('Missing listWebUrl for quickCommands');
+                    readyToUpdate = false;
+                }
+                if (!this.props.listName) {
+                    alert('Missing listName for quickCommands');
+                    readyToUpdate = false;
+                }
+                if (readyToUpdate === true) {
+                    //Attempt to update item:
+                    if (thisButtonObject.confirm && thisButtonObject.confirm.length > 0) {
+                        let myDialog = 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,
+                        });
+                    }
+                    else {
+                        await this.completeThisQuickUpdate(itemId, thisButtonObject);
+                    }
+                }
+                else {
+                    //Don't update item:
+                }
+            }
+            if (thisButtonObject.panelMessage) {
+                this.setState({
+                    panelMessage: thisButtonObject.panelMessage,
+                });
+            }
+        }
+    }
+    async completeThisQuickUpdate(itemId, thisButtonObject) {
+        let result = await updateReactListItem(this.props.webURL, this.props.listName, parseInt(itemId), thisButtonObject, this.props.sourceUserInfo, this.state.panelItem);
+        //If success (result is error message and null by default )
+        if (result === null && this.props.quickCommands.onUpdateReload === true) {
+            let updates = Object.keys(thisButtonObject.updateItem).map(k => {
+                return k;
+            });
+            let bannerMessage = React.createElement("div", { style: { marginTop: '5px' } },
+                " ",
+                [
+                    React.createElement("h3", { key: "h3Finished", style: { paddingTop: '10px' } },
+                        "Finished updating item [ ",
+                        itemId,
+                        " ]"),
+                    React.createElement("div", { key: "bannerIncluding" },
+                        "Including: ",
+                        updates.join(', '),
+                        " ")
+                ]);
+            this.props.quickCommands.refreshCallback(bannerMessage, false);
+        }
+        else if (result !== null) {
+            this.props.quickCommands.refreshCallback(result, true);
+        }
+    }
+    /***
+     *    .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
+     *
+     *
+     */
+    async _onShowPanel(item) {
+        var _a, _b;
+        let e = 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 = ((_b = (_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.dataset) === null || _b === void 0 ? void 0 : _b.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 = 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 : [],
+                });
+            }
+        }
+    }
+    _getItemFromId(items, key, val) {
+        let panelItem = null;
+        let showIndex = doesObjectExistInArray(this.props.items, key, val, false);
+        if (showIndex !== false) {
+            panelItem = this.props.items[showIndex];
+            console.log('showPanelPropsItem', panelItem);
+        }
+        return panelItem;
+    }
+    /***
+     *         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'
+     *
+     *
+     */
+    getPageToggles() {
+        let togRefinerCounts = {
+            //label: <span style={{ color: 'red', fontWeight: 900}}>Rails Off!</span>,
+            label: React.createElement("span", null, "Panel width"),
+            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 = {
+            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;
+    }
+    updatePanelWidth() {
+        this.setState({
+            panelWidth: this.state.panelWidth === PanelType.medium ? PanelType.large : PanelType.medium,
+        });
+    }
+    _updateFirstLastVisible(firstVisible, lastVisible) {
+        this.setState({
+            firstVisible: firstVisible,
+            lastVisible: lastVisible,
+        });
+    }
+}
+//# sourceMappingURL=reactListView.js.map