Dialogic for Mithril

Manage dialogs and notifications.

• API
• Demo
• Installation
• Usage
  • Dialog
  • Notification
  • useDialog
    • Calling show and hide directly
  • useRemaining
• Sizes

API

See: Main documentation

Demo

• Online demo

Codesandbox examples:

• Live examples

Demo code in this repo:

• ./packages/demo-dialogic-mithril
• ./packages/demo-dialogic-mithril-router

Installation

npm install dialogic-mithril

For useDialog also install mithril-hooks:

npm install mithril-hooks

Usage

Dialog

// index.js
import m from 'mithril';
import { dialog, Dialog } from 'dialogic-mithril';

const App = {
  view: () => [
    m(
      'button',
      {
        onclick: () => {
          dialog.show({
            dialogic: {
              component: DialogView, // any component; see example below
              className: 'dialog',
            },
            title: 'Dialog Title',
          });
        },
      },
      'Show dialog',
    ),
    m(Dialog), // dialog will be drawn by this component
  ],
};

const DialogView = {
  view: ({ attrs }) =>
    m('.dialog', [
      m('.dialog-background', {
        onclick: () => dialog.hide(),
      }),
      m('.dialog-content', [m('h3', attrs.title), m('div', 'Dialog content')]),
    ]),
};

/* index.css */
.dialog {
  transition: opacity 350ms ease-in-out;
  opacity: 0;
}
.dialog-show-start {}
.dialog-show-end {
  opacity: 1;
}
.dialog-hide-start {}
.dialog-hide-end {
  opacity: 0;
}

Notification

Live example

// index.js
import m from 'mithril';
import { notification, Notification } from 'dialogic-mithril';

const App = {
  view: () => [
    m(
      '.button',
      {
        onclick: () => {
          notification.show({
            dialogic: {
              component: NotificationView, // any component; see example below
              className: 'notification',
            },
            title: 'Notification Title',
          });
        },
      },
      'Show notification',
    ),
    m(Notification), // notification will be drawn by this component
  ],
};

const NotificationView = {
  view: ({ attrs }) =>
    m('.notification', [
      m('h3', attrs.title),
      m('div', [
        m('span', 'Message'),
        // Optionally using pause/resume/isPaused:
        m(
          'button',
          {
            onclick: () =>
              notification.isPaused()
                ? notification.resume({ minimumDuration: 2000 })
                : notification.pause(),
          },
          notification.isPaused() ? 'Continue' : 'Wait',
        ),
      ]),
    ]),
};

/* index.css */
.notification {
  transition: opacity 350ms;
  opacity: 0;
}
.notification-show-start {}
.notification-show-end {
  opacity: 1;
}
.notification-hide-start {}
.notification-hide-end {
  opacity: 0;
}

useDialog

Live example

See also: useNotification and useDialogic.

useDialog requires mithril-hooks to use the React Hook API. The Mithril component is a simple view function without lifecycle hooks.

In the following example the dialog is shown when the current route matches a given path:

import m from 'mithril';
import { useDialog } from 'dialogic-mithril';
import { withHooks } from 'mithril-hooks';
import { MyDialog } from './MyDialog';

const MyComponentFn = () => {
  const dialogPath = '/profile/edit';
  const returnPath = '/profile';
  const isRouteMatch = m.route.get() === dialogPath;

  useDialog({
    isShow: isRouteMatch,
    props: {
      dialogic: {
        component: MyDialog,
        className: 'dialog',
      },
      // Props that will be passed to the MyDialog component
      returnPath,
    },
  });

  return m('div', '...');
};

export const MyComponent = withHooks(MyComponentFn);

With TypeScript

useDialog has a generic type to match the values passed to the component.

import m from 'mithril';
import { useDialog } from 'dialogic-mithril';
import { withHooks } from 'mithril-hooks';
import { MyDialog, TDialogProps } from './MyDialog';

type TProps = {
  // ...
}
const MyComponentFn = (attrs: TProps) => {
  const dialogPath = '/profile/edit';
  const returnPath = '/profile';
  const isRouteMatch = m.route.get() === dialogPath;

  useDialog<TDialogProps>({
    isShow: isRouteMatch,
    props: {
      dialogic: {
        component: MyDialog,
        className: 'dialog',
      },
      // Props that will be passed to the MyDialog component
      returnPath,
    },
  });

  return m('div', '...');
};

export const MyComponent: m.Component<TProps> = withHooks(MyComponentFn);

Calling show and hide directly

In the example below:

• show is used to show the dialog
• Component MyDialog receives props hideDialog to explicitly hide the dialog
• deps includes the URL location - whenever it changes the dialog is hidden

import m from 'mithril';
import { useDialog } from 'dialogic-mithril';
import { MyDialog } from './MyDialog';

const MyComponent = () => {
  const { show, hide } = useDialog({
    deps: [window.location.href], // as soon this value changes ...
    hide: true,                   // ... hide
    props: {
      dialogic: {
        component: MyDialog,
        className: 'dialog',
      },
      // Props that will be passed to the MyDialog component
      returnPath,
      hideDialog: () => hide(),
    }
  });

  return m('button', {
    onclick: () => show()
  }, 'Show dialog');
};

useRemaining

Hook to fetch the current remaining time. This is an alternative to getRemaining

import { notification, useDialogicState, useRemaining } from 'dialogic-mithril';

const MyComponent = (attrs) => {
  const [remainingSeconds] = useRemaining({ instance: notification, roundToSeconds: true });
  // ...
}

Sizes

┌──────────────────────────────────────────────┐
│                                              │
│   Bundle Name:  dialogic-mithril.module.js   │
│   Bundle Size:  31.25 KB                     │
│   Minified Size:  15.39 KB                   │
│   Gzipped Size:  5.02 KB                     │
│                                              │
└──────────────────────────────────────────────┘

┌───────────────────────────────────────────┐
│                                           │
│   Bundle Name:  dialogic-mithril.umd.js   │
│   Bundle Size:  34.22 KB                  │
│   Minified Size:  13.2 KB                 │
│   Gzipped Size:  4.72 KB                  │
│                                           │
└───────────────────────────────────────────┘

┌────────────────────────────────────────┐
│                                        │
│   Bundle Name:  dialogic-mithril.cjs   │
│   Bundle Size:  31.58 KB               │
│   Minified Size:  15.72 KB             │
│   Gzipped Size:  5.06 KB               │
│                                        │
└────────────────────────────────────────┘