@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
192 lines (191 loc) • 8.24 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Rate", {
enumerable: true,
get: function() {
return Rate;
}
});
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
var _define_property = require("@swc/helpers/_/_define_property");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
var _iconsreact = require("@nutui/icons-react");
var _typings = require("../../utils/typings");
var _usepropsvalue = require("../../hooks/use-props-value");
var _getrect = require("../../utils/get-rect");
var _userefs = require("../../hooks/use-refs");
var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
size: 'normal',
showScore: false,
count: 5,
min: 0,
checkedIcon: null,
uncheckedIcon: null,
disabled: false,
readOnly: false,
allowHalf: false,
touchable: false
});
var Rate = function Rate(props) {
var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), className = _$_object_spread.className, style = _$_object_spread.style, size = _$_object_spread.size, showScore = _$_object_spread.showScore, count = _$_object_spread.count, value = _$_object_spread.value, defaultValue = _$_object_spread.defaultValue, min = _$_object_spread.min, checkedIcon = _$_object_spread.checkedIcon, uncheckedIcon = _$_object_spread.uncheckedIcon, disabled = _$_object_spread.disabled, readOnly = _$_object_spread.readOnly, allowHalf = _$_object_spread.allowHalf, touchable = _$_object_spread.touchable, onChange = _$_object_spread.onChange, onTouchEnd = _$_object_spread.onTouchEnd;
var classPrefix = 'nut-rate';
var _useState = (0, _sliced_to_array._)((0, _react.useState)([
1,
2,
3,
4,
5
]), 2), countArray = _useState[0], setCountArray = _useState[1];
var _useRefs = (0, _sliced_to_array._)((0, _userefs.useRefs)(), 2), refs = _useRefs[0], setRefs = _useRefs[1];
var rateRects = (0, _react.useRef)([]);
var _usePropsValue = (0, _sliced_to_array._)((0, _usepropsvalue.usePropsValue)({
value: value,
defaultValue: Math.max(defaultValue || 0, min),
finalValue: 0,
onChange: onChange
}), 2), score = _usePropsValue[0], setScore = _usePropsValue[1];
(0, _react.useEffect)(function() {
var tmp = [];
for(var i = 1; i <= Number(count); i++){
tmp.push(i);
}
setCountArray(tmp);
}, [
count
]);
var renderIcon = function renderIcon(n) {
return n <= score ? checkedIcon || /*#__PURE__*/ _react.default.createElement(_iconsreact.StarFill, null) : uncheckedIcon || (checkedIcon ? /*#__PURE__*/ _react.default.cloneElement(checkedIcon, {
color: undefined
}) : /*#__PURE__*/ _react.default.createElement(_iconsreact.StarFill, null));
};
var onClick = function onClick(e, index) {
e.preventDefault();
e.stopPropagation();
if (disabled || readOnly) return;
var value = 0;
if (!(index === 1 && score === index)) {
value = index;
}
value = Math.max(value, min);
setScore(value);
};
var onHalfClick = function onHalfClick(event, n) {
event.preventDefault();
event.stopPropagation();
var value = Math.max(min, n - 0.5);
setScore(value);
};
var getScoreByPosition = function getScoreByPosition(x) {
var _rateRects_current;
if ((_rateRects_current = rateRects.current) === null || _rateRects_current === void 0 ? void 0 : _rateRects_current.length) {
for(var index = rateRects.current.length - 1; index >= 0; index--){
var item = rateRects.current[index];
if (item && x > item.left) {
return allowHalf ? index + (x > item.left + item.width / 2 ? 1 : 0.5) : index + 1;
}
}
return 0;
}
};
var updateRects = function updateRects() {
for(var index = 0; index < refs.length; index++){
var item = refs[index];
if (item) {
rateRects.current[index] = (0, _getrect.getRect)(item);
}
}
};
var handleTouchStart = function handleTouchStart(e) {
if (!touchable || readOnly || disabled) {
return;
}
if (e.cancelable) {
e.preventDefault();
}
e.stopPropagation();
updateRects();
};
var handleTouchMove = function handleTouchMove(e) {
if (!touchable || readOnly || disabled) {
return;
}
if (e.cancelable) {
e.preventDefault();
}
e.stopPropagation();
var val = getScoreByPosition(e.touches[0].clientX);
if (val !== undefined) {
setScore(Math.max(min, val));
}
};
var handleTouchEnd = function handleTouchEnd(e) {
if (!touchable || readOnly || disabled) {
return;
}
if (e.cancelable) {
e.preventDefault();
}
e.stopPropagation();
var val = getScoreByPosition(e.changedTouches[0].clientX);
if (val !== undefined) {
setScore(Math.max(min, val));
onTouchEnd && onTouchEnd(e, Math.max(min, val));
}
};
var rateRef = (0, _react.useRef)(null);
(0, _react.useEffect)(function() {
var element = rateRef.current;
if (element) {
element.addEventListener('touchstart', handleTouchStart, {
passive: false
});
element.addEventListener('touchmove', handleTouchMove, {
passive: false
});
element.addEventListener('touchend', handleTouchEnd, {
passive: false
});
}
return function() {
if (element) {
element.removeEventListener('touchstart', handleTouchStart);
element.removeEventListener('touchmove', handleTouchMove);
element.removeEventListener('touchend', handleTouchEnd);
}
};
}, []);
return /*#__PURE__*/ _react.default.createElement("div", {
className: (0, _classnames.default)(classPrefix, {
disabled: disabled,
readonly: readOnly
}, className),
ref: rateRef,
style: style
}, countArray.map(function(n, index) {
return /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-item ").concat(classPrefix, "-item-").concat(size),
key: n,
ref: setRefs(index),
onClick: function onClick1(event) {
return onClick(event, n);
}
}, /*#__PURE__*/ _react.default.createElement("div", {
className: (0, _classnames.default)("".concat(classPrefix, "-item-icon"), (0, _define_property._)({}, "".concat(classPrefix, "-item-icon-disabled"), disabled || n > score))
}, renderIcon(n)), allowHalf && score > n - 1 && /*#__PURE__*/ _react.default.createElement("div", {
className: (0, _classnames.default)("".concat(classPrefix, "-item-half"), "".concat(classPrefix, "-item-icon"), "".concat(classPrefix, "-item-icon-half")),
onClick: function onClick(event) {
return onHalfClick(event, n);
}
}, renderIcon(n)));
}), showScore ? /*#__PURE__*/ _react.default.createElement("span", {
className: (0, _classnames.default)("".concat(classPrefix, "-score"), "".concat(classPrefix, "-score-").concat(size), (0, _define_property._)({}, "".concat(classPrefix, "-score-disabled"), disabled))
}, score.toFixed(1)) : null);
};
Rate.displayName = 'NutRate';