@payfit/unity-components
Version:
125 lines (124 loc) • 4.05 kB
JavaScript
import { Button as e } from "../button/Button.js";
import { Filter as t } from "../filter/Filter.js";
import { useFilterToolbarState as n } from "./hooks/use-filter-toolbar-state.js";
import { AddFilter as r } from "./parts/AddFilter.js";
import { FilterAdapters as i } from "./utils/filter-adapters.js";
import { forwardRef as a, useMemo as o, useState as s } from "react";
import { uyTv as c } from "@payfit/unity-themes";
import { jsx as l, jsxs as u } from "react/jsx-runtime";
import { Group as d } from "react-aria-components/Group";
import { Toolbar as f } from "react-aria-components/Toolbar";
import { FormattedMessage as p, useIntl as m } from "react-intl";
import { useId as h } from "react-aria/useId";
//#region src/components/filter-toolbar/FilterToolbar.tsx
var g = c({ slots: {
base: ["uy:flex uy:gap-100 uy:flex-wrap uy:items-center"],
filters: ["uy:list-none uy:contents"],
actions: ["uy:contents"]
} }), _ = a(({ filterDefs: i, initialValue: a, onChange: c, onClearFiltersPress: _, onAddFilterPress: v, ...y }, b) => {
let x = m(), S = h(), [C, w] = s(/* @__PURE__ */ new Set()), { appliedFilters: T, availableFilterDefs: E, filterValues: D, status: O, addFilter: k, clearFilters: A, removeFilter: j, setFilterValue: M } = n({
filterDefs: i,
initialValue: a,
onChange: c
}), N = o(() => new Map(i.map((e) => [e.id, e])), [i]), P = (e) => {
if (e === "all") return;
let t = Array.from(e).map(String);
k(t), w((e) => /* @__PURE__ */ new Set([...e, ...t])), v?.(t);
}, F = () => {
A(), _?.();
}, I = (e, t) => {
M(e, t);
}, L = (e) => {
j(e);
}, R = (e) => {
w((t) => {
let n = new Set(t);
return n.delete(e), n;
});
}, z = O === "WITH_ALL_FILTERS_APPLIED", B = O !== "EMPTY", { base: V, filters: H, actions: U } = g(), W = o(() => ({
toolbar: x.formatMessage({
id: "unity:component:filter-toolbar:label",
defaultMessage: "Filter toolbar"
}),
filterList: x.formatMessage({
id: "unity:component:filter-toolbar:filter-list:label",
defaultMessage: "Applied filters"
}),
filterControls: x.formatMessage({
id: "unity:component:filter-toolbar:filter-controls:label",
defaultMessage: "Filter control"
})
}), [x]), G = o(() => ({
filterList: `filter-toolbar-${S}__filter-list`,
filterControls: `filter-toolbar-${S}__filter-controls`
}), [S]);
return /* @__PURE__ */ u(f, {
ref: b,
className: V(),
"aria-label": W.toolbar,
...y,
children: [T.length > 0 && /* @__PURE__ */ l("ul", {
className: H(),
"aria-live": "polite",
"aria-atomic": "true",
"aria-relevant": "additions removals",
"aria-label": W.filterList,
id: G.filterList,
children: T.map((e, n) => {
let r = N.get(e);
if (!r) return null;
let i = D.get(e);
return /* @__PURE__ */ l("li", {
role: "presentation",
children: /* @__PURE__ */ l(t, {
id: r.id,
label: r.label,
value: i,
onChange: (e) => {
I(r.id, e);
},
renderControl: r.renderControl,
renderLabel: r.renderLabel,
isDismissable: !0,
isDefaultOpen: C.has(e),
onFilterOpen: () => {
R(r.id);
},
onDismiss: () => {
L(r.id);
},
onClearSelection: () => {
M(r.id, void 0);
},
onConfirmSelection: () => {
M(r.id, i);
},
...r.filterProps
})
}, `filter-item-${n}`);
})
}), /* @__PURE__ */ u(d, {
className: U(),
"aria-label": W.filterControls,
id: G.filterControls,
children: [/* @__PURE__ */ l(r, {
availableFilterDefs: [...E],
isDisabled: z,
onSelectionChange: P,
"aria-controls": G.filterControls
}), B && /* @__PURE__ */ l(e, {
variant: "ghost",
color: "neutral",
onPress: F,
"aria-controls": G.filterList,
children: /* @__PURE__ */ l(p, {
id: "unity:component:filter-toolbar:clear-filters:label",
defaultMessage: "Clear filters"
})
})]
})]
});
});
_.displayName = "FilterToolbar";
//#endregion
export { i as FilterAdapters, _ as FilterToolbar, g as filterToolbar };