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 (
<>
<button type="button" className="accordion-title" onClick={onClick}>
<button type="button" className="accordion-title" onClick={() => setOpen(!open)}>
<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" />
</svg>
</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 => {
event.preventDefault();
createTask(Object.fromEntries(new FormData(event.currentTarget)));
event.currentTarget.reset();
}}>
<div>
<label htmlFor="type">Tipas</label>

25
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 task = {
id: tasks.reduce((max, row) => row.id > max ? row.id : max, 1) + 1,
@ -37,12 +33,9 @@ function App() {
status: data.status as TaskStatus,
};
if (data.insert) {
setTasks([task, ...tasks]);
} else {
setTasks([...tasks, task]);
}
setExpanded(0);
setTasks(data.insert ? [task, ...tasks] : [...tasks, task]);
scroll(0, 0);
}
const updateTask = (task: TodoTask) => {
@ -61,22 +54,22 @@ function App() {
const task = tasks[from]
if (from === to || from > length || to > length) {
return;
return;
}
setTasks(tasks.flatMap((item, index) => {
if (index === from) return [];
if (index === to) return from < to ? [item, task] : [task, item];
return item;
if (index === from) return [];
if (index === to) return from < to ? [item, task] : [task, item];
return item;
}));
};
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} />
</AccordionItem>
<AccordionItem title='Nauja užduotis' isOpen={expanded == 1} onClick={() => handleAccordion(1)}>
<AccordionItem title='Nauja užduotis'>
<TaskForm createTask={createTask} />
</AccordionItem>
</>