@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.
Files changed (56) hide show
  1. package/README.md +34 -0
  2. package/dist/cjs/core/Cascader/cascader.widget.js +12 -12
  3. package/dist/cjs/core/SearchInput/SearchInput.hook.js +124 -0
  4. package/dist/cjs/core/SearchInput/SearchInput.js +253 -0
  5. package/dist/cjs/core/SearchInput/SearchInput.style.js +13 -0
  6. package/dist/cjs/core/index.js +6 -6
  7. package/dist/cjs/index.js +172 -172
  8. package/dist/cjs/legacy-antd.js +89 -89
  9. package/dist/cjs/stats1.html +1 -1
  10. package/dist/components.css +3836 -3813
  11. package/dist/esm/core/Cascader/cascader.widget.js +1 -1
  12. package/dist/esm/core/SearchInput/SearchInput.hook.js +117 -0
  13. package/dist/esm/core/SearchInput/SearchInput.js +247 -0
  14. package/dist/esm/core/SearchInput/SearchInput.style.js +7 -0
  15. package/dist/esm/index.js +1 -1
  16. package/dist/esm/legacy-antd.js +1 -1
  17. package/dist/esm/stats1.html +1 -1
  18. package/dist/linaria.merged.scss +3611 -3582
  19. package/dist/src/core/Cascader/cascader.type.d.ts +1 -1
  20. package/dist/src/core/ImmersiveDialog/type.d.ts +127 -19
  21. package/dist/src/core/MediumDialog/MediumDialog.type.d.ts +49 -1
  22. package/dist/src/core/SearchInput/SearchInput.d.ts +2 -0
  23. package/dist/src/core/SearchInput/SearchInput.hook.d.ts +9 -0
  24. package/dist/src/core/SearchInput/SearchInput.style.d.ts +5 -0
  25. package/dist/src/core/SearchInput/SearchInput.type.d.ts +150 -0
  26. package/dist/src/core/SearchInput/__test__/SearchInput.hook.test.d.ts +1 -0
  27. package/dist/src/core/SearchInput/index.d.ts +2 -4
  28. package/dist/src/core/SmallDialog/SmallDialog.type.d.ts +150 -21
  29. package/dist/src/core/TableForm/types.d.ts +216 -68
  30. package/dist/src/core/WizardDialog/type.d.ts +147 -13
  31. package/dist/src/core/index.d.ts +0 -1
  32. package/dist/src/coreX/Dialogs/DeleteDialog/DeleteDialog.type.d.ts +100 -9
  33. package/dist/src/coreX/Dialogs/RejectDialog/RejectDialog.type.d.ts +126 -19
  34. package/dist/stories/docs/core/ImmersiveDialog.stories.d.ts +76 -8
  35. package/dist/stories/docs/core/MediumDialog.stories.d.ts +42 -8
  36. package/dist/stories/docs/core/SearchInput.stories.d.ts +6 -1
  37. package/dist/stories/docs/core/SmallDialog.stories.d.ts +86 -7
  38. package/dist/stories/docs/core/TableForm.stories.d.ts +40 -26
  39. package/dist/stories/docs/core/WizardDialog.stories.d.ts +65 -6
  40. package/dist/stories/docs/coreX/Dialogs/DeleteDialog.stories.d.ts +20 -19
  41. package/dist/stories/docs/coreX/Dialogs/RejectDialog.stories.d.ts +24 -23
  42. package/dist/style.css +3836 -3813
  43. package/docs/core/ImmersiveDialog/guide.md +298 -0
  44. package/docs/core/LegacyModal/migrate-guide.md +422 -0
  45. package/docs/core/MediumDialog/guide.md +263 -0
  46. package/docs/core/SearchInput/guide.md +125 -0
  47. package/docs/core/SmallDialog/guide.md +224 -0
  48. package/docs/core/TableForm/guide.md +195 -0
  49. package/docs/core/WizardDialog/guide.md +322 -0
  50. package/docs/coreX/DeleteDialog/guide.md +161 -0
  51. package/docs/coreX/RejectDialog/guide.md +185 -0
  52. package/docs/llms.txt +169 -0
  53. package/package.json +6 -5
  54. package/dist/cjs/core/SearchInput/index.js +0 -164
  55. package/dist/esm/core/SearchInput/index.js +0 -157
  56. package/dist/src/core/SearchInput/searchInput.type.d.ts +0 -63
package/docs/llms.txt ADDED
@@ -0,0 +1,169 @@
1
+ # @cloudtower/eagle
2
+
3
+ > CloudTower 产品的 React UI 组件库,基于 Ant Design 二次封装。
4
+
5
+ ## 安装与初始化
6
+
7
+ npm 包名:@cloudtower/eagle
8
+ 样式引入:import "@cloudtower/eagle/dist/style.css"
9
+
10
+ 使用 UIKitProvider 包裹应用根节点,内部管理 ConfigProvider、i18n、message 等上下文。
11
+
12
+ ## 反馈
13
+
14
+ - [SmallDialog](core/SmallDialog/guide.md): 小型对话框(492px),用于简单确认和提示
15
+ - [MediumDialog](core/MediumDialog/guide.md): 中型对话框(720px),用于表单和较多内容
16
+ - [ImmersiveDialog](core/ImmersiveDialog/guide.md): 沉浸式全屏对话框,支持左右面板布局
17
+ - [WizardDialog](core/WizardDialog/guide.md): 向导对话框,支持多步骤流程
18
+ - [DeleteDialog](coreX/DeleteDialog/guide.md): 删除确认对话框,基于 SmallDialog 封装,自带 danger 按钮,支持异步删除和错误信息展示
19
+ - [RejectDialog](coreX/RejectDialog/guide.md): 操作拒绝反馈对话框,支持 Single/All/Part/Custom 四种模式
20
+ - message: 全局提示,支持 success/error/warning/info/loading 类型
21
+ - message-group: 消息分组,将多条消息合并为一组展示
22
+ - Alert: 警告提示条,支持 success/info/warning/error 类型,可关闭
23
+ - Banner: 全局横幅通知,支持 error/info/warning 类型,固定在页面顶部
24
+ - notification: 通知提醒(继承 antd notification)
25
+
26
+ ## 数据录入
27
+
28
+ - Form: 表单容器,封装 antd Form,管理表单数据收集和校验
29
+ - FormItem: 表单项,封装 antd Form.Item,提供 label、校验规则等
30
+ - Input: 输入框,封装 antd Input
31
+ - InputNumber: 数字输入框,封装 antd InputNumber
32
+ - InputInteger: 整数输入框,只允许输入整数
33
+ - InputPassword: 密码输入框,支持显示/隐藏切换
34
+ - InputGroup: 输入框组合,将多个输入控件组合为一行
35
+ - InputTagItem: 标签样式的输入项,用于标签化显示
36
+ - TextArea: 多行文本输入框
37
+ - Select: 下拉选择器,封装 antd Select,支持搜索和多选
38
+ - Cascader: 级联选择器,封装 antd Cascader
39
+ - AutoComplete: 自动补全输入框
40
+ - Checkbox: 复选框
41
+ - Radio: 单选框
42
+ - Switch: 开关切换
43
+ - DateRangePicker: 日期范围选择器,支持绝对日期和相对时间两种模式
44
+ - TimePicker: 时间选择器
45
+ - Calendar: 日历面板
46
+ - TimeZoneSelect: 时区选择器,内置全球时区数据
47
+ - [SearchInput](core/SearchInput/guide.md): 搜索输入框,支持防抖搜索、结果导航(上下翻页/计数器)和最近搜索历史
48
+ - [TableForm](core/TableForm/guide.md): 表格表单,行内编辑的表格,支持批量填充、多种列类型、增删行、拖拽排序和三种校验模式
49
+ - Fields: 表单字段集合,包含 Boolean/DateTime/Enum/Float/Int/String/TextArea 等预设字段
50
+ - CronPlan: 定时计划配置组件,支持按天/周/月设置 cron 表达式
51
+ - CronCalendar: 定时计划日历预览,可视化展示 cron 表达式的执行日期
52
+ - SortableList: 可拖拽排序列表,基于 react-beautiful-dnd
53
+ - SwitchWithText: 带文字标签的开关组件
54
+
55
+ ## 数据展示
56
+
57
+ - Table: 表格,封装 antd Table
58
+ - Tab: 标签页,封装 antd Tabs
59
+ - Collapse: 折叠面板(继承 antd Collapse)
60
+ - Tag: 标签,支持多种预设颜色
61
+ - Token: 令牌标签,支持颜色、大小和可关闭
62
+ - Badge: 徽标数,封装 antd Badge
63
+ - StatusCapsule: 状态胶囊,圆角标签用于显示状态,支持多种颜色和 loading
64
+ - Legend: 图例标签,用于图表图例展示,支持多种形状和颜色
65
+ - Tooltip: 文字提示气泡
66
+ - Truncate: 文本截断,超长文本省略并 hover 显示完整内容
67
+ - Card: 卡片容器,封装 antd Card
68
+ - AccordionCard: 手风琴卡片,支持展开/收起的卡片容器
69
+ - DetailCard: 详情卡片,带标题的详情展示卡片
70
+ - Avatar: 头像
71
+ - Skeleton: 骨架屏,封装 antd Skeleton
72
+ - Empty: 空状态占位,封装 antd Empty
73
+ - BlankState: 空白状态页,支持 large/medium/small/area 四种尺寸
74
+ - ExpandableList: 可展开列表,包含 ExpandableContainer/ExpandableItem/ExpandIcon/RoundOrder
75
+ - Overflow: 溢出检测组件,内容溢出时显示替代内容
76
+ - OverflowTooltip: 溢出提示,文本溢出时自动显示 Tooltip
77
+ - NamesTooltip: 名称列表提示,hover 显示完整名称列表
78
+ - UnderlineTooltip: 下划线提示,文本带下划线并 hover 显示 Tooltip
79
+ - SummaryTable: 摘要表格,键值对形式的信息展示
80
+ - InfoRowList: 信息行列表,label-content 两列布局的详情信息展示
81
+ - CheckPointList: 检查点列表,展示多步骤检查结果和状态
82
+ - I18nNameTag: 国际化名称标签,在翻译文本中嵌入名称 Tag
83
+ - DonutChart: 环形图,基于 recharts 的饼图组件
84
+ - LineChart: 折线图,支持指标数据时序展示
85
+ - BarChart: 条形图,堆叠式水平条形图
86
+ - Metric: 指标图表组件,集成折线图和图例
87
+ - ChartWithTooltip: 带 Tooltip 的图表,结合单位格式化展示指标数据
88
+ - UnitWithChart: 单位数值与图表组合展示
89
+ - Progress: 进度条,支持线形和区域两种模式
90
+ - StepProgress: 步骤进度,圆形进度指示器
91
+ - Counting: 计数器,按指定间隔自动刷新渲染
92
+
93
+ ## 通用
94
+
95
+ - Button: 按钮,封装 antd Button
96
+ - ButtonGroup: 按钮组,将多个按钮组合为一组
97
+ - Icon: 图标容器,统一图标尺寸和样式
98
+ - BaseIcon: 基础图标,支持 SVG 图标渲染
99
+ - Link: 链接,封装 antd Typography.Link
100
+ - Typo: 排版样式集合,提供 Display/Heading/Label/Paragraph 等预定义的 Linaria 类名
101
+ - Loading: 加载中动画,三条竖线动画
102
+ - CircleLoading: 圆形加载动画,旋转渐变圆形图标
103
+ - Space: 间距组件,封装 antd Space
104
+ - Antd5Flex: 弹性布局,直接导出 antd5 Flex
105
+ - Show: 条件渲染组件,根据 condition 决定是否渲染 children
106
+ - DropdownTransition: 下拉过渡动画,基于 CSSTransition 的显示/隐藏过渡
107
+
108
+ ## 布局
109
+
110
+ - Nav: 顶部导航栏,支持左/中/右三区域布局
111
+ - Sider: 侧边栏布局,基于 antd Layout.Sider,含菜单和底部操作区
112
+ - SidebarMenu: 侧边菜单,多级导航菜单
113
+ - SidebarSubtitle: 侧边栏小标题
114
+ - Divider: 分隔线(继承 antd Divider)
115
+ - GoBackButton: 返回按钮,带箭头图标的导航返回按钮
116
+ - TabMenu: 标签菜单,顶部标签切换 + 内容区,支持下拉溢出菜单
117
+
118
+ ## 导航
119
+
120
+ - Breadcrumb: 面包屑导航
121
+ - Pagination: 分页器,封装 antd Pagination
122
+ - SimplePagination: 简易分页,仅显示页码输入和前后翻页
123
+ - Steps: 步骤条,封装 antd Steps
124
+ - SegmentControl: 分段控制器,封装 antd5 Segmented
125
+ - DropdownMenu: 下拉菜单,封装 antd Dropdown + Menu
126
+ - Antd5Dropdown: 下拉菜单,封装 antd5 Dropdown
127
+ - Antd5Anchor: 锚点导航,封装 antd5 Anchor
128
+ - Antd5Tree: 树形控件,封装 antd5 Tree
129
+ - Timeline: 时间线,封装 antd Timeline
130
+ - BatchOperation: 批量操作工具栏,表格多选后显示的操作栏
131
+
132
+ ## 数据格式化
133
+
134
+ - Byte: 字节格式化显示(自动转换 KB/MB/GB 等)
135
+ - BytePerSecond: 字节每秒速率格式化
136
+ - Bit: 比特格式化显示
137
+ - BitPerSecond: 比特每秒速率格式化
138
+ - Bps: 每秒传输速率格式化
139
+ - Frequency: 频率格式化显示(Hz/GHz 等)
140
+ - Percent: 百分比格式化显示
141
+ - Second: 秒数格式化显示
142
+ - Speed: 速度格式化显示
143
+ - Time: 时间日期格式化显示
144
+ - Arch: CPU 架构文本显示(x86_64/aarch64 等国际化文本)
145
+
146
+ ## 错误处理
147
+
148
+ - Error: 简单错误文本显示
149
+ - ErrorBoundary: 错误边界,捕获子组件渲染错误并显示回退 UI
150
+ - BasicCTError: CloudTower 错误信息展示,解析并展示 CT 业务错误
151
+ - FailedLoad: 加载失败组件,展示错误信息和重试按钮
152
+
153
+ ## 基础设施
154
+
155
+ - ConfigProvider: 全局配置,管理 antd4/antd5 双版本 locale 和主题
156
+ - KitStoreProvider: 组件库 Redux Store Provider,管理弹窗栈等全局状态
157
+ - ModalStack: 弹窗栈渲染器,渲染通过 usePushModal 打开的弹窗
158
+ - ParrotTrans: 国际化文本组件,封装 react-i18next Trans 并注入 parrot i18n 实例
159
+
160
+ ## 废弃组件
161
+
162
+ - [~~LegacyModal~~](core/LegacyModal/migrate-guide.md): 已废弃,请迁移至 SmallDialog / MediumDialog / ImmersiveDialog / WizardDialog
163
+ - ~~LegacySelect~~: 已废弃,请迁移至 Select
164
+ - ~~DeprecatedProgress~~: 已废弃,请迁移至 Progress
165
+ - ~~DeprecatedDonutChart~~: 已废弃,请迁移至 DonutChart
166
+ - ~~KubeConfigModal~~: 业务专用弹窗,基于 LegacyModal,不建议新代码使用
167
+ - ~~Styled~~: 已废弃的通用样式组件集合(CommonContent, ModalBody, WizardBody 等)
168
+
169
+ 各废弃组件的迁移指南见对应目录下的 migrate-guide.md。
package/package.json CHANGED
@@ -1,12 +1,13 @@
1
1
  {
2
2
  "name": "@cloudtower/eagle",
3
- "version": "490.0.5",
3
+ "version": "490.0.7",
4
4
  "main": "dist/cjs/index.js",
5
5
  "module": "./dist/esm/index.js",
6
6
  "types": "dist/src/index.d.ts",
7
7
  "files": [
8
8
  "dist",
9
- "antd"
9
+ "antd",
10
+ "docs"
10
11
  ],
11
12
  "sideEffects": false,
12
13
  "license": "MIT",
@@ -26,8 +27,8 @@
26
27
  "sync:color": "node tools/fetch-figma-color.js"
27
28
  },
28
29
  "dependencies": {
29
- "@cloudtower/icons-react": "^490.0.5",
30
- "@cloudtower/parrot": "^490.0.5",
30
+ "@cloudtower/icons-react": "^490.0.7",
31
+ "@cloudtower/parrot": "^490.0.7",
31
32
  "@cloudtower/rc-notification": "^4.6.1",
32
33
  "@linaria/core": "^4.2.2",
33
34
  "@linaria/react": "^4.3.0",
@@ -115,5 +116,5 @@
115
116
  "vite": "^4.5.1",
116
117
  "vitest": "^3.1.1"
117
118
  },
118
- "gitHead": "4c610568356d034ef860f9b3e9159795b707d4bd"
119
+ "gitHead": "1a6679790080e9e7795cddbdc2eea5411e0d5456"
119
120
  }
@@ -1,164 +0,0 @@
1
- 'use strict';
2
-
3
- var icons = require('@ant-design/icons');
4
- var iconsReact = require('@cloudtower/icons-react');
5
- var core = require('@linaria/core');
6
- var index$1 = require('../Icon/index.js');
7
- var index$3 = require('../Input/index.js');
8
- var index$2 = require('../Tooltip/index.js');
9
- var index = require('../Typo/index.js');
10
- var useParrotTranslation = require('../../hooks/useParrotTranslation.js');
11
- var _ = require('lodash');
12
- var React = require('react');
13
-
14
- function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
15
-
16
- var ___default = /*#__PURE__*/_interopDefault(_);
17
- var React__default = /*#__PURE__*/_interopDefault(React);
18
-
19
- var __defProp = Object.defineProperty;
20
- var __defProps = Object.defineProperties;
21
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
22
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
23
- var __hasOwnProp = Object.prototype.hasOwnProperty;
24
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
25
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {
26
- enumerable: true,
27
- configurable: true,
28
- writable: true,
29
- value
30
- }) : obj[key] = value;
31
- var __spreadValues = (a, b) => {
32
- for (var prop in b || (b = {})) if (__hasOwnProp.call(b, prop)) __defNormalProp(a, prop, b[prop]);
33
- if (__getOwnPropSymbols) for (var prop of __getOwnPropSymbols(b)) {
34
- if (__propIsEnum.call(b, prop)) __defNormalProp(a, prop, b[prop]);
35
- }
36
- return a;
37
- };
38
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
39
- var __objRest = (source, exclude) => {
40
- var target = {};
41
- for (var prop in source) if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0) target[prop] = source[prop];
42
- if (source != null && __getOwnPropSymbols) for (var prop of __getOwnPropSymbols(source)) {
43
- if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop)) target[prop] = source[prop];
44
- }
45
- return target;
46
- };
47
- const InputStyle = "E_i11gg7mj";
48
- const CountTextStyle = "E_cc368xp";
49
- const IconContainerStyle = "E_i11o6xqj";
50
- const DisabledIconStyle = "E_d19ruhdj";
51
- const SearchInput = props => {
52
- const _a = props,
53
- {
54
- onChange,
55
- debounceWait = 300,
56
- total = 0,
57
- onSearchNext,
58
- onSearchPrev,
59
- prefixHoverIcon,
60
- nextHoverIcon,
61
- clearHoverIcon,
62
- prefixIcon,
63
- nextIcon,
64
- clearIcon,
65
- width,
66
- searchIcon,
67
- current: externalCurrent
68
- } = _a,
69
- restProps = __objRest(_a, ["onChange", "debounceWait", "total", "onSearchNext", "onSearchPrev", "prefixHoverIcon", "nextHoverIcon", "clearHoverIcon", "prefixIcon", "nextIcon", "clearIcon", "width", "searchIcon", "current"]);
70
- const [internalCurrent, setInternalCurrent] = React.useState(0);
71
- const [value, setValue] = React.useState(props.value || "");
72
- const {
73
- t
74
- } = useParrotTranslation();
75
- const onSearch = ___default.default.debounce(onChange, debounceWait);
76
- const isNoMatch = total === 0;
77
- const current = externalCurrent !== void 0 ? externalCurrent : internalCurrent;
78
- const setCurrent = React.useCallback(newCurrent => {
79
- if (externalCurrent === void 0) {
80
- setInternalCurrent(newCurrent);
81
- }
82
- }, [externalCurrent]);
83
- const next = React.useCallback(() => {
84
- if (total) {
85
- const nextCurrent = current + 1 > total ? 1 : current + 1;
86
- onSearchNext == null ? void 0 : onSearchNext(value, nextCurrent);
87
- setCurrent(nextCurrent);
88
- }
89
- }, [onSearchNext, current, total, value, setCurrent]);
90
- const prev = React.useCallback(() => {
91
- if (total) {
92
- const prevCurrent = current - 1 < 1 ? total : current - 1;
93
- onSearchPrev == null ? void 0 : onSearchPrev(value, prevCurrent);
94
- setCurrent(prevCurrent);
95
- }
96
- }, [onSearchPrev, current, total, value, setCurrent]);
97
- const suffix = onSearchNext && onSearchPrev && value ? /* @__PURE__ */React__default.default.createElement(React__default.default.Fragment, null, typeof total === "number" ? /* @__PURE__ */React__default.default.createElement("span", {
98
- className: core.cx(index.Typo.Label.l4_regular, "counter-text", CountTextStyle)
99
- }, current, "/", total) : null, /* @__PURE__ */React__default.default.createElement("span", {
100
- className: IconContainerStyle
101
- }, isNoMatch ? /* @__PURE__ */React__default.default.createElement(index$1, {
102
- className: DisabledIconStyle,
103
- src: iconsReact.ArrowChevronUp16SecondaryIcon,
104
- style: {
105
- opacity: 0.5
106
- }
107
- }) : /* @__PURE__ */React__default.default.createElement(index$2, {
108
- title: t("components.prev")
109
- }, /* @__PURE__ */React__default.default.createElement(index$1, {
110
- src: prefixIcon != null ? prefixIcon : iconsReact.ArrowChevronUp16SecondaryIcon,
111
- hoverSrc: prefixHoverIcon != null ? prefixHoverIcon : iconsReact.ArrowChevronUp16BlueIcon,
112
- onClick: prev
113
- })), isNoMatch ? /* @__PURE__ */React__default.default.createElement(index$1, {
114
- className: DisabledIconStyle,
115
- src: iconsReact.ArrowChevronDown16SecondaryIcon,
116
- style: {
117
- opacity: 0.5
118
- }
119
- }) : /* @__PURE__ */React__default.default.createElement(index$2, {
120
- title: t("components.next")
121
- }, /* @__PURE__ */React__default.default.createElement(index$1, {
122
- src: nextIcon != null ? nextIcon : iconsReact.ArrowChevronDown16SecondaryIcon,
123
- hoverSrc: nextHoverIcon != null ? nextHoverIcon : iconsReact.ArrowChevronDown16BlueIcon,
124
- onClick: next
125
- })), /* @__PURE__ */React__default.default.createElement(index$2, {
126
- title: t("components.clear")
127
- }, /* @__PURE__ */React__default.default.createElement(index$1, {
128
- src: clearIcon != null ? clearIcon : iconsReact.XmarkCloseCircleFill16TertiaryIcon,
129
- hoverSrc: clearHoverIcon != null ? clearHoverIcon : iconsReact.XmarkCloseCircleFill16SecondaryIcon,
130
- onClick: () => {
131
- onSearch("");
132
- setValue("");
133
- }
134
- })))) : null;
135
- React.useEffect(() => {
136
- setValue(props.value || "");
137
- }, [props.value]);
138
- React.useEffect(() => {
139
- if (externalCurrent === void 0) {
140
- setCurrent(total ? 1 : 0);
141
- }
142
- }, [value, total, externalCurrent, setCurrent]);
143
- return /* @__PURE__ */React__default.default.createElement(index$3, __spreadProps(__spreadValues({
144
- style: {
145
- width: width != null ? width : 276
146
- },
147
- prefix: searchIcon ? /* @__PURE__ */React__default.default.createElement(index$1, {
148
- src: searchIcon
149
- }) : /* @__PURE__ */React__default.default.createElement(icons.SearchOutlined, null),
150
- suffix,
151
- onChange: e => {
152
- const newValue = e.target.value;
153
- onSearch(newValue);
154
- setValue(newValue);
155
- },
156
- onPressEnter: next,
157
- value
158
- }, restProps), {
159
- className: core.cx(InputStyle, restProps.className)
160
- }));
161
- };
162
- var SearchInput$1 = SearchInput;
163
-
164
- module.exports = SearchInput$1;
@@ -1,157 +0,0 @@
1
- import { SearchOutlined } from '@ant-design/icons';
2
- import { ArrowChevronUp16SecondaryIcon, ArrowChevronUp16BlueIcon, ArrowChevronDown16SecondaryIcon, ArrowChevronDown16BlueIcon, XmarkCloseCircleFill16TertiaryIcon, XmarkCloseCircleFill16SecondaryIcon } from '@cloudtower/icons-react';
3
- import { cx } from '@linaria/core';
4
- import Icon from '../Icon/index.js';
5
- import Input from '../Input/index.js';
6
- import Tooltip from '../Tooltip/index.js';
7
- import { Typo } from '../Typo/index.js';
8
- import useParrotTranslation from '../../hooks/useParrotTranslation.js';
9
- import _ from 'lodash';
10
- import React__default, { useState, useCallback, useEffect } from 'react';
11
-
12
- var __defProp = Object.defineProperty;
13
- var __defProps = Object.defineProperties;
14
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
15
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
16
- var __hasOwnProp = Object.prototype.hasOwnProperty;
17
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
18
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {
19
- enumerable: true,
20
- configurable: true,
21
- writable: true,
22
- value
23
- }) : obj[key] = value;
24
- var __spreadValues = (a, b) => {
25
- for (var prop in b || (b = {})) if (__hasOwnProp.call(b, prop)) __defNormalProp(a, prop, b[prop]);
26
- if (__getOwnPropSymbols) for (var prop of __getOwnPropSymbols(b)) {
27
- if (__propIsEnum.call(b, prop)) __defNormalProp(a, prop, b[prop]);
28
- }
29
- return a;
30
- };
31
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
32
- var __objRest = (source, exclude) => {
33
- var target = {};
34
- for (var prop in source) if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0) target[prop] = source[prop];
35
- if (source != null && __getOwnPropSymbols) for (var prop of __getOwnPropSymbols(source)) {
36
- if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop)) target[prop] = source[prop];
37
- }
38
- return target;
39
- };
40
- const InputStyle = "E_i11gg7mj";
41
- const CountTextStyle = "E_cc368xp";
42
- const IconContainerStyle = "E_i11o6xqj";
43
- const DisabledIconStyle = "E_d19ruhdj";
44
- const SearchInput = props => {
45
- const _a = props,
46
- {
47
- onChange,
48
- debounceWait = 300,
49
- total = 0,
50
- onSearchNext,
51
- onSearchPrev,
52
- prefixHoverIcon,
53
- nextHoverIcon,
54
- clearHoverIcon,
55
- prefixIcon,
56
- nextIcon,
57
- clearIcon,
58
- width,
59
- searchIcon,
60
- current: externalCurrent
61
- } = _a,
62
- restProps = __objRest(_a, ["onChange", "debounceWait", "total", "onSearchNext", "onSearchPrev", "prefixHoverIcon", "nextHoverIcon", "clearHoverIcon", "prefixIcon", "nextIcon", "clearIcon", "width", "searchIcon", "current"]);
63
- const [internalCurrent, setInternalCurrent] = useState(0);
64
- const [value, setValue] = useState(props.value || "");
65
- const {
66
- t
67
- } = useParrotTranslation();
68
- const onSearch = _.debounce(onChange, debounceWait);
69
- const isNoMatch = total === 0;
70
- const current = externalCurrent !== void 0 ? externalCurrent : internalCurrent;
71
- const setCurrent = useCallback(newCurrent => {
72
- if (externalCurrent === void 0) {
73
- setInternalCurrent(newCurrent);
74
- }
75
- }, [externalCurrent]);
76
- const next = useCallback(() => {
77
- if (total) {
78
- const nextCurrent = current + 1 > total ? 1 : current + 1;
79
- onSearchNext == null ? void 0 : onSearchNext(value, nextCurrent);
80
- setCurrent(nextCurrent);
81
- }
82
- }, [onSearchNext, current, total, value, setCurrent]);
83
- const prev = useCallback(() => {
84
- if (total) {
85
- const prevCurrent = current - 1 < 1 ? total : current - 1;
86
- onSearchPrev == null ? void 0 : onSearchPrev(value, prevCurrent);
87
- setCurrent(prevCurrent);
88
- }
89
- }, [onSearchPrev, current, total, value, setCurrent]);
90
- const suffix = onSearchNext && onSearchPrev && value ? /* @__PURE__ */React__default.createElement(React__default.Fragment, null, typeof total === "number" ? /* @__PURE__ */React__default.createElement("span", {
91
- className: cx(Typo.Label.l4_regular, "counter-text", CountTextStyle)
92
- }, current, "/", total) : null, /* @__PURE__ */React__default.createElement("span", {
93
- className: IconContainerStyle
94
- }, isNoMatch ? /* @__PURE__ */React__default.createElement(Icon, {
95
- className: DisabledIconStyle,
96
- src: ArrowChevronUp16SecondaryIcon,
97
- style: {
98
- opacity: 0.5
99
- }
100
- }) : /* @__PURE__ */React__default.createElement(Tooltip, {
101
- title: t("components.prev")
102
- }, /* @__PURE__ */React__default.createElement(Icon, {
103
- src: prefixIcon != null ? prefixIcon : ArrowChevronUp16SecondaryIcon,
104
- hoverSrc: prefixHoverIcon != null ? prefixHoverIcon : ArrowChevronUp16BlueIcon,
105
- onClick: prev
106
- })), isNoMatch ? /* @__PURE__ */React__default.createElement(Icon, {
107
- className: DisabledIconStyle,
108
- src: ArrowChevronDown16SecondaryIcon,
109
- style: {
110
- opacity: 0.5
111
- }
112
- }) : /* @__PURE__ */React__default.createElement(Tooltip, {
113
- title: t("components.next")
114
- }, /* @__PURE__ */React__default.createElement(Icon, {
115
- src: nextIcon != null ? nextIcon : ArrowChevronDown16SecondaryIcon,
116
- hoverSrc: nextHoverIcon != null ? nextHoverIcon : ArrowChevronDown16BlueIcon,
117
- onClick: next
118
- })), /* @__PURE__ */React__default.createElement(Tooltip, {
119
- title: t("components.clear")
120
- }, /* @__PURE__ */React__default.createElement(Icon, {
121
- src: clearIcon != null ? clearIcon : XmarkCloseCircleFill16TertiaryIcon,
122
- hoverSrc: clearHoverIcon != null ? clearHoverIcon : XmarkCloseCircleFill16SecondaryIcon,
123
- onClick: () => {
124
- onSearch("");
125
- setValue("");
126
- }
127
- })))) : null;
128
- useEffect(() => {
129
- setValue(props.value || "");
130
- }, [props.value]);
131
- useEffect(() => {
132
- if (externalCurrent === void 0) {
133
- setCurrent(total ? 1 : 0);
134
- }
135
- }, [value, total, externalCurrent, setCurrent]);
136
- return /* @__PURE__ */React__default.createElement(Input, __spreadProps(__spreadValues({
137
- style: {
138
- width: width != null ? width : 276
139
- },
140
- prefix: searchIcon ? /* @__PURE__ */React__default.createElement(Icon, {
141
- src: searchIcon
142
- }) : /* @__PURE__ */React__default.createElement(SearchOutlined, null),
143
- suffix,
144
- onChange: e => {
145
- const newValue = e.target.value;
146
- onSearch(newValue);
147
- setValue(newValue);
148
- },
149
- onPressEnter: next,
150
- value
151
- }, restProps), {
152
- className: cx(InputStyle, restProps.className)
153
- }));
154
- };
155
- var SearchInput$1 = SearchInput;
156
-
157
- export { SearchInput$1 as default };
@@ -1,63 +0,0 @@
1
- /// <reference types="react" />
2
- import { InputProps } from "antd/lib/input";
3
- import { SrcType } from "../BaseIcon";
4
- export type SearchInputProps = Omit<InputProps, "onChange"> & {
5
- /**
6
- * 防抖延迟的时间,单位为毫秒
7
- */
8
- debounceWait?: number;
9
- /**
10
- * 搜索结果的总数
11
- */
12
- total?: number;
13
- /**
14
- * 当前选中的结果索引,可用于外部控制当前位置
15
- * 如果不提供,组件将内部管理此状态
16
- */
17
- current?: number;
18
- /**
19
- * 搜索下一个结果时的回调函数
20
- */
21
- onSearchNext?: (value: string, current: number) => void;
22
- /**
23
- * 搜索上一个结果时的回调函数
24
- */
25
- onSearchPrev?: (value: string, current: number) => void;
26
- /**
27
- * 输入内容改变时的回调函数
28
- */
29
- onChange: (value: string) => void;
30
- /**
31
- * 搜索的图标
32
- */
33
- searchIcon?: SrcType;
34
- /**
35
- * 上一个图标
36
- */
37
- prefixIcon?: SrcType;
38
- /**
39
- * 上一个 hover 时的图标
40
- */
41
- prefixHoverIcon?: SrcType;
42
- /**
43
- * 下一个图标
44
- */
45
- nextIcon?: SrcType;
46
- /**
47
- * 下一个 hover 时的图标
48
- */
49
- nextHoverIcon?: SrcType;
50
- /**
51
- * 清空图标
52
- */
53
- clearIcon?: SrcType;
54
- /**
55
- * 清空 hover 时的图标
56
- */
57
- clearHoverIcon?: SrcType;
58
- /**
59
- * 搜索框高度,默认为 276
60
- */
61
- width?: number | string;
62
- };
63
- export type SearchInputComponentType = React.FC<SearchInputProps>;