blockstack-ui/dist/components/notifications/messages.js

Blockstack UI components built with css-in-js and styled-system.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.Messages = void 0;

require("core-js/modules/es6.object.assign");

var _react = _interopRequireDefault(require("react"));

var _typography = require("../typography");

var _primitives = require("../primitives");

var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));

var _index = require("./index");

var _reactSpring = require("react-spring");

var _styles = require("./styles.js");

var Messages = function Messages(_ref) {
  var rest = Object.assign({}, _ref);
  return _react.default.createElement(_index.NotificationContext.Consumer, null, function (_ref2) {
    var items = _ref2.items,
        remove = _ref2.remove,
        leave = _ref2.leave,
        config = _ref2.config,
        cancel = _ref2.cancel,
        canClose = _ref2.canClose,
        top = _ref2.top;
    return _react.default.createElement(_reactSpring.Transition, {
      native: true,
      items: items,
      keys: function keys(item) {
        return item.key;
      },
      from: {
        opacity: 0,
        height: 0,
        life: 1
      },
      enter: {
        opacity: 1,
        height: 'auto'
      },
      leave: leave,
      onRest: remove,
      config: config
    }, function (item) {
      return function (_ref3) {
        var props = Object.assign({}, _ref3);
        return _react.default.createElement(_styles.Message, {
          style: props
        }, _react.default.createElement(_styles.Content, {
          canClose: canClose,
          top: top
        }, _react.default.createElement(_primitives.Flex, {
          flexDirection: "column",
          py: 4
        }, item.title ? _react.default.createElement(_typography.Type, {
          color: "blue.dark",
          pb: 2,
          fontWeight: "bold"
        }, item.title) : null, _react.default.createElement(_typography.Type, {
          color: "blue.dark",
          fontWeight: '400'
        }, item.message)), canClose && _react.default.createElement(_styles.Button, {
          onClick: function onClick() {
            return cancel(item);
          }
        }, _react.default.createElement(_CloseIcon.default, {
          size: 18
        }))));
      };
    });
  });
};

exports.Messages = Messages;