@helpscout/hsds-react/components/StatusDot/StatusDot.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 _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

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

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 _Icon = _interopRequireDefault(require("../Icon"));

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

var _StatusDot = require("./StatusDot.css");

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

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

  function StatusDot() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;

    _this.getStyles = function () {
      var _this$props = _this.props,
          borderColor = _this$props.borderColor,
          icon = _this$props.icon,
          outerBorderColor = _this$props.outerBorderColor,
          outerBorderWidth = _this$props.outerBorderWidth,
          status = _this$props.status,
          style = _this$props.style;
      var styles = (0, _extends2.default)({}, style, {
        borderColor: borderColor || null,
        boxShadow: outerBorderColor ? "0 0 0 " + outerBorderWidth + "px " + outerBorderColor : null
      });

      if (status === 'offline' && !icon || status === 'busy') {
        styles.color = outerBorderColor || 'white';
      }

      return styles;
    };

    _this.getIconMarkup = function () {
      var icon = _this.props.icon;
      return icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_StatusDot.CenteredContentUI, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: "c-StatusDot__icon",
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
            name: icon,
            size: "20"
          })
        })
      });
    };

    return _this;
  }

  var _proto = StatusDot.prototype;

  _proto.render = function render() {
    var _this$props2 = this.props,
        borderColor = _this$props2.borderColor,
        children = _this$props2.children,
        className = _this$props2.className,
        icon = _this$props2.icon,
        inline = _this$props2.inline,
        isUnread = _this$props2.isUnread,
        outerBorderColor = _this$props2.outerBorderColor,
        outerBorderWidth = _this$props2.outerBorderWidth,
        status = _this$props2.status,
        size = _this$props2.size,
        style = _this$props2.style,
        title = _this$props2.title,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props2, ["borderColor", "children", "className", "icon", "inline", "isUnread", "outerBorderColor", "outerBorderWidth", "status", "size", "style", "title"]);
    var componentClassName = (0, _classnames.default)('c-StatusDot', icon && 'is-icon', inline && 'is-inline', isUnread && 'is-unread', size && "is-" + size, status && "is-" + status, className);
    var componentStyle = this.getStyles();
    var tooltipTitle = title || "Is " + status;
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StatusDot.StatusDotUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
      className: componentClassName,
      style: componentStyle,
      title: tooltipTitle,
      children: this.getIconMarkup()
    }));
  };

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

StatusDot.defaultProps = {
  'data-cy': 'StatusDot',
  inline: false,
  isUnread: false,
  outerBorderWidth: 3,
  size: 'sm',
  status: 'online',
  style: {}
};
StatusDot.propTypes = {
  /** Color for the component border. */
  borderColor: _propTypes.default.string,

  /** Custom class names to be added to the component. */
  className: _propTypes.default.string,

  /** Renders an `Icon` into the component. */
  icon: _propTypes.default.string,

  /** Applies a display inline style to the component. */
  inline: _propTypes.default.bool,

  /** Applies an unread style to the component. */
  isUnread: _propTypes.default.bool,

  /** Color for the component's outer border. */
  outerBorderColor: _propTypes.default.string,

  /** Width the component's outer border. */
  outerBorderWidth: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),

  /** Adjusts the size of the component. */
  size: _propTypes.default.oneOf(['md', 'sm']),

  /** Status style to render to the component. */
  status: _propTypes.default.oneOf(['online', 'offline', 'busy', 'new', 'active', 'inactive', 'available', 'assign', 'unavailable', 'custom']),

  /** Custom text for the HTML `title` attributes. */
  title: _propTypes.default.string,

  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.default.string
};
var _default = StatusDot;
exports.default = _default;