@knowmax/genericlist-fluentuiv9
Version:
Knowmax Generic list with basic CRUD support with Fluent V9 user interface implementation.
46 lines (45 loc) • 2.39 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { useMemo, useCallback } from "react";
import { observer } from "mobx-react-lite";
import { Select } from "@fluentui/react-select";
import { useGenericListSettings, parseOrderExpression, PARAM_ORDER, getParamId } from "@knowmax/genericlist-core";
/** Offers sort order options. Serializes and deserializes in query params of url. */
export const OrderSelector = observer(({ list, listId }) => {
const settings = useGenericListSettings();
const selectedkey = useMemo(() => {
const ordervalue = settings.params.get(getParamId(PARAM_ORDER, listId));
if (ordervalue) {
const [field, descending] = parseOrderExpression(ordervalue);
const order = list.find((order) => keyForOrder(order.field, order.descending) === keyForOrder(field, descending));
return order ? keyForOrder(order.field, order.descending) : undefined;
}
else {
const order = list.find((order) => order.default === true);
return order ? keyForOrder(order.field, order.descending) : undefined;
}
}, [settings.params, list, listId]);
const options = useMemo(() => {
return list
.filter((order) => !order.isAvailable || order.isAvailable(order, settings.params, listId))
.map((order) => ({
key: keyForOrder(order.field, order.descending),
text: order.name,
data: order
}));
}, [list, settings.params, listId]);
const change = useCallback((ev, data) => {
if (data.value) {
const neworder = list.find((order) => keyForOrder(order.field, order.descending) === data.value);
const params = new URLSearchParams(settings.params);
if (neworder) {
params.set(getParamId(PARAM_ORDER, listId), `${neworder.field}${neworder.descending ? ' desc' : ''}`);
}
settings.serialize(params);
}
}, [list, settings.params, listId]);
return (_jsx(Select, { value: selectedkey, onChange: change, children: options.map((option) => _jsx("option", { value: option.key, children: orderOption(option.data) }, option.key)) }));
});
const orderOption = (order) => {
return `${order.descending ? '↓' : '↑'} ${order.name}`;
};
const keyForOrder = (field, descending) => `${field}${descending === true}`;