chore(deps-dev): bump @types/react from 17.0.62 to 18.2.15 (#962)

* chore(deps-dev): bump @types/react from 17.0.62 to 18.2.15

* fix: fix

* add test case

docs/examples/components/TooltipSlider.tsx

@@ -1,19 +1,22 @@
-import * as React from 'react';
-import 'rc-tooltip/assets/bootstrap.css';
-import Slider from 'rc-slider';
 import type { SliderProps } from 'rc-slider';
-import raf from 'rc-util/lib/raf';
+import Slider from 'rc-slider';
+import type { TooltipRef } from 'rc-tooltip';
 import Tooltip from 'rc-tooltip';
+import 'rc-tooltip/assets/bootstrap.css';
+import raf from 'rc-util/lib/raf';
+import * as React from 'react';
 
-const HandleTooltip = (props: {
+interface HandleTooltipProps {
   value: number;
   children: React.ReactElement;
   visible: boolean;
   tipFormatter?: (value: number) => React.ReactNode;
-}) => {
+}
+
+const HandleTooltip: React.FC<HandleTooltipProps> = (props) => {
   const { value, children, visible, tipFormatter = (val) => `${val} %`, ...restProps } = props;
 
-  const tooltipRef = React.useRef<any>();
+  const tooltipRef = React.useRef<TooltipRef>();
   const rafRef = React.useRef<number | null>(null);
 
   function cancelKeepAlign() {
@@ -50,31 +53,28 @@ const HandleTooltip = (props: {
   );
 };
 
-export const handleRender: SliderProps['handleRender'] = (node, props) => {
-  return (
-    <HandleTooltip value={props.value} visible={props.dragging}>
+export const handleRender: SliderProps['handleRender'] = (node, props) => (
+  <HandleTooltip value={props.value} visible={props.dragging}>
+    {node}
+  </HandleTooltip>
+);
+
+interface TooltipSliderProps extends SliderProps {
+  tipFormatter?: (value: number) => React.ReactNode;
+  tipProps?: any;
+}
+
+const TooltipSlider: React.FC<TooltipSliderProps> = ({ tipFormatter, tipProps, ...props }) => {
+  const tipHandleRender: SliderProps['handleRender'] = (node, handleProps) => (
+    <HandleTooltip
+      value={handleProps.value}
+      visible={handleProps.dragging}
+      tipFormatter={tipFormatter}
+      {...tipProps}
+    >
       {node}
     </HandleTooltip>
   );
-};
-
-const TooltipSlider = ({
-  tipFormatter,
-  tipProps,
-  ...props
-}: SliderProps & { tipFormatter?: (value: number) => React.ReactNode; tipProps: any }) => {
-  const tipHandleRender: SliderProps['handleRender'] = (node, handleProps) => {
-    return (
-      <HandleTooltip
-        value={handleProps.value}
-        visible={handleProps.dragging}
-        tipFormatter={tipFormatter}
-        {...tipProps}
-      >
-        {node}
-      </HandleTooltip>
-    );
-  };
 
   return <Slider {...props} handleRender={tipHandleRender} />;
 };

docs/examples/debug.tsx

@@ -1,21 +1,15 @@
-import React from 'react';
 import Slider from 'rc-slider';
+import React from 'react';
 import '../../assets/index.less';
 
 export default () => {
   const [disabled, setDisabled] = React.useState(false);
   const [range, setRange] = React.useState(false);
   const [reverse, setReverse] = React.useState(false);
   const [vertical, setVertical] = React.useState(false);
-  const [value, setValue] = React.useState(30);
 
   return (
-    <div
-      style={{
-        transform: 'scale(1.5)',
-        transformOrigin: 'top left',
-      }}
-    >
+    <div style={{ transform: 'scale(1.5)', transformOrigin: 'top left' }}>
       <div>
         <label>
           <input type="checkbox" checked={disabled} onChange={() => setDisabled(!disabled)} />
@@ -37,26 +31,12 @@ export default () => {
 
       <div style={{ height: 300, width: 600 }}>
         <Slider
-          // count={2}
-          // disabled={disabled}
-          // reverse={reverse}
-          // vertical={vertical}
-          // range={range}
-          // defaultValue={[30, 50]}
-          // dots
-          // step={5}
-          // draggableTrack
-          // pushable={5}
-          // allowCross={false}
           onChange={(nextValues) => {
             console.log('Change:', nextValues);
-          //   setValue(nextValues as any);
           }}
           onChangeComplete={(v) => {
             console.log('AfterChange:', v);
           }}
-          // value={value}
-
           min={0}
           max={1}
           defaultValue={0.81}

docs/examples/handle.tsx

@@ -1,9 +1,12 @@
-import React from 'react';
 import Slider from 'rc-slider';
+import React from 'react';
 import '../../assets/index.less';
 import TooltipSlider, { handleRender } from './components/TooltipSlider';
 
-const wrapperStyle = { width: 400, margin: 50 };
+const wrapperStyle: React.CSSProperties = {
+  width: 400,
+  margin: 50,
+};
 
 export default () => (
   <div>

docs/examples/marks.tsx

@@ -1,8 +1,12 @@
-import React from 'react';
 import Slider from 'rc-slider';
+import React from 'react';
 import '../../assets/index.less';
 
-const style = { width: 400, margin: 50 };
+const style: React.CSSProperties = {
+  width: 400,
+  margin: 50,
+};
+
 const marks = {
   '-10': '-10°C',
   0: <strong>0°C</strong>,
@@ -25,7 +29,14 @@ export default () => (
   <div>
     <div style={style}>
       <p>Slider with marks, `step=null`</p>
-      <Slider min={-10} marks={marks} step={null} onChange={log} defaultValue={20} onChangeComplete={(v) => console.log('AfterChange:', v)} />
+      <Slider
+        min={-10}
+        marks={marks}
+        step={null}
+        onChange={log}
+        defaultValue={20}
+        onChangeComplete={(v) => console.log('AfterChange:', v)}
+      />
     </div>
 
     <div style={style}>

docs/examples/multiple.tsx

@@ -3,7 +3,10 @@ import Slider from 'rc-slider';
 import React from 'react';
 import '../../assets/index.less';
 
-const style = { width: 400, margin: 50 };
+const style: React.CSSProperties = {
+  width: 400,
+  margin: 50,
+};
 
 function log(value) {
   console.log(value);

docs/examples/range.tsx

@@ -1,9 +1,12 @@
 /* eslint react/no-multi-comp: 0, no-console: 0 */
-import React from 'react';
 import Slider from 'rc-slider';
+import React from 'react';
 import '../../assets/index.less';
 
-const style = { width: 400, margin: 50 };
+const style: React.CSSProperties = {
+  width: 400,
+  margin: 50,
+};
 
 function log(value) {
   console.log(value); //eslint-disable-line

docs/examples/slider.tsx

@@ -1,10 +1,13 @@
 /* eslint react/no-multi-comp: 0, max-len: 0 */
-import React from 'react';
 import Slider from 'rc-slider';
+import React from 'react';
 import '../../assets/index.less';
 import TooltipSlider from './components/TooltipSlider';
 
-const style = { width: 600, margin: 50 };
+const style: React.CSSProperties = {
+  width: 600,
+  margin: 50,
+};
 
 function log(value) {
   console.log(value); //eslint-disable-line

docs/examples/vertical.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import Slider from 'rc-slider';
+import React from 'react';
 import '../../assets/index.less';
 
 const style: React.CSSProperties = {
@@ -9,7 +9,10 @@ const style: React.CSSProperties = {
   marginBottom: 160,
   marginLeft: 50,
 };
-const parentStyle = { overflow: 'hidden' };
+
+const parentStyle: React.CSSProperties = {
+  overflow: 'hidden',
+};
 
 const marks = {
   '-10': '-10°C',

package.json

@@ -2,9 +2,6 @@
   "name": "rc-slider",
   "version": "10.5.0",
   "description": "Slider UI component for React",
-  "engines": {
-    "node": ">=8.x"
-  },
   "keywords": [
     "react",
     "react-component",
@@ -14,38 +11,34 @@
     "range"
   ],
   "homepage": "http://github.com/react-component/slider/",
+  "bugs": {
+    "url": "http://github.com/react-component/slider/issues"
+  },
   "repository": {
     "type": "git",
     "url": "git@github.com:react-component/slider.git"
   },
-  "bugs": {
-    "url": "http://github.com/react-component/slider/issues"
-  },
+  "license": "MIT",
+  "main": "./lib/index",
+  "module": "./es/index",
+  "types": "./lib/index.d.ts",
+  "style": "./assets/index.css",
   "files": [
     "assets/*.css",
     "lib",
     "es"
   ],
-  "license": "MIT",
-  "main": "./lib/index",
-  "module": "./es/index",
-  "style": "./assets/index.css",
-  "types": "./lib/index.d.ts",
   "scripts": {
-    "start": "dumi dev",
+    "compile": "father build && lessc assets/index.less assets/index.css",
+    "coverage": "rc-test --coverage",
     "docs:build": "dumi build",
     "docs:deploy": "gh-pages -d .doc",
-    "compile": "father build && lessc assets/index.less assets/index.css",
-    "prepublishOnly": "npm run compile && np --yolo --no-publish",
     "lint": "eslint src/ --ext .ts,.tsx,.jsx,.js,.md",
+    "now-build": "npm run docs:build",
+    "prepublishOnly": "npm run compile && np --yolo --no-publish",
     "prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"",
-    "test": "rc-test",
-    "coverage": "rc-test --coverage",
-    "now-build": "npm run docs:build"
-  },
-  "peerDependencies": {
-    "react": ">=16.9.0",
-    "react-dom": ">=16.9.0"
+    "start": "dumi dev",
+    "test": "rc-test"
   },
   "dependencies": {
     "@babel/runtime": "^7.10.1",
@@ -58,14 +51,14 @@
     "@testing-library/react": "^12.1.3",
     "@types/classnames": "^2.2.9",
     "@types/jest": "^29.5.1",
-    "@types/react": "^17.0.15",
+    "@types/react": "^18.2.42",
     "@types/react-dom": "^18.0.11",
     "@umijs/fabric": "^4.0.1",
     "cross-env": "^7.0.0",
+    "dumi": "^2.2.10",
     "eslint": "^8.54.0",
     "eslint-plugin-jest": "^27.6.0",
     "eslint-plugin-unicorn": "^49.0.0",
-    "dumi": "^2.2.10",
     "father": "^4.3.5",
     "father-build": "^1.18.6",
     "gh-pages": "^6.1.0",
@@ -79,5 +72,12 @@
     "react-dom": "^16.0.0",
     "regenerator-runtime": "^0.14.0",
     "typescript": "^5.1.6"
+  },
+  "peerDependencies": {
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
+  },
+  "engines": {
+    "node": ">=8.x"
   }
 }

src/Handles/Handle.tsx

@@ -26,7 +26,7 @@ export interface HandleProps {
   onChangeComplete?: () => void;
 }
 
-const Handle = React.forwardRef((props: HandleProps, ref: React.Ref<HTMLDivElement>) => {
+const Handle = React.forwardRef<HTMLDivElement, HandleProps>((props, ref) => {
   const {
     prefixCls,
     value,
@@ -53,6 +53,7 @@ const Handle = React.forwardRef((props: HandleProps, ref: React.Ref<HTMLDivEleme
     styles,
     classNames,
   } = React.useContext(SliderContext);
+
   const handlePrefixCls = `${prefixCls}-handle`;
 
   // ============================ Events ============================
@@ -124,7 +125,7 @@ const Handle = React.forwardRef((props: HandleProps, ref: React.Ref<HTMLDivEleme
         onChangeComplete?.();
         break;
     }
-  }
+  };
 
   // ============================ Offset ============================
   const positionStyle = getDirectionStyle(direction, value, min, max);

src/Handles/index.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import Handle from './Handle';
-import type { HandleProps } from './Handle';
-import { getIndex } from '../util';
 import type { OnStartMove } from '../interface';
+import { getIndex } from '../util';
+import type { HandleProps } from './Handle';
+import Handle from './Handle';
 
 export interface HandlesProps {
   prefixCls: string;
@@ -21,7 +21,7 @@ export interface HandlesRef {
   focus: (index: number) => void;
 }
 
-const Handles = React.forwardRef((props: HandlesProps, ref: React.Ref<HandlesRef>) => {
+const Handles = React.forwardRef<HandlesRef, HandlesProps>((props, ref) => {
   const {
     prefixCls,
     style,
@@ -42,7 +42,7 @@ const Handles = React.forwardRef((props: HandlesProps, ref: React.Ref<HandlesRef
 
   return (
     <>
-      {values.map((value, index) => (
+      {values.map<React.ReactNode>((value, index) => (
         <Handle
           ref={(node) => {
             if (!node) {