@6thquake/react-material/StarVote/StarVote.js

React components that implement Google's Material Design.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

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

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

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

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

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

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

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

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

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

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

var _withStyles = _interopRequireDefault(require("../styles/withStyles"));

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

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

var _icons = require("@material-ui/icons");

var styles = {
  rmVote: {
    margin: '0',
    padding: '0',
    listStyle: 'none',
    fontSize: '24px',
    display: 'inline-block',
    verticalAlign: 'middle',
    fontWeight: '400',
    fontStyle: 'normal'
  },
  rmVoteStar: {
    color: '#f5a623',
    margin: '0',
    padding: '0',
    cursor: 'pointer',
    display: 'inline-block',
    position: 'relative',
    transition: 'all .3s ease',
    '&:hover': {
      transform: 'scale(1.1)'
    }
  },
  rmVoteDisabled: {
    '@global li': {
      '&:hover': {
        cursor: 'default',
        transform: 'scale(1)'
      }
    }
  },
  rmVoteStarFull: {},
  rmVoteStarZero: {},
  rmVoteStarHalf: {},
  rmVoteStarContent: {
    position: 'absolute',
    left: '0',
    top: '0',
    width: '50%',
    height: '100%',
    overflow: 'hidden'
  },
  xs: {
    fontSize: 12
  },
  sm: {
    fontSize: 16
  },
  md: {
    fontSize: 24
  },
  lg: {
    fontSize: 32
  }
};

var StarVote =
/*#__PURE__*/
function (_React$Component) {
  (0, _inherits2.default)(StarVote, _React$Component);

  function StarVote(props) {
    var _this;

    (0, _classCallCheck2.default)(this, StarVote);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(StarVote).call(this, props));

    _this.onMouseOver = function (key, e) {
      // li onMouseOver event
      e.nativeEvent.stopImmediatePropagation();
      e.stopPropagation();
      e.preventDefault();
      var tagArray = [];

      if (!_this.state.disabled) {
        for (var i = 0; i < _this.state.count; i++) {
          if (i <= key) {
            tagArray.push(1);
          } else {
            tagArray.push(0);
          }
        }
      }

      _this.setState({
        tagArrTemp: [].concat(tagArray)
      });
    };

    _this.onMouseOverContent = function (key, e) {
      //onMouseOver选一半
      e.preventDefault();
      e.nativeEvent.stopImmediatePropagation();
      e.stopPropagation();

      if (!_this.state.disabled) {
        var tagArray = [];

        if (!_this.state.disabled) {
          for (var i = 0; i < _this.state.count; i++) {
            if (i < key) {
              tagArray.push(1);
            } else if (i === key) {
              tagArray.push(0.5);
            } else {
              tagArray.push(0);
            }
          }
        }

        _this.setState({
          tagArrTemp: [].concat(tagArray)
        });
      }
    };

    _this.onClick = function (key, e) {
      e.preventDefault();
      e.nativeEvent.stopImmediatePropagation();
      e.stopPropagation();
      var tagArray = [];
      var tagArrayCopy = (0, _toConsumableArray2.default)(_this.state.tagArr);

      if (!_this.state.disabled) {
        for (var i = 0; i < _this.state.count; i++) {
          if (i < key) {
            tagArray.push(1);
          } else if (i === key) {
            if (_this.state.tagArr[key] === 1) {
              tagArray.push(0);
            } else {
              tagArray.push(1);
            }
          } else {
            tagArray.push(0);
          }
        }

        _this.setState({
          tagArr: [].concat(tagArray)
        });

        _this.props.onChange(key);
      }
    };

    _this.onMouseOut = function (key, e) {
      //onMouseOut 清除
      e.nativeEvent.stopImmediatePropagation();
      e.stopPropagation();

      if (!_this.state.disabled) {
        _this.setState({
          tagArrTemp: []
        });
      }
    };

    _this.onMouseOutContent = function (key, e) {
      e.nativeEvent.stopImmediatePropagation();
      e.stopPropagation();

      _this.setState({
        tagArrTemp: []
      });
    };

    _this.onClickContent = function (key, e) {
      //
      e.preventDefault();
      e.nativeEvent.stopImmediatePropagation();
      e.stopPropagation();
      var tagArray = [];

      if (!_this.state.disabled) {
        for (var i = 0; i < _this.state.count; i++) {
          if (i < key) {
            tagArray.push(1);
          } else if (i === key) {
            if (_this.state.tagArr[key] === 0.5) {
              tagArray.push(0);
            } else {
              tagArray.push(0.5);
            }
          } else {
            tagArray.push(0);
          }
        }

        _this.setState({
          tagArr: [].concat(tagArray)
        });

        _this.state.onChange(key);
      }
    };

    _this.state = {
      count: props.count,
      value: props.value,
      defaultValue: props.defaultValue,
      onChange: props.onChange,
      allowHalf: props.allowHalf,
      disabled: props.disabled,
      tagArr: [],
      tagArrTemp: []
    };

    try {
      if (Boolean(_this.state.allowHalf)) {
        //允许半选
        _this.state.allowHalf = true;
      } else {
        _this.state.allowHalf = false; //默认不允许半选
      }

      if (Boolean(_this.state.disabled)) {
        _this.state.disabled = true; // 只读，无法进行交互
      } else {
        _this.state.disabled = false; // 默认为false 可以进行点击、取消等交互事件
      }

      if (!_this.state.count) {
        _this.state.count = 5; // 未提供总数 默认 为 5
      } else if (!parseInt(_this.state.count)) {
        throw new Error('the attribute count must be integer type!');
      } else {
        _this.state.count = _this.state.count > 10 ? 10 : Math.abs(_this.state.count);
      }

      if (_this.state.value) {
        //存在当前数
        if (!_this.state.allowHalf) {
          // 不允许半选，count 、 value等验证必须为整数 且受控值 value 必须小于 cout
          if (!parseInt(_this.state.value)) {
            throw new Error('not integer type of the attribute value!');
          } else if (_this.state.value > _this.state.count) {
            throw new Error('attribute value must less than the attribute count');
          } else {
            _this.state.value = Math.abs(_this.props.value);
          }
        } else {
          // 如果允许半选，存在当前数的情况 需要验证当前数是否是数值 必须是 0.5的倍数 且小于 count
          if (Math.sign(_this.state.value) != 'NaN') {
            if (!parseInt(Math.abs(_this.state.value) / 0.5)) {
              throw new Error('attribute value must be an integer or multiple of 0.5!');
            } else {
              _this.state.value = Math.abs(_this.state.value);
            }
          }
        }
      }

      if (_this.state.defaultValue) {
        //存在defaultValue
        if (!_this.state.allowHalf) {
          // 不允许半选，defaultValue等验证必须为整数 且受控值 value 必须小于 cout
          if (!parseInt(_this.state.defaultValue)) {
            throw new Error('not integer type of the attribute value!');
          } else if (_this.state.defaultValue > _this.state.count) {
            throw new Error('attribute value must less than the attribute count');
          } else {
            _this.state.defaultValue = Math.abs(_this.props.defaultValue);
          }
        } else {
          // 如果允许半选，存在defaultValue的情况 需要验证 defaultValue 是否是数值 必须是 0.5的倍数 且小于 count
          if (Math.sign(_this.state.defaultValue) != 'NaN') {
            if (!parseInt(Math.abs(_this.state.defaultValue) / 0.5)) {
              throw new Error('attribute value must be an integer or multiple of 0.5!');
            } else {
              _this.state.defaultValue = Math.abs(_this.state.defaultValue);
            }
          }
        }
      } else {
        _this.state.defaultValue = 0;
      }
    } catch (err) {
      console.log(err);
    }

    return _this;
  }

  (0, _createClass2.default)(StarVote, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var tagArray = [];

      if (this.state.value) {
        // 如果存在当前数 按照当前数去渲染
        for (var i = 0; i < this.state.count; i++) {
          if (this.state.value.toString().includes('.5')) {
            //当前数为半数
            if (Math.floor(this.state.value) === i) {
              tagArray.push(0.5);
            } else if (Math.floor(this.state.value) > i) {
              tagArray.push(1);
            } else {
              tagArray.push(0);
            }
          } else {
            //当前数为整数
            if (i < this.state.value) {
              tagArray.push(1);
            } else {
              //包括大于等于
              tagArray.push(0);
            }
          }
        }
      } else if (this.state.defaultValue) {
        // 不存在当前数 按照defaultValue 处理
        for (var i = 0; i < this.state.count; i++) {
          if (this.state.value.toString().includes('.5')) {
            //当前数为半数
            if (Math.floor(this.state.defaultValue) === i) {
              tagArray.push(0.5);
            } else if (Math.floor(this.state.defaultValue) > i) {
              tagArray.push(1);
            } else {
              tagArray.push(0);
            }
          } else {
            //当前数为整数
            if (i < this.state.defaultValue) {
              tagArray.push(1);
            } else {
              //包括大于等于
              tagArray.push(0);
            }
          }
        }
      }

      this.setState({
        tagArr: [].concat(tagArray)
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props = this.props,
          classes = _this$props.classes,
          size = _this$props.size,
          spacing = _this$props.spacing,
          other = (0, _objectWithoutProperties2.default)(_this$props, ["classes", "size", "spacing"]);
      var tagArray = [];

      if (this.state.tagArrTemp.length != 0) {
        tagArray = (0, _toConsumableArray2.default)(this.state.tagArrTemp);
      } else {
        tagArray = (0, _toConsumableArray2.default)(this.state.tagArr);
      }

      var fontSize = '';

      switch (size) {
        case 'xs':
        case 'sm':
        case 'md':
        case 'lg':
          fontSize = 'inherit';
          break;

        case 'small':
          fontSize = 'small';
          break;

        case 'large':
          fontSize = 'large';
          break;

        case 'medium':
        default:
          fontSize = 'default';
          break;
      }

      var listItems = tagArray.map(function (tag, index) {
        if (_this2.state.allowHalf) {
          // 允许半选
          if (tag === 1) {
            var _classNames;

            return _react.default.createElement("li", {
              key: index,
              onMouseOver: function onMouseOver(e) {
                return _this2.onMouseOver(index, e);
              },
              onMouseOut: function onMouseOut(e) {
                return _this2.onMouseOut(index, e);
              },
              onClick: function onClick(e) {
                return _this2.onClick(index, e);
              },
              className: (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.rmVoteStar, true), (0, _defineProperty2.default)(_classNames, classes.rmVoteStarFull, true), (0, _defineProperty2.default)(_classNames, classes.xs, size === 'xs'), (0, _defineProperty2.default)(_classNames, classes.sm, size === 'sm'), (0, _defineProperty2.default)(_classNames, classes.md, size === 'md'), (0, _defineProperty2.default)(_classNames, classes.lg, size === 'lg'), _classNames)),
              style: {
                margin: "0px ".concat(spacing, "px")
              }
            }, _react.default.createElement(_icons.Star, {
              fontSize: fontSize
            }), _react.default.createElement("div", {
              onMouseOver: function onMouseOver(e) {
                return _this2.onMouseOverContent(index, e);
              },
              onMouseOut: function onMouseOut(e) {
                return _this2.onMouseOutContent(index, e);
              },
              onClick: function onClick(e) {
                return _this2.onClickContent(index, e);
              },
              className: classes.rmVoteStarContent
            }));
          } else if (tag === 0.5) {
            var _classNames2;

            return _react.default.createElement("li", {
              key: index,
              onMouseOver: function onMouseOver(e) {
                return _this2.onMouseOver(index, e);
              },
              onMouseOut: function onMouseOut(e) {
                return _this2.onMouseOut(index, e);
              },
              onClick: function onClick(e) {
                return _this2.onClick(index, e);
              },
              className: (0, _classnames.default)((_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, classes.rmVoteStar, true), (0, _defineProperty2.default)(_classNames2, classes.rmVoteStarHalf, true), (0, _defineProperty2.default)(_classNames2, classes.xs, size === 'xs'), (0, _defineProperty2.default)(_classNames2, classes.sm, size === 'sm'), (0, _defineProperty2.default)(_classNames2, classes.md, size === 'md'), (0, _defineProperty2.default)(_classNames2, classes.lg, size === 'lg'), _classNames2)),
              style: {
                margin: "0px ".concat(spacing, "px")
              }
            }, _react.default.createElement(_icons.StarHalf, {
              fontSize: fontSize
            }), _react.default.createElement("div", {
              onMouseOver: function onMouseOver(e) {
                return _this2.onMouseOverContent(index, e);
              },
              onMouseOut: function onMouseOut(e) {
                return _this2.onMouseOutContent(index, e);
              },
              onClick: function onClick(e) {
                return _this2.onClickContent(index, e);
              },
              className: classes.rmVoteStarContent
            }));
          } else {
            var _classNames3;

            return _react.default.createElement("li", {
              key: index,
              onMouseOver: function onMouseOver(e) {
                return _this2.onMouseOver(index, e);
              },
              onMouseOut: function onMouseOut(e) {
                return _this2.onMouseOut(index, e);
              },
              onClick: function onClick(e) {
                return _this2.onClick(index, e);
              },
              className: (0, _classnames.default)((_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, classes.rmVoteStar, true), (0, _defineProperty2.default)(_classNames3, classes.rmVoteStarZero, true), (0, _defineProperty2.default)(_classNames3, classes.xs, size === 'xs'), (0, _defineProperty2.default)(_classNames3, classes.sm, size === 'sm'), (0, _defineProperty2.default)(_classNames3, classes.md, size === 'md'), (0, _defineProperty2.default)(_classNames3, classes.lg, size === 'lg'), _classNames3)),
              style: {
                margin: "0px ".concat(spacing, "px")
              }
            }, _react.default.createElement(_icons.StarBorder, {
              fontSize: fontSize
            }), _react.default.createElement("div", {
              onMouseOver: function onMouseOver(e) {
                return _this2.onMouseOverContent(index, e);
              },
              onMouseOut: function onMouseOut(e) {
                return _this2.onMouseOutContent(index, e);
              },
              onClick: function onClick(e) {
                return _this2.onClickContent(index, e);
              },
              className: classes.rmVoteStarContent
            }));
          }
        } else {
          if (tag === 1) {
            var _classNames4;

            return _react.default.createElement("li", {
              key: index,
              onMouseOver: function onMouseOver(e) {
                return _this2.onMouseOver(index, e);
              },
              onMouseOut: function onMouseOut(e) {
                return _this2.onMouseOut(index, e);
              },
              onClick: function onClick(e) {
                return _this2.onClick(index, e);
              },
              className: (0, _classnames.default)((_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, classes.rmVoteStar, true), (0, _defineProperty2.default)(_classNames4, classes.rmVoteStarFull, true), (0, _defineProperty2.default)(_classNames4, classes.xs, size === 'xs'), (0, _defineProperty2.default)(_classNames4, classes.sm, size === 'sm'), (0, _defineProperty2.default)(_classNames4, classes.md, size === 'md'), (0, _defineProperty2.default)(_classNames4, classes.lg, size === 'lg'), _classNames4)),
              style: {
                margin: "0px ".concat(spacing, "px")
              }
            }, _react.default.createElement(_icons.Star, {
              fontSize: fontSize
            }), _react.default.createElement("div", {
              className: classes.rmVoteStarContent
            }));
          } else if (tag === 0.5) {
            var _classNames5;

            return _react.default.createElement("li", {
              key: index,
              onMouseOver: function onMouseOver(e) {
                return _this2.onMouseOver(index, e);
              },
              onMouseOut: function onMouseOut(e) {
                return _this2.onMouseOut(index, e);
              },
              onClick: function onClick(e) {
                return _this2.onClick(index, e);
              },
              className: (0, _classnames.default)((_classNames5 = {}, (0, _defineProperty2.default)(_classNames5, classes.rmVoteStar, true), (0, _defineProperty2.default)(_classNames5, classes.rmVoteStarHalf, true), (0, _defineProperty2.default)(_classNames5, classes.xs, size === 'xs'), (0, _defineProperty2.default)(_classNames5, classes.sm, size === 'sm'), (0, _defineProperty2.default)(_classNames5, classes.md, size === 'md'), (0, _defineProperty2.default)(_classNames5, classes.lg, size === 'lg'), _classNames5)),
              style: {
                margin: "0px ".concat(spacing, "px")
              }
            }, _react.default.createElement(_icons.StarHalf, {
              fontSize: fontSize
            }), _react.default.createElement("div", {
              className: classes.rmVoteStarContent
            }));
          } else {
            var _classNames6;

            return _react.default.createElement("li", {
              key: index,
              onMouseOver: function onMouseOver(e) {
                return _this2.onMouseOver(index, e);
              },
              onMouseOut: function onMouseOut(e) {
                return _this2.onMouseOut(index, e);
              },
              onClick: function onClick(e) {
                return _this2.onClick(index, e);
              },
              className: (0, _classnames.default)((_classNames6 = {}, (0, _defineProperty2.default)(_classNames6, classes.rmVoteStar, true), (0, _defineProperty2.default)(_classNames6, classes.rmVoteStarZero, true), (0, _defineProperty2.default)(_classNames6, classes.xs, size === 'xs'), (0, _defineProperty2.default)(_classNames6, classes.sm, size === 'sm'), (0, _defineProperty2.default)(_classNames6, classes.md, size === 'md'), (0, _defineProperty2.default)(_classNames6, classes.lg, size === 'lg'), _classNames6)),
              style: {
                margin: "0px ".concat(spacing, "px")
              }
            }, _react.default.createElement(_icons.StarBorder, {
              fontSize: fontSize
            }), _react.default.createElement("div", {
              className: classes.rmVoteStarContent
            }));
          }
        }
      });

      if (this.state.disabled) {
        var _classNames7;

        return _react.default.createElement("ul", (0, _extends2.default)({
          className: (0, _classnames.default)((_classNames7 = {}, (0, _defineProperty2.default)(_classNames7, classes.rmVoteDisabled, true), (0, _defineProperty2.default)(_classNames7, classes.rmVote, true), _classNames7))
        }, other), listItems);
      } else {
        return _react.default.createElement("ul", (0, _extends2.default)({
          className: classes.rmVote
        }, other), listItems);
      }
    }
  }]);
  return StarVote;
}(_react.default.Component);

StarVote.propTypes = {
  /**
   * Whether the value is allowed to be a decimal
   */
  allowHalf: _propTypes.default.bool,

  /**
   * Total count of star
   */
  count: _propTypes.default.number,

  /**
   * The default value
   */
  defaultValue: _propTypes.default.number,

  /**
   * Read only, can not interact
   */
  disabled: _propTypes.default.bool,

  /**
   * Callback fired after value changed
   */
  onChange: _propTypes.default.func,

  /**
   * Size of each item.
   */
  size: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'small', 'medium', 'large']),

  /**
   * Spacing between items.
   */
  spacing: _propTypes.default.number,

  /**
   * Current value，controlled value
   */
  value: _propTypes.default.number
};
StarVote.defaultProps = {
  count: 5,
  defaultValue: 0,
  allowHalf: false,
  disabled: false,
  size: 'medium',
  spacing: 4
};

var _default = (0, _withStyles.default)(styles, {
  name: 'RMStarVote'
})(StarVote);

exports.default = _default;