@easyv/charts 1.4.22 → 1.4.24

package/src/components/Brush.js

@@ -1,159 +1,159 @@
-/**
- * 实现中
- */
-import { memo, useState, useCallback, useEffect, useRef } from 'react';
-
-const left = {
-  position: 'relative',
-  width: 5,
-  height: '100%',
-  cursor: 'col-resize',
-  backgroundClip: 'content-box',
-};
-const center = {
-  flex: '1 1 0%',
-  height: '100%',
-  cursor: 'move',
-};
-const right = {
-  position: 'relative',
-  width: 5,
-  height: '100%',
-  cursor: 'col-resize',
-  backgroundClip: 'content-box',
-};
-const initialPosition = {
-  start: 0,
-  end: 0,
-  status: '',
-};
-const getValue = (x, min, max) => Math.max(min, Math.min(x, max));
-export default ({
-  width,
-  config: {
-    height,
-    background,
-    margin: { marginLeft, marginRight },
-    detail: { width: blockWidth, color },
-  },
-}) => {
-  const [state, setState] = useState({ translateX: 0, width: blockWidth });
-  const availableWidth = width - marginLeft - marginRight;
-  const cache = useRef(state);
-
-  const move = useCallback(
-    ({ delta, status, name }) => {
-      let { width, translateX } = cache.current;
-      const minWidth = 40;
-      const minX = 0;
-      switch (name) {
-        case 'center':
-          translateX = getValue(
-            translateX + delta,
-            minX,
-            availableWidth - width
-          );
-          break;
-        case 'left':
-          let tempWidth = width;
-          width = getValue(width + delta * -1, minWidth, translateX + width);
-          translateX = getValue(
-            translateX + delta,
-            minX,
-            translateX + tempWidth - width
-          );
-          break;
-        case 'right':
-          width = getValue(
-            width + delta,
-            minWidth,
-            availableWidth - translateX
-          );
-          break;
-      }
-
-      if (status === 'up') {
-        cache.current = { width, translateX };
-      }
-
-      setState({ width, translateX });
-    },
-    [availableWidth]
-  );
-  useEffect(() => {}, [state]);
-  return (
-    <div
-      style={{
-        marginLeft,
-        marginRight,
-        height,
-        background,
-        position: 'absolute',
-        bottom: 0,
-        width: availableWidth,
-      }}
-    >
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          transform: 'translate3d(' + state.translateX + 'px, 0, 0)',
-          height: '100%',
-          width: state.width + 'px',
-          backgroundColor: color,
-        }}
-      >
-        <Move style={left} move={move} name='left' />
-        <Move style={center} move={move} name='center' />
-        <Move style={right} move={move} name='right' />
-      </div>
-    </div>
-  );
-};
-const Move = memo(({ style, move, name }) => {
-  const [position, setPosition] = useState(initialPosition);
-
-  const documentOnMouseMove = useCallback((e) => {
-    // console.log('documentOnMouseMove');
-    setPosition((position) => {
-      return {
-        ...position,
-        end: e.clientX,
-        status: 'move',
-      };
-    });
-  }, []);
-
-  const documentOnMouseUp = useCallback((e) => {
-    // console.log('documentOnMouseUp');
-    setPosition((position) => {
-      return {
-        ...position,
-        end: e.clientX,
-        status: 'up',
-      };
-    });
-    document.removeEventListener('mousemove', documentOnMouseMove);
-    document.removeEventListener('mouseup', documentOnMouseUp);
-  }, []);
-
-  const onMouseDown = useCallback((e) => {
-    // console.log('onMouseDown');
-    setPosition({
-      end: e.clientX,
-      start: e.clientX,
-      status: 'down',
-    });
-    document.addEventListener('mousemove', documentOnMouseMove);
-    document.addEventListener('mouseup', documentOnMouseUp);
-  }, []);
-
-  useEffect(() => {
-    const { start, end, status } = position;
-    move({ delta: end - start, status, name });
-  }, [position, move, name]);
-  return <div style={style} onMouseDown={onMouseDown} />;
-});
+/**
+ * 实现中
+ */
+import { memo, useState, useCallback, useEffect, useRef } from 'react';
+
+const left = {
+  position: 'relative',
+  width: 5,
+  height: '100%',
+  cursor: 'col-resize',
+  backgroundClip: 'content-box',
+};
+const center = {
+  flex: '1 1 0%',
+  height: '100%',
+  cursor: 'move',
+};
+const right = {
+  position: 'relative',
+  width: 5,
+  height: '100%',
+  cursor: 'col-resize',
+  backgroundClip: 'content-box',
+};
+const initialPosition = {
+  start: 0,
+  end: 0,
+  status: '',
+};
+const getValue = (x, min, max) => Math.max(min, Math.min(x, max));
+export default ({
+  width,
+  config: {
+    height,
+    background,
+    margin: { marginLeft, marginRight },
+    detail: { width: blockWidth, color },
+  },
+}) => {
+  const [state, setState] = useState({ translateX: 0, width: blockWidth });
+  const availableWidth = width - marginLeft - marginRight;
+  const cache = useRef(state);
+
+  const move = useCallback(
+    ({ delta, status, name }) => {
+      let { width, translateX } = cache.current;
+      const minWidth = 40;
+      const minX = 0;
+      switch (name) {
+        case 'center':
+          translateX = getValue(
+            translateX + delta,
+            minX,
+            availableWidth - width
+          );
+          break;
+        case 'left':
+          let tempWidth = width;
+          width = getValue(width + delta * -1, minWidth, translateX + width);
+          translateX = getValue(
+            translateX + delta,
+            minX,
+            translateX + tempWidth - width
+          );
+          break;
+        case 'right':
+          width = getValue(
+            width + delta,
+            minWidth,
+            availableWidth - translateX
+          );
+          break;
+      }
+
+      if (status === 'up') {
+        cache.current = { width, translateX };
+      }
+
+      setState({ width, translateX });
+    },
+    [availableWidth]
+  );
+  useEffect(() => {}, [state]);
+  return (
+    <div
+      style={{
+        marginLeft,
+        marginRight,
+        height,
+        background,
+        position: 'absolute',
+        bottom: 0,
+        width: availableWidth,
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          transform: 'translate3d(' + state.translateX + 'px, 0, 0)',
+          height: '100%',
+          width: state.width + 'px',
+          backgroundColor: color,
+        }}
+      >
+        <Move style={left} move={move} name='left' />
+        <Move style={center} move={move} name='center' />
+        <Move style={right} move={move} name='right' />
+      </div>
+    </div>
+  );
+};
+const Move = memo(({ style, move, name }) => {
+  const [position, setPosition] = useState(initialPosition);
+
+  const documentOnMouseMove = useCallback((e) => {
+    // console.log('documentOnMouseMove');
+    setPosition((position) => {
+      return {
+        ...position,
+        end: e.clientX,
+        status: 'move',
+      };
+    });
+  }, []);
+
+  const documentOnMouseUp = useCallback((e) => {
+    // console.log('documentOnMouseUp');
+    setPosition((position) => {
+      return {
+        ...position,
+        end: e.clientX,
+        status: 'up',
+      };
+    });
+    document.removeEventListener('mousemove', documentOnMouseMove);
+    document.removeEventListener('mouseup', documentOnMouseUp);
+  }, []);
+
+  const onMouseDown = useCallback((e) => {
+    // console.log('onMouseDown');
+    setPosition({
+      end: e.clientX,
+      start: e.clientX,
+      status: 'down',
+    });
+    document.addEventListener('mousemove', documentOnMouseMove);
+    document.addEventListener('mouseup', documentOnMouseUp);
+  }, []);
+
+  useEffect(() => {
+    const { start, end, status } = position;
+    move({ delta: end - start, status, name });
+  }, [position, move, name]);
+  return <div style={style} onMouseDown={onMouseDown} />;
+});