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

React component library for Help Scout's Design System

"use strict";

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

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

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

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

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 _classnames = _interopRequireDefault(require("classnames"));

var _Emoticon = require("./Emoticon.css");

var _Emoticon2 = require("./Emoticon.utils");

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

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

  function Emoticon() {
    return _React$PureComponent.apply(this, arguments) || this;
  }

  var _proto = Emoticon.prototype;

  _proto.getClassNames = function getClassNames() {
    var _this$props = this.props,
        className = _this$props.className,
        clickable = _this$props.clickable,
        center = _this$props.center,
        isActive = _this$props.isActive,
        isDisabled = _this$props.isDisabled,
        inline = _this$props.inline,
        name = _this$props.name,
        size = _this$props.size;
    return (0, _classnames.default)(Emoticon.className, !clickable && 'is-noInteract', isActive ? 'is-active' : 'is-inactive', center && 'is-center', inline && 'is-inline', isDisabled && 'is-disabled', name && "is-" + (0, _Emoticon2.getName)(name), size && "is-" + size, className);
  };

  _proto.render = function render() {
    var _this$props2 = this.props,
        className = _this$props2.className,
        center = _this$props2.center,
        clickable = _this$props2.clickable,
        innerRef = _this$props2.innerRef,
        isActive = _this$props2.isActive,
        isDisabled = _this$props2.isDisabled,
        inline = _this$props2.inline,
        name = _this$props2.name,
        title = _this$props2.title,
        size = _this$props2.size,
        iconSize = _this$props2.iconSize,
        _this$props2$withAnim = _this$props2.withAnimation,
        withAnimation = _this$props2$withAnim === void 0 ? false : _this$props2$withAnim,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props2, ["className", "center", "clickable", "innerRef", "isActive", "isDisabled", "inline", "name", "title", "size", "iconSize", "withAnimation"]);
    var iconName = (0, _Emoticon2.getName)(name);
    var icon = (0, _Emoticon2.getIcon)(iconName, iconSize || size);
    var component = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Emoticon.EmoticonUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
      size: size,
      className: this.getClassNames(),
      innerRef: innerRef,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Emoticon.IconUI, {
        className: "c-Emoticon__icon",
        title: title,
        children: icon && icon
      })
    }));

    if (withAnimation) {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Emoticon.EmoticonAnimationUI, {
        children: component
      });
    }

    return component;
  };

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

exports.Emoticon = Emoticon;
Emoticon.className = 'c-Emoticon';

function noop() {}

Emoticon.defaultProps = {
  center: false,
  clickable: true,
  'data-cy': 'Emoticon',
  inline: false,
  isActive: true,
  isDisabled: false,
  innerRef: noop,
  name: 'happy',
  role: 'presentation',
  size: 'md',
  title: ''
};
Emoticon.propTypes = {
  /** The className of the component. */
  className: _propTypes.default.string,

  /** Center aligns component with margin right and left = auto */
  center: _propTypes.default.bool,

  /** No pointer events allowed if false */
  clickable: _propTypes.default.bool,

  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.default.string,

  /** Give the emoticon an inactive style (grey) */
  isActive: _propTypes.default.bool,

  /** Disabled (no pointer events allowed and reduced opacity) */
  isDisabled: _propTypes.default.bool,

  /** Get the dom ref */
  innerRef: _propTypes.default.func,

  /** Display as inline block */
  inline: _propTypes.default.bool,

  /** The name of the emoticon to render */
  name: _propTypes.default.oneOf(['happy', 'sad', 'meh', 'reaction-happy', 'reaction-sad', 'reaction-okay']),

  /** Render a html title attribute on the emoticon*/
  title: _propTypes.default.string,

  /** size of the emoticon: xl: '38px', lg: '24px', md: '20px', sm: '16px' */
  size: _propTypes.default.oneOf(['xl', 'lg', 'md', 'sm']),

  /** Animate Emoticon on hover */
  withAnimation: _propTypes.default.bool,

  /** Allows to overwrite icon size */
  iconSize: _propTypes.default.string
};
var _default = Emoticon;
exports.default = _default;