@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
83 lines (82 loc) • 3.71 kB
JavaScript
import * as React from 'react';
import { Box, Flex } from 'rebass';
import DropdownButton from '../../../../components/DropdownButton';
import FormLayout, { FormRow } from '../../../../components/FormLayout';
import SimpleButton from '../../../../components/SimpleButton';
import { useAdaptable } from '../../../AdaptableContext';
import { PredicateEditor } from '../../PredicateEditor/PredicateEditor';
export const EntityRulePredicateEditor = (props) => {
const { api } = useAdaptable();
const { predicate } = props;
const allColumns = React.useMemo(() => {
return api.columnApi.getColumns().map((column) => ({
label: column.friendlyName,
value: column.columnId,
}));
}, []);
const handleClear = () => {
const newPredicates = props.data.Rule?.Predicates?.filter((prevPredicate) => prevPredicate !== predicate);
props.onChange({
...props.data,
Rule: {
Predicates: newPredicates,
},
});
};
const handlePredicateChange = (newPredicateDef) => {
let newPredicates = [];
if (predicate) {
newPredicates = props.data.Rule?.Predicates?.map((prevPredicate) => {
if (prevPredicate === predicate) {
return newPredicateDef;
}
return prevPredicate;
});
}
else {
// no previous predicate, e.g. it was cleared
newPredicates = [newPredicateDef];
}
props.onChange({
...props.data,
Rule: {
Predicates: newPredicates,
},
});
};
const predicateDefs = React.useMemo(() => {
let preparedPredicates = [];
if (props.getPredicateDefsForColId && props?.predicate?.ColumnId) {
preparedPredicates = props.getPredicateDefsForColId(props.predicate.ColumnId);
}
else {
preparedPredicates = props.predicateDefs;
}
return preparedPredicates;
}, [props.predicate]);
const columnIdPredicateScopeEnabled = Boolean(props.columnPredicateEnabled);
const columnFriendlyName = allColumns.find((col) => col.value === predicate?.ColumnId)?.label;
const columnOptions = allColumns.map((col) => ({
label: col.label,
onClick: () => {
handlePredicateChange({ PredicateId: null, ColumnId: col.value, Inputs: [] });
},
}));
// use global scope or custom scope
let predicateColumnId = null;
if (predicate?.ColumnId && predicate.ColumnId !== '') {
predicateColumnId = predicate.ColumnId;
}
else if ('ColumnIds' in props.data.Scope && props.data.Scope?.ColumnIds?.[0]) {
predicateColumnId = props.data.Scope?.ColumnIds?.[0];
}
return (React.createElement(Flex, { className: "ab-EntityRulePredicateEditor", p: 3, mb: 3 },
React.createElement(Box, { flex: 1 },
React.createElement(FormLayout, null,
columnIdPredicateScopeEnabled && (React.createElement(FormRow, { label: "Column" },
React.createElement(DropdownButton, { width: "100%", columns: ['label'], items: columnOptions }, columnFriendlyName ?? 'Select Column'))),
React.createElement(FormRow, { label: "Predicate" },
React.createElement(PredicateEditor, { columnId: predicateColumnId, predicateDefs: predicateDefs, predicate: predicate, onChange: handlePredicateChange, onClear: handleClear })))),
React.createElement(Box, null,
React.createElement(SimpleButton, { disabled: !predicate, ml: 2, onClick: handleClear, icon: "delete" }))));
};