@alifd/meet-react/lib/rating/rating.js

Fusion Mobile React UI System Component

"use strict";

exports.__esModule = true;
exports.default = void 0;
var _babelRuntimeJsxStyleTransform = require("@alifd/babel-runtime-jsx-style-transform");
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireWildcard(require("react"));
var _view = _interopRequireDefault(require("../view"));
var _form = _interopRequireDefault(require("../form"));
var _hooks = require("../utils/hooks");
var _utils = require("./utils");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
var Rating = function (props, ref) {
  var _classNames;
  var _props$prefix = props.prefix,
    prefix = _props$prefix === void 0 ? 'mt-' : _props$prefix,
    sizeProp = props.size,
    _props$disabled = props.disabled,
    disabled = _props$disabled === void 0 ? false : _props$disabled,
    _props$readOnly = props.readOnly,
    readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
    _props$count = props.count,
    count = _props$count === void 0 ? 5 : _props$count,
    _props$iconType = props.iconType,
    iconType = _props$iconType === void 0 ? 'favorites-filling' : _props$iconType,
    onChange = props.onChange,
    className = props.className,
    style = props.style,
    _props$allowHalf = props.allowHalf,
    allowHalf = _props$allowHalf === void 0 ? false : _props$allowHalf,
    propsItemRender = props.itemRender;
  var _useValue = (0, _hooks.useValue)(props, 0),
    value = _useValue[0],
    setValue = _useValue[1],
    isControlled = _useValue[2];
  var _useContext = (0, _react.useContext)(_form.default.ItemContext),
    contentAlign = _useContext.contentAlign,
    contextSize = _useContext.size;
  var size = sizeProp || contextSize;
  var id = (0, _hooks.useGuid)('rating-');
  var gradeType = value > count * 0.4 ? 'high' : 'low';
  var iconClassName = (0, _classnames.default)(prefix + "rating--" + size + "-icon", prefix + "rating-icon");
  var classnames = {
    rating: (0, _classnames.default)(prefix + "rating", prefix + "rating--" + size, prefix + "rating--" + contentAlign, prefix + "rating--grade-" + gradeType, (_classNames = {}, _classNames[prefix + "rating--readonly"] = readOnly, _classNames[prefix + "rating--disabled"] = disabled, _classNames), className),
    iconWrapper: (0, _classnames.default)(prefix + "rating--" + size + "-icon-wrapper", prefix + "rating-icon-wrapper"),
    icon: iconClassName,
    activeIcon: (0, _classnames.default)(iconClassName, prefix + "rating-icon--active", prefix + "rating-icon--active-" + gradeType)
  };
  var touchProps = (0, _utils.useTouchChangeEventProps)({
    id: id,
    disabled: disabled || readOnly,
    count: count,
    allowHalf: allowHalf,
    value: value,
    onChange: function handleChange(v) {
      if (disabled || readOnly || v < 0) {
        return;
      }
      if (!isControlled) {
        setValue(v);
      }
      if (onChange) {
        onChange(v);
      }
    }
  });
  var itemRender = propsItemRender || (0, _utils.getDefaultItemRender)({
    value: value,
    iconType: iconType,
    size: size,
    classnames: classnames
  });
  var stars = [];
  for (var i = 0; i < count; i++) {
    var _classNames2;
    var isActive = Math.floor(value - 1) >= i;
    var isHalfActive = value - i < 1 && value - i > 0;
    stars.push( /*#__PURE__*/(0, _react.createElement)(_view.default, {
      key: i,
      className: (0, _classnames.default)(classnames.iconWrapper, (_classNames2 = {}, _classNames2[classnames.iconWrapper + "--first"] = i === 0, _classNames2[classnames.iconWrapper + "--last"] = i === count - 1, _classNames2))
    }, itemRender({
      key: i,
      value: value,
      count: count,
      isActive: isActive,
      isHalfActive: isHalfActive
    })));
  }
  return /*#__PURE__*/(0, _react.createElement)(_view.default, _extends({
    ref: ref,
    className: classnames.rating,
    id: id,
    style: (0, _babelRuntimeJsxStyleTransform.rpx2vw4style)(style)
  }, touchProps), stars);
};
Rating.displayName = 'Rating';
var _default = exports.default = /*#__PURE__*/(0, _react.forwardRef)(Rating);