Skip to content

Commit 6746d23

Browse files
shanhexishanhexi
committed
Drag extension bug
1 parent bafc814 commit 6746d23

6 files changed

Lines changed: 48 additions & 21 deletions

File tree

‎chat2db-client/src/components/DraggableContainer/index.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,18 +15,18 @@ export default memo<IProps>((props: IProps) => {
1515
const { children, showLine = true, callback, min, className, layout = 'row' } = props;
1616
const volatileRef = children[0]?.ref || children[1]?.ref;
1717

18-
const DividerRef = useRef<HTMLDivElement | null>(null);
19-
const DividerLine = useRef<HTMLDivElement | null>(null);
18+
const dividerRef = useRef<HTMLDivElement | null>(null);
19+
const dividerLine = useRef<HTMLDivElement | null>(null);
2020
const [dragging, setDragging] = useState(false);
2121

2222
const isRow = layout === 'row';
2323

2424
useEffect(() => {
25-
if (!DividerRef.current) {
25+
if (!dividerRef.current) {
2626
return;
2727
}
2828

29-
DividerRef.current.onmousedown = (e) => {
29+
dividerRef.current.onmousedown = (e) => {
3030
if (!volatileRef?.current) return;
3131
e.preventDefault();
3232
setDragging(true);
@@ -67,10 +67,10 @@ export default memo<IProps>((props: IProps) => {
6767
{
6868
<div
6969
style={{ display: showLine ? 'block' : 'none' }}
70-
ref={DividerLine}
70+
ref={dividerLine}
7171
className={classnames(styles.divider, { [styles.displayDivider]: !children[1] })}
7272
>
73-
<div ref={DividerRef} className={classnames(styles.dividerCenter, { [styles.dragging]: dragging })} />
73+
<div ref={dividerRef} className={classnames(styles.dividerCenter, { [styles.dragging]: dragging })} />
7474
</div>
7575
}
7676
{children[1]}

‎chat2db-client/src/pages/main/workspace/components/WorkspaceExtend/WorkspaceExtendBody/index.tsx‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,17 @@
1-
import React from 'react';
2-
import styles from './index.less';
1+
import { useMemo } from 'react';
32
import {extendConfig} from '../config';
3+
import {useWorkspaceStore} from '@/pages/main/workspace/store';
44

55

66
export default () => {
7-
return <div className={styles.WorkspaceExtendBody}>
8-
{extendConfig[0].components}
9-
</div>
7+
const {currentWorkspaceExtend} = useWorkspaceStore((state) => {
8+
return {
9+
currentWorkspaceExtend: state.currentWorkspaceExtend,
10+
}
11+
});
12+
const component = useMemo(() => {
13+
return extendConfig.find((item) => item.code === currentWorkspaceExtend)?.components
14+
}, [currentWorkspaceExtend]);
15+
16+
return component
1017
};

‎chat2db-client/src/pages/main/workspace/components/WorkspaceExtend/WorkspaceExtendNav/index.tsx‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
import React, { useState } from 'react';
1+
import React from 'react';
22
import styles from './index.less';
33
import classnames from 'classnames';
44
// import i18n from '@/i18n';
55
import { Popover } from 'antd';
66
import Iconfont from '@/components/Iconfont';
77
import {extendConfig} from '../config';
88

9-
// import { useWorkspaceStore } from '@/pages/main/workspace/store';
9+
import { setCurrentWorkspaceExtend } from '@/pages/main/workspace/store/common';
10+
import { useWorkspaceStore } from '@/pages/main/workspace/store';
1011

1112
interface IToolbar {
1213
code: string;
@@ -21,14 +22,18 @@ interface IProps {
2122

2223
export default (props:IProps) => {
2324
const { className } = props;
24-
const [activeExtend, setActiveExtend] = useState<IToolbar | null>(null);
25+
const { currentWorkspaceExtend } = useWorkspaceStore((state) => {
26+
return {
27+
currentWorkspaceExtend: state.currentWorkspaceExtend,
28+
};
29+
});
2530

2631
const changeExtend = (item: IToolbar) => {
27-
if (activeExtend?.code === item.code) {
28-
setActiveExtend(null);
32+
if (currentWorkspaceExtend === item.code) {
33+
setCurrentWorkspaceExtend(null);
2934
return;
3035
}
31-
setActiveExtend(item);
36+
setCurrentWorkspaceExtend(item.code);
3237
};
3338

3439
return (
@@ -37,7 +42,7 @@ export default (props:IProps) => {
3742
return (
3843
<Popover mouseEnterDelay={0.8} key={index} placement="left" content={item.title}>
3944
<div className={styles.rightBarFront} onClick={changeExtend.bind(null, item)}>
40-
<Iconfont code={item.icon} box size={18} active={activeExtend?.code === item.code} />
45+
<Iconfont code={item.icon} box size={18} active={currentWorkspaceExtend === item.code} />
4146
</div>
4247
</Popover>
4348
);

‎chat2db-client/src/pages/main/workspace/components/WorkspaceRight/index.less‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,12 @@
1313

1414
.draggableContainer{
1515
flex: 1;
16+
width: 0px;
17+
overflow: hidden;
1618
}
1719

1820
.workspaceExtendBody{
19-
width: auto;
21+
width: 300px;
2022
border-left: 1px solid var(--color-border);
2123
}
2224

‎chat2db-client/src/pages/main/workspace/components/WorkspaceRight/index.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,28 @@ import styles from './index.less';
33
// import classnames from 'classnames';
44
import WorkspaceExtendBody from '../WorkspaceExtend/WorkspaceExtendBody';
55
import WorkspaceExtendNav from '../WorkspaceExtend/WorkspaceExtendNav';
6+
import { useWorkspaceStore } from '@/pages/main/workspace/store';
67

78
// ----- components -----
89
import WorkspaceTabs from '../WorkspaceTabs';
910
import DraggableContainer from '@/components/DraggableContainer';
1011

1112
const WorkspaceRight = memo(() => {
1213
const draggableRef = useRef<any>();
14+
const { currentWorkspaceExtend } = useWorkspaceStore((state) => {
15+
return {
16+
currentWorkspaceExtend: state.currentWorkspaceExtend,
17+
};
18+
});
1319
return (
1420
<div className={styles.workspaceRight}>
15-
<DraggableContainer min={200} className={styles.draggableContainer}>
21+
<DraggableContainer showLine={!!currentWorkspaceExtend} min={200} className={styles.draggableContainer}>
1622
<WorkspaceTabs />
17-
<div ref={draggableRef} className={styles.workspaceExtendBody}>
23+
<div ref={draggableRef} className={styles.workspaceExtendBody} style={{display: currentWorkspaceExtend ? 'block' : 'none'}}>
1824
<WorkspaceExtendBody />
1925
</div>
2026
</DraggableContainer>
27+
2128
<WorkspaceExtendNav className={styles.workspaceExtendNav} />
2229
</div>
2330
);

‎chat2db-client/src/pages/main/workspace/store/common.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,18 @@ import { useWorkspaceStore } from './index'
33

44
export interface ICommonStore {
55
currentConnectionDetails: IConnectionListItem | null;
6+
currentWorkspaceExtend: string | null;
67
}
78

89
export const initCommonStore: ICommonStore = {
910
currentConnectionDetails: null,
11+
currentWorkspaceExtend: null,
1012
}
1113

1214
export const setCurrentConnectionDetails = (connectionDetails: ICommonStore['currentConnectionDetails']) => {
1315
return useWorkspaceStore.setState({ currentConnectionDetails: connectionDetails });
1416
}
17+
18+
export const setCurrentWorkspaceExtend = (workspaceExtend: ICommonStore['currentWorkspaceExtend']) => {
19+
return useWorkspaceStore.setState({ currentWorkspaceExtend: workspaceExtend });
20+
}

0 commit comments

Comments
 (0)