@alifd/chat 0.2.0 → 0.3.0-beta.0

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 (156) hide show
  1. package/es/HTMLRenderer/index.d.ts +4 -0
  2. package/es/HTMLRenderer/index.js +138 -0
  3. package/es/HTMLRenderer/index.less +194 -0
  4. package/es/HTMLRenderer/main.scss +233 -0
  5. package/es/HTMLRenderer/style.d.ts +1 -0
  6. package/es/HTMLRenderer/style.js +1 -0
  7. package/es/HTMLRenderer/types.d.ts +46 -0
  8. package/es/HTMLRenderer/types.js +1 -0
  9. package/es/ImagePreview/index.d.ts +13 -0
  10. package/es/ImagePreview/index.js +72 -0
  11. package/es/ImagePreview/main.scss +15 -0
  12. package/es/ImagePreview/style.d.ts +1 -0
  13. package/es/ImagePreview/style.js +1 -0
  14. package/es/ImagePreview/types.d.ts +31 -0
  15. package/es/ImagePreview/types.js +1 -0
  16. package/es/balloon/index.d.ts +7 -0
  17. package/es/balloon/index.js +7 -0
  18. package/es/balloon/style.d.ts +1 -0
  19. package/es/balloon/style.js +1 -0
  20. package/es/balloon/types.d.ts +219 -0
  21. package/es/balloon/types.js +1 -0
  22. package/es/card-loading/index.d.ts +11 -0
  23. package/es/card-loading/index.js +18 -0
  24. package/es/card-loading/main.scss +5 -0
  25. package/es/card-loading/style.d.ts +2 -0
  26. package/es/card-loading/style.js +2 -0
  27. package/es/card-loading/types.d.ts +10 -0
  28. package/es/card-loading/types.js +1 -0
  29. package/es/feedback/types.d.ts +8 -0
  30. package/es/float-button/hooks/useAutoHide.d.ts +0 -1
  31. package/es/float-button/hooks/useDragable.d.ts +0 -1
  32. package/es/float-button/index.d.ts +0 -1
  33. package/es/icon/index.d.ts +12 -0
  34. package/es/icon/index.js +21 -0
  35. package/es/icon/main.scss +1 -0
  36. package/es/icon/style.d.ts +2 -0
  37. package/es/icon/style.js +2 -0
  38. package/es/icon/types.d.ts +43 -0
  39. package/es/icon/types.js +1 -0
  40. package/es/index.d.ts +8 -0
  41. package/es/index.js +9 -1
  42. package/es/input/index.d.ts +1 -2
  43. package/es/list/index.d.ts +8 -0
  44. package/es/list/index.js +8 -0
  45. package/es/list/style.d.ts +1 -0
  46. package/es/list/style.js +1 -0
  47. package/es/list/types.d.ts +93 -0
  48. package/es/list/types.js +1 -0
  49. package/es/markdown/index.d.ts +6 -0
  50. package/es/markdown/index.js +138 -0
  51. package/es/markdown/main.scss +153 -0
  52. package/es/markdown/style.d.ts +3 -0
  53. package/es/markdown/style.js +3 -0
  54. package/es/markdown/types.d.ts +21 -0
  55. package/es/markdown/types.js +1 -0
  56. package/es/message/index.d.ts +75 -0
  57. package/es/message/index.js +30 -0
  58. package/es/message/main.scss +2 -0
  59. package/es/message/style.d.ts +2 -0
  60. package/es/message/style.js +2 -0
  61. package/es/message/types.d.ts +195 -0
  62. package/es/message/types.js +1 -0
  63. package/es/person-picker/index.d.ts +377 -2
  64. package/es/person-picker/index.js +3 -3
  65. package/es/tab/main.scss +2 -3
  66. package/es/tag/index.d.ts +20 -20
  67. package/es/tag/index.js +2 -2
  68. package/es/tag/main.scss +1 -1
  69. package/es/utils/func.d.ts +1 -0
  70. package/es/utils/func.js +9 -0
  71. package/lib/HTMLRenderer/index.d.ts +4 -0
  72. package/lib/HTMLRenderer/index.js +141 -0
  73. package/lib/HTMLRenderer/index.less +194 -0
  74. package/lib/HTMLRenderer/main.scss +233 -0
  75. package/lib/HTMLRenderer/style.d.ts +1 -0
  76. package/lib/HTMLRenderer/style.js +3 -0
  77. package/lib/HTMLRenderer/types.d.ts +46 -0
  78. package/lib/HTMLRenderer/types.js +2 -0
  79. package/lib/ImagePreview/index.d.ts +13 -0
  80. package/lib/ImagePreview/index.js +75 -0
  81. package/lib/ImagePreview/main.scss +15 -0
  82. package/lib/ImagePreview/style.d.ts +1 -0
  83. package/lib/ImagePreview/style.js +3 -0
  84. package/lib/ImagePreview/types.d.ts +31 -0
  85. package/lib/ImagePreview/types.js +2 -0
  86. package/lib/balloon/index.d.ts +7 -0
  87. package/lib/balloon/index.js +11 -0
  88. package/lib/balloon/style.d.ts +1 -0
  89. package/lib/balloon/style.js +3 -0
  90. package/lib/balloon/types.d.ts +219 -0
  91. package/lib/balloon/types.js +2 -0
  92. package/lib/card/view/card.js +2 -3
  93. package/lib/card-loading/index.d.ts +11 -0
  94. package/lib/card-loading/index.js +21 -0
  95. package/lib/card-loading/main.scss +5 -0
  96. package/lib/card-loading/style.d.ts +2 -0
  97. package/lib/card-loading/style.js +4 -0
  98. package/lib/card-loading/types.d.ts +10 -0
  99. package/lib/card-loading/types.js +2 -0
  100. package/lib/feedback/types.d.ts +8 -0
  101. package/lib/float-button/hooks/useAutoAlign.js +1 -2
  102. package/lib/float-button/hooks/useAutoHide.d.ts +0 -1
  103. package/lib/float-button/hooks/useAutoHide.js +1 -2
  104. package/lib/float-button/hooks/useDragable.d.ts +0 -1
  105. package/lib/float-button/hooks/useDragable.js +1 -2
  106. package/lib/float-button/hooks/useNestleEdge.js +1 -2
  107. package/lib/float-button/hooks/useTriggerType.js +1 -2
  108. package/lib/float-button/index.d.ts +0 -1
  109. package/lib/float-button/util.js +4 -5
  110. package/lib/float-button/view/balloon.js +1 -2
  111. package/lib/float-button/view/drawer.js +1 -2
  112. package/lib/float-button/view/inner-drawer.js +1 -2
  113. package/lib/icon/index.d.ts +12 -0
  114. package/lib/icon/index.js +23 -0
  115. package/lib/icon/main.scss +1 -0
  116. package/lib/icon/style.d.ts +2 -0
  117. package/lib/icon/style.js +4 -0
  118. package/lib/icon/types.d.ts +43 -0
  119. package/lib/icon/types.js +2 -0
  120. package/lib/index.d.ts +8 -0
  121. package/lib/index.js +30 -16
  122. package/lib/input/index.d.ts +1 -2
  123. package/lib/list/index.d.ts +8 -0
  124. package/lib/list/index.js +12 -0
  125. package/lib/list/style.d.ts +1 -0
  126. package/lib/list/style.js +3 -0
  127. package/lib/list/types.d.ts +93 -0
  128. package/lib/list/types.js +2 -0
  129. package/lib/markdown/index.d.ts +6 -0
  130. package/lib/markdown/index.js +141 -0
  131. package/lib/markdown/main.scss +153 -0
  132. package/lib/markdown/style.d.ts +3 -0
  133. package/lib/markdown/style.js +5 -0
  134. package/lib/markdown/types.d.ts +21 -0
  135. package/lib/markdown/types.js +2 -0
  136. package/lib/message/index.d.ts +75 -0
  137. package/lib/message/index.js +32 -0
  138. package/lib/message/main.scss +2 -0
  139. package/lib/message/style.d.ts +2 -0
  140. package/lib/message/style.js +4 -0
  141. package/lib/message/types.d.ts +195 -0
  142. package/lib/message/types.js +2 -0
  143. package/lib/person-picker/index.d.ts +377 -2
  144. package/lib/person-picker/index.js +3 -3
  145. package/lib/tab/main.scss +2 -3
  146. package/lib/tag/index.d.ts +20 -20
  147. package/lib/tag/index.js +2 -2
  148. package/lib/tag/main.scss +1 -1
  149. package/lib/utils/common.js +1 -2
  150. package/lib/utils/dingtalk.js +3 -4
  151. package/lib/utils/func.d.ts +1 -0
  152. package/lib/utils/func.js +12 -3
  153. package/lib/utils/hooks/useControlable.js +1 -2
  154. package/lib/utils/hooks/useDebounce.js +1 -2
  155. package/lib/utils/hooks/useThrottle.js +1 -2
  156. package/package.json +127 -5
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ import { MarkdownProps } from './types';
3
+ import 'highlight.js/styles/github.css';
4
+ export * from './types';
5
+ declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<MarkdownProps & React.RefAttributes<HTMLDivElement>, "key" | keyof MarkdownProps> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, HTMLDivElement, {}>;
6
+ export default _default;
@@ -0,0 +1,138 @@
1
+ import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
2
+ import classnames from 'classnames';
3
+ import MarkdownIt from 'markdown-it';
4
+ import HTMLRenderer from '../HTMLRenderer';
5
+ import { ConfigProvider } from '@alifd/next';
6
+ import { assignSubComponent } from '../utils';
7
+ import { init, transformTextWithEmoji } from '@ali/dingtalk-im-emoji';
8
+ import hljs from 'highlight.js'; // 引入 highlight.js
9
+ import 'highlight.js/styles/github.css'; // 引入代码高亮样式
10
+ /**
11
+ * @component Markdown
12
+ * @en Markdown
13
+ * @type 通用 - General
14
+ * @remarks Markdown 组件用于解析和渲染 Markdown 文本内容。 - Markdown component used to parse and render Markdown text content.
15
+ * @when 需要解析和渲染 Markdown 文本内容时使用。 - Use when you need to parse and render Markdown text content.
16
+ */
17
+ const Markdown = forwardRef(({ className, onReady, content }, ref) => {
18
+ useEffect(() => {
19
+ // 初始化表情库
20
+ init();
21
+ onReady === null || onReady === void 0 ? void 0 : onReady();
22
+ }, [onReady]);
23
+ const containerRef = useRef(null);
24
+ // 处理 HTML 标签
25
+ const processedContent = useMemo(() => {
26
+ const regex = /<font\s+([^>]+)>([^<]+)<\/font>/g;
27
+ return content.replace(regex, (match, attributes, text) => {
28
+ let sizeToken = '';
29
+ let colorTokenV2 = '';
30
+ // 提取属性
31
+ const sizeTokenMatch = attributes.match(/sizeToken=([\w_]+)/);
32
+ const colorTokenV2Match = attributes.match(/colorTokenV2=([\w_]+)/);
33
+ if (sizeTokenMatch) {
34
+ sizeToken = sizeTokenMatch[1].replace(/-/g, '_');
35
+ }
36
+ if (colorTokenV2Match) {
37
+ colorTokenV2 = colorTokenV2Match[1].replace(/-/g, '_');
38
+ }
39
+ // 生成样式
40
+ const styleParts = [];
41
+ if (sizeToken) {
42
+ styleParts.push(`font-size: var(--${sizeToken})`);
43
+ }
44
+ if (colorTokenV2) {
45
+ styleParts.push(`color: var(--${colorTokenV2})`);
46
+ }
47
+ const style = styleParts.join('; ');
48
+ return `<span style="${style}">${text}</span>`;
49
+ });
50
+ }, [content]);
51
+ // 转换表情符号
52
+ let transformedContent = useMemo(() => {
53
+ return transformTextWithEmoji(processedContent, {
54
+ genFrame: (name, url) => {
55
+ return {
56
+ htmlTag: 'img',
57
+ selfClose: true,
58
+ attr: {
59
+ draggable: 'false',
60
+ style: 'vertical-align: text-center; display: inline-block; pointer-events: none;', // 使用相对单位和 inline-block 显示
61
+ class: 'emoji',
62
+ title: '[' + name + ']',
63
+ src: url.url || url.staticURL,
64
+ alt: name,
65
+ },
66
+ };
67
+ },
68
+ });
69
+ }, [processedContent]);
70
+ // 渲染 Markdown
71
+ const html = useMemo(() => {
72
+ const md = new MarkdownIt({
73
+ html: true, // 确保允许解析 HTML 标签
74
+ xhtmlOut: true,
75
+ breaks: true,
76
+ langPrefix: 'language-',
77
+ linkify: true,
78
+ typographer: true,
79
+ highlight: (str, lang) => {
80
+ if (lang && hljs.getLanguage(lang)) {
81
+ try {
82
+ return hljs.highlight(lang, str, true).value;
83
+ }
84
+ catch (__) { }
85
+ }
86
+ return '';
87
+ }
88
+ });
89
+ // console.log(transformedContent, processedContent);
90
+ // 这里的 </ xx> 都被转成了&#x2F , 所以会font标签的元素 后面都会多一个 </ xx>
91
+ transformedContent = transformedContent.replace(/<&#x2F;/g, '</');
92
+ return md.render(transformedContent);
93
+ }, [transformedContent]);
94
+ useEffect(() => {
95
+ if (containerRef.current) {
96
+ // 清除现有的 .code-block-header 元素
97
+ const existingHeaders = containerRef.current.querySelectorAll('.code-block-header');
98
+ existingHeaders.forEach(header => header.remove());
99
+ const codeBlocks = containerRef.current.querySelectorAll('pre code');
100
+ codeBlocks.forEach((block) => {
101
+ var _a;
102
+ const code = block.textContent || '';
103
+ const pre = block.parentElement;
104
+ const lang = block.className.replace('language-', '') || 'plaintext';
105
+ // 创建代码块头部
106
+ const header = document.createElement('div');
107
+ header.className = 'code-block-header';
108
+ // 创建语言标签
109
+ const languageSpan = document.createElement('span');
110
+ languageSpan.className = 'code-block-language';
111
+ languageSpan.textContent = lang;
112
+ // 创建复制按钮
113
+ const copyButton = document.createElement('button');
114
+ copyButton.className = 'code-block-copy';
115
+ copyButton.textContent = '复制';
116
+ copyButton.onclick = () => {
117
+ navigator.clipboard.writeText(code).then(() => {
118
+ copyButton.textContent = '已复制';
119
+ setTimeout(() => {
120
+ copyButton.textContent = '复制';
121
+ }, 1000);
122
+ });
123
+ };
124
+ header.appendChild(languageSpan);
125
+ header.appendChild(copyButton);
126
+ // 插入头部到代码块前
127
+ (_a = pre === null || pre === void 0 ? void 0 : pre.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(header, pre);
128
+ });
129
+ }
130
+ }, [html]);
131
+ return (React.createElement("div", { ref: containerRef, className: classnames(className) },
132
+ React.createElement(HTMLRenderer, { imagePreview: true }, html)));
133
+ });
134
+ const MarkdownWithSub = assignSubComponent(Markdown, {
135
+ displayName: 'Markdown',
136
+ });
137
+ export * from './types';
138
+ export default ConfigProvider.config(MarkdownWithSub);
@@ -0,0 +1,153 @@
1
+ $primaryColor: #0080ff;
2
+ $alternativePrimaryColor: $primaryColor;
3
+ $mistPrimaryColor: fadeout($alternativePrimaryColor,93);
4
+ $mediumTextColor: hsla(230,60%,11%,0.7);
5
+ $subTextColor: hsla(230,90%,11%,0.45);
6
+
7
+ @mixin f-single-line() {
8
+ overflow: hidden;
9
+ white-space: nowrap;
10
+ text-overflow: ellipsis;
11
+ }
12
+
13
+ .box {
14
+ max-width: 100%;
15
+ }
16
+
17
+ .box img:only-child, .box video:only-child, .box .image:only-child {
18
+ display: inline-block;
19
+ margin: 0;
20
+ font-size: inherit;
21
+ vertical-align: inherit;
22
+ }
23
+
24
+ .emoji {
25
+ width: 1em;
26
+ height: 1em;
27
+ vertical-align: text-top;
28
+ display: inline-block;
29
+ pointer-events: none;
30
+ }
31
+
32
+ .title {
33
+ font-size: 16px;
34
+ font-weight: bolder;
35
+ margin-bottom: 12px;
36
+ }
37
+
38
+ .text > div {
39
+ color:$subTextColor;
40
+ }
41
+
42
+ .reference {
43
+ margin-top: 6px;
44
+ font-size: 12px;
45
+
46
+ &-tip {
47
+ display: flex;
48
+ margin: 0 -16px 6px 0;
49
+ justify-content: flex-end;
50
+
51
+ &-inner {
52
+ @include f-single-line();
53
+ background: linear-gradient(to right, transparent, $mistPrimaryColor);
54
+ padding: 0 16px 0 32px;
55
+ color: $mediumTextColor;
56
+ min-width: 0;
57
+ flex: 0 1 auto;
58
+ font-size: 12px;
59
+ line-height: 20px;
60
+ }
61
+ }
62
+ }
63
+
64
+ .trustworthyRiskAlert {
65
+ font-size: 12px;
66
+ line-height: 18px;
67
+ color: $subTextColor;
68
+ margin-bottom: 8px;
69
+ }
70
+ .code-block-header {
71
+ display: flex;
72
+ height:24px;
73
+ // margin-top: 8px;
74
+ justify-content: space-between;
75
+ align-items: center;
76
+ background-color: #EAECED;
77
+ padding: 5px 10px;
78
+ border-top-left-radius: 4px;
79
+ border-top-right-radius: 4px;
80
+ border-bottom: 1px solid #ddd;
81
+ }
82
+
83
+ .code-block-language {
84
+ font-weight: bold;
85
+ }
86
+
87
+ .code-block-copy {
88
+ color: var(--common_level3_base_color);
89
+ border: none;
90
+ border-radius: 4px;
91
+ height: 20px;
92
+ cursor: pointer;
93
+ }
94
+
95
+ pre {
96
+ background-color: #f8f8f8;
97
+ border-bottom-left-radius: 14px;
98
+ border-bottom-right-radius: 14px;
99
+ padding: 10px;
100
+ margin-bottom: 10px;
101
+ }
102
+
103
+ .code-block-copy:hover {
104
+ background-color: #d2d2d2;
105
+ }
106
+
107
+ :root {
108
+ --common_hypertitle_text_style__font_size: 64px;
109
+ --common_largetitle_text_style__font_size: 32px;
110
+ --common_h1_text_style__font_size: 24px;
111
+ --common_h2_text_style__font_size: 20px;
112
+ --common_h3_text_style__font_size: 18px;
113
+ --common_h4_text_style__font_size: 16px;
114
+ --common_h5_text_style__font_size: 15px;
115
+ --common_body_text_style__font_size: 14px;
116
+ --common_footnote_text_style__font_size: 12px;
117
+
118
+ --common_yellow1_color: #e5c442;
119
+ --common_orange1_color: #f1a13b;
120
+ --common_red1_color: #ec6033;
121
+ --common_pink1_color: #da5388;
122
+ --common_purple1_color: #af68cd;
123
+ --common_blue1_color: #387df6;
124
+ --common_water1_color: #79c6f5;
125
+ --common_olive1_color: #77912b;
126
+ --common_green1_color: #4fae51;
127
+ --common_level1_base_color: #1a1a1f;
128
+ --common_level2_base_color: #777578;
129
+ --common_level3_base_color: #a2a3a5;
130
+ --common_level4_base_color: #c8c8c9;
131
+ --common_gray1_color: #888f94;
132
+ --common_gray2_color: #abafb3;
133
+ --common_gray3_color: #c4c7ca;
134
+ --common_gray4_color: #696969;
135
+ --common_gray5_color: #e5e6e8;
136
+ --common_gray6_color: #f0f1f2;
137
+ }
138
+
139
+ //暗黑模式的变量设置
140
+ @media (prefers-color-scheme: dark), (min-width: 0px) {
141
+ :root {
142
+ --common_level4_base_color:#47484a;
143
+ --common_gray1_color:#bebebe;
144
+ --common_gray2_color:#646464;
145
+ --common_gray3_color:#4b4b4b;
146
+ --common_gray4_color:#3a3a3a;
147
+ --common_gray5_color:#2c2c2c;
148
+ --common_gray6_color:#1e1e1e;
149
+ --common_level1_base_color:#D1D1D1;
150
+ --common_level2_base_color: #8C8C8D;
151
+ --common_level3_base_color:#757577;
152
+ }
153
+ }
@@ -0,0 +1,3 @@
1
+ import '../HTMLRenderer/style';
2
+ import './main.scss';
3
+ import 'highlight.js/styles/github.css';
@@ -0,0 +1,3 @@
1
+ import '../HTMLRenderer/style';
2
+ import './main.scss';
3
+ import 'highlight.js/styles/github.css';
@@ -0,0 +1,21 @@
1
+ import type React from 'react';
2
+ /**
3
+ * @api Markdown
4
+ */
5
+ export interface MarkdownProps extends React.HTMLAttributes<HTMLElement> {
6
+ /**
7
+ * 自定义类名
8
+ * @en Custom class name
9
+ */
10
+ className?: string;
11
+ /**
12
+ * 组件准备就绪的回调函数
13
+ * @en Callback function when the component is ready
14
+ */
15
+ onReady?: () => void;
16
+ /**
17
+ * Markdown 文本
18
+ * @en Data object
19
+ */
20
+ content: string;
21
+ }
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,75 @@
1
+ /**
2
+ * @component 标签
3
+ * @en Message
4
+ * @type 通用 - General
5
+ * @remarks 同 Next Message - Same as Next.Message
6
+ * @when Message
7
+ */
8
+ import React from 'react';
9
+ import type { MessageProps } from './types';
10
+ export * from './types';
11
+ declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<MessageProps & React.RefAttributes<import("@alifd/next/types/config-provider/types").ConfiguredComponent<import("@alifd/next/types/message").MessageProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("@alifd/next/types/config-provider/types").ConfiguredComponent<import("@alifd/next/types/message").MessageProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, {
12
+ state: {
13
+ visible: boolean | undefined;
14
+ };
15
+ onClose: () => void;
16
+ render(): import("react").JSX.Element | null;
17
+ context: any;
18
+ setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("@alifd/next/types/message").MessageProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
19
+ forceUpdate(callback?: (() => void) | undefined): void;
20
+ readonly props: Readonly<import("@alifd/next/types/message").MessageProps> & Readonly<{
21
+ children?: import("react").ReactNode;
22
+ }>;
23
+ refs: {
24
+ [key: string]: import("react").ReactInstance;
25
+ };
26
+ componentDidMount?(): void;
27
+ shouldComponentUpdate?(nextProps: Readonly<import("@alifd/next/types/message").MessageProps>, nextState: Readonly<{}>, nextContext: any): boolean;
28
+ componentWillUnmount?(): void;
29
+ componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
30
+ getSnapshotBeforeUpdate?(prevProps: Readonly<import("@alifd/next/types/message").MessageProps>, prevState: Readonly<{}>): any;
31
+ componentDidUpdate?(prevProps: Readonly<import("@alifd/next/types/message").MessageProps>, prevState: Readonly<{}>, snapshot?: any): void;
32
+ componentWillMount?(): void;
33
+ UNSAFE_componentWillMount?(): void;
34
+ componentWillReceiveProps?(nextProps: Readonly<import("@alifd/next/types/message").MessageProps>, nextContext: any): void;
35
+ UNSAFE_componentWillReceiveProps?(nextProps: Readonly<import("@alifd/next/types/message").MessageProps>, nextContext: any): void;
36
+ componentWillUpdate?(nextProps: Readonly<import("@alifd/next/types/message").MessageProps>, nextState: Readonly<{}>, nextContext: any): void;
37
+ UNSAFE_componentWillUpdate?(nextProps: Readonly<import("@alifd/next/types/message").MessageProps>, nextState: Readonly<{}>, nextContext: any): void;
38
+ }>>>, "key" | keyof MessageProps> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("@alifd/next/types/config-provider/types").ConfiguredComponent<import("@alifd/next/types/message").MessageProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("@alifd/next/types/config-provider/types").ConfiguredComponent<import("@alifd/next/types/message").MessageProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, {
39
+ state: {
40
+ visible: boolean | undefined;
41
+ };
42
+ onClose: () => void;
43
+ render(): import("react").JSX.Element | null;
44
+ context: any;
45
+ setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("@alifd/next/types/message").MessageProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
46
+ forceUpdate(callback?: (() => void) | undefined): void;
47
+ readonly props: Readonly<import("@alifd/next/types/message").MessageProps> & Readonly<{
48
+ children?: import("react").ReactNode;
49
+ }>;
50
+ refs: {
51
+ [key: string]: import("react").ReactInstance;
52
+ };
53
+ componentDidMount?(): void;
54
+ shouldComponentUpdate?(nextProps: Readonly<import("@alifd/next/types/message").MessageProps>, nextState: Readonly<{}>, nextContext: any): boolean;
55
+ componentWillUnmount?(): void;
56
+ componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
57
+ getSnapshotBeforeUpdate?(prevProps: Readonly<import("@alifd/next/types/message").MessageProps>, prevState: Readonly<{}>): any;
58
+ componentDidUpdate?(prevProps: Readonly<import("@alifd/next/types/message").MessageProps>, prevState: Readonly<{}>, snapshot?: any): void;
59
+ componentWillMount?(): void;
60
+ UNSAFE_componentWillMount?(): void;
61
+ componentWillReceiveProps?(nextProps: Readonly<import("@alifd/next/types/message").MessageProps>, nextContext: any): void;
62
+ UNSAFE_componentWillReceiveProps?(nextProps: Readonly<import("@alifd/next/types/message").MessageProps>, nextContext: any): void;
63
+ componentWillUpdate?(nextProps: Readonly<import("@alifd/next/types/message").MessageProps>, nextState: Readonly<{}>, nextContext: any): void;
64
+ UNSAFE_componentWillUpdate?(nextProps: Readonly<import("@alifd/next/types/message").MessageProps>, nextState: Readonly<{}>, nextContext: any): void;
65
+ }>>, {}> & {
66
+ loading: (config: import("@alifd/next/types/message/types").OpenProps) => void;
67
+ warning: (config: import("@alifd/next/types/message/types").OpenProps) => void;
68
+ error: (config: import("@alifd/next/types/message/types").OpenProps) => void;
69
+ help: (config: import("@alifd/next/types/message/types").OpenProps) => void;
70
+ hide: () => void;
71
+ show: (config: import("@alifd/next/types/message/types").OpenProps) => void;
72
+ success: (config: import("@alifd/next/types/message/types").OpenProps) => void;
73
+ notice: (config: import("@alifd/next/types/message/types").OpenProps) => void;
74
+ };
75
+ export default _default;
@@ -0,0 +1,30 @@
1
+ /**
2
+ * @component 标签
3
+ * @en Message
4
+ * @type 通用 - General
5
+ * @remarks 同 Next Message - Same as Next.Message
6
+ * @when Message
7
+ */
8
+ import { __rest } from "tslib";
9
+ import React, { forwardRef } from 'react';
10
+ import { Message as NextMessage, ConfigProvider } from '@alifd/next';
11
+ import cs from 'classnames';
12
+ import { PREFIX_DEFAULT, assignSubComponent } from '../utils';
13
+ const Message = forwardRef((_a, ref) => {
14
+ var { className } = _a, props = __rest(_a, ["className"]);
15
+ return (React.createElement(NextMessage, Object.assign({}, props, { ref: ref, className: cs(`${PREFIX_DEFAULT}message`, className) })));
16
+ });
17
+ const MessageWithSub = assignSubComponent(Message, {
18
+ show: NextMessage.show,
19
+ success: NextMessage.success,
20
+ warning: NextMessage.warning,
21
+ error: NextMessage.error,
22
+ notice: NextMessage.notice,
23
+ help: NextMessage.help,
24
+ loading: NextMessage.loading,
25
+ hide: NextMessage.hide,
26
+ });
27
+ export * from './types';
28
+ export default ConfigProvider.config(MessageWithSub, {
29
+ componentName: 'Message',
30
+ });
@@ -0,0 +1,2 @@
1
+ @import '@alifd/next/variables.scss';
2
+ @import "../core/variables.scss";
@@ -0,0 +1,2 @@
1
+ import '@alifd/next/lib/message/style2';
2
+ import './main.scss';
@@ -0,0 +1,2 @@
1
+ import '@alifd/next/lib/message/style2';
2
+ import './main.scss';
@@ -0,0 +1,195 @@
1
+ import type React from 'react';
2
+ import type { OverlayProps } from '@alifd/next/types/overlay';
3
+ import type { ConsumerState } from '@alifd/next/types/config-provider/consumer';
4
+ type HTMLAttributesWeak = Omit<React.HTMLAttributes<HTMLElement>, 'title'>;
5
+ /**
6
+ * @api Message
7
+ */
8
+ export interface MessageProps extends HTMLAttributesWeak {
9
+ /**
10
+ * 反馈类型
11
+ * @en type of message
12
+ * @defaultValue 'success'
13
+ */
14
+ type?: 'success' | 'warning' | 'error' | 'notice' | 'help' | 'loading';
15
+ /**
16
+ * 反馈外观
17
+ * @en shape of message
18
+ * @defaultValue 'inline'
19
+ */
20
+ shape?: 'inline' | 'addon' | 'toast';
21
+ /**
22
+ * 反馈大小
23
+ * @en size of message
24
+ * @defaultValue 'medium'
25
+ */
26
+ size?: 'medium' | 'large';
27
+ /**
28
+ * 标题
29
+ * @en title of message
30
+ */
31
+ title?: React.ReactNode;
32
+ /**
33
+ * 内容,非函数式调用下使用
34
+ * @en content of message
35
+ */
36
+ children?: React.ReactNode;
37
+ /**
38
+ * 默认是否显示
39
+ * @en whether the message is visible in default
40
+ * @defaultValue false
41
+ */
42
+ defaultVisible?: boolean;
43
+ /**
44
+ * 当前是否显示
45
+ * @en whether the message is visible currently
46
+ */
47
+ visible?: boolean;
48
+ /**
49
+ * 显示的图标类型,会覆盖内部设置的IconType,传false不显示图标
50
+ * @en type of icon, overriding the internally type of icon
51
+ */
52
+ iconType?: string | false;
53
+ /**
54
+ * 显示关闭按钮
55
+ * @en whether to show the close button
56
+ * @defaultValue false
57
+ */
58
+ closeable?: boolean;
59
+ /**
60
+ * 关闭按钮的回调
61
+ * @en callback function triggered when close
62
+ * @defaultValue () =\> \{\}
63
+ */
64
+ onClose?: () => void;
65
+ /**
66
+ * 关闭之后调用的函数
67
+ * @en callback function triggered after closed
68
+ * @defaultValue () =\> \{\}
69
+ */
70
+ afterClose?: () => void;
71
+ /**
72
+ * 是否开启展开收起动画
73
+ * @en whether to enable expand and collapse animation
74
+ * @defaultValue true
75
+ */
76
+ animation?: boolean;
77
+ }
78
+ /**
79
+ * @api Message.show
80
+ * @remarks Message.show(props) 提供一个单例的调用方式,配置参数如下(继承 Overlay 的配置):
81
+ *
82
+ * ```js
83
+ * Message.show({
84
+ * type: 'error',
85
+ * title: '错误',
86
+ * content: '请联系相关人员反馈!',
87
+ * hasMask: true
88
+ * });
89
+ * ```
90
+ * -
91
+ * `Message.show(props)` provides a singleton call with the following configuration parameters (inheriting `Overlay` configuration):
92
+ * ```js
93
+ * Message.show({
94
+ * type: 'error',
95
+ * title: 'Error',
96
+ * content: 'Please contact admin feedback!',
97
+ * hasMask: true
98
+ * });
99
+ * ```
100
+ */
101
+ export interface MessageQuickProps extends Omit<HTMLAttributesWeak, 'content'> {
102
+ /**
103
+ * 反馈类型
104
+ * @en type of message
105
+ * @defaultValue 'success'
106
+ */
107
+ type?: 'success' | 'warning' | 'error' | 'notice' | 'help' | 'loading';
108
+ /**
109
+ * 反馈大小
110
+ * @en size of message
111
+ * @defaultValue 'medium'
112
+ */
113
+ size?: 'medium' | 'large';
114
+ /**
115
+ * 标题
116
+ * @en title of message
117
+ */
118
+ title?: React.ReactNode;
119
+ /**
120
+ * 内容,函数式调用下使用
121
+ * @en content of message
122
+ */
123
+ content?: React.ReactNode;
124
+ /**
125
+ * 弹层对齐方式,详情见 Overlay align
126
+ * @en alignment reference Overlay
127
+ * @defaultValue 'tc tc'
128
+ */
129
+ align?: string | boolean;
130
+ /**
131
+ * 弹层相对于参照元素定位的微调
132
+ * @en offset after positioned
133
+ * @defaultValue [0, 0]
134
+ */
135
+ offset?: Array<number>;
136
+ /**
137
+ * 是否显示遮罩
138
+ * @en whether to have a mask
139
+ * @defaultValue false
140
+ */
141
+ hasMask?: boolean;
142
+ /**
143
+ * 显示持续时间,0表示一直存在,以毫秒为单位
144
+ * @en show duration, 0 means always present, in milliseconds
145
+ * @defaultValue 3000
146
+ */
147
+ duration?: number;
148
+ /**
149
+ * @skip
150
+ */
151
+ timeoutId?: string;
152
+ /**
153
+ * 显示关闭按钮
154
+ * @en whether to show the close button
155
+ * @defaultValue false
156
+ */
157
+ closeable?: boolean;
158
+ /**
159
+ * 关闭按钮的回调
160
+ * @en callback function triggered when close
161
+ * @defaultValue () =\> \{\}
162
+ */
163
+ onClose?: () => void;
164
+ /**
165
+ * 关闭之后调用的函数
166
+ * @en callback function triggered after closed
167
+ * @defaultValue () =\> \{\}
168
+ */
169
+ afterClose?: () => void;
170
+ /**
171
+ * 是否开启展开收起动画
172
+ * @en whether to enable expand and collapse animation
173
+ * @defaultValue true
174
+ */
175
+ animation?: boolean;
176
+ /**
177
+ * 透传到弹层组件的属性对象
178
+ * @en props of Overlay
179
+ */
180
+ overlayProps?: OverlayProps;
181
+ /**
182
+ * @skip
183
+ */
184
+ contextConfig?: ConsumerState;
185
+ }
186
+ export type OpenProps = string | React.ReactElement | MessageQuickProps;
187
+ export interface MessageWrapperItem extends MessageQuickProps {
188
+ timer?: ReturnType<typeof setTimeout>;
189
+ key: string;
190
+ }
191
+ export interface MessageWrapperProps {
192
+ prefix?: MessageQuickProps['prefix'];
193
+ dataSource: Array<MessageWrapperItem>;
194
+ }
195
+ export {};
@@ -0,0 +1 @@
1
+ export {};