aquameta-widget/data/pres.component/table-of-contents/js

Widget rendering framework built on top of Aquameta

import html from '/db/widget/core/html.js';
import React from '/db/widget/dep/react.js';
import styled from '/db/widget/dep/styled-components.js';
import {database, query} from '/db/widget/core/datum.js';
import useDatum from '/db/widget/core/use-datum.js';
import SlideContext from '/db/widget/common/slide-context.js';

const datum = query(
  database.select(
    database.relation('pres.slide')
  ),
);

const ListElement = styled.li`
  list-style-type: disc;
  &:hover {
    cursor: pointer;
    text-decoration: underline;
  }
`;

export default function TableOfContents() {
  const rows = useDatum(datum);
  const {moveSlideById} = React.useContext(SlideContext);

  return html`
    <ul>
      ${rows && rows.map(row => html`
        <${ListElement}
          key=${row.id}
          onClick=${() => moveSlideById && moveSlideById(row.id)}
        >
          ${row.name}
        <//>
      `)}
    </ul>
  `;
}