skrim/index.js

Irken plugin for managing application overlays.

"use strict";

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var React = require("react");
var noop = require("lodash/utility/noop");
var delay = require("lodash/function/delay");
var remove = require("lodash/array/remove");
var assign = require("lodash/object/assign");

var Toast = require("./toast");
var Overlay = require("./overlay");
var ToastContainer = require("./toast-container");

function skrim(app, _, done) {

  var renderer = undefined;
  var toasts = [];
  var options = {
    shown: false,
    backdrop: true
  };

  function showOverlay(opts) {
    assign(options, { shown: true }, opts);
    app.render();
  }

  function hideOverlay() {
    assign(options, { shown: false });
    app.render();
  }

  function renderOverlay(fn, opts) {
    if (typeof fn === "function") {
      renderer = fn;
    }

    showOverlay(opts);
  }

  function clearToast(component) {
    remove(toasts, component);
    app.render();
  }

  function clearToasts() {
    toasts = [];
    app.render();
  }

  function showToast(message) {
    var opts = arguments[1] === undefined ? {} : arguments[1];

    if (typeof message === "string") {
      (function () {
        var idx = toasts.length;
        var component = React.createElement(
          Toast,
          { key: idx, style: opts.style, onClose: function () {
              return clearToast(component);
            } },
          message
        );
        toasts.push(component);
        app.render();

        if (opts.timeout) {
          delay(clearToast, opts.timeout, component);
        }
      })();
    }
  }

  app.expose("overlay", {
    show: showOverlay,
    hide: hideOverlay,
    render: renderOverlay
  });

  app.expose("toast", {
    show: showToast,
    clear: clearToasts
  });

  app.view("overlay", function (el, cb) {
    var component = React.createElement(
      "div",
      null,
      React.createElement(
        ToastContainer,
        null,
        toasts
      ),
      React.createElement(Overlay, _extends({
        hide: hideOverlay,
        show: showOverlay,
        renderer: options.shown ? renderer : noop
      }, options))
    );

    React.render(component, el, cb);
  });

  done();
}

module.exports = skrim;