@helpscout/hsds-react/components/StatusBar/StatusBar.js

React component library for Help Scout's Design System

"use strict";

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

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

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

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

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

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

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

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

var _getValidProps = _interopRequireDefault(require("@helpscout/react-utils/dist/getValidProps"));

var _Collapsible = _interopRequireDefault(require("../Collapsible"));

var _StatusBar = _interopRequireDefault(require("./StatusBar.Button"));

var _classnames = _interopRequireDefault(require("classnames"));

var _StatusBar2 = require("./StatusBar.css");

var _jsxRuntime = require("react/jsx-runtime");

function noop() {}

var StatusBar = /*#__PURE__*/function (_React$PureComponent) {
  (0, _inheritsLoose2.default)(StatusBar, _React$PureComponent);

  function StatusBar(props) {
    var _this;

    _this = _React$PureComponent.call(this, props) || this;
    _this.state = {
      isOpen: props.isOpen
    };
    _this.handleOnClick = _this.handleOnClick.bind((0, _assertThisInitialized2.default)(_this));
    return _this;
  }

  var _proto = StatusBar.prototype;

  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
    var isOpen = nextProps.isOpen;

    if (isOpen !== undefined) {
      this.setState({
        isOpen: isOpen
      });
    }
  };

  _proto.handleOnClick = function handleOnClick() {
    var _this$props = this.props,
        closeOnClick = _this$props.closeOnClick,
        onClick = _this$props.onClick;

    if (closeOnClick) {
      this.setState({
        isOpen: false
      });
    }

    onClick();
  };

  _proto.render = function render() {
    var _this$props2 = this.props,
        className = _this$props2.className,
        closeOnClick = _this$props2.closeOnClick,
        children = _this$props2.children,
        propsIsOpen = _this$props2.isOpen,
        onClick = _this$props2.onClick,
        onOpen = _this$props2.onOpen,
        onClose = _this$props2.onClose,
        status = _this$props2.status,
        theme = _this$props2.theme,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props2, ["className", "closeOnClick", "children", "isOpen", "onClick", "onOpen", "onClose", "status", "theme"]);
    var isOpen = this.state.isOpen;
    var handleOnClick = this.handleOnClick;
    var componentClassName = (0, _classnames.default)('c-StatusBar', status && "is-" + status, theme && "is-" + theme, className);
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Collapsible.default, {
      isOpen: isOpen,
      onOpen: onOpen,
      onClose: onClose,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StatusBar2.StatusBarUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
        className: componentClassName,
        onClick: handleOnClick,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: "c-StatusBar__content",
          children: children
        })
      }))
    });
  };

  return StatusBar;
}(_react.default.PureComponent);

StatusBar.Button = _StatusBar.default;
StatusBar.defaultProps = {
  'data-cy': 'StatusBar',
  isOpen: false,
  onClick: noop,
  onClose: noop,
  onOpen: noop,
  closeOnClick: true,
  status: 'info',
  theme: 'light'
};
StatusBar.propTypes = {
  /** Close the bar upon clicking it */
  closeOnClick: _propTypes.default.bool,

  /** Status-based style for the component. */
  status: _propTypes.default.oneOf(['error', 'info', 'success', 'warning', '', null]),

  /** Style for the component. */
  theme: _propTypes.default.oneOf(['light', 'bold']),

  /** Callback function when clicking on the component. */
  onClick: _propTypes.default.func,

  /** Callback function when the component opens. */
  onOpen: _propTypes.default.func,

  /** Callback function when the component closes. */
  onClose: _propTypes.default.func
};
var _default = StatusBar;
exports.default = _default;