@qsxy/element-plus-react 1.0.0-next.12 → 1.0.0-next.15
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/Dialog/Dialog.js +5 -6
- package/dist/Dialog/DialogContext.d.ts +1 -1
- package/dist/Dialog/DialogContext.js +1 -1
- package/dist/Drawer/Drawer.d.ts +2 -5
- package/dist/Drawer/Drawer.js +98 -35
- package/dist/Drawer/DrawerBody.js +6 -12
- package/dist/Drawer/DrawerContext.d.ts +1 -13
- package/dist/Drawer/DrawerContext.js +1 -11
- package/dist/Drawer/DrawerHeader.js +5 -18
- package/dist/Drawer/typings.d.ts +31 -10
- package/dist/InputNumber/InputNumber.d.ts +2 -2
- package/dist/InputNumber/InputNumber.js +3 -3
- package/dist/Loading/Loading.d.ts +7 -2
- package/dist/Loading/Loading.js +108 -57
- package/dist/Loading/typings.d.ts +7 -1
- package/dist/Message/Main.d.ts +0 -7
- package/dist/Message/Main.js +0 -7
- package/dist/Message/Message.d.ts +2 -2
- package/dist/Message/Message.js +4 -3
- package/dist/Message/index.d.ts +0 -8
- package/dist/Message/index.js +5 -9
- package/dist/MessageBox/MessageBox.js +2 -1
- package/dist/MessageBox/index.d.ts +5 -5
- package/dist/MessageBox/index.js +1 -0
- package/dist/Notification/Main.d.ts +0 -7
- package/dist/Notification/Main.js +0 -7
- package/dist/Popover/Popover.d.ts +3 -2
- package/dist/Popover/Popover.js +10 -5
- package/dist/Popover/typings.d.ts +0 -1
- package/dist/Skeleton/PlaceholderGraph.d.ts +1 -1
- package/dist/Skeleton/PlaceholderGraph.js +3 -3
- package/dist/Skeleton/PlaceholderGrid.d.ts +1 -1
- package/dist/Skeleton/PlaceholderGrid.js +3 -3
- package/dist/Skeleton/PlaceholderParagraph.d.ts +2 -2
- package/dist/Skeleton/PlaceholderParagraph.js +13 -8
- package/dist/Skeleton/Skeleton.d.ts +2 -9
- package/dist/Skeleton/Skeleton.js +94 -7
- package/dist/Skeleton/SkeletonContext.d.ts +17 -0
- package/dist/Skeleton/SkeletonContext.js +5 -0
- package/dist/Skeleton/SkeletonItem.d.ts +4 -0
- package/dist/Skeleton/SkeletonItem.js +47 -0
- package/dist/Skeleton/index.d.ts +2 -3
- package/dist/Skeleton/index.js +2 -1
- package/dist/Skeleton/typings.d.ts +29 -0
- package/dist/Skeleton/typings.js +1 -0
- package/dist/Table/Table.d.ts +0 -1
- package/dist/Table/Table.js +1 -1
- package/dist/Table/hooks/useSelection.d.ts +1 -1
- package/dist/Tooltip/Tooltip.d.ts +3 -3
- package/dist/Tooltip/Tooltip.js +6 -6
- package/dist/index.css +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/theme-chalk/drawer/index.scss +61 -65
- package/theme-chalk/message/index.scss +11 -3
- package/theme-chalk/placeholder/index.scss +22 -37
- package/dist/theme-chalk/avatar/index.scss +0 -50
- package/dist/theme-chalk/badge/index.scss +0 -63
- package/dist/theme-chalk/breadcrumb/index.scss +0 -65
- package/dist/theme-chalk/build.scss +0 -2
- package/dist/theme-chalk/button/_mixins.scss +0 -317
- package/dist/theme-chalk/button/button-group.scss +0 -83
- package/dist/theme-chalk/button/button.scss +0 -382
- package/dist/theme-chalk/button/index.scss +0 -2
- package/dist/theme-chalk/calendar/date-picker.scss +0 -112
- package/dist/theme-chalk/calendar/date-range-picker.scss +0 -139
- package/dist/theme-chalk/calendar/date-table.scss +0 -156
- package/dist/theme-chalk/calendar/index.scss +0 -6
- package/dist/theme-chalk/calendar/month-table.scss +0 -92
- package/dist/theme-chalk/calendar/picker-panel.scss +0 -136
- package/dist/theme-chalk/calendar/year-table.scss +0 -107
- package/dist/theme-chalk/card/index.scss +0 -44
- package/dist/theme-chalk/carousel/index.scss +0 -237
- package/dist/theme-chalk/cascader/cascader-panel.scss +0 -184
- package/dist/theme-chalk/cascader/cascader.scss +0 -239
- package/dist/theme-chalk/cascader/index.scss +0 -2
- package/dist/theme-chalk/checkbox/index.scss +0 -255
- package/dist/theme-chalk/checkbox-button/index.scss +0 -117
- package/dist/theme-chalk/checkbox-group/index.scss +0 -33
- package/dist/theme-chalk/col/_mixins.scss +0 -62
- package/dist/theme-chalk/col/index.scss +0 -50
- package/dist/theme-chalk/collapse/index.scss +0 -84
- package/dist/theme-chalk/color-picker/index.scss +0 -340
- package/dist/theme-chalk/common/_var.scss +0 -6
- package/dist/theme-chalk/common/index.d.ts +0 -1
- package/dist/theme-chalk/common/index.js +0 -1
- package/dist/theme-chalk/common/index.scss +0 -222
- package/dist/theme-chalk/date-picker/index.scss +0 -253
- package/dist/theme-chalk/date-time-picker/index.scss +0 -3
- package/dist/theme-chalk/date-time-picker/time-picker.scss +0 -83
- package/dist/theme-chalk/date-time-picker/time-range-picker.scss +0 -32
- package/dist/theme-chalk/descriptions/descriptions-item.scss +0 -66
- package/dist/theme-chalk/descriptions/descriptions.scss +0 -160
- package/dist/theme-chalk/descriptions/index.scss +0 -2
- package/dist/theme-chalk/dev.scss +0 -2
- package/dist/theme-chalk/dialog/index.scss +0 -190
- package/dist/theme-chalk/display.scss +0 -46
- package/dist/theme-chalk/divider/index.scss +0 -51
- package/dist/theme-chalk/doc.scss +0 -2
- package/dist/theme-chalk/drawer/index.scss +0 -250
- package/dist/theme-chalk/dropdown/index.scss +0 -147
- package/dist/theme-chalk/empty/index.scss +0 -69
- package/dist/theme-chalk/fonts/fa-brands-400.ttf +0 -0
- package/dist/theme-chalk/fonts/fa-brands-400.woff2 +0 -0
- package/dist/theme-chalk/fonts/fa-duotone-900.ttf +0 -0
- package/dist/theme-chalk/fonts/fa-duotone-900.woff2 +0 -0
- package/dist/theme-chalk/fonts/fa-light-300.ttf +0 -0
- package/dist/theme-chalk/fonts/fa-light-300.woff2 +0 -0
- package/dist/theme-chalk/fonts/fa-regular-400.ttf +0 -0
- package/dist/theme-chalk/fonts/fa-regular-400.woff2 +0 -0
- package/dist/theme-chalk/fonts/fa-solid-900.ttf +0 -0
- package/dist/theme-chalk/fonts/fa-solid-900.woff2 +0 -0
- package/dist/theme-chalk/fonts/fa-thin-100.ttf +0 -0
- package/dist/theme-chalk/fonts/fa-thin-100.woff2 +0 -0
- package/dist/theme-chalk/fonts/fa-v4compatibility.ttf +0 -0
- package/dist/theme-chalk/fonts/fa-v4compatibility.woff2 +0 -0
- package/dist/theme-chalk/form/index.scss +0 -378
- package/dist/theme-chalk/icon/fonts.scss +0 -9
- package/dist/theme-chalk/icon/index.scss +0 -44
- package/dist/theme-chalk/icon/scss/_animated.scss +0 -205
- package/dist/theme-chalk/icon/scss/_bordered-pulled.scss +0 -20
- package/dist/theme-chalk/icon/scss/_core.scss +0 -33
- package/dist/theme-chalk/icon/scss/_duotone-icons.scss +0 -12
- package/dist/theme-chalk/icon/scss/_fixed-width.scss +0 -7
- package/dist/theme-chalk/icon/scss/_functions.scss +0 -57
- package/dist/theme-chalk/icon/scss/_icons.scss +0 -11
- package/dist/theme-chalk/icon/scss/_list.scss +0 -20
- package/dist/theme-chalk/icon/scss/_mixins.scss +0 -102
- package/dist/theme-chalk/icon/scss/_rotated-flipped.scss +0 -31
- package/dist/theme-chalk/icon/scss/_screen-reader.scss +0 -14
- package/dist/theme-chalk/icon/scss/_shims.scss +0 -2606
- package/dist/theme-chalk/icon/scss/_sizing.scss +0 -16
- package/dist/theme-chalk/icon/scss/_stacked.scss +0 -32
- package/dist/theme-chalk/icon/scss/_variables.scss +0 -9189
- package/dist/theme-chalk/icon/scss/brands.scss +0 -27
- package/dist/theme-chalk/icon/scss/duotone.scss +0 -72
- package/dist/theme-chalk/icon/scss/fontawesome.scss +0 -13
- package/dist/theme-chalk/icon/scss/index.scss +0 -15
- package/dist/theme-chalk/icon/scss/light.scss +0 -21
- package/dist/theme-chalk/icon/scss/regular.scss +0 -21
- package/dist/theme-chalk/icon/scss/solid.scss +0 -21
- package/dist/theme-chalk/icon/scss/thin.scss +0 -21
- package/dist/theme-chalk/icon/scss/v4-shims.scss +0 -3
- package/dist/theme-chalk/index.scss +0 -67
- package/dist/theme-chalk/input/_mixins.scss +0 -16
- package/dist/theme-chalk/input/index.scss +0 -3
- package/dist/theme-chalk/input/input-range.scss +0 -208
- package/dist/theme-chalk/input/input.scss +0 -577
- package/dist/theme-chalk/input-number/index.scss +0 -172
- package/dist/theme-chalk/link/index.scss +0 -99
- package/dist/theme-chalk/loading/index.scss +0 -94
- package/dist/theme-chalk/message/index.scss +0 -169
- package/dist/theme-chalk/message-box/index.scss +0 -184
- package/dist/theme-chalk/notification/index.scss +0 -155
- package/dist/theme-chalk/pagination/index.scss +0 -515
- package/dist/theme-chalk/placeholder/index.scss +0 -135
- package/dist/theme-chalk/popconfirm/index.scss +0 -35
- package/dist/theme-chalk/popover/index.scss +0 -54
- package/dist/theme-chalk/popper/index.scss +0 -86
- package/dist/theme-chalk/progress/index.scss +0 -155
- package/dist/theme-chalk/radio/index.scss +0 -2
- package/dist/theme-chalk/radio/radio-button.scss +0 -128
- package/dist/theme-chalk/radio/radio.scss +0 -171
- package/dist/theme-chalk/radio-group/index.scss +0 -31
- package/dist/theme-chalk/row/index.scss +0 -30
- package/dist/theme-chalk/scrollbar/index.scss +0 -103
- package/dist/theme-chalk/select/index.scss +0 -244
- package/dist/theme-chalk/select/option-group.scss +0 -54
- package/dist/theme-chalk/select/option.scss +0 -63
- package/dist/theme-chalk/select/select-dropdown.scss +0 -57
- package/dist/theme-chalk/switch/index.scss +0 -273
- package/dist/theme-chalk/table/index.scss +0 -714
- package/dist/theme-chalk/tabs/index.scss +0 -620
- package/dist/theme-chalk/tag/index.scss +0 -360
- package/dist/theme-chalk/time-line/_timeline-item.scss +0 -90
- package/dist/theme-chalk/time-line/_timeline.scss +0 -50
- package/dist/theme-chalk/time-line/index.scss +0 -2
- package/dist/theme-chalk/time-picker/index.scss +0 -109
- package/dist/theme-chalk/tooltip/index.scss +0 -13
- package/dist/theme-chalk/transfer/index.scss +0 -247
- package/dist/theme-chalk/transition/index.scss +0 -756
- package/dist/theme-chalk/tree/_directory.scss +0 -73
- package/dist/theme-chalk/tree/_tree.scss +0 -401
- package/dist/theme-chalk/tree/index.scss +0 -2
- package/dist/theme-chalk/tree-select/index.scss +0 -25
- package/dist/theme-chalk/upload/index.scss +0 -631
package/dist/Dialog/Dialog.js
CHANGED
|
@@ -19,7 +19,6 @@ import { createPortal } from 'react-dom';
|
|
|
19
19
|
import Transition from "../Transition/Transition";
|
|
20
20
|
import { PopupManager, addUnit } from "../Util";
|
|
21
21
|
import { useClassNames, useControlled } from "../hooks";
|
|
22
|
-
import { namespace } from "../hooks/prefix";
|
|
23
22
|
import DialogBody from "./DialogBody";
|
|
24
23
|
import { DialogContext } from "./DialogContext";
|
|
25
24
|
import DialogFooter from "./DialogFooter";
|
|
@@ -135,13 +134,13 @@ function InternalElDialog(props, ref) {
|
|
|
135
134
|
if (isTargetExists || isContainedByPopper) {
|
|
136
135
|
return;
|
|
137
136
|
}
|
|
138
|
-
if (
|
|
137
|
+
if (closeOnClickModal) {
|
|
138
|
+
doClose();
|
|
139
|
+
} else {
|
|
139
140
|
addClass(dialogRef.current, b('dialog-shake', false));
|
|
140
141
|
setTimeout(function () {
|
|
141
142
|
removeClass(dialogRef.current, b('dialog-shake', false));
|
|
142
143
|
}, 300);
|
|
143
|
-
} else if (modal === true) {
|
|
144
|
-
doClose();
|
|
145
144
|
}
|
|
146
145
|
});
|
|
147
146
|
}
|
|
@@ -165,7 +164,7 @@ function InternalElDialog(props, ref) {
|
|
|
165
164
|
});
|
|
166
165
|
return /*#__PURE__*/React.createElement(DialogContext.Provider, {
|
|
167
166
|
value: {
|
|
168
|
-
|
|
167
|
+
modal: modal,
|
|
169
168
|
setVisible: setVisible,
|
|
170
169
|
isControlled: isControlled,
|
|
171
170
|
doClose: doClose,
|
|
@@ -240,7 +239,7 @@ function InternalElDialog(props, ref) {
|
|
|
240
239
|
'align-center': alignCenter,
|
|
241
240
|
fullscreen: fullscreen
|
|
242
241
|
}), _defineProperty({}, m(_templateObject || (_templateObject = _taggedTemplateLiteral(["center"]))), center)),
|
|
243
|
-
style: _objectSpread(_objectSpread({}, props.style), {}, _defineProperty(_defineProperty({},
|
|
242
|
+
style: _objectSpread(_objectSpread({}, props.style), {}, _defineProperty(_defineProperty({}, '--el-dialog-width', fullscreen || classPrefix !== 'dialog' ? '' : addUnit(width)), '--el-dialog-margin-top', addUnit(top))),
|
|
244
243
|
ref: dialogRef
|
|
245
244
|
}, /*#__PURE__*/React.createElement(DialogHeader, {
|
|
246
245
|
ref: headerRef,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
interface DialogContentProps {
|
|
3
3
|
/** 当设置为 true,Dialog 打开时会显示背景,点击背景会关闭 Dialog,如果不想关闭 Dialog,可以设置为 'static' */
|
|
4
|
-
|
|
4
|
+
modal: boolean;
|
|
5
5
|
setVisible: (visible: boolean) => void;
|
|
6
6
|
/** 隐藏时的回调函数 */
|
|
7
7
|
doClose: () => void;
|
package/dist/Drawer/Drawer.d.ts
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React, { RefObject } from 'react';
|
|
2
2
|
import DrawerBody from './DrawerBody';
|
|
3
3
|
import DrawerFooter from './DrawerFooter';
|
|
4
|
-
import DrawerHeader from './DrawerHeader';
|
|
5
4
|
import { DrawerProps } from './typings';
|
|
6
5
|
declare const Comp: (props: DrawerProps & {
|
|
7
6
|
ref?: RefObject<HTMLDivElement> | React.ForwardedRef<HTMLDivElement>;
|
|
@@ -9,10 +8,8 @@ declare const Comp: (props: DrawerProps & {
|
|
|
9
8
|
type InternalType = typeof Comp;
|
|
10
9
|
interface CompInterface extends InternalType {
|
|
11
10
|
displayName?: string;
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
Body: typeof DrawerBody;
|
|
15
|
-
Footer: typeof DrawerFooter;
|
|
11
|
+
body: typeof DrawerBody;
|
|
12
|
+
footer: typeof DrawerFooter;
|
|
16
13
|
}
|
|
17
14
|
declare const Drawer: CompInterface;
|
|
18
15
|
export default Drawer;
|
package/dist/Drawer/Drawer.js
CHANGED
|
@@ -14,10 +14,10 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
|
|
|
14
14
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
15
15
|
import classNames from 'classnames';
|
|
16
16
|
import { addClass, removeClass } from 'dom-lib';
|
|
17
|
-
import React, { forwardRef, useEffect, useRef } from 'react';
|
|
17
|
+
import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
18
18
|
import { createPortal } from 'react-dom';
|
|
19
19
|
import Transition from "../Transition/Transition";
|
|
20
|
-
import { PopupManager, mergeDefaultProps } from "../Util";
|
|
20
|
+
import { PopupManager, addUnit, mergeDefaultProps } from "../Util";
|
|
21
21
|
import { useClassNames, useControlled } from "../hooks";
|
|
22
22
|
import { namespace } from "../hooks/prefix";
|
|
23
23
|
import DrawerBody from "./DrawerBody";
|
|
@@ -26,26 +26,46 @@ import DrawerFooter from "./DrawerFooter";
|
|
|
26
26
|
import DrawerHeader from "./DrawerHeader";
|
|
27
27
|
function InternalComp(props, ref) {
|
|
28
28
|
props = mergeDefaultProps({
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
29
|
+
direction: 'right',
|
|
30
|
+
modal: true,
|
|
31
|
+
closeOnClickModal: true,
|
|
32
|
+
withHeader: true,
|
|
33
|
+
lockScroll: true,
|
|
34
|
+
size: '30%'
|
|
32
35
|
}, props);
|
|
33
36
|
var _props = props,
|
|
34
|
-
|
|
37
|
+
modal = _props.modal,
|
|
38
|
+
closeOnClickModal = _props.closeOnClickModal,
|
|
39
|
+
title = _props.title,
|
|
40
|
+
withHeader = _props.withHeader,
|
|
35
41
|
size = _props.size,
|
|
36
|
-
|
|
42
|
+
direction = _props.direction,
|
|
37
43
|
children = _props.children,
|
|
38
|
-
|
|
44
|
+
close = _props.close,
|
|
45
|
+
beforeClose = _props.beforeClose,
|
|
46
|
+
showClose = _props.showClose,
|
|
47
|
+
border = _props.border,
|
|
39
48
|
_props$classPrefix = _props.classPrefix,
|
|
40
|
-
classPrefix = _props$classPrefix === void 0 ? 'drawer' : _props$classPrefix
|
|
49
|
+
classPrefix = _props$classPrefix === void 0 ? 'drawer' : _props$classPrefix,
|
|
50
|
+
lockScroll = _props.lockScroll;
|
|
41
51
|
var _useClassNames = useClassNames(classPrefix),
|
|
42
52
|
b = _useClassNames.b,
|
|
43
53
|
wb = _useClassNames.wb;
|
|
44
54
|
var _useControlled = useControlled(props.visible, props.defaultVisible),
|
|
45
|
-
_useControlled2 = _slicedToArray(_useControlled,
|
|
55
|
+
_useControlled2 = _slicedToArray(_useControlled, 2),
|
|
46
56
|
visible = _useControlled2[0],
|
|
47
|
-
setVisible = _useControlled2[1]
|
|
48
|
-
|
|
57
|
+
setVisible = _useControlled2[1];
|
|
58
|
+
var sizeStyle = useMemo(function () {
|
|
59
|
+
if (['left', 'right'].includes(direction)) {
|
|
60
|
+
return {
|
|
61
|
+
'--el-drawer-width': addUnit(size)
|
|
62
|
+
};
|
|
63
|
+
} else if (['top', 'bottom'].includes(direction)) {
|
|
64
|
+
return {
|
|
65
|
+
'--el-drawer-height': addUnit(size)
|
|
66
|
+
};
|
|
67
|
+
}
|
|
68
|
+
}, [direction, size]);
|
|
49
69
|
|
|
50
70
|
// 模态框容器div
|
|
51
71
|
var wrapperRef = useRef(null);
|
|
@@ -53,11 +73,36 @@ function InternalComp(props, ref) {
|
|
|
53
73
|
var drawerRef = useRef(null);
|
|
54
74
|
// 遮罩div
|
|
55
75
|
var backdropRef = useRef(null);
|
|
76
|
+
var _useState = useState({
|
|
77
|
+
modal: 1,
|
|
78
|
+
drawer: 1
|
|
79
|
+
}),
|
|
80
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
81
|
+
zIndex = _useState2[0],
|
|
82
|
+
setZIndex = _useState2[1];
|
|
83
|
+
var doClose = useCallback(function () {
|
|
84
|
+
if (beforeClose) {
|
|
85
|
+
beforeClose === null || beforeClose === void 0 || beforeClose(function (value) {
|
|
86
|
+
if (value) {
|
|
87
|
+
return;
|
|
88
|
+
}
|
|
89
|
+
setVisible(false);
|
|
90
|
+
close === null || close === void 0 || close();
|
|
91
|
+
});
|
|
92
|
+
} else {
|
|
93
|
+
setVisible(false);
|
|
94
|
+
close === null || close === void 0 || close();
|
|
95
|
+
}
|
|
96
|
+
}, [beforeClose, close, setVisible]);
|
|
56
97
|
|
|
57
98
|
/**关闭对话框 */
|
|
58
99
|
useEffect(function () {
|
|
59
100
|
if (visible) {
|
|
60
101
|
var _ref$current;
|
|
102
|
+
setZIndex({
|
|
103
|
+
modal: PopupManager.nextZIndex(),
|
|
104
|
+
drawer: PopupManager.nextZIndex()
|
|
105
|
+
});
|
|
61
106
|
var mousedown;
|
|
62
107
|
var shadowRef = (_ref$current = ref === null || ref === void 0 ? void 0 : ref.current) !== null && _ref$current !== void 0 ? _ref$current : wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current;
|
|
63
108
|
shadowRef === null || shadowRef === void 0 || shadowRef.addEventListener('mousedown', function (e) {
|
|
@@ -72,10 +117,9 @@ function InternalComp(props, ref) {
|
|
|
72
117
|
if (isTargetExists || isContainedByPopper) {
|
|
73
118
|
return;
|
|
74
119
|
}
|
|
75
|
-
if (
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
} else if (backdrop === 'static') {
|
|
120
|
+
if (closeOnClickModal) {
|
|
121
|
+
doClose();
|
|
122
|
+
} else {
|
|
79
123
|
addClass(drawerRef.current, "".concat(namespace, "-drawer-shake"));
|
|
80
124
|
setTimeout(function () {
|
|
81
125
|
removeClass(drawerRef.current, "".concat(namespace, "-drawer-shake"));
|
|
@@ -83,15 +127,12 @@ function InternalComp(props, ref) {
|
|
|
83
127
|
}
|
|
84
128
|
});
|
|
85
129
|
}
|
|
86
|
-
}, [b,
|
|
130
|
+
}, [b, closeOnClickModal, modal, close, ref, setVisible, visible, doClose]);
|
|
87
131
|
return /*#__PURE__*/React.createElement(DrawerContext.Provider, {
|
|
88
132
|
value: {
|
|
89
|
-
|
|
90
|
-
setVisible: setVisible,
|
|
91
|
-
isControlled: isControlled,
|
|
92
|
-
onClose: onClose
|
|
133
|
+
doClose: doClose
|
|
93
134
|
}
|
|
94
|
-
},
|
|
135
|
+
}, modal && /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Transition, {
|
|
95
136
|
nodeRef: backdropRef,
|
|
96
137
|
visible: visible,
|
|
97
138
|
transitionAppear: true,
|
|
@@ -108,7 +149,7 @@ function InternalComp(props, ref) {
|
|
|
108
149
|
}, /*#__PURE__*/React.createElement("div", {
|
|
109
150
|
className: classNames(b(_templateObject || (_templateObject = _taggedTemplateLiteral(["backdrop"]))), "".concat(namespace, "-anim-fade")),
|
|
110
151
|
style: {
|
|
111
|
-
zIndex:
|
|
152
|
+
zIndex: zIndex.modal
|
|
112
153
|
},
|
|
113
154
|
ref: backdropRef
|
|
114
155
|
})), document.body), /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Transition, {
|
|
@@ -121,38 +162,60 @@ function InternalComp(props, ref) {
|
|
|
121
162
|
var _props$onOpen, _props2, _props$onEnter, _props3;
|
|
122
163
|
(_props$onOpen = (_props2 = props).onOpen) === null || _props$onOpen === void 0 || _props$onOpen.call(_props2);
|
|
123
164
|
(_props$onEnter = (_props3 = props).onEnter) === null || _props$onEnter === void 0 || _props$onEnter.call(_props3);
|
|
165
|
+
if (lockScroll) {
|
|
166
|
+
addClass(document.body, b('popup-parent--hidden', false));
|
|
167
|
+
}
|
|
168
|
+
},
|
|
169
|
+
afterEnter: function afterEnter() {
|
|
170
|
+
var _props$afterEnter, _props4, _props$onOpened, _props5;
|
|
171
|
+
(_props$afterEnter = (_props4 = props).afterEnter) === null || _props$afterEnter === void 0 || _props$afterEnter.call(_props4);
|
|
172
|
+
(_props$onOpened = (_props5 = props).onOpened) === null || _props$onOpened === void 0 || _props$onOpened.call(_props5);
|
|
124
173
|
},
|
|
125
174
|
beforeLeave: function beforeLeave() {
|
|
126
|
-
var _props$beforeLeave,
|
|
175
|
+
var _props$beforeLeave, _props6;
|
|
127
176
|
removeClass(drawerRef.current, "".concat(namespace, "-anim-slide-in"));
|
|
128
177
|
addClass(drawerRef.current, "".concat(namespace, "-anim-slide-out"));
|
|
129
|
-
(_props$beforeLeave = (
|
|
178
|
+
(_props$beforeLeave = (_props6 = props).beforeLeave) === null || _props$beforeLeave === void 0 || _props$beforeLeave.call(_props6);
|
|
179
|
+
},
|
|
180
|
+
onLeave: function onLeave() {
|
|
181
|
+
var _props$onClose, _props7, _props$onLeave, _props8;
|
|
182
|
+
(_props$onClose = (_props7 = props).onClose) === null || _props$onClose === void 0 || _props$onClose.call(_props7);
|
|
183
|
+
(_props$onLeave = (_props8 = props).onLeave) === null || _props$onLeave === void 0 || _props$onLeave.call(_props8);
|
|
184
|
+
},
|
|
185
|
+
afterLeave: function afterLeave() {
|
|
186
|
+
var _props$afterLeave, _props9, _props$onClosed, _props10;
|
|
187
|
+
(_props$afterLeave = (_props9 = props).afterLeave) === null || _props$afterLeave === void 0 || _props$afterLeave.call(_props9);
|
|
188
|
+
(_props$onClosed = (_props10 = props).onClosed) === null || _props$onClosed === void 0 || _props$onClosed.call(_props10);
|
|
189
|
+
if (lockScroll) {
|
|
190
|
+
removeClass(document.body, b('popup-parent--hidden', false));
|
|
191
|
+
}
|
|
130
192
|
},
|
|
131
|
-
onLeave: props.onLeave,
|
|
132
|
-
afterLeave: props.afterLeave,
|
|
133
193
|
duration: 300
|
|
134
194
|
}, /*#__PURE__*/React.createElement("div", {
|
|
135
195
|
className: classNames(b(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["wrapper"]))), props.className),
|
|
136
196
|
style: _objectSpread(_objectSpread({}, props.style), {}, {
|
|
137
|
-
zIndex:
|
|
197
|
+
zIndex: zIndex.drawer
|
|
138
198
|
}),
|
|
139
199
|
ref: ref || wrapperRef
|
|
140
200
|
}, /*#__PURE__*/React.createElement("div", {
|
|
141
|
-
className: classNames(wb(
|
|
142
|
-
style: {
|
|
201
|
+
className: classNames(wb(direction), "".concat(namespace, "-anim-slide-in"), "".concat(namespace, "-anim-").concat(direction)),
|
|
202
|
+
style: _objectSpread({
|
|
143
203
|
display: 'block'
|
|
144
|
-
},
|
|
204
|
+
}, sizeStyle),
|
|
145
205
|
ref: drawerRef
|
|
146
206
|
}, /*#__PURE__*/React.createElement("div", {
|
|
147
207
|
className: b(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["dialog"])))
|
|
148
208
|
}, /*#__PURE__*/React.createElement("div", {
|
|
149
209
|
className: b(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["content"])))
|
|
150
|
-
},
|
|
210
|
+
}, withHeader ? /*#__PURE__*/React.createElement(DrawerHeader, {
|
|
211
|
+
classPrefix: classPrefix,
|
|
212
|
+
showClose: showClose,
|
|
213
|
+
border: border
|
|
214
|
+
}, title) : null, children))))), document.body));
|
|
151
215
|
}
|
|
152
216
|
var Comp = /*#__PURE__*/forwardRef(InternalComp);
|
|
153
217
|
var Drawer = Comp;
|
|
154
|
-
Drawer.
|
|
155
|
-
Drawer.
|
|
156
|
-
Drawer.Footer = DrawerFooter;
|
|
218
|
+
Drawer.body = DrawerBody;
|
|
219
|
+
Drawer.footer = DrawerFooter;
|
|
157
220
|
Drawer.displayName = 'Drawer';
|
|
158
221
|
export default Drawer;
|
|
@@ -5,9 +5,7 @@ import Scrollbar from "../Scrollbar/Scrollbar";
|
|
|
5
5
|
import { useClassNames } from "../hooks";
|
|
6
6
|
var DrawerBody = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
7
7
|
var _props$classPrefix = props.classPrefix,
|
|
8
|
-
classPrefix = _props$classPrefix === void 0 ? 'drawer-body' : _props$classPrefix
|
|
9
|
-
_props$padding = props.padding,
|
|
10
|
-
padding = _props$padding === void 0 ? '0 20px' : _props$padding;
|
|
8
|
+
classPrefix = _props$classPrefix === void 0 ? 'drawer-body' : _props$classPrefix;
|
|
11
9
|
var _useClassNames = useClassNames(classPrefix),
|
|
12
10
|
b = _useClassNames.b;
|
|
13
11
|
var scrollbarInstance = useRef(null);
|
|
@@ -22,17 +20,13 @@ var DrawerBody = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
22
20
|
};
|
|
23
21
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
24
22
|
}, []);
|
|
25
|
-
return /*#__PURE__*/React.createElement(
|
|
23
|
+
return /*#__PURE__*/React.createElement(Scrollbar, {
|
|
24
|
+
ref: scrollbarInstance
|
|
25
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
26
26
|
className: classNames(b(), props.className),
|
|
27
27
|
ref: ref,
|
|
28
28
|
style: props.style
|
|
29
|
-
},
|
|
30
|
-
ref: scrollbarInstance
|
|
31
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
32
|
-
style: {
|
|
33
|
-
padding: padding
|
|
34
|
-
}
|
|
35
|
-
}, props.children)));
|
|
29
|
+
}, props.children));
|
|
36
30
|
});
|
|
37
|
-
DrawerBody.displayName = '
|
|
31
|
+
DrawerBody.displayName = 'ElDrawerBody';
|
|
38
32
|
export default DrawerBody;
|
|
@@ -1,19 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
interface DrawerContentProps {
|
|
3
|
-
/** 当设置为 true,Drawer 打开时会显示背景,点击背景会关闭 Drawer,如果不想关闭 Drawer,可以设置为 'static' */
|
|
4
|
-
backdrop: boolean | 'static';
|
|
5
|
-
setVisible: (visible: boolean) => void;
|
|
6
3
|
/** 隐藏时的回调函数 */
|
|
7
|
-
|
|
8
|
-
/** 是否可控 */
|
|
9
|
-
isControlled: boolean;
|
|
4
|
+
doClose: () => void;
|
|
10
5
|
}
|
|
11
|
-
/**
|
|
12
|
-
* @author Parker
|
|
13
|
-
* @CreateTime 2022/3/20下午3:10:40
|
|
14
|
-
* @LastEditor Parker
|
|
15
|
-
* @ModifyTime 2022/5/3 22:55:13
|
|
16
|
-
* @Description 模态框上下文
|
|
17
|
-
*/
|
|
18
6
|
export declare const DrawerContext: import("react").Context<DrawerContentProps>;
|
|
19
7
|
export {};
|
|
@@ -1,15 +1,5 @@
|
|
|
1
1
|
import noop from 'lodash/noop';
|
|
2
2
|
import { createContext } from 'react';
|
|
3
|
-
/**
|
|
4
|
-
* @author Parker
|
|
5
|
-
* @CreateTime 2022/3/20下午3:10:40
|
|
6
|
-
* @LastEditor Parker
|
|
7
|
-
* @ModifyTime 2022/5/3 22:55:13
|
|
8
|
-
* @Description 模态框上下文
|
|
9
|
-
*/
|
|
10
3
|
export var DrawerContext = /*#__PURE__*/createContext({
|
|
11
|
-
|
|
12
|
-
setVisible: noop,
|
|
13
|
-
onClose: noop,
|
|
14
|
-
isControlled: false
|
|
4
|
+
doClose: noop
|
|
15
5
|
});
|
|
@@ -1,14 +1,13 @@
|
|
|
1
1
|
var _templateObject, _templateObject2, _templateObject3;
|
|
2
2
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
3
3
|
import classNames from 'classnames';
|
|
4
|
-
import React, {
|
|
4
|
+
import React, { useContext } from 'react';
|
|
5
5
|
import Icon from "../Icon/Icon";
|
|
6
6
|
import { useClassNames } from "../hooks";
|
|
7
7
|
import { DrawerContext } from "./DrawerContext";
|
|
8
8
|
var DrawerHeader = function DrawerHeader(props) {
|
|
9
|
-
var _props$
|
|
10
|
-
closeButton = _props$
|
|
11
|
-
onCloseHeader = props.onClose,
|
|
9
|
+
var _props$showClose = props.showClose,
|
|
10
|
+
closeButton = _props$showClose === void 0 ? true : _props$showClose,
|
|
12
11
|
_props$classPrefix = props.classPrefix,
|
|
13
12
|
classPrefix = _props$classPrefix === void 0 ? 'drawer' : _props$classPrefix,
|
|
14
13
|
border = props.border;
|
|
@@ -16,19 +15,7 @@ var DrawerHeader = function DrawerHeader(props) {
|
|
|
16
15
|
b = _useClassNames.b,
|
|
17
16
|
is = _useClassNames.is;
|
|
18
17
|
var _useContext = useContext(DrawerContext),
|
|
19
|
-
|
|
20
|
-
isControlled = _useContext.isControlled,
|
|
21
|
-
onClose = _useContext.onClose;
|
|
22
|
-
|
|
23
|
-
/**关闭对话框 */
|
|
24
|
-
var handleCloseDialog = useCallback(function () {
|
|
25
|
-
if (isControlled) {
|
|
26
|
-
onClose === null || onClose === void 0 || onClose();
|
|
27
|
-
onCloseHeader === null || onCloseHeader === void 0 || onCloseHeader();
|
|
28
|
-
} else {
|
|
29
|
-
setVisible(false);
|
|
30
|
-
}
|
|
31
|
-
}, [isControlled, onClose, onCloseHeader, setVisible]);
|
|
18
|
+
doClose = _useContext.doClose;
|
|
32
19
|
return /*#__PURE__*/React.createElement("div", {
|
|
33
20
|
className: classNames(b(_templateObject || (_templateObject = _taggedTemplateLiteral(["header"]))), props.className, is({
|
|
34
21
|
border: border
|
|
@@ -39,7 +26,7 @@ var DrawerHeader = function DrawerHeader(props) {
|
|
|
39
26
|
style: props.titleStyle
|
|
40
27
|
}, props.children), closeButton && /*#__PURE__*/React.createElement("span", {
|
|
41
28
|
className: b(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["header-close"]))),
|
|
42
|
-
onClick:
|
|
29
|
+
onClick: doClose
|
|
43
30
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
44
31
|
name: 'xmark'
|
|
45
32
|
})));
|
package/dist/Drawer/typings.d.ts
CHANGED
|
@@ -1,26 +1,48 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { AnimationEventProps, BaseProps, NativeProps } from '../types/common';
|
|
3
|
-
export interface DrawerProps extends AnimationEventProps, BaseProps, NativeProps {
|
|
3
|
+
export interface DrawerProps extends AnimationEventProps, BaseProps, NativeProps<'--el-drawer-width' | '--el-drawer-height' | '--el-drawer-margin-top' | '--el-drawer-bg-color' | '--el-drawer-box-shadow' | '--el-drawer-title-font-size' | '--el-drawer-content-font-size' | '--el-drawer-font-line-height' | '--el-drawer-padding-primary' | '--el-drawer-border-radius'> {
|
|
4
4
|
/** 是否显示抽屉(可控) */
|
|
5
5
|
visible?: boolean;
|
|
6
6
|
/** 默认是否显示抽屉 */
|
|
7
7
|
defaultVisible?: boolean;
|
|
8
8
|
/** 当设置为 true,Drawer 打开时会显示背景,点击背景会关闭 Drawer,如果不想关闭 Drawer,可以设置为 'static' */
|
|
9
|
-
|
|
9
|
+
modal?: boolean;
|
|
10
|
+
/** 是否可以通过点击 modal 关闭 Dialog */
|
|
11
|
+
closeOnClickModal?: boolean;
|
|
12
|
+
/** 是否在 Dialog 出现时将 body 滚动锁定 */
|
|
13
|
+
lockScroll?: boolean;
|
|
10
14
|
/** 应用于 backdrop DOM 节点的 css class */
|
|
11
|
-
|
|
15
|
+
modalClassName?: string;
|
|
16
|
+
/** Dialog 对话框 Dialog 的标题, 也可通过ElDialog.header传入 */
|
|
17
|
+
title?: string | React.ReactElement;
|
|
18
|
+
/** 控制是否显示 header 栏, 默认为 true, 当此项为 false 时, title 属性不生效 */
|
|
19
|
+
withHeader?: boolean;
|
|
20
|
+
/** 当设置为 true, 显示关闭按钮 */
|
|
21
|
+
showClose?: boolean;
|
|
22
|
+
/** 标题是否有边框 */
|
|
23
|
+
border?: boolean;
|
|
12
24
|
/** 设置 Drawer 尺寸 */
|
|
13
|
-
size?:
|
|
25
|
+
size?: number | string;
|
|
14
26
|
/** 设置 Drawer 显示的位置 */
|
|
15
|
-
|
|
16
|
-
/**
|
|
27
|
+
direction?: 'top' | 'bottom' | 'right' | 'left';
|
|
28
|
+
/** Dialog 打开的回调 */
|
|
17
29
|
onOpen?: () => void;
|
|
18
|
-
/**
|
|
30
|
+
/** Dialog 打开动画结束时的回调 */
|
|
31
|
+
onOpened?: () => void;
|
|
32
|
+
/** Dialog 关闭的回调 */
|
|
19
33
|
onClose?: () => void;
|
|
34
|
+
/** Dialog 关闭动画结束时的回调 */
|
|
35
|
+
onClosed?: () => void;
|
|
36
|
+
/** 关闭弹窗函数 */
|
|
37
|
+
close: () => void;
|
|
38
|
+
/** 关闭前的回调,会暂停 Dialog 的关闭. 回调函数内执行 done 参数方法的时候才是真正关闭对话框的时候. */
|
|
39
|
+
beforeClose?: DialogBeforeCloseFn;
|
|
20
40
|
}
|
|
41
|
+
type DoneFn = (cancel?: boolean) => void;
|
|
42
|
+
export type DialogBeforeCloseFn = (done: DoneFn) => void;
|
|
21
43
|
export interface DrawerHeaderProps extends BaseProps, NativeProps {
|
|
22
44
|
/** 当设置为 true, 显示关闭按钮 */
|
|
23
|
-
|
|
45
|
+
showClose?: boolean;
|
|
24
46
|
/** 标题是否有边框 */
|
|
25
47
|
border?: boolean;
|
|
26
48
|
/** 组件 CSS 类的前缀 */
|
|
@@ -33,10 +55,9 @@ export interface DrawerHeaderProps extends BaseProps, NativeProps {
|
|
|
33
55
|
export interface DrawerBodyProps extends BaseProps, NativeProps {
|
|
34
56
|
/** 组件 CSS 类的前缀 */
|
|
35
57
|
classPrefix?: string;
|
|
36
|
-
/** 内容区域padding */
|
|
37
|
-
padding?: string | number;
|
|
38
58
|
}
|
|
39
59
|
export interface DrawerFooterProps extends BaseProps, NativeProps {
|
|
40
60
|
/** 组件 CSS 类的前缀 */
|
|
41
61
|
classPrefix?: string;
|
|
42
62
|
}
|
|
63
|
+
export {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { InputNumberProps, InputNumberRef } from './typings';
|
|
3
|
-
declare const
|
|
4
|
-
export default
|
|
3
|
+
declare const InputNumber: React.MemoExoticComponent<React.ForwardRefExoticComponent<InputNumberProps<import("./typings").ValueType> & React.RefAttributes<InputNumberRef>>>;
|
|
4
|
+
export default InputNumber;
|
|
@@ -25,7 +25,7 @@ import Icon from "../Icon/Icon";
|
|
|
25
25
|
import Input from "../Input/Input";
|
|
26
26
|
import { floatAdd, floatSub, formatNumber, isEmpty, isNotEmpty, mergeDefaultProps } from "../Util";
|
|
27
27
|
import { partitionHTMLProps, useClassNames, useControlled, useDisabled, useSize } from "../hooks";
|
|
28
|
-
var InputNumber = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
28
|
+
var InputNumber = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
|
|
29
29
|
props = mergeDefaultProps({
|
|
30
30
|
step: 1,
|
|
31
31
|
precision: 0,
|
|
@@ -250,6 +250,6 @@ var InputNumber = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
250
250
|
}, []),
|
|
251
251
|
ref: inputRef
|
|
252
252
|
}, omit(htmlInputProps, ['disabled', 'size', 'onInput', 'onKeyDown', 'onKeyUp', 'size', 'onChange', 'style', 'className', 'type', 'name', 'prefix', 'readOnly', 'maxLength', 'minLength']))));
|
|
253
|
-
});
|
|
253
|
+
}));
|
|
254
254
|
InputNumber.displayName = 'ElInputNumber';
|
|
255
|
-
export default
|
|
255
|
+
export default InputNumber;
|
|
@@ -1,9 +1,14 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
1
|
+
import { FC, RefObject } from 'react';
|
|
2
2
|
import { LoadingProps, LoadingService } from './typings';
|
|
3
|
+
export declare class Main {
|
|
4
|
+
ref: RefObject<any>;
|
|
5
|
+
root: any;
|
|
6
|
+
constructor(props: LoadingProps);
|
|
7
|
+
render(props: LoadingProps): void;
|
|
8
|
+
}
|
|
3
9
|
declare const Loading: CompInterface;
|
|
4
10
|
interface CompInterface extends FC<LoadingProps> {
|
|
5
11
|
displayName?: string;
|
|
6
|
-
defaultProps?: Partial<LoadingProps>;
|
|
7
12
|
service: LoadingService;
|
|
8
13
|
}
|
|
9
14
|
export default Loading;
|