acud/lib/rate/rate.js

acg react 组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _configProvider = require("../config-provider");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable max-len */
/**
 * @file rate
 * @description 评分 星星现在是svg写文件里 打开了每行最大长度的限制
 * @author jc
*/

var Rate = function Rate(_ref) {
  var customizePrefixCls = _ref.prefixCls,
    _ref$allowClear = _ref.allowClear,
    allowClear = _ref$allowClear === void 0 ? true : _ref$allowClear,
    _ref$allowHalf = _ref.allowHalf,
    allowHalf = _ref$allowHalf === void 0 ? false : _ref$allowHalf,
    className = _ref.className,
    style = _ref.style,
    _ref$count = _ref.count,
    count = _ref$count === void 0 ? 5 : _ref$count,
    _ref$defaultValue = _ref.defaultValue,
    defaultValue = _ref$defaultValue === void 0 ? 0 : _ref$defaultValue,
    _ref$value = _ref.value,
    value = _ref$value === void 0 ? 0 : _ref$value,
    _ref$tooltips = _ref.tooltips,
    tooltips = _ref$tooltips === void 0 ? [] : _ref$tooltips,
    _ref$disabled = _ref.disabled,
    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
    _ref$tags = _ref.tags,
    tags = _ref$tags === void 0 ? [] : _ref$tags,
    onFocus = _ref.onFocus,
    onBlur = _ref.onBlur,
    onHoverChange = _ref.onHoverChange,
    onChange = _ref.onChange,
    renderCharacter = _ref.renderCharacter,
    onLabelChange = _ref.onLabelChange,
    renderTag = _ref.renderTag;
  var _useContext = (0, _react.useContext)(_configProvider.ConfigContext),
    getPrefixCls = _useContext.getPrefixCls;
  var prefixCls = getPrefixCls('rate', customizePrefixCls);
  var STAR_FIX = "".concat(prefixCls, "-star"); // ⭐容器
  var STAR_INNER_FIX = "".concat(STAR_FIX, "-inner"); // ⭐
  var STAR_FULL_FIX = "".concat(STAR_FIX, "-full"); // 高分⭐
  var STAR_LOW_FIX = "".concat(STAR_FIX, "-low"); // 低分⭐
  var STAR_NORMAL_FIX = "".concat(STAR_FIX, "-normal"); // 普通⭐
  var STAR_DISABLED = "".concat(STAR_FIX, "-disabled"); // 禁用的⭐
  var STAR_HALF_FIX = "".concat(STAR_FIX, "-half"); // 半⭐
  var LABEL_FIX = "".concat(prefixCls, "-label"); // 辅助文案
  var TAGS_FIX = "".concat(prefixCls, "-tags"); // 标签
  var TAGS_SELECT_FIX = "".concat(TAGS_FIX, "-select"); // 选中的标签
  var TAGS_DISABLED = "".concat(TAGS_FIX, "-disabled"); // 禁用的标签
  var _useState = (0, _react.useState)(-1),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    hoverValue = _useState2[0],
    updateHoverValue = _useState2[1];
  var _useState3 = (0, _react.useState)(allowHalf ? defaultValue : defaultValue - 1),
    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
    currValue = _useState4[0],
    updateCurrValue = _useState4[1];
  var _useState5 = (0, _react.useState)(false),
    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
    isHover = _useState6[0],
    updateIsHover = _useState6[1];
  var _useState7 = (0, _react.useState)([]),
    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
    selectTags = _useState8[0],
    updateSelectTags = _useState8[1];
  var list = (0, _react.useMemo)(function () {
    return new Array(count).fill('').map(function (_item, index) {
      return index;
    });
  }, [count]);
  (0, _react.useEffect)(function () {
    value && updateCurrValue(allowHalf && value % 1 ? value : value - 1);
  }, [value]);
  // 获取焦点
  var handleFocus = (0, _react.useCallback)(function () {
    onFocus && onFocus();
  }, []);
  // 鼠标移出
  var handleBlur = (0, _react.useCallback)(function () {
    updateHoverValue(-1);
    updateIsHover(false);
    onBlur && onBlur();
  }, []);
  // 鼠标经过
  var handleHoverChange = (0, _react.useCallback)(function (value, isHalf) {
    if (disabled) {
      return;
    }
    var _value = isHalf ? value + 0.5 : value;
    updateHoverValue(_value);
    updateIsHover(true);
    onHoverChange && onHoverChange(isHalf ? _value : _value + 1);
  }, [disabled]);
  // 点击值变更
  var handleChange = (0, _react.useCallback)(function (value, isHalf) {
    if (disabled) {
      return;
    }
    // 点击时的值和当前值进行判断
    // 判断的目的是 如果设置了allowClear 就设置value为-1进行清空
    var clickValue = isHalf ? value + 0.5 : value;
    var _value = allowClear && clickValue === currValue ? -1 : clickValue;
    // 内部的计算从0开始
    // eg: 半颗星星返回0.5 1颗星星返回0 ...
    // 暂时先在CB函数里 + 1 如果要改currvalue会有不小改动
    // 同样在handleHoverChange做了相同的处理
    updateCurrValue(_value);
    onChange && onChange(isHalf ? _value : _value + 1);
  }, [currValue, disabled]);
  // star class
  var getCurrClassName = (0, _react.useCallback)(function (value) {
    var halfValue = count / 2;
    var getActiveClass = function getActiveClass(_value) {
      var classname = '';
      _value <= halfValue ? classname = " ".concat(value <= _value ? STAR_LOW_FIX : STAR_NORMAL_FIX) : classname = " ".concat(value <= _value ? STAR_FULL_FIX : STAR_NORMAL_FIX);
      return classname;
    };
    // hover样式
    if (isHover && hoverValue !== -1) {
      return "".concat(STAR_FIX).concat(getActiveClass(hoverValue));
    }
    // 点击样式
    if (currValue !== -1) {
      return "".concat(STAR_FIX).concat(getActiveClass(currValue));
    }
    // 默认样式
    return STAR_FIX;
  }, [currValue, hoverValue, isHover, count]);
  // 点击选择标签
  var handleSelectTag = (0, _react.useCallback)(function (item, index) {
    if (disabled) {
      return;
    }
    var newLabels = (0, _toConsumableArray2["default"])(selectTags);
    var currLabel = selectTags.find(function (_ref2) {
      var key = _ref2.key;
      return key === index;
    });
    // 如果已经存在，取消选中
    if (currLabel) {
      newLabels = newLabels.filter(function (_ref3) {
        var key = _ref3.key;
        return key !== index;
      });
      updateSelectTags(newLabels);
    }
    // 如果不存在，插入
    else {
      newLabels.push({
        key: index,
        text: item
      });
      updateSelectTags(newLabels);
    }
    onLabelChange && onLabelChange(item, newLabels.map(function (item) {
      return item === null || item === void 0 ? void 0 : item.text;
    }));
  }, [selectTags]);
  // label class
  var getLabelClass = (0, _react.useCallback)(function (index) {
    var baseClass = "".concat(TAGS_FIX, "-item");
    var isSelect = selectTags.find(function (_ref4) {
      var key = _ref4.key;
      return key === index;
    });
    return (0, _classnames["default"])(baseClass, isSelect ? TAGS_SELECT_FIX : '');
  }, [tags, selectTags]);
  // 渲染⭐
  var renderStar = (0, _react.useCallback)(function (value, index) {
    var isCurrentHalf = allowHalf && !isHover && currValue - value > 0 && currValue - value < 1; // 是否半⭐
    var isHoverHalf = allowHalf && hoverValue - value > 0 && hoverValue - value < 1; // 是否半⭐
    var isHalf = isCurrentHalf || isHoverHalf;
    var IconLeft = /*#__PURE__*/_react["default"].createElement("svg", {
      className: "".concat(STAR_INNER_FIX, "-left-svg"),
      viewBox: "0 0 16 16",
      focusable: "false",
      "data-icon": "star",
      fill: "currentColor",
      "aria-hidden": "true"
    }, /*#__PURE__*/_react["default"].createElement("path", {
      d: "M7.69013023,2.45403461 C7.790097,2.4047144 7.89613451,2.3814534 8.00053121,2.38163544 L7.99961383,11.7516344 L7.999,11.751 L5.23767823,13.2028077 C5.10138222,13.2744675 4.94526032,13.2991856 4.793494,13.2731336 C4.4124677,13.2077272 4.15660721,12.845822 4.22201361,12.4647957 L4.22201361,12.4647957 L4.75,9.389 L2.516094,7.21145716 C2.40579775,7.10394377 2.33404155,6.96305337 2.31194523,6.81061931 C2.25648476,6.42801877 2.52168419,6.07290015 2.90428473,6.01743969 L2.90428473,6.01743969 L5.991,5.57 L7.37214898,2.77195304 C7.4402962,2.6338947 7.55205843,2.52215456 7.69013023,2.45403461 Z"
    }));
    var IconRight = /*#__PURE__*/_react["default"].createElement("svg", {
      className: "".concat(STAR_INNER_FIX, "-right-svg"),
      viewBox: "0 0 16 16",
      focusable: "false",
      "data-icon": "star",
      fill: "currentColor",
      "aria-hidden": "true"
    }, /*#__PURE__*/_react["default"].createElement("path", {
      d: "M7.99986281,2.38163459 C8.25776985,2.38183708 8.50576461,2.52513046 8.62759969,2.77207707 L8.62759969,2.77207707 L10.008,5.57 L13.0948664,6.01814893 C13.2472813,6.04027642 13.3881443,6.11205203 13.4956302,6.2223549 C13.7654388,6.49923458 13.7597066,6.94241299 13.4828269,7.21222159 L13.4828269,7.21222159 L11.249,9.389 L11.7770174,12.4649763 C11.8030652,12.6167184 11.7783592,12.7728154 11.7067249,12.909097 C11.5268502,13.2513019 11.1036211,13.3828964 10.7614163,13.2030217 L10.7614163,13.2030217 L7.999,11.751 Z"
    }));
    var CustomIcon = renderCharacter && renderCharacter(index);
    if (CustomIcon) {
      IconLeft = /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(STAR_INNER_FIX, "-left-svg")
      }, CustomIcon);
      IconRight = /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(STAR_INNER_FIX, "-right-svg")
      }, CustomIcon);
    }
    return /*#__PURE__*/_react["default"].createElement("div", {
      key: value,
      className: "".concat(getCurrClassName(value), " ").concat(disabled ? STAR_DISABLED : '')
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "".concat(STAR_INNER_FIX, " ").concat(isHalf ? STAR_HALF_FIX : '')
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "".concat(STAR_INNER_FIX, "-left"),
      onMouseOver: function onMouseOver() {
        return handleHoverChange(value, allowHalf);
      },
      onClick: function onClick() {
        return handleChange(value, allowHalf);
      }
    }, IconLeft), /*#__PURE__*/_react["default"].createElement("div", {
      onMouseOver: function onMouseOver() {
        return handleHoverChange(value, false);
      },
      onClick: function onClick() {
        return handleChange(value, false);
      },
      className: "".concat(STAR_INNER_FIX, "-right")
    }, IconRight)));
  }, [currValue, hoverValue, isHover, disabled, allowHalf]);
  // 渲染辅助文案
  var renderLabel = (0, _react.useCallback)(function () {
    var hoverLabel = tooltips[hoverValue | 0];
    var currLabel = tooltips[currValue | 0];
    var label = isHover ? hoverLabel : currLabel;
    return /*#__PURE__*/_react["default"].createElement("span", {
      className: LABEL_FIX
    }, label);
  }, [hoverValue, currValue, isHover]);
  // 渲染标签
  var renderTags = (0, _react.useCallback)(function () {
    if (!tags || tags.length === 0) {
      return;
    }
    return /*#__PURE__*/_react["default"].createElement("div", {
      className: TAGS_FIX
    }, tags.map(function (item, index) {
      return /*#__PURE__*/_react["default"].createElement("div", {
        key: index,
        className: (0, _classnames["default"])(getLabelClass(index), disabled ? TAGS_DISABLED : ''),
        onClick: function onClick() {
          return handleSelectTag(item, index);
        }
      }, renderTag ? renderTag(item, index) : item);
    }));
  }, [tags, selectTags, disabled]);
  return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _classnames["default"])(className, prefixCls),
    style: style,
    onMouseEnter: function onMouseEnter() {
      return handleFocus();
    },
    onMouseLeave: function onMouseLeave() {
      return handleBlur();
    }
  }, list.map(function (value, index) {
    return renderStar(value, index);
  }), renderLabel()), renderTags());
};
var _default = exports["default"] = Rate;