dtable-ui-component 6.0.124-beta.p2 → 6.0.124-beta.p4
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/lib/AsyncUserSelect/index.css +5 -0
- package/lib/AsyncUserSelect/index.js +2 -2
- package/lib/DTableColorPicker/ColorPickerPortal/index.js +2 -3
- package/lib/DTableColorPicker/index.css +0 -4
- package/lib/DTableColorPicker/index.js +1 -1
- package/lib/DTableCommonAddTool/index.css +1 -3
- package/lib/DTableCustomFooter/index.css +1 -3
- package/lib/DTableFiltersPopover/index.css +0 -2
- package/lib/DTablePopover/index.js +1 -1
- package/lib/NotificationPopover/index.css +6 -6
- package/lib/NotificationPopover/index.js +1 -1
- package/lib/SelectOptionGroup/index.css +3 -3
- package/lib/SelectOptionGroup/index.js +1 -0
- package/package.json +1 -1
|
@@ -12,6 +12,11 @@
|
|
|
12
12
|
.dtable-ui-user-select-popover .popover {
|
|
13
13
|
width: 385px;
|
|
14
14
|
max-width: 385px;
|
|
15
|
+
background: var(--bs-popover-bg);
|
|
16
|
+
border: 1px solid var(--bs-border-secondary-color);
|
|
17
|
+
border-radius: 4px;
|
|
18
|
+
box-shadow: var(--bs-border-secondary-shadow);
|
|
19
|
+
margin-top: -4px;
|
|
15
20
|
}
|
|
16
21
|
|
|
17
22
|
.dtable-ui-user-select-container {
|
|
@@ -211,9 +211,9 @@ const AsyncUserSelect = _ref => {
|
|
|
211
211
|
target: selectorRef.current,
|
|
212
212
|
hideArrow: true,
|
|
213
213
|
fade: false,
|
|
214
|
-
className: "dtable-ui-user-select-popover
|
|
214
|
+
className: "dtable-ui-user-select-popover",
|
|
215
215
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
216
|
-
className: "dtable-ui-user-select-container
|
|
216
|
+
className: "dtable-ui-user-select-container",
|
|
217
217
|
ref: userSelectContainerRef,
|
|
218
218
|
onMouseDown: e => e.stopPropagation(),
|
|
219
219
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
@@ -72,7 +72,7 @@ function ColorPickerPortal(_ref) {
|
|
|
72
72
|
}, [target, scrollContainerId, throttleDelay, updatePosition]);
|
|
73
73
|
if (!target) return null;
|
|
74
74
|
return /*#__PURE__*/_reactDom.default.createPortal(/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
75
|
-
className: "dtable-color-picker-portal",
|
|
75
|
+
className: "dtable-color-picker-portal dtable-popover-container",
|
|
76
76
|
style: {
|
|
77
77
|
position: 'fixed',
|
|
78
78
|
zIndex: '1049',
|
|
@@ -82,8 +82,7 @@ function ColorPickerPortal(_ref) {
|
|
|
82
82
|
height: '370px',
|
|
83
83
|
visibility: position.visibility,
|
|
84
84
|
opacity: isPositioned ? 1 : 0,
|
|
85
|
-
transition: 'opacity 0.15s ease-in-out'
|
|
86
|
-
marginTop: '8px'
|
|
85
|
+
transition: 'opacity 0.15s ease-in-out'
|
|
87
86
|
},
|
|
88
87
|
ref: containerRef,
|
|
89
88
|
children: children
|
|
@@ -368,7 +368,7 @@ const DTableColorPicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
368
368
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
369
369
|
style: popoverStyle,
|
|
370
370
|
ref: colorPickerRef,
|
|
371
|
-
className: "dtable-color-picker",
|
|
371
|
+
className: "dtable-color-picker dtable-popover-container",
|
|
372
372
|
children: [renderDefaultContainer(), renderCustomContainer(), renderUsedContainer()]
|
|
373
373
|
})
|
|
374
374
|
});
|
|
@@ -4,11 +4,9 @@
|
|
|
4
4
|
height: 40px;
|
|
5
5
|
font-size: 14px;
|
|
6
6
|
font-weight: 500;
|
|
7
|
-
border-top: 1px solid
|
|
7
|
+
border-top: 1px solid var(--bs-border-secondary-color);
|
|
8
8
|
background: #fff;
|
|
9
9
|
padding: 0 1rem;
|
|
10
|
-
border-bottom-left-radius: 8px;
|
|
11
|
-
border-bottom-right-radius: 8px;
|
|
12
10
|
position: relative;
|
|
13
11
|
}
|
|
14
12
|
|
|
@@ -4,9 +4,7 @@
|
|
|
4
4
|
align-items: center;
|
|
5
5
|
justify-content: flex-end;
|
|
6
6
|
padding: 0.75rem;
|
|
7
|
-
border-top: 1px solid
|
|
8
|
-
border-bottom-right-radius: 8px;
|
|
9
|
-
border-bottom-left-radius: 8px;
|
|
7
|
+
border-top: 1px solid var(--bs-border-secondary-color) !important;
|
|
10
8
|
}
|
|
11
9
|
|
|
12
10
|
.dtable-custom-footer>* {
|
|
@@ -70,7 +70,7 @@ class DTablePopover extends _react.default.Component {
|
|
|
70
70
|
fade: false,
|
|
71
71
|
hideArrow: hideArrow,
|
|
72
72
|
innerClassName: innerClassName,
|
|
73
|
-
className: "
|
|
73
|
+
className: "dtable-popove ".concat(popoverClassName),
|
|
74
74
|
modifiers: modifiers,
|
|
75
75
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
76
76
|
ref: ref => this.dtablePopoverRef = ref,
|
|
@@ -5,11 +5,9 @@
|
|
|
5
5
|
.notification-container {
|
|
6
6
|
position: absolute;
|
|
7
7
|
background: #fff;
|
|
8
|
-
width:
|
|
8
|
+
width: 320px;
|
|
9
9
|
right: -10px;
|
|
10
10
|
top: -1px;
|
|
11
|
-
border-radius: 8px;
|
|
12
|
-
box-shadow: 0 6px 14px rgba(0, 0, 0, .1);
|
|
13
11
|
}
|
|
14
12
|
|
|
15
13
|
.notification-container .notification-header {
|
|
@@ -17,7 +15,7 @@
|
|
|
17
15
|
align-items: center;
|
|
18
16
|
justify-content: center;
|
|
19
17
|
height: 50px;
|
|
20
|
-
border-bottom: 1px solid
|
|
18
|
+
border-bottom: 1px solid var(--bs-border-secondary-color);
|
|
21
19
|
font-size: 16px;
|
|
22
20
|
font-weight: 600;
|
|
23
21
|
position: relative;
|
|
@@ -161,9 +159,11 @@
|
|
|
161
159
|
|
|
162
160
|
.notification-body .notification-footer {
|
|
163
161
|
height: 40px;
|
|
162
|
+
display: flex;
|
|
163
|
+
align-items: center;
|
|
164
|
+
justify-content: center;
|
|
164
165
|
background: #f9f9f9;
|
|
165
|
-
|
|
166
|
-
border-bottom-right-radius: 8px;
|
|
166
|
+
cursor: pointer;
|
|
167
167
|
}
|
|
168
168
|
|
|
169
169
|
.notification-body .notification-footer:hover {
|
|
@@ -88,7 +88,7 @@ class NotificationPopover extends _react.default.Component {
|
|
|
88
88
|
children: this.props.children
|
|
89
89
|
})
|
|
90
90
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
91
|
-
className: "notification-footer",
|
|
91
|
+
className: "notification-footer dtable-popover-footer",
|
|
92
92
|
onClick: this.onNotificationDialogToggle,
|
|
93
93
|
children: footerText
|
|
94
94
|
})]
|
|
@@ -7,11 +7,11 @@
|
|
|
7
7
|
min-width: 100%;
|
|
8
8
|
max-width: 15rem;
|
|
9
9
|
padding: 0.5rem 0;
|
|
10
|
+
box-shadow: var(--bs-border-secondary-shadow);
|
|
10
11
|
background: #fff;
|
|
12
|
+
border: 1px solid var(--bs-border-secondary-color);
|
|
13
|
+
border-radius: 4px;
|
|
11
14
|
z-index: 10001;
|
|
12
|
-
border: 1px solid #eee !important;
|
|
13
|
-
border-radius: 8px !important;
|
|
14
|
-
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1) !important;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
.option-group .option-group-search {
|
|
@@ -220,6 +220,7 @@ class SelectOptionGroup extends _react.Component {
|
|
|
220
220
|
opacity: 0
|
|
221
221
|
};
|
|
222
222
|
}
|
|
223
|
+
style.top = style.top + 4;
|
|
223
224
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickOutside.default, {
|
|
224
225
|
ref: ref => this.clickOutsideRef = ref,
|
|
225
226
|
onClickOutside: this.props.onClickOutside,
|