alinea
Version:
Headless git-based CMS
127 lines (123 loc) • 4.35 kB
JavaScript
import {
dist_default
} from "../../chunks/chunk-A5O3N2GS.js";
import "../../chunks/chunk-NZLE2WMY.js";
// src/dashboard/view/SearchBox.tsx
import { useLocation, useNavigate } from "alinea/dashboard/util/HashRouter";
import { HStack, Stack } from "alinea/ui";
import { IcOutlineGridView } from "alinea/ui/icons/IcOutlineGridView";
import { IcOutlineList } from "alinea/ui/icons/IcOutlineList";
import { IcRoundSearch } from "alinea/ui/icons/IcRoundSearch";
import { useLayoutEffect, useMemo, useState } from "react";
import { useFocusList } from "../hook/UseFocusList.js";
import { useLocale } from "../hook/UseLocale.js";
import { useNav } from "../hook/UseNav.js";
import { useRoot } from "../hook/UseRoot.js";
import { useWorkspace } from "../hook/UseWorkspace.js";
import { IconButton } from "./IconButton.js";
// src/dashboard/view/SearchBox.module.scss
var SearchBox_module_default = {
"root": "alinea-SearchBox",
"root-label": "alinea-SearchBox-label",
"rootLabel": "alinea-SearchBox-label",
"root-label-icon": "alinea-SearchBox-label-icon",
"rootLabelIcon": "alinea-SearchBox-label-icon",
"root-label-input": "alinea-SearchBox-label-input",
"rootLabelInput": "alinea-SearchBox-label-input",
"root-popover": "alinea-SearchBox-popover",
"rootPopover": "alinea-SearchBox-popover",
"root-popover-item": "alinea-SearchBox-popover-item",
"rootPopoverItem": "alinea-SearchBox-popover-item"
};
// src/dashboard/view/SearchBox.tsx
import { Explorer } from "./explorer/Explorer.js";
import { jsx, jsxs } from "react/jsx-runtime";
var styles = dist_default(SearchBox_module_default);
function SearchBox() {
const nav = useNav();
const navigate = useNavigate();
const location = useLocation();
const { name: workspace } = useWorkspace();
const { name: root } = useRoot();
const locale = useLocale();
const [search, setSearch] = useState("");
const [isOpen, setIsOpen] = useState(false);
const list = useFocusList({
onClear: () => setSearch("")
});
const query = useMemo(() => {
const terms = search.replace(/,/g, " ").split(" ").filter(Boolean);
return {
select: void 0,
workspace,
root,
locale,
search: terms
};
}, [workspace, root, search, locale]);
const [explorerView, setExplorerView] = useState("row");
useLayoutEffect(() => {
setSearch("");
}, [location]);
return /* @__PURE__ */ jsxs(
"div",
{
className: styles.root(),
onFocus: () => {
setIsOpen(true);
},
onBlur: ({ currentTarget, relatedTarget }) => {
if (currentTarget.contains(relatedTarget)) return;
setIsOpen(false);
list.focusProps.onBlur();
},
children: [
/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("label", { className: styles.root.label(), ...list.focusProps, children: [
/* @__PURE__ */ jsx(IcRoundSearch, { className: styles.root.label.icon() }),
/* @__PURE__ */ jsx(
"input",
{
placeholder: "Search",
value: search,
onChange: (event) => setSearch(event.target.value),
className: styles.root.label.input()
}
),
isOpen && /* @__PURE__ */ jsx(Stack.Right, { children: /* @__PURE__ */ jsxs(HStack, { gap: 10, children: [
/* @__PURE__ */ jsx(
IconButton,
{
size: 12,
icon: IcOutlineList,
active: explorerView === "row",
onClick: () => setExplorerView("row")
}
),
/* @__PURE__ */ jsx(
IconButton,
{
size: 12,
icon: IcOutlineGridView,
active: explorerView === "thumb",
onClick: () => setExplorerView("thumb")
}
)
] }) })
] }) }),
/* @__PURE__ */ jsx(list.Container, { children: isOpen && search && /* @__PURE__ */ jsx("div", { className: styles.root.popover(), children: /* @__PURE__ */ jsx(
Explorer,
{
border: false,
query,
type: explorerView,
toggleSelect: (entry) => navigate(nav.entry(entry)),
max: 25
}
) }) })
]
}
);
}
export {
SearchBox
};