web-toolkit/lib/components/InfoBar.js

A GTK inspired toolkit designed to build awesome web apps

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));

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

var _classname = _interopRequireDefault(require("classname"));

var _Box = _interopRequireDefault(require("./Box"));

var _Button = _interopRequireDefault(require("./Button"));

/*
 * InfoBar.js
 */
function InfoBar(_ref) {
  var className = _ref.className,
      children = _ref.children,
      closable = _ref.closable,
      activatableValue = _ref.activatable,
      info = _ref.info,
      success = _ref.success,
      warning = _ref.warning,
      danger = _ref.danger,
      closeValue = _ref.close,
      onClose = _ref.onClose,
      rest = (0, _objectWithoutProperties2.default)(_ref, ["className", "children", "closable", "activatable", "info", "success", "warning", "danger", "close", "onClose"]);

  var _useState = (0, _react.useState)(false),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      closeState = _useState2[0],
      setClose = _useState2[1];

  var close = closeValue !== null && closeValue !== void 0 ? closeValue : closeState;
  var activatable = activatableValue !== null && activatableValue !== void 0 ? activatableValue : Boolean(rest.onClick);
  return /*#__PURE__*/_react.default.createElement("div", Object.assign({
    className: (0, _classname.default)('InfoBar', className, {
      activatable: activatable,
      info: info,
      success: success,
      warning: warning,
      danger: danger,
      close: close
    }),
    role: activatable ? 'button' : undefined,
    onTransitionEnd: onClose
  }, rest), /*#__PURE__*/_react.default.createElement(_Box.default, {
    horizontal: true,
    align: true,
    fill: true
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: "Box__fill"
  }, children), closable && /*#__PURE__*/_react.default.createElement(_Button.default, {
    icon: "window-close",
    onClick: function onClick() {
      return setClose(true);
    }
  })));
}

var _default = InfoBar;
exports.default = _default;
//# sourceMappingURL=InfoBar.js.map