mirror of https://github.com/fantasticit/think.git
client: fix drag width
This commit is contained in:
parent
67549e3aa7
commit
c05b98b58b
|
@ -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,
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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"
|
||||||
|
|
Loading…
Reference in New Issue