jiro-ui/src/components/overlay/examples/index.ts

A Mithril.js UI library based from construct-ui

import m from 'mithril';
import { Button, Card, Overlay, Switch } from '@/';
import { Example } from '@shared/examples';

const EXAMPLE_SRC = 'components/overlay/examples/index.ts';

export class OverlayExample {
  private closeOnEscapeKey = true;
  private closeOnOutsideClick = true;
  private inline = false;
  private hasBackdrop = true;
  private isOpen = false;

  public view() {
    const style = {
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      zIndex: 100
    };

    const cardStyles = {
      margin: '40px auto'
    };

    const content = m('', { style }, [
      m(Card, { style: cardStyles }, [
        m('h3', 'Title'),
        m(Button, {
          label: 'Close',
          onclick: () => this.isOpen = false
        })
      ])
    ]);

    return m(Example, { options: this.renderOptions(), src: EXAMPLE_SRC }, [
      m(Button, {
        label: 'Show Overlay',
        intent: 'primary',
        onclick: () => this.isOpen = true
      }),

      m(Overlay, {
        closeOnEscapeKey: this.closeOnEscapeKey,
        closeOnOutsideClick: this.closeOnOutsideClick,
        hasBackdrop: this.hasBackdrop,
        inline: this.inline,
        content,
        isOpen: this.isOpen,
        onClose: () => this.isOpen = false,
        transitionDuration: 0
      })
    ]);
  }

  private renderOptions() {
    return [
      m(Switch, {
        checked: this.closeOnEscapeKey,
        label: 'Close on ESC key',
        onchange: () => this.closeOnEscapeKey = !this.closeOnEscapeKey
      }),

      m(Switch, {
        checked: this.closeOnOutsideClick,
        label: 'Close on outside click',
        onchange: () => this.closeOnOutsideClick = !this.closeOnOutsideClick
      }),

      m(Switch, {
        checked: this.inline,
        label: 'Render inline',
        onchange: () => this.inline = !this.inline
      }),
      m(Switch, {
        checked: this.hasBackdrop,
        label: 'Has backdrop',
        onchange: () => this.hasBackdrop = !this.hasBackdrop
      })
    ];
  }
}