"use strict";

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

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

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

var _ = require("./..");

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

/**
 * @category communication
 * @component alert-banner
 * @variations collab-ui-react
 */
var AlertBanner = function AlertBanner(props) {
  var show = props.show,
      type = props.type,
      closable = props.closable,
      children = props.children,
      onHide = props.onHide;

  var handleKeyPress = function handleKeyPress(e) {
    e.preventDefault();

    if (e.which === 32 || e.which === 13) {
      return onHide(e);
    } else if (e.charCode === 32 || e.charCode === 13) {
      return onHide(e);
    }
  };

  return show && _react.default.createElement("div", {
    type: type
  }, _react.default.createElement("div", {
    className: "cui-alert-banner " + ("cui-alert-banner--" + type)
  }, _react.default.createElement("div", {
    className: "cui-alert-banner__text"
  }, children), closable && _react.default.createElement("div", {
    className: "cui-alert-banner__close",
    onClick: onHide,
    tabIndex: 0,
    onKeyPress: handleKeyPress,
    role: 'button'
  }, _react.default.createElement(_.Icon, {
    name: "cancel_16"
  }))));
};

AlertBanner.defaultProps = {
  children: null,
  type: 'info',
  closable: false,
  onHide: function onHide() {}
};
AlertBanner.propTypes = {
  /** @prop Set AlertBanner visibility */
  show: _propTypes.default.bool.isRequired,

  /** @prop Children nodes to render inside AccordionHeader | null  */
  children: _propTypes.default.node,

  /** @prop Sets the AlertBanner type | 'info' */
  type: _propTypes.default.oneOf(['info', 'warning', 'error']),

  /** @prop Mandatory handler invoked when the user presses on the AlertBanner's close button or hit's the esc key | () => {} */
  onHide: _propTypes.default.func,

  /** @prop Sets the visibility of AlertBanner's close button | false */
  closable: _propTypes.default.bool
};
AlertBanner.displayName = 'AlertBanner';
var _default = AlertBanner;
/**
* @name Information
* @category communication
* @component alert-banner
* @section default
* @description Create info/default AlertBanners by omitting the type prop. To make the AlertBanner closable, use the closable prop.
*
* @js
import { Button } from '@collab-ui/react';

export default class AlertBannerDefault extends React.PureComponent {
  state = {
    showAlert1: true,
  }

  render() {
    return (
     <div>
       <div>
         <AlertBanner
           show={this.state.showAlert1}
           closable
           onHide={() => this.setState({showAlert1: false})}
         >
           Default Alert Banner
         </AlertBanner>
       </div>
       <div>
         <div className='row'>
           <br />
           <Button
             children='Toggle Default Alert Banner'
             onClick={() => this.setState({showAlert1: !this.state.showAlert1})}
             ariaLabel='Default Alert Banner'
             className='btn--primary btn--large'
           />
         </div>
       </div>
     </div>
    );
  }
}
**/

/**
* @name Warning
* @category communication
* @component alert-banner
* @section warning
* @description Create warning AlertBanners by setting the "type" prop to type='warning'.
*
* @js
import { Button } from '@collab-ui/react';

export default class AlertBannerWarning extends React.PureComponent {
  state = {
    showAlert1: true
  }

  render() {
    return (
     <div>
       <div>
         <AlertBanner
           show={this.state.showAlert1}
           closable
           onHide={() => this.setState({showAlert1: false})}
           type='warning'
         >
           Warning Alert Banner
         </AlertBanner>
       </div>
       <div>
         <div className='row'>
           <br />
           <Button
             children='Toggle Warning Alert Banner'
             onClick={() => this.setState({showAlert1: !this.state.showAlert1})}
             ariaLabel='Warning Alert Banner'
             className='btn--primary btn--large'
           />
         </div>
       </div>
     </div>
    );
  }
}
**/

/**
/**
* @name Error
* @category communication
* @component alert-banner
* @section error
* @description Create error AlertBanners by setting the type prop to type='error'.
*
* @js
import { Button } from '@collab-ui/react';

export default class AlertBannerError extends React.PureComponent {
  state = {
    showAlert1: true
  }

  render() {
    return (
     <div>
       <div>
         <AlertBanner
           show={this.state.showAlert1}
           closable
           onHide={() => this.setState({showAlert1: false})}
           type='error'
         >
           Error Alert Banner
         </AlertBanner>
       </div>
       <div>
         <div className='row'>
           <br />
           <Button
             children='Toggle Error Alert Banner'
             onClick={() => this.setState({showAlert1: !this.state.showAlert1})}
             ariaLabel='Error Alert Banner'
             className='btn--primary btn--large'
           />
         </div>
       </div>
     </div>
    );
  }
}
**/

exports.default = _default;