@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
90 lines (89 loc) • 5.49 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.CellSummaryViewPanelControl = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const EnumExtensions_1 = require("../../Utilities/Extensions/EnumExtensions");
const Enums_1 = require("../../AdaptableState/Common/Enums");
const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
const CellSummaryPopover_1 = require("./CellSummaryPopover");
const rebass_1 = require("rebass");
const GeneralConstants = tslib_1.__importStar(require("../../Utilities/Constants/GeneralConstants"));
const AdaptablePopover_1 = require("../AdaptablePopover");
const InternalRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/InternalRedux"));
const react_redux_1 = require("react-redux");
const Select_1 = require("../../components/Select");
class CellSummaryViewPanelComponent extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
let adaptable = this.props.api.internalApi.getAdaptableInstance();
if (adaptable) {
this.cleanupEvent = adaptable._on('CellsSelected', () => {
this.checkSelectedCells();
});
}
this.checkSelectedCells();
}
componentWillUnmount() {
this.cleanupEvent?.();
}
render() {
let operationMenuItems = EnumExtensions_1.EnumExtensions.getNames(Enums_1.SummaryOperation).map((summaryOperation, index) => {
return {
label: summaryOperation,
value: summaryOperation,
};
});
const cellSummaryOperationDefinitions = this.props.api.cellSummaryApi.getCustomCellSummaryOperations();
const operationDefinitions = ArrayExtensions_1.default.IsNullOrEmpty(cellSummaryOperationDefinitions)
? []
: cellSummaryOperationDefinitions.map((operationDefinition) => {
return {
value: operationDefinition.operationName,
label: operationDefinition.operationName,
};
});
let cellSummaryPopover = React.createElement(CellSummaryPopover_1.CellSummaryPopover, { CellSummary: this.props.CellSummary });
let shouldDisable = this.props.accessLevel == 'ReadOnly' || this.props.CellSummary == null;
const renderOperationValue = () => {
if (shouldDisable) {
return;
}
const operationValue = this.getOperationValue();
if (operationValue == undefined) {
return;
}
return this.props.viewType === 'ToolPanel' ? (React.createElement(rebass_1.Flex, { className: `ab-${elementType}__CellSummary__value`, style: { borderRadius: 'var(--ab__border-radius)' }, marginRight: 2, padding: 2, color: 'var( --ab-color-text-on-info)', backgroundColor: 'var(--ab-color-info)', fontSize: 'var( --ab-font-size-2)' }, operationValue)) : (React.createElement(rebass_1.Flex, { flex: 1, marginRight: 2, marginLeft: 1, justifyContent: "center", className: `ab-${elementType}__CellSummary__value`, color: 'var(--ab-color-text-on-primary)' }, operationValue));
};
const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
return (React.createElement(rebass_1.Flex, { flexDirection: "row", className: shouldDisable ? GeneralConstants.READ_ONLY_STYLE : `ab-${elementType}__CellSummary__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
React.createElement(rebass_1.Flex, { flex: 1 },
React.createElement(Select_1.Select, { "aria-label": "Cell Summary Operation Selector", style: { width: '100%' }, className: `ab-${elementType}__CellSummary__select`, disabled: shouldDisable, options: [...operationMenuItems, ...operationDefinitions], onChange: (x) => this.props.onCellSummaryOperationChange(x), value: this.props.CellSummaryOperation })),
React.createElement(rebass_1.Flex, { alignItems: "center", ml: 2 }, React.createElement(React.Fragment, null,
renderOperationValue(),
this.props.CellSummary != null && this.props.CellSummary.Count > 0 && (React.createElement(AdaptablePopover_1.AdaptablePopover, { popoverMaxWidth: 360, className: "ab-ToolPanel__CellSummary__info", bodyText: [cellSummaryPopover], useButton: true, showEvent: 'focus', hideEvent: "blur", tooltipText: 'Show Cell Summaries' }))))));
}
checkSelectedCells() {
this.props.onCreateCellSummary();
}
getOperationValue() {
const api = this.props.api;
return api.cellSummaryApi.getCellSummaryOperationValue(this.props.CellSummaryOperation);
}
}
function mapStateToProps(state, ownProps) {
return {
SelectedCellInfo: state.Internal.SelectedCellInfo,
CellSummaryOperation: state.Internal.CellSummary.CellSummaryOperation,
CellSummary: state.Internal.CellSummary.CellSummaryInfo,
};
}
function mapDispatchToProps(dispatch) {
return {
onCellSummaryOperationChange: (summaryOperation) => dispatch(InternalRedux.CellSummaryChangeOperation(summaryOperation)),
onCreateCellSummary: () => dispatch(InternalRedux.CreateCellSummaryInfo()),
};
}
exports.CellSummaryViewPanelControl = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(CellSummaryViewPanelComponent);