@cloudtower/eagle 490.0.5 → 490.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/README.md +34 -0
- package/dist/cjs/core/Cascader/cascader.widget.js +12 -12
- package/dist/cjs/core/SearchInput/SearchInput.hook.js +124 -0
- package/dist/cjs/core/SearchInput/SearchInput.js +253 -0
- package/dist/cjs/core/SearchInput/SearchInput.style.js +13 -0
- package/dist/cjs/core/index.js +6 -6
- package/dist/cjs/index.js +172 -172
- package/dist/cjs/legacy-antd.js +89 -89
- package/dist/cjs/stats1.html +1 -1
- package/dist/components.css +3836 -3813
- package/dist/esm/core/Cascader/cascader.widget.js +1 -1
- package/dist/esm/core/SearchInput/SearchInput.hook.js +117 -0
- package/dist/esm/core/SearchInput/SearchInput.js +247 -0
- package/dist/esm/core/SearchInput/SearchInput.style.js +7 -0
- package/dist/esm/index.js +1 -1
- package/dist/esm/legacy-antd.js +1 -1
- package/dist/esm/stats1.html +1 -1
- package/dist/linaria.merged.scss +3611 -3582
- package/dist/src/core/Cascader/cascader.type.d.ts +1 -1
- package/dist/src/core/ImmersiveDialog/type.d.ts +127 -19
- package/dist/src/core/MediumDialog/MediumDialog.type.d.ts +49 -1
- package/dist/src/core/SearchInput/SearchInput.d.ts +2 -0
- package/dist/src/core/SearchInput/SearchInput.hook.d.ts +9 -0
- package/dist/src/core/SearchInput/SearchInput.style.d.ts +5 -0
- package/dist/src/core/SearchInput/SearchInput.type.d.ts +150 -0
- package/dist/src/core/SearchInput/__test__/SearchInput.hook.test.d.ts +1 -0
- package/dist/src/core/SearchInput/index.d.ts +2 -4
- package/dist/src/core/SmallDialog/SmallDialog.type.d.ts +150 -21
- package/dist/src/core/TableForm/types.d.ts +216 -68
- package/dist/src/core/WizardDialog/type.d.ts +147 -13
- package/dist/src/core/index.d.ts +0 -1
- package/dist/src/coreX/Dialogs/DeleteDialog/DeleteDialog.type.d.ts +100 -9
- package/dist/src/coreX/Dialogs/RejectDialog/RejectDialog.type.d.ts +126 -19
- package/dist/stories/docs/core/ImmersiveDialog.stories.d.ts +76 -8
- package/dist/stories/docs/core/MediumDialog.stories.d.ts +42 -8
- package/dist/stories/docs/core/SearchInput.stories.d.ts +6 -1
- package/dist/stories/docs/core/SmallDialog.stories.d.ts +86 -7
- package/dist/stories/docs/core/TableForm.stories.d.ts +40 -26
- package/dist/stories/docs/core/WizardDialog.stories.d.ts +65 -6
- package/dist/stories/docs/coreX/Dialogs/DeleteDialog.stories.d.ts +20 -19
- package/dist/stories/docs/coreX/Dialogs/RejectDialog.stories.d.ts +24 -23
- package/dist/style.css +3836 -3813
- package/docs/core/ImmersiveDialog/guide.md +298 -0
- package/docs/core/LegacyModal/migrate-guide.md +422 -0
- package/docs/core/MediumDialog/guide.md +263 -0
- package/docs/core/SearchInput/guide.md +125 -0
- package/docs/core/SmallDialog/guide.md +224 -0
- package/docs/core/TableForm/guide.md +195 -0
- package/docs/core/WizardDialog/guide.md +322 -0
- package/docs/coreX/DeleteDialog/guide.md +161 -0
- package/docs/coreX/RejectDialog/guide.md +185 -0
- package/docs/llms.txt +169 -0
- package/package.json +6 -5
- package/dist/cjs/core/SearchInput/index.js +0 -164
- package/dist/esm/core/SearchInput/index.js +0 -157
- package/dist/src/core/SearchInput/searchInput.type.d.ts +0 -63
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { CascaderProps as Antd5CascaderProps } from "antd5/lib/cascader";
|
|
3
|
-
import { SearchInputProps } from "../SearchInput
|
|
3
|
+
import { SearchInputProps } from "../SearchInput";
|
|
4
4
|
export type { Antd5SizeType } from "../../utils/type";
|
|
5
5
|
export type PresetCascaderRenderProps = {
|
|
6
6
|
menus: Parameters<NonNullable<CascaderProps["dropdownRender"]>>[0];
|
|
@@ -1,43 +1,151 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { ButtonProps } from "../../core/Button";
|
|
3
3
|
import { ModalProps as AntdModalProps } from "antd/lib/modal";
|
|
4
|
+
/**
|
|
5
|
+
* 沉浸式全屏对话框,支持左中右三栏布局。适合复杂操作、大面积内容展示。通过 usePushModal 打开。
|
|
6
|
+
*
|
|
7
|
+
* 默认三栏布局宽度:左侧面板 192px、中间内容区 648px、右侧面板 192px,左右面板与内容区间距 60px。
|
|
8
|
+
* 设置 `isContentFull` 后左右面板隐藏,内容区占满整个对话框宽度。
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```tsx
|
|
12
|
+
* // 带左右面板的全屏对话框(创建虚拟机场景)
|
|
13
|
+
* import { ImmersiveDialog } from "@cloudtower/eagle";
|
|
14
|
+
* import { usePushModal, usePopModal } from "@cloudtower/eagle";
|
|
15
|
+
*
|
|
16
|
+
* const pushModal = usePushModal();
|
|
17
|
+
*
|
|
18
|
+
* pushModal({
|
|
19
|
+
* component: () => (
|
|
20
|
+
* <ImmersiveDialog
|
|
21
|
+
* title="创建虚拟机"
|
|
22
|
+
* left={<VMConfigSteps current={step} />}
|
|
23
|
+
* right={<VMResourceSummary cpu={cpu} memory={memory} />}
|
|
24
|
+
* onOk={() => handleCreate()}
|
|
25
|
+
* >
|
|
26
|
+
* <VMConfigForm step={step} />
|
|
27
|
+
* </ImmersiveDialog>
|
|
28
|
+
* ),
|
|
29
|
+
* props: { name: "CreateVmDialog" },
|
|
30
|
+
* });
|
|
31
|
+
* ```
|
|
32
|
+
*
|
|
33
|
+
* @example
|
|
34
|
+
* ```tsx
|
|
35
|
+
* // 纯内容全屏对话框(isContentFull 模式)
|
|
36
|
+
* import { ImmersiveDialog } from "@cloudtower/eagle";
|
|
37
|
+
* import { usePushModal, usePopModal } from "@cloudtower/eagle";
|
|
38
|
+
*
|
|
39
|
+
* const popModal = usePopModal();
|
|
40
|
+
*
|
|
41
|
+
* <ImmersiveDialog
|
|
42
|
+
* title="查看详情"
|
|
43
|
+
* isContentFull
|
|
44
|
+
* onOk={() => popModal()}
|
|
45
|
+
* >
|
|
46
|
+
* <FullWidthContent />
|
|
47
|
+
* </ImmersiveDialog>
|
|
48
|
+
* ```
|
|
49
|
+
*
|
|
50
|
+
* 除下列自有属性外,还继承了 antd Modal 的全部属性(如 `onCancel`、`maskClosable`、`closable` 等),
|
|
51
|
+
* 这些属性会直接透传给底层 Modal 组件。
|
|
52
|
+
*
|
|
53
|
+
* @see WizardDialog — 基于 ImmersiveDialog 的向导变体,支持分步操作
|
|
54
|
+
* @see SmallDialog — 小型弹窗(492px),适用于简单确认或少量内容
|
|
55
|
+
* @see MediumDialog — 中型弹窗(720px),适用于中等复杂度的表单或内容
|
|
56
|
+
*/
|
|
4
57
|
export type ImmersiveDialogProps = React.PropsWithChildren<AntdModalProps & {
|
|
5
|
-
/**
|
|
58
|
+
/** 自定义关闭图标,替换右上角默认的关闭按钮图标 */
|
|
6
59
|
closeIcon?: React.ReactNode;
|
|
7
|
-
/**
|
|
60
|
+
/**
|
|
61
|
+
* 是否显示取消按钮
|
|
62
|
+
* @default true
|
|
63
|
+
*/
|
|
8
64
|
showCancel?: boolean;
|
|
9
|
-
/**
|
|
65
|
+
/**
|
|
66
|
+
* 取消按钮的文本。
|
|
67
|
+
* 当 showOk 为 true 时默认为"取消",否则默认为"关闭"。
|
|
68
|
+
*/
|
|
10
69
|
cancelText?: string;
|
|
11
|
-
/**
|
|
70
|
+
/** 取消按钮的属性,透传至底层 Button 组件 */
|
|
12
71
|
cancelButtonProps?: ButtonProps;
|
|
13
|
-
/**
|
|
72
|
+
/**
|
|
73
|
+
* 是否显示确定按钮
|
|
74
|
+
* @default true
|
|
75
|
+
*/
|
|
14
76
|
showOk?: boolean;
|
|
15
|
-
/**
|
|
77
|
+
/**
|
|
78
|
+
* 确定按钮的文本。
|
|
79
|
+
* 当存在 initializingError 时默认为"重试",否则默认为"确认"。
|
|
80
|
+
*/
|
|
16
81
|
okText?: string;
|
|
17
|
-
/**
|
|
82
|
+
/** 确定按钮的属性,透传至底层 Button 组件 */
|
|
18
83
|
okButtonProps?: ButtonProps;
|
|
19
|
-
/**
|
|
84
|
+
/** 底部错误信息,显示在 footer 左侧区域,最多展示 3 行溢出后 tooltip 提示 */
|
|
20
85
|
error?: React.ReactNode;
|
|
21
|
-
/**
|
|
86
|
+
/**
|
|
87
|
+
* 是否隐藏 footer。隐藏后 footer 区域仍保留 40px 的空白间距。
|
|
88
|
+
* @default false
|
|
89
|
+
*/
|
|
22
90
|
hideFooter?: boolean;
|
|
23
|
-
/**
|
|
91
|
+
/**
|
|
92
|
+
* 是否展示 footer 错误信息旁的错误图标
|
|
93
|
+
* @default true
|
|
94
|
+
*/
|
|
24
95
|
showFooterErrorIcon?: boolean;
|
|
25
|
-
/**
|
|
96
|
+
/**
|
|
97
|
+
* 确定按钮的回调。
|
|
98
|
+
*
|
|
99
|
+
* 注意:签名为 `(e: React.MouseEvent) => void`,与 SmallDialog/MediumDialog 的
|
|
100
|
+
* `onOk?: (popModal: () => void) => void` 不同。此组件的 onOk 不会自动关闭弹窗,
|
|
101
|
+
* 需要通过 `usePopModal()` hook 获取 popModal 函数手动关闭。
|
|
102
|
+
*/
|
|
26
103
|
onOk?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
|
|
27
|
-
/**
|
|
104
|
+
/**
|
|
105
|
+
* 是否内容占满整个对话框宽度。
|
|
106
|
+
* 开启后隐藏左右面板,内容区域占满对话框,左右各留 40px 的内边距。
|
|
107
|
+
* @default false
|
|
108
|
+
*/
|
|
28
109
|
isContentFull?: boolean;
|
|
29
|
-
/**
|
|
110
|
+
/**
|
|
111
|
+
* 左侧面板的自定义内容。
|
|
112
|
+
* 三栏布局下固定宽度 192px,使用 fixed 定位,顶部距弹窗上边缘 140px。
|
|
113
|
+
* 当 isContentFull 为 true 或处于 initializing/initializingError 状态时不渲染。
|
|
114
|
+
*/
|
|
30
115
|
left?: React.ReactNode;
|
|
31
|
-
/**
|
|
116
|
+
/**
|
|
117
|
+
* 左侧面板的自定义类名,用于覆盖左侧面板的默认样式。
|
|
118
|
+
* 面板默认宽度 192px,可通过此类名调整样式。
|
|
119
|
+
*/
|
|
32
120
|
leftClassName?: string;
|
|
33
|
-
/**
|
|
121
|
+
/**
|
|
122
|
+
* 右侧面板的自定义内容。
|
|
123
|
+
* 三栏布局下固定宽度 192px,使用 fixed 定位,顶部距弹窗上边缘 140px。
|
|
124
|
+
* 当 isContentFull 为 true 或处于 initializing/initializingError 状态时不渲染。
|
|
125
|
+
*/
|
|
34
126
|
right?: React.ReactNode;
|
|
35
|
-
/**
|
|
127
|
+
/**
|
|
128
|
+
* 右侧面板的自定义类名,用于覆盖右侧面板的默认样式。
|
|
129
|
+
* 面板默认宽度 192px,可通过此类名调整样式。
|
|
130
|
+
*/
|
|
36
131
|
rightClassName?: string;
|
|
37
|
-
/**
|
|
132
|
+
/**
|
|
133
|
+
* 底部左侧的操作区域,通常放置"上一步"按钮或其他辅助操作。
|
|
134
|
+
* 渲染在 footer 左侧,与确定/取消按钮分居两端。
|
|
135
|
+
*/
|
|
38
136
|
footerLeftAction?: React.ReactNode;
|
|
39
|
-
/**
|
|
137
|
+
/**
|
|
138
|
+
* 是否处于初始化加载中状态。
|
|
139
|
+
* 为 true 时标题区显示骨架屏,内容区显示 4 行骨架屏加载占位,footer 隐藏。
|
|
140
|
+
* 加载完成后设为 false 显示正常内容。
|
|
141
|
+
* @default false
|
|
142
|
+
*/
|
|
40
143
|
initializing?: boolean;
|
|
41
|
-
/**
|
|
144
|
+
/**
|
|
145
|
+
* 初始化错误的内容。设置后内容区显示错误提示(居中展示),
|
|
146
|
+
* 标题自动变为"加载失败",确定按钮文本自动变为"重试"。
|
|
147
|
+
* 与 initializing 配合使用:先设 initializing=true 开始加载,
|
|
148
|
+
* 失败时设 initializing=false 并设置 initializingError。
|
|
149
|
+
*/
|
|
42
150
|
initializingError?: string | React.ReactNode;
|
|
43
151
|
}>;
|
|
@@ -1,5 +1,53 @@
|
|
|
1
1
|
import { SmallDialogProps } from "../SmallDialog/SmallDialog.type";
|
|
2
|
+
/**
|
|
3
|
+
* 720px 宽度的中型对话框,适合表单和较多内容的场景。
|
|
4
|
+
*
|
|
5
|
+
* @description
|
|
6
|
+
* MediumDialog 继承 SmallDialog 的全部功能,在此基础上提供更大的显示区域(720px 宽度、
|
|
7
|
+
* 60px 水平内边距)和更突出的标题排版(d1s_bold_title)。通过 `usePushModal` 打开弹窗,
|
|
8
|
+
* 在 `onOk` / `onCancel` 回调中调用 `popModal` 参数来关闭弹窗。
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```tsx
|
|
12
|
+
* import { MediumDialog, Button, KitStoreProvider, ModalStack } from "@cloudtower/eagle";
|
|
13
|
+
* import { usePushModal } from "@cloudtower/eagle/KitStoreProvider";
|
|
14
|
+
*
|
|
15
|
+
* const EditVmButton: React.FC = () => {
|
|
16
|
+
* const pushModal = usePushModal();
|
|
17
|
+
*
|
|
18
|
+
* return (
|
|
19
|
+
* <Button onClick={() => pushModal({
|
|
20
|
+
* component: () => (
|
|
21
|
+
* <MediumDialog
|
|
22
|
+
* title="编辑虚拟机"
|
|
23
|
+
* onOk={(popModal) => {
|
|
24
|
+
* saveVmConfig().then(() => popModal());
|
|
25
|
+
* }}
|
|
26
|
+
* onCancel={(popModal) => popModal()}
|
|
27
|
+
* >
|
|
28
|
+
* <VmConfigForm />
|
|
29
|
+
* </MediumDialog>
|
|
30
|
+
* ),
|
|
31
|
+
* props: { name: "EditVmDialog" },
|
|
32
|
+
* })}>
|
|
33
|
+
* 编辑虚拟机
|
|
34
|
+
* </Button>
|
|
35
|
+
* );
|
|
36
|
+
* };
|
|
37
|
+
* ```
|
|
38
|
+
*
|
|
39
|
+
* @see SmallDialog — 更小的对话框(492px 宽度)
|
|
40
|
+
* @see ImmersiveDialog — 全屏沉浸式对话框
|
|
41
|
+
*/
|
|
2
42
|
export interface MediumDialogProps extends SmallDialogProps {
|
|
3
|
-
/**
|
|
43
|
+
/**
|
|
44
|
+
* 内容是否尽可能占满视窗,用于适配中型弹窗的非常规尺寸。
|
|
45
|
+
*
|
|
46
|
+
* @description
|
|
47
|
+
* 开启后弹窗尺寸变为 `width: calc(100vw - 160px)`、`height: calc(100vh - 80px)`,
|
|
48
|
+
* 内容区域自动 flex 填充剩余高度,适用于需要大面积展示内容(如表格、拓扑图)的场景。
|
|
49
|
+
*
|
|
50
|
+
* @default false
|
|
51
|
+
*/
|
|
4
52
|
isContentFull?: boolean;
|
|
5
53
|
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { type DebouncedFunc } from "lodash";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import type { SearchInputProps } from "./SearchInput.type";
|
|
4
|
+
export declare const searchInputRecentSearchLocalStorageKey = "search-input-recent-search";
|
|
5
|
+
export declare const useRecentSearch: (recentSearchLocalStorageKey: SearchInputProps["recentSearchLocalStorageKey"], maxRecentCount: number, setValue: React.Dispatch<React.SetStateAction<string>>, onChange: SearchInputProps["onChange"]) => {
|
|
6
|
+
recentSearchKeys: string[];
|
|
7
|
+
setRecentSearchKeysDebounceRef: React.MutableRefObject<DebouncedFunc<(val: string) => void> | undefined>;
|
|
8
|
+
antd5DropdownMenu: import("antd5").MenuProps | undefined;
|
|
9
|
+
};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export declare const SearchInputStyles: import("@linaria/core").LinariaClassName;
|
|
2
|
+
export declare const CountTextStyles: import("@linaria/core").LinariaClassName;
|
|
3
|
+
export declare const IconContainerStyles: import("@linaria/core").LinariaClassName;
|
|
4
|
+
export declare const DisabledIconStyles: import("@linaria/core").LinariaClassName;
|
|
5
|
+
export declare const SearchInputDropdownStyles: import("@linaria/core").LinariaClassName;
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { InputProps } from "antd/lib/input";
|
|
3
|
+
import { SrcType } from "../BaseIcon";
|
|
4
|
+
/**
|
|
5
|
+
* @description 搜索输入框组件,基于 Input 封装,提供防抖搜索、结果导航(上一个/下一个)和最近搜索历史功能。
|
|
6
|
+
* 支持受控和非受控两种模式,适用于表格内搜索、页面全局搜索等场景。
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* 基础搜索(带防抖):
|
|
10
|
+
* ```tsx
|
|
11
|
+
* import React, { useState } from "react";
|
|
12
|
+
* import { SearchInput } from "@cloudtower/eagle";
|
|
13
|
+
*
|
|
14
|
+
* const App = () => {
|
|
15
|
+
* const [keyword, setKeyword] = useState("");
|
|
16
|
+
* return (
|
|
17
|
+
* <SearchInput
|
|
18
|
+
* debounceWait={300}
|
|
19
|
+
* onChange={(value) => setKeyword(value)}
|
|
20
|
+
* />
|
|
21
|
+
* );
|
|
22
|
+
* };
|
|
23
|
+
* ```
|
|
24
|
+
*
|
|
25
|
+
* @example
|
|
26
|
+
* 带结果导航(显示匹配数和上下翻页):
|
|
27
|
+
* ```tsx
|
|
28
|
+
* import React from "react";
|
|
29
|
+
* import { SearchInput } from "@cloudtower/eagle";
|
|
30
|
+
*
|
|
31
|
+
* const App = () => (
|
|
32
|
+
* <SearchInput
|
|
33
|
+
* total={10}
|
|
34
|
+
* onChange={(value) => console.log("搜索:", value)}
|
|
35
|
+
* onSearchNext={(value, current) => console.log("下一个:", current)}
|
|
36
|
+
* onSearchPrev={(value, current) => console.log("上一个:", current)}
|
|
37
|
+
* />
|
|
38
|
+
* );
|
|
39
|
+
* ```
|
|
40
|
+
*
|
|
41
|
+
* @example
|
|
42
|
+
* 启用最近搜索历史:
|
|
43
|
+
* ```tsx
|
|
44
|
+
* import React from "react";
|
|
45
|
+
* import { SearchInput } from "@cloudtower/eagle";
|
|
46
|
+
*
|
|
47
|
+
* const App = () => (
|
|
48
|
+
* <SearchInput
|
|
49
|
+
* enableRecentSearch
|
|
50
|
+
* recentSearchLocalStorageKey="vm-search"
|
|
51
|
+
* maxRecentCount={5}
|
|
52
|
+
* onChange={(value) => console.log(value)}
|
|
53
|
+
* />
|
|
54
|
+
* );
|
|
55
|
+
* ```
|
|
56
|
+
*
|
|
57
|
+
* @see Input 基础输入框
|
|
58
|
+
* @see Cascader 级联选择器(内置了 SearchInput 作为搜索区域)
|
|
59
|
+
*/
|
|
60
|
+
export type SearchInputProps = Omit<InputProps, "value" | "onChange"> & {
|
|
61
|
+
/**
|
|
62
|
+
* 输入框的值,用于受控模式。
|
|
63
|
+
* 配置 value 时,需把 debounceWait 设置为 0,否则输入时会有卡顿的问题
|
|
64
|
+
*/
|
|
65
|
+
value?: InputProps["value"];
|
|
66
|
+
/**
|
|
67
|
+
* 防抖延迟时间,单位为毫秒。输入停止后延迟指定时间再触发 onChange
|
|
68
|
+
* @default 300
|
|
69
|
+
*/
|
|
70
|
+
debounceWait?: number;
|
|
71
|
+
/**
|
|
72
|
+
* 搜索结果的总数。设置后,当同时提供 onSearchNext 和 onSearchPrev 时,
|
|
73
|
+
* 输入框后缀区域将显示 "current/total" 计数器和上下翻页按钮
|
|
74
|
+
*/
|
|
75
|
+
total?: number;
|
|
76
|
+
/**
|
|
77
|
+
* 当前选中的结果索引(从 1 开始),可用于外部控制当前位置。
|
|
78
|
+
* 如果不提供,组件将内部管理此状态
|
|
79
|
+
*/
|
|
80
|
+
current?: number;
|
|
81
|
+
/**
|
|
82
|
+
* 点击"下一个"按钮或按下 Enter 键时的回调。
|
|
83
|
+
* 需同时提供 onSearchPrev 才会显示导航按钮
|
|
84
|
+
* @param value - 当前搜索关键词
|
|
85
|
+
* @param current - 导航后的结果索引
|
|
86
|
+
*/
|
|
87
|
+
onSearchNext?: (value: string, current: number) => void;
|
|
88
|
+
/**
|
|
89
|
+
* 点击"上一个"按钮时的回调。
|
|
90
|
+
* 需同时提供 onSearchNext 才会显示导航按钮
|
|
91
|
+
* @param value - 当前搜索关键词
|
|
92
|
+
* @param current - 导航后的结果索引
|
|
93
|
+
*/
|
|
94
|
+
onSearchPrev?: (value: string, current: number) => void;
|
|
95
|
+
/**
|
|
96
|
+
* 输入内容改变时的回调函数(经过防抖处理后触发)
|
|
97
|
+
* @param value - 当前输入的搜索关键词
|
|
98
|
+
*/
|
|
99
|
+
onChange: (value: string) => void;
|
|
100
|
+
/**
|
|
101
|
+
* 自定义搜索图标(输入框前缀),替换默认的放大镜图标
|
|
102
|
+
*/
|
|
103
|
+
searchIcon?: SrcType;
|
|
104
|
+
/**
|
|
105
|
+
* 自定义"上一个"按钮的默认态图标
|
|
106
|
+
*/
|
|
107
|
+
prefixIcon?: SrcType;
|
|
108
|
+
/**
|
|
109
|
+
* 自定义"上一个"按钮的 hover 态图标
|
|
110
|
+
*/
|
|
111
|
+
prefixHoverIcon?: SrcType;
|
|
112
|
+
/**
|
|
113
|
+
* 自定义"下一个"按钮的默认态图标
|
|
114
|
+
*/
|
|
115
|
+
nextIcon?: SrcType;
|
|
116
|
+
/**
|
|
117
|
+
* 自定义"下一个"按钮的 hover 态图标
|
|
118
|
+
*/
|
|
119
|
+
nextHoverIcon?: SrcType;
|
|
120
|
+
/**
|
|
121
|
+
* 自定义清空按钮的默认态图标
|
|
122
|
+
*/
|
|
123
|
+
clearIcon?: SrcType;
|
|
124
|
+
/**
|
|
125
|
+
* 自定义清空按钮的 hover 态图标
|
|
126
|
+
*/
|
|
127
|
+
clearHoverIcon?: SrcType;
|
|
128
|
+
/**
|
|
129
|
+
* 搜索框宽度
|
|
130
|
+
* @default 276
|
|
131
|
+
*/
|
|
132
|
+
width?: number | string;
|
|
133
|
+
/**
|
|
134
|
+
* 是否开启最近搜索功能。开启后,聚焦空输入框时会显示最近搜索记录的下拉菜单。
|
|
135
|
+
* 搜索记录通过 localStorage 持久化存储
|
|
136
|
+
* @default false
|
|
137
|
+
*/
|
|
138
|
+
enableRecentSearch?: boolean;
|
|
139
|
+
/**
|
|
140
|
+
* 最近搜索记录在 localStorage 中的存储键名。
|
|
141
|
+
* 开启 enableRecentSearch 时必须提供,不同业务场景应使用不同的 key 以隔离数据
|
|
142
|
+
*/
|
|
143
|
+
recentSearchLocalStorageKey?: string;
|
|
144
|
+
/**
|
|
145
|
+
* 最近搜索记录的最大展示条数
|
|
146
|
+
* @default 5
|
|
147
|
+
*/
|
|
148
|
+
maxRecentCount?: number;
|
|
149
|
+
};
|
|
150
|
+
export type SearchInputComponentType = React.FC<SearchInputProps>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,49 +1,178 @@
|
|
|
1
1
|
import { ButtonProps } from "../../core/Button";
|
|
2
2
|
import React from "react";
|
|
3
|
+
/**
|
|
4
|
+
* @description 小尺寸弹窗组件,固定宽度 492px,适用于确认操作、简短表单、信息提示等场景。
|
|
5
|
+
* 通过 `usePushModal` 打开弹窗,在 `onOk`/`onCancel` 回调中调用 `popModal()` 关闭弹窗。
|
|
6
|
+
* 弹窗基于 Redux 模态栈管理(KitStoreProvider),支持多层弹窗嵌套。
|
|
7
|
+
*
|
|
8
|
+
* @example 基础确认弹窗
|
|
9
|
+
* ```tsx
|
|
10
|
+
* import { SmallDialog } from "@cloudtower/eagle";
|
|
11
|
+
* import { usePushModal } from "@cloudtower/eagle/lib/core/KitStoreProvider";
|
|
12
|
+
*
|
|
13
|
+
* const MyComponent = () => {
|
|
14
|
+
* const pushModal = usePushModal();
|
|
15
|
+
*
|
|
16
|
+
* const openDialog = () => {
|
|
17
|
+
* pushModal(
|
|
18
|
+
* <SmallDialog
|
|
19
|
+
* title="确认操作"
|
|
20
|
+
* onOk={(popModal) => {
|
|
21
|
+
* // 执行确认逻辑
|
|
22
|
+
* popModal();
|
|
23
|
+
* }}
|
|
24
|
+
* onCancel={(popModal) => {
|
|
25
|
+
* popModal();
|
|
26
|
+
* }}
|
|
27
|
+
* >
|
|
28
|
+
* 确定要执行此操作吗?
|
|
29
|
+
* </SmallDialog>
|
|
30
|
+
* );
|
|
31
|
+
* };
|
|
32
|
+
*
|
|
33
|
+
* return <Button onClick={openDialog}>打开弹窗</Button>;
|
|
34
|
+
* };
|
|
35
|
+
* ```
|
|
36
|
+
*
|
|
37
|
+
* @example 异步提交弹窗(含 confirmLoading)
|
|
38
|
+
* ```tsx
|
|
39
|
+
* const [loading, setLoading] = useState(false);
|
|
40
|
+
*
|
|
41
|
+
* pushModal(
|
|
42
|
+
* <SmallDialog
|
|
43
|
+
* title="删除确认"
|
|
44
|
+
* confirmLoading={loading}
|
|
45
|
+
* onOk={async (popModal) => {
|
|
46
|
+
* setLoading(true);
|
|
47
|
+
* try {
|
|
48
|
+
* await deleteResource();
|
|
49
|
+
* popModal();
|
|
50
|
+
* } catch (e) {
|
|
51
|
+
* // 处理错误,弹窗保持打开
|
|
52
|
+
* } finally {
|
|
53
|
+
* setLoading(false);
|
|
54
|
+
* }
|
|
55
|
+
* }}
|
|
56
|
+
* onCancel={(popModal) => popModal()}
|
|
57
|
+
* >
|
|
58
|
+
* 删除后数据将无法恢复,是否继续?
|
|
59
|
+
* </SmallDialog>
|
|
60
|
+
* );
|
|
61
|
+
* ```
|
|
62
|
+
*
|
|
63
|
+
* @see MediumDialog 中等尺寸弹窗(720px),适用于复杂表单
|
|
64
|
+
* @see ImmersiveDialog 沉浸式全屏弹窗,适用于复杂表单和详情编辑
|
|
65
|
+
* @see WizardDialog 向导式弹窗,适用于分步操作
|
|
66
|
+
* @see DeleteDialog 删除确认弹窗,基于 SmallDialog 的业务封装,位于 coreX/Dialogs/
|
|
67
|
+
* @see RejectDialog 操作拒绝反馈弹窗,基于 SmallDialog 的业务封装,位于 coreX/Dialogs/
|
|
68
|
+
*/
|
|
3
69
|
export interface SmallDialogProps {
|
|
4
|
-
/**
|
|
70
|
+
/**
|
|
71
|
+
* 弹窗宽度
|
|
72
|
+
* @default 492
|
|
73
|
+
*/
|
|
5
74
|
width?: number | string;
|
|
6
|
-
/**
|
|
75
|
+
/** 弹窗标题,支持 ReactNode 自定义渲染 */
|
|
7
76
|
title: React.ReactNode;
|
|
8
|
-
/**
|
|
77
|
+
/**
|
|
78
|
+
* 自定义标题渲染组件,替换默认的标题渲染逻辑。
|
|
79
|
+
* 默认标题使用 `Typo.Display.d2_bold_title` 样式。
|
|
80
|
+
*/
|
|
9
81
|
TitleRender?: React.FC<{
|
|
10
82
|
title?: React.ReactNode;
|
|
11
83
|
}>;
|
|
12
|
-
/**
|
|
84
|
+
/** 取消按钮文案,默认根据 `showOk` 决定:showOk=true 时为"取消",showOk=false 时为"关闭" */
|
|
13
85
|
cancelText?: string;
|
|
14
|
-
/**
|
|
86
|
+
/** 确认按钮文案,默认为"确认";当 `initializingError` 有值时默认为"重试" */
|
|
15
87
|
okText?: string;
|
|
16
|
-
/**
|
|
88
|
+
/**
|
|
89
|
+
* 是否显示确认按钮。设为 false 时仅显示取消按钮,
|
|
90
|
+
* 且取消按钮样式从 `quiet` 变为 `ordinary`,文案默认从"取消"变为"关闭"。
|
|
91
|
+
* @default true
|
|
92
|
+
*/
|
|
17
93
|
showOk?: boolean;
|
|
18
|
-
/**
|
|
94
|
+
/**
|
|
95
|
+
* 点击确认按钮的回调。
|
|
96
|
+
* @param popModal - 关闭当前弹窗的函数,调用后将弹窗从模态栈中移除。
|
|
97
|
+
* 在异步操作中,可先执行业务逻辑,成功后再调用 popModal() 关闭弹窗;
|
|
98
|
+
* 若未提供 onOk,点击确认按钮将直接调用 popModal() 关闭弹窗。
|
|
99
|
+
*
|
|
100
|
+
* @example
|
|
101
|
+
* ```tsx
|
|
102
|
+
* onOk={async (popModal) => {
|
|
103
|
+
* await submitData();
|
|
104
|
+
* popModal();
|
|
105
|
+
* }}
|
|
106
|
+
* ```
|
|
107
|
+
*/
|
|
19
108
|
onOk?: (popModal: () => void) => void;
|
|
20
|
-
/**
|
|
109
|
+
/**
|
|
110
|
+
* 点击取消按钮、右上角关闭按钮或遮罩层时的回调。
|
|
111
|
+
* @param popModal - 关闭当前弹窗的函数,调用后将弹窗从模态栈中移除。
|
|
112
|
+
* 若未提供 onCancel,上述关闭操作将直接调用 popModal() 关闭弹窗。
|
|
113
|
+
*
|
|
114
|
+
* @example
|
|
115
|
+
* ```tsx
|
|
116
|
+
* onCancel={(popModal) => {
|
|
117
|
+
* // 可在关闭前执行清理逻辑
|
|
118
|
+
* popModal();
|
|
119
|
+
* }}
|
|
120
|
+
* ```
|
|
121
|
+
*/
|
|
21
122
|
onCancel?: (popModal: () => void) => void;
|
|
22
|
-
/**
|
|
123
|
+
/**
|
|
124
|
+
* 是否可点击遮罩层关闭弹窗,点击遮罩层会触发 onCancel 回调
|
|
125
|
+
* @default true
|
|
126
|
+
*/
|
|
23
127
|
maskClosable?: boolean;
|
|
24
|
-
/**
|
|
128
|
+
/**
|
|
129
|
+
* 是否显示右上角关闭按钮,点击关闭按钮会触发 onCancel 回调
|
|
130
|
+
* @default true
|
|
131
|
+
*/
|
|
25
132
|
closable?: boolean;
|
|
26
|
-
/**
|
|
133
|
+
/** 自定义弹窗容器类名 */
|
|
27
134
|
className?: string;
|
|
28
|
-
/** 自定义footer
|
|
135
|
+
/** 自定义 footer 区域类名 */
|
|
29
136
|
footerClassName?: string;
|
|
30
|
-
/**
|
|
137
|
+
/** 确认按钮的额外属性,会透传给 Button 组件。若同时设置了 okText,okText 优先 */
|
|
31
138
|
okButtonProps?: ButtonProps;
|
|
32
|
-
/**
|
|
139
|
+
/** 取消按钮的额外属性,会透传给 Button 组件。若同时设置了 cancelText,cancelText 优先 */
|
|
33
140
|
cancelButtonProps?: ButtonProps;
|
|
141
|
+
/** 弹窗主体内容,当 `initializing` 为 true 时显示骨架屏,当 `initializingError` 有值时显示错误状态 */
|
|
34
142
|
children?: React.ReactNode;
|
|
35
|
-
/** 展示在
|
|
143
|
+
/** 展示在 footer 区域的错误文案,支持 ReactNode。最多显示 3 行,超出后 tooltip 展示完整内容 */
|
|
36
144
|
error?: React.ReactNode;
|
|
37
|
-
/**
|
|
145
|
+
/**
|
|
146
|
+
* 是否隐藏 footer 区域(包括确认/取消按钮和错误信息)
|
|
147
|
+
* @default false
|
|
148
|
+
*/
|
|
38
149
|
hideFooter?: boolean;
|
|
39
|
-
/**
|
|
150
|
+
/**
|
|
151
|
+
* 是否在 footer 错误文案前展示错误图标
|
|
152
|
+
* @default true
|
|
153
|
+
*/
|
|
40
154
|
showFooterErrorIcon?: boolean;
|
|
41
|
-
/**
|
|
155
|
+
/**
|
|
156
|
+
* 确认按钮加载状态,为 true 时确认按钮显示 loading 动画且不可重复点击
|
|
157
|
+
* @default false
|
|
158
|
+
*/
|
|
42
159
|
confirmLoading?: boolean;
|
|
43
|
-
/**
|
|
160
|
+
/**
|
|
161
|
+
* 是否处于初始化加载中状态。为 true 时,标题显示骨架屏、
|
|
162
|
+
* 内容区域显示骨架屏(行数由 `initializingSkeletonRows` 控制)、footer 隐藏。
|
|
163
|
+
* 初始化完成后设为 false,若加载失败可设置 `initializingError` 展示错误状态。
|
|
164
|
+
*/
|
|
44
165
|
initializing?: boolean;
|
|
45
|
-
/**
|
|
166
|
+
/**
|
|
167
|
+
* 初始化错误内容。有值时弹窗进入错误状态:标题变为"加载失败",
|
|
168
|
+
* 内容区域显示错误详情,确认按钮文案变为"重试"。
|
|
169
|
+
* 与 `initializing` 配合使用:先设 initializing=true 加载,
|
|
170
|
+
* 失败时设 initializing=false 且 initializingError="错误信息"。
|
|
171
|
+
*/
|
|
46
172
|
initializingError?: string | React.ReactNode;
|
|
47
|
-
/**
|
|
173
|
+
/**
|
|
174
|
+
* 初始化骨架屏行数,仅在 `initializing` 为 true 时生效
|
|
175
|
+
* @default 2
|
|
176
|
+
*/
|
|
48
177
|
initializingSkeletonRows?: number;
|
|
49
178
|
}
|