@yoka-ui/ui 1.0.5 → 1.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/@Docs-yoka/exports.generated.md +6 -9
- package/README.md +39 -12
- package/dist/es/assets/image/skills.zip +0 -0
- package/dist/es/business/Empty/index.js.map +1 -1
- package/dist/es/business/YkCharts/Area.d.ts +18 -0
- package/dist/es/business/YkCharts/Area.js +336 -0
- package/dist/es/business/YkCharts/Area.js.map +7 -0
- package/dist/es/business/YkCharts/Bar.d.ts +21 -0
- package/dist/es/business/YkCharts/Bar.js +316 -0
- package/dist/es/business/YkCharts/Bar.js.map +7 -0
- package/dist/es/business/YkCharts/BarProperty.d.ts +21 -0
- package/dist/es/business/YkCharts/BarProperty.js +357 -0
- package/dist/es/business/YkCharts/BarProperty.js.map +7 -0
- package/dist/es/business/YkCharts/BarTotal.d.ts +21 -0
- package/dist/es/business/YkCharts/BarTotal.js +288 -0
- package/dist/es/business/YkCharts/BarTotal.js.map +7 -0
- package/dist/es/business/YkCharts/Line.d.ts +21 -0
- package/dist/es/business/YkCharts/Line.js +342 -0
- package/dist/es/business/YkCharts/Line.js.map +7 -0
- package/dist/es/business/YkCharts/Pie.d.ts +19 -0
- package/dist/es/business/YkCharts/Pie.js +107 -0
- package/dist/es/business/YkCharts/Pie.js.map +7 -0
- package/dist/es/business/YkCharts/PieProperty.d.ts +18 -0
- package/dist/es/business/YkCharts/PieProperty.js +180 -0
- package/dist/es/business/YkCharts/PieProperty.js.map +7 -0
- package/dist/es/business/YkCharts/Pies.d.ts +26 -0
- package/dist/es/business/YkCharts/Pies.js +348 -0
- package/dist/es/business/YkCharts/Pies.js.map +7 -0
- package/dist/es/business/YkCharts/constants.d.ts +1 -0
- package/dist/es/business/YkCharts/constants.js +47 -0
- package/dist/es/business/YkCharts/constants.js.map +7 -0
- package/dist/es/business/YkCharts/hooks.d.ts +4 -0
- package/dist/es/business/YkCharts/hooks.js +37 -0
- package/dist/es/business/YkCharts/hooks.js.map +7 -0
- package/dist/es/business/YkCharts/index.d.ts +9 -0
- package/dist/es/business/YkCharts/index.js +20 -0
- package/dist/es/business/YkCharts/index.js.map +7 -0
- package/dist/es/business/YkCharts/index.module.less +164 -0
- package/dist/es/business/YkCharts/tooltip.less +92 -0
- package/dist/es/business/YkCharts/transformData.js +16 -0
- package/dist/es/business/YkCharts/transformData.js.map +7 -0
- package/dist/es/business/YkCharts/typing.d.ts +74 -0
- package/dist/es/business/YkCharts/typing.js +1 -0
- package/dist/es/business/YkCharts/typing.js.map +7 -0
- package/dist/es/business/YkCharts/utils.d.ts +4 -0
- package/dist/es/business/YkCharts/utils.js +109 -0
- package/dist/es/business/YkCharts/utils.js.map +7 -0
- package/dist/es/business/YkCharts/variables.less +13 -0
- package/dist/es/business/YkLoginModule/SmsLoginForm.d.ts +25 -0
- package/dist/es/business/YkLoginModule/SmsLoginForm.js +178 -0
- package/dist/es/business/YkLoginModule/SmsLoginForm.js.map +7 -0
- package/dist/es/business/YkLoginModule/index.d.ts +48 -0
- package/dist/es/business/YkLoginModule/index.js +198 -0
- package/dist/es/business/YkLoginModule/index.js.map +7 -0
- package/dist/es/business/YkLoginModule/styles.module.less +169 -0
- package/dist/es/business/YkSqlEdit/code-mirror-custom.module.less +154 -0
- package/dist/es/business/YkSqlEdit/index.d.ts +20 -0
- package/dist/es/business/YkSqlEdit/index.js +180 -0
- package/dist/es/business/YkSqlEdit/index.js.map +7 -0
- package/dist/es/business/YkSqlEdit/sql-language.d.ts +11 -0
- package/dist/es/business/YkSqlEdit/sql-language.js +1460 -0
- package/dist/es/business/YkSqlEdit/sql-language.js.map +7 -0
- package/dist/es/components/YKMarkdown/index.d.ts +11 -0
- package/dist/es/components/YKMarkdown/index.js +236 -0
- package/dist/es/components/YKMarkdown/index.js.map +7 -0
- package/dist/es/components/YKMarkdown/index.module.less +83 -0
- package/dist/es/components/YkDateRangePicker/YkDateRangePicker.mdx +3 -3
- package/dist/es/creative/GlassSegmentedRadio/index.d.ts +1 -1
- package/dist/es/creative/SkillsWriter/index.d.ts +3 -0
- package/dist/es/creative/SkillsWriter/index.js +191 -0
- package/dist/es/creative/SkillsWriter/index.js.map +7 -0
- package/dist/es/creative/SkillsWriter/index.module.less +21 -0
- package/dist/es/index.d.ts +4 -2
- package/dist/es/index.js +80 -76
- package/dist/es/index.js.map +2 -2
- package/dist/es/index.less +8 -1
- package/dist/es/utils/ykStorybookDoc.d.ts +15 -0
- package/dist/es/utils/ykStorybookDoc.js +24 -2
- package/dist/es/utils/ykStorybookDoc.js.map +2 -2
- package/dist/lib/assets/image/skills.zip +0 -0
- package/dist/lib/business/Empty/index.js.map +1 -1
- package/dist/lib/business/YkCharts/Area.d.ts +18 -0
- package/dist/lib/business/YkCharts/Area.js +346 -0
- package/dist/lib/business/YkCharts/Area.js.map +7 -0
- package/dist/lib/business/YkCharts/Bar.d.ts +21 -0
- package/dist/lib/business/YkCharts/Bar.js +323 -0
- package/dist/lib/business/YkCharts/Bar.js.map +7 -0
- package/dist/lib/business/YkCharts/BarProperty.d.ts +21 -0
- package/dist/lib/business/YkCharts/BarProperty.js +370 -0
- package/dist/lib/business/YkCharts/BarProperty.js.map +7 -0
- package/dist/lib/business/YkCharts/BarTotal.d.ts +21 -0
- package/dist/lib/business/YkCharts/BarTotal.js +295 -0
- package/dist/lib/business/YkCharts/BarTotal.js.map +7 -0
- package/dist/lib/business/YkCharts/Line.d.ts +21 -0
- package/dist/lib/business/YkCharts/Line.js +349 -0
- package/dist/lib/business/YkCharts/Line.js.map +7 -0
- package/dist/lib/business/YkCharts/Pie.d.ts +19 -0
- package/dist/lib/business/YkCharts/Pie.js +117 -0
- package/dist/lib/business/YkCharts/Pie.js.map +7 -0
- package/dist/lib/business/YkCharts/PieProperty.d.ts +18 -0
- package/dist/lib/business/YkCharts/PieProperty.js +193 -0
- package/dist/lib/business/YkCharts/PieProperty.js.map +7 -0
- package/dist/lib/business/YkCharts/Pies.d.ts +26 -0
- package/dist/lib/business/YkCharts/Pies.js +337 -0
- package/dist/lib/business/YkCharts/Pies.js.map +7 -0
- package/dist/lib/business/YkCharts/constants.d.ts +1 -0
- package/dist/lib/business/YkCharts/constants.js +71 -0
- package/dist/lib/business/YkCharts/constants.js.map +7 -0
- package/dist/lib/business/YkCharts/hooks.d.ts +4 -0
- package/dist/lib/business/YkCharts/hooks.js +62 -0
- package/dist/lib/business/YkCharts/hooks.js.map +7 -0
- package/dist/lib/business/YkCharts/index.d.ts +9 -0
- package/dist/lib/business/YkCharts/index.js +61 -0
- package/dist/lib/business/YkCharts/index.js.map +7 -0
- package/dist/lib/business/YkCharts/index.module.less +164 -0
- package/dist/lib/business/YkCharts/tooltip.less +92 -0
- package/dist/lib/business/YkCharts/transformData.js +40 -0
- package/dist/lib/business/YkCharts/transformData.js.map +7 -0
- package/dist/lib/business/YkCharts/typing.d.ts +74 -0
- package/dist/lib/business/YkCharts/typing.js +18 -0
- package/dist/lib/business/YkCharts/typing.js.map +7 -0
- package/dist/lib/business/YkCharts/utils.d.ts +4 -0
- package/dist/lib/business/YkCharts/utils.js +143 -0
- package/dist/lib/business/YkCharts/utils.js.map +7 -0
- package/dist/lib/business/YkCharts/variables.less +13 -0
- package/dist/lib/business/YkLoginModule/SmsLoginForm.d.ts +25 -0
- package/dist/lib/business/YkLoginModule/SmsLoginForm.js +171 -0
- package/dist/lib/business/YkLoginModule/SmsLoginForm.js.map +7 -0
- package/dist/lib/business/YkLoginModule/index.d.ts +48 -0
- package/dist/lib/business/YkLoginModule/index.js +206 -0
- package/dist/lib/business/YkLoginModule/index.js.map +7 -0
- package/dist/lib/business/YkLoginModule/styles.module.less +169 -0
- package/dist/lib/business/YkSqlEdit/code-mirror-custom.module.less +154 -0
- package/dist/lib/business/YkSqlEdit/index.d.ts +20 -0
- package/dist/lib/business/YkSqlEdit/index.js +202 -0
- package/dist/lib/business/YkSqlEdit/index.js.map +7 -0
- package/dist/lib/business/YkSqlEdit/sql-language.d.ts +11 -0
- package/dist/lib/business/YkSqlEdit/sql-language.js +1493 -0
- package/dist/lib/business/YkSqlEdit/sql-language.js.map +7 -0
- package/dist/lib/components/YKMarkdown/index.d.ts +11 -0
- package/dist/lib/components/YKMarkdown/index.js +188 -0
- package/dist/lib/components/YKMarkdown/index.js.map +7 -0
- package/dist/lib/components/YKMarkdown/index.module.less +83 -0
- package/dist/lib/components/YkDateRangePicker/YkDateRangePicker.mdx +3 -3
- package/dist/lib/creative/GlassSegmentedRadio/index.d.ts +1 -1
- package/dist/lib/creative/SkillsWriter/index.d.ts +3 -0
- package/dist/lib/creative/SkillsWriter/index.js +200 -0
- package/dist/lib/creative/SkillsWriter/index.js.map +7 -0
- package/dist/lib/creative/SkillsWriter/index.module.less +21 -0
- package/dist/lib/index.d.ts +4 -2
- package/dist/lib/index.js +6 -0
- package/dist/lib/index.js.map +2 -2
- package/dist/lib/index.less +8 -1
- package/dist/lib/utils/ykStorybookDoc.d.ts +15 -0
- package/dist/lib/utils/ykStorybookDoc.js +23 -1
- package/dist/lib/utils/ykStorybookDoc.js.map +2 -2
- package/package.json +16 -2
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
.codeMirrorCustom {
|
|
2
|
+
width: 100%;
|
|
3
|
+
height: 100%;
|
|
4
|
+
border: 0.5px solid #ecedf1;
|
|
5
|
+
|
|
6
|
+
&.disabled {
|
|
7
|
+
:global {
|
|
8
|
+
.cm-activeLine,
|
|
9
|
+
.cm-activeLineGutter {
|
|
10
|
+
background-color: transparent !important;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
// CodeMirror 语法高亮样式覆盖
|
|
16
|
+
:global {
|
|
17
|
+
color: #888d9d;
|
|
18
|
+
// 关键字 - 蓝色
|
|
19
|
+
.ͼb {
|
|
20
|
+
color: #997bbf !important;
|
|
21
|
+
font-weight: 400;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
// 类型名 - 紫色
|
|
25
|
+
.ͼi {
|
|
26
|
+
color: #997bbf !important;
|
|
27
|
+
font-weight: 400;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
// 字符串 - 绿色
|
|
31
|
+
.ͼc,
|
|
32
|
+
.ͼf,
|
|
33
|
+
.ͼe {
|
|
34
|
+
color: #9dbd93 !important;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
// 数字 - 橙色
|
|
38
|
+
.ͼd {
|
|
39
|
+
color: #e57271 !important;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
// 注释 - 灰色
|
|
43
|
+
.ͼm {
|
|
44
|
+
color: #999999 !important;
|
|
45
|
+
font-style: italic;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
// 变量名 - 黑色
|
|
49
|
+
.ͼg {
|
|
50
|
+
color: #000000 !important;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
// 表名、列名 - 深绿色
|
|
54
|
+
.ͼh {
|
|
55
|
+
color: #006633 !important;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.cm-dynamic-param {
|
|
59
|
+
color: #4484d2 !important;
|
|
60
|
+
|
|
61
|
+
.ͼi,
|
|
62
|
+
.ͼb,
|
|
63
|
+
.ͼc,
|
|
64
|
+
.ͼd,
|
|
65
|
+
.ͼe,
|
|
66
|
+
.ͼf,
|
|
67
|
+
.ͼg,
|
|
68
|
+
.ͼh {
|
|
69
|
+
color: #4484d2 !important;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
// 自定义关键词高亮样式
|
|
76
|
+
:global {
|
|
77
|
+
.cm-custom-keyword {
|
|
78
|
+
color: #997bbf !important;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.cm-editor {
|
|
82
|
+
outline: none !important;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.cm-activeLine {
|
|
86
|
+
background-color: rgb(204 238 255 / 60%) !important;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
// 确保自定义关键词在语法高亮之上
|
|
90
|
+
.cm-editor .cm-line .cm-custom-keyword {
|
|
91
|
+
position: relative;
|
|
92
|
+
z-index: 10;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
:global {
|
|
97
|
+
.cm-scroller {
|
|
98
|
+
font-size: 12px;
|
|
99
|
+
background-color: #f9fbfc;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.cm-gutters {
|
|
103
|
+
background-color: #f6f6f9 !important;
|
|
104
|
+
border: none !important;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.cm-gutterElement {
|
|
108
|
+
color: #999 !important;
|
|
109
|
+
|
|
110
|
+
span[title='Fold line'] {
|
|
111
|
+
display: inline-block;
|
|
112
|
+
transform: translateY(-5px);
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.cm-tooltip {
|
|
117
|
+
padding: 10px !important;
|
|
118
|
+
background-color: #fff !important;
|
|
119
|
+
border: none !important;
|
|
120
|
+
border-radius: 4px !important;
|
|
121
|
+
box-shadow: 0 0 10px 0 rgba(154, 153, 153, 0.2);
|
|
122
|
+
|
|
123
|
+
.cm-completionLabel {
|
|
124
|
+
color: #666 !important;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.cm-completionMatchedText {
|
|
128
|
+
color: #ff9600 !important;
|
|
129
|
+
text-decoration: none !important;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.cm-tooltip-autocomplete ul li {
|
|
134
|
+
display: flex !important;
|
|
135
|
+
margin-bottom: 5px !important;
|
|
136
|
+
line-height: 30px !important;
|
|
137
|
+
border-radius: 4px !important;
|
|
138
|
+
|
|
139
|
+
.cm-completionDetail {
|
|
140
|
+
margin-left: auto !important;
|
|
141
|
+
padding-right: 10px !important;
|
|
142
|
+
color: #999 !important;
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.cm-tooltip.cm-tooltip-autocomplete > ul {
|
|
147
|
+
max-height: 220px !important;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.cm-tooltip-autocomplete ul li[aria-selected] {
|
|
151
|
+
background-color: #f1f8ff !important;
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { type ReactCodeMirrorRef } from '@uiw/react-codemirror';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { type SqlDialectType } from './sql-language';
|
|
4
|
+
export type YkSqlEditProps = {
|
|
5
|
+
value: string;
|
|
6
|
+
previewValue?: string;
|
|
7
|
+
preview?: boolean;
|
|
8
|
+
placeholder?: string;
|
|
9
|
+
height?: string;
|
|
10
|
+
width?: string;
|
|
11
|
+
onChange: (value: string) => void;
|
|
12
|
+
datasourceType?: SqlDialectType;
|
|
13
|
+
keywordOptions?: {
|
|
14
|
+
keywords: string[];
|
|
15
|
+
functions: string[];
|
|
16
|
+
};
|
|
17
|
+
dataTestId?: string;
|
|
18
|
+
};
|
|
19
|
+
declare const YkSqlEdit: React.ForwardRefExoticComponent<YkSqlEditProps & React.RefAttributes<ReactCodeMirrorRef>>;
|
|
20
|
+
export default YkSqlEdit;
|
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
// src/business/YkSqlEdit/index.tsx
|
|
2
|
+
import {
|
|
3
|
+
autocompletion
|
|
4
|
+
} from "@codemirror/autocomplete";
|
|
5
|
+
import { MySQL, sql } from "@codemirror/lang-sql";
|
|
6
|
+
import { Decoration, ViewPlugin } from "@codemirror/view";
|
|
7
|
+
import CodeMirror from "@uiw/react-codemirror";
|
|
8
|
+
import React from "react";
|
|
9
|
+
import customStyles from "./code-mirror-custom.module.less";
|
|
10
|
+
import { sqlFunctions, sqlKeywords } from "./sql-language";
|
|
11
|
+
function dynamicParamHighlighter() {
|
|
12
|
+
return ViewPlugin.fromClass(
|
|
13
|
+
class {
|
|
14
|
+
constructor(view) {
|
|
15
|
+
this.decorations = this.buildDecorations(view);
|
|
16
|
+
}
|
|
17
|
+
update(update) {
|
|
18
|
+
if (update.docChanged || update.viewportChanged) {
|
|
19
|
+
this.decorations = this.buildDecorations(update.view);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
buildDecorations(view) {
|
|
23
|
+
const widgets = [];
|
|
24
|
+
const regex = /\{\{.*?\}\}/g;
|
|
25
|
+
for (const { from, to } of view.visibleRanges) {
|
|
26
|
+
const text = view.state.doc.sliceString(from, to);
|
|
27
|
+
let match;
|
|
28
|
+
while ((match = regex.exec(text)) !== null) {
|
|
29
|
+
const start = from + match.index;
|
|
30
|
+
const end = start + match[0].length;
|
|
31
|
+
widgets.push(Decoration.mark({ class: "cm-dynamic-param" }).range(start, end));
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
return Decoration.set(widgets, true);
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
decorations: (v) => v.decorations
|
|
39
|
+
}
|
|
40
|
+
);
|
|
41
|
+
}
|
|
42
|
+
function customKeywordHighlighter(allKeywords) {
|
|
43
|
+
return ViewPlugin.fromClass(
|
|
44
|
+
class {
|
|
45
|
+
constructor(view) {
|
|
46
|
+
this.decorations = this.buildDecorations(view);
|
|
47
|
+
}
|
|
48
|
+
update(update) {
|
|
49
|
+
if (update.docChanged || update.viewportChanged) {
|
|
50
|
+
this.decorations = this.buildDecorations(update.view);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
buildDecorations(view) {
|
|
54
|
+
if (!allKeywords.length)
|
|
55
|
+
return Decoration.none;
|
|
56
|
+
const widgets = [];
|
|
57
|
+
const regex = new RegExp(`\\b(${allKeywords.join("|")})\\b`, "gi");
|
|
58
|
+
for (const { from, to } of view.visibleRanges) {
|
|
59
|
+
const text = view.state.doc.sliceString(from, to);
|
|
60
|
+
let match;
|
|
61
|
+
while ((match = regex.exec(text)) !== null) {
|
|
62
|
+
const start = from + match.index;
|
|
63
|
+
const end = start + match[0].length;
|
|
64
|
+
widgets.push(
|
|
65
|
+
Decoration.mark({
|
|
66
|
+
class: "cm-custom-keyword",
|
|
67
|
+
attributes: { "data-keyword": match[0] }
|
|
68
|
+
}).range(start, end)
|
|
69
|
+
);
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
return Decoration.set(widgets, true);
|
|
73
|
+
}
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
decorations: (v) => v.decorations
|
|
77
|
+
}
|
|
78
|
+
);
|
|
79
|
+
}
|
|
80
|
+
function buildCompletions(keywordOptions) {
|
|
81
|
+
var _a, _b;
|
|
82
|
+
const keywords = (_a = keywordOptions == null ? void 0 : keywordOptions.keywords) != null ? _a : [];
|
|
83
|
+
const functions = (_b = keywordOptions == null ? void 0 : keywordOptions.functions) != null ? _b : [];
|
|
84
|
+
const allKeywords = [.../* @__PURE__ */ new Set([...keywords, ...functions])];
|
|
85
|
+
return (context) => {
|
|
86
|
+
var _a2, _b2;
|
|
87
|
+
const word = context.matchBefore(/\w*/);
|
|
88
|
+
if ((word == null ? void 0 : word.from) === (word == null ? void 0 : word.to) && !context.explicit)
|
|
89
|
+
return null;
|
|
90
|
+
const search = ((_a2 = word == null ? void 0 : word.text) != null ? _a2 : "").toLowerCase();
|
|
91
|
+
const options = allKeywords.filter((kw) => kw.toLowerCase().includes(search)).map((kw) => ({
|
|
92
|
+
label: kw,
|
|
93
|
+
detail: keywords.includes(kw) ? "关键字" : functions.includes(kw) ? "函数" : "",
|
|
94
|
+
boost: kw.toLowerCase().startsWith(search) ? 10 : 1
|
|
95
|
+
})).sort((a, b) => {
|
|
96
|
+
var _a3, _b3;
|
|
97
|
+
return ((_a3 = b.boost) != null ? _a3 : 0) - ((_b3 = a.boost) != null ? _b3 : 0);
|
|
98
|
+
});
|
|
99
|
+
return {
|
|
100
|
+
from: (_b2 = word == null ? void 0 : word.from) != null ? _b2 : 0,
|
|
101
|
+
options: options.slice(0, 50)
|
|
102
|
+
};
|
|
103
|
+
};
|
|
104
|
+
}
|
|
105
|
+
var YkSqlEdit = React.forwardRef((props, ref) => {
|
|
106
|
+
const {
|
|
107
|
+
value,
|
|
108
|
+
previewValue,
|
|
109
|
+
preview,
|
|
110
|
+
placeholder = "请输入查询语句",
|
|
111
|
+
height = "100%",
|
|
112
|
+
width = "100%",
|
|
113
|
+
onChange,
|
|
114
|
+
datasourceType,
|
|
115
|
+
keywordOptions,
|
|
116
|
+
dataTestId = "native-query-editor"
|
|
117
|
+
} = props;
|
|
118
|
+
const resolvedKeywordOptions = React.useMemo(() => {
|
|
119
|
+
if (keywordOptions)
|
|
120
|
+
return keywordOptions;
|
|
121
|
+
if (!datasourceType)
|
|
122
|
+
return { keywords: [], functions: [] };
|
|
123
|
+
return {
|
|
124
|
+
keywords: sqlKeywords(datasourceType),
|
|
125
|
+
functions: sqlFunctions(datasourceType)
|
|
126
|
+
};
|
|
127
|
+
}, [datasourceType, keywordOptions]);
|
|
128
|
+
const allKeywords = React.useMemo(() => {
|
|
129
|
+
var _a, _b;
|
|
130
|
+
const keywords = (_a = resolvedKeywordOptions.keywords) != null ? _a : [];
|
|
131
|
+
const functions = (_b = resolvedKeywordOptions.functions) != null ? _b : [];
|
|
132
|
+
return [.../* @__PURE__ */ new Set([...keywords, ...functions])];
|
|
133
|
+
}, [resolvedKeywordOptions]);
|
|
134
|
+
const customCompletions = React.useMemo(() => buildCompletions(resolvedKeywordOptions), [resolvedKeywordOptions]);
|
|
135
|
+
return /* @__PURE__ */ React.createElement(
|
|
136
|
+
CodeMirror,
|
|
137
|
+
{
|
|
138
|
+
ref,
|
|
139
|
+
value: preview ? previewValue != null ? previewValue : value : value,
|
|
140
|
+
className: `${customStyles.codeMirrorCustom} ${preview ? customStyles.disabled : ""}`,
|
|
141
|
+
"data-testid": dataTestId,
|
|
142
|
+
placeholder,
|
|
143
|
+
height,
|
|
144
|
+
width,
|
|
145
|
+
editable: !preview,
|
|
146
|
+
autoCorrect: "off",
|
|
147
|
+
extensions: [
|
|
148
|
+
sql({ dialect: MySQL }),
|
|
149
|
+
dynamicParamHighlighter(),
|
|
150
|
+
customKeywordHighlighter(allKeywords),
|
|
151
|
+
autocompletion({
|
|
152
|
+
override: [customCompletions]
|
|
153
|
+
})
|
|
154
|
+
],
|
|
155
|
+
onChange: (next) => onChange(next),
|
|
156
|
+
basicSetup: {
|
|
157
|
+
closeBrackets: true,
|
|
158
|
+
autocompletion: true,
|
|
159
|
+
bracketMatching: true,
|
|
160
|
+
highlightSpecialChars: true,
|
|
161
|
+
searchKeymap: true,
|
|
162
|
+
history: true,
|
|
163
|
+
historyKeymap: true,
|
|
164
|
+
drawSelection: true,
|
|
165
|
+
syntaxHighlighting: true,
|
|
166
|
+
defaultKeymap: true,
|
|
167
|
+
dropCursor: true,
|
|
168
|
+
highlightSelectionMatches: true,
|
|
169
|
+
completionKeymap: true,
|
|
170
|
+
highlightActiveLineGutter: true
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
);
|
|
174
|
+
});
|
|
175
|
+
YkSqlEdit.displayName = "YkSqlEdit";
|
|
176
|
+
var YkSqlEdit_default = YkSqlEdit;
|
|
177
|
+
export {
|
|
178
|
+
YkSqlEdit_default as default
|
|
179
|
+
};
|
|
180
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/business/YkSqlEdit/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import {\n autocompletion,\n type Completion,\n type CompletionContext,\n type CompletionResult,\n} from '@codemirror/autocomplete';\nimport { MySQL, sql } from '@codemirror/lang-sql';\nimport { Decoration, type EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';\nimport CodeMirror, { type ReactCodeMirrorRef } from '@uiw/react-codemirror';\nimport React from 'react';\nimport customStyles from './code-mirror-custom.module.less';\nimport { type SqlDialectType, sqlFunctions, sqlKeywords } from './sql-language';\n\nexport type YkSqlEditProps = {\n value: string;\n previewValue?: string;\n preview?: boolean;\n placeholder?: string;\n height?: string;\n width?: string;\n onChange: (value: string) => void;\n\n datasourceType?: SqlDialectType;\n keywordOptions?: {\n keywords: string[];\n functions: string[];\n };\n dataTestId?: string;\n};\n\n// 动态参数高亮插件\nfunction dynamicParamHighlighter() {\n return ViewPlugin.fromClass(\n class {\n decorations;\n constructor(view: EditorView) {\n this.decorations = this.buildDecorations(view);\n }\n update(update: ViewUpdate) {\n if (update.docChanged || update.viewportChanged) {\n this.decorations = this.buildDecorations(update.view);\n }\n }\n buildDecorations(view: EditorView) {\n const widgets = [];\n const regex = /\\{\\{.*?\\}\\}/g;\n for (const { from, to } of view.visibleRanges) {\n const text = view.state.doc.sliceString(from, to);\n let match;\n while ((match = regex.exec(text)) !== null) {\n const start = from + match.index;\n const end = start + match[0].length;\n widgets.push(Decoration.mark({ class: 'cm-dynamic-param' }).range(start, end));\n }\n }\n return Decoration.set(widgets, true);\n }\n },\n {\n decorations: (v) => v.decorations,\n },\n );\n}\n\nfunction customKeywordHighlighter(allKeywords: string[]) {\n return ViewPlugin.fromClass(\n class {\n decorations;\n constructor(view: EditorView) {\n this.decorations = this.buildDecorations(view);\n }\n update(update: ViewUpdate) {\n if (update.docChanged || update.viewportChanged) {\n this.decorations = this.buildDecorations(update.view);\n }\n }\n buildDecorations(view: EditorView) {\n if (!allKeywords.length) return Decoration.none;\n\n const widgets = [];\n const regex = new RegExp(`\\\\b(${allKeywords.join('|')})\\\\b`, 'gi');\n\n for (const { from, to } of view.visibleRanges) {\n const text = view.state.doc.sliceString(from, to);\n let match;\n while ((match = regex.exec(text)) !== null) {\n const start = from + match.index;\n const end = start + match[0].length;\n widgets.push(\n Decoration.mark({\n class: 'cm-custom-keyword',\n attributes: { 'data-keyword': match[0] },\n }).range(start, end),\n );\n }\n }\n return Decoration.set(widgets, true);\n }\n },\n {\n decorations: (v) => v.decorations,\n },\n );\n}\n\nfunction buildCompletions(keywordOptions?: YkSqlEditProps['keywordOptions']) {\n const keywords = keywordOptions?.keywords ?? [];\n const functions = keywordOptions?.functions ?? [];\n const allKeywords = [...new Set([...keywords, ...functions])];\n\n return (context: CompletionContext): CompletionResult | null => {\n const word = context.matchBefore(/\\w*/);\n if (word?.from === word?.to && !context.explicit) return null;\n\n const search = (word?.text ?? '').toLowerCase();\n const options: Completion[] = allKeywords\n .filter((kw) => kw.toLowerCase().includes(search))\n .map((kw) => ({\n label: kw,\n detail: keywords.includes(kw) ? '关键字' : functions.includes(kw) ? '函数' : '',\n boost: kw.toLowerCase().startsWith(search) ? 10 : 1,\n }))\n .sort((a, b) => (b.boost ?? 0) - (a.boost ?? 0));\n\n return {\n from: word?.from ?? 0,\n options: options.slice(0, 50),\n };\n };\n}\n\nconst YkSqlEdit = React.forwardRef<ReactCodeMirrorRef, YkSqlEditProps>((props, ref) => {\n const {\n value,\n previewValue,\n preview,\n placeholder = '请输入查询语句',\n height = '100%',\n width = '100%',\n onChange,\n datasourceType,\n keywordOptions,\n dataTestId = 'native-query-editor',\n } = props;\n\n const resolvedKeywordOptions = React.useMemo(() => {\n if (keywordOptions) return keywordOptions;\n if (!datasourceType) return { keywords: [], functions: [] };\n return {\n keywords: sqlKeywords(datasourceType),\n functions: sqlFunctions(datasourceType),\n };\n }, [datasourceType, keywordOptions]);\n\n const allKeywords = React.useMemo(() => {\n const keywords = resolvedKeywordOptions.keywords ?? [];\n const functions = resolvedKeywordOptions.functions ?? [];\n return [...new Set([...keywords, ...functions])];\n }, [resolvedKeywordOptions]);\n\n const customCompletions = React.useMemo(() => buildCompletions(resolvedKeywordOptions), [resolvedKeywordOptions]);\n\n return (\n <CodeMirror\n ref={ref}\n value={preview ? (previewValue ?? value) : value}\n className={`${customStyles.codeMirrorCustom} ${preview ? customStyles.disabled : ''}`}\n data-testid={dataTestId}\n placeholder={placeholder}\n height={height}\n width={width}\n editable={!preview}\n autoCorrect='off'\n extensions={[\n sql({ dialect: MySQL }),\n dynamicParamHighlighter(),\n customKeywordHighlighter(allKeywords),\n autocompletion({\n override: [customCompletions],\n }),\n ]}\n onChange={(next) => onChange(next)}\n basicSetup={{\n closeBrackets: true,\n autocompletion: true,\n bracketMatching: true,\n highlightSpecialChars: true,\n searchKeymap: true,\n history: true,\n historyKeymap: true,\n drawSelection: true,\n syntaxHighlighting: true,\n defaultKeymap: true,\n dropCursor: true,\n highlightSelectionMatches: true,\n completionKeymap: true,\n highlightActiveLineGutter: true,\n }}\n />\n );\n});\n\nYkSqlEdit.displayName = 'YkSqlEdit';\n\nexport default YkSqlEdit;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["_a", "_b"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export type SqlDialectType = 'starrocks' | 'impala' | 'hive' | string;
|
|
2
|
+
export declare const defaultKeywords: string[];
|
|
3
|
+
export declare const defaultFunctions: string[];
|
|
4
|
+
export declare const srKeywords: string[];
|
|
5
|
+
export declare const srFunctions: string[];
|
|
6
|
+
export declare const impalaKeywords: string[];
|
|
7
|
+
export declare const impalaFunctions: string[];
|
|
8
|
+
export declare const hiveKeywords: string[];
|
|
9
|
+
export declare const hiveFunctions: string[];
|
|
10
|
+
export declare const sqlKeywords: (type: SqlDialectType) => string[];
|
|
11
|
+
export declare const sqlFunctions: (type: SqlDialectType) => string[];
|