acud 0.0.63 → 0.0.66
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/dist/acud.css +164 -53
- package/dist/acud.css.map +1 -1
- package/dist/acud.js +817 -213
- package/dist/acud.js.map +1 -1
- package/dist/acud.min.css +1 -1
- package/dist/acud.min.css.map +1 -1
- package/dist/acud.min.js +10 -4
- package/dist/acud.min.js.map +1 -1
- package/es/alert/style/index.css +1 -1
- package/es/alert/style/index.less +150 -147
- package/es/alert/style/rtl.less +27 -27
- package/es/breadcrumb/BreadcrumbItem.d.ts +1 -1
- package/es/breadcrumb/BreadcrumbItem.js +16 -4
- package/es/date-picker/src/Picker.js +1 -1
- package/es/date-picker/src/RangePicker.js +1 -1
- package/es/date-picker/style/index.css +43 -11
- package/es/date-picker/style/index.less +13 -2
- package/es/date-picker/style/panel.less +32 -10
- package/es/dialog-box/style/index.css +4 -4
- package/es/dropdown/dropdown-button.js +11 -2
- package/es/dropdown/style/index.css +6 -1
- package/es/dropdown/style/index.less +6 -1
- package/es/modal/DialogBox.d.ts +46 -0
- package/es/modal/DialogBox.js +152 -0
- package/es/modal/Modal.d.ts +5 -0
- package/es/modal/Modal.js +6 -4
- package/es/modal/dialog.d.ts +17 -0
- package/es/modal/dialog.js +123 -0
- package/es/modal/index.d.ts +11 -2
- package/es/modal/index.js +10 -1
- package/es/modal/style/index.css +62 -16
- package/es/modal/style/index.less +76 -5
- package/es/modal/style/mixin.less +2 -2
- package/es/progress/style/common.less +5 -3
- package/es/progress/style/index.css +2 -1
- package/es/radio/index.d.ts +3 -0
- package/es/style/themes/dark/components/modal.less +14 -9
- package/es/style/themes/default/components/datePicker.less +1 -1
- package/es/style/themes/default/components/modal.less +14 -14
- package/es/time-picker/style/index.css +1 -0
- package/es/time-picker/style/index.less +1 -0
- package/es/transfer/{dataSource.d.ts → DataSource.d.ts} +1 -1
- package/es/transfer/{dataSource.js → DataSource.js} +37 -6
- package/{lib/transfer/sourceList.d.ts → es/transfer/SourceList.d.ts} +2 -2
- package/es/transfer/{sourceList.js → SourceList.js} +0 -0
- package/es/transfer/{target.d.ts → Target.d.ts} +1 -1
- package/es/transfer/{target.js → Target.js} +60 -4
- package/{lib/transfer/targetList.d.ts → es/transfer/TargetList.d.ts} +2 -2
- package/es/transfer/{targetList.js → TargetList.js} +0 -0
- package/es/transfer/index.d.ts +3 -0
- package/es/transfer/index.js +9 -4
- package/es/transfer/style/css.js +3 -1
- package/es/transfer/style/index.css +27 -5
- package/es/transfer/style/index.d.ts +1 -0
- package/es/transfer/style/index.js +3 -1
- package/es/transfer/style/index.less +32 -5
- package/es/upload/UploadList/ListItem.js +7 -2
- package/es/upload/UploadList/index.js +4 -7
- package/es/upload/style/index.css +17 -13
- package/es/upload/style/index.less +25 -20
- package/es/upload/utils.js +1 -1
- package/lib/alert/style/index.css +1 -1
- package/lib/alert/style/index.less +150 -147
- package/lib/alert/style/rtl.less +27 -27
- package/lib/breadcrumb/BreadcrumbItem.d.ts +1 -1
- package/lib/breadcrumb/BreadcrumbItem.js +21 -8
- package/lib/date-picker/src/Picker.js +1 -1
- package/lib/date-picker/src/RangePicker.js +1 -1
- package/lib/date-picker/style/index.css +43 -11
- package/lib/date-picker/style/index.less +13 -2
- package/lib/date-picker/style/panel.less +32 -10
- package/lib/dialog-box/style/index.css +4 -4
- package/lib/dropdown/dropdown-button.js +11 -2
- package/lib/dropdown/style/index.css +6 -1
- package/lib/dropdown/style/index.less +6 -1
- package/lib/modal/DialogBox.d.ts +46 -0
- package/lib/modal/DialogBox.js +179 -0
- package/lib/modal/Modal.d.ts +5 -0
- package/lib/modal/Modal.js +6 -4
- package/lib/modal/dialog.d.ts +17 -0
- package/lib/modal/dialog.js +145 -0
- package/lib/modal/index.d.ts +11 -2
- package/lib/modal/index.js +13 -1
- package/lib/modal/style/index.css +62 -16
- package/lib/modal/style/index.less +76 -5
- package/lib/modal/style/mixin.less +2 -2
- package/lib/progress/style/common.less +5 -3
- package/lib/progress/style/index.css +2 -1
- package/lib/radio/index.d.ts +3 -0
- package/lib/style/themes/dark/components/modal.less +14 -9
- package/lib/style/themes/default/components/datePicker.less +1 -1
- package/lib/style/themes/default/components/modal.less +14 -14
- package/lib/time-picker/style/index.css +1 -0
- package/lib/time-picker/style/index.less +1 -0
- package/lib/transfer/{dataSource.d.ts → DataSource.d.ts} +1 -1
- package/lib/transfer/{dataSource.js → DataSource.js} +38 -6
- package/{es/transfer/sourceList.d.ts → lib/transfer/SourceList.d.ts} +2 -2
- package/lib/transfer/{sourceList.js → SourceList.js} +0 -0
- package/lib/transfer/{target.d.ts → Target.d.ts} +1 -1
- package/lib/transfer/{target.js → Target.js} +63 -5
- package/{es/transfer/targetList.d.ts → lib/transfer/TargetList.d.ts} +2 -2
- package/lib/transfer/{targetList.js → TargetList.js} +0 -0
- package/lib/transfer/index.d.ts +3 -0
- package/lib/transfer/index.js +11 -7
- package/lib/transfer/style/css.js +3 -1
- package/lib/transfer/style/index.css +27 -5
- package/lib/transfer/style/index.d.ts +1 -0
- package/lib/transfer/style/index.js +3 -1
- package/lib/transfer/style/index.less +32 -5
- package/lib/upload/UploadList/ListItem.js +7 -2
- package/lib/upload/UploadList/index.js +4 -7
- package/lib/upload/style/index.css +17 -13
- package/lib/upload/style/index.less +25 -20
- package/lib/upload/utils.js +1 -1
- package/package.json +1 -1
|
@@ -61,16 +61,27 @@
|
|
|
61
61
|
background: @picker-basic-cell-active-with-range-color;
|
|
62
62
|
}
|
|
63
63
|
}
|
|
64
|
-
.@{picker-prefix-cls}-cell-in-view
|
|
65
|
-
|
|
66
|
-
|
|
64
|
+
.@{picker-prefix-cls}-cell-in-view {
|
|
65
|
+
&.@{picker-prefix-cls}-cell-in-range {
|
|
66
|
+
&.@{picker-prefix-cls}-cell-range-hover-end, &.@{picker-prefix-cls}-cell-range-hover-start {
|
|
67
|
+
&:hover {
|
|
68
|
+
background-color: @B2;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
&.@{picker-prefix-cls}-cell-range-hover-end, &.@{picker-prefix-cls}-cell-range-hover-start {
|
|
74
|
+
&:hover {
|
|
75
|
+
background: @picker-basic-cell-active-with-range-color;
|
|
76
|
+
}
|
|
67
77
|
}
|
|
68
78
|
}
|
|
69
79
|
|
|
70
|
-
.@{picker-prefix-cls}-cell-
|
|
71
|
-
&:
|
|
72
|
-
|
|
73
|
-
|
|
80
|
+
.@{picker-prefix-cls}-cell-disabled {
|
|
81
|
+
&:not(:first-child) {
|
|
82
|
+
&::before {
|
|
83
|
+
left: -3*@P;
|
|
84
|
+
}
|
|
74
85
|
}
|
|
75
86
|
}
|
|
76
87
|
}
|
|
@@ -248,7 +259,7 @@
|
|
|
248
259
|
&:hover:not(&-in-view),
|
|
249
260
|
&:hover:not(&-selected):not(&-range-start):not(&-range-end):not(&-range-hover-start):not(&-range-hover-end) {
|
|
250
261
|
.@{cellClassName} {
|
|
251
|
-
background: @
|
|
262
|
+
background: @G10;
|
|
252
263
|
border-radius: @R2;
|
|
253
264
|
}
|
|
254
265
|
}
|
|
@@ -459,7 +470,7 @@
|
|
|
459
470
|
&:not(:first-child) {
|
|
460
471
|
&::before {
|
|
461
472
|
width: 3*@P;
|
|
462
|
-
left: -3*@P;
|
|
473
|
+
left: -3*@P + 2;
|
|
463
474
|
background: @G10;
|
|
464
475
|
}
|
|
465
476
|
}
|
|
@@ -518,7 +529,6 @@
|
|
|
518
529
|
|
|
519
530
|
&-date-panel {
|
|
520
531
|
.@{picker-prefix-cls}-content td:hover {
|
|
521
|
-
background-color: @B1;
|
|
522
532
|
border-radius: @R2;
|
|
523
533
|
|
|
524
534
|
// &:not(.@{picker-prefix-cls}-cell-in-range) {
|
|
@@ -557,6 +567,14 @@
|
|
|
557
567
|
width: 60*@P - 2*3*@P;
|
|
558
568
|
}
|
|
559
569
|
}
|
|
570
|
+
|
|
571
|
+
.@{picker-prefix-cls}-cell-in-view {
|
|
572
|
+
&.@{picker-prefix-cls}-cell-range-hover-end, &.@{picker-prefix-cls}-cell-range-hover-start {
|
|
573
|
+
&:hover {
|
|
574
|
+
background-color: @picker-basic-cell-active-with-range-color;
|
|
575
|
+
}
|
|
576
|
+
}
|
|
577
|
+
}
|
|
560
578
|
}
|
|
561
579
|
|
|
562
580
|
// ======================== Footer ========================
|
|
@@ -673,6 +691,10 @@
|
|
|
673
691
|
.@{picker-prefix-cls}-month-panel {
|
|
674
692
|
width: 186px;
|
|
675
693
|
}
|
|
694
|
+
|
|
695
|
+
.@{picker-prefix-cls}-date-panel {
|
|
696
|
+
width: 234px;
|
|
697
|
+
}
|
|
676
698
|
}
|
|
677
699
|
|
|
678
700
|
// ====================== Week Panel ======================
|
|
@@ -58,19 +58,19 @@
|
|
|
58
58
|
}
|
|
59
59
|
.acud-dialogbox-sm {
|
|
60
60
|
width: 520px;
|
|
61
|
-
max-height:
|
|
61
|
+
max-height: 560px;
|
|
62
62
|
}
|
|
63
63
|
.acud-dialogbox-md {
|
|
64
64
|
width: 800px;
|
|
65
|
-
max-height:
|
|
65
|
+
max-height: 560px;
|
|
66
66
|
}
|
|
67
67
|
.acud-dialogbox-lg {
|
|
68
68
|
width: 1120px;
|
|
69
|
-
max-height:
|
|
69
|
+
max-height: 560px;
|
|
70
70
|
}
|
|
71
71
|
.acud-dialogbox-xl {
|
|
72
72
|
width: 1200px;
|
|
73
|
-
max-height:
|
|
73
|
+
max-height: 560px;
|
|
74
74
|
}
|
|
75
75
|
.acud-dialogbox-content {
|
|
76
76
|
position: relative;
|
|
@@ -53,10 +53,14 @@ var DropdownButton = function DropdownButton(props) {
|
|
|
53
53
|
|
|
54
54
|
var children = props.children,
|
|
55
55
|
overlay = props.overlay,
|
|
56
|
-
visible = props.visible,
|
|
57
56
|
disabled = props.disabled,
|
|
57
|
+
trigger = props.trigger,
|
|
58
|
+
visible = props.visible,
|
|
58
59
|
onVisibleChange = props.onVisibleChange,
|
|
59
|
-
|
|
60
|
+
overlayClassName = props.overlayClassName,
|
|
61
|
+
overlayStyle = props.overlayStyle,
|
|
62
|
+
getPopupContainer = props.getPopupContainer,
|
|
63
|
+
restProps = __rest(props, ["children", "overlay", "disabled", "trigger", "visible", "onVisibleChange", "overlayClassName", "overlayStyle", "getPopupContainer"]); // 菜单可见,需要将ICON旋转
|
|
60
64
|
|
|
61
65
|
|
|
62
66
|
var _useState = (0, _react.useState)(!!visible),
|
|
@@ -77,7 +81,12 @@ var DropdownButton = function DropdownButton(props) {
|
|
|
77
81
|
}, restProps), children), /*#__PURE__*/_react["default"].createElement(_dropdown["default"], {
|
|
78
82
|
disabled: disabled,
|
|
79
83
|
placement: "bottomRight",
|
|
84
|
+
trigger: trigger,
|
|
80
85
|
overlay: overlay,
|
|
86
|
+
overlayClassName: overlayClassName,
|
|
87
|
+
overlayStyle: overlayStyle,
|
|
88
|
+
getPopupContainer: getPopupContainer,
|
|
89
|
+
visible: popupVisible,
|
|
81
90
|
onVisibleChange: handleVisibleChange
|
|
82
91
|
}, /*#__PURE__*/_react["default"].createElement(_button["default"], (0, _extends2["default"])({
|
|
83
92
|
disabled: disabled,
|
|
@@ -93,9 +93,10 @@
|
|
|
93
93
|
margin-top: -8px;
|
|
94
94
|
font-size: 12px;
|
|
95
95
|
line-height: 16px;
|
|
96
|
+
transition: transform 0.48s;
|
|
96
97
|
}
|
|
97
98
|
.acud-dropdown-trigger-arrow-expand {
|
|
98
|
-
transform: rotate(
|
|
99
|
+
transform: rotate(180deg);
|
|
99
100
|
}
|
|
100
101
|
.acud-dropdown-trigger-arrow > svg {
|
|
101
102
|
width: 16px;
|
|
@@ -220,6 +221,10 @@ li.acud-dropdown-menu-submenu-disabled:active,
|
|
|
220
221
|
.acud-dropdown-menu-item-disabled:active {
|
|
221
222
|
border-color: transparent;
|
|
222
223
|
}
|
|
224
|
+
li.acud-dropdown-menu-submenu-active:hover,
|
|
225
|
+
.acud-dropdown-menu-item-active:hover {
|
|
226
|
+
background-color: #E6F0FF;
|
|
227
|
+
}
|
|
223
228
|
.acud-dropdown-menu-submenu-title,
|
|
224
229
|
.acud-dropdown-menu-item {
|
|
225
230
|
padding-left: 12px;
|
|
@@ -72,9 +72,10 @@
|
|
|
72
72
|
margin-top: -2 * @P;
|
|
73
73
|
font-size: @T2;
|
|
74
74
|
line-height: 4 * @P;
|
|
75
|
+
transition: transform .48s;
|
|
75
76
|
|
|
76
77
|
&-expand {
|
|
77
|
-
transform: rotate(
|
|
78
|
+
transform: rotate(180deg);
|
|
78
79
|
}
|
|
79
80
|
|
|
80
81
|
& > svg {
|
|
@@ -105,6 +106,10 @@
|
|
|
105
106
|
cursor: not-allowed;
|
|
106
107
|
.basic-disabled-config(@dropdown-menu-tp, @dropdown-menu-p);
|
|
107
108
|
}
|
|
109
|
+
|
|
110
|
+
&-active:hover {
|
|
111
|
+
background-color: @B1;
|
|
112
|
+
}
|
|
108
113
|
}
|
|
109
114
|
|
|
110
115
|
&-submenu-title,
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
export interface ModalFuncProps {
|
|
3
|
+
/** 对话框标题 */
|
|
4
|
+
title?: string;
|
|
5
|
+
/** 对话框内容 */
|
|
6
|
+
content?: React.ReactNode;
|
|
7
|
+
/** 点击确定回调 */
|
|
8
|
+
onOk?: (e: React.MouseEvent<HTMLElement>) => (void | Promise<any>);
|
|
9
|
+
/** 点击模态框右上角叉、取消按钮、Props.maskClosable 值为 true 时的遮罩层或键盘按下 Esc 时的回调 */
|
|
10
|
+
onCancel?: (e: React.MouseEvent<HTMLElement>) => void;
|
|
11
|
+
afterClose?: () => void;
|
|
12
|
+
/** 弹框宽度 */
|
|
13
|
+
width?: number;
|
|
14
|
+
/** 弹框高度 */
|
|
15
|
+
height?: number;
|
|
16
|
+
/** 确认按钮文字 */
|
|
17
|
+
okText?: string;
|
|
18
|
+
/** 取消按钮文字 */
|
|
19
|
+
cancelText?: string;
|
|
20
|
+
/** 点击蒙层是否允许关闭 */
|
|
21
|
+
maskClosable?: boolean;
|
|
22
|
+
/** 是否强制渲染 DialogBox */
|
|
23
|
+
forceRender?: boolean;
|
|
24
|
+
/** 关闭时是否销毁 DialogBox 里的子元素 */
|
|
25
|
+
destroyOnClose?: boolean;
|
|
26
|
+
style?: React.CSSProperties;
|
|
27
|
+
className?: string;
|
|
28
|
+
/** 指定DialogBox挂载的html节点 */
|
|
29
|
+
getContainer?: string | HTMLElement | (() => HTMLElement) | false | null;
|
|
30
|
+
/** 设置 DialogBox 的 z-index */
|
|
31
|
+
zIndex?: number;
|
|
32
|
+
/** 是否支持键盘 esc 关闭 */
|
|
33
|
+
keyboard?: boolean;
|
|
34
|
+
/** 自定义关闭图标 */
|
|
35
|
+
closeIcon?: React.ReactNode;
|
|
36
|
+
}
|
|
37
|
+
export interface DialogBoxProps extends ModalFuncProps {
|
|
38
|
+
/** 是否有取消按钮 */
|
|
39
|
+
cancelBtn?: boolean;
|
|
40
|
+
onClose?: (...args: any[]) => void;
|
|
41
|
+
visible?: boolean;
|
|
42
|
+
type: 'confirm' | 'success' | 'info' | 'error' | 'warning';
|
|
43
|
+
confirmLoading?: boolean;
|
|
44
|
+
}
|
|
45
|
+
declare const DialogBox: React.FC<DialogBoxProps>;
|
|
46
|
+
export default DialogBox;
|
|
@@ -0,0 +1,179 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
exports["default"] = void 0;
|
|
11
|
+
|
|
12
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
|
+
|
|
14
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
15
|
+
|
|
16
|
+
var React = _interopRequireWildcard(require("react"));
|
|
17
|
+
|
|
18
|
+
var _FilledError = _interopRequireDefault(require("acud-icon/lib/icons/FilledError"));
|
|
19
|
+
|
|
20
|
+
var _OutlinedClose = _interopRequireDefault(require("acud-icon/lib/icons/OutlinedClose"));
|
|
21
|
+
|
|
22
|
+
var _FilledSuccess = _interopRequireDefault(require("acud-icon/lib/icons/FilledSuccess"));
|
|
23
|
+
|
|
24
|
+
var _FilledWarn = _interopRequireDefault(require("acud-icon/lib/icons/FilledWarn"));
|
|
25
|
+
|
|
26
|
+
var _FilledInfo = _interopRequireDefault(require("acud-icon/lib/icons/FilledInfo"));
|
|
27
|
+
|
|
28
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
29
|
+
|
|
30
|
+
var _configProvider = require("../config-provider");
|
|
31
|
+
|
|
32
|
+
var _button = _interopRequireDefault(require("../button"));
|
|
33
|
+
|
|
34
|
+
var _Modal = _interopRequireDefault(require("./Modal"));
|
|
35
|
+
|
|
36
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
37
|
+
|
|
38
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
39
|
+
|
|
40
|
+
var __rest = void 0 && (void 0).__rest || function (s, e) {
|
|
41
|
+
var t = {};
|
|
42
|
+
|
|
43
|
+
for (var p in s) {
|
|
44
|
+
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
48
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
49
|
+
}
|
|
50
|
+
return t;
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
var DialogType = {
|
|
54
|
+
success: {
|
|
55
|
+
className: 'sucess',
|
|
56
|
+
icon: /*#__PURE__*/React.createElement(_FilledSuccess["default"], {
|
|
57
|
+
color: "@S6"
|
|
58
|
+
})
|
|
59
|
+
},
|
|
60
|
+
warning: {
|
|
61
|
+
className: 'warning',
|
|
62
|
+
icon: /*#__PURE__*/React.createElement(_FilledWarn["default"], {
|
|
63
|
+
color: "@W6"
|
|
64
|
+
})
|
|
65
|
+
},
|
|
66
|
+
confirm: {
|
|
67
|
+
className: 'confirm',
|
|
68
|
+
icon: /*#__PURE__*/React.createElement(_FilledWarn["default"], {
|
|
69
|
+
color: "@W6"
|
|
70
|
+
})
|
|
71
|
+
},
|
|
72
|
+
info: {
|
|
73
|
+
className: 'info',
|
|
74
|
+
icon: /*#__PURE__*/React.createElement(_FilledInfo["default"], {
|
|
75
|
+
color: "@B6"
|
|
76
|
+
})
|
|
77
|
+
},
|
|
78
|
+
error: {
|
|
79
|
+
className: 'error',
|
|
80
|
+
icon: /*#__PURE__*/React.createElement(_FilledError["default"], {
|
|
81
|
+
color: "@E6"
|
|
82
|
+
})
|
|
83
|
+
}
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
var DialogBox = function DialogBox(props) {
|
|
87
|
+
var _React$useContext = React.useContext(_configProvider.ConfigContext),
|
|
88
|
+
getPopupContainer = _React$useContext.getPopupContainer,
|
|
89
|
+
getPrefixCls = _React$useContext.getPrefixCls;
|
|
90
|
+
|
|
91
|
+
var prefixCls = getPrefixCls('modal-dialogbox');
|
|
92
|
+
var closeIconToRender = /*#__PURE__*/React.createElement("span", {
|
|
93
|
+
className: "".concat(prefixCls, "-close-x")
|
|
94
|
+
}, /*#__PURE__*/React.createElement(_OutlinedClose["default"], {
|
|
95
|
+
className: "".concat(prefixCls, "-close-icon")
|
|
96
|
+
}));
|
|
97
|
+
|
|
98
|
+
var visible = props.visible,
|
|
99
|
+
className = props.className,
|
|
100
|
+
title = props.title,
|
|
101
|
+
content = props.content,
|
|
102
|
+
type = props.type,
|
|
103
|
+
cancelBtn = props.cancelBtn,
|
|
104
|
+
okText = props.okText,
|
|
105
|
+
confirmLoading = props.confirmLoading,
|
|
106
|
+
onOk = props.onOk,
|
|
107
|
+
onClose = props.onClose,
|
|
108
|
+
restProps = __rest(props, ["visible", "className", "title", "content", "type", "cancelBtn", "okText", "confirmLoading", "onOk", "onClose"]);
|
|
109
|
+
|
|
110
|
+
var _React$useState = React.useState(false),
|
|
111
|
+
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
|
|
112
|
+
loading = _React$useState2[0],
|
|
113
|
+
toggleLoading = _React$useState2[1];
|
|
114
|
+
|
|
115
|
+
var okBtnLoading = React.useMemo(function () {
|
|
116
|
+
if (typeof confirmLoading === 'boolean') {
|
|
117
|
+
return confirmLoading;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
return loading;
|
|
121
|
+
}, [confirmLoading, loading]);
|
|
122
|
+
var handleOk = React.useCallback(function (e) {
|
|
123
|
+
var okResult = onOk === null || onOk === void 0 ? void 0 : onOk(e);
|
|
124
|
+
|
|
125
|
+
if (okResult && typeof okResult.then === 'function') {
|
|
126
|
+
toggleLoading(true);
|
|
127
|
+
okResult.then(function () {
|
|
128
|
+
console.log('then: close');
|
|
129
|
+
toggleLoading(false);
|
|
130
|
+
onClose === null || onClose === void 0 ? void 0 : onClose.apply(void 0, arguments);
|
|
131
|
+
}, function (e) {
|
|
132
|
+
console.error(e);
|
|
133
|
+
toggleLoading(false);
|
|
134
|
+
});
|
|
135
|
+
} else {
|
|
136
|
+
onClose === null || onClose === void 0 ? void 0 : onClose(e);
|
|
137
|
+
}
|
|
138
|
+
}, [onOk, onClose]);
|
|
139
|
+
var handleCancel = React.useCallback(function () {
|
|
140
|
+
onClose === null || onClose === void 0 ? void 0 : onClose({
|
|
141
|
+
triggerCancel: true
|
|
142
|
+
});
|
|
143
|
+
}, [onClose]);
|
|
144
|
+
var titleNode = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
145
|
+
className: "".concat(prefixCls, "-icon")
|
|
146
|
+
}, DialogType[type].icon), /*#__PURE__*/React.createElement("div", {
|
|
147
|
+
className: "".concat(prefixCls, "-title")
|
|
148
|
+
}, title));
|
|
149
|
+
var footer = React.useMemo(function () {
|
|
150
|
+
if (!cancelBtn) {
|
|
151
|
+
return /*#__PURE__*/React.createElement(_button["default"], {
|
|
152
|
+
type: "primary",
|
|
153
|
+
loading: okBtnLoading,
|
|
154
|
+
onClick: handleOk
|
|
155
|
+
}, okText);
|
|
156
|
+
}
|
|
157
|
+
}, [okText, cancelBtn, okBtnLoading, handleOk]);
|
|
158
|
+
return /*#__PURE__*/React.createElement(_Modal["default"], (0, _extends2["default"])({}, restProps, {
|
|
159
|
+
confirmLoading: okBtnLoading,
|
|
160
|
+
footer: footer,
|
|
161
|
+
title: titleNode,
|
|
162
|
+
className: (0, _classnames["default"])(className, "".concat(prefixCls), "".concat(prefixCls, "-").concat(type)),
|
|
163
|
+
getContainer: getPopupContainer,
|
|
164
|
+
visible: visible,
|
|
165
|
+
closeIcon: closeIconToRender,
|
|
166
|
+
onCancel: handleCancel,
|
|
167
|
+
onOk: handleOk,
|
|
168
|
+
okText: okText
|
|
169
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
170
|
+
className: "".concat(prefixCls, "-content")
|
|
171
|
+
}, content));
|
|
172
|
+
};
|
|
173
|
+
|
|
174
|
+
DialogBox.defaultProps = {
|
|
175
|
+
visible: true,
|
|
176
|
+
type: 'info'
|
|
177
|
+
};
|
|
178
|
+
var _default = DialogBox;
|
|
179
|
+
exports["default"] = _default;
|
package/lib/modal/Modal.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import { ButtonProps } from '../button';
|
|
2
3
|
declare enum SizeType {
|
|
3
4
|
'small' = "sm",
|
|
4
5
|
'normal' = "md",
|
|
@@ -14,8 +15,12 @@ export interface ModalProps {
|
|
|
14
15
|
confirmLoading?: boolean;
|
|
15
16
|
/** 弹框标题 */
|
|
16
17
|
title?: React.ReactNode;
|
|
18
|
+
/** 确认按钮 props */
|
|
19
|
+
okButtonProps?: ButtonProps;
|
|
17
20
|
/** 点击确定回调 */
|
|
18
21
|
onOk?: (e: React.MouseEvent<HTMLElement>) => void;
|
|
22
|
+
/** 取消按钮 props */
|
|
23
|
+
cancelButtonProps?: ButtonProps;
|
|
19
24
|
/** 点击模态框右上角叉、取消按钮、Props.maskClosable 值为 true 时的遮罩层或键盘按下 Esc 时的回调 */
|
|
20
25
|
onCancel?: (e: React.MouseEvent<HTMLElement>) => void;
|
|
21
26
|
afterClose?: () => void;
|
package/lib/modal/Modal.js
CHANGED
|
@@ -87,15 +87,17 @@ var Modal = function Modal(props) {
|
|
|
87
87
|
var renderFooter = function renderFooter() {
|
|
88
88
|
var okText = props.okText,
|
|
89
89
|
cancelText = props.cancelText,
|
|
90
|
-
confirmLoading = props.confirmLoading
|
|
91
|
-
|
|
90
|
+
confirmLoading = props.confirmLoading,
|
|
91
|
+
okButtonProps = props.okButtonProps,
|
|
92
|
+
cancelButtonProps = props.cancelButtonProps;
|
|
93
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_button["default"], (0, _extends2["default"])({
|
|
92
94
|
onClick: handleCancel,
|
|
93
95
|
type: "default"
|
|
94
|
-
}, cancelText || '取消'), /*#__PURE__*/React.createElement(_button["default"], {
|
|
96
|
+
}, cancelButtonProps), cancelText || '取消'), /*#__PURE__*/React.createElement(_button["default"], (0, _extends2["default"])({
|
|
95
97
|
onClick: handleOk,
|
|
96
98
|
loading: confirmLoading,
|
|
97
99
|
type: "primary"
|
|
98
|
-
}, okText || '确定'));
|
|
100
|
+
}, okButtonProps), okText || '确定'));
|
|
99
101
|
};
|
|
100
102
|
|
|
101
103
|
var visible = props.visible,
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { ModalFuncProps } from './DialogBox';
|
|
2
|
+
export declare function destroyAll(): void;
|
|
3
|
+
export declare function confirm(config: ModalFuncProps): {
|
|
4
|
+
destroy: (...args: any[]) => void;
|
|
5
|
+
};
|
|
6
|
+
export declare function success(config: ModalFuncProps): {
|
|
7
|
+
destroy: (...args: any[]) => void;
|
|
8
|
+
};
|
|
9
|
+
export declare function info(config: ModalFuncProps): {
|
|
10
|
+
destroy: (...args: any[]) => void;
|
|
11
|
+
};
|
|
12
|
+
export declare function warning(config: ModalFuncProps): {
|
|
13
|
+
destroy: (...args: any[]) => void;
|
|
14
|
+
};
|
|
15
|
+
export declare function error(config: ModalFuncProps): {
|
|
16
|
+
destroy: (...args: any[]) => void;
|
|
17
|
+
};
|
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.confirm = confirm;
|
|
9
|
+
exports.destroyAll = destroyAll;
|
|
10
|
+
exports.error = error;
|
|
11
|
+
exports.info = info;
|
|
12
|
+
exports.success = success;
|
|
13
|
+
exports.warning = warning;
|
|
14
|
+
|
|
15
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
16
|
+
|
|
17
|
+
var _react = _interopRequireDefault(require("react"));
|
|
18
|
+
|
|
19
|
+
var _reactDom = require("react-dom");
|
|
20
|
+
|
|
21
|
+
var _DialogBox = _interopRequireDefault(require("./DialogBox"));
|
|
22
|
+
|
|
23
|
+
var destroyFns = [];
|
|
24
|
+
|
|
25
|
+
function renderDialogBox(config) {
|
|
26
|
+
var currentConfig = (0, _extends2["default"])((0, _extends2["default"])({}, config), {
|
|
27
|
+
visible: true,
|
|
28
|
+
onClose: close
|
|
29
|
+
});
|
|
30
|
+
var container = document.createDocumentFragment();
|
|
31
|
+
|
|
32
|
+
function render(dialogConfig) {
|
|
33
|
+
setTimeout(function () {
|
|
34
|
+
(0, _reactDom.render)( /*#__PURE__*/_react["default"].createElement(_DialogBox["default"], dialogConfig), container);
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
function destroy() {
|
|
39
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
40
|
+
args[_key] = arguments[_key];
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
var triggerCancel = args.some(function (param) {
|
|
44
|
+
return param && param.triggerCancel;
|
|
45
|
+
});
|
|
46
|
+
|
|
47
|
+
if (config.onCancel && triggerCancel) {
|
|
48
|
+
// @ts-ignore
|
|
49
|
+
config.onCancel.apply(config, args);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
for (var i = 0; i < destroyFns.length; i++) {
|
|
53
|
+
var fn = destroyFns[i];
|
|
54
|
+
|
|
55
|
+
if (fn === close) {
|
|
56
|
+
destroyFns.splice(i, 1);
|
|
57
|
+
break;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
(0, _reactDom.unmountComponentAtNode)(container);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
function close() {
|
|
65
|
+
var _this = this;
|
|
66
|
+
|
|
67
|
+
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
|
68
|
+
args[_key2] = arguments[_key2];
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
render((0, _extends2["default"])((0, _extends2["default"])({}, currentConfig), {
|
|
72
|
+
visible: false,
|
|
73
|
+
afterClose: function afterClose() {
|
|
74
|
+
if (typeof config.afterClose === 'function') {
|
|
75
|
+
config.afterClose();
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
destroy.apply(_this, args);
|
|
79
|
+
}
|
|
80
|
+
}));
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
render(currentConfig);
|
|
84
|
+
destroyFns.push(close);
|
|
85
|
+
return {
|
|
86
|
+
destroy: close
|
|
87
|
+
};
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
function destroyAll() {
|
|
91
|
+
while (destroyFns.length) {
|
|
92
|
+
var close = destroyFns.pop();
|
|
93
|
+
|
|
94
|
+
if (close) {
|
|
95
|
+
close();
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
function confirm(config) {
|
|
101
|
+
return renderDialogBox((0, _extends2["default"])((0, _extends2["default"])({}, config), {
|
|
102
|
+
type: 'confirm',
|
|
103
|
+
cancelBtn: true
|
|
104
|
+
}));
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
function success(config) {
|
|
108
|
+
var _a;
|
|
109
|
+
|
|
110
|
+
return renderDialogBox((0, _extends2["default"])((0, _extends2["default"])({}, config), {
|
|
111
|
+
type: 'success',
|
|
112
|
+
cancelBtn: false,
|
|
113
|
+
okText: (_a = config.okText) !== null && _a !== void 0 ? _a : '关闭'
|
|
114
|
+
}));
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
function info(config) {
|
|
118
|
+
var _a;
|
|
119
|
+
|
|
120
|
+
return renderDialogBox((0, _extends2["default"])((0, _extends2["default"])({}, config), {
|
|
121
|
+
type: 'info',
|
|
122
|
+
cancelBtn: false,
|
|
123
|
+
okText: (_a = config.okText) !== null && _a !== void 0 ? _a : '确定'
|
|
124
|
+
}));
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
function warning(config) {
|
|
128
|
+
var _a;
|
|
129
|
+
|
|
130
|
+
return renderDialogBox((0, _extends2["default"])((0, _extends2["default"])({}, config), {
|
|
131
|
+
type: 'warning',
|
|
132
|
+
cancelBtn: false,
|
|
133
|
+
okText: (_a = config.okText) !== null && _a !== void 0 ? _a : '关闭'
|
|
134
|
+
}));
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
function error(config) {
|
|
138
|
+
var _a;
|
|
139
|
+
|
|
140
|
+
return renderDialogBox((0, _extends2["default"])((0, _extends2["default"])({}, config), {
|
|
141
|
+
type: 'error',
|
|
142
|
+
cancelBtn: false,
|
|
143
|
+
okText: (_a = config.okText) !== null && _a !== void 0 ? _a : '重试'
|
|
144
|
+
}));
|
|
145
|
+
}
|
package/lib/modal/index.d.ts
CHANGED
|
@@ -1,2 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { confirm, success, info, error, warning, destroyAll } from './dialog';
|
|
3
|
+
declare const _default: import("react").FC<import("./Modal").ModalProps> & {
|
|
4
|
+
confirm: typeof confirm;
|
|
5
|
+
success: typeof success;
|
|
6
|
+
info: typeof info;
|
|
7
|
+
error: typeof error;
|
|
8
|
+
warning: typeof warning;
|
|
9
|
+
destroyAll: typeof destroyAll;
|
|
10
|
+
};
|
|
11
|
+
export default _default;
|
package/lib/modal/index.js
CHANGED
|
@@ -7,7 +7,19 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
});
|
|
8
8
|
exports["default"] = void 0;
|
|
9
9
|
|
|
10
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
+
|
|
10
12
|
var _Modal = _interopRequireDefault(require("./Modal"));
|
|
11
13
|
|
|
12
|
-
var
|
|
14
|
+
var _dialog = require("./dialog");
|
|
15
|
+
|
|
16
|
+
var _default = (0, _extends2["default"])(_Modal["default"], {
|
|
17
|
+
confirm: _dialog.confirm,
|
|
18
|
+
success: _dialog.success,
|
|
19
|
+
info: _dialog.info,
|
|
20
|
+
error: _dialog.error,
|
|
21
|
+
warning: _dialog.warning,
|
|
22
|
+
destroyAll: _dialog.destroyAll
|
|
23
|
+
});
|
|
24
|
+
|
|
13
25
|
exports["default"] = _default;
|