@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
81 lines (80 loc) • 4.69 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PredicateEditor = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const rebass_1 = require("rebass");
const Icon_1 = require("../../../components/Icon");
const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
const Tag_1 = require("../../../components/Tag");
const AdaptableInput_1 = tslib_1.__importDefault(require("../AdaptableInput"));
const AdaptableIconComponent_1 = require("../AdaptableIconComponent");
const Select_1 = require("../../../components/Select");
const ListBoxFilterForm_1 = require("../FilterForm/ListBoxFilterForm");
const AdaptableContext_1 = require("../../AdaptableContext");
const FloatingFilterValues_1 = require("../ColumnFilter/components/FloatingFilterValues");
const react_1 = require("react");
const isValuesPredicateDef = (colDef) => colDef && ['In', 'NotIn'].includes(colDef.id);
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 ((0, Icon_1.isAdaptableSystemIcon)(currentPredicateDef?.icon)) {
icon = React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: currentPredicateDef.icon });
}
else if (currentPredicateDef?.icon && 'text' in currentPredicateDef?.icon) {
icon = React.createElement("span", null, currentPredicateDef.icon.text);
}
}
const adaptable = (0, AdaptableContext_1.useAdaptable)();
const columnId = props.columnId;
const column = adaptable.api.columnApi.getColumnWithColumnId(columnId);
const { quickFilterValues, isDistinctColumnValuesLoading, triggerValuesLoad } = (0, FloatingFilterValues_1.useDistinctFilterColumnValues)({
columnId,
});
(0, react_1.useEffect)(triggerValuesLoad, []);
const onMenuOpen = () => {
triggerValuesLoad();
};
return (React.createElement(rebass_1.Box, { className: baseClassName },
React.createElement(rebass_1.Flex, { justifyContent: "stretch", alignItems: "center" },
icon && React.createElement(Tag_1.Tag, { mr: 2 }, icon),
React.createElement(Select_1.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(rebass_1.Flex, null, currentPredicateDef?.inputs?.map((predicateDefInput, index) => (React.createElement(React.Fragment, null,
index > 0 && React.createElement(HelpBlock_1.default, { margin: 2 }, "AND"),
React.createElement(rebass_1.Flex, { key: index, flex: 1, flexDirection: "column" },
React.createElement(AdaptableInput_1.default, { "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(rebass_1.Box, { mt: 2 },
React.createElement(ListBoxFilterForm_1.ColumnValuesSelect, { isLoading: isDistinctColumnValuesLoading, column: column, options: quickFilterValues.values, selectProps: {
onMenuOpen,
}, dataType: column.dataType, value: props.predicate.Inputs, onChange: handlePredicateValuesChange })))));
};
exports.PredicateEditor = PredicateEditor;