dtable-ui-component 7.0.1-beta.1 → 7.0.1-beta.2
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 +36 -18
- package/lib/AsyncUserSelect/index.js +29 -18
- package/lib/DTableCustomizeSearchInput/index.css +81 -0
- package/lib/DTableCustomizeSearchInput/index.js +136 -0
- package/lib/DTableCustomizeSelect/index.css +120 -42
- package/lib/DTableCustomizeSelect/index.js +9 -4
- package/lib/DTableFiltersPopover/utils/filter-item-utils.js +7 -19
- package/lib/DTableFiltersPopover/widgets/collaborator-filter/index.js +5 -9
- package/lib/DTableFiltersPopover/widgets/filter-item.js +15 -7
- package/lib/DTableFiltersPopover/widgets/filter-list/index.css +3 -3
- package/lib/DTableSelect/dtable-select-label.css +4 -4
- package/lib/DTableSelect/dtable-select-label.js +1 -1
- package/lib/DTableSelect/index.js +3 -3
- package/lib/DTableSelect/select-dropdown-indicator/index.css +16 -0
- package/lib/DTableSelect/select-dropdown-indicator/index.js +24 -0
- package/lib/DTableSelect/user-select.css +7 -46
- package/lib/DTableSelect/utils.js +165 -79
- package/lib/ImageEditor/images-previewer/image-preview/index.js +1 -2
- package/lib/ImageEditor/pc-editor/addition-previewer/local-image-addition/index.js +2 -2
- package/lib/ImageFormatter/images-lazy-load.js +2 -2
- package/lib/ImageFormatter/index.js +2 -5
- package/lib/ImagePreviewerLightbox/index.js +1 -2
- package/lib/ImageThumbnail/index.js +1 -2
- package/lib/SelectOptionGroup/KeyCodes.js +96 -4
- package/lib/SelectOptionGroup/index.css +74 -52
- package/lib/SelectOptionGroup/index.js +35 -26
- package/lib/SelectOptionGroup/option.js +16 -4
- package/lib/assets/icons/close.svg +1 -0
- package/lib/assets/icons/down.svg +3 -0
- package/lib/index.js +3 -10
- package/lib/utils/url.js +35 -10
- package/package.json +2 -2
- package/lib/DTableCustomizeCollaboratorSelect/index.css +0 -86
- package/lib/DTableCustomizeCollaboratorSelect/index.js +0 -158
- package/lib/DTableGroupSelect/index.css +0 -96
- package/lib/DTableGroupSelect/index.js +0 -131
- package/lib/DTableGroupSelect/option.js +0 -42
- package/lib/DTableGroupSelect/select-option-group.css +0 -54
- package/lib/DTableGroupSelect/select-option-group.js +0 -227
|
@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
});
|
|
8
8
|
exports.default = void 0;
|
|
9
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
-
var _dtableUtils = require("dtable-utils");
|
|
11
10
|
var _DTableToolTip = _interopRequireDefault(require("../../../DTableToolTip"));
|
|
12
11
|
var _DeleteTip = _interopRequireDefault(require("../../../DeleteTip"));
|
|
13
12
|
var _url = require("../../../utils/url");
|
|
@@ -100,7 +99,7 @@ class ImagePreviewer extends _react.default.Component {
|
|
|
100
99
|
});
|
|
101
100
|
return;
|
|
102
101
|
}
|
|
103
|
-
let imageThumbnailUrl = (0,
|
|
102
|
+
let imageThumbnailUrl = (0, _url.getImageThumbnailUrl)(imageItemUrl, config);
|
|
104
103
|
(0, _url.checkImgExists)(imageThumbnailUrl).then(() => {
|
|
105
104
|
this.setState({
|
|
106
105
|
imageThumbnailUrl: imageThumbnailUrl
|
|
@@ -8,8 +8,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
8
8
|
exports.default = void 0;
|
|
9
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
10
|
var _reactstrap = require("reactstrap");
|
|
11
|
-
var _dtableUtils = require("dtable-utils");
|
|
12
11
|
var _UploadProgress = _interopRequireDefault(require("../../../../UploadProgress"));
|
|
12
|
+
var _url = require("../../../../utils/url");
|
|
13
13
|
var _FileUploader = _interopRequireDefault(require("../../../../FileUploader"));
|
|
14
14
|
var _lang = require("../../../../lang");
|
|
15
15
|
require("./index.css");
|
|
@@ -163,7 +163,7 @@ class LocalImageAddition extends _react.default.Component {
|
|
|
163
163
|
const uploadLocalImageValue = this.props.uploadLocalImageValue;
|
|
164
164
|
let uploadedFileList = [];
|
|
165
165
|
uploadedFileList = uploadLocalImageValue.length > 0 && uploadLocalImageValue.map((imgSrc, index) => {
|
|
166
|
-
let imageThumbnailUrl = (0,
|
|
166
|
+
let imageThumbnailUrl = (0, _url.getImageThumbnailUrl)(imgSrc);
|
|
167
167
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
168
168
|
className: "dtable-ui-image-wrapper",
|
|
169
169
|
onMouseEnter: event => this.showDeleteIcon(event, index),
|
|
@@ -8,8 +8,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
8
8
|
exports.default = void 0;
|
|
9
9
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
|
|
10
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
-
var _dtableUtils = require("dtable-utils");
|
|
12
11
|
var _Loading = _interopRequireDefault(require("../Loading"));
|
|
12
|
+
var _url = require("../utils/url");
|
|
13
13
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
14
14
|
const ImagesLazyLoad = _ref => {
|
|
15
15
|
let images = _ref.images,
|
|
@@ -52,7 +52,7 @@ const ImagesLazyLoad = _ref => {
|
|
|
52
52
|
setLoadedImages([]);
|
|
53
53
|
setLoadedCount(0);
|
|
54
54
|
currentImages.forEach((item, index) => {
|
|
55
|
-
const url = (0,
|
|
55
|
+
const url = (0, _url.getImageThumbnailUrl)(item, {
|
|
56
56
|
server,
|
|
57
57
|
dtableUuid
|
|
58
58
|
});
|
|
@@ -8,9 +8,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
8
8
|
exports.default = void 0;
|
|
9
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
10
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
11
|
-
var _dtableUtils = require("dtable-utils");
|
|
12
11
|
var _imagesLazyLoad = _interopRequireDefault(require("./images-lazy-load"));
|
|
13
12
|
var _ImagePreviewerLightbox = _interopRequireDefault(require("../ImagePreviewerLightbox"));
|
|
13
|
+
var _url = require("../utils/url");
|
|
14
14
|
require("./index.css");
|
|
15
15
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
16
16
|
class ImageFormatter extends _react.default.Component {
|
|
@@ -80,10 +80,7 @@ class ImageFormatter extends _react.default.Component {
|
|
|
80
80
|
}
|
|
81
81
|
if (isSample) {
|
|
82
82
|
let item = value[0];
|
|
83
|
-
let url = (0,
|
|
84
|
-
server,
|
|
85
|
-
dtableUuid
|
|
86
|
-
});
|
|
83
|
+
let url = (0, _url.getImageThumbnailUrl)(item, server);
|
|
87
84
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
88
85
|
className: className,
|
|
89
86
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
|
|
@@ -9,7 +9,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm
|
|
|
9
9
|
var _react = _interopRequireDefault(require("react"));
|
|
10
10
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
11
11
|
var _reactImageLightbox = _interopRequireDefault(require("@seafile/react-image-lightbox"));
|
|
12
|
-
var _dtableUtils = require("dtable-utils");
|
|
13
12
|
var _url = require("../utils/url");
|
|
14
13
|
var _lang = require("../lang");
|
|
15
14
|
require("@seafile/react-image-lightbox/style.css");
|
|
@@ -71,7 +70,7 @@ function ImagePreviewerLightbox(props) {
|
|
|
71
70
|
const canRotateImage = onRotateImage && !readOnly && !['gif', 'heic', 'heif'].includes((0, _url.getFileSuffix)(URL)) && (0, _url.isInternalImg)(URL, server);
|
|
72
71
|
let mainSrc = URL;
|
|
73
72
|
if ((0, _url.needUseThumbnailImage)(URL)) {
|
|
74
|
-
mainSrc = (0,
|
|
73
|
+
mainSrc = (0, _url.getImageThumbnailUrl)(URL, {
|
|
75
74
|
server,
|
|
76
75
|
dtableUuid,
|
|
77
76
|
workspaceID,
|
|
@@ -8,7 +8,6 @@ exports.default = void 0;
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
var _DTableToolTip = _interopRequireDefault(require("../DTableToolTip"));
|
|
10
10
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
11
|
-
var _dtableUtils = require("dtable-utils");
|
|
12
11
|
var _DeleteTip = _interopRequireDefault(require("../DeleteTip"));
|
|
13
12
|
var _url = require("../utils/url");
|
|
14
13
|
var _lang = require("../lang");
|
|
@@ -25,7 +24,7 @@ class ImageThumbnail extends _react.default.Component {
|
|
|
25
24
|
});
|
|
26
25
|
return;
|
|
27
26
|
}
|
|
28
|
-
const imageThumbnailUrl = (0,
|
|
27
|
+
const imageThumbnailUrl = (0, _url.getImageThumbnailUrl)(src);
|
|
29
28
|
(0, _url.checkImgExists)(imageThumbnailUrl).then(() => {
|
|
30
29
|
this.setState({
|
|
31
30
|
imageThumbnailUrl
|
|
@@ -5,13 +5,105 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
const KeyCodes = {
|
|
8
|
+
Backspace: 8,
|
|
9
|
+
Tab: 9,
|
|
10
|
+
Enter: 13,
|
|
11
|
+
Shift: 16,
|
|
12
|
+
Ctrl: 17,
|
|
13
|
+
Alt: 18,
|
|
14
|
+
PauseBreak: 19,
|
|
15
|
+
CapsLock: 20,
|
|
16
|
+
Escape: 27,
|
|
17
|
+
Esc: 27,
|
|
18
|
+
Space: 32,
|
|
19
|
+
PageUp: 33,
|
|
20
|
+
PageDown: 34,
|
|
21
|
+
End: 35,
|
|
22
|
+
Home: 36,
|
|
8
23
|
LeftArrow: 37,
|
|
9
24
|
UpArrow: 38,
|
|
10
25
|
RightArrow: 39,
|
|
11
26
|
DownArrow: 40,
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
27
|
+
Insert: 45,
|
|
28
|
+
Delete: 46,
|
|
29
|
+
0: 48,
|
|
30
|
+
1: 49,
|
|
31
|
+
2: 50,
|
|
32
|
+
3: 51,
|
|
33
|
+
4: 52,
|
|
34
|
+
5: 53,
|
|
35
|
+
6: 54,
|
|
36
|
+
7: 55,
|
|
37
|
+
8: 56,
|
|
38
|
+
9: 57,
|
|
39
|
+
a: 65,
|
|
40
|
+
b: 66,
|
|
41
|
+
c: 67,
|
|
42
|
+
d: 68,
|
|
43
|
+
e: 69,
|
|
44
|
+
f: 70,
|
|
45
|
+
g: 71,
|
|
46
|
+
h: 72,
|
|
47
|
+
i: 73,
|
|
48
|
+
j: 74,
|
|
49
|
+
k: 75,
|
|
50
|
+
l: 76,
|
|
51
|
+
m: 77,
|
|
52
|
+
n: 78,
|
|
53
|
+
o: 79,
|
|
54
|
+
p: 80,
|
|
55
|
+
q: 81,
|
|
56
|
+
r: 82,
|
|
57
|
+
s: 83,
|
|
58
|
+
t: 84,
|
|
59
|
+
u: 85,
|
|
60
|
+
v: 86,
|
|
61
|
+
w: 87,
|
|
62
|
+
x: 88,
|
|
63
|
+
y: 89,
|
|
64
|
+
z: 90,
|
|
65
|
+
LeftWindowKey: 91,
|
|
66
|
+
RightWindowKey: 92,
|
|
67
|
+
SelectKey: 93,
|
|
68
|
+
NumPad0: 96,
|
|
69
|
+
NumPad1: 97,
|
|
70
|
+
NumPad2: 98,
|
|
71
|
+
NumPad3: 99,
|
|
72
|
+
NumPad4: 100,
|
|
73
|
+
NumPad5: 101,
|
|
74
|
+
NumPad6: 102,
|
|
75
|
+
NumPad7: 103,
|
|
76
|
+
NumPad8: 104,
|
|
77
|
+
NumPad9: 105,
|
|
78
|
+
Multiply: 106,
|
|
79
|
+
Add: 107,
|
|
80
|
+
Subtract: 109,
|
|
81
|
+
DecimalPoint: 110,
|
|
82
|
+
Divide: 111,
|
|
83
|
+
F1: 112,
|
|
84
|
+
F2: 113,
|
|
85
|
+
F3: 114,
|
|
86
|
+
F4: 115,
|
|
87
|
+
F5: 116,
|
|
88
|
+
F6: 117,
|
|
89
|
+
F7: 118,
|
|
90
|
+
F8: 119,
|
|
91
|
+
F9: 120,
|
|
92
|
+
F10: 121,
|
|
93
|
+
F12: 123,
|
|
94
|
+
NumLock: 144,
|
|
95
|
+
ScrollLock: 145,
|
|
96
|
+
SemiColon: 186,
|
|
97
|
+
EqualSign: 187,
|
|
98
|
+
Comma: 188,
|
|
99
|
+
Dash: 189,
|
|
100
|
+
Period: 190,
|
|
101
|
+
ForwardSlash: 191,
|
|
102
|
+
GraveAccent: 192,
|
|
103
|
+
OpenBracket: 219,
|
|
104
|
+
BackSlash: 220,
|
|
105
|
+
CloseBracket: 221,
|
|
106
|
+
SingleQuote: 222,
|
|
107
|
+
ChineseInputMethod: 229
|
|
16
108
|
};
|
|
17
109
|
var _default = exports.default = KeyCodes;
|
|
@@ -1,12 +1,10 @@
|
|
|
1
|
-
.option-group {
|
|
2
|
-
display: flex;
|
|
3
|
-
flex-direction: column;
|
|
1
|
+
.seatable-option-group {
|
|
4
2
|
position: absolute;
|
|
5
3
|
left: 0;
|
|
6
4
|
min-height: 60px;
|
|
7
5
|
min-width: 100%;
|
|
8
6
|
max-width: 15rem;
|
|
9
|
-
padding: 0
|
|
7
|
+
padding-top: 0;
|
|
10
8
|
box-shadow: var(--bs-border-secondary-shadow);
|
|
11
9
|
background: #fff;
|
|
12
10
|
border: 1px solid var(--bs-border-secondary-color);
|
|
@@ -14,34 +12,65 @@
|
|
|
14
12
|
z-index: 10001;
|
|
15
13
|
}
|
|
16
14
|
|
|
17
|
-
.
|
|
15
|
+
.seatable-option-group-search {
|
|
16
|
+
border-bottom: 1px solid var(--bs-border-color);
|
|
17
|
+
height: 32px;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.seatable-option-group .seatable-option-group-search {
|
|
18
21
|
width: 100%;
|
|
19
22
|
min-width: 170px;
|
|
20
|
-
|
|
23
|
+
position: relative;
|
|
24
|
+
padding: 0;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.seatable-option-group .seatable-option-group-search .form-control {
|
|
28
|
+
height: 100%;
|
|
29
|
+
border: none;
|
|
30
|
+
padding: .375rem 1rem;
|
|
31
|
+
cursor: pointer;
|
|
21
32
|
}
|
|
22
33
|
|
|
23
|
-
.option-group-search .form-control {
|
|
24
|
-
|
|
34
|
+
.seatable-option-group .seatable-option-group-search .form-control:focus {
|
|
35
|
+
outline: none;
|
|
36
|
+
box-shadow: none;
|
|
25
37
|
}
|
|
26
38
|
|
|
27
|
-
.option-group .
|
|
39
|
+
.seatable-option-group-search .input-icon-addon,
|
|
40
|
+
.seatable-option-group .seatable-option-group-search .input-icon-addon {
|
|
41
|
+
z-index: 1;
|
|
42
|
+
pointer-events: auto;
|
|
43
|
+
min-width: 2.75rem !important;
|
|
44
|
+
width: 40px;
|
|
45
|
+
height: 32px;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.seatable-option-group .seatable-option-group-search .input-icon-addon svg {
|
|
49
|
+
color: var(--bs-body-secondary-color);
|
|
50
|
+
cursor: pointer;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.seatable-option-group .none-search-result {
|
|
28
54
|
height: 100px;
|
|
29
55
|
width: 100%;
|
|
30
|
-
padding:
|
|
31
|
-
color:
|
|
56
|
+
padding: 8px;
|
|
57
|
+
color: var(--bs-body-secondary-color);
|
|
32
58
|
}
|
|
33
59
|
|
|
34
|
-
.option-group .option-group-content {
|
|
35
|
-
flex: 1;
|
|
60
|
+
.seatable-option-group .seatable-option-group-content {
|
|
36
61
|
max-height: 252px;
|
|
37
62
|
overflow-y: auto;
|
|
63
|
+
padding: 8px;
|
|
38
64
|
}
|
|
39
65
|
|
|
40
|
-
.option {
|
|
41
|
-
|
|
66
|
+
.seatable-select-option {
|
|
67
|
+
position: relative;
|
|
68
|
+
display: flex;
|
|
69
|
+
justify-content: space-between;
|
|
70
|
+
align-items: center;
|
|
42
71
|
width: 100%;
|
|
43
72
|
line-height: 24px;
|
|
44
|
-
padding: 0.25rem
|
|
73
|
+
padding: 0.25rem 8px;
|
|
45
74
|
clear: both;
|
|
46
75
|
font-weight: 400;
|
|
47
76
|
text-align: inherit;
|
|
@@ -50,64 +79,57 @@
|
|
|
50
79
|
overflow: hidden;
|
|
51
80
|
text-overflow: ellipsis;
|
|
52
81
|
white-space: nowrap;
|
|
82
|
+
border-radius: 4px;
|
|
83
|
+
height: 32px;
|
|
53
84
|
}
|
|
54
85
|
|
|
55
|
-
.option.option-active {
|
|
56
|
-
background-color: #20a0ff;
|
|
57
|
-
color: #fff;
|
|
86
|
+
.seatable-select-option.seatable-select-option-active {
|
|
58
87
|
cursor: pointer;
|
|
88
|
+
background-color: var(--bs-btn-background-hover);
|
|
59
89
|
}
|
|
60
90
|
|
|
61
|
-
.option
|
|
62
|
-
|
|
63
|
-
.option.option-active .select-option-name {
|
|
64
|
-
color: #fff;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.option.option-active .header-icon .dtable-font,
|
|
68
|
-
.option.option-active .header-icon .multicolor-icon {
|
|
69
|
-
color: #fff;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.option:not(.option-active):hover .header-icon .dtable-font,
|
|
73
|
-
.option:not(.option-active):hover .header-icon .multicolor-icon {
|
|
74
|
-
color: #aaa;
|
|
91
|
+
.seatable-select-option .select-option-name .multiple-select-option {
|
|
92
|
+
margin: 0;
|
|
75
93
|
}
|
|
76
94
|
|
|
77
|
-
.
|
|
78
|
-
|
|
95
|
+
.seatable-option-group .dtable-icon-check {
|
|
96
|
+
color: var(--bs-icon-color);
|
|
79
97
|
}
|
|
80
98
|
|
|
81
|
-
.
|
|
82
|
-
|
|
99
|
+
.select-label {
|
|
100
|
+
width: 100%;
|
|
83
101
|
}
|
|
84
102
|
|
|
85
|
-
.option-group-
|
|
86
|
-
.option-group-
|
|
103
|
+
.seatable-option-group-selector-multiple-select .select-label,
|
|
104
|
+
.seatable-option-group-selector-single-select .select-option-name,
|
|
105
|
+
.seatable-option-group-selector-multiple-select .multiple-option-name,
|
|
106
|
+
.selector-group-select .group-option-name {
|
|
87
107
|
display: flex;
|
|
88
108
|
align-items: center;
|
|
89
109
|
justify-content: space-between;
|
|
110
|
+
width: 100%;
|
|
90
111
|
}
|
|
91
112
|
|
|
92
|
-
.option-group-
|
|
113
|
+
.seatable-option-group-selector-multiple-select .multiple-check-icon,
|
|
114
|
+
.selector-group-select .group-check-icon {
|
|
93
115
|
display: inline-flex;
|
|
94
|
-
width: 20px;
|
|
95
116
|
text-align: center;
|
|
117
|
+
color: var(--bs-icon-color);
|
|
96
118
|
}
|
|
97
119
|
|
|
98
|
-
.
|
|
99
|
-
|
|
100
|
-
|
|
120
|
+
.selector-group-select .multiple-check-icon .dtable-icon-check,
|
|
121
|
+
.seatable-option-group-selector-multiple-select .multiple-check-icon .dtable-icon-check,
|
|
122
|
+
.selector-group-select .group-check-icon .dtable-icon-check {
|
|
123
|
+
font-size: 14px;
|
|
101
124
|
}
|
|
102
125
|
|
|
103
|
-
.
|
|
104
|
-
.
|
|
105
|
-
|
|
106
|
-
.option-group-dtable-ui-multiple-select-selector .option.option-active {
|
|
107
|
-
background-color: #f5f5f5;
|
|
126
|
+
.selector-group-select .seatable-select-option:hover,
|
|
127
|
+
.selector-group-select .seatable-select-option.seatable-select-option-active {
|
|
128
|
+
background-color: var(--bs-btn-background-hover);
|
|
108
129
|
}
|
|
109
130
|
|
|
110
|
-
.
|
|
111
|
-
|
|
112
|
-
|
|
131
|
+
.select-label .header-icon {
|
|
132
|
+
display: inline-block;
|
|
133
|
+
padding: 0 .5rem 0 0!important;
|
|
134
|
+
margin-left: 0 !important;
|
|
113
135
|
}
|
|
@@ -8,10 +8,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
8
8
|
exports.default = void 0;
|
|
9
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
10
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
11
|
+
var _ClickOutside = _interopRequireDefault(require("../ClickOutside"));
|
|
12
|
+
var _DTableCustomizeSearchInput = _interopRequireDefault(require("../DTableCustomizeSearchInput"));
|
|
11
13
|
var _option = _interopRequireDefault(require("./option"));
|
|
12
|
-
var _DTableSearchInput = _interopRequireDefault(require("../DTableSearchInput"));
|
|
13
14
|
var _KeyCodes = _interopRequireDefault(require("./KeyCodes"));
|
|
14
|
-
var _ClickOutside = _interopRequireDefault(require("../ClickOutside"));
|
|
15
15
|
require("./index.css");
|
|
16
16
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
17
17
|
const OPTION_HEIGHT = 32;
|
|
@@ -19,23 +19,17 @@ class SelectOptionGroup extends _react.Component {
|
|
|
19
19
|
constructor(props) {
|
|
20
20
|
super(props);
|
|
21
21
|
this.resetMenuStyle = () => {
|
|
22
|
-
if (!this.optionGroupRef) return;
|
|
23
22
|
const _this$props = this.props,
|
|
24
23
|
isInModal = _this$props.isInModal,
|
|
25
24
|
position = _this$props.position;
|
|
26
25
|
const _this$optionGroupRef$ = this.optionGroupRef.getBoundingClientRect(),
|
|
27
26
|
top = _this$optionGroupRef$.top,
|
|
28
|
-
height = _this$optionGroupRef$.height
|
|
29
|
-
width = _this$optionGroupRef$.width;
|
|
27
|
+
height = _this$optionGroupRef$.height;
|
|
30
28
|
if (isInModal) {
|
|
31
29
|
if (position.y + position.height + height > window.innerHeight) {
|
|
32
30
|
this.optionGroupRef.style.top = position.y - height + 'px';
|
|
33
31
|
}
|
|
34
|
-
if (position && position.x + width > window.innerWidth) {
|
|
35
|
-
this.optionGroupRef.style.left = window.innerWidth - width - 10 + 'px';
|
|
36
|
-
}
|
|
37
32
|
this.optionGroupRef.style.opacity = 1;
|
|
38
|
-
this.searchInputRef.current && this.searchInputRef.current.inputRef.focus();
|
|
39
33
|
} else {
|
|
40
34
|
if (height + top > window.innerHeight) {
|
|
41
35
|
const borderWidth = 2;
|
|
@@ -85,10 +79,6 @@ class SelectOptionGroup extends _react.Component {
|
|
|
85
79
|
if (isInModal) {
|
|
86
80
|
e.stopPropagation();
|
|
87
81
|
e.nativeEvent.stopImmediatePropagation();
|
|
88
|
-
|
|
89
|
-
// ClickOutside set isClickedInside to true via mouse down capture first
|
|
90
|
-
// Set isClickedInside to false after mouse down
|
|
91
|
-
this.clickOutsideRef && this.clickOutsideRef.setClickedInsideStatus(false);
|
|
92
82
|
}
|
|
93
83
|
};
|
|
94
84
|
this.scrollContent = () => {
|
|
@@ -127,10 +117,17 @@ class SelectOptionGroup extends _react.Component {
|
|
|
127
117
|
});
|
|
128
118
|
}
|
|
129
119
|
};
|
|
120
|
+
this.clearSearch = () => {
|
|
121
|
+
this.setState({
|
|
122
|
+
searchVal: '',
|
|
123
|
+
activeIndex: -1
|
|
124
|
+
});
|
|
125
|
+
};
|
|
130
126
|
this.renderOptGroup = searchVal => {
|
|
131
127
|
let _this$props2 = this.props,
|
|
132
128
|
noOptionsPlaceholder = _this$props2.noOptionsPlaceholder,
|
|
133
|
-
onSelectOption = _this$props2.onSelectOption
|
|
129
|
+
onSelectOption = _this$props2.onSelectOption,
|
|
130
|
+
value = _this$props2.value;
|
|
134
131
|
this.filterOptions = this.props.getFilterOptions(searchVal);
|
|
135
132
|
if (this.filterOptions.length === 0) {
|
|
136
133
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
@@ -141,7 +138,16 @@ class SelectOptionGroup extends _react.Component {
|
|
|
141
138
|
return this.filterOptions.map((opt, i) => {
|
|
142
139
|
let key = opt.value.column ? opt.value.column.key : i;
|
|
143
140
|
let isActive = this.state.activeIndex === i;
|
|
144
|
-
|
|
141
|
+
let isSelected = false;
|
|
142
|
+
if (value) {
|
|
143
|
+
// Handle both single value and array of values
|
|
144
|
+
if (Array.isArray(value.value)) {
|
|
145
|
+
isSelected = value.value.includes(opt.value);
|
|
146
|
+
} else {
|
|
147
|
+
isSelected = opt.value === value.value || JSON.stringify(opt.value) === JSON.stringify(value.value);
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_option.default, {
|
|
145
151
|
index: i,
|
|
146
152
|
isActive: isActive,
|
|
147
153
|
value: opt.value,
|
|
@@ -149,8 +155,13 @@ class SelectOptionGroup extends _react.Component {
|
|
|
149
155
|
changeIndex: this.changeIndex,
|
|
150
156
|
supportMultipleSelect: this.props.supportMultipleSelect,
|
|
151
157
|
disableHover: this.state.disableHover,
|
|
152
|
-
children:
|
|
153
|
-
|
|
158
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
159
|
+
className: "select-label",
|
|
160
|
+
children: opt.label
|
|
161
|
+
}), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
|
|
162
|
+
className: "dtable-font dtable-icon-check seatable-check-color"
|
|
163
|
+
})]
|
|
164
|
+
}, key);
|
|
154
165
|
});
|
|
155
166
|
};
|
|
156
167
|
this.state = {
|
|
@@ -160,7 +171,6 @@ class SelectOptionGroup extends _react.Component {
|
|
|
160
171
|
};
|
|
161
172
|
this.filterOptions = null;
|
|
162
173
|
this.timer = null;
|
|
163
|
-
this.searchInputRef = /*#__PURE__*/_react.default.createRef();
|
|
164
174
|
}
|
|
165
175
|
componentDidMount() {
|
|
166
176
|
window.addEventListener('keydown', this.onHotKey);
|
|
@@ -212,12 +222,10 @@ class SelectOptionGroup extends _react.Component {
|
|
|
212
222
|
}
|
|
213
223
|
style.top = style.top + 4;
|
|
214
224
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickOutside.default, {
|
|
215
|
-
ref: ref => this.clickOutsideRef = ref,
|
|
216
225
|
onClickOutside: this.props.onClickOutside,
|
|
217
226
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
218
|
-
className: (0, _classnames.default)('option-group', className ? 'option-group-' + className : '', {
|
|
219
|
-
'pt-0': isShowSelected
|
|
220
|
-
'create-new-option-group': addOptionAble
|
|
227
|
+
className: (0, _classnames.default)('seatable-option-group', className ? 'seatable-option-group-' + className : '', {
|
|
228
|
+
'pt-0': isShowSelected
|
|
221
229
|
}),
|
|
222
230
|
ref: ref => this.optionGroupRef = ref,
|
|
223
231
|
style: style,
|
|
@@ -227,16 +235,17 @@ class SelectOptionGroup extends _react.Component {
|
|
|
227
235
|
onClick: e => e.stopPropagation(),
|
|
228
236
|
children: value.label || ''
|
|
229
237
|
}), searchable && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
230
|
-
className: "option-group-search",
|
|
231
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
238
|
+
className: "seatable-option-group-search",
|
|
239
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableCustomizeSearchInput.default, {
|
|
232
240
|
className: "option-search-control",
|
|
233
241
|
placeholder: searchPlaceholder,
|
|
234
242
|
onChange: this.onChangeSearch,
|
|
243
|
+
clearValue: this.clearSearch,
|
|
235
244
|
autoFocus: true,
|
|
236
|
-
|
|
245
|
+
isClearable: true
|
|
237
246
|
})
|
|
238
247
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
239
|
-
className: "option-group-content",
|
|
248
|
+
className: "seatable-option-group-content",
|
|
240
249
|
ref: ref => this.optionGroupContentRef = ref,
|
|
241
250
|
children: this.renderOptGroup(searchVal)
|
|
242
251
|
}), addOptionAble && AddOption]
|
|
@@ -1,20 +1,22 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
3
4
|
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
5
|
Object.defineProperty(exports, "__esModule", {
|
|
5
6
|
value: true
|
|
6
7
|
});
|
|
7
8
|
exports.default = void 0;
|
|
8
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
9
11
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
10
12
|
class Option extends _react.Component {
|
|
11
13
|
constructor() {
|
|
12
14
|
super(...arguments);
|
|
13
|
-
this.onSelectOption =
|
|
15
|
+
this.onSelectOption = event => {
|
|
14
16
|
if (this.props.supportMultipleSelect) {
|
|
15
17
|
event.stopPropagation();
|
|
16
18
|
}
|
|
17
|
-
this.props.onSelectOption(value, event);
|
|
19
|
+
this.props.onSelectOption(this.props.value, event);
|
|
18
20
|
};
|
|
19
21
|
this.onMouseEnter = () => {
|
|
20
22
|
if (!this.props.disableHover) {
|
|
@@ -26,11 +28,21 @@ class Option extends _react.Component {
|
|
|
26
28
|
this.props.changeIndex(-1);
|
|
27
29
|
}
|
|
28
30
|
};
|
|
31
|
+
this.onKeyDown = e => {
|
|
32
|
+
if (e.key === 'Enter' || e.key === 'Space') {
|
|
33
|
+
e.target.click();
|
|
34
|
+
}
|
|
35
|
+
};
|
|
29
36
|
}
|
|
30
37
|
render() {
|
|
31
38
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
32
|
-
className:
|
|
33
|
-
|
|
39
|
+
className: (0, _classnames.default)('seatable-select-option', {
|
|
40
|
+
'seatable-select-option-active': this.props.isActive
|
|
41
|
+
}),
|
|
42
|
+
tabIndex: "0",
|
|
43
|
+
role: "menuitem",
|
|
44
|
+
onClick: this.onSelectOption,
|
|
45
|
+
onKeyDown: this.onKeyDown,
|
|
34
46
|
onMouseEnter: this.onMouseEnter,
|
|
35
47
|
onMouseLeave: this.onMouseLeave,
|
|
36
48
|
children: this.props.children
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1718937171668" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18368" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M489.6 444.8l294.4-294.4 67.2 67.2-294.4 294.4 294.4 294.4-67.2 67.2-294.4-294.4-272 272-67.2-67.2 272-272-272-272 67.2-67.2z" p-id="18369" fill="currentColor"></path></svg>
|
package/lib/index.js
CHANGED
|
@@ -118,10 +118,10 @@ Object.defineProperty(exports, "DTableCustomFooter", {
|
|
|
118
118
|
return _DTableCustomFooter.default;
|
|
119
119
|
}
|
|
120
120
|
});
|
|
121
|
-
Object.defineProperty(exports, "
|
|
121
|
+
Object.defineProperty(exports, "DTableCustomizeSearchInput", {
|
|
122
122
|
enumerable: true,
|
|
123
123
|
get: function () {
|
|
124
|
-
return
|
|
124
|
+
return _DTableCustomizeSearchInput.default;
|
|
125
125
|
}
|
|
126
126
|
});
|
|
127
127
|
Object.defineProperty(exports, "DTableCustomizeSelect", {
|
|
@@ -154,12 +154,6 @@ Object.defineProperty(exports, "DTableFiltersPopover", {
|
|
|
154
154
|
return _DTableFiltersPopover.default;
|
|
155
155
|
}
|
|
156
156
|
});
|
|
157
|
-
Object.defineProperty(exports, "DTableGroupSelect", {
|
|
158
|
-
enumerable: true,
|
|
159
|
-
get: function () {
|
|
160
|
-
return _index.default;
|
|
161
|
-
}
|
|
162
|
-
});
|
|
163
157
|
Object.defineProperty(exports, "DTableIcon", {
|
|
164
158
|
enumerable: true,
|
|
165
159
|
get: function () {
|
|
@@ -718,12 +712,11 @@ var _DTableRadio = _interopRequireDefault(require("./DTableRadio"));
|
|
|
718
712
|
var _DTableCommonAddTool = _interopRequireDefault(require("./DTableCommonAddTool"));
|
|
719
713
|
var _NotificationPopover = _interopRequireDefault(require("./NotificationPopover"));
|
|
720
714
|
var _DTableSelect = _interopRequireDefault(require("./DTableSelect"));
|
|
721
|
-
var _index = _interopRequireDefault(require("./DTableGroupSelect/index"));
|
|
722
715
|
var _dtableSelectLabel = _interopRequireDefault(require("./DTableSelect/dtable-select-label"));
|
|
723
716
|
var _DTableSwitch = _interopRequireDefault(require("./DTableSwitch"));
|
|
724
717
|
var _DTableCustomizeSelect = _interopRequireDefault(require("./DTableCustomizeSelect"));
|
|
725
|
-
var _DTableCustomizeCollaboratorSelect = _interopRequireDefault(require("./DTableCustomizeCollaboratorSelect"));
|
|
726
718
|
var _DTableSearchInput = _interopRequireDefault(require("./DTableSearchInput"));
|
|
719
|
+
var _DTableCustomizeSearchInput = _interopRequireDefault(require("./DTableCustomizeSearchInput"));
|
|
727
720
|
var _DTableColorPicker = _interopRequireDefault(require("./DTableColorPicker"));
|
|
728
721
|
var _ModalPortal = _interopRequireDefault(require("./ModalPortal"));
|
|
729
722
|
var _RoleStatusEditor = _interopRequireDefault(require("./RoleStatusEditor"));
|