List

"use client";

import React, {useState} from "react";
import {List, ListFooter, ListHeader, ListItem, useSimpleList} from "@brynlabs/fusion-ui";

export const NoSelectionListExample: React.FC = () => {
  const [data] = useState<[string, string, string][]>([
    ["84076", "Pfeffenhausen", "Bayern"],
    ["93195", "Wolfsegg", "Bayern"],
    ["07557", "Gera, Zedlitz u.a.", "Thüringen"],
    ["18069", "Rostock, Lambrechtshagen", "Mecklenburg-Vorpommern"],
    ["92711", "Parkstein", "Bayern"],
    ["93138", "Lappersdorf", "Bayern"],
    ["84427", "Sankt Wolfgang", "Bayern"],
    ["18147", "Rostock", "Mecklenburg-Vorpommern"],
    ["08523", "Plauen", "Sachsen"],
    ["95685", "Falkenberg", "Bayern"],
  ]);

  const list = useSimpleList(data, {
    sortFunctions: [
      {name: "by PLZ", fn: (a, b) => +a[0] - +b[0]},
      {name: "by Land Name", fn: (a, b) => a[2].localeCompare(b[2])},
    ],
    searchIndexRow: row => row,
  });

  return (
    <div>
      <List header={<ListHeader onSearch={list.search} sort={list.sort} />}>
        {list.data.map(({data, index}) => (
          <ListItem key={`item-${index}`}>{data.join(", ")}</ListItem>
        ))}
        <ListFooter>
          <b>{list.data.length}</b>
          &nbsp; items
        </ListFooter>
      </List>
    </div>
  );
};

"use client";

import React, {useState} from "react";
import {List, ListFooter, ListHeader, ListItem, useSimpleList} from "@brynlabs/fusion-ui";

export const SimpleListExample: React.FC = () => {
  const [data] = useState<[string, string, string][]>([
    ["84076", "Pfeffenhausen", "Bayern"],
    ["93195", "Wolfsegg", "Bayern"],
    ["07557", "Gera, Zedlitz u.a.", "Thüringen"],
    ["18069", "Rostock, Lambrechtshagen", "Mecklenburg-Vorpommern"],
    ["92711", "Parkstein", "Bayern"],
    ["93138", "Lappersdorf", "Bayern"],
    ["84427", "Sankt Wolfgang", "Bayern"],
    ["18147", "Rostock", "Mecklenburg-Vorpommern"],
    ["08523", "Plauen", "Sachsen"],
    ["95685", "Falkenberg", "Bayern"],
  ]);

  const list = useSimpleList(data, {
    sortFunctions: [
      {name: "by PLZ", fn: (a, b) => +a[0] - +b[0]},
      {name: "by Land Name", fn: (a, b) => a[2].localeCompare(b[2])},
    ],
    searchIndexRow: row => row,
  });

  return (
    <div>
      <List header={<ListHeader onSearch={list.search} sort={list.sort} />}>
        {list.data.map(({data, index}) => (
          <ListItem
            key={`item-${index}`}
            selected={list.selection[index]}
            onSelect={ev => list.checkboxClick(index, ev.nativeEvent)}
            onClick={() => console.log("clicked", data)}>
            {data.join(", ")}
          </ListItem>
        ))}
        <ListFooter
          allSelected={list.allSelected}
          allSelectedIndeterminate={list.allSelectedIndeterminate}
          selectAll={list.setAllSelection}>
          <b>
            {list.selectionSize} / {list.data.length}
          </b>
          &nbsp; selected.
        </ListFooter>
      </List>
    </div>
  );
};

"use client";

import React, {useState} from "react";
import {
  Button,
  IconAdd,
  List,
  ListFooter,
  ListHeader,
  ListItem,
  useSimpleList,
} from "@brynlabs/fusion-ui";

export const CustomContentListExample: React.FC = () => {
  const [data] = useState<[string, string, string][]>([
    ["84076", "Pfeffenhausen", "Bayern"],
    ["93195", "Wolfsegg", "Bayern"],
    ["07557", "Gera, Zedlitz u.a.", "Thüringen"],
    ["18069", "Rostock, Lambrechtshagen", "Mecklenburg-Vorpommern"],
    ["92711", "Parkstein", "Bayern"],
    ["93138", "Lappersdorf", "Bayern"],
    ["84427", "Sankt Wolfgang", "Bayern"],
    ["18147", "Rostock", "Mecklenburg-Vorpommern"],
    ["08523", "Plauen", "Sachsen"],
    ["95685", "Falkenberg", "Bayern"],
  ]);

  const list = useSimpleList(data, {
    sortFunctions: [
      {name: "by PLZ", fn: (a, b) => +a[0] - +b[0]},
      {name: "by Land Name", fn: (a, b) => a[2].localeCompare(b[2])},
    ],
    searchIndexRow: row => row,
  });

  return (
    <div>
      <List header={<ListHeader onSearch={list.search} sort={list.sort} />}>
        {list.data.map(({data, index}) => (
          <div key={`item-${index}`}>
            <ListItem
              selected={list.selection[index]}
              onSelect={ev => list.checkboxClick(index, ev.nativeEvent)}
              onClick={() => console.log("list item clicked", data)}>
              {data.join(", ")}
              <Button
                size={"small"}
                primaryIcon={<IconAdd />}
                onClick={() => console.log("button clicked")}></Button>
            </ListItem>
          </div>
        ))}
        <ListFooter
          allSelected={list.allSelected}
          allSelectedIndeterminate={list.allSelectedIndeterminate}
          selectAll={list.setAllSelection}>
          <b>
            {list.selectionSize} / {list.data.length}
          </b>
          &nbsp; selected.
        </ListFooter>
      </List>
    </div>
  );
};