@easyv/biz-components 0.0.52 → 0.0.54
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/README.md +2 -2
- package/dist/components/easyv-monaco-editor/easyv-monaco-editor.es.js +35 -14
- package/dist/components/easyv-monaco-editor/easyv-monaco-editor.es.js.map +1 -1
- package/dist/components/easyv-monaco-editor/types.d.ts +10 -3
- package/dist/hooks/use-watch-value/use-watch-value.es.js +1 -1
- package/dist/hooks/use-watch-value/use-watch-value.es.js.map +1 -1
- package/dist/stats.html +1 -1
- package/package.json +2 -2
- /package/dist/{style.css → style.pkg.css} +0 -0
- /package/dist/{index.css → tailwindcss.pkg.css} +0 -0
package/README.md
CHANGED
|
@@ -17,8 +17,8 @@ import { Button } from 'easyv-biz-components'
|
|
|
17
17
|
**_在你项目的入口文件引入下面两个样式_**
|
|
18
18
|
|
|
19
19
|
```
|
|
20
|
-
import '@easyv/biz-components/dist/
|
|
21
|
-
import '@easyv/biz-components/dist/style.css';
|
|
20
|
+
import '@easyv/biz-components/dist/tailwindcss.pkg.css';
|
|
21
|
+
import '@easyv/biz-components/dist/style.pkg.css';
|
|
22
22
|
```
|
|
23
23
|
|
|
24
24
|
## 按需加载
|
|
@@ -12,17 +12,21 @@ function EasyvMonacoEditor(props) {
|
|
|
12
12
|
code,
|
|
13
13
|
monacoEditorOptions,
|
|
14
14
|
globalVarType = "",
|
|
15
|
-
|
|
15
|
+
monaco,
|
|
16
16
|
onChange,
|
|
17
17
|
onCodeMark,
|
|
18
|
-
onBlur
|
|
18
|
+
onBlur,
|
|
19
|
+
ignoreErrorCodes,
|
|
20
|
+
initJSCompilerOptions,
|
|
21
|
+
constructionOptions,
|
|
22
|
+
customTheme
|
|
19
23
|
} = props;
|
|
20
24
|
const editorRef = useRef(null);
|
|
21
25
|
const editorInstanceRef = useRef();
|
|
22
26
|
const globalDataLibRef = useRef();
|
|
23
27
|
const initFn = useMemoizedFn(() => {
|
|
24
|
-
|
|
25
|
-
target:
|
|
28
|
+
monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
|
|
29
|
+
target: monaco.languages.typescript.ScriptTarget.ESNext,
|
|
26
30
|
allowNonTsExtensions: true,
|
|
27
31
|
allowJs: true,
|
|
28
32
|
checkJs: true,
|
|
@@ -30,18 +34,19 @@ function EasyvMonacoEditor(props) {
|
|
|
30
34
|
noLib: false,
|
|
31
35
|
lib: ["esnext", "dom"],
|
|
32
36
|
// dom 会带上浏览器里可使用的方法 如 console, window
|
|
33
|
-
typeRoots: ["node_modules/@types"]
|
|
37
|
+
typeRoots: ["node_modules/@types"],
|
|
38
|
+
...initJSCompilerOptions
|
|
34
39
|
});
|
|
35
|
-
|
|
40
|
+
monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
|
|
36
41
|
noSemanticValidation: false,
|
|
37
42
|
// 启用语义校验
|
|
38
43
|
noSyntaxValidation: false,
|
|
39
44
|
// 启用语法校验
|
|
40
|
-
diagnosticCodesToIgnore: []
|
|
45
|
+
diagnosticCodesToIgnore: ignoreErrorCodes ?? []
|
|
41
46
|
// 忽略特定错误
|
|
42
47
|
});
|
|
43
48
|
if (editorRef.current) {
|
|
44
|
-
editorInstanceRef.current =
|
|
49
|
+
editorInstanceRef.current = monaco.editor.create(editorRef.current, {
|
|
45
50
|
value: code,
|
|
46
51
|
language: languageMode,
|
|
47
52
|
theme: "vs-dark",
|
|
@@ -62,8 +67,9 @@ function EasyvMonacoEditor(props) {
|
|
|
62
67
|
// 当输入触发字符(如点号.)时自动显示建议
|
|
63
68
|
hover: { enabled: true },
|
|
64
69
|
// 必须启用 hover
|
|
65
|
-
renderValidationDecorations: "on"
|
|
70
|
+
renderValidationDecorations: "on",
|
|
66
71
|
// 确保错误渲染开启
|
|
72
|
+
...constructionOptions
|
|
67
73
|
});
|
|
68
74
|
if (!editorInstanceRef.current) {
|
|
69
75
|
return;
|
|
@@ -72,8 +78,8 @@ function EasyvMonacoEditor(props) {
|
|
|
72
78
|
const currentValue = editorInstanceRef.current.getValue();
|
|
73
79
|
onChange == null ? void 0 : onChange(currentValue);
|
|
74
80
|
});
|
|
75
|
-
|
|
76
|
-
const markers =
|
|
81
|
+
monaco.editor.onDidChangeMarkers(() => {
|
|
82
|
+
const markers = monaco.editor.getModelMarkers({});
|
|
77
83
|
onCodeMark == null ? void 0 : onCodeMark(markers);
|
|
78
84
|
});
|
|
79
85
|
}
|
|
@@ -107,7 +113,7 @@ function EasyvMonacoEditor(props) {
|
|
|
107
113
|
if (!model) {
|
|
108
114
|
return;
|
|
109
115
|
}
|
|
110
|
-
|
|
116
|
+
monaco.editor.setModelLanguage(model, newLanguage);
|
|
111
117
|
}
|
|
112
118
|
});
|
|
113
119
|
useWatchValue({
|
|
@@ -118,7 +124,8 @@ function EasyvMonacoEditor(props) {
|
|
|
118
124
|
return;
|
|
119
125
|
}
|
|
120
126
|
(_a = editorInstanceRef.current) == null ? void 0 : _a.updateOptions(monacoEditorOptions);
|
|
121
|
-
}
|
|
127
|
+
},
|
|
128
|
+
options: { immediate: true }
|
|
122
129
|
});
|
|
123
130
|
useWatchValue({
|
|
124
131
|
value: globalVarType,
|
|
@@ -126,7 +133,7 @@ function EasyvMonacoEditor(props) {
|
|
|
126
133
|
if (globalDataLibRef.current) {
|
|
127
134
|
globalDataLibRef.current.dispose();
|
|
128
135
|
}
|
|
129
|
-
globalDataLibRef.current =
|
|
136
|
+
globalDataLibRef.current = monaco.languages.typescript.javascriptDefaults.addExtraLib(
|
|
130
137
|
globalVarType,
|
|
131
138
|
"global-data.d.ts"
|
|
132
139
|
);
|
|
@@ -135,6 +142,20 @@ function EasyvMonacoEditor(props) {
|
|
|
135
142
|
immediate: true
|
|
136
143
|
}
|
|
137
144
|
});
|
|
145
|
+
useWatchValue({
|
|
146
|
+
value: customTheme,
|
|
147
|
+
callback() {
|
|
148
|
+
if (!customTheme) {
|
|
149
|
+
return;
|
|
150
|
+
}
|
|
151
|
+
const themeName = "customTheme";
|
|
152
|
+
monaco.editor.defineTheme(themeName, customTheme);
|
|
153
|
+
monaco.editor.setTheme(themeName);
|
|
154
|
+
},
|
|
155
|
+
options: {
|
|
156
|
+
immediate: true
|
|
157
|
+
}
|
|
158
|
+
});
|
|
138
159
|
return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: editorRef, className: classNames("biz-min-h-[200px]", className), style });
|
|
139
160
|
}
|
|
140
161
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"easyv-monaco-editor.es.js","sources":["../../../src/components/easyv-monaco-editor/easyv-monaco-editor.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { useMemoizedFn } from 'ahooks';\nimport classNames from 'classnames';\nimport type * as
|
|
1
|
+
{"version":3,"file":"easyv-monaco-editor.es.js","sources":["../../../src/components/easyv-monaco-editor/easyv-monaco-editor.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { useMemoizedFn } from 'ahooks';\nimport classNames from 'classnames';\nimport type * as monacoType from 'monaco-editor/esm/vs/editor/editor.api';\nimport { useInitialized, useWatchValue } from '@/hooks';\nimport { EasyvMonacoEditorProps } from './types';\n\nexport function EasyvMonacoEditor(props: EasyvMonacoEditorProps) {\n const {\n className,\n style,\n languageMode,\n code,\n monacoEditorOptions,\n globalVarType = '',\n monaco,\n onChange,\n onCodeMark,\n onBlur,\n ignoreErrorCodes,\n initJSCompilerOptions,\n constructionOptions,\n customTheme,\n } = props;\n const editorRef = useRef<HTMLDivElement | null>(null);\n const editorInstanceRef = useRef<monacoType.editor.IStandaloneCodeEditor>();\n const globalDataLibRef = useRef<monacoType.IDisposable>();\n\n const initFn = useMemoizedFn(() => {\n // 配置 JavaScript 语言服务\n monaco.languages.typescript.javascriptDefaults.setCompilerOptions({\n target: monaco.languages.typescript.ScriptTarget.ESNext,\n allowNonTsExtensions: true,\n allowJs: true,\n checkJs: true, // 关键：启用 JS 校验\n noLib: false,\n lib: ['esnext', 'dom'], // dom 会带上浏览器里可使用的方法 如 console, window\n typeRoots: ['node_modules/@types'],\n ...initJSCompilerOptions,\n });\n\n monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({\n noSemanticValidation: false, // 启用语义校验\n noSyntaxValidation: false, // 启用语法校验\n diagnosticCodesToIgnore: ignoreErrorCodes ?? [], // 忽略特定错误\n });\n\n if (editorRef.current) {\n editorInstanceRef.current = monaco.editor.create(editorRef.current, {\n value: code,\n language: languageMode,\n theme: 'vs-dark',\n automaticLayout: true,\n minimap: {\n enabled: false,\n },\n // 启用智能提示的关键设置\n suggest: {\n showKeywords: true, // 关键字建议\n showSnippets: true, // 代码片段建议\n },\n quickSuggestions: true, // 在输入时自动显示建议列表\n suggestOnTriggerCharacters: true, // 当输入触发字符(如点号.)时自动显示建议\n hover: { enabled: true }, // 必须启用 hover\n renderValidationDecorations: 'on', // 确保错误渲染开启\n ...constructionOptions,\n });\n if (!editorInstanceRef.current) {\n return;\n }\n editorInstanceRef.current.onDidChangeModelContent(() => {\n const currentValue = editorInstanceRef.current!.getValue();\n // 更新状态\n onChange?.(currentValue);\n });\n\n // 监听诊断变化\n monaco.editor.onDidChangeMarkers(() => {\n const markers = monaco.editor.getModelMarkers({});\n onCodeMark?.(markers);\n });\n }\n // 添加失焦事件监听\n const disposable = editorInstanceRef.current!.onDidBlurEditorText(() => {\n const currentValue = editorInstanceRef.current!.getValue();\n onBlur?.(currentValue);\n });\n return () => {\n disposable.dispose();\n editorInstanceRef.current?.dispose();\n };\n });\n\n useInitialized(initFn);\n\n useWatchValue({\n value: code,\n callback: () => {\n if (editorInstanceRef.current) {\n // 获取当前编辑器的值\n const currentValue = editorInstanceRef.current.getValue();\n // 如果状态中的value和编辑器的当前值不同，则更新编辑器\n if (currentValue !== code) {\n editorInstanceRef.current.setValue(code);\n }\n }\n },\n });\n\n useWatchValue({\n value: languageMode,\n callback(newLanguage) {\n const model = editorInstanceRef.current?.getModel();\n if (!model) {\n return;\n }\n monaco.editor.setModelLanguage(model, newLanguage);\n },\n });\n\n useWatchValue({\n value: monacoEditorOptions,\n callback: () => {\n if (!monacoEditorOptions) {\n return;\n }\n editorInstanceRef.current?.updateOptions(monacoEditorOptions);\n },\n options: { immediate: true },\n });\n\n useWatchValue({\n value: globalVarType,\n callback() {\n if (globalDataLibRef.current) {\n globalDataLibRef.current.dispose();\n }\n globalDataLibRef.current = monaco.languages.typescript.javascriptDefaults.addExtraLib(\n globalVarType,\n 'global-data.d.ts',\n );\n },\n options: {\n immediate: true,\n },\n });\n\n useWatchValue({\n value: customTheme,\n callback() {\n if (!customTheme) {\n return;\n }\n const themeName = 'customTheme';\n monaco.editor.defineTheme(themeName, customTheme);\n monaco.editor.setTheme(themeName);\n },\n options: {\n immediate: true,\n },\n });\n\n return (\n <div ref={editorRef} className={classNames('biz-min-h-[200px]', className)} style={style} />\n );\n}\n"],"names":["jsx"],"mappings":";;;;;;AAOO,SAAS,kBAAkB,OAA+B;AACzD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AACE,QAAA,YAAY,OAA8B,IAAI;AACpD,QAAM,oBAAoB,OAAgD;AAC1E,QAAM,mBAAmB,OAA+B;AAElD,QAAA,SAAS,cAAc,MAAM;AAE1B,WAAA,UAAU,WAAW,mBAAmB,mBAAmB;AAAA,MAChE,QAAQ,OAAO,UAAU,WAAW,aAAa;AAAA,MACjD,sBAAsB;AAAA,MACtB,SAAS;AAAA,MACT,SAAS;AAAA;AAAA,MACT,OAAO;AAAA,MACP,KAAK,CAAC,UAAU,KAAK;AAAA;AAAA,MACrB,WAAW,CAAC,qBAAqB;AAAA,MACjC,GAAG;AAAA,IAAA,CACJ;AAEM,WAAA,UAAU,WAAW,mBAAmB,sBAAsB;AAAA,MACnE,sBAAsB;AAAA;AAAA,MACtB,oBAAoB;AAAA;AAAA,MACpB,yBAAyB,oBAAoB,CAAA;AAAA;AAAA,IAAC,CAC/C;AAED,QAAI,UAAU,SAAS;AACrB,wBAAkB,UAAU,OAAO,OAAO,OAAO,UAAU,SAAS;AAAA,QAClE,OAAO;AAAA,QACP,UAAU;AAAA,QACV,OAAO;AAAA,QACP,iBAAiB;AAAA,QACjB,SAAS;AAAA,UACP,SAAS;AAAA,QACX;AAAA;AAAA,QAEA,SAAS;AAAA,UACP,cAAc;AAAA;AAAA,UACd,cAAc;AAAA;AAAA,QAChB;AAAA,QACA,kBAAkB;AAAA;AAAA,QAClB,4BAA4B;AAAA;AAAA,QAC5B,OAAO,EAAE,SAAS,KAAK;AAAA;AAAA,QACvB,6BAA6B;AAAA;AAAA,QAC7B,GAAG;AAAA,MAAA,CACJ;AACG,UAAA,CAAC,kBAAkB,SAAS;AAC9B;AAAA,MAAA;AAEgB,wBAAA,QAAQ,wBAAwB,MAAM;AAChD,cAAA,eAAe,kBAAkB,QAAS,SAAS;AAEzD,6CAAW;AAAA,MAAY,CACxB;AAGM,aAAA,OAAO,mBAAmB,MAAM;AACrC,cAAM,UAAU,OAAO,OAAO,gBAAgB,CAAA,CAAE;AAChD,iDAAa;AAAA,MAAO,CACrB;AAAA,IAAA;AAGH,UAAM,aAAa,kBAAkB,QAAS,oBAAoB,MAAM;AAChE,YAAA,eAAe,kBAAkB,QAAS,SAAS;AACzD,uCAAS;AAAA,IAAY,CACtB;AACD,WAAO,MAAM;;AACX,iBAAW,QAAQ;AACnB,8BAAkB,YAAlB,mBAA2B;AAAA,IAC7B;AAAA,EAAA,CACD;AAED,iBAAe,MAAM;AAEP,gBAAA;AAAA,IACZ,OAAO;AAAA,IACP,UAAU,MAAM;AACd,UAAI,kBAAkB,SAAS;AAEvB,cAAA,eAAe,kBAAkB,QAAQ,SAAS;AAExD,YAAI,iBAAiB,MAAM;AACP,4BAAA,QAAQ,SAAS,IAAI;AAAA,QAAA;AAAA,MACzC;AAAA,IACF;AAAA,EACF,CACD;AAEa,gBAAA;AAAA,IACZ,OAAO;AAAA,IACP,SAAS,aAAa;;AACd,YAAA,SAAQ,uBAAkB,YAAlB,mBAA2B;AACzC,UAAI,CAAC,OAAO;AACV;AAAA,MAAA;AAEK,aAAA,OAAO,iBAAiB,OAAO,WAAW;AAAA,IAAA;AAAA,EACnD,CACD;AAEa,gBAAA;AAAA,IACZ,OAAO;AAAA,IACP,UAAU,MAAM;;AACd,UAAI,CAAC,qBAAqB;AACxB;AAAA,MAAA;AAEgB,8BAAA,YAAA,mBAAS,cAAc;AAAA,IAC3C;AAAA,IACA,SAAS,EAAE,WAAW,KAAK;AAAA,EAAA,CAC5B;AAEa,gBAAA;AAAA,IACZ,OAAO;AAAA,IACP,WAAW;AACT,UAAI,iBAAiB,SAAS;AAC5B,yBAAiB,QAAQ,QAAQ;AAAA,MAAA;AAEnC,uBAAiB,UAAU,OAAO,UAAU,WAAW,mBAAmB;AAAA,QACxE;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,WAAW;AAAA,IAAA;AAAA,EACb,CACD;AAEa,gBAAA;AAAA,IACZ,OAAO;AAAA,IACP,WAAW;AACT,UAAI,CAAC,aAAa;AAChB;AAAA,MAAA;AAEF,YAAM,YAAY;AACX,aAAA,OAAO,YAAY,WAAW,WAAW;AACzC,aAAA,OAAO,SAAS,SAAS;AAAA,IAClC;AAAA,IACA,SAAS;AAAA,MACP,WAAW;AAAA,IAAA;AAAA,EACb,CACD;AAGC,SAAAA,sCAAC,SAAI,KAAK,WAAW,WAAW,WAAW,qBAAqB,SAAS,GAAG,MAAc,CAAA;AAE9F;"}
|
|
@@ -2,7 +2,7 @@ import type * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
|
|
|
2
2
|
export interface EasyvMonacoEditorProps {
|
|
3
3
|
className?: string;
|
|
4
4
|
style?: React.CSSProperties;
|
|
5
|
-
languageMode: 'javascript' | 'json';
|
|
5
|
+
languageMode: 'javascript' | 'json' | 'sql';
|
|
6
6
|
/** 编辑器配置项
|
|
7
7
|
- theme: 主题名称 ('vs', 'vs-dark', 'hc-black' 或自定义主题)
|
|
8
8
|
- fontSize: 字体大小
|
|
@@ -13,7 +13,6 @@ export interface EasyvMonacoEditorProps {
|
|
|
13
13
|
- renderWhitespace: 空白字符显示
|
|
14
14
|
- tabSize: 制表符大小
|
|
15
15
|
*/
|
|
16
|
-
monacoEditorOptions?: monaco.editor.IEditorOptions & monaco.editor.IGlobalEditorOptions;
|
|
17
16
|
code: string;
|
|
18
17
|
onChange?: (v: string) => void;
|
|
19
18
|
/** 定义 monaco-editor 的类型文件。如：
|
|
@@ -67,8 +66,16 @@ export interface EasyvMonacoEditorProps {
|
|
|
67
66
|
],
|
|
68
67
|
```
|
|
69
68
|
*/
|
|
70
|
-
|
|
69
|
+
monaco: typeof monaco;
|
|
71
70
|
/** monaco 对代码检查时的错误或者警告等等。 */
|
|
72
71
|
onCodeMark?: (errors: monaco.editor.IMarker[]) => void;
|
|
73
72
|
onBlur?: (code: string) => void;
|
|
73
|
+
/** 校验时，要忽略的错误码。 只在初始化生效 */
|
|
74
|
+
ignoreErrorCodes?: number[];
|
|
75
|
+
/** 初始化时，对 ts/js 语言的编译选项，具体选项可查看类型 */
|
|
76
|
+
initJSCompilerOptions?: monaco.languages.typescript.CompilerOptions;
|
|
77
|
+
/** 新建 monaco-editor 时，传入的配置选项，具体选项可查看类型, 大部分的配置 可以通过传递 monacoEditorOptions 来更新 */
|
|
78
|
+
constructionOptions?: Parameters<typeof monaco.editor.create>[1];
|
|
79
|
+
monacoEditorOptions?: monaco.editor.IEditorOptions & monaco.editor.IGlobalEditorOptions;
|
|
80
|
+
customTheme?: monaco.editor.IStandaloneThemeData;
|
|
74
81
|
}
|
|
@@ -5,7 +5,7 @@ function useWatchValue(params) {
|
|
|
5
5
|
const { value, callback, options } = params;
|
|
6
6
|
const ref = useRef(initValue);
|
|
7
7
|
const initialRef = useRef(false);
|
|
8
|
-
const { equalFn = isEqual, immediate } = options || {};
|
|
8
|
+
const { equalFn = isEqual, immediate = true } = options || {};
|
|
9
9
|
const fnObj = useRef({
|
|
10
10
|
callback,
|
|
11
11
|
equalFn,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-watch-value.es.js","sources":["../../../src/hooks/use-watch-value/use-watch-value.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { isEqual } from 'lodash-es';\n\ntype BaseValueType = string | number | boolean | object | Array<unknown> | null | undefined;\n\nconst initValue = Symbol('initValue');\n\ninterface Params<T> {\n value: T;\n callback: (newValue: T, oldValue?: T) => void | Promise<void> | (() => void);\n options?: {\n equalFn?: (value1: T, value2: T) => boolean;\n immediate?: boolean;\n };\n}\n/**监听值变化，\n * 值变化时调用 callback\n * 判断值是否变化默认使用 lodash 的 isEqual\n * @param params { value: T; callback: (newValue: T, oldValue?: T) => void | Promise<void>; options?: { equalFn: (value1: T, value2: T) => boolean; immediate?: boolean; } }\n */\nexport function useWatchValue<T extends BaseValueType>(params: Params<T>) {\n const { value, callback, options } = params;\n const ref = useRef<T | typeof initValue>(initValue);\n const initialRef = useRef(false);\n\n const { equalFn = isEqual, immediate } = options || {};\n\n const fnObj = useRef({\n callback,\n equalFn,\n immediate,\n });\n fnObj.current = {\n callback,\n equalFn,\n immediate,\n };\n\n useEffect(() => {\n const {\n callback: callbackInner,\n equalFn: equalFnInner,\n immediate: immediateInner,\n } = fnObj.current;\n if (immediateInner && !initialRef.current) {\n callbackInner(value, value);\n initialRef.current = true;\n }\n\n if (ref.current === initValue) {\n ref.current = value;\n } else if (equalFnInner(value, ref.current) === false) {\n callbackInner(value, ref.current as T);\n ref.current = value;\n }\n }, [value]);\n}\n"],"names":[],"mappings":";;AAKA,MAAM,YAAY,OAAO,WAAW;AAe7B,SAAS,cAAuC,QAAmB;AACxE,QAAM,EAAE,OAAO,UAAU,QAAY,IAAA;AAC/B,QAAA,MAAM,OAA6B,SAAS;AAC5C,QAAA,aAAa,OAAO,KAAK;AAE/B,QAAM,EAAE,UAAU,SAAS,
|
|
1
|
+
{"version":3,"file":"use-watch-value.es.js","sources":["../../../src/hooks/use-watch-value/use-watch-value.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { isEqual } from 'lodash-es';\n\ntype BaseValueType = string | number | boolean | object | Array<unknown> | null | undefined;\n\nconst initValue = Symbol('initValue');\n\ninterface Params<T> {\n value: T;\n callback: (newValue: T, oldValue?: T) => void | Promise<void> | (() => void);\n options?: {\n equalFn?: (value1: T, value2: T) => boolean;\n immediate?: boolean;\n };\n}\n/**监听值变化，\n * 值变化时调用 callback\n * 判断值是否变化默认使用 lodash 的 isEqual\n * @param params { value: T; callback: (newValue: T, oldValue?: T) => void | Promise<void>; options?: { equalFn: (value1: T, value2: T) => boolean; immediate?: boolean; } }\n */\nexport function useWatchValue<T extends BaseValueType>(params: Params<T>) {\n const { value, callback, options } = params;\n const ref = useRef<T | typeof initValue>(initValue);\n const initialRef = useRef(false);\n\n const { equalFn = isEqual, immediate = true } = options || {};\n\n const fnObj = useRef({\n callback,\n equalFn,\n immediate,\n });\n fnObj.current = {\n callback,\n equalFn,\n immediate,\n };\n\n useEffect(() => {\n const {\n callback: callbackInner,\n equalFn: equalFnInner,\n immediate: immediateInner,\n } = fnObj.current;\n if (immediateInner && !initialRef.current) {\n callbackInner(value, value);\n initialRef.current = true;\n }\n\n if (ref.current === initValue) {\n ref.current = value;\n } else if (equalFnInner(value, ref.current) === false) {\n callbackInner(value, ref.current as T);\n ref.current = value;\n }\n }, [value]);\n}\n"],"names":[],"mappings":";;AAKA,MAAM,YAAY,OAAO,WAAW;AAe7B,SAAS,cAAuC,QAAmB;AACxE,QAAM,EAAE,OAAO,UAAU,QAAY,IAAA;AAC/B,QAAA,MAAM,OAA6B,SAAS;AAC5C,QAAA,aAAa,OAAO,KAAK;AAE/B,QAAM,EAAE,UAAU,SAAS,YAAY,KAAK,IAAI,WAAW,CAAC;AAE5D,QAAM,QAAQ,OAAO;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AACD,QAAM,UAAU;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,YAAU,MAAM;AACR,UAAA;AAAA,MACJ,UAAU;AAAA,MACV,SAAS;AAAA,MACT,WAAW;AAAA,QACT,MAAM;AACN,QAAA,kBAAkB,CAAC,WAAW,SAAS;AACzC,oBAAc,OAAO,KAAK;AAC1B,iBAAW,UAAU;AAAA,IAAA;AAGnB,QAAA,IAAI,YAAY,WAAW;AAC7B,UAAI,UAAU;AAAA,IAAA,WACL,aAAa,OAAO,IAAI,OAAO,MAAM,OAAO;AACvC,oBAAA,OAAO,IAAI,OAAY;AACrC,UAAI,UAAU;AAAA,IAAA;AAAA,EAChB,GACC,CAAC,KAAK,CAAC;AACZ;"}
|