rushilwiz/compass
1
0
Fork 0
mirror of https://github.com/cssgunc/compass.git synced 2025-04-10 06:10:17 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

fixed problem where multiple tag dropdowns could be open at once.

Browse Source
This commit is contained in:
Nicholas 2024-04-15 00:43:35 -04:00
parent e3b31b0861
commit 316a986f33
2 changed files with 37 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
compass/components/Table/Index.tsx
View File

@ -8,7 +8,7 @@ import {
getCoreRowModel, getCoreRowModel,
useReactTable, useReactTable,
} from "@tanstack/react-table"; } from "@tanstack/react-table";
import { useState } from "react"; import { useState, useEffect } from "react";
import { RowOptionMenu } from "./RowOptionMenu"; import { RowOptionMenu } from "./RowOptionMenu";
import { RowOpenAction } from "./RowOpenAction"; import { RowOpenAction } from "./RowOpenAction";
import { TableAction } from "./TableAction"; import { TableAction } from "./TableAction";
@ -32,6 +32,8 @@ type User = {
export const Table = () => { export const Table = () => {
const columnHelper = createColumnHelper<User>(); const columnHelper = createColumnHelper<User>();
const columns = [ const columns = [
columnHelper.display({ columnHelper.display({
id: "options", id: "options",
@ -42,7 +44,8 @@ export const Table = () => {
cell: (info) => <RowOpenAction title={info.getValue()} />, cell: (info) => <RowOpenAction title={info.getValue()} />,
}), }),
columnHelper.accessor("role", { columnHelper.accessor("role", {
cell: (info) => <TagsInput presetValue={info.getValue() }presetOptions={["administrator","volunteer","employee"]} />, cell: (info) => <TagsInput presetValue={info.getValue() }
presetOptions={["administrator","volunteer","employee"]}/>,
}), }),
columnHelper.accessor("email", { columnHelper.accessor("email", {
header: () => <><AtSymbolIcon className="inline align-top h-4" /> Email</>, header: () => <><AtSymbolIcon className="inline align-top h-4" /> Email</>,

51
compass/components/TagsInput/Index.tsx
View File

@ -20,23 +20,41 @@ const TagsInput: React.FC<TagsInputProps> = ({
const [options, setOptions] = useState<Set<string>>(new Set(presetOptions)); const [options, setOptions] = useState<Set<string>>(new Set(presetOptions));
const dropdown = useRef<HTMLDivElement>(null); const dropdown = useRef<HTMLDivElement>(null);
useEffect(() => { // useEffect(() => {
console.log(cellSelected); // if (!cellSelected) {
// return;
// }
// function handleOutsideClick(event: MouseEvent) {
// if (dropdown.current && !dropdown.current.contains(event.target as Node)) {
// console.log("here2")
// setCellSelected(false);
// }
// }
// if (cellSelected){
// window.addEventListener("click", handleOutsideClick);
// }
// return () => window.removeEventListener("click", handleOutsideClick);
// }, [cellSelected])
const handleClick = () => {
if (!cellSelected) { if (!cellSelected) {
return; setCellSelected(true);
} // Add event listener only after setting cellSelected to true
function handleClick(event: MouseEvent) { setTimeout(() => {
if (dropdown.current && !dropdown.current.contains(event.target as Node)) { window.addEventListener("click", handleOutsideClick);
setCellSelected(false); }, 100);
}
} }
}
if (cellSelected){ const handleOutsideClick = (event) => {
window.addEventListener("click", handleClick); if (dropdown.current && !dropdown.current.contains(event.target)) {
setCellSelected(false);
// Remove event listener after handling outside click
window.removeEventListener("click", handleOutsideClick);
} }
};
return () => window.removeEventListener("click", handleClick);
}, [cellSelected])
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setOptions(() => { setOptions(() => {
@ -100,14 +118,9 @@ const TagsInput: React.FC<TagsInputProps> = ({
}); });
} }
}; };
return ( return (
<div className="cursor-pointer" onClick={(e) => { <div className="cursor-pointer" onClick={handleClick}>
e.stopPropagation();
setCellSelected(true)
}}>
{!cellSelected ? ( {!cellSelected ? (
<TagsArray handleDelete={handleDeleteTag} tags={tags} /> <TagsArray handleDelete={handleDeleteTag} tags={tags} />
) : ( ) : (