wix-style-react/dist/es/src/FacesRatingBar/FacesRatingBar.js

wix-style-react

import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _extends from "@babel/runtime/helpers/extends";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _excluded = ["faceIndex", "isSelected", "iconType", "isHovered", "showDescriptionValues", "descriptionValues", "onClick", "onMouseEnter", "onMouseLeave", "handleFocus", "handleBlur"];

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

import React from 'react';
import PropTypes from 'prop-types';
import { withFocusable } from "wix-ui-core/dist/es/src/hocs/Focusable/FocusableHOC";
import { st, classes } from './FacesRatingBar.st.css';
import { dataHooks, facesData } from './constants';
import Box from '../Box/Box';
import Tooltip from '../Tooltip/Tooltip';
import { FaceDisapointed, FaceFrowning, FaceNeutral, FaceSmiling, FaceGrining } from './icons/FaceIcons';
var faceIconsMap = {
  1: FaceDisapointed,
  2: FaceFrowning,
  3: FaceNeutral,
  4: FaceSmiling,
  5: FaceGrining
};
/** A rating component that will enable the user to rate on a 1-5 scale. */

var FacesRatingBar = /*#__PURE__*/function (_React$PureComponent) {
  _inherits(FacesRatingBar, _React$PureComponent);

  var _super = _createSuper(FacesRatingBar);

  function FacesRatingBar() {
    var _this;

    _classCallCheck(this, FacesRatingBar);

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

    _this = _super.call.apply(_super, [this].concat(args));

    _defineProperty(_assertThisInitialized(_this), "state", {
      faceHoveredIndex: 0
    });

    _defineProperty(_assertThisInitialized(_this), "_onFaceClick", function (index) {
      _this.props.onChange(index);
    });

    _defineProperty(_assertThisInitialized(_this), "_onFaceMouseEnter", function (index) {
      _this.setState({
        faceHoveredIndex: index
      });
    });

    _defineProperty(_assertThisInitialized(_this), "_onFaceMouseLeave", function () {
      _this.setState({
        faceHoveredIndex: 0
      });
    });

    _defineProperty(_assertThisInitialized(_this), "_onFaceFocus", function (faceIndex, focusableProps) {
      // We would like to change the faces color on focus / hover
      _this.setState({
        faceHoveredIndex: faceIndex
      });

      focusableProps.focusableOnFocus();
    });

    _defineProperty(_assertThisInitialized(_this), "_onFaceBlur", function (focusableProps) {
      // We would like to change the faces color on focus / hover
      _this.setState({
        faceHoveredIndex: 0
      });

      focusableProps.focusableOnBlur();
    });

    _defineProperty(_assertThisInitialized(_this), "_shouldShowDescriptionValues", function () {
      var _this$props = _this.props,
          readOnly = _this$props.readOnly,
          descriptionValues = _this$props.descriptionValues;
      var shouldShowDescriptionValues = false; // Adding description values is not available in read only mode and it must be an array of strings at size 5.

      if (!readOnly && descriptionValues) {
        shouldShowDescriptionValues = Array.isArray(descriptionValues) && descriptionValues.length === 5;
      }

      return shouldShowDescriptionValues;
    });

    return _this;
  }

  _createClass(FacesRatingBar, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this$props2 = this.props,
          readOnly = _this$props2.readOnly,
          value = _this$props2.value;

      if (readOnly && value === 0) {
        throw new Error('In readOnly mode the value couldn’t be 0. Please enter a value between 1 to 5.');
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props3 = this.props,
          dataHook = _this$props3.dataHook,
          readOnly = _this$props3.readOnly,
          value = _this$props3.value,
          descriptionValues = _this$props3.descriptionValues;
      var faceHoveredIndex = this.state.faceHoveredIndex;

      var showDescriptionValues = this._shouldShowDescriptionValues();

      return /*#__PURE__*/React.createElement(Box, {
        className: st(classes.root, {}, this.props),
        dataHook: dataHook
      }, /*#__PURE__*/React.createElement(Faces, {
        readOnly: readOnly,
        selectedIndex: value,
        hoveredIndex: faceHoveredIndex,
        showDescriptionValues: showDescriptionValues,
        descriptionValues: descriptionValues,
        onClick: this._onFaceClick,
        onMouseEnter: this._onFaceMouseEnter,
        onMouseLeave: this._onFaceMouseLeave,
        handleFocus: this._onFaceFocus,
        handleBlur: this._onFaceBlur
      }));
    }
  }]);

  return FacesRatingBar;
}(React.PureComponent);

var Faces = function Faces(_ref) {
  var readOnly = _ref.readOnly,
      selectedIndex = _ref.selectedIndex,
      hoveredIndex = _ref.hoveredIndex,
      showDescriptionValues = _ref.showDescriptionValues,
      descriptionValues = _ref.descriptionValues,
      onClick = _ref.onClick,
      onMouseEnter = _ref.onMouseEnter,
      onMouseLeave = _ref.onMouseLeave,
      handleFocus = _ref.handleFocus,
      handleBlur = _ref.handleBlur;
  var facesArr = [];

  for (var i = 1; i <= 5; i++) {
    var isSelected = selectedIndex === i;
    var isHovered = hoveredIndex === i;
    var iconType = facesData[i].name;
    var commonProps = {
      key: i,
      faceIndex: i,
      isSelected: isSelected,
      iconType: iconType
    };
    var face = readOnly ? /*#__PURE__*/React.createElement(ReadOnlyModeFace, commonProps) : /*#__PURE__*/React.createElement(FocusableInteractiveModeFace, _extends({}, commonProps, {
      isHovered: isHovered,
      showDescriptionValues: showDescriptionValues,
      descriptionValues: descriptionValues,
      onClick: onClick,
      onMouseEnter: onMouseEnter,
      onMouseLeave: onMouseLeave,
      handleFocus: handleFocus,
      handleBlur: handleBlur
    }));
    facesArr.push(face);
  }

  return facesArr;
};

var InteractiveModeFace = function InteractiveModeFace(_ref2) {
  var faceIndex = _ref2.faceIndex,
      isSelected = _ref2.isSelected,
      iconType = _ref2.iconType,
      isHovered = _ref2.isHovered,
      showDescriptionValues = _ref2.showDescriptionValues,
      descriptionValues = _ref2.descriptionValues,
      _onClick = _ref2.onClick,
      _onMouseEnter = _ref2.onMouseEnter,
      onMouseLeave = _ref2.onMouseLeave,
      handleFocus = _ref2.handleFocus,
      handleBlur = _ref2.handleBlur,
      focusableProps = _objectWithoutProperties(_ref2, _excluded);

  var IconTagName = faceIconsMap[faceIndex];
  var tooltipContent = showDescriptionValues ? descriptionValues[faceIndex - 1] : '';
  return /*#__PURE__*/React.createElement("button", {
    "data-hook": dataHooks.face,
    "data-index": faceIndex,
    "data-selected": isSelected,
    className: st(classes.buttonWrapper),
    onClick: function onClick() {
      return _onClick(faceIndex);
    },
    onMouseEnter: function onMouseEnter() {
      return _onMouseEnter(faceIndex);
    },
    onMouseLeave: onMouseLeave,
    onFocus: function onFocus() {
      return handleFocus(faceIndex, focusableProps);
    },
    onBlur: function onBlur() {
      return handleBlur(focusableProps);
    }
  }, /*#__PURE__*/React.createElement("div", {
    "data-hook": dataHooks.face,
    "data-selected": isSelected,
    className: st(classes.faceContainer, {
      type: 'interactive',
      hovered: isHovered,
      selected: isSelected,
      iconType: iconType
    })
  }, /*#__PURE__*/React.createElement(Tooltip, {
    dataHook: facesData[faceIndex].tooltipDataHook,
    content: tooltipContent,
    disabled: !showDescriptionValues
  }, /*#__PURE__*/React.createElement(IconTagName, {
    width: 22,
    height: 22
  }))));
};

var FocusableInteractiveModeFace = withFocusable(InteractiveModeFace);

var ReadOnlyModeFace = function ReadOnlyModeFace(_ref3) {
  var faceIndex = _ref3.faceIndex,
      isSelected = _ref3.isSelected,
      iconType = _ref3.iconType;
  var IconTagName = faceIconsMap[faceIndex];
  return /*#__PURE__*/React.createElement("div", {
    "data-hook": dataHooks.face,
    "data-selected": isSelected,
    className: st(classes.faceContainer, {
      type: 'readOnly',
      selected: isSelected,
      iconType: iconType
    })
  }, /*#__PURE__*/React.createElement(IconTagName, null));
};

FacesRatingBar.displayName = 'FacesRatingBar';
FacesRatingBar.propTypes = {
  /** Applies a data-hook HTML attribute that can be used in the tests */
  dataHook: PropTypes.string,

  /** Allows you to apply a CSS class to the component’s root element */
  className: PropTypes.string,

  /** Specifies whether the rating bar is in read only mode */
  readOnly: PropTypes.bool,

  /** Specifies the rate value descriptions’ texts. The array must contain all 5 strings to display the descriptions labels. */
  descriptionValues: PropTypes.arrayOf(PropTypes.string),

  /** Specifies the selected rate. `0` indicates undefined rating. `readOnly` mode value cannot be `0`. */
  value: PropTypes.oneOf([0, 1, 2, 3, 4, 5]).isRequired,

  /** Defines a handler that is called whenever a rating changes.
   * ##### Signature:
   * function(rating: number) => void
   * * `rating`: 1 | 2 | 3 | 4 | 5
   */
  onChange: PropTypes.func
};
FacesRatingBar.defaultProps = {
  readOnly: false,
  onChange: function onChange() {}
};
export default FacesRatingBar;