@mikezimm/fps-library-v2
Version:
Library of reusable typescript/javascript functions, interfaces and constants
157 lines (155 loc) • 10.5 kB
JavaScript
/**
* CodeAnalizerComment: Updated 2 imports on 2024-09-22 14:49:52
* 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;'
*/
/**
* CodeAnalizerComment: Updated 2 imports on 2024-09-21 23:07:24
* Update:: import { getHelpfullError } to '@mikezimm/fps-core-v7/lib/logic/Errors/friendly;'
* Update:: import { IUser } to '@mikezimm/fps-core-v7/lib/logic/Users/IUserInterfaces;'
*/
import * as React from 'react';
import { Icon } from '@fluentui/react/lib/Icon';
import ReactJson from '@microlink/react-json-view';
// import { mergeStyles } from '@fluentui/react/lib/Styling';
import { Stack } from '@fluentui/react/lib/Stack';
import { PrimaryButton, DefaultButton } from '@fluentui/react/lib/Button';
import { NoCommandsInfo } from './noCommandsInfo';
import { getHelpfullError } from '@mikezimm/fps-core-v7/lib/logic/Errors/friendly';
/**
*
* @param quickCommands
* @param item
* @param sourceUserInfo //This is just passed in in order to allow for user targeted b.showWhenEvalTrue checks
*/
export function createPanelButtonsV2(quickCommands, item, sourceUserInfo, _panelButtonClicked, delim, showCommandCode) {
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) {
buildAllButtonsTest = false;
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;
let rowCode = [];
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) {
let 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(delim);
const buttonTitle = b.label;
// const iconName: string = b.icon;
// https://github.com/mikezimm/drilldown7/issues/219
const buttonIcon = b.icon ? { iconName: b.icon, style: { fontSize: 'xx-large', marginRight: '15px' } } : undefined;
let 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: (event) => _panelButtonClicked(b, item, event), disabled: b.disabled, checked: b.checked })) :
React.createElement("div", { id: buttonID, title: buttonTitle },
React.createElement(DefaultButton, { style: buttonStyles, iconProps: buttonIcon, text: b.label, onClick: (event) => _panelButtonClicked(b, item, event), disabled: b.disabled, checked: b.checked }));
let dividerIcon = undefined;
// https://github.com/mikezimm/drilldown7/issues/237
if (b.icon && (b.type === 'divider' || b.type === 'label-only')) {
dividerIcon = React.createElement(Icon, { iconName: b.icon, styles: { root: { fontSize: 'xx-large', marginRight: '15px' } } });
}
if (b.type === 'divider') {
buttonStyles = b.styleButton ? b.styleButton : { width: '100%', textAlign: 'center', padding: !buttonTitle ? '15px' : '1px', margin: '15px 0px 10px 0px', background: 'lightgray' };
thisButton = !buttonTitle ?
React.createElement("div", { style: buttonStyles, onClick: (event) => _panelButtonClicked(b, item, event) }, dividerIcon) :
React.createElement("div", { style: buttonStyles, onClick: (event) => _panelButtonClicked(b, item, event) },
React.createElement("h3", null,
dividerIcon,
buttonTitle));
}
else if (b.type === 'label-only') {
buttonStyles = b.styleButton ? buttonStyles : null;
thisButton = React.createElement("h3", { style: buttonStyles, onClick: (event) => _panelButtonClicked(b, item, event) },
dividerIcon,
" ",
buttonTitle);
}
buttons.push(thisButton);
}
// https://github.com/mikezimm/drilldown7/issues/252
if (showCommandCode === true) {
rowCode.push(React.createElement(ReactJson, { src: b, name: b.label ? b.label : 'Button JSON', collapsed: true, displayDataTypes: true, displayObjectSize: true, enableClipboard: true, style: { padding: '10px 0px' } }));
}
}); //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,
" "));
// https://github.com/mikezimm/drilldown7/issues/252
if (rowCode.length > 0)
allButtonRows.push(React.createElement("div", { style: styleRows },
React.createElement(Stack, { horizontal: true, tokens: stackQuickCommands }, rowCode)));
} //END if ( buttonRow && buttonRow.length > 0 ) {
}); //END quickCommands.buttons.map( (buttonRow, r) => {
// allButtonRows.push( <Icon iconName= { 'Emoji2' } style={ { fontSize: '24px', } }/> );
} //END if ( buildAllButtonsTest === true ) {
}
return allButtonRows;
}
//# sourceMappingURL=createPanelButtonsV2.js.map