jiro-ui/src/components/menu/examples/submenu.ts

A Mithril.js UI library based from construct-ui

import m from 'mithril';
import { Icons, Menu, MenuDivider, MenuItem, Switch, MenuHeading } from '@/';
import { Example } from '@shared/examples';

const EXAMPLE_SRC = 'components/menu/examples/submenu.ts';

export class MenuSubExample {
  private closeOnSubmenuClick = false;

  public view() {
    const downloadActions = [
      m(MenuItem, {
        iconLeft: Icons.PACKAGE,
        label: 'Package'
      }),
      m(MenuItem, {
        iconLeft: Icons.FILE,
        label: 'File'
      }),
      m(MenuItem, {
        iconLeft: Icons.FILE_TEXT,
        label: 'Text File'
      })
    ];

    const actions = [
      m(MenuItem, {
        iconLeft: Icons.BOOKMARK,
        label: 'Bookmark'
      }),
      m(MenuItem, {
        iconLeft: Icons.DOWNLOAD_CLOUD,
        label: 'Download',
        submenu: downloadActions,
        closeOnSubmenuClick: this.closeOnSubmenuClick
      })
    ];

    return m(Example, { options: this.renderOptions(), src: EXAMPLE_SRC }, [
      m(Menu, [
        m(MenuHeading, 'Actions'),

        m(MenuItem, {
          iconLeft: Icons.COPY,
          label: 'Copy'
        }),
        m(MenuItem, {
          iconLeft: Icons.EDIT_2,
          label: 'Edit'
        }),
        m(MenuItem, {
          iconLeft: Icons.SETTINGS,
          label: 'Settings',
          submenu: actions,
          closeOnSubmenuClick: this.closeOnSubmenuClick
        }),
        m(MenuDivider),
        m(MenuItem, {
          iconLeft: Icons.TRASH_2,
          label: 'Delete',
          intent: 'negative'
        })
      ])
    ]);
  }

  private renderOptions() {
    return [
      m(Switch, {
        checked: this.closeOnSubmenuClick,
        label: 'Close on submenu click',
        onchange: () => this.closeOnSubmenuClick = !this.closeOnSubmenuClick
      })
    ];
  }
}