@helpscout/hsds-react/components/RateAction/RateAction.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.RateAction = 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 _Emoticon = _interopRequireDefault(require("../Emoticon"));

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

var _RateAction = require("./RateAction.css");

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

var _color = require("../../styles/utilities/color");

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

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

  function RateAction() {
    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.state = {
      isActive: _this.props.isActive
    };

    _this.handleOnClick = function (event) {
      _this.setState({
        isActive: true
      });

      _this.props.onClick(event);
    };

    return _this;
  }

  var _proto = RateAction.prototype;

  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
    if (nextProps.isActive !== this.state.isActive) {
      this.setState({
        isActive: nextProps.isActive
      });
    }
  };

  _proto.getClassName = function getClassName() {
    var _this$props = this.props,
        className = _this$props.className,
        name = _this$props.name,
        size = _this$props.size;
    var isActive = this.state.isActive;
    return (0, _classnames.default)(RateAction.className, isActive && "is-active", name && "is-" + (0, _Emoticon2.getName)(name), size && "is-" + size, className);
  };

  _proto.render = function render() {
    var _this$props2 = this.props,
        name = _this$props2.name,
        disabled = _this$props2.disabled,
        innerRef = _this$props2.innerRef,
        size = _this$props2.size,
        onBlur = _this$props2.onBlur,
        onFocus = _this$props2.onFocus,
        outlineColor = _this$props2.outlineColor,
        withCircle = _this$props2.withCircle,
        iconSize = _this$props2.iconSize,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props2, ["name", "disabled", "innerRef", "size", "onBlur", "onFocus", "outlineColor", "withCircle", "iconSize"]);
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RateAction.RateActionUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
      className: this.getClassName(),
      disabled: disabled,
      ref: innerRef,
      onBlur: this.handleOnBlur,
      onClick: this.handleOnClick,
      onFocus: this.handleOnFocus,
      outlineColor: outlineColor,
      name: name,
      size: size,
      withCircle: withCircle,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Emoticon.default, {
        size: size,
        name: (0, _Emoticon2.getName)(name),
        isActive: this.state.isActive,
        isDisabled: disabled,
        iconSize: iconSize
      })
    }));
  };

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

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

function noop() {}

RateAction.defaultProps = {
  'data-cy': 'RateAction',
  disabled: false,
  innerRef: noop,
  isActive: false,
  name: 'reaction-happy',
  onClick: noop,
  outlineColor: (0, _color.getColor)('green.500'),
  size: 'lg',
  withCircle: false
};
RateAction.propTypes = {
  /** Custom class names to be added to the component. */
  className: _propTypes.default.string,

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

  /** Determines the emoticon color. Default `true`. */
  isActive: _propTypes.default.bool,

  /** Disables the emoticon from interactions. Default `false`. */
  disabled: _propTypes.default.bool,

  /** Determines the Emoticon image. One of 'reaction-happy', 'reaction-sad', 'reaction-okay' */
  name: _propTypes.default.oneOf(['happy', 'sad', 'meh', 'reaction-happy', 'reaction-sad', 'reaction-okay']),

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

  /** Obtain the DOM node of the button */
  innerRef: _propTypes.default.func,

  /** Callback on click */
  onClick: _propTypes.default.func,

  /** Outline color for active state */
  outlineColor: _propTypes.default.string,

  /** Shows a big border around the icon */
  withCircle: _propTypes.default.bool,

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