@knowmax/genericlist-fluentuiv9
Version:
Knowmax Generic list with basic CRUD support with Fluent V9 user interface implementation.
43 lines (42 loc) • 2.14 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { useMemo, useCallback } from "react";
import { observer } from "mobx-react-lite";
import { FilterOperator } from "@knowmax/genericlist-core";
import { fieldIdForOperator } from "@knowmax/genericlist-core";
import { useGenericListSettings, getParamId } from "@knowmax/genericlist-core";
import { Select } from "@fluentui/react-select";
/** Offers operator options. Serializes and deserializes in query params of url. */
export const OperatorSelector = observer(({ filter, listId }) => {
const settings = useGenericListSettings();
const filterparamid = useMemo(() => getParamId(filter.id, listId), [filter.id]);
const operators = useMemo(() => filter.operators ?? [FilterOperator.eq], [filter.operators]);
const selected = useMemo(() => {
return settings.params.get(fieldIdForOperator(filterparamid)) ?? filter.operator;
}, [filter.operator, filterparamid, settings.params]);
const change = useCallback((ev, data) => {
if (data.value) {
const params = new URLSearchParams(settings.params);
if (data.value === (filter.operator)) {
params.delete(fieldIdForOperator(filterparamid));
}
else {
params.set(fieldIdForOperator(filterparamid), (data.value));
}
settings.serialize(params);
}
}, [filterparamid, filter.operator, settings.params]);
return (_jsx(_Fragment, { children: operators.length > 1 &&
_jsx(Select, { onChange: change, value: selected, children: operators.map((option) => _jsx("option", { value: option, children: operatorToSign(option) }, option)) }) }));
});
const operatorToSign = (operator) => {
switch (operator) {
case FilterOperator.eq: return '==';
case FilterOperator.ne: return '!=';
case FilterOperator.gt: return '>';
case FilterOperator.ge: return '>=';
case FilterOperator.lt: return '<';
case FilterOperator.le: return '<=';
case FilterOperator.contains: return '🔍';
default: return '';
}
};