@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
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import React__default from 'react';
|
|
3
3
|
import RcDropdown from 'rc-dropdown';
|
|
4
|
-
import { a as $rcPrefixCls, $ as $prefixCls } from './constant-
|
|
5
|
-
import { g as getNearestOverflowAncestor, u as usePopupContainer } from './usePopupContainer-
|
|
4
|
+
import { a as $rcPrefixCls, $ as $prefixCls } from './constant-66aa48a1.js';
|
|
5
|
+
import { g as getNearestOverflowAncestor, u as usePopupContainer } from './usePopupContainer-87febeb9.js';
|
|
6
6
|
import clsx from 'clsx';
|
|
7
7
|
import dayjs from 'dayjs';
|
|
8
8
|
import { UUID } from '@paraview/lib';
|
|
@@ -12,97 +12,76 @@ function getPlaceholder(picker, locale, customizePlaceholder) {
|
|
|
12
12
|
if (customizePlaceholder !== undefined) {
|
|
13
13
|
return customizePlaceholder;
|
|
14
14
|
}
|
|
15
|
-
|
|
16
15
|
if (picker === 'year' && locale.lang.yearPlaceholder) {
|
|
17
16
|
return locale.lang.yearPlaceholder;
|
|
18
17
|
}
|
|
19
|
-
|
|
20
18
|
if (picker === 'quarter' && locale.lang.quarterPlaceholder) {
|
|
21
19
|
return locale.lang.quarterPlaceholder;
|
|
22
20
|
}
|
|
23
|
-
|
|
24
21
|
if (picker === 'month' && locale.lang.monthPlaceholder) {
|
|
25
22
|
return locale.lang.monthPlaceholder;
|
|
26
23
|
}
|
|
27
|
-
|
|
28
24
|
if (picker === 'week' && locale.lang.weekPlaceholder) {
|
|
29
25
|
return locale.lang.weekPlaceholder;
|
|
30
26
|
}
|
|
31
|
-
|
|
32
27
|
if (picker === 'time' && locale.timePickerLocale.placeholder) {
|
|
33
28
|
return locale.timePickerLocale.placeholder;
|
|
34
29
|
}
|
|
35
|
-
|
|
36
30
|
return locale.lang.placeholder;
|
|
37
31
|
}
|
|
38
32
|
function getRangePlaceholder(picker, locale, customizePlaceholder) {
|
|
39
33
|
if (customizePlaceholder !== undefined) {
|
|
40
34
|
return customizePlaceholder;
|
|
41
35
|
}
|
|
42
|
-
|
|
43
36
|
if (picker === 'year' && locale.lang.yearPlaceholder) {
|
|
44
37
|
return locale.lang.rangeYearPlaceholder;
|
|
45
38
|
}
|
|
46
|
-
|
|
47
39
|
if (picker === 'month' && locale.lang.monthPlaceholder) {
|
|
48
40
|
return locale.lang.rangeMonthPlaceholder;
|
|
49
41
|
}
|
|
50
|
-
|
|
51
42
|
if (picker === 'week' && locale.lang.weekPlaceholder) {
|
|
52
43
|
return locale.lang.rangeWeekPlaceholder;
|
|
53
44
|
}
|
|
54
|
-
|
|
55
45
|
if (picker === 'time' && locale.timePickerLocale.placeholder) {
|
|
56
46
|
return locale.timePickerLocale.rangePlaceholder;
|
|
57
47
|
}
|
|
58
|
-
|
|
59
48
|
return locale.lang.rangePlaceholder;
|
|
60
49
|
}
|
|
61
|
-
|
|
62
50
|
function toArray(list) {
|
|
63
51
|
if (!list) {
|
|
64
52
|
return [];
|
|
65
53
|
}
|
|
66
|
-
|
|
67
54
|
return Array.isArray(list) ? list : [list];
|
|
68
55
|
}
|
|
69
|
-
|
|
70
56
|
function getTimeProps(props) {
|
|
71
57
|
var format = props.format,
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
58
|
+
picker = props.picker,
|
|
59
|
+
showHour = props.showHour,
|
|
60
|
+
showMinute = props.showMinute,
|
|
61
|
+
showSecond = props.showSecond,
|
|
62
|
+
use12Hours = props.use12Hours;
|
|
77
63
|
var firstFormat = toArray(format)[0];
|
|
78
64
|
var showTimeObj = Object.assign({}, props);
|
|
79
|
-
|
|
80
65
|
if (firstFormat && typeof firstFormat === 'string') {
|
|
81
66
|
if (!firstFormat.includes('s') && showSecond === undefined) {
|
|
82
67
|
showTimeObj.showSecond = false;
|
|
83
68
|
}
|
|
84
|
-
|
|
85
69
|
if (!firstFormat.includes('m') && showMinute === undefined) {
|
|
86
70
|
showTimeObj.showMinute = false;
|
|
87
71
|
}
|
|
88
|
-
|
|
89
72
|
if (!firstFormat.includes('H') && !firstFormat.includes('h') && showHour === undefined) {
|
|
90
73
|
showTimeObj.showHour = false;
|
|
91
74
|
}
|
|
92
|
-
|
|
93
75
|
if ((firstFormat.includes('a') || firstFormat.includes('A')) && use12Hours === undefined) {
|
|
94
76
|
showTimeObj.use12Hours = true;
|
|
95
77
|
}
|
|
96
78
|
}
|
|
97
|
-
|
|
98
79
|
if (picker === 'time') {
|
|
99
80
|
return showTimeObj;
|
|
100
81
|
}
|
|
101
|
-
|
|
102
82
|
if (typeof firstFormat === 'function') {
|
|
103
83
|
delete showTimeObj.format;
|
|
104
84
|
}
|
|
105
|
-
|
|
106
85
|
return {
|
|
107
86
|
showTime: showTimeObj
|
|
108
87
|
};
|
|
@@ -110,16 +89,13 @@ function getTimeProps(props) {
|
|
|
110
89
|
function formatPickerValue(value, format) {
|
|
111
90
|
if (typeof value === 'string') {
|
|
112
91
|
if (value === '') return null;
|
|
113
|
-
|
|
114
92
|
if (format) {
|
|
115
93
|
if (dayjs(value, format).isValid()) return dayjs(value, format);
|
|
116
94
|
} else {
|
|
117
95
|
if (dayjs(value).isValid()) return dayjs(value);
|
|
118
96
|
}
|
|
119
|
-
|
|
120
97
|
return null;
|
|
121
98
|
}
|
|
122
|
-
|
|
123
99
|
return value;
|
|
124
100
|
}
|
|
125
101
|
function mergedLocale(locale, defaultLocale) {
|
|
@@ -129,35 +105,29 @@ function mergedLocale(locale, defaultLocale) {
|
|
|
129
105
|
lang: lang,
|
|
130
106
|
timePickerLocale: timePickerLocale
|
|
131
107
|
};
|
|
132
|
-
}
|
|
133
|
-
|
|
108
|
+
}
|
|
109
|
+
//最近的绝对定位滚动元素
|
|
134
110
|
function getNearestAbsoluteAncestor(node, pos) {
|
|
135
111
|
var _a;
|
|
136
|
-
|
|
137
112
|
var parentNode = node.parentNode;
|
|
138
113
|
var nodeName = ((_a = parentNode === null || parentNode === void 0 ? void 0 : parentNode.nodeName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '';
|
|
139
|
-
|
|
140
114
|
if (['html', 'body', '#document'].includes(nodeName)) {
|
|
141
115
|
return null;
|
|
142
116
|
}
|
|
143
|
-
|
|
144
117
|
if (parentNode instanceof window.HTMLElement) {
|
|
145
118
|
var _window$getComputedSt = window.getComputedStyle(parentNode),
|
|
146
|
-
|
|
147
|
-
|
|
119
|
+
position = _window$getComputedSt.position;
|
|
148
120
|
if (new RegExp(pos).test(position)) return parentNode;
|
|
149
121
|
}
|
|
150
|
-
|
|
151
122
|
return getNearestAbsoluteAncestor(parentNode, pos);
|
|
152
|
-
}
|
|
153
|
-
|
|
123
|
+
}
|
|
124
|
+
//下拉弹出框关闭时,隔离dom污染
|
|
154
125
|
function isolationPopupPollution(open, uniqueCls) {
|
|
155
126
|
var popupDom = document.getElementsByClassName("".concat(uniqueCls))[0];
|
|
156
127
|
if (!popupDom) return;
|
|
157
128
|
var position = open ? 'fixed' : 'absolute';
|
|
158
129
|
var nearestDom = getNearestAbsoluteAncestor(popupDom, position);
|
|
159
130
|
if (!nearestDom) return;
|
|
160
|
-
|
|
161
131
|
if (!open) {
|
|
162
132
|
//关闭弹框
|
|
163
133
|
nearestDom.style.position = 'fixed';
|
|
@@ -169,50 +139,42 @@ function isolationPopupPollution(open, uniqueCls) {
|
|
|
169
139
|
nearestDom.style.left = '0';
|
|
170
140
|
nearestDom.style.top = '0';
|
|
171
141
|
}
|
|
172
|
-
}
|
|
173
|
-
|
|
142
|
+
}
|
|
143
|
+
//浮层渲染容器
|
|
174
144
|
function getPopupContainer(triggerNode, customizeContainer, that) {
|
|
175
145
|
var _a, _b;
|
|
176
|
-
|
|
177
146
|
var container;
|
|
178
|
-
|
|
179
147
|
if (!customizeContainer) {
|
|
180
148
|
var rootNode = that.wrapRef.current;
|
|
181
|
-
|
|
182
149
|
if (rootNode) {
|
|
183
150
|
container = getNearestOverflowAncestor(rootNode);
|
|
184
151
|
var scrollHeight = container.scrollHeight;
|
|
185
152
|
var clientHeight = container.clientHeight;
|
|
186
|
-
|
|
187
153
|
if (scrollHeight <= clientHeight) {
|
|
188
154
|
container = document.body;
|
|
189
155
|
}
|
|
190
156
|
} else {
|
|
191
157
|
container = document.body;
|
|
192
158
|
}
|
|
193
|
-
|
|
194
159
|
var nodeName = (_a = container.nodeName) === null || _a === void 0 ? void 0 : _a.toLowerCase();
|
|
195
|
-
|
|
196
160
|
if (nodeName !== 'body') {
|
|
197
161
|
if (((_b = window.getComputedStyle(container)) === null || _b === void 0 ? void 0 : _b.position) === 'static') {
|
|
198
162
|
container.style.position = 'relative';
|
|
199
163
|
}
|
|
200
164
|
}
|
|
201
|
-
|
|
202
165
|
that.popupRecord = container;
|
|
203
166
|
} else {
|
|
204
167
|
container = customizeContainer(triggerNode) || document.body;
|
|
205
168
|
}
|
|
206
|
-
|
|
207
169
|
return container;
|
|
208
170
|
}
|
|
209
171
|
|
|
210
172
|
var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/5/27 上午9:58\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-dropdown {\n position: absolute;\n left: -9999px;\n top: -9999px;\n z-index: 1500;\n display: block;\n font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n font-size: 14px;\n font-weight: 400;\n line-height: 1.5715;\n background-color: rgb(255, 255, 255);\n box-shadow: 0px 2px 8px 0px rgba(171, 176, 185, 0.4);\n border-radius: 4px;\n}\n.paraui-v3-dropdown.component-dropdown-hidden {\n display: none;\n}\n.paraui-v3-dropdown .component-dropdown-arrow {\n position: absolute;\n border-width: 4px;\n border-color: transparent;\n box-shadow: 0px 2px 8px 0px rgba(171, 176, 185, 0.4);\n border-style: solid;\n transform: rotate(45deg);\n}\n.paraui-v3-dropdown.component-dropdown-show-arrow.component-dropdown-placement-top, .paraui-v3-dropdown.component-dropdown-show-arrow.component-dropdown-placement-topLeft, .paraui-v3-dropdown.component-dropdown-show-arrow.component-dropdown-placement-topRight {\n padding-bottom: 6px;\n}\n.paraui-v3-dropdown.component-dropdown-show-arrow.component-dropdown-placement-bottom, .paraui-v3-dropdown.component-dropdown-show-arrow.component-dropdown-placement-bottomLeft, .paraui-v3-dropdown.component-dropdown-show-arrow.component-dropdown-placement-bottomRight {\n padding-top: 6px;\n}\n.paraui-v3-dropdown.component-dropdown-placement-top .component-dropdown-arrow, .paraui-v3-dropdown.component-dropdown-placement-topLeft .component-dropdown-arrow, .paraui-v3-dropdown.component-dropdown-placement-topRight .component-dropdown-arrow {\n bottom: 4px;\n border-top-color: rgb(255, 255, 255);\n}\n.paraui-v3-dropdown.component-dropdown-placement-top .component-dropdown-arrow {\n left: 50%;\n}\n.paraui-v3-dropdown.component-dropdown-placement-topLeft .component-dropdown-arrow {\n left: 15%;\n}\n.paraui-v3-dropdown.component-dropdown-placement-topRight .component-dropdown-arrow {\n right: 15%;\n}\n.paraui-v3-dropdown.component-dropdown-placement-bottom .component-dropdown-arrow, .paraui-v3-dropdown.component-dropdown-placement-bottomLeft .component-dropdown-arrow, .paraui-v3-dropdown.component-dropdown-placement-bottomRight .component-dropdown-arrow {\n top: 4px;\n border-bottom-color: rgb(255, 255, 255);\n}\n.paraui-v3-dropdown.component-dropdown-placement-bottom .component-dropdown-arrow {\n left: 50%;\n}\n.paraui-v3-dropdown.component-dropdown-placement-bottomLeft .component-dropdown-arrow {\n left: 15%;\n}\n.paraui-v3-dropdown.component-dropdown-placement-bottomRight .component-dropdown-arrow {\n right: 15%;\n}\n\n.component-dropdown-slide-up-enter,\n.component-dropdown-slide-up-appear {\n animation-duration: 0.3s;\n animation-fill-mode: both;\n transform-origin: 0 0;\n display: block !important;\n opacity: 0;\n animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);\n animation-play-state: paused;\n}\n\n.component-dropdown-slide-up-leave {\n animation-duration: 0.3s;\n animation-fill-mode: both;\n transform-origin: 0 0;\n display: block !important;\n opacity: 1;\n animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);\n animation-play-state: paused;\n}\n\n.component-dropdown-slide-up-enter.component-dropdown-slide-up-enter-active.component-dropdown-placement-bottomLeft,\n.component-dropdown-slide-up-appear.component-dropdown-slide-up-appear-active.component-dropdown-placement-bottomLeft,\n.component-dropdown-slide-up-enter.component-dropdown-slide-up-enter-active.component-dropdown-placement-bottomCenter,\n.component-dropdown-slide-up-appear.component-dropdown-slide-up-appear-active.component-dropdown-placement-bottomCenter,\n.component-dropdown-slide-up-enter.component-dropdown-slide-up-enter-active.component-dropdown-placement-bottomRight,\n.component-dropdown-slide-up-appear.component-dropdown-slide-up-appear-active.component-dropdown-placement-bottomRight {\n animation-name: componentDropdownSlideUpIn;\n animation-play-state: running;\n}\n\n.component-dropdown-slide-up-enter.component-dropdown-slide-up-enter-active.component-dropdown-placement-topLeft,\n.component-dropdown-slide-up-appear.component-dropdown-slide-up-appear-active.component-dropdown-placement-topLeft,\n.component-dropdown-slide-up-enter.component-dropdown-slide-up-enter-active.component-dropdown-placement-topCenter,\n.component-dropdown-slide-up-appear.component-dropdown-slide-up-appear-active.component-dropdown-placement-topCenter,\n.component-dropdown-slide-up-enter.component-dropdown-slide-up-enter-active.component-dropdown-placement-topRight,\n.component-dropdown-slide-up-appear.component-dropdown-slide-up-appear-active.component-dropdown-placement-topRight {\n animation-name: componentDropdownSlideDownIn;\n animation-play-state: running;\n}\n\n.component-dropdown-slide-up-leave.component-dropdown-slide-up-leave-active.component-dropdown-placement-bottomLeft,\n.component-dropdown-slide-up-leave.component-dropdown-slide-up-leave-active.component-dropdown-placement-bottomCenter,\n.component-dropdown-slide-up-leave.component-dropdown-slide-up-leave-active.component-dropdown-placement-bottomRight {\n animation-name: componentDropdownSlideUpOut;\n animation-play-state: running;\n}\n\n.component-dropdown-slide-up-leave.component-dropdown-slide-up-leave-active.component-dropdown-placement-topLeft,\n.component-dropdown-slide-up-leave.component-dropdown-slide-up-leave-active.component-dropdown-placement-topCenter,\n.component-dropdown-slide-up-leave.component-dropdown-slide-up-leave-active.component-dropdown-placement-topRight {\n animation-name: componentDropdownSlideDownOut;\n animation-play-state: running;\n}\n\n@keyframes componentDropdownSlideUpIn {\n 0% {\n opacity: 0;\n transform-origin: 0% 0%;\n transform: scaleY(0);\n }\n 100% {\n opacity: 1;\n transform-origin: 0% 0%;\n transform: scaleY(1);\n }\n}\n@keyframes componentDropdownSlideUpOut {\n 0% {\n opacity: 1;\n transform-origin: 0% 0%;\n transform: scaleY(1);\n }\n 100% {\n opacity: 0;\n transform-origin: 0% 0%;\n transform: scaleY(0);\n }\n}\n@keyframes componentDropdownSlideDownIn {\n 0% {\n opacity: 0;\n transform-origin: 0% 100%;\n transform: scaleY(0);\n }\n 100% {\n opacity: 1;\n transform-origin: 0% 100%;\n transform: scaleY(1);\n }\n}\n@keyframes componentDropdownSlideDownOut {\n 0% {\n opacity: 1;\n transform-origin: 0% 100%;\n transform: scaleY(1);\n }\n 100% {\n opacity: 0;\n transform-origin: 0% 100%;\n transform: scaleY(0);\n }\n}";
|
|
211
173
|
styleInject(css_248z);
|
|
212
174
|
|
|
175
|
+
//dropdown偏移量
|
|
213
176
|
var getDropdownOffset = function getDropdownOffset(place) {
|
|
214
177
|
var _a, _b;
|
|
215
|
-
|
|
216
178
|
var offsetMap = {
|
|
217
179
|
top: {
|
|
218
180
|
offset: [0, -8]
|
|
@@ -234,25 +196,21 @@ var getDropdownOffset = function getDropdownOffset(place) {
|
|
|
234
196
|
}
|
|
235
197
|
};
|
|
236
198
|
return (_b = (_a = offsetMap[place]) === null || _a === void 0 ? void 0 : _a.offset) !== null && _b !== void 0 ? _b : [0, 0];
|
|
237
|
-
};
|
|
238
|
-
|
|
239
|
-
|
|
199
|
+
};
|
|
200
|
+
//dropdown
|
|
240
201
|
var Dropdown = function Dropdown(props) {
|
|
241
202
|
var wrapRef = React__default.useRef();
|
|
242
203
|
var getPopupContainer = usePopupContainer(wrapRef, props.getPopupContainer);
|
|
243
|
-
var uuidRef = React__default.useRef(UUID());
|
|
244
|
-
|
|
204
|
+
var uuidRef = React__default.useRef(UUID());
|
|
205
|
+
//visible change
|
|
245
206
|
var handleVisibleChange = function handleVisibleChange(visible) {
|
|
246
207
|
var _a;
|
|
247
|
-
|
|
248
208
|
(_a = props.onVisibleChange) === null || _a === void 0 ? void 0 : _a.call(props, visible);
|
|
249
|
-
|
|
250
209
|
if (props.isolationPopupOnHide) {
|
|
251
210
|
//关闭时隔离dom污染
|
|
252
211
|
isolationPopupPollution(visible, uuidRef.current);
|
|
253
212
|
}
|
|
254
213
|
};
|
|
255
|
-
|
|
256
214
|
return jsx(RcDropdown, Object.assign({}, props, {
|
|
257
215
|
prefixCls: "".concat($rcPrefixCls, "-dropdown"),
|
|
258
216
|
overlayClassName: clsx("".concat($prefixCls, "-dropdown"), props.overlayClassName, uuidRef.current),
|
|
@@ -7,11 +7,9 @@ import React__default from 'react';
|
|
|
7
7
|
* @param str
|
|
8
8
|
* @param params
|
|
9
9
|
*/
|
|
10
|
-
|
|
11
10
|
var replaceStrTemplateVars = function replaceStrTemplateVars(str, vars) {
|
|
12
11
|
if (!vars) return str;
|
|
13
12
|
var jsx$1 = false; // 当替换的vars变量内存在jsx对象,则返回也是jsx数据,否则返回字符串
|
|
14
|
-
|
|
15
13
|
str = str.replace(/\"/g, '\\"');
|
|
16
14
|
var strTemplate = str.replace(/\{(.*?)\}/ig, function (s, v) {
|
|
17
15
|
if (_typeof(vars[v]) === 'object') jsx$1 = true;
|
|
@@ -31,33 +29,27 @@ var replaceStrTemplateVars = function replaceStrTemplateVars(str, vars) {
|
|
|
31
29
|
* @param lang 指定国际化语言
|
|
32
30
|
* @param defI18nData 默认国际化数据对象
|
|
33
31
|
*/
|
|
34
|
-
|
|
35
32
|
var i18nIntl = function i18nIntl(props) {
|
|
36
33
|
var _a, _b;
|
|
37
|
-
|
|
38
34
|
var ops = props.ops,
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
35
|
+
i18nData = props.i18nData,
|
|
36
|
+
lang = props.lang,
|
|
37
|
+
params = props.params,
|
|
38
|
+
defI18nData = props.defI18nData;
|
|
43
39
|
var text, key;
|
|
44
|
-
|
|
45
40
|
if (typeof ops === 'string') {
|
|
46
41
|
key = ops;
|
|
47
42
|
} else if (_typeof(ops) === 'object') {
|
|
48
43
|
if (typeof ops.id !== 'string') return 'i18n intl object "id" is missing';
|
|
49
44
|
key = ops.id;
|
|
50
45
|
}
|
|
51
|
-
|
|
52
46
|
if (key !== undefined) {
|
|
53
47
|
text = (_a = i18nData[lang]) === null || _a === void 0 ? void 0 : _a[key];
|
|
54
|
-
|
|
55
48
|
if (text === undefined && defI18nData) {
|
|
56
49
|
// 尝试从默认国际化数据获取
|
|
57
50
|
text = (_b = defI18nData[lang]) === null || _b === void 0 ? void 0 : _b[key];
|
|
58
51
|
}
|
|
59
52
|
}
|
|
60
|
-
|
|
61
53
|
if (typeof text !== 'string') return "{".concat(key, "}");
|
|
62
54
|
return replaceStrTemplateVars(text, params);
|
|
63
55
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { _ as _toConsumableArray } from './toConsumableArray-
|
|
2
|
-
import { _ as _slicedToArray } from './slicedToArray-
|
|
3
|
-
import { r as regenerator } from './index-
|
|
1
|
+
import { _ as _toConsumableArray } from './toConsumableArray-87c7d895.js';
|
|
2
|
+
import { _ as _slicedToArray } from './slicedToArray-77980792.js';
|
|
3
|
+
import { r as regenerator } from './index-06fea29b.js';
|
|
4
4
|
import { a as __awaiter } from './tslib.es6-55ed4bd2.js';
|
|
5
5
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
6
6
|
import React__default from 'react';
|
|
@@ -13,19 +13,18 @@ styleInject(css_248z);
|
|
|
13
13
|
|
|
14
14
|
var FDialog = function FDialog(props) {
|
|
15
15
|
var open = props.open,
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
16
|
+
title = props.title,
|
|
17
|
+
size = props.size,
|
|
18
|
+
context = props.context,
|
|
19
|
+
content = props.content,
|
|
20
|
+
onSubmit = props.onSubmit,
|
|
21
|
+
onClose = props.onClose,
|
|
22
|
+
getClose = props.getClose,
|
|
23
|
+
listIndex = props.listIndex,
|
|
24
|
+
ModalProps = props.ModalProps;
|
|
25
25
|
/**
|
|
26
26
|
* 外部想要单独关闭弹窗传出
|
|
27
27
|
*/
|
|
28
|
-
|
|
29
28
|
React__default.useEffect(function () {
|
|
30
29
|
getClose && getClose(function () {
|
|
31
30
|
return onClose(listIndex);
|
|
@@ -59,7 +58,6 @@ var FDialog = function FDialog(props) {
|
|
|
59
58
|
/**
|
|
60
59
|
* 创建模态框的上下文
|
|
61
60
|
*/
|
|
62
|
-
|
|
63
61
|
var FunctionModalContext = /*#__PURE__*/React__default.createContext(Promise.reject);
|
|
64
62
|
/**
|
|
65
63
|
* 弹出框组件
|
|
@@ -68,7 +66,6 @@ var FunctionModalContext = /*#__PURE__*/React__default.createContext(Promise.rej
|
|
|
68
66
|
* @param hideClose 隐藏右上角关闭图标 boolean 默认 false
|
|
69
67
|
* @param checkFunction 检查方法,返回 boolean 值,true则关闭弹窗,false反之
|
|
70
68
|
**/
|
|
71
|
-
|
|
72
69
|
var useModal = function useModal() {
|
|
73
70
|
return React__default.useContext(FunctionModalContext);
|
|
74
71
|
};
|
|
@@ -76,30 +73,25 @@ var setState;
|
|
|
76
73
|
/**
|
|
77
74
|
* 函数弹窗组件Provider
|
|
78
75
|
*/
|
|
79
|
-
|
|
80
76
|
var FunctionModalProvider = function FunctionModalProvider(_ref) {
|
|
81
77
|
var children = _ref.children;
|
|
82
|
-
|
|
83
78
|
// 模态框组 配置
|
|
84
79
|
var _React$useState = React__default.useState([]),
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
80
|
+
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
81
|
+
confirmationState = _React$useState2[0],
|
|
82
|
+
setConfirmationState = _React$useState2[1];
|
|
83
|
+
// 传出设置模态框数组hook,用于关闭所有弹窗
|
|
90
84
|
setState = function setState() {
|
|
91
85
|
setConfirmationState([]);
|
|
92
86
|
awaitingPromiseRef.current = [];
|
|
93
|
-
};
|
|
94
|
-
|
|
95
|
-
|
|
87
|
+
};
|
|
88
|
+
// 存储每个模态框的 promise 方法
|
|
96
89
|
var awaitingPromiseRef = React__default.useRef([]);
|
|
97
90
|
/**
|
|
98
91
|
* 模态框初始化方法
|
|
99
92
|
* @param options 模态框配置
|
|
100
93
|
* @return 返回一个promise 用于外部判断弹窗状态
|
|
101
94
|
*/
|
|
102
|
-
|
|
103
95
|
var openConfirmation = function openConfirmation(options) {
|
|
104
96
|
setConfirmationState(function (pre) {
|
|
105
97
|
pre.push(options);
|
|
@@ -117,8 +109,6 @@ var FunctionModalProvider = function FunctionModalProvider(_ref) {
|
|
|
117
109
|
* @param idx 模态框在模态框数组里的下标,用于拿到对应的配置 和 promise
|
|
118
110
|
* @description 关闭后会清空相关配置
|
|
119
111
|
*/
|
|
120
|
-
|
|
121
|
-
|
|
122
112
|
var handleClose = function handleClose(idx) {
|
|
123
113
|
// 是否有禁用取消停止功能的配置
|
|
124
114
|
if (confirmationState[idx] && !confirmationState[idx].disCatchOnCancel && awaitingPromiseRef.current[idx]) {
|
|
@@ -126,7 +116,6 @@ var FunctionModalProvider = function FunctionModalProvider(_ref) {
|
|
|
126
116
|
} else if (awaitingPromiseRef.current[idx]) {
|
|
127
117
|
awaitingPromiseRef.current[idx].resolve(true);
|
|
128
118
|
}
|
|
129
|
-
|
|
130
119
|
hideDialog(idx);
|
|
131
120
|
deleteOption(idx);
|
|
132
121
|
};
|
|
@@ -134,8 +123,6 @@ var FunctionModalProvider = function FunctionModalProvider(_ref) {
|
|
|
134
123
|
* 模态框确定触发的方法
|
|
135
124
|
* @param idx 模态框在模态框数组里的下标,用于拿到对应的配置 和 promise
|
|
136
125
|
*/
|
|
137
|
-
|
|
138
|
-
|
|
139
126
|
var handleSubmit = function handleSubmit(idx) {
|
|
140
127
|
return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regenerator.mark(function _callee() {
|
|
141
128
|
var checkFuc, jude, pRef;
|
|
@@ -145,31 +132,24 @@ var FunctionModalProvider = function FunctionModalProvider(_ref) {
|
|
|
145
132
|
case 0:
|
|
146
133
|
checkFuc = confirmationState && confirmationState[idx] && confirmationState[idx].checkFunction;
|
|
147
134
|
jude = true; // 判断是否有检查方法,如果有则先执行检查方法
|
|
148
|
-
|
|
149
135
|
if (!checkFuc) {
|
|
150
136
|
_context.next = 6;
|
|
151
137
|
break;
|
|
152
138
|
}
|
|
153
|
-
|
|
154
139
|
_context.next = 5;
|
|
155
140
|
return checkFuc();
|
|
156
|
-
|
|
157
141
|
case 5:
|
|
158
142
|
jude = _context.sent;
|
|
159
|
-
|
|
160
143
|
case 6:
|
|
161
144
|
if (jude) {
|
|
162
145
|
_context.next = 8;
|
|
163
146
|
break;
|
|
164
147
|
}
|
|
165
|
-
|
|
166
148
|
return _context.abrupt("return");
|
|
167
|
-
|
|
168
149
|
case 8:
|
|
169
150
|
hideDialog(idx);
|
|
170
151
|
pRef = awaitingPromiseRef.current[idx];
|
|
171
152
|
deleteOption(idx, pRef);
|
|
172
|
-
|
|
173
153
|
case 11:
|
|
174
154
|
case "end":
|
|
175
155
|
return _context.stop();
|
|
@@ -183,8 +163,6 @@ var FunctionModalProvider = function FunctionModalProvider(_ref) {
|
|
|
183
163
|
* @param pRef 模态框的promise
|
|
184
164
|
* @param idx 模态框在模态框组里的下标
|
|
185
165
|
*/
|
|
186
|
-
|
|
187
|
-
|
|
188
166
|
var deleteOption = function deleteOption(idx, pRef) {
|
|
189
167
|
setTimeout(function () {
|
|
190
168
|
pRef && pRef.resolve(true);
|
|
@@ -200,13 +178,10 @@ var FunctionModalProvider = function FunctionModalProvider(_ref) {
|
|
|
200
178
|
* @param idx 模态框在模态框数组里的下标
|
|
201
179
|
* @desc 解决异步导致的闪烁问题
|
|
202
180
|
*/
|
|
203
|
-
|
|
204
|
-
|
|
205
181
|
var hideDialog = function hideDialog(idx) {
|
|
206
182
|
var dialogEl = document.querySelectorAll('.function-modal .MuiDialog-container')[idx];
|
|
207
183
|
if (dialogEl) dialogEl.style.opacity = '0';
|
|
208
184
|
};
|
|
209
|
-
|
|
210
185
|
return jsxs(Fragment, {
|
|
211
186
|
children: [jsx(FunctionModalContext.Provider, {
|
|
212
187
|
value: openConfirmation,
|
|
@@ -3,42 +3,40 @@ function _arrayWithHoles(arr) {
|
|
|
3
3
|
}
|
|
4
4
|
|
|
5
5
|
function _iterableToArrayLimit(arr, i) {
|
|
6
|
-
var _i =
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
try {
|
|
16
|
-
for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
|
|
17
|
-
_arr.push(_s.value);
|
|
18
|
-
|
|
19
|
-
if (i && _arr.length === i) break;
|
|
20
|
-
}
|
|
21
|
-
} catch (err) {
|
|
22
|
-
_d = true;
|
|
23
|
-
_e = err;
|
|
24
|
-
} finally {
|
|
6
|
+
var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
|
|
7
|
+
if (null != _i) {
|
|
8
|
+
var _s,
|
|
9
|
+
_e,
|
|
10
|
+
_x,
|
|
11
|
+
_r,
|
|
12
|
+
_arr = [],
|
|
13
|
+
_n = !0,
|
|
14
|
+
_d = !1;
|
|
25
15
|
try {
|
|
26
|
-
if (
|
|
16
|
+
if (_x = (_i = _i.call(arr)).next, 0 === i) {
|
|
17
|
+
if (Object(_i) !== _i) return;
|
|
18
|
+
_n = !1;
|
|
19
|
+
} else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) {
|
|
20
|
+
;
|
|
21
|
+
}
|
|
22
|
+
} catch (err) {
|
|
23
|
+
_d = !0, _e = err;
|
|
27
24
|
} finally {
|
|
28
|
-
|
|
25
|
+
try {
|
|
26
|
+
if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
|
|
27
|
+
} finally {
|
|
28
|
+
if (_d) throw _e;
|
|
29
|
+
}
|
|
29
30
|
}
|
|
31
|
+
return _arr;
|
|
30
32
|
}
|
|
31
|
-
|
|
32
|
-
return _arr;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
function _arrayLikeToArray(arr, len) {
|
|
36
36
|
if (len == null || len > arr.length) len = arr.length;
|
|
37
|
-
|
|
38
37
|
for (var i = 0, arr2 = new Array(len); i < len; i++) {
|
|
39
38
|
arr2[i] = arr[i];
|
|
40
39
|
}
|
|
41
|
-
|
|
42
40
|
return arr2;
|
|
43
41
|
}
|
|
44
42
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { a as _arrayLikeToArray, b as _unsupportedIterableToArray } from './slicedToArray-
|
|
1
|
+
import { a as _arrayLikeToArray, b as _unsupportedIterableToArray } from './slicedToArray-77980792.js';
|
|
2
2
|
|
|
3
3
|
function _arrayWithoutHoles(arr) {
|
|
4
4
|
if (Array.isArray(arr)) return _arrayLikeToArray(arr);
|
|
@@ -6,11 +6,9 @@ import GlobalContext from '@para-ui/core/GlobalContext';
|
|
|
6
6
|
* @date 2022/3/15 4:03 PM
|
|
7
7
|
* @description 国际化钩子
|
|
8
8
|
*/
|
|
9
|
-
|
|
10
9
|
var useFormatMessage = function useFormatMessage(comName, defI18nData) {
|
|
11
10
|
var _React$useContext = React__default.useContext(GlobalContext),
|
|
12
|
-
|
|
13
|
-
|
|
11
|
+
intlFormat = _React$useContext.intlFormat;
|
|
14
12
|
defI18nData.zh_CN = defI18nData.zh;
|
|
15
13
|
defI18nData['zh-CN'] = defI18nData.zh;
|
|
16
14
|
defI18nData.en_US = defI18nData.en;
|
|
@@ -3,8 +3,7 @@ import GlobalContext from '@para-ui/core/GlobalContext';
|
|
|
3
3
|
|
|
4
4
|
function useGlobalProps(comProps, comName) {
|
|
5
5
|
var _React$useContext = React__default.useContext(GlobalContext),
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
componentsProps = _React$useContext.componentsProps;
|
|
8
7
|
var globalProps = componentsProps && componentsProps[comName];
|
|
9
8
|
return Object.assign(Object.assign({}, globalProps), comProps);
|
|
10
9
|
}
|
|
@@ -5,73 +5,58 @@ import React__default from 'react';
|
|
|
5
5
|
* @date 2022/10/9 10:12 AM
|
|
6
6
|
* @description 查找最近的祖先滚动容器
|
|
7
7
|
*/
|
|
8
|
-
|
|
8
|
+
//判断是否滚动元素
|
|
9
9
|
function isOverflowElement(element) {
|
|
10
10
|
var _window$getComputedSt = window.getComputedStyle(element),
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
11
|
+
overflow = _window$getComputedSt.overflow,
|
|
12
|
+
overflowX = _window$getComputedSt.overflowX,
|
|
13
|
+
overflowY = _window$getComputedSt.overflowY;
|
|
15
14
|
return /auto|scroll|overlay/.test(overflow + overflowY + overflowX);
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
|
|
15
|
+
}
|
|
16
|
+
//最近的祖先滚动元素
|
|
19
17
|
function getNearestOverflowAncestor(node) {
|
|
20
18
|
var _a, _b;
|
|
21
|
-
|
|
22
19
|
var parentNode = node.parentNode || node.ownerDocument;
|
|
23
20
|
var nodeName = ((_a = parentNode === null || parentNode === void 0 ? void 0 : parentNode.nodeName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '';
|
|
24
|
-
|
|
25
21
|
if (['html', 'body', '#document'].includes(nodeName)) {
|
|
26
22
|
return (_b = node === null || node === void 0 ? void 0 : node.ownerDocument) === null || _b === void 0 ? void 0 : _b.body;
|
|
27
23
|
}
|
|
28
|
-
|
|
29
24
|
if (parentNode instanceof window.HTMLElement && isOverflowElement(parentNode)) {
|
|
30
25
|
return parentNode;
|
|
31
26
|
}
|
|
32
|
-
|
|
33
27
|
return getNearestOverflowAncestor(parentNode);
|
|
34
|
-
}
|
|
35
|
-
|
|
28
|
+
}
|
|
29
|
+
//渲染容器
|
|
36
30
|
function usePopupContainer(wrapRef, customizeContainer) {
|
|
37
|
-
var popupRef = React__default.useRef();
|
|
38
|
-
|
|
31
|
+
var popupRef = React__default.useRef();
|
|
32
|
+
//浮层渲染容器
|
|
39
33
|
var getPopupContainer = function getPopupContainer(triggerNode) {
|
|
40
34
|
var _a, _b, _c, _d;
|
|
41
|
-
|
|
42
35
|
var container;
|
|
43
|
-
|
|
44
36
|
if (!customizeContainer) {
|
|
45
37
|
var rootNode = (_b = (_a = wrapRef.current) === null || _a === void 0 ? void 0 : _a.getRootDomNode) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
46
|
-
|
|
47
38
|
if (rootNode) {
|
|
48
39
|
container = getNearestOverflowAncestor(rootNode);
|
|
49
40
|
var scrollHeight = container.scrollHeight;
|
|
50
41
|
var clientHeight = container.clientHeight;
|
|
51
|
-
|
|
52
42
|
if (scrollHeight <= clientHeight) {
|
|
53
43
|
container = document.body;
|
|
54
44
|
}
|
|
55
45
|
} else {
|
|
56
46
|
container = document.body;
|
|
57
47
|
}
|
|
58
|
-
|
|
59
48
|
var nodeName = (_c = container.nodeName) === null || _c === void 0 ? void 0 : _c.toLowerCase();
|
|
60
|
-
|
|
61
49
|
if (nodeName !== 'body') {
|
|
62
50
|
if (((_d = window.getComputedStyle(container)) === null || _d === void 0 ? void 0 : _d.position) === 'static') {
|
|
63
51
|
container.style.position = 'relative';
|
|
64
52
|
}
|
|
65
53
|
}
|
|
66
|
-
|
|
67
54
|
popupRef.current = container;
|
|
68
55
|
} else {
|
|
69
56
|
container = customizeContainer(triggerNode) || document.body;
|
|
70
57
|
}
|
|
71
|
-
|
|
72
58
|
return container;
|
|
73
59
|
};
|
|
74
|
-
|
|
75
60
|
React__default.useEffect(function () {
|
|
76
61
|
return function () {
|
|
77
62
|
if (popupRef.current) popupRef.current.style.position = '';
|