tomas
/
todo-list
1
0
Fork 0
Code

Accordion with it's state

This commit is contained in:
Tomas Balsys 2024-10-27 02:13:13 +03:00
parent 8ce734705d
commit 7d36ed0ac0
3 changed files with 17 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/accordion-item.tsx
View File

@ -1,15 +1,17 @@
import { } from 'react' import { useState } from 'react'
export function AccordionItem({ title, children, isOpen }: { title: string; children: JSX.Element; isOpen?: boolean }) {
const [open, setOpen] = useState(isOpen);
export function AccordionItem({ title, children, isOpen, onClick }: { title: string; children: JSX.Element; isOpen: boolean, onClick: () => void; }) {
return ( return (
<> <>
<button type="button" className="accordion-title" onClick={onClick}> <button type="button" className="accordion-title" onClick={() => setOpen(!open)}>
<span>{title}</span> <span>{title}</span>
<svg className={"w-3 h-3 shrink-0" + (isOpen ? "" : " rotate-180")} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6"> <svg className={"w-3 h-3 shrink-0" + (open ? "" : " rotate-180")} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5 5 1 1 5" /> <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5 5 1 1 5" />
</svg> </svg>
</button> </button>
{isOpen && <div className="accordion-body">{children}</div>} {open && <div className="accordion-body">{children}</div>}
</> </>
); );
} }

1
src/components/task-form.tsx
View File

@ -7,6 +7,7 @@ export function TaskForm({ createTask }: { createTask: (t: Record<string, FormDa
<form className="grid grid-cols-1 gap-y-8" onSubmit={event => { <form className="grid grid-cols-1 gap-y-8" onSubmit={event => {
event.preventDefault(); event.preventDefault();
createTask(Object.fromEntries(new FormData(event.currentTarget))); createTask(Object.fromEntries(new FormData(event.currentTarget)));
event.currentTarget.reset();
}}> }}>
<div> <div>
<label htmlFor="type">Tipas</label> <label htmlFor="type">Tipas</label>

17
src/routes/list.tsx
View File

@ -25,10 +25,6 @@ function App() {
}, },
]); ]);
const [expanded, setExpanded] = useState(0);
const handleAccordion = (panel: number) => setExpanded(expanded == panel ? -1 : panel);
const createTask = (data: Record<string, FormDataEntryValue>) => { const createTask = (data: Record<string, FormDataEntryValue>) => {
const task = { const task = {
id: tasks.reduce((max, row) => row.id > max ? row.id : max, 1) + 1, id: tasks.reduce((max, row) => row.id > max ? row.id : max, 1) + 1,
@ -37,12 +33,9 @@ function App() {
status: data.status as TaskStatus, status: data.status as TaskStatus,
}; };
if (data.insert) { setTasks(data.insert ? [task, ...tasks] : [...tasks, task]);
setTasks([task, ...tasks]);
} else { scroll(0, 0);
setTasks([...tasks, task]);
}
setExpanded(0);
} }
const updateTask = (task: TodoTask) => { const updateTask = (task: TodoTask) => {
@ -73,10 +66,10 @@ function App() {
return ( return (
<> <>
<AccordionItem title='Užduočių sąrašas' isOpen={expanded == 0} onClick={() => handleAccordion(0)}> <AccordionItem title='Užduočių sąrašas' isOpen>
<TaskTable tasks={tasks} updateTask={updateTask} deleteTask={deleteTask} orderTasks={swapTasks} /> <TaskTable tasks={tasks} updateTask={updateTask} deleteTask={deleteTask} orderTasks={swapTasks} />
</AccordionItem> </AccordionItem>
<AccordionItem title='Nauja užduotis' isOpen={expanded == 1} onClick={() => handleAccordion(1)}> <AccordionItem title='Nauja užduotis'>
<TaskForm createTask={createTask} /> <TaskForm createTask={createTask} />
</AccordionItem> </AccordionItem>
</> </>