ar-design
Version:
AR Design is a (react | nextjs) ui library.
44 lines (43 loc) • 2.49 kB
JavaScript
import React, { memo } from "react";
import { ARIcon } from "../../../icons";
import Checkbox from "../../../form/checkbox";
import Grid from "../../grid-system";
import Button from "../../../form/button";
import Divider from "../../divider";
import { useTranslation } from "../../../../libs/core/application/hooks";
const { Box } = Grid;
function SelectFilters({ states, methods, config }) {
// hooks
const { t } = useTranslation(String(config?.locale ?? "tr"));
return Object.entries(states.selectFilters.get).map(([name, values], index) => {
const isEqualsName = states.openName.get === name;
const className = [];
if (isEqualsName)
className.push("active");
return (React.createElement("li", { key: index, className: className.map((c) => c).join(" "), onClick: () => methods.open(name) },
React.createElement("div", null,
React.createElement("span", null, name),
React.createElement(ARIcon, { icon: "ChevronDown" })),
isEqualsName && (React.createElement("ul", { className: className.map((c) => c).join(" "), onClick: (event) => event.stopPropagation() },
values.map((value, index) => (React.createElement("li", { key: index },
React.createElement(Checkbox, { label: String(value ?? "-"), checked: states.selectedFilters.get[name]?.has(value) ?? false, onChange: () => {
states.selectedFilters.set((prev) => {
const next = { ...prev };
const set = new Set(next[name] ?? []);
set.has(value) ? set.delete(value) : set.add(value);
next[name] = set;
return next;
});
} })))),
React.createElement(Divider, { config: { margin: "0.5rem 0" } }),
React.createElement(Box, { direction: "flex-end" },
React.createElement(Button, { color: "red", size: "small", onClick: () => {
states.selectedFilters.set((prev) => {
const next = { ...prev };
delete next[name];
return next;
});
} }, t("KanbanBoard.Search.Button.Clear.Text")))))));
});
}
export default memo(SelectFilters);