react-caps/build/components/caps-container.js

A Confirm-Alert-Prompts(CAPs) library for React

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _style = require('styled-jsx/style');

var _style2 = _interopRequireDefault(_style);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _alert = require('./alert');

var _alert2 = _interopRequireDefault(_alert);

var _confirm = require('./confirm');

var _confirm2 = _interopRequireDefault(_confirm);

var _prompt = require('./prompt');

var _prompt2 = _interopRequireDefault(_prompt);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Caps = function (_React$Component) {
  _inherits(Caps, _React$Component);

  function Caps(props) {
    _classCallCheck(this, Caps);

    var _this = _possibleConstructorReturn(this, (Caps.__proto__ || Object.getPrototypeOf(Caps)).call(this, props));

    _this.addAlert = function (_ref) {
      var text = _ref.text;

      if (_this.isReady) {
        var randomKey = Math.random().toString(36).substr(2, 5);
        var cap = {
          key: randomKey,
          type: 'alert',
          component: _react2.default.createElement(_alert2.default, {
            text: text,
            onOkClick: function onOkClick() {
              _this.removeCap(randomKey);
            }
          })
        };
        var capsTemp = _this.state.caps;
        capsTemp.push(cap);
        _this.setState({
          caps: capsTemp
        });
      }
    };

    _this.addConfirm = function (_ref2) {
      var text = _ref2.text,
          _ref2$callback = _ref2.callback,
          callback = _ref2$callback === undefined ? null : _ref2$callback;

      if (_this.isReady) {
        var randomKey = Math.random().toString(36).substr(2, 5);
        var cap = {
          key: randomKey,
          type: 'confirm',
          component: _react2.default.createElement(_confirm2.default, {
            text: text,
            onCancelClick: function onCancelClick() {
              _this.removeCap(randomKey);
            },
            onConfirmClick: function onConfirmClick(event) {
              if (callback && typeof callback === 'function') {
                callback(event);
              }
              _this.removeCap(randomKey);
            }
          })
        };
        var capsTemp = _this.state.caps;
        capsTemp.push(cap);
        _this.setState({
          caps: capsTemp
        });
      }
    };

    _this.addPrompt = function (_ref3) {
      var label = _ref3.label,
          _ref3$callback = _ref3.callback,
          callback = _ref3$callback === undefined ? null : _ref3$callback;

      if (_this.isReady) {
        var randomKey = Math.random().toString(36).substr(2, 5);
        var cap = {
          key: randomKey,
          type: 'prompt',
          component: _react2.default.createElement(_prompt2.default, {
            label: label,
            onCancelClick: function onCancelClick() {
              _this.removeCap(randomKey);
            },
            onConfirmClick: function onConfirmClick(value, event) {
              if (callback && typeof callback === 'function') {
                callback(value, event);
              }
              _this.removeCap(randomKey);
            }
          })
        };
        var capsTemp = _this.state.caps;
        capsTemp.push(cap);
        _this.setState({
          caps: capsTemp
        });
      }
    };

    _this.removeCap = function (key) {
      var caps = _this.state.caps;

      var index = caps.findIndex(function (cap) {
        return cap.key === key;
      });
      _this.setState({
        caps: [].concat(_toConsumableArray(caps.slice(0, index)), _toConsumableArray(caps.slice(index + 1)))
      });
    };

    _this.removeAllAlerts = function () {
      var capsTemp = _this.state.caps.filter(function (cap) {
        return cap.type !== 'alert';
      });
      _this.setState({
        caps: capsTemp
      });
    };

    _this.handleKeyUp = function (e) {
      // if 'Esc' key
      if (e.keyCode === 27) {
        _this.removeAllAlerts();
      }
    };

    _this.state = {
      caps: []
    };
    return _this;
  }

  _createClass(Caps, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.isReady = true;
      window.CapsReactRef = this;
      document.addEventListener('keyup', this.handleKeyUp, false);
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      document.removeEventListener('keyup', this.handleKeyUp, false);
    }
  }, {
    key: 'render',
    value: function render() {
      if (this.state.caps.length > 0) {
        return _react2.default.createElement(
          'div',
          {
            className: 'jsx-1751133888' + ' ' + 'react-caps'
          },
          _react2.default.createElement('div', { onClick: this.removeAllAlerts, role: 'presentation', className: 'jsx-1751133888' + ' ' + 'react-caps__overlay'
          }),
          this.state.caps.map(function (cap) {
            return _react2.default.createElement(
              'div',
              { key: cap.key, className: 'jsx-1751133888' + ' ' + 'react-caps__item'
              },
              cap.component
            );
          }),
          _react2.default.createElement(_style2.default, {
            styleId: '1751133888',
            css: '.react-caps.jsx-1751133888{position:fixed;width:100%;height:100%;z-index:100000;top:0;left:0}.react-caps__overlay.jsx-1751133888{position:absolute;width:100%;height:100%;z-index:0;background:rgba(0,0,0,0.2)}.react-caps__item.jsx-1751133888{display:table;position:relative;background:#fff;margin:auto;min-width:300px;margin-top:20px;-webkit-animation:cap-origin-jsx-1751133888 0.2s;animation:cap-origin-jsx-1751133888 0.2s;text-align:left;border-radius:2px;box-shadow:0 0px 5px rgba(0,0,0,0.3);box-sizing:border-box}@-webkit-keyframes cap-origin-jsx-1751133888{0%{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes cap-origin-jsx-1751133888{0%{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}'
          })
        );
      }
      return null;
    }
  }]);

  return Caps;
}(_react2.default.Component);

exports.default = Caps;