From c05b98b58ba0b0afb9404b5f3c634eec8c83dfad Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Thu, 26 May 2022 11:04:10 +0800
Subject: [PATCH] client: fix drag width

---
 .../client/src/hooks/use-dragable-width.ts    | 27 +++++++------------
 .../src/layouts/double-column/index.tsx       |  6 +++--
 .../public-double-column/index.module.scss    |  2 +-
 .../layouts/public-double-column/index.tsx    |  6 +++--
 4 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/packages/client/src/hooks/use-dragable-width.ts b/packages/client/src/hooks/use-dragable-width.ts
index 663a459..5fc3ef8 100644
--- a/packages/client/src/hooks/use-dragable-width.ts
+++ b/packages/client/src/hooks/use-dragable-width.ts
@@ -1,9 +1,10 @@
 import { clamp } from 'helpers/clamp';
 import { getStorage, setStorage } from 'helpers/storage';
-import { useWindowSize } from 'hooks/use-window-size';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 import { useQuery } from 'react-query';
 
+import { IsOnMobile } from './use-on-mobile';
+
 const key = 'dragable-menu-width';
 
 const DEFAULT_PC_MIN_WIDTH = 240;
@@ -15,12 +16,13 @@ const DEFAULT_MOBILE_MAX_WIDTH = 240;
 // 收起宽度：24
 const COLLAPSED_WIDTH = 24;
 
-const PC_MOBILE_CRITICAL_WIDTH = 765;
-
 export const useDragableWidth = () => {
-  const { width: windowWidth } = useWindowSize();
-  const [minWidth, setMinWidth] = useState(DEFAULT_MOBILE_MIN_WIDTH);
-  const [maxWidth, setMaxWidth] = useState(DEFAULT_MOBILE_MAX_WIDTH);
+  const { isMobile } = IsOnMobile.useHook();
+  const [minWidth, maxWidth] = useMemo(
+    () =>
+      isMobile ? [DEFAULT_MOBILE_MIN_WIDTH, DEFAULT_MOBILE_MAX_WIDTH] : [DEFAULT_PC_MIN_WIDTH, DEFAULT_PC_MAX_WIDTH],
+    [isMobile]
+  );
   const { data: currentWidth, refetch } = useQuery<number>(key, () => {
     const nextWidth = getStorage(key, minWidth);
 
@@ -34,8 +36,6 @@ export const useDragableWidth = () => {
 
   const updateWidth = useCallback(
     (size) => {
-      const isMobile = windowWidth <= PC_MOBILE_CRITICAL_WIDTH;
-
       if (isMobile && size < maxWidth) {
         size = minWidth;
       }
@@ -43,7 +43,7 @@ export const useDragableWidth = () => {
       prevWidthRef.current = size;
       refetch();
     },
-    [refetch, windowWidth, minWidth, maxWidth]
+    [isMobile, minWidth, maxWidth, refetch]
   );
 
   const toggleCollapsed = useCallback(() => {
@@ -68,13 +68,6 @@ export const useDragableWidth = () => {
     refetch();
   }, [refetch, currentWidth, minWidth, maxWidth]);
 
-  useEffect(() => {
-    const min = windowWidth <= PC_MOBILE_CRITICAL_WIDTH ? DEFAULT_MOBILE_MIN_WIDTH : DEFAULT_PC_MIN_WIDTH;
-    const max = windowWidth <= PC_MOBILE_CRITICAL_WIDTH ? DEFAULT_MOBILE_MAX_WIDTH : DEFAULT_PC_MAX_WIDTH;
-    setMinWidth(min);
-    setMaxWidth(max);
-  }, [windowWidth, refetch, currentWidth]);
-
   return {
     minWidth,
     maxWidth,
diff --git a/packages/client/src/layouts/double-column/index.tsx b/packages/client/src/layouts/double-column/index.tsx
index 39fca9b..51c34b4 100644
--- a/packages/client/src/layouts/double-column/index.tsx
+++ b/packages/client/src/layouts/double-column/index.tsx
@@ -1,8 +1,9 @@
 import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';
 import { Button, Layout as SemiLayout } from '@douyinfe/semi-ui';
 import cls from 'classnames';
+import { debounce } from 'helpers/debounce';
 import { useDragableWidth } from 'hooks/use-dragable-width';
-import React from 'react';
+import React, { useMemo } from 'react';
 import SplitPane from 'react-split-pane';
 
 import { RouterHeader } from '../router-header';
@@ -17,12 +18,13 @@ interface IProps {
 
 export const DoubleColumnLayout: React.FC<IProps> = ({ leftNode, rightNode }) => {
   const { minWidth, maxWidth, width, isCollapsed, updateWidth, toggleCollapsed } = useDragableWidth();
+  const debounceUpdate = useMemo(() => debounce(updateWidth, 200), [updateWidth]);
 
   return (
     <SemiLayout className={styles.wrap}>
       <RouterHeader />
       <SemiLayout className={styles.contentWrap}>
-        <SplitPane minSize={minWidth} maxSize={maxWidth} size={width} onChange={updateWidth}>
+        <SplitPane minSize={minWidth} maxSize={maxWidth} size={width} onChange={debounceUpdate}>
           <Sider style={{ width: '100%', height: '100%' }} className={styles.leftWrap}>
             <Button
               size="small"
diff --git a/packages/client/src/layouts/public-double-column/index.module.scss b/packages/client/src/layouts/public-double-column/index.module.scss
index 269d2b5..864a1dc 100644
--- a/packages/client/src/layouts/public-double-column/index.module.scss
+++ b/packages/client/src/layouts/public-double-column/index.module.scss
@@ -23,7 +23,7 @@
 
     .collapseBtn {
       position: absolute;
-      top: 1rem;
+      top: 48px;
       right: 0;
       z-index: 100;
       opacity: 1;
diff --git a/packages/client/src/layouts/public-double-column/index.tsx b/packages/client/src/layouts/public-double-column/index.tsx
index 069ff15..9f7f22d 100644
--- a/packages/client/src/layouts/public-double-column/index.tsx
+++ b/packages/client/src/layouts/public-double-column/index.tsx
@@ -1,8 +1,9 @@
 import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';
 import { Button, Layout as SemiLayout } from '@douyinfe/semi-ui';
 import cls from 'classnames';
+import { debounce } from 'helpers/debounce';
 import { useDragableWidth } from 'hooks/use-dragable-width';
-import React from 'react';
+import React, { useMemo } from 'react';
 import SplitPane from 'react-split-pane';
 
 import styles from './index.module.scss';
@@ -16,10 +17,11 @@ interface IProps {
 
 export const PublicDoubleColumnLayout: React.FC<IProps> = ({ leftNode, rightNode }) => {
   const { minWidth, maxWidth, width, isCollapsed, updateWidth, toggleCollapsed } = useDragableWidth();
+  const debounceUpdate = useMemo(() => debounce(updateWidth, 200), [updateWidth]);
 
   return (
     <SemiLayout className={styles.wrap}>
-      <SplitPane minSize={minWidth} maxSize={maxWidth} size={width} onChange={updateWidth}>
+      <SplitPane minSize={minWidth} maxSize={maxWidth} size={width} onChange={debounceUpdate}>
         <Sider style={{ width: '100%', height: '100%' }} className={styles.leftWrap}>
           <Button
             size="small"