@mikezimm/fps-library-v2
Version:
Library of reusable typescript/javascript functions, interfaces and constants
186 lines (185 loc) • 9.87 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 { startPerformOp, updatePerformanceEnd, createBasePerformanceInit, } from "@mikezimm/fps-core-v7/lib/components/molecules/Performance/functions";
// import "@pnp/sp/webs";
// import "@pnp/sp/clientside-pages/web";
import { getMainSelectedItems, } from './components/OnClickHelpers';
import { updateSelectedInfo, } from './components/OnClickHelpers';
import { MainPane } from './components/main/Pane';
import { fetchErrorPanel, FetchPane } from './components/fetch/Pane';
import { fetchFieldPanelFields } from './components/fetch/funcions';
import { removeFpsSpService } from '@mikezimm/fps-core-v7/lib/components/molecules/source-props/createSources/cloneSourceProps';
require('@mikezimm/fps-styles/dist/PropPaneCols.css');
export default class FieldPanelMin 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._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 });
};
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 (JSON.stringify(newLists) !== JSON.stringify(prevLists)) {
refresh = true;
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, } = this.props;
const { status, showDesignMode, errMessage, listIdx, panelItem, searchText } = this.state;
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 MainPanel = MainPane(this.props, this.state, {
selectFiltered: this._selectFiltered,
onFilterClick2: this._onFilterClick2,
onTextSearch: this._onTextSearch.bind(this),
toggleDesign: null,
onSelectItem: this._onSelectItem,
onTypeClick: this._onTypeClick.bind(this),
});
return (React.createElement("div", { className: ['prop-pane-cols', 'cols-results'].join(' ') },
fetchPane,
MainPanel));
}
}
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);
}
}
_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=PropPaneColsMinimal.js.map