client: fix drag width

This commit is contained in:
fantasticit 2022-05-26 11:04:10 +08:00
parent 67549e3aa7
commit c05b98b58b
4 changed files with 19 additions and 22 deletions

View File

@ -1,9 +1,10 @@
import { clamp } from 'helpers/clamp'; import { clamp } from 'helpers/clamp';
import { getStorage, setStorage } from 'helpers/storage'; import { getStorage, setStorage } from 'helpers/storage';
import { useWindowSize } from 'hooks/use-window-size'; import { useCallback, useMemo, useRef } from 'react';
import { useCallback, useEffect, useRef, useState } from 'react';
import { useQuery } from 'react-query'; import { useQuery } from 'react-query';
import { IsOnMobile } from './use-on-mobile';
const key = 'dragable-menu-width'; const key = 'dragable-menu-width';
const DEFAULT_PC_MIN_WIDTH = 240; const DEFAULT_PC_MIN_WIDTH = 240;
@ -15,12 +16,13 @@ const DEFAULT_MOBILE_MAX_WIDTH = 240;
// 收起宽度24 // 收起宽度24
const COLLAPSED_WIDTH = 24; const COLLAPSED_WIDTH = 24;
const PC_MOBILE_CRITICAL_WIDTH = 765;
export const useDragableWidth = () => { export const useDragableWidth = () => {
const { width: windowWidth } = useWindowSize(); const { isMobile } = IsOnMobile.useHook();
const [minWidth, setMinWidth] = useState(DEFAULT_MOBILE_MIN_WIDTH); const [minWidth, maxWidth] = useMemo(
const [maxWidth, setMaxWidth] = useState(DEFAULT_MOBILE_MAX_WIDTH); () =>
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 { data: currentWidth, refetch } = useQuery<number>(key, () => {
const nextWidth = getStorage(key, minWidth); const nextWidth = getStorage(key, minWidth);
@ -34,8 +36,6 @@ export const useDragableWidth = () => {
const updateWidth = useCallback( const updateWidth = useCallback(
(size) => { (size) => {
const isMobile = windowWidth <= PC_MOBILE_CRITICAL_WIDTH;
if (isMobile && size < maxWidth) { if (isMobile && size < maxWidth) {
size = minWidth; size = minWidth;
} }
@ -43,7 +43,7 @@ export const useDragableWidth = () => {
prevWidthRef.current = size; prevWidthRef.current = size;
refetch(); refetch();
}, },
[refetch, windowWidth, minWidth, maxWidth] [isMobile, minWidth, maxWidth, refetch]
); );
const toggleCollapsed = useCallback(() => { const toggleCollapsed = useCallback(() => {
@ -68,13 +68,6 @@ export const useDragableWidth = () => {
refetch(); refetch();
}, [refetch, currentWidth, minWidth, maxWidth]); }, [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 { return {
minWidth, minWidth,
maxWidth, maxWidth,

View File

@ -1,8 +1,9 @@
import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons'; import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';
import { Button, Layout as SemiLayout } from '@douyinfe/semi-ui'; import { Button, Layout as SemiLayout } from '@douyinfe/semi-ui';
import cls from 'classnames'; import cls from 'classnames';
import { debounce } from 'helpers/debounce';
import { useDragableWidth } from 'hooks/use-dragable-width'; import { useDragableWidth } from 'hooks/use-dragable-width';
import React from 'react'; import React, { useMemo } from 'react';
import SplitPane from 'react-split-pane'; import SplitPane from 'react-split-pane';
import { RouterHeader } from '../router-header'; import { RouterHeader } from '../router-header';
@ -17,12 +18,13 @@ interface IProps {
export const DoubleColumnLayout: React.FC<IProps> = ({ leftNode, rightNode }) => { export const DoubleColumnLayout: React.FC<IProps> = ({ leftNode, rightNode }) => {
const { minWidth, maxWidth, width, isCollapsed, updateWidth, toggleCollapsed } = useDragableWidth(); const { minWidth, maxWidth, width, isCollapsed, updateWidth, toggleCollapsed } = useDragableWidth();
const debounceUpdate = useMemo(() => debounce(updateWidth, 200), [updateWidth]);
return ( return (
<SemiLayout className={styles.wrap}> <SemiLayout className={styles.wrap}>
<RouterHeader /> <RouterHeader />
<SemiLayout className={styles.contentWrap}> <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}> <Sider style={{ width: '100%', height: '100%' }} className={styles.leftWrap}>
<Button <Button
size="small" size="small"

View File

@ -23,7 +23,7 @@
.collapseBtn { .collapseBtn {
position: absolute; position: absolute;
top: 1rem; top: 48px;
right: 0; right: 0;
z-index: 100; z-index: 100;
opacity: 1; opacity: 1;

View File

@ -1,8 +1,9 @@
import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons'; import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';
import { Button, Layout as SemiLayout } from '@douyinfe/semi-ui'; import { Button, Layout as SemiLayout } from '@douyinfe/semi-ui';
import cls from 'classnames'; import cls from 'classnames';
import { debounce } from 'helpers/debounce';
import { useDragableWidth } from 'hooks/use-dragable-width'; import { useDragableWidth } from 'hooks/use-dragable-width';
import React from 'react'; import React, { useMemo } from 'react';
import SplitPane from 'react-split-pane'; import SplitPane from 'react-split-pane';
import styles from './index.module.scss'; import styles from './index.module.scss';
@ -16,10 +17,11 @@ interface IProps {
export const PublicDoubleColumnLayout: React.FC<IProps> = ({ leftNode, rightNode }) => { export const PublicDoubleColumnLayout: React.FC<IProps> = ({ leftNode, rightNode }) => {
const { minWidth, maxWidth, width, isCollapsed, updateWidth, toggleCollapsed } = useDragableWidth(); const { minWidth, maxWidth, width, isCollapsed, updateWidth, toggleCollapsed } = useDragableWidth();
const debounceUpdate = useMemo(() => debounce(updateWidth, 200), [updateWidth]);
return ( return (
<SemiLayout className={styles.wrap}> <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}> <Sider style={{ width: '100%', height: '100%' }} className={styles.leftWrap}>
<Button <Button
size="small" size="small"