cpui-components/lib/components/Alert/Alert.js

"use strict";

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

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _classnames = require("classnames");

var _classnames2 = _interopRequireDefault(_classnames);

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactCopyToClipboard = require("react-copy-to-clipboard");

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

var _CPPopover = require("../CPPopover/CPPopover");

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

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; }

// Gray, green, yellow, yellow
var ALERT_TYPES = ["info", "success", "warn", "error"];

var BUTTON_FORMATS = ["ok", "yes_no", "copy_link", "timeout"];

var Alert = exports.Alert = function (_Component) {
	_inherits(Alert, _Component);

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

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

		_this.componentWillMount = function () {
			_this.setState({
				isShowing: _this.props.isShowing,
				showPopover: false
			});

			if (!BUTTON_FORMATS.includes(_this.props.buttonFormat)) {
				setTimeout(function () {
					this.setState({
						isShowing: false
					});
				}.bind(_this), _this.props.autoDismissDelay);
			}
		};

		_this.componentWillReceiveProps = function (nextProps) {
			_this.setState({
				isShowing: nextProps.isShowing
			});
		};

		_this.handleConfirmResponse = function () {
			_this.props.onConfirmClick && _this.props.onConfirmClick();

			if (_this.props.buttonFormat === "copy_link") {
				_this.setState({
					showPopover: true
				});
				setTimeout(function () {
					this.setState({
						showPopover: false
					});
				}.bind(_this), 5000);
				return;
			}

			_this.setState({
				isShowing: false
			});
		};

		_this.handleCancelResponse = function () {
			_this.props.onCancelClick && _this.props.onCancelClick();
			_this.setState({
				isShowing: false
			});
		};

		_this.render = function () {
			var componentClass = (0, _classnames2.default)("cp-Alert", "" + (_this.state.isShowing ? "is-showing" : ""), "cp-UIMessage", "cp-UIMessage--" + _this.props.type, _this.props.className);

			var messageTemplate = _react2.default.createElement(
				"span",
				{ className: "cp-UIMessage-text" },
				_react2.default.Children.count(_this.props.children) ? _this.props.children : _this.props.text
			);

			switch (_this.props.buttonFormat) {
				case "ok":
					messageTemplate = _react2.default.createElement(
						"span",
						{ className: "cp-UIMessage-text" },
						_this.props.text,
						_react2.default.createElement("br", null),
						_react2.default.createElement(
							_Button.Button,
							{ className: "alertOk", onClick: _this.handleConfirmResponse },
							"Ok"
						)
					);
					break;
				case "yes_no":
					messageTemplate = _react2.default.createElement(
						"span",
						{ className: "cp-UIMessage-text" },
						_this.props.text,
						_react2.default.createElement("br", null),
						_react2.default.createElement(
							_Button.Button,
							{ id: "yes", className: "alertOk", onClick: _this.handleConfirmResponse },
							_this.props.affirmativeText
						),
						_react2.default.createElement(
							_Button.Button,
							{ id: "no", onClick: _this.handleCancelResponse },
							_this.props.negativeText
						)
					);
					break;
				case "copy_link":
					messageTemplate = _react2.default.createElement(
						"span",
						{ className: "cp-UIMessage-text" },
						_this.props.text,
						_react2.default.createElement("br", null),
						_react2.default.createElement(
							_Button.Button,
							{ id: "yes", className: "alertOk", onClick: _this.handleCancelResponse },
							"Ok"
						),
						_react2.default.createElement(
							_reactCopyToClipboard.CopyToClipboard,
							{ text: _this.props.copyLink },
							_react2.default.createElement(
								_Button.Button,
								{ id: "copy", onClick: _this.handleConfirmResponse },
								"Copy Link"
							)
						),
						_react2.default.createElement(_CPPopover.CPPopover, { text: "Link copied!", isOpen: _this.state.showPopover })
					);
					break;
				default:
					break;
			}

			return _react2.default.createElement(
				"div",
				null,
				_react2.default.createElement(
					"div",
					{ className: componentClass, style: { minWidth: _this.props.minWidth, zIndex: 1 } },
					messageTemplate
				)
			);
		};

		_this.state = {
			isShowing: false
		};

		_this.handleConfirmResponse = _this.handleConfirmResponse.bind(_this);
		_this.handleCancelResponse = _this.handleCancelResponse.bind(_this);
		return _this;
	}

	return Alert;
}(_react.Component);

Alert.displayName = "CPUIAlert";
Alert.propTypes = {
	className: _propTypes2.default.string,
	type: _propTypes2.default.oneOf(ALERT_TYPES).isRequired,
	buttonFormat: _propTypes2.default.oneOf(BUTTON_FORMATS),
	autoDismissDelay: _propTypes2.default.number,
	isShowing: _propTypes2.default.bool,
	minWidth: _propTypes2.default.number,
	text: _propTypes2.default.string.isRequired,
	affirmativeText: _propTypes2.default.string,
	onConfirmClick: _propTypes2.default.func,
	onCancelClick: _propTypes2.default.func,
	negativeText: _propTypes2.default.string,
	copyLink: _propTypes2.default.string
};
Alert.defaultProps = {
	type: "warn",
	autoDismissDelay: 10000,
	affirmativeText: "Yes",
	negativeText: "No",
	minWidth: 0,
	isShowing: true
};
exports.default = Alert;