@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
76 lines (75 loc) • 4.22 kB
JavaScript
import * as React from 'react';
import { Box, Flex } from 'rebass';
import { isAdaptableSystemIcon } from '../../../components/Icon';
import HelpBlock from '../../../components/HelpBlock';
import { Tag } from '../../../components/Tag';
import AdaptableInput from '../AdaptableInput';
import { AdaptableIconComponent } from '../AdaptableIconComponent';
import { Select } from '../../../components/Select';
import { ColumnValuesSelect } from '../FilterForm/ListBoxFilterForm';
import { useAdaptable } from '../../AdaptableContext';
import { useDistinctFilterColumnValues } from '../ColumnFilter/components/FloatingFilterValues';
import { useEffect } from 'react';
const isValuesPredicateDef = (colDef) => colDef && ['In', 'NotIn'].includes(colDef.id);
export const PredicateEditor = (props) => {
const baseClassName = 'ab-PredicateEditor';
const predicateDefsOptions = React.useMemo(() => props?.predicateDefs?.map((item) => ({
value: item.id,
label: item.label,
inputs: item.inputs,
})), [props.predicateDefs, props.onChange]);
const handlePredicateInputChange = (e, index) => {
const { value } = e.target;
const newInputs = [...(props.predicate.Inputs ?? [])];
newInputs[index] = value;
props.onChange({
...props.predicate,
Inputs: newInputs,
});
};
const handlePredicateValuesChange = (inputs) => {
props.onChange({
...props.predicate,
Inputs: inputs,
});
};
const currentPredicateDef = props?.predicateDefs?.find((item) => item.id === props.predicate?.PredicateId);
let icon = null;
if (currentPredicateDef) {
if (isAdaptableSystemIcon(currentPredicateDef?.icon)) {
icon = React.createElement(AdaptableIconComponent, { icon: currentPredicateDef.icon });
}
else if (currentPredicateDef?.icon && 'text' in currentPredicateDef?.icon) {
icon = React.createElement("span", null, currentPredicateDef.icon.text);
}
}
const adaptable = useAdaptable();
const columnId = props.columnId;
const column = adaptable.api.columnApi.getColumnWithColumnId(columnId);
const { quickFilterValues, isDistinctColumnValuesLoading, triggerValuesLoad } = useDistinctFilterColumnValues({
columnId,
});
useEffect(triggerValuesLoad, []);
const onMenuOpen = () => {
triggerValuesLoad();
};
return (React.createElement(Box, { className: baseClassName },
React.createElement(Flex, { justifyContent: "stretch", alignItems: "center" },
icon && React.createElement(Tag, { mr: 2 }, icon),
React.createElement(Select, { isClearable: true, options: predicateDefsOptions, "data-name": "select-predicate", placeholder: "Select Rule", value: currentPredicateDef?.id, onChange: (value) => {
const option = predicateDefsOptions.find((x) => x.value === value);
props.onChange({
...props.predicate,
PredicateId: option?.value,
Inputs: (option?.inputs ?? []).map((input) => input.defaultValue ?? ''),
});
} })),
React.createElement(Flex, null, currentPredicateDef?.inputs?.map((predicateDefInput, index) => (React.createElement(React.Fragment, null,
index > 0 && React.createElement(HelpBlock, { margin: 2 }, "AND"),
React.createElement(Flex, { key: index, flex: 1, flexDirection: "column" },
React.createElement(AdaptableInput, { "data-name": `predicate-input-${index}`, marginTop: 2, type: predicateDefInput.type, autoFocus: index === 0, value: props.predicate.Inputs?.[index] ?? '', onChange: (e) => handlePredicateInputChange(e, index) })))))),
isValuesPredicateDef(currentPredicateDef) && (React.createElement(Box, { mt: 2 },
React.createElement(ColumnValuesSelect, { isLoading: isDistinctColumnValuesLoading, column: column, options: quickFilterValues.values, selectProps: {
onMenuOpen,
}, dataType: column.dataType, value: props.predicate.Inputs, onChange: handlePredicateValuesChange })))));
};