How to use cyano-mithril - 10 common examples

import { _Conditional } from "polythene-core";
import { cast, h, useState, useEffect } from "cyano-mithril";
import { _Drawer, openDialogsSelector } from "polythene-core-drawer";
import { DialogInstance } from "polythene-mithril-dialog";
import classes from "polythene-css-classes/drawer";

const DrawerInstance = cast(_Drawer, { h, Dialog: DialogInstance, openDialogsSelector });
DrawerInstance["displayName"] = "DrawerInstance";

const DrawerToggle = cast(_Conditional, { h, useState, useEffect });
DrawerToggle["displayName"] = "DrawerToggle";

export const Drawer = {
  view: vnode =>
    h(DrawerToggle, {
      ...vnode.attrs,
      placeholderClassName: classes.placeholder,
      instance: DrawerInstance,
      permanent: vnode.attrs.permanent || vnode.attrs.mini, // passed to Conditional
    })
};

Drawer["displayName"] = "Drawer";

import { _Conditional } from "polythene-core";
import { cast, h, useState, useEffect } from "cyano-mithril";
import { _Drawer, openDialogsSelector } from "polythene-core-drawer";
import { DialogInstance } from "polythene-mithril-dialog";
import classes from "polythene-css-classes/drawer";

const DrawerInstance = cast(_Drawer, { h, Dialog: DialogInstance, openDialogsSelector });
DrawerInstance["displayName"] = "DrawerInstance";

const DrawerToggle = cast(_Conditional, { h, useState, useEffect });
DrawerToggle["displayName"] = "DrawerToggle";

export const Drawer = {
  view: vnode =>
    h(DrawerToggle, {
      ...vnode.attrs,
      placeholderClassName: classes.placeholder,
      instance: DrawerInstance,
      permanent: vnode.attrs.permanent || vnode.attrs.mini, // passed to Conditional
    })
};

Drawer["displayName"] = "Drawer";

SnackbarInstance["displayName"] = "SnackbarInstance";

const options = {
  name:           "snackbar",
  className:      classes.component,
  htmlShowClass:  classes.open,
  defaultId:      "default_snackbar",
  holderSelector: `.${classes.holder}`,
  instance:       SnackbarInstance,
  placeholder:    `span.${classes.placeholder}`,
  queue:          true,
  transitions
};

const MultipleInstance = Multi({ options });
export const Snackbar = cast(MultipleInstance.render, { h, useState, useEffect });
Object.getOwnPropertyNames(MultipleInstance)
  .filter(p => p !== "render")
  .forEach(p => Snackbar[p] = MultipleInstance[p]);
  Snackbar["displayName"] = "Snackbar";

import { Shadow } from "polythene-mithril-shadow";

export const DialogInstance = cast(_Dialog, { h, a, useState, useEffect, useRef, getRef, useReducer, Shadow, Pane: DialogPane, openDialogsSelector });
DialogInstance["displayName"] = "DialogInstance";

const options = {
  name:           "dialog",
  htmlShowClass:  classes.open,
  defaultId:      "default_dialog",
  holderSelector: `div.${classes.holder}`,
  instance:       DialogInstance,
  placeholder:    `span.${classes.placeholder}`
};

const MultipleInstance = Multi({ options });
export const Dialog = cast(MultipleInstance.render, { h, useState, useEffect });
Object.getOwnPropertyNames(MultipleInstance)
  .filter(p => p !== "render")
  .forEach(p => Dialog[p] = MultipleInstance[p]);
Dialog["displayName"] = "Dialog";

export const NotificationInstance = cast(_Notification, { h, a, useState, useEffect, useRef, getRef, useReducer });
NotificationInstance["displayName"] = "NotificationInstance";

const options = {
  name:           "notification",
  className:      classes.component,
  htmlShowClass:  classes.open,
  defaultId:      "default_notification",
  holderSelector: `.${classes.holder}`,
  instance:       NotificationInstance,
  placeholder:    `span.${classes.placeholder}`,
  queue:          true,
};

const MultipleInstance = Multi({ options });
export const Notification = cast(MultipleInstance.render, { h, useState, useEffect });
Object.getOwnPropertyNames(MultipleInstance)
  .filter(p => p !== "render")
  .forEach(p => Notification[p] = MultipleInstance[p]);
Notification["displayName"] = "Notification";

import { _RadioButton } from "polythene-core-radio-button";
import { _ViewControl, _SelectionControl } from "polythene-core-selection-control";
import { cast, h, a, useState, useEffect } from "cyano-mithril";
import { Icon } from "polythene-mithril-icon";
import { IconButton } from "polythene-mithril-icon-button";

const ViewControl = cast(_ViewControl, { h, a, Icon, IconButton });
ViewControl["displayName"] = "ViewControl";

const SelectionControl = cast(_SelectionControl, { h, a, useState, useEffect, ViewControl });
SelectionControl["displayName"] = "SelectionControl";

export const RadioButton = cast(_RadioButton, { h, a, SelectionControl });
RadioButton["displayName"] = "RadioButton";

import { _Checkbox } from "polythene-core-checkbox";
import { _ViewControl, _SelectionControl } from "polythene-core-selection-control";
import { cast, h, a, useState, useEffect } from "cyano-mithril";
import { Icon } from "polythene-mithril-icon";
import { IconButton } from "polythene-mithril-icon-button";

const ViewControl = cast(_ViewControl, { h, a, Icon, IconButton });
ViewControl["displayName"] = "ViewControl";

const SelectionControl = cast(_SelectionControl, { h, a, useState, useEffect, ViewControl });
SelectionControl["displayName"] = "SelectionControl";

export const Checkbox = cast(_Checkbox, { h, a, SelectionControl });
Checkbox["displayName"] = "Checkbox";

import { _Button } from "polythene-core-button";
import { Ripple } from "polythene-mithril-ripple";
import { Icon } from "polythene-mithril-icon";
import { Shadow } from "polythene-mithril-shadow";
import { cast, h, a, useState, useEffect, useRef, getRef } from "cyano-mithril";

export const Button = cast(_Button, { h, a, getRef, useState, useEffect, useRef, Ripple, Shadow, Icon });

import { _ScrollButton, _Tab, _Tabs } from "polythene-core-tabs";

import { Button } from "polythene-mithril-button";
import { Icon } from "polythene-mithril-icon";
import { IconButton } from "polythene-mithril-icon-button";

import { cast, h, a, getRef, useState, useEffect } from "cyano-mithril";

const ScrollButton = cast(_ScrollButton, { h, a, IconButton });
const Tab = cast(_Tab, { h, a, Button, Icon });
export const Tabs = cast(_Tabs, { h, a, getRef, useState, useEffect, ScrollButton, Tab });

Tabs["displayName"] = "Tabs";

import { _Toolbar } from "polythene-core-toolbar";
import { Shadow } from "polythene-mithril-shadow";
import { cast, h, a } from "cyano-mithril";

export const Toolbar = cast(_Toolbar, { h, a, Shadow });