@mikezimm/fps-library-v2
Version:
Library of reusable typescript/javascript functions, interfaces and constants
275 lines (274 loc) • 16 kB
JavaScript
/**
* CodeAnalizerComment: Updated 11 imports on 2024-09-21 23:07:24
* Update:: import { ILoadPerformance } to '@mikezimm/fps-core-v7/lib/components/molecules/Performance/IPerformance;'
* Update:: import { ILoadPerformanceOps } to '@mikezimm/fps-core-v7/lib/components/molecules/Performance/IPerformance;'
* Update:: import { IPerformanceOp } to '@mikezimm/fps-core-v7/lib/components/molecules/Performance/IPerformance;'
* Update:: import { startPerformOp } to '@mikezimm/fps-core-v7/lib/components/molecules/Performance/functions;'
* Update:: import { updatePerformanceEnd } to '@mikezimm/fps-core-v7/lib/components/molecules/Performance/functions;'
* Update:: import { createBasePerformanceInit } to '@mikezimm/fps-core-v7/lib/components/molecules/Performance/functions;'
* Update:: import { IFieldPanelFetchState } to '@mikezimm/fps-core-v7/lib/components/molecules/FieldPanel/interfaces/IFieldPanelHookProps;'
* Update:: import { IFieldPanelState } to '@mikezimm/fps-core-v7/lib/components/molecules/FieldPanel/interfaces/IFieldPanelHookProps;'
* Update:: import { IMinField } to '@mikezimm/fps-core-v7/lib/components/molecules/FieldPanel/interfaces/IFieldPanelHookProps;'
* Update:: import { IMinWPFieldPanelProps } to '@mikezimm/fps-core-v7/lib/components/molecules/FieldPanel/interfaces/IMinWPFieldPanelProps;'
* Update:: import { IMinListProps } to '@mikezimm/fps-core-v7/lib/components/molecules/FieldPanel/interfaces/IMinWPFieldPanelProps;'
*/
import * as React from 'react';
import { Icon, } from '@fluentui/react/lib/Icon';
import { startPerformOp, updatePerformanceEnd, createBasePerformanceInit, } from "@mikezimm/fps-core-v7/lib/components/molecules/Performance/functions";
import { updateSelectedCommands } from './components/command/Accordion';
import CommandBuilderHook from './components/command/Accordion';
import { getMainSelectedItems, } from './components/OnClickHelpers';
// import { buildSelectedFieldTable } from './components/SelectedTable';
import ViewBuilderHook from './components/views/Accordion';
import { updateSelectedInfo, } from './components/OnClickHelpers';
import { removeFpsSpService } from '@mikezimm/fps-core-v7/lib/components/molecules/source-props/createSources/cloneSourceProps';
import { MainPane } from './components/main/Pane';
import { fetchErrorPanel, FetchPane } from './components/fetch/Pane';
import { fetchFieldPanelFields } from './components/fetch/funcions';
import SelectedTableHook from './components/selected/TableHook';
require('@mikezimm/fps-styles/dist/PropPaneCols.css');
export default class FieldPanel extends React.Component {
/**
* This updates the private _performance.ops object.
* @param key
* @param phase
* @param note
* @param count
* @returns
*/
_updatePerformance(key, phase, note = '', count) {
const ops = this._performance.ops;
let thisPart = ops[key];
if (phase === 'start' || !thisPart) {
thisPart = startPerformOp(`${key} ${note ? ' - ' + note : ''}`, this.props.displayMode, true); // https://github.com/mikezimm/Slick-Sections/issues/69
}
else if (phase === 'update') {
thisPart = updatePerformanceEnd(thisPart, true, count);
}
const thisOPs = this._performance.ops;
thisOPs[key] = thisPart;
}
/***
* .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
*
*
*/
constructor(props) {
super(props);
this._performance = null;
this._onCmdFieldClick = (ev) => {
const newSelected = updateSelectedCommands(ev, this.state.selected);
this.setState({ selected: newSelected });
};
this._selectFiltered = (ev) => {
const { listFields, selected, searchText } = this.state;
const selectedInfo = updateSelectedInfo(ev, listFields, selected, searchText);
this.setState(selectedInfo);
};
this._onFilterClick2 = (ev) => {
var _a, _b;
const target = ev.target;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { altKey, ctrlKey, shiftKey, type } = ev; // type is like 'click'
const fieldtype = ((_a = this.state) === null || _a === void 0 ? void 0 : _a.searchText.toLocaleLowerCase()) === ((_b = target.dataset) === null || _b === void 0 ? void 0 : _b.fieldtype.toLocaleLowerCase()) ? '' : target.dataset.fieldtype;
this._onSearchChange(fieldtype, '');
};
this._onSelectItem = (ev) => {
const newSelected = getMainSelectedItems(ev, this.state.listFields, this.state.selected);
this.setState({ selected: newSelected });
};
// private _onKeeperClick = ( ev: React.MouseEvent<HTMLElement> ): void => {
// const newSelected: IMinField[] = getKeeperClicks( ev, this.state.selected );
// this.setState({ selected: newSelected });
// };
// private _onDirectionClick = ( ev: React.MouseEvent<HTMLElement> ): void => {
// const newSelected: IMinField[] = getDirectionClicks( ev, this.state.selected );
// this.setState({ selected: newSelected });
// };
// private _onClosePanel = () : void => {
// this.setState({ panelItem: null });
// }
//field: IMinField
// private _showFieldPanel = ( ev: React.MouseEvent<HTMLElement> ): void => {
this._showFieldPanel = (item) => {
// const currentTarget: any = ev.currentTarget;
// // eslint-disable-next-line @typescript-eslint/no-unused-vars
// // const { altKey, ctrlKey, shiftKey, type } = ev; // type is like 'click'
// const fieldName: string = currentTarget.dataset?.fieldname ? currentTarget.dataset.fieldname : '';
// const index: number = currentTarget.dataset?.fieldindex ? currentTarget.dataset.fieldindex : -1 ;
// const panelItem: IMinField = this.state.listFields[ index ];
// console.log('Selected field: ', fieldName, panelItem );
this.setState({ panelItem: item });
};
this._performance = createBasePerformanceInit(this.props.displayMode, false);
this._performance.ops.superOnInit = startPerformOp('superOnInit', this.props.displayMode, true); // https://github.com/mikezimm/Slick-Sections/issues/69
this.state = {
status: 'Not started',
fetched: false,
searchText: '',
searchProp: '',
listFields: [],
filtered: [],
selected: [],
listIdx: this.props.lists.length > 0 ? 0 : null,
errMessage: '',
showDesignMode: false,
fullDesign: false,
panelItem: null,
};
this._performance.ops.superOnInit = updatePerformanceEnd(this._performance.ops.superOnInit, true, 666);
}
componentDidUpdate(prevProps) {
let refresh = false;
const prevLists = prevProps.lists ? prevProps.lists.map(list => { return removeFpsSpService(list); }) : [];
const newLists = this.props.lists ? this.props.lists.map(list => { return removeFpsSpService(list); }) : [];
if (this.props.expanded !== prevProps.expanded)
refresh = true;
if (JSON.stringify(prevLists) !== JSON.stringify(newLists)) {
refresh = true;
// Eventually add this and auto load?
// setTimeout(() => {
// if (this.LastSearch === NewSearch ) {
// this._onSearchChange( NewSearch );
// } else {
// }
// }, 1000);
this.setState({
status: 'Not started',
fetched: false,
searchText: '',
searchProp: '',
listFields: [],
filtered: [],
selected: [],
listIdx: this.props.lists.length > 0 ? 0 : null,
errMessage: '',
});
}
return refresh;
}
render() {
const { lists, selectedHeaderIcons, expanded } = this.props;
const { status, showDesignMode, errMessage, listIdx, panelItem, searchText } = this.state;
if (expanded === false)
return React.createElement("div", null);
const fetchPane = FetchPane({
onClickFetchFields: this._clickFetchFields.bind(this),
designMode: showDesignMode,
performance: this._performance,
status: status,
});
if (this.state.errMessage) {
const result = fetchErrorPanel(fetchPane, errMessage, lists[listIdx].webUrl, lists[listIdx].listTitle);
return (result);
}
else if (lists.length === 0) {
return (React.createElement("div", { className: 'prop-pane-cols' },
React.createElement("h3", null, "There are no lists to show columns for.")));
}
else {
const DesignCommands = this.props.designMode === 'Disabled' ? null : React.createElement(CommandBuilderHook, { selected: this.state.selected, updateSelected: this._updateSelected.bind(this),
// onCmdFieldClick={ this._onCmdFieldClick }
expanded: this.state.fullDesign, onExpandRight: this._toggleFullDesign.bind(this), tryCallback: this.props.tryCommands, saveCallback: this.props.saveCommands });
// createCommandBuilder( this.state.selected, this._onCmdFieldClick, this.state.fullDesign,
// this._showFieldPanel.bind(this), this._toggleFullDesign.bind(this) ) ;
const DesignViews = this.props.designMode === 'Disabled' ? null : React.createElement(ViewBuilderHook, { expanded: this.state.fullDesign, onExpandRight: this._toggleFullDesign.bind(this), selected: this.state.selected, tryCallback: this.props.tryViews, saveCallback: this.props.saveViews });
// const SelectedTable: JSX.Element = buildSelectedFieldTable( this.state.selected, this._onKeeperClick,
// this._onDirectionClick, this._showFieldPanel.bind(this) );
const SelectedHook = this.props.designMode === 'Disabled' ? null : React.createElement(SelectedTableHook, { updateSelected: this._updateSelected.bind(this),
// selectedCallBack = { this.props.selectedCallBack }
// onDirectionClick={ this._onDirectionClick }
// onKeeperClick={ this._onKeeperClick }
selected: this.state.selected });
const MainPanel = MainPane(this.props, this.state, {
selectFiltered: this._selectFiltered,
onFilterClick2: this._onFilterClick2,
onTextSearch: this._onTextSearch.bind(this),
toggleDesign: this._toggleDesign.bind(this),
onSelectItem: this._onSelectItem,
onTypeClick: this._onTypeClick.bind(this),
// showFieldPanel: this._showFieldPanel.bind(this),
});
let designPane = null;
const selectedHeaderRightElements = !selectedHeaderIcons ? undefined : selectedHeaderIcons.map(icon => {
return React.createElement(Icon, { title: icon.title, style: icon.iconStyles, iconName: icon.iconName, onClick: () => icon.onClick(this.state.selected) });
});
const selectedHeaderRightElement = !selectedHeaderRightElements || selectedHeaderRightElements.length === 0 ? undefined : React.createElement("div", { style: { display: 'flex', alignItems: 'center' } }, selectedHeaderRightElements);
const selectedHeaderStyles = { paddingBottom: '5px', fontSize: 'smaller', height: '2em', display: 'flex', alignItems: 'center' };
if (this.props.designMode !== 'Disabled' && showDesignMode === true) {
designPane = React.createElement("div", { className: 'design-pane' },
DesignCommands,
DesignViews,
React.createElement("div", { style: selectedHeaderStyles },
"CTRL-click ",
React.createElement("b", null, "Arrows"),
" to move to Top or Bottom ",
selectedHeaderRightElement),
SelectedHook);
}
const ComponentClasses = ['prop-pane-cols', 'cols-results'];
if (this.state.fullDesign === true)
ComponentClasses.push('full-design');
const componentStyles = this.props.bannerPillShape === true ? { margin: '0px 20px' } : null;
return (React.createElement("div", { className: ComponentClasses.join(' '), style: componentStyles },
fetchPane,
designPane,
MainPanel));
}
}
_toggleFullDesign(status) {
const fullDesign = this.state.fullDesign === true ? false : true;
this.setState({ fullDesign: fullDesign });
}
_updateSelected(selected) {
this.setState({ selected: selected });
}
async _clickFetchFields() {
const { lists, } = this.props;
const list = lists[this.state.listIdx];
const fetch = true;
if (fetch === true) {
this._updatePerformance('fetch4', 'start', 'fetchFields', null);
const fetchState = await fetchFieldPanelFields(list, this.props.fpsSpService);
this._updatePerformance('fetch4', 'update', '', fetchState.filtered.length);
this.setState(fetchState);
console.log('fetchState: finished!', fetchState);
}
}
_toggleDesign() {
const showDesignMode = this.state.showDesignMode === true ? false : true;
this.setState({ showDesignMode: showDesignMode });
}
_onTypeClick(field) {
const filterType = this.state.searchProp ? '' : field.TypeDisplayName;
this._onSearchChange('', filterType);
}
_onTextSearch(input, text = '') {
const SearchValue = typeof input === 'string' ? input : input && input.target && input.target.value ? input.target.value : '';
this._onSearchChange(SearchValue, '');
}
_onSearchChange(SearchValue, property = '') {
const SearchValueLc = SearchValue.toLocaleLowerCase();
const filtered = [];
this.state.listFields.map((field) => {
const textFound = !SearchValueLc ? 0 : field.searchTextLC.indexOf(SearchValueLc);
const propertyFound = !property ? true : field.TypeDisplayName === property;
if (textFound > -1 && propertyFound === true)
filtered.push(field);
});
const searchText = `${SearchValue}${property ? property : ''}`;
const showDesignMode = this.props.designMode !== 'Disabled' ? true : false;
if (!SearchValueLc) {
this.setState({ filtered: filtered, searchText: searchText, searchProp: property, showDesignMode: showDesignMode });
}
else {
this.setState({ filtered: filtered, searchText: searchText, searchProp: property, showDesignMode: showDesignMode });
}
}
}
//# sourceMappingURL=PropPaneColsClass.js.map