aquameta-widget/data/widget.component/root/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 {database, query} from '/db/widget/core/datum.js';
import {Helmet, HelmetProvider} from '/db/widget/dep/react-helmet-async.js';
import styled, {ThemeProvider} from '/db/widget/dep/styled-components.js';
import SlideContainer from '/db/widget/component/slide-container.js';
import Slide from '/db/widget/component/slide.js';
import useDatum from '/db/widget/core/use-datum.js';
import Centered from '/db/widget/component/centered.js';
import StatusBanner from '/db/widget/component/status-banner.js';
import SlideContext from '/db/widget/common/slide-context.js';

const theme = {
  height: '600px',
  heightWithoutPadding: '560px',
  colors: {
    dark: 'rgba(0, 0, 0, 0.9)',
    light: 'rgba(0, 0, 0, 0.7)',
    verylight: 'rgba(0, 0, 0, 0.3)',
    opaque: {
      light: '#f8f8f8',
    },
  },
};

const LoadingMessage = styled.span`
  color: ${({theme}) => theme.colors.dark};
`;

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

export default function Root() {
  const slides = useDatum(datum);
  const [slideIndex, setSlideIndex] = React.useState(0);
  const slide = slides[slideIndex];

  function moveSlide(toIndex) {
    if (toIndex >= 0 && toIndex < slides.length) {
      setSlideIndex(toIndex);
    }
  }

  function moveSlideById(id) {
    const index = slides
      .findIndex(slide => slide.id === id);
    if (index >= 0) {
      moveSlide(index);
    }
  }

  const slideContext = {
    moveSlide,
    moveSlideById,
  };

  return html`
    <${ThemeProvider} theme=${theme}>
      <${HelmetProvider}>
        <${SlideContext.Provider} value=${slideContext}>
          ${slide
            ? html`
              <${React.Fragment}>
                <${Helmet}>
                  <link
                    rel="stylesheet"
                    type="text/css"
                    href="/db/widget/dep/github-markdown.css"
                  />
                <//>
                <${StatusBanner} index=${slideIndex} rows=${slides}/>
                <${SlideContainer}
                  className="markdown-body"
                  previous=${() => moveSlide(slideIndex-1)}
                  previousDisabled=${slideIndex === 0}
                  next=${() => moveSlide(slideIndex+1)}
                  nextDisabled=${slideIndex === (slides.length - 1)}
                  slide=${slide}
                />
              <//>
            `
            : html`
              <${Centered}>
                <${LoadingMessage}>Presentation loading<//>
              <//>
            `
          }
        <//>
      <//>
    <//>
  `;
}