@para-ui/core 3.0.28 → 3.0.30
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/AutoBox/index.js +48 -88
- package/AutoTips/index.js +25 -32
- package/Breadcrumbs/index.js +43 -63
- package/Button/SplitButton.d.ts +1 -1
- package/Button/index.d.ts +1 -1
- package/Button/index.js +88 -118
- package/ButtonGroup/index.js +27 -36
- package/Carousel/index.d.ts +2 -2
- package/Carousel/index.js +27 -28
- package/Cascader/index.js +52 -64
- package/Checkbox/index.js +23 -39
- package/CheckboxGroup/index.js +31 -48
- package/Collapse/collapsePanel.d.ts +1 -1
- package/Collapse/index.d.ts +1 -1
- package/Collapse/index.js +9 -29
- package/Collapse/util.d.ts +2 -2
- package/CollapseBox/index.js +45 -56
- package/CollapseLayout/index.js +35 -54
- package/ComboSelect/index.js +222 -349
- package/ComboSelect/interface.d.ts +3 -3
- package/Container/index.js +17 -20
- package/DatePicker/generatePicker/index.d.ts +17 -17
- package/DatePicker/index.d.ts +4 -4
- package/DatePicker/index.js +111 -167
- package/Desktop/index.js +62 -173
- package/Drawer/index.js +65 -58
- package/Drawer/interface.d.ts +7 -3
- package/Dropdown/index.d.ts +1 -1
- package/Dropdown/index.js +3 -3
- package/Empty/index.js +17 -22
- package/Form/index.d.ts +1 -1
- package/Form/index.js +38 -80
- package/FormItem/index.d.ts +1 -1
- package/FormItem/index.js +11 -11
- package/FormItem/validateFunction.d.ts +1 -1
- package/FunctionModal/index.js +11 -11
- package/GlobalContext/index.js +3 -3
- package/GlobalContext/usePopupContainer.d.ts +1 -1
- package/Help/index.js +11 -11
- package/HelperText/index.js +11 -12
- package/InputLang/index.js +47 -80
- package/InputNumber/index.js +65 -100
- package/Label/index.js +15 -16
- package/Loading/index.js +6 -7
- package/Menu/index.js +148 -328
- package/Menu/interface.d.ts +2 -2
- package/Menu/verticalMenuList.d.ts +1 -1
- package/Message/index.d.ts +1 -1
- package/Message/index.js +45 -64
- package/Modal/Confirm/index.d.ts +2 -2
- package/Modal/index.d.ts +1 -1
- package/Modal/index.js +119 -152
- package/MultiBox/index.js +44 -76
- package/Notification/index.d.ts +2 -2
- package/Notification/index.js +51 -72
- package/OperateBtn/index.js +42 -70
- package/PageHeader/index.js +120 -286
- package/PageHeader/interface.d.ts +1 -1
- package/Pagination/index.d.ts +2 -2
- package/Pagination/index.js +79 -131
- package/ParauiProvider/index.js +2 -3
- package/PasswordRules/index.js +12 -30
- package/PopConfirm/index.d.ts +1 -1
- package/PopConfirm/index.js +52 -59
- package/Popover/index.js +8 -9
- package/Progress/index.d.ts +6 -6
- package/Progress/index.js +50 -89
- package/Querying/index.js +14 -17
- package/README.md +813 -800
- package/Radio/index.js +21 -33
- package/RadioGroup/index.js +32 -47
- package/Search/index.js +44 -66
- package/Select/index.js +176 -343
- package/SelectInput/index.js +8 -9
- package/Selector/index.js +285 -681
- package/SelectorPicker/index.js +62 -97
- package/SingleBox/index.js +30 -55
- package/Slider/index.d.ts +1 -1
- package/Slider/index.js +29 -41
- package/Slider/interface.d.ts +2 -2
- package/Split/index.js +10 -23
- package/Status/index.js +8 -7
- package/Stepper/index.d.ts +1 -1
- package/Stepper/index.js +20 -25
- package/Styles/form.scss +5 -5
- package/Styles/index.scss +37 -37
- package/Styles/normalize.scss +348 -348
- package/Styles/scrollbar.scss +223 -223
- package/Styles/theme.scss +74 -74
- package/Switch/index.d.ts +2 -2
- package/Switch/index.js +19 -20
- package/Table/index.js +568 -1019
- package/Table/interface.d.ts +5 -5
- package/Tabs/index.d.ts +3 -3
- package/Tabs/index.js +47 -65
- package/Tag/TagGroup.d.ts +1 -1
- package/Tag/index.d.ts +2 -2
- package/Tag/index.js +72 -107
- package/TextEditor/index.d.ts +2 -2
- package/TextEditor/index.js +81 -105
- package/TextField/index.js +141 -220
- package/TimePicker/index.d.ts +1 -1
- package/TimePicker/index.js +12 -15
- package/Timeline/index.js +42 -52
- package/Title/index.js +10 -9
- package/ToggleButton/ToggleButtonGroup.d.ts +1 -1
- package/ToggleButton/index.js +50 -70
- package/Tooltip/index.js +64 -98
- package/Tooltip/interface.d.ts +1 -1
- package/Transfer/index.d.ts +1 -1
- package/Transfer/index.js +114 -137
- package/Transfer/useClick.d.ts +1 -1
- package/Tree/index.js +10 -10
- package/Tree/interface.d.ts +6 -6
- package/Upload/Dragger/index.d.ts +1 -1
- package/Upload/ImageUpload/index.d.ts +1 -1
- package/Upload/ImgCrop/EasyCrop.d.ts +1 -1
- package/Upload/index.d.ts +1 -1
- package/Upload/index.js +283 -475
- package/Upload/interface.d.ts +2 -2
- package/_verture/{constant-bf34e6fa.js → constant-66aa48a1.js} +0 -1
- package/_verture/defineProperty-62acccfc.js +34 -0
- package/_verture/{index-342379c6.js → index-06fea29b.js} +79 -124
- package/_verture/{index-48875ffd.js → index-131f8fe5.js} +80 -181
- package/_verture/{index-31ce5a11.js → index-92144ad3.js} +238 -445
- package/_verture/{index-bbed73a3.js → index-be4faaee.js} +19 -61
- package/_verture/{intl-336570e4.js → intl-5cbb940c.js} +4 -12
- package/_verture/{modalContext-d646d9db.js → modalContext-c749e1c6.js} +18 -43
- package/_verture/{slicedToArray-d7722f4b.js → slicedToArray-77980792.js} +23 -25
- package/_verture/{toConsumableArray-f8047a75.js → toConsumableArray-87c7d895.js} +1 -1
- package/_verture/{useFormatMessage-f4452258.js → useFormatMessage-703f8b20.js} +1 -3
- package/_verture/{useGlobalProps-af9a2af6.js → useGlobalProps-1b846a65.js} +1 -2
- package/_verture/{usePopupContainer-b8ab7cab.js → usePopupContainer-87febeb9.js} +10 -25
- package/_verture/{util-a77b261e.js → util-7e1fb1e2.js} +2 -3
- package/index.d.ts +2 -4
- package/index.js +15 -16
- package/package.json +167 -168
- package/Test/index.d.ts +0 -3
- package/Test/index.js +0 -9
- package/_verture/defineProperty-0590dc61.js +0 -16
package/MultiBox/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { _ as _typeof } from '../_verture/typeof-498dd2b1.js';
|
|
2
|
-
import { _ as _toConsumableArray } from '../_verture/toConsumableArray-
|
|
3
|
-
import { _ as _slicedToArray } from '../_verture/slicedToArray-
|
|
2
|
+
import { _ as _toConsumableArray } from '../_verture/toConsumableArray-87c7d895.js';
|
|
3
|
+
import { _ as _slicedToArray } from '../_verture/slicedToArray-77980792.js';
|
|
4
4
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
5
5
|
import { useState, useEffect } from 'react';
|
|
6
6
|
import { TextField } from '../TextField/index.js';
|
|
@@ -8,8 +8,8 @@ import Label from '../Label/index.js';
|
|
|
8
8
|
import HelperText from '../HelperText/index.js';
|
|
9
9
|
import Delete from '@para-ui/icons/Delete';
|
|
10
10
|
import PlusCircleF from '@para-ui/icons/PlusCircleF';
|
|
11
|
-
import { $ as $prefixCls } from '../_verture/constant-
|
|
12
|
-
import { u as useFormatMessage } from '../_verture/useFormatMessage-
|
|
11
|
+
import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
|
|
12
|
+
import { u as useFormatMessage } from '../_verture/useFormatMessage-703f8b20.js';
|
|
13
13
|
import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
|
|
14
14
|
import '../_verture/tslib.es6-55ed4bd2.js';
|
|
15
15
|
import '@paraview/lib';
|
|
@@ -23,11 +23,11 @@ import 'rc-tooltip/lib/placements';
|
|
|
23
23
|
import 'clsx';
|
|
24
24
|
import '../Loading/index.js';
|
|
25
25
|
import '@para-ui/icons/LoadingF';
|
|
26
|
-
import '../_verture/useGlobalProps-
|
|
26
|
+
import '../_verture/useGlobalProps-1b846a65.js';
|
|
27
27
|
import '@para-ui/core/GlobalContext';
|
|
28
|
-
import '../_verture/index-
|
|
28
|
+
import '../_verture/index-be4faaee.js';
|
|
29
29
|
import 'rc-dropdown';
|
|
30
|
-
import '../_verture/usePopupContainer-
|
|
30
|
+
import '../_verture/usePopupContainer-87febeb9.js';
|
|
31
31
|
import 'dayjs';
|
|
32
32
|
import '../Help/index.js';
|
|
33
33
|
import '@para-ui/icons/Help';
|
|
@@ -50,50 +50,47 @@ styleInject(css_248z);
|
|
|
50
50
|
|
|
51
51
|
var MultiBox = function MultiBox(props) {
|
|
52
52
|
var className = props.className,
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
53
|
+
style = props.style,
|
|
54
|
+
_props$size = props.size,
|
|
55
|
+
size = _props$size === void 0 ? 'large' : _props$size,
|
|
56
|
+
_props$placeholderKey = props.placeholderKey,
|
|
57
|
+
placeholderKey = _props$placeholderKey === void 0 ? '' : _props$placeholderKey,
|
|
58
|
+
_props$placeholderVal = props.placeholderValue,
|
|
59
|
+
placeholderValue = _props$placeholderVal === void 0 ? '' : _props$placeholderVal,
|
|
60
|
+
_props$label = props.label,
|
|
61
|
+
label = _props$label === void 0 ? '' : _props$label,
|
|
62
|
+
labelTooltip = props.labelTooltip,
|
|
63
|
+
labelSign = props.labelSign,
|
|
64
|
+
_props$disabled = props.disabled,
|
|
65
|
+
disabled = _props$disabled === void 0 ? false : _props$disabled,
|
|
66
|
+
_props$required = props.required,
|
|
67
|
+
required = _props$required === void 0 ? false : _props$required,
|
|
68
|
+
_props$error = props.error,
|
|
69
|
+
error = _props$error === void 0 ? false : _props$error,
|
|
70
|
+
hideErrorDom = props.hideErrorDom,
|
|
71
|
+
_props$separator = props.separator,
|
|
72
|
+
separator = _props$separator === void 0 ? ':' : _props$separator,
|
|
73
|
+
_props$helperText = props.helperText,
|
|
74
|
+
helperText = _props$helperText === void 0 ? '' : _props$helperText,
|
|
75
|
+
value = props.value,
|
|
76
|
+
replaceFields = props.replaceFields,
|
|
77
|
+
onChange = props.onChange,
|
|
78
|
+
fetchSuggestionsKey = props.fetchSuggestionsKey,
|
|
79
|
+
fetchSuggestionsValue = props.fetchSuggestionsValue;
|
|
80
80
|
var isError = helperText && typeof helperText === 'string' ? true : false;
|
|
81
81
|
var isErrorArr = helperText instanceof Array;
|
|
82
82
|
var intl = useFormatMessage('MultiBox', localeJson);
|
|
83
|
-
|
|
84
83
|
var _useState = useState([]),
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
84
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
85
|
+
valueCom = _useState2[0],
|
|
86
|
+
setValueCom = _useState2[1];
|
|
89
87
|
var _useState3 = useState({
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
88
|
+
key: 'label',
|
|
89
|
+
value: 'value'
|
|
90
|
+
}),
|
|
91
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
92
|
+
replaceFieldsCom = _useState4[0],
|
|
93
|
+
setReplaceFieldsCom = _useState4[1];
|
|
97
94
|
useEffect(function () {
|
|
98
95
|
if (props.defaultValue !== undefined) setValueCom(_toConsumableArray(props.defaultValue));
|
|
99
96
|
}, []);
|
|
@@ -107,16 +104,13 @@ var MultiBox = function MultiBox(props) {
|
|
|
107
104
|
}
|
|
108
105
|
}, [replaceFields]);
|
|
109
106
|
/** 处理错误 */
|
|
110
|
-
|
|
111
107
|
var handError = function handError(index, name) {
|
|
112
108
|
var obj = {
|
|
113
109
|
error: false,
|
|
114
110
|
helperText: ''
|
|
115
111
|
};
|
|
116
|
-
|
|
117
112
|
if (isErrorArr) {
|
|
118
113
|
var errorItem = helperText[index];
|
|
119
|
-
|
|
120
114
|
if (errorItem && errorItem[name]) {
|
|
121
115
|
obj = {
|
|
122
116
|
error: true,
|
|
@@ -124,12 +118,9 @@ var MultiBox = function MultiBox(props) {
|
|
|
124
118
|
};
|
|
125
119
|
}
|
|
126
120
|
}
|
|
127
|
-
|
|
128
121
|
return obj;
|
|
129
122
|
};
|
|
130
123
|
/** 增加 */
|
|
131
|
-
|
|
132
|
-
|
|
133
124
|
var add = function add() {
|
|
134
125
|
if (disabled) return;
|
|
135
126
|
valueCom.push({});
|
|
@@ -137,8 +128,6 @@ var MultiBox = function MultiBox(props) {
|
|
|
137
128
|
onChange && onChange(valueCom);
|
|
138
129
|
};
|
|
139
130
|
/** 删除 */
|
|
140
|
-
|
|
141
|
-
|
|
142
131
|
var del = function del(index) {
|
|
143
132
|
return function () {
|
|
144
133
|
if (disabled) return;
|
|
@@ -148,8 +137,6 @@ var MultiBox = function MultiBox(props) {
|
|
|
148
137
|
};
|
|
149
138
|
};
|
|
150
139
|
/** 改变值 */
|
|
151
|
-
|
|
152
|
-
|
|
153
140
|
var changeValue = function changeValue(key, index) {
|
|
154
141
|
return function (event) {
|
|
155
142
|
valueCom[index][key] = event.target.value;
|
|
@@ -160,21 +147,15 @@ var MultiBox = function MultiBox(props) {
|
|
|
160
147
|
/**
|
|
161
148
|
* 处理label
|
|
162
149
|
* */
|
|
163
|
-
|
|
164
|
-
|
|
165
150
|
var handLabel = function handLabel() {
|
|
166
151
|
if (!label && !labelSign) return null;
|
|
167
|
-
|
|
168
152
|
var handLabelClass = function handLabelClass() {
|
|
169
153
|
var str = 'multi-box-label';
|
|
170
|
-
|
|
171
154
|
if (labelTooltip && labelTooltip.className) {
|
|
172
155
|
str += ' ' + labelTooltip.className;
|
|
173
156
|
}
|
|
174
|
-
|
|
175
157
|
return str;
|
|
176
158
|
};
|
|
177
|
-
|
|
178
159
|
return jsx(Label, Object.assign({
|
|
179
160
|
label: label,
|
|
180
161
|
required: required,
|
|
@@ -184,8 +165,6 @@ var MultiBox = function MultiBox(props) {
|
|
|
184
165
|
}));
|
|
185
166
|
};
|
|
186
167
|
/** 处理内容每一项 */
|
|
187
|
-
|
|
188
|
-
|
|
189
168
|
var handContentItem = function handContentItem(item, index) {
|
|
190
169
|
return jsxs("div", Object.assign({
|
|
191
170
|
className: "multi-box-content-item-input"
|
|
@@ -218,8 +197,6 @@ var MultiBox = function MultiBox(props) {
|
|
|
218
197
|
}));
|
|
219
198
|
};
|
|
220
199
|
/** 处理内容 */
|
|
221
|
-
|
|
222
|
-
|
|
223
200
|
var handContent = function handContent() {
|
|
224
201
|
return jsx("div", Object.assign({
|
|
225
202
|
className: "multi-box-content"
|
|
@@ -228,7 +205,7 @@ var MultiBox = function MultiBox(props) {
|
|
|
228
205
|
return jsxs("div", Object.assign({
|
|
229
206
|
className: "multi-box-content-item"
|
|
230
207
|
}, {
|
|
231
|
-
children: [handContentItem(item, index), jsx("div", Object.assign({
|
|
208
|
+
children: [handContentItem(item, index), !disabled && jsx("div", Object.assign({
|
|
232
209
|
className: "opera-box"
|
|
233
210
|
}, {
|
|
234
211
|
children: jsx("span", Object.assign({
|
|
@@ -243,31 +220,23 @@ var MultiBox = function MultiBox(props) {
|
|
|
243
220
|
}));
|
|
244
221
|
};
|
|
245
222
|
/** 模糊匹配 */
|
|
246
|
-
|
|
247
|
-
|
|
248
223
|
var fetchSuggestions = function fetchSuggestions(key) {
|
|
249
224
|
return function (val, cb) {
|
|
250
225
|
if (key === 'key') fetchSuggestionsKey && fetchSuggestionsKey(val, cb);else fetchSuggestionsValue && fetchSuggestionsValue(val, cb);
|
|
251
226
|
};
|
|
252
227
|
};
|
|
253
228
|
/** 选择值 */
|
|
254
|
-
|
|
255
|
-
|
|
256
229
|
var selectValue = function selectValue(key, index) {
|
|
257
230
|
return function (item) {
|
|
258
231
|
valueCom[index][key] = item;
|
|
259
|
-
|
|
260
232
|
if (_typeof(item) === 'object' && item !== null) {
|
|
261
233
|
valueCom[index][key] = item.value;
|
|
262
234
|
}
|
|
263
|
-
|
|
264
235
|
if (props.value === undefined) setValueCom(_toConsumableArray(valueCom));
|
|
265
236
|
onChange && onChange(valueCom);
|
|
266
237
|
};
|
|
267
238
|
};
|
|
268
239
|
/** 处理class */
|
|
269
|
-
|
|
270
|
-
|
|
271
240
|
var handClass = function handClass() {
|
|
272
241
|
var str = $prefixCls + '-multi-box multi-box';
|
|
273
242
|
if (className) str += ' ' + className;
|
|
@@ -277,7 +246,6 @@ var MultiBox = function MultiBox(props) {
|
|
|
277
246
|
if (separator) str += " ".concat($prefixCls, "-multi-box-separator");
|
|
278
247
|
return str;
|
|
279
248
|
};
|
|
280
|
-
|
|
281
249
|
return jsxs("div", Object.assign({
|
|
282
250
|
className: handClass(),
|
|
283
251
|
style: style
|
package/Notification/index.d.ts
CHANGED
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import React from 'react';
|
|
7
7
|
import './index.scss';
|
|
8
|
-
export
|
|
9
|
-
export
|
|
8
|
+
export type NotificationPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
|
|
9
|
+
export type IconType = 'success' | 'info' | 'error' | 'warning';
|
|
10
10
|
export interface ConfigProps {
|
|
11
11
|
/** 消息从顶部弹出时,距离顶部的位置,单位像素 */
|
|
12
12
|
top?: number;
|
package/Notification/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { _ as _defineProperty } from '../_verture/defineProperty-
|
|
1
|
+
import { _ as _defineProperty } from '../_verture/defineProperty-62acccfc.js';
|
|
2
2
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
3
3
|
import React__default from 'react';
|
|
4
4
|
import Notification from 'rc-notification';
|
|
@@ -7,67 +7,59 @@ import CompleteIcon from '@para-ui/icons/CheckCircleF';
|
|
|
7
7
|
import CloseIcon from '@para-ui/icons/Close';
|
|
8
8
|
import CloseCircleFilled from '@para-ui/icons/CloseCircleF';
|
|
9
9
|
import clsx from 'clsx';
|
|
10
|
-
import { $ as $prefixCls } from '../_verture/constant-
|
|
10
|
+
import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
|
|
11
11
|
import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
|
|
12
|
+
import '../_verture/typeof-498dd2b1.js';
|
|
12
13
|
|
|
13
14
|
var css_248z = "@charset \"UTF-8\";\n/**\n * @author Hanz\n * @date 2022/1/13 上午10:30\n * @description 通知提醒框\n */\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-notification {\n position: fixed;\n margin: 0 24px 0 0;\n padding: 0;\n color: rgb(46, 55, 67);\n font-size: 14px;\n z-index: 9999;\n}\n.paraui-v3-notification-topLeft, .paraui-v3-notification-bottomLeft {\n margin-right: 0;\n margin-left: 24px;\n}\n.paraui-v3-notification-topLeft .paraui-v3-notification-fade-enter.paraui-v3-notification-fade-enter-active, .paraui-v3-notification-bottomLeft .paraui-v3-notification-fade-enter.paraui-v3-notification-fade-enter-active, .paraui-v3-notification-topLeft .paraui-v3-notification-fade-appear.paraui-v3-notification-fade-appear-active, .paraui-v3-notification-bottomLeft .paraui-v3-notification-fade-appear.paraui-v3-notification-fade-appear-active {\n animation-name: NotificationLeftFadeIn;\n}\n.paraui-v3-notification-hook-holder, .paraui-v3-notification-notice {\n position: relative;\n width: 430px;\n max-width: calc(100vw - 48px);\n margin-bottom: 16px;\n margin-left: auto;\n overflow: hidden;\n word-wrap: break-word;\n background: rgb(255, 255, 255);\n border-radius: 4px;\n box-shadow: 0px 2px 8px 0px rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-notification-topLeft .paraui-v3-notification-hook-holder, .paraui-v3-notification-topLeft .paraui-v3-notification-notice, .paraui-v3-notification-bottomLeft .paraui-v3-notification-hook-holder, .paraui-v3-notification-bottomLeft .paraui-v3-notification-notice {\n margin-right: auto;\n margin-left: 0;\n}\n.paraui-v3-notification-hook-holder > .paraui-v3-notification-notice {\n margin-bottom: 0;\n box-shadow: none;\n}\n.paraui-v3-notification-notice {\n padding: 20px;\n line-height: 1.5715;\n}\n.paraui-v3-notification-notice-content {\n position: relative;\n}\n.paraui-v3-notification-notice-message {\n margin-bottom: 8px;\n color: rgb(46, 55, 67);\n font-size: 14px;\n font-weight: 700;\n line-height: 24px;\n}\n.paraui-v3-notification-notice-message-single-line-auto-margin {\n display: block;\n width: calc(264px - 100%);\n max-width: 4px;\n background-color: transparent;\n pointer-events: none;\n}\n.paraui-v3-notification-notice-message-single-line-auto-margin::before {\n display: block;\n content: \"\";\n}\n.paraui-v3-notification-notice-description {\n font-size: 14px;\n font-weight: 400;\n}\n.paraui-v3-notification-notice-closable .paraui-v3-notification-notice-message {\n padding-right: 24px;\n}\n.paraui-v3-notification-notice-with-icon .paraui-v3-notification-notice-message {\n margin-bottom: 4px;\n margin-left: 24px;\n}\n.paraui-v3-notification-notice-with-icon .paraui-v3-notification-notice-description {\n margin-left: 24px;\n}\n.paraui-v3-notification .paraui-v3-notification-notice-icon {\n position: absolute;\n top: 4px;\n font-size: 16px;\n line-height: 24px;\n}\n.paraui-v3-notification .paraui-v3-notification-notice-icon-success {\n color: rgb(83, 195, 27);\n}\n.paraui-v3-notification .paraui-v3-notification-notice-icon-info {\n color: rgb(54, 102, 214);\n}\n.paraui-v3-notification .paraui-v3-notification-notice-icon-warning {\n color: rgb(255, 161, 80);\n}\n.paraui-v3-notification .paraui-v3-notification-notice-icon-error {\n color: rgb(235, 96, 84);\n}\n.paraui-v3-notification-notice-close {\n position: absolute;\n top: 16px;\n right: 22px;\n color: rgba(46, 55, 67, 0.7);\n outline: none;\n}\n.paraui-v3-notification-notice-close:hover {\n color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-notification .paraui-v3-notification-close-icon {\n font-size: 18px;\n cursor: pointer;\n color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-notification-notice-btn {\n float: right;\n margin-top: 16px;\n}\n.paraui-v3-notification .notification-fade-effect {\n animation-duration: 0.24s;\n animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);\n animation-fill-mode: both;\n}\n.paraui-v3-notification-fade-enter, .paraui-v3-notification-fade-appear {\n animation-duration: 0.24s;\n animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);\n animation-fill-mode: both;\n opacity: 0;\n animation-play-state: paused;\n}\n.paraui-v3-notification-fade-leave {\n animation-duration: 0.24s;\n animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);\n animation-fill-mode: both;\n animation-play-state: paused;\n}\n.paraui-v3-notification-fade-enter.paraui-v3-notification-fade-enter-active, .paraui-v3-notification-fade-appear.paraui-v3-notification-fade-appear-active {\n animation-name: NotificationFadeIn;\n animation-play-state: running;\n}\n.paraui-v3-notification-fade-leave.paraui-v3-notification-fade-leave-active {\n animation-name: NotificationFadeOut;\n animation-play-state: running;\n}\n@keyframes NotificationFadeIn {\n 0% {\n left: 430px;\n opacity: 0;\n }\n 100% {\n left: 0;\n opacity: 1;\n }\n}\n@keyframes NotificationLeftFadeIn {\n 0% {\n right: 430px;\n opacity: 0;\n }\n 100% {\n right: 0;\n opacity: 1;\n }\n}\n@keyframes NotificationFadeOut {\n 0% {\n max-height: 150px;\n margin-bottom: 16px;\n opacity: 1;\n }\n 100% {\n max-height: 0;\n margin-bottom: 0;\n padding-top: 0;\n padding-bottom: 0;\n opacity: 0;\n }\n}";
|
|
14
15
|
styleInject(css_248z);
|
|
15
16
|
|
|
16
|
-
|
|
17
|
-
|
|
17
|
+
//通知框实例存储
|
|
18
|
+
var notificationInstance = {};
|
|
19
|
+
// 默认值
|
|
18
20
|
var defaultDuration = 4.5; //默认 4.5 秒后自动关闭,配置为 null 则不自动关闭
|
|
19
|
-
|
|
20
21
|
var defaultTop = 24;
|
|
21
22
|
var defaultBottom = 24;
|
|
22
23
|
var defaultPlacement = 'topRight';
|
|
23
24
|
var defaultGetContainer;
|
|
24
25
|
var defaultCloseIcon;
|
|
25
26
|
var rtl = false;
|
|
26
|
-
var maxCount;
|
|
27
|
-
|
|
27
|
+
var maxCount;
|
|
28
|
+
//设置全局配置
|
|
28
29
|
function setNotificationConfig(options) {
|
|
29
30
|
var duration = options.duration,
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
31
|
+
placement = options.placement,
|
|
32
|
+
bottom = options.bottom,
|
|
33
|
+
top = options.top,
|
|
34
|
+
getContainer = options.getContainer,
|
|
35
|
+
closeIcon = options.closeIcon;
|
|
36
36
|
if (duration !== undefined) {
|
|
37
37
|
defaultDuration = duration;
|
|
38
38
|
}
|
|
39
|
-
|
|
40
39
|
if (placement !== undefined) {
|
|
41
40
|
defaultPlacement = placement;
|
|
42
41
|
}
|
|
43
|
-
|
|
44
42
|
if (bottom !== undefined) {
|
|
45
43
|
defaultBottom = bottom;
|
|
46
44
|
}
|
|
47
|
-
|
|
48
45
|
if (top !== undefined) {
|
|
49
46
|
defaultTop = top;
|
|
50
47
|
}
|
|
51
|
-
|
|
52
48
|
if (getContainer !== undefined) {
|
|
53
49
|
defaultGetContainer = getContainer;
|
|
54
50
|
}
|
|
55
|
-
|
|
56
51
|
if (closeIcon !== undefined) {
|
|
57
52
|
defaultCloseIcon = closeIcon;
|
|
58
53
|
}
|
|
59
|
-
|
|
60
54
|
if (options.maxCount !== undefined) {
|
|
61
55
|
maxCount = options.maxCount;
|
|
62
56
|
}
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
|
|
57
|
+
}
|
|
58
|
+
//获得位置样式
|
|
66
59
|
function getPlacementStyle(placement) {
|
|
67
60
|
var top = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultTop;
|
|
68
61
|
var bottom = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultBottom;
|
|
69
62
|
var style;
|
|
70
|
-
|
|
71
63
|
switch (placement) {
|
|
72
64
|
case 'topLeft':
|
|
73
65
|
style = {
|
|
@@ -76,7 +68,6 @@ function getPlacementStyle(placement) {
|
|
|
76
68
|
bottom: 'auto'
|
|
77
69
|
};
|
|
78
70
|
break;
|
|
79
|
-
|
|
80
71
|
case 'topRight':
|
|
81
72
|
style = {
|
|
82
73
|
right: 0,
|
|
@@ -84,7 +75,6 @@ function getPlacementStyle(placement) {
|
|
|
84
75
|
bottom: 'auto'
|
|
85
76
|
};
|
|
86
77
|
break;
|
|
87
|
-
|
|
88
78
|
case 'bottomLeft':
|
|
89
79
|
style = {
|
|
90
80
|
left: 0,
|
|
@@ -92,7 +82,6 @@ function getPlacementStyle(placement) {
|
|
|
92
82
|
bottom: bottom
|
|
93
83
|
};
|
|
94
84
|
break;
|
|
95
|
-
|
|
96
85
|
default:
|
|
97
86
|
style = {
|
|
98
87
|
right: 0,
|
|
@@ -101,24 +90,21 @@ function getPlacementStyle(placement) {
|
|
|
101
90
|
};
|
|
102
91
|
break;
|
|
103
92
|
}
|
|
104
|
-
|
|
105
93
|
return style;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
|
|
94
|
+
}
|
|
95
|
+
//创建通知框实例
|
|
109
96
|
function getNotificationInstance(args, callback) {
|
|
110
97
|
var _args$placement = args.placement,
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
98
|
+
placement = _args$placement === void 0 ? defaultPlacement : _args$placement,
|
|
99
|
+
top = args.top,
|
|
100
|
+
bottom = args.bottom,
|
|
101
|
+
_args$getContainer = args.getContainer,
|
|
102
|
+
getContainer = _args$getContainer === void 0 ? defaultGetContainer : _args$getContainer,
|
|
103
|
+
_args$closeIcon = args.closeIcon,
|
|
104
|
+
closeIcon = _args$closeIcon === void 0 ? defaultCloseIcon : _args$closeIcon;
|
|
118
105
|
var prefixCls = "".concat($prefixCls, "-notification");
|
|
119
106
|
var cacheKey = "".concat(prefixCls, "-").concat(placement);
|
|
120
107
|
var cacheInstance = notificationInstance[cacheKey];
|
|
121
|
-
|
|
122
108
|
if (cacheInstance) {
|
|
123
109
|
Promise.resolve(cacheInstance).then(function (instance) {
|
|
124
110
|
callback({
|
|
@@ -127,18 +113,16 @@ function getNotificationInstance(args, callback) {
|
|
|
127
113
|
});
|
|
128
114
|
});
|
|
129
115
|
return;
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
|
|
116
|
+
}
|
|
117
|
+
//close icon
|
|
133
118
|
var closeIconToRender = jsx("span", Object.assign({
|
|
134
119
|
className: "".concat(prefixCls, "-close-x")
|
|
135
120
|
}, {
|
|
136
121
|
children: closeIcon || jsx(CloseIcon, {
|
|
137
122
|
className: "".concat(prefixCls, "-close-icon")
|
|
138
123
|
})
|
|
139
|
-
}));
|
|
140
|
-
|
|
141
|
-
|
|
124
|
+
}));
|
|
125
|
+
//通知框cls
|
|
142
126
|
var notificationCls = clsx("".concat(prefixCls, "-").concat(placement), _defineProperty({}, "".concat(prefixCls, "-rtl"), rtl === true));
|
|
143
127
|
notificationInstance[cacheKey] = new Promise(function (resolve) {
|
|
144
128
|
Notification.newInstance({
|
|
@@ -156,31 +140,29 @@ function getNotificationInstance(args, callback) {
|
|
|
156
140
|
});
|
|
157
141
|
});
|
|
158
142
|
});
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
|
|
143
|
+
}
|
|
144
|
+
//通知框类型图标
|
|
162
145
|
var typeToIcon = {
|
|
163
146
|
success: CompleteIcon,
|
|
164
147
|
info: WarningCircleF,
|
|
165
148
|
error: CloseCircleFilled,
|
|
166
149
|
warning: WarningCircleF
|
|
167
|
-
};
|
|
168
|
-
|
|
150
|
+
};
|
|
151
|
+
//创建通知框内容配置
|
|
169
152
|
function getNoticeProps(args, prefixCls) {
|
|
170
153
|
var durationArg = args.duration,
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
154
|
+
icon = args.icon,
|
|
155
|
+
type = args.type,
|
|
156
|
+
description = args.description,
|
|
157
|
+
message = args.message,
|
|
158
|
+
btn = args.btn,
|
|
159
|
+
onClose = args.onClose,
|
|
160
|
+
onClick = args.onClick,
|
|
161
|
+
key = args.key,
|
|
162
|
+
style = args.style,
|
|
163
|
+
className = args.className;
|
|
181
164
|
var duration = durationArg === undefined ? defaultDuration : durationArg;
|
|
182
165
|
var iconNode = null;
|
|
183
|
-
|
|
184
166
|
if (icon) {
|
|
185
167
|
iconNode = jsx("span", Object.assign({
|
|
186
168
|
className: "".concat(prefixCls, "-icon")
|
|
@@ -192,7 +174,6 @@ function getNoticeProps(args, prefixCls) {
|
|
|
192
174
|
className: "".concat(prefixCls, "-icon ").concat(prefixCls, "-icon-").concat(type)
|
|
193
175
|
});
|
|
194
176
|
}
|
|
195
|
-
|
|
196
177
|
var autoMarginTag = !description && iconNode ? jsx("span", {
|
|
197
178
|
className: "".concat(prefixCls, "-message-single-line-auto-margin")
|
|
198
179
|
}) : null;
|
|
@@ -222,18 +203,16 @@ function getNoticeProps(args, prefixCls) {
|
|
|
222
203
|
style: style || {},
|
|
223
204
|
className: clsx(className, _defineProperty({}, "".concat(prefixCls, "-").concat(type), !!type))
|
|
224
205
|
};
|
|
225
|
-
}
|
|
226
|
-
|
|
227
|
-
|
|
206
|
+
}
|
|
207
|
+
//通知框调用方法
|
|
228
208
|
function notice(args) {
|
|
229
209
|
getNotificationInstance(args, function (_ref) {
|
|
230
210
|
var prefixCls = _ref.prefixCls,
|
|
231
|
-
|
|
211
|
+
instance = _ref.instance;
|
|
232
212
|
instance.notice(getNoticeProps(args, prefixCls));
|
|
233
213
|
});
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
|
|
214
|
+
}
|
|
215
|
+
//通知框api method
|
|
237
216
|
var api = {
|
|
238
217
|
open: notice,
|
|
239
218
|
close: function close(key) {
|
|
@@ -252,16 +231,16 @@ var api = {
|
|
|
252
231
|
delete notificationInstance[cacheKey];
|
|
253
232
|
});
|
|
254
233
|
}
|
|
255
|
-
};
|
|
256
|
-
|
|
234
|
+
};
|
|
235
|
+
//通知框预设类型 'success', 'info', 'warning', 'error'
|
|
257
236
|
['success', 'info', 'warning', 'error'].forEach(function (type) {
|
|
258
237
|
api[type] = function (args) {
|
|
259
238
|
return api.open(Object.assign(Object.assign({}, args), {
|
|
260
239
|
type: type
|
|
261
240
|
}));
|
|
262
241
|
};
|
|
263
|
-
});
|
|
264
|
-
|
|
242
|
+
});
|
|
243
|
+
//兼容warn、warning
|
|
265
244
|
api.warn = api.warning;
|
|
266
245
|
|
|
267
246
|
export { api as default };
|