@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
125 lines (124 loc) • 7.16 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as InternalRedux from '../../Redux/ActionsReducers/InternalRedux';
import * as SmartEditRedux from '../../Redux/ActionsReducers/SmartEditRedux';
import { MathOperation, StatusColour } from '../../AdaptableState/Common/Enums';
import * as React from 'react';
import { StringExtensions } from '../../Utilities/Extensions/StringExtensions';
import { PreviewResultsPanel } from '../Components/PreviewResultsPanel';
import { EnumExtensions } from '../../Utilities/Extensions/EnumExtensions';
import Input from '../../components/Input';
import { ACCESS_LEVEL_READ_ONLY } from '../../Utilities/Constants/GeneralConstants';
import { ButtonApply } from '../Components/Buttons/ButtonApply';
import { AdaptablePopover } from '../AdaptablePopover';
import { UIHelper } from '../UIHelper';
import { connect } from 'react-redux';
import { Flex } from '../../components/Flex';
import { SingleSelect } from '../../components/NewSelect';
import { cn } from '../../lib/utils';
class SmartEditViewPanelComponent extends React.Component {
cleanupEvent;
constructor(props) {
super(props);
this.state = {
SelectedColumnId: '',
};
}
componentDidMount() {
if (this.props.api) {
const adaptable = this.props.api.internalApi.getAdaptableInstance();
if (adaptable) {
this.cleanupEvent = adaptable._on('CellsSelected', () => {
this.checkSelectedCells();
});
}
}
this.checkSelectedCells();
}
componentWillUnmount() {
this.cleanupEvent?.();
}
render() {
let statusColour = this.getStatusColour();
let selectedColumn = StringExtensions.IsNotNullOrEmpty(this.state.SelectedColumnId)
? this.props.api.columnApi.getColumnWithColumnId(this.state.SelectedColumnId)
: null;
let previewPanel = (_jsx(PreviewResultsPanel, { previewInfo: this.props.PreviewInfo, api: this.props.api, selectedColumn: selectedColumn, showPanel: true, showHeader: false }));
const operationMenuItems = EnumExtensions.getNames(MathOperation).map((mathOperation, index) => {
return {
onClick: () => this.props.onSmartEditOperationChange(mathOperation),
value: mathOperation,
label: mathOperation,
};
});
const customOperations = this.props.api.optionsApi.getEditOptions().smartEditOptions?.customOperations ?? [];
if (customOperations?.length) {
operationMenuItems.push(...customOperations.map((operation) => {
return {
onClick: () => this.props.onSmartEditOperationChange(operation),
label: operation.name,
value: operation,
};
}));
}
const applyButtonStyle = {
color: statusColour,
fill: 'currentColor',
};
let shouldDisable = this.props.accessLevel == ACCESS_LEVEL_READ_ONLY ||
!this.props.IsValidSelection ||
this.props.api.layoutApi.isCurrentLayoutPivot() == true;
const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
return (_jsxs(Flex, { flexDirection: "row", className: cn(`ab-${elementType}__SmartEdit__wrap twa:gap-1 twa:flex-row`, {
'twa:flex-nowrap': this.props.viewType === 'Toolbar',
'twa:flex-wrap': this.props.viewType !== 'Toolbar',
}), flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap', children: [_jsxs(Flex, { className: "twa:gap-1", children: [_jsx(SingleSelect, { ariaLabel: 'Select Smart Edit Operation', value: typeof this.props.SmartEditOperation === 'object'
? this.props.SmartEditOperation.name
: this.props.SmartEditOperation, items: operationMenuItems, onValueChange: (operation) => this.props.onSmartEditOperationChange(operation) }), _jsx(Input, { style: {
width: '5rem',
}, className: `ab-${elementType}__SmartEdit__select-value`, value: this.props.SmartEditValue.toString(), type: "number", placeholder: "Enter a Number", step: "any", onChange: (e) => this.onSmartEditValueChange(e), disabled: shouldDisable })] }), _jsxs(Flex, { className: "twa:gap-1", children: [!shouldDisable && (_jsx(ButtonApply, { onClick: () => this.onApplyClick(), style: applyButtonStyle, className: `ab-${elementType}__SmartEdit__apply`, tooltip: "Apply Smart Edit", disabled: StringExtensions.IsNullOrEmpty(`${this.props.SmartEditValue}`) ||
(this.props.PreviewInfo != null &&
this.props.PreviewInfo.previewValidationSummary.validationResult == 'All'), accessLevel: this.props.accessLevel, children: this.props.viewType === 'ToolPanel' && 'Apply Smart Edit' })), !shouldDisable && (_jsx(AdaptablePopover, { headerText: "Preview Results", className: `ab-${elementType}__SmartEdit__info`, bodyText: [previewPanel], popoverMinWidth: 360, popoverMaxWidth: 500, popupPadding: 0, MessageType: UIHelper.getMessageTypeByStatusColour(statusColour), useButton: true, showEvent: 'focus', hideEvent: "blur" }))] })] }));
}
checkSelectedCells() {
this.props.onSmartEditCheckSelectedCells();
}
onSmartEditValueChange(event) {
const e = event.target;
this.props.onSmartEditValueChange(Number(e.value));
}
getStatusColour() {
if (StringExtensions.IsNotNullOrEmpty(`${this.props.SmartEditValue}`) &&
this.props.PreviewInfo) {
if (this.props.PreviewInfo.previewValidationSummary.validationResult == 'All') {
return StatusColour.Error;
}
if (this.props.PreviewInfo.previewValidationSummary.validationResult == 'Some') {
return StatusColour.Warn;
}
}
return StatusColour.Success;
}
onApplyClick() {
this.onApplySmartEdit();
}
onApplySmartEdit() {
this.props.onApplySmartEdit();
}
}
function mapStateToProps(state, ownProps) {
return {
SmartEditValue: state.Internal.SmartEdit.SmartEditValue,
SmartEditOperation: state.Internal.SmartEdit.SmartEditOperation,
IsValidSelection: state.Internal.SmartEdit.IsValidSmartEditSelection,
PreviewInfo: state.Internal.SmartEdit.SmartEditPreviewInfo,
};
}
function mapDispatchToProps(dispatch) {
return {
onSmartEditValueChange: (value) => dispatch(InternalRedux.SmartEditChangeValue(value)),
onSmartEditOperationChange: (SmartEditOperation) => dispatch(InternalRedux.SmartEditChangeOperation(SmartEditOperation)),
onSmartEditCheckSelectedCells: () => dispatch(InternalRedux.SmartEditCheckCellSelection()),
onApplySmartEdit: () => dispatch(SmartEditRedux.SmartEditApply(false)),
};
}
export let SmartEditViewPanelControl = connect(mapStateToProps, mapDispatchToProps)(SmartEditViewPanelComponent);