Reorderable List
import { h } from "preact"
import { useState } from "preact/hooks"
import { ReorderableList } from "@/comps/echo/reorderable"
export const ReorderableListBaseDemo = () => {
const [data, setData] = useState([
{ position: 3, mass: 6.941, id: 'Li', name: 'Lithium' },
{ position: 11, mass: 22.990, id: 'Na', name: 'Sodium' },
{ position: 17, mass: 35.453, id: 'Cl', name: 'Chlorine' },
{ position: 26, mass: 55.845, id: 'Fe', name: 'Iron' },
{ position: 82, mass: 207.2, id: 'Pb', name: 'Lead' },
])
return <ReorderableList
class="w-[300px]"
items={data}
onChange={setData}
rowHeight={60}
renderItem={(row) => (
<div class="flex-row items-center h-full w-full bg-white px-2 rounded m-[1px] ml-[2px] border-gray-400 border-[1px]">
<div class="h-full w-[50px] justify-center items-center bold text-2xl">{row.id}</div>
<div class="ml-4">
<div class="h-full w-full justify-center bold mb-1">{row.name}</div>
<div class="h-full w-full justify-center text-[10px] text-gray-500">
{`Position: ${row.position}, Mass: ${row.mass}`}
</div>
</div>
</div>
)}
/>
}
Reorderable List with Handle
import { h } from "preact"
import { useState } from "preact/hooks"
import { ReorderableList } from "@/comps/echo/reorderable"
export const ReorderableListHandleDemo = () => {
const [data, setData] = useState([
{ position: 3, mass: 6.941, id: 'Li', name: 'Lithium' },
{ position: 11, mass: 22.990, id: 'Na', name: 'Sodium' },
{ position: 17, mass: 35.453, id: 'Cl', name: 'Chlorine' },
{ position: 26, mass: 55.845, id: 'Fe', name: 'Iron' },
{ position: 82, mass: 207.2, id: 'Pb', name: 'Lead' },
])
return <ReorderableList
class="w-[340px]"
items={data}
onChange={setData}
rowHeight={60}
handle={() => <div class="w-[30px] h-full justify-center items-center bg-white rounded m-[1px] bold border-gray-400 border-[1px]">⋮⋮</div>}
renderItem={(row) => (
<div class="flex-row items-center h-full w-full bg-white px-2 rounded m-[1px] ml-[2px] border-gray-400 border-[1px]">
<div class="h-full w-[50px] justify-center items-center bold text-2xl">{row.id}</div>
<div class="ml-4">
<div class="h-full w-full justify-center bold mb-1">{row.name}</div>
<div class="h-full w-full justify-center text-[10px] text-gray-500">
{`Position: ${row.position}, Mass: ${row.mass}`}
</div>
</div>
</div>
)}
/>
}
Scrollable Reorderable List
import { h } from "preact"
import { useState } from "preact/hooks"
import { ScrollableReorderableList } from "@/comps/echo/reorderable"
export const ReorderableListScrollableDemo = () => {
const [data, setData] = useState([
{ position: 3, mass: 6.941, id: 'Li', name: 'Lithium' },
{ position: 11, mass: 22.990, id: 'Na', name: 'Sodium' },
{ position: 17, mass: 35.453, id: 'Cl', name: 'Chlorine' },
{ position: 26, mass: 55.845, id: 'Fe', name: 'Iron' },
{ position: 82, mass: 207.2, id: 'Pb', name: 'Lead' },
{ position: 6, mass: 12.011, id: 'C', name: 'Carbon' },
{ position: 7, mass: 14.007, id: 'N', name: 'Nitrogen' },
{ position: 39, mass: 88.906, id: 'Y', name: 'Yttrium' },
{ position: 56, mass: 137.33, id: 'Ba', name: 'Barium' },
{ position: 58, mass: 140.12, id: 'Ce', name: 'Cerium' },
])
return <ScrollableReorderableList
class="w-full"
scrollViewClass="w-[360px] h-[300px]"
items={data}
onChange={setData}
rowHeight={60}
handle={() => <div class="w-[30px] h-full justify-center items-center bg-white rounded m-[1px] bold border-gray-400 border-[1px]">⋮⋮</div>}
renderItem={(row) => (
<div class="flex-row items-center h-full bg-white px-2 rounded m-[1px] ml-[2px] border-gray-400 border-[1px] grow shrink">
<div class="h-full w-[50px] justify-center items-center bold text-2xl">{row.id}</div>
<div class="ml-4">
<div class="h-full w-full justify-center bold mb-1">{row.name}</div>
<div class="h-full w-full justify-center text-[10px] text-gray-500">
{`Position: ${row.position}, Mass: ${row.mass}`}
</div>
</div>
</div>
)}
/>
}