dapth-payload-plugin-tree-list
Version:
A plugin for Payload CMS that adds a collapsible Tree list view.
73 lines (72 loc) • 2.98 kB
JavaScript
/* eslint-disable jsx-a11y/control-has-associated-label */ "use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { usePathname, useRouter } from "next/navigation.js";
import { useEffect, useState } from "react";
import { TableListIcon } from "./icons/TableListIcon.js";
import { TreeListIcon } from "./icons/TreeListIcon.js";
export function ToggleButtons({ searchParams }) {
const router = useRouter();
const pathname = usePathname();
const [view, setView] = useState(searchParams?.["view"] === "tree" ? "tree" : "table");
const handleChange = (e)=>{
const params = new URLSearchParams();
setView(e.target.value);
params.set("view", e.target.value);
router.push(`${pathname}?${params.toString()}`);
};
useEffect(()=>{
if (!searchParams?.["view"]) {
setView("table");
}
}, [
searchParams
]);
return /*#__PURE__*/ _jsx("nav", {
className: "table-toggle-buttons",
children: /*#__PURE__*/ _jsxs("ul", {
children: [
/*#__PURE__*/ _jsxs("li", {
className: `table-toggle-buttons__item${view === "table" ? " current" : ""}`,
children: [
/*#__PURE__*/ _jsx("input", {
checked: view === "table",
id: "toggleButtonsTable",
name: "table-view",
onChange: handleChange,
type: "radio",
value: "table"
}),
/*#__PURE__*/ _jsxs("label", {
htmlFor: "toggleButtonsTable",
children: [
/*#__PURE__*/ _jsx(TableListIcon, {}),
" Table"
]
})
]
}),
/*#__PURE__*/ _jsxs("li", {
className: `table-toggle-buttons__item${view === "tree" ? " current" : ""}`,
children: [
/*#__PURE__*/ _jsx("input", {
checked: view === "tree",
id: "toggleButtonsTree",
name: "table-view",
onChange: handleChange,
type: "radio",
value: "tree"
}),
/*#__PURE__*/ _jsxs("label", {
htmlFor: "toggleButtonsTree",
children: [
/*#__PURE__*/ _jsx(TreeListIcon, {}),
" Tree"
]
})
]
})
]
})
});
}
//# sourceMappingURL=ToggleButtons.js.map