ar-design
Version:
AR Design is a (react | nextjs) ui library.
48 lines (47 loc) • 2.07 kB
JavaScript
"use client";
import { useRef, useState } from "react";
import DateFilters from "./DateFilters";
import SelectFilters from "./SelectFilters";
import React from "react";
import Input from "../../../form/input";
import { useTranslation } from "../../../../libs/core/application/hooks";
function Filter({ states, config }) {
// refs
const _searchTimeOut = useRef(null);
// states
const [openName, setOpenName] = useState(null);
// hooks
const { t } = useTranslation(String(config?.locale ?? "tr"));
// methods
const handleOpen = (name) => setOpenName(openName === name ? null : name);
return (React.createElement("div", { className: "filters" },
React.createElement(Input, { variant: "borderless", placeholder: t("KanbanBoard.Search.Input.Placeholder"), onChange: (event) => {
if (_searchTimeOut.current)
clearTimeout(_searchTimeOut.current);
_searchTimeOut.current = setTimeout(() => {
states.search.set(event.target.value.toLocaleLowerCase());
}, 750);
} }),
React.createElement("ul", null,
React.createElement(DateFilters, { states: {
dateFilters: {
get: states.dateFilters.get,
set: states.dateFilters.set,
},
openName: { get: openName },
}, methods: {
open: handleOpen,
}, config: config }),
React.createElement(SelectFilters, { states: {
selectFilters: {
get: states.selectFilters.get,
set: states.selectFilters.set,
},
selectedFilters: {
get: states.selectedFilters.get,
set: states.selectedFilters.set,
},
openName: { get: openName },
}, methods: { open: handleOpen }, config: config }))));
}
export default Filter;