fix: allow more props passed to Rate (#152)

* fix: allow more props passed to Rate

* chore: fix lint

* chore: remove findDOMNode

* chore: fix eslint warning

Author: afc163

.eslintrc.js

@@ -1,21 +1,14 @@
-const base = require("@umijs/fabric/dist/eslint");
-
 module.exports = {
-  ...base,
+  extends: [require.resolve('@umijs/fabric/dist/eslint')],
   rules: {
-    ...base.rules,
-    "arrow-parens": 0,
-    "react/no-array-index-key": 0,
-    "react/sort-comp": 0,
-    "@typescript-eslint/no-explicit-any": 0,
-    "@typescript-eslint/no-empty-interface": 0,
-    "@typescript-eslint/no-inferrable-types": 0,
-    "react/no-find-dom-node": 0,
-    "react/require-default-props": 0,
-    "no-confusing-arrow": 0,
-    "import/no-named-as-default-member": 0,
-    "jsx-a11y/label-has-for": 0,
-    "jsx-a11y/label-has-associated-control": 0,
-    "import/no-extraneous-dependencies": 0,
+    'jsx-a11y/no-autofocus': 0,
   },
+  overrides: [
+    {
+      files: ['docs/**/*.tsx'],
+      rules: {
+        'no-console': 0,
+      },
+    },
+  ],
 };

package.json

@@ -50,7 +50,7 @@
     "@types/jest": "^29.5.1",
     "@types/react": "^17.0.15",
     "@types/react-dom": "^17.0.9",
-    "@umijs/fabric": "^2.0.0",
+    "@umijs/fabric": "^3.0.0",
     "cross-env": "^7.0.0",
     "dumi": "^2.1.2",
     "enzyme": "^3.1.1",

src/Rate.tsx

@@ -1,10 +1,8 @@
-import findDOMNode from 'rc-util/lib/Dom/findDOMNode';
+import classNames from 'classnames';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import KeyCode from 'rc-util/lib/KeyCode';
 import pickAttrs from 'rc-util/lib/pickAttrs';
 import React from 'react';
-import classNames from 'classnames';
-
 import type { StarProps } from './Star';
 import Star from './Star';
 import useRefs from './useRefs';
@@ -41,8 +39,6 @@ function Rate(props: RateProps, ref: React.Ref<RateRef>) {
     // Base
     prefixCls = 'rc-rate',
     className,
-    style,
-    id,
 
     // Value
     defaultValue,
@@ -67,7 +63,6 @@ function Rate(props: RateProps, ref: React.Ref<RateRef>) {
     onFocus,
     onBlur,
     onKeyDown,
-    onMouseEnter,
     onMouseLeave,
 
     ...restProps
@@ -102,7 +97,7 @@ function Rate(props: RateProps, ref: React.Ref<RateRef>) {
     const reverse = direction === 'rtl';
     let starValue = index + 1;
     if (allowHalf) {
-      const starEle = findDOMNode<HTMLElement>(getStarRef(index));
+      const starEle = getStarRef(index);
       const leftDis = getOffsetLeft(starEle);
       const width = starEle.clientWidth;
       if (reverse && x - leftDis > width / 2) {
@@ -219,8 +214,9 @@ function Rate(props: RateProps, ref: React.Ref<RateRef>) {
 
   // =========================== Render ===========================
   // >>> Star
-  const starNodes = new Array(count).fill(0).map((_, index) => {
-    return (
+  const starNodes = new Array(count)
+    .fill(0)
+    .map((item, index) => (
       <Star
         ref={setStarRef(index)}
         index={index}
@@ -231,32 +227,30 @@ function Rate(props: RateProps, ref: React.Ref<RateRef>) {
         value={hoverValue === null ? value : hoverValue}
         onClick={onClick}
         onHover={onHover}
-        key={index}
+        key={item || index}
         character={character}
         characterRender={characterRender}
         focused={focused}
       />
-    );
+    ));
+
+  const classString = classNames(prefixCls, className, {
+    [`${prefixCls}-disabled`]: disabled,
+    [`${prefixCls}-rtl`]: direction === 'rtl',
   });
 
   // >>> Node
   return (
     <ul
-      className={classNames(prefixCls, className, {
-        [`${prefixCls}-disabled`]: disabled,
-        [`${prefixCls}-rtl`]: direction === 'rtl',
-      })}
-      style={style}
-      id={id}
-      onMouseEnter={onMouseEnter}
+      className={classString}
       onMouseLeave={onMouseLeaveCallback}
       tabIndex={disabled ? -1 : tabIndex}
       onFocus={disabled ? null : onInternalFocus}
       onBlur={disabled ? null : onInternalBlur}
       onKeyDown={disabled ? null : onInternalKeyDown}
       ref={rateRef}
       role="radiogroup"
-      {...pickAttrs(restProps, { aria: true, data: true })}
+      {...pickAttrs(restProps, { aria: true, data: true, attr: true })}
     >
       {starNodes}
     </ul>