update useSlider

src/components/Slider/index.jsx

@@ -1,17 +0,0 @@
-import './slider.css';
-import { useState } from 'react';
-
-const Slider = (props) => {
-	const [v, setV] = useState(100);
-	const handleInput = (e) => {
-		setV(e.target.value);
-		props.handleSlide(e.target.value);
-	};
-	return (
-		<div id="slider" className="slider">
-			<input type="range" value={v} onInput={handleInput} onChange={() => {}} />
-		</div>
-	);
-};
-
-export default Slider;

src/hooks/useSlider.js

@@ -1,5 +1,48 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
+import './slider.css';
 
-export function useSlider({}) {
+export const Slider = ({ value, setValue }) => {
-	return {};
+	const handleInput = (e) => {
+		setValue(e.target.value);
+	};
+	return (
+		<div id="slider" className="slider">
+			<input type="range" value={value} onInput={handleInput} />
+		</div>
+	);
+};
+
+export default function useSlider(defaultSize) {
+	const [value, setValue] = useState(defaultSize || 100);
+
+	const v = (value / 100).toFixed(2);
+
+	const styles = {
+		transform: `scale(${v})`,
+		// transform: `scale(${v * 24 / 33}, ${v})`,
+		transformOrigin: 'top left',
+	};
+
+	useEffect(() => {
+		let fn = (e) => {
+			if (e.shiftKey && e.key === 'L') {
+				document.getElementById('slider').classList.toggle('show');
+			}
+		};
+		let fn2 = () => {
+			setTimeout(() => {
+				document.getElementById('slider').classList.remove('show');
+			}, 200);
+		};
+
+		document.addEventListener('keydown', fn);
+		document.getElementById('slider').addEventListener('mouseleave', fn2);
+
+		return () => {
+			document.removeEventListener('keydown', fn);
+			document.getElementById('slider').removeEventListener('mouseleave', fn2);
+		};
+	}, [value]);
+
+	return { styles, setValue, Slider };
 }

src/pages/index.jsx

@@ -1,4 +1,3 @@
-import { useEffect, useState } from 'react';
 import './global.less';
 import './index.less';
 import Head from '../components/公共组件/顶部公司名称';
@@ -6,45 +5,14 @@ import LeftBar from '../components/模块组件/总览/LeftSide';
 import BottomBar from '../components/模块组件/总览/Bottom';
 import RightBar from '../components/模块组件/总览/RightSide';
 import CenterTopData from '../components/模块组件/总览/CenterTop';
-import Slider from '../components/Slider';
 import { SocketContextProvider } from '../store/socket-data-provider';
+import useSlider from '../hooks/useSlider';
 
 import V3DBG from '../assets/V3DBG.png';
 // import V3D from './V3D';
 
 export default function index() {
-	const [value, setValue] = useState(100);
+	const { styles, setValue, Slider } = useSlider(75);
-
-	const v = (value / 100).toFixed(2);
-	const styles = {
-		transform: `scale(${v})`,
-		// transform: `scale(${v * 24 / 33}, ${v})`,
-		transformOrigin: 'top left',
-	};
-
-	useEffect(() => {
-		let fn = (e) => {
-			console.log('add fn');
-			if (e.shiftKey && e.key === 'L') {
-				document.getElementById('slider').classList.toggle('show');
-			}
-		};
-		let fn2 = () => {
-			console.log('add fn2');
-			setTimeout(() => {
-				document.getElementById('slider').classList.remove('show');
-			}, 200);
-		};
-
-		document.addEventListener('keydown', fn);
-		document.getElementById('slider').addEventListener('mouseleave', fn2);
-
-		return () => {
-			console.log('remove fn, fn2');
-			document.removeEventListener('keydown', fn);
-			document.getElementById('slider').removeEventListener('mouseleave', fn2);
-		};
-	}, [value]);
 
 	return (
 		// <FullScreenContainer>
@@ -66,7 +34,7 @@ export default function index() {
 					<RightBar />
 				</div>
 			</div>
-			<Slider handleSlide={setValue} />
+			<Slider setValue={setValue} />
 		</SocketContextProvider>
 		// </FullScreenContainer>
 	);