@@ -8,6 +8,7 @@ import React, {
88 ForwardedRef ,
99 useImperativeHandle ,
1010 Fragment ,
11+ createContext ,
1112} from 'react' ;
1213import classnames from 'classnames' ;
1314import Tabs , { ITabItem } from '@/components/Tabs' ;
@@ -23,7 +24,6 @@ import i18n from '@/i18n';
2324import sqlServer , { IExecuteSqlParams } from '@/service/sql' ;
2425import { v4 as uuidV4 } from 'uuid' ;
2526import { Spin } from 'antd' ;
26- import { useWorkspaceStore } from '@/store/workspace' ;
2727
2828interface IProps {
2929 className ?: string ;
@@ -42,12 +42,19 @@ export interface ISearchResultRef {
4242 handleExecuteSQL : ( sql : string ) => void ;
4343}
4444
45+ interface IContext {
46+ // 这里不用ref的话,会导致切换时闪动
47+ activeTabIdRef : React . MutableRefObject < null | string >
48+ }
49+
50+ export const Context = createContext < IContext > ( { } as any ) ;
51+
4552export default forwardRef ( ( props : IProps , ref : ForwardedRef < ISearchResultRef > ) => {
4653 const { className, sql, executeSqlParams } = props ;
4754 const [ resultDataList , setResultDataList ] = useState < IManageResultData [ ] > ( ) ;
4855 const [ tableLoading , setTableLoading ] = useState ( false ) ;
4956 const controllerRef = useRef < AbortController > ( ) ;
50- const setActiveSearchResult = useWorkspaceStore ( ( state ) => state . setActiveSearchResult ) ;
57+ const activeTabIdRef = useRef < null | string > ( null ) ;
5158
5259 useEffect ( ( ) => {
5360 if ( sql ) {
@@ -92,7 +99,7 @@ export default forwardRef((props: IProps, ref: ForwardedRef<ISearchResultRef>) =
9299 } ;
93100
94101 const onChange = useCallback ( ( uuid ) => {
95- setActiveSearchResult ( uuid ) ;
102+ activeTabIdRef . current = uuid ;
96103 } , [ ] ) ;
97104
98105 const renderResult = ( queryResultData ) => {
@@ -170,59 +177,46 @@ export default forwardRef((props: IProps, ref: ForwardedRef<ISearchResultRef>) =
170177 [ resultDataList ] ,
171178 ) ;
172179
173- // const outputTabAndTabsList = useMemo(() => {
174- // const params = {
175- // pageNo: 1,
176- // pageSize: 10,
177- // };
178-
179- // return [
180- // {
181- // prefixIcon: <Iconfont key="output" className={styles.outputPrefixIcon} code="" />,
182- // label: 'Output',
183- // key: 'output',
184- // children: <Output params={params} />,
185- // styles: { width: '80px' },
186- // canClosed: false,
187- // },
188- // ...tabsList,
189- // ];
190- // }, [tabsList]);
191-
192180 const stopExecuteSql = ( ) => {
193181 controllerRef . current && controllerRef . current . abort ( ) ;
194182 setResultDataList ( [ ] ) ;
195183 setTableLoading ( false ) ;
196184 } ;
197185
198186 return (
199- < div className = { classnames ( className , styles . searchResult ) } >
200- { tableLoading ? (
201- < div className = { styles . tableLoading } >
202- < Spin />
203- < div className = { styles . stopExecuteSql } onClick = { stopExecuteSql } >
204- { i18n ( 'common.button.cancelRequest' ) }
205- </ div >
206- </ div >
207- ) : (
208- < >
209- { tabsList ?. length ? (
210- < Tabs
211- hideAdd
212- className = { styles . tabs }
213- onChange = { onChange as any }
214- onEdit = { onEdit as any }
215- items = { tabsList }
216- concealTabHeader = { tabsList . length === 1 }
217- />
218- ) : (
219- < div className = { styles . noData } >
220- < img src = { EmptyImg } />
221- < p > { i18n ( 'common.text.noData' ) } </ p >
187+ < Context . Provider
188+ value = { {
189+ activeTabIdRef : activeTabIdRef ,
190+ } }
191+ >
192+ < div className = { classnames ( className , styles . searchResult ) } >
193+ { tableLoading ? (
194+ < div className = { styles . tableLoading } >
195+ < Spin />
196+ < div className = { styles . stopExecuteSql } onClick = { stopExecuteSql } >
197+ { i18n ( 'common.button.cancelRequest' ) }
222198 </ div >
223- ) }
224- </ >
225- ) }
226- </ div >
199+ </ div >
200+ ) : (
201+ < >
202+ { tabsList ?. length ? (
203+ < Tabs
204+ hideAdd
205+ className = { styles . tabs }
206+ onChange = { onChange as any }
207+ onEdit = { onEdit as any }
208+ items = { tabsList }
209+ concealTabHeader = { tabsList . length === 1 }
210+ />
211+ ) : (
212+ < div className = { styles . noData } >
213+ < img src = { EmptyImg } />
214+ < p > { i18n ( 'common.text.noData' ) } </ p >
215+ </ div >
216+ ) }
217+ </ >
218+ ) }
219+ </ div >
220+ </ Context . Provider >
227221 ) ;
228222} ) ;
0 commit comments