Skip to content

Commit 69019d4

Browse files
LZS911LZS911
authored
Merge pull request #391 from actiontech/fix/sql-renderer
[fix]: Table SQL display optimization
2 parents e5e2317 + 8857136 commit 69019d4

File tree

19 files changed

+199
-103
lines changed

19 files changed

+199
-103
lines changed

‎packages/base/src/page/CloudBeaver/List/column.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ export const CBOperationListColumns = (
6666
rows={1}
6767
tooltip={false}
6868
showCopyIcon
69+
cuttingLength={200}
6970
/>
7071
);
7172
}

‎packages/base/src/page/DataExportManagement/Common/AuditResultList/Table/column.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export const AuditResultForCreateOrderColumn = (
2929
tooltip={false}
3030
onClick={() => onClickAuditResult(record)}
3131
showCopyIcon
32+
cuttingLength={200}
3233
/>
3334
);
3435
}

‎packages/shared/lib/components/CopyIcon/CopyIcon.tsx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,9 @@ const CopyIcon: React.FC<CopyIconProps> = ({
1111
text,
1212
children,
1313
tooltips = true,
14-
onCopy,
15-
className
14+
onCopyComplete,
15+
className,
16+
onCustomCopy
1617
}) => {
1718
const { t } = useTranslation();
1819
const [copied, setCopied] = React.useState(false);
@@ -24,20 +25,23 @@ const CopyIcon: React.FC<CopyIconProps> = ({
2425

2526
React.useEffect(() => cleanCopyId, []);
2627

27-
const onCopyClick = (e?: React.MouseEvent<HTMLDivElement>) => {
28+
const onCopyClick = async (e?: React.MouseEvent<HTMLDivElement>) => {
2829
e?.preventDefault();
2930
e?.stopPropagation();
3031

31-
Copy.copyTextByTextarea(text || (children && String(children)) || '');
32-
32+
if (!!onCustomCopy) {
33+
await onCustomCopy();
34+
} else {
35+
Copy.copyTextByTextarea(text || (children && String(children)) || '');
36+
}
3337
setCopied(true);
3438

3539
cleanCopyId();
3640
copyIdRef.current = window.setTimeout(() => {
3741
setCopied(false);
3842
}, 3000);
3943

40-
onCopy?.(e);
44+
onCopyComplete?.(e);
4145
};
4246

4347
const tooltipsTitle = React.useMemo(() => {

‎packages/shared/lib/components/CopyIcon/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
export interface CopyIconProps {
22
text?: string;
3-
onCopy?: (event?: React.MouseEvent<HTMLDivElement>) => void;
3+
onCopyComplete?: (event?: React.MouseEvent<HTMLDivElement>) => void;
44
tooltips?: boolean | React.ReactNode;
55
format?: 'text/plain' | 'text/html';
66
children?: React.ReactNode;
77
className?: string;
8+
onCustomCopy?: (event?: React.MouseEvent<HTMLDivElement>) => void;
89
}
910

1011
export { default } from './CopyIcon';

‎packages/shared/lib/components/SQLRenderer/__tests__/SQLRenderer.test.tsx‎

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { getBySelector, queryBySelector } from '../../../testUtil/customQuery';
33
import { superRender } from '../../../testUtil/customRender';
44
import SQLRenderer from '../SQLRenderer';
55
import { SQLRendererProps } from '../index.type';
6+
import { act } from '@testing-library/react';
67

78
describe('test SQLRenderer', () => {
89
const customRender = (params?: Partial<SQLRendererProps>) => {
@@ -21,7 +22,7 @@ describe('test SQLRenderer', () => {
2122
/>
2223
);
2324
};
24-
it('render showCopyIcon is equal true', () => {
25+
it('render showCopyIcon is equal true', async () => {
2526
document.execCommand = jest.fn();
2627
const onCopyComplete = jest.fn();
2728
customRender({
@@ -36,9 +37,30 @@ describe('test SQLRenderer', () => {
3637

3738
expect(getBySelector('.custom-copy-icon')).toBeInTheDocument();
3839

39-
fireEvent.click(getBySelector('.custom-copy-icon'));
40+
await act(async () => {
41+
fireEvent.click(getBySelector('.custom-copy-icon'));
42+
});
4043

4144
expect(onCopyComplete).toHaveBeenCalledTimes(1);
45+
46+
const writeText = jest.fn();
47+
48+
Object.assign(navigator, {
49+
clipboard: {
50+
writeText
51+
}
52+
});
53+
54+
await act(async () => {
55+
fireEvent.click(getBySelector('.custom-copy-icon'));
56+
});
57+
58+
expect(writeText).toHaveBeenCalledTimes(1);
59+
expect(onCopyComplete).toHaveBeenCalledTimes(2);
60+
61+
Object.assign(navigator, {
62+
clipboard: undefined
63+
});
4264
});
4365

4466
it('render showCopyIcon is equal hover', () => {

‎packages/shared/lib/components/SQLRenderer/__tests__/Snippet.test.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,4 +62,9 @@ describe('test SQLRenderer.Snippet', () => {
6262
customRender({ sql: '', emptySqlContent: 'empty' }).container
6363
).toMatchSnapshot();
6464
});
65+
66+
it('render snap when cuttingLength is 200', () => {
67+
const { container } = customRender({ cuttingLength: 200 });
68+
expect(container).toMatchSnapshot();
69+
});
6570
});

‎packages/shared/lib/components/SQLRenderer/__tests__/__snapshots__/Snippet.test.tsx.snap‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -213,6 +213,109 @@ exports[`test SQLRenderer.Snippet render snap 1`] = `
213213
</div>
214214
`;
215215

216+
exports[`test SQLRenderer.Snippet render snap when cuttingLength is 200 1`] = `
217+
<div>
218+
<div
219+
class="actiontech-sql-snippet-renderer-wrapper css-dz7fl9"
220+
>
221+
<div
222+
class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-multiple-line margin-bottom-0 css-dev-only-do-not-override-txh9fw"
223+
>
224+
<span>
225+
<span
226+
class="hljs-keyword"
227+
>
228+
CREATE
229+
</span>
230+
231+
<span
232+
class="hljs-keyword"
233+
>
234+
TABLE
235+
</span>
236+
IF
237+
<span
238+
class="hljs-keyword"
239+
>
240+
NOT
241+
</span>
242+
243+
<span
244+
class="hljs-keyword"
245+
>
246+
EXISTS
247+
</span>
248+
249+
task (
250+
id
251+
<span
252+
class="hljs-type"
253+
>
254+
BIGINT
255+
</span>
256+
UNSIGNED AUTO_INCREMENT
257+
<span
258+
class="hljs-keyword"
259+
>
260+
PRIMARY
261+
</span>
262+
KEY,
263+
title
264+
<span
265+
class="hljs-type"
266+
>
267+
VARCHAR
268+
</span>
269+
(
270+
<span
271+
class="hljs-number"
272+
>
273+
255
274+
</span>
275+
)
276+
<span
277+
class="hljs-keyword"
278+
>
279+
NOT
280+
</span>
281+
282+
<span
283+
class="hljs-keyword"
284+
>
285+
NULL
286+
</span>
287+
288+
<span
289+
class="hljs-keyword"
290+
>
291+
DEFAULT
292+
</span>
293+
294+
<span
295+
class="hljs-string"
296+
>
297+
''
298+
</span>
299+
,
300+
description TEXT,
301+
status ENUM(
302+
<span
303+
class="hljs-string"
304+
>
305+
'pending'
306+
</span>
307+
,
308+
<span
309+
class="hljs-string"
310+
>
311+
'completed
312+
</span>
313+
</span>
314+
</div>
315+
</div>
316+
</div>
317+
`;
318+
216319
exports[`test SQLRenderer.Snippet render snap when loading is not undefined 1`] = `
217320
<div>
218321
<div

‎packages/shared/lib/components/SQLRenderer/component/Snippet.tsx‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import { SQLRendererStyleWrapper } from '../style';
66
import { Spin, Typography } from 'antd';
77
import { tooltipsCommonProps } from '../../BasicToolTips';
88
import HighlightCode from '../../../utils/HighlightCode';
9+
import { useMemo } from 'react';
10+
import { isNumber } from 'lodash';
911

1012
const Snippet: React.FC<SQLSnippetRendererProps> = ({
1113
rows = 10,
@@ -19,7 +21,8 @@ const Snippet: React.FC<SQLSnippetRendererProps> = ({
1921
highlightSyntax = true,
2022
sql,
2123
onCopyComplete,
22-
copyIconClassName
24+
copyIconClassName,
25+
cuttingLength
2326
}) => {
2427
const { renderSQLTemplateContent } = useRenderSQLTemplate({
2528
showLineNumbers: false,
@@ -35,6 +38,13 @@ const Snippet: React.FC<SQLSnippetRendererProps> = ({
3538
copyIconClassName
3639
});
3740

41+
const slicedSql = useMemo(() => {
42+
if (isNumber(cuttingLength)) {
43+
return sql?.slice(0, cuttingLength);
44+
}
45+
return sql;
46+
}, [cuttingLength, sql]);
47+
3848
const render = () => {
3949
const content = (
4050
<SQLRendererStyleWrapper
@@ -47,7 +57,7 @@ const Snippet: React.FC<SQLSnippetRendererProps> = ({
4757
)}
4858
onClick={onClick}
4959
>
50-
{sql ? (
60+
{slicedSql ? (
5161
<Typography.Paragraph
5262
ellipsis={{
5363
expandable: false,
@@ -64,7 +74,7 @@ const Snippet: React.FC<SQLSnippetRendererProps> = ({
6474
>
6575
<span
6676
dangerouslySetInnerHTML={{
67-
__html: HighlightCode.highlightSql(sql)
77+
__html: HighlightCode.highlightSql(slicedSql)
6878
}}
6979
/>
7080
</Typography.Paragraph>

‎packages/shared/lib/components/SQLRenderer/hooks/useRenderCopyIcon.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import classNames from 'classnames';
22
import { SQLRendererProps } from '../index.type';
33
import { useCallback } from 'react';
44
import CopyIcon from '../../CopyIcon';
5+
import Copy from '../../../utils/Copy';
56

67
const useRenderCopyIcon = (
78
params: Pick<
@@ -15,14 +16,23 @@ const useRenderCopyIcon = (
1516
return null;
1617
}
1718

19+
const onCopyExecSql = () => {
20+
try {
21+
navigator.clipboard.writeText(sql);
22+
} catch (err) {
23+
Copy.copyTextByTextarea(sql);
24+
}
25+
};
26+
1827
return (
1928
<CopyIcon
2029
text={sql}
21-
onCopy={onCopyComplete}
30+
onCopyComplete={onCopyComplete}
2231
className={classNames(
2332
copyIconClassName,
2433
'actiontech-sql-renderer-copy-icon'
2534
)}
35+
onCustomCopy={onCopyExecSql}
2636
/>
2737
);
2838
}, [copyIconClassName, onCopyComplete, showCopyIcon, sql]);

‎packages/shared/lib/components/SQLRenderer/index.type.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,10 @@ export type SQLSnippetRendererProps = Omit<
100100
* 继承 antd 的 paragraph
101101
*/
102102
paragraph?: ParagraphProps;
103+
/**
104+
* 需要截取的切片长度
105+
*/
106+
cuttingLength?: number;
103107
};
104108

105109
export type SQLViewOnlyEditorRendererProps = {

0 commit comments

Comments
 (0)