@kit-data-manager/react-search-component/dist/components/search/DefaultFacet.js

All-in-one component for rendering an elastic search UI for searching anything. Built-in support for visualizing related items in a graph and resolving unique identifiers.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Button } from "../../components/ui/button";
import { Input } from "../../components/ui/input";
import { Label } from "../../components/ui/label";
import { Popover, PopoverContent, PopoverTrigger } from "../../components/ui/popover";
import { PlusIcon, Search } from "lucide-react";
import { useEffect, useMemo, useRef, useState } from "react";
import { DefaultFacetOption } from "../../components/search/DefaultFacetOption";
import { Tooltip, TooltipContent, TooltipTrigger } from "../../components/ui/tooltip";
export function DefaultFacet(props) {
    const [search, setSearch] = useState("");
    const selfConfig = useMemo(() => {
        return props.config.getFacetFields().find((f) => f.label === props.label);
    }, [props.config, props.label]);
    const onSearchDebounced = useRef(props.onSearch);
    useEffect(() => {
        onSearchDebounced.current = props.onSearch;
    }, [props.onSearch]);
    useEffect(() => {
        onSearchDebounced.current(search);
    }, [search]);
    const ActualOptionView = useMemo(() => {
        return props.optionView ?? DefaultFacetOption;
    }, [props.optionView]);
    return (_jsxs("div", { className: "rfs-px-4 rfs-pt-0 rfs-pb-8", children: [_jsxs("div", { className: "rfs-flex rfs-items-center rfs-justify-between rfs-pb-2", children: [_jsxs(Tooltip, { disableHoverableContent: true, open: selfConfig.description ? undefined : false, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("div", { className: "rfs-text-sm rfs-font-bold", children: props.label }) }), _jsx(TooltipContent, { children: selfConfig.description })] }), props.showSearch && (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: search ? "default" : "ghost", size: "icon", children: _jsx(Search, { className: "rfs-size-4" }) }) }), _jsxs(PopoverContent, { children: [_jsx(Label, { children: "Filter durchsuchen..." }), _jsx(Input, { value: search, onChange: (e) => setSearch(e.target.value) })] })] }))] }), props.options.map((option) => (_jsx(ActualOptionView, { option: option, facetConfig: selfConfig, onSelect: props.onSelect, onRemove: props.onRemove }, option.value.toString()))), props.showMore ? (_jsxs(Button, { className: "rfs-p-1", onClick: props.onMoreClick, size: "sm", variant: "link", children: [_jsx(PlusIcon, { className: "rfs-size-4" }), " Show more"] })) : null] }));
}
//# sourceMappingURL=DefaultFacet.js.map