@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
80 lines (79 loc) • 4.9 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import * as React from 'react';
import { isAdaptableSystemIcon } from '../../../components/Icon';
import HelpBlock from '../../../components/HelpBlock';
import { Tag } from '../../../components/Tag';
import AdaptableInput from '../AdaptableInput';
import { AdaptableIconComponent } from '../AdaptableIconComponent';
import { ColumnValuesSelect } from '../FilterForm/ListBoxFilterForm';
import { useAdaptable } from '../../AdaptableContext';
import { useDistinctFilterColumnValues } from '../ColumnFilter/components/FloatingFilterValues';
import { useEffect } from 'react';
import { Box, Flex } from '../../../components/Flex';
import { SingleSelect } from '../../../components/NewSelect';
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 = _jsx(AdaptableIconComponent, { icon: currentPredicateDef.icon });
}
else if (currentPredicateDef?.icon && 'text' in currentPredicateDef?.icon) {
icon = _jsx("span", { children: currentPredicateDef.icon.text });
}
}
const adaptable = useAdaptable();
const columnId = props.columnId;
const column = adaptable.api.columnApi.getColumnWithColumnId(columnId);
const searchValueRef = React.useRef('');
const { quickFilterValues, isDistinctColumnValuesLoading, triggerValuesLoad } = useDistinctFilterColumnValues({
columnId,
searchValueRef,
});
const quickFilterValuesRef = React.useRef(quickFilterValues);
quickFilterValuesRef.current = quickFilterValues;
useEffect(triggerValuesLoad, []);
const onMenuOpen = () => {
triggerValuesLoad();
};
const onInputChange = React.useCallback((value) => {
searchValueRef.current = value;
const quickFilterValues = quickFilterValuesRef.current;
if (quickFilterValues.searchValueUsedInFilterValue || quickFilterValues.skipDefaultSearch) {
triggerValuesLoad();
}
}, []);
const { skipDefaultSearch } = quickFilterValues;
return (_jsxs(Box, { className: baseClassName, children: [_jsxs(Flex, { alignItems: "center", className: "twa:justify-stretch", children: [icon && _jsx(Tag, { className: "twa:mr-2", children: icon }), _jsx(SingleSelect, { items: predicateDefsOptions, "data-name": "select-predicate", placeholder: "Select Rule", value: props.predicate?.PredicateId ?? null, onValueChange: (value) => {
const option = predicateDefsOptions.find((x) => x.value === value);
props.onChange({
...props.predicate,
PredicateId: option?.value,
Inputs: (option?.inputs ?? []).map((input) => input.defaultValue ?? ''),
});
} })] }), _jsx(Flex, { children: currentPredicateDef?.inputs?.map((predicateDefInput, index) => (_jsxs(_Fragment, { children: [index > 0 && _jsx(HelpBlock, { className: "twa:m-2", children: "AND" }), _jsx(Flex, { className: "twa:flex-1", flexDirection: "column", children: _jsx(AdaptableInput, { "data-name": `predicate-input-${index}`, className: "twa:mt-2", type: predicateDefInput.type, autoFocus: index === 0, value: props.predicate.Inputs?.[index] ?? '', onChange: (e) => handlePredicateInputChange(e, index) }) }, index)] }))) }), adaptable.api.predicateApi.internalApi.IsInOrNotInPredicateDef(currentPredicateDef) && (_jsx(Box, { className: "twa:mt-2", children: _jsx(ColumnValuesSelect, { isLoading: isDistinctColumnValuesLoading, column: column, options: quickFilterValues.values, onMenuOpen: onMenuOpen, selectProps: {
onInputValueChange: onInputChange,
filter: skipDefaultSearch ? null : undefined,
}, dataType: column.dataType, value: props.predicate.Inputs, onChange: handlePredicateValuesChange }) }))] }));
};