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

New options now display on all rows

Browse Source
This commit is contained in:
Nicholas 2024-04-15 00:54:50 -04:00
parent 316a986f33
commit b1b3313de0
3 changed files with 13 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -32,7 +32,11 @@ type User = {
export const Table = () => { export const Table = () => {
const columnHelper = createColumnHelper<User>(); const columnHelper = createColumnHelper<User>();
const [presetOptions, setPresetOptions] = useState(["administrator", "volunteer", "employee"]);
const handleAddTag = (newTag) => {
setPresetOptions((prevOptions) => [...prevOptions, newTag]);
}
const columns = [ const columns = [
columnHelper.display({ columnHelper.display({
@ -45,7 +49,9 @@ export const Table = () => {
}), }),
columnHelper.accessor("role", { columnHelper.accessor("role", {
cell: (info) => <TagsInput presetValue={info.getValue() } cell: (info) => <TagsInput presetValue={info.getValue() }
presetOptions={["administrator","volunteer","employee"]}/>, presetOptions={presetOptions}
addOption={handleAddTag}
/>,
}), }),
columnHelper.accessor("email", { columnHelper.accessor("email", {
header: () => <><AtSymbolIcon className="inline align-top h-4" /> Email</>, header: () => <><AtSymbolIcon className="inline align-top h-4" /> Email</>,

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

@ -1,4 +1,4 @@
import React, { useState, useEffect, useRef } from "react"; import React, { useState, useRef } from "react";
import "tailwindcss/tailwind.css"; import "tailwindcss/tailwind.css";
import { TagsArray } from "./TagsArray"; import { TagsArray } from "./TagsArray";
import { TagDropdown } from "./TagDropdown"; import { TagDropdown } from "./TagDropdown";
@ -11,6 +11,7 @@ interface TagsInputProps {
const TagsInput: React.FC<TagsInputProps> = ({ const TagsInput: React.FC<TagsInputProps> = ({
presetValue, presetValue,
presetOptions, presetOptions,
addOption,
}) => { }) => {
const [inputValue, setInputValue] = useState(""); const [inputValue, setInputValue] = useState("");
const [cellSelected, setCellSelected] = useState(false); const [cellSelected, setCellSelected] = useState(false);
@ -20,24 +21,6 @@ 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(() => {
// 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 = () => { const handleClick = () => {
if (!cellSelected) { if (!cellSelected) {
setCellSelected(true); setCellSelected(true);
@ -63,8 +46,10 @@ const TagsInput: React.FC<TagsInputProps> = ({
}) })
setInputValue(e.target.value); // Update input value state setInputValue(e.target.value); // Update input value state
}; };
const handleAddTag = (e: React.KeyboardEvent<HTMLInputElement>) => { const handleAddTag = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === "Enter" && inputValue.trim()) { if (e.key === "Enter" && inputValue.trim()) {
addOption(inputValue);
setTags((prevTags) => new Set(prevTags).add(inputValue)); setTags((prevTags) => new Set(prevTags).add(inputValue));
setOptions((prevOptions) => new Set(prevOptions).add(inputValue)); setOptions((prevOptions) => new Set(prevOptions).add(inputValue));
setInputValue(""); setInputValue("");

3
compass/components/TagsInput/Tag.tsx
View File

@ -1,4 +1,5 @@
import { XMarkIcon } from "@heroicons/react/24/solid"; import { XMarkIcon } from "@heroicons/react/24/solid";
import React, { useState } from "react";
export const Tag = ({ children, handleDelete, active = false }) => { export const Tag = ({ children, handleDelete, active = false }) => {
@ -12,4 +13,4 @@ export const Tag = ({ children, handleDelete, active = false }) => {
)} )}
</span> </span>
); );
}; };