dtable-ui-component 6.0.110-oot.3 → 6.0.110-oot.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/lib/DTableCustomizeCollaboratorSelect/index.js +20 -2
- package/lib/DTableCustomizeSearchInput/index.css +82 -0
- package/lib/{DTableCustomizeSelect/select-option-group/search-input.js → DTableCustomizeSearchInput/index.js} +12 -6
- package/lib/DTableCustomizeSelect/index.css +18 -2
- package/lib/DTableCustomizeSelect/index.js +7 -2
- package/lib/DTableCustomizeSelect/select-option-group/index.css +15 -27
- package/lib/DTableCustomizeSelect/select-option-group/index.js +12 -3
- package/lib/DTableGroupSelect/index.css +2 -3
- package/lib/DTableGroupSelect/select-option-group.css +1 -4
- package/lib/DTableGroupSelect/select-option-group.js +7 -20
- package/lib/DTableSelect/index.js +39 -22
- package/lib/DTableSelect/select-dropdown-indicator/index.js +4 -2
- package/lib/DTableSelect/select-style.js +9 -6
- package/lib/SelectOptionGroup/index.css +2 -2
- package/lib/assets/icons/down.svg +3 -0
- package/lib/index.js +7 -0
- package/package.json +1 -1
|
@@ -32,6 +32,22 @@ class CollaboratorSelect extends _react.Component {
|
|
|
32
32
|
isShowSelectOptions: !this.state.isShowSelectOptions
|
|
33
33
|
});
|
|
34
34
|
};
|
|
35
|
+
this.onClick = event => {
|
|
36
|
+
const target = event.target;
|
|
37
|
+
const name = target.className;
|
|
38
|
+
const {
|
|
39
|
+
isShowSelectOptions
|
|
40
|
+
} = this.state;
|
|
41
|
+
if (!isShowSelectOptions || name === 'select-placeholder' || name.includes('icon-fork-number') || this.selector.contains(target)) {
|
|
42
|
+
return;
|
|
43
|
+
}
|
|
44
|
+
const {
|
|
45
|
+
isUsePopover
|
|
46
|
+
} = this.props;
|
|
47
|
+
if (isUsePopover && !this.collaboratorSelectPopoverRef.contains(target) || !isUsePopover && !this.selector.contains(target)) {
|
|
48
|
+
this.closeSelect();
|
|
49
|
+
}
|
|
50
|
+
};
|
|
35
51
|
this.onMousedown = event => {
|
|
36
52
|
const name = event.target.className;
|
|
37
53
|
if (name === 'select-placeholder' || name.includes('icon-fork-number')) {
|
|
@@ -81,7 +97,8 @@ class CollaboratorSelect extends _react.Component {
|
|
|
81
97
|
getFilterOptions: this.getFilterOptions,
|
|
82
98
|
supportMultipleSelect: this.props.supportMultipleSelect,
|
|
83
99
|
stopClickEvent: true,
|
|
84
|
-
isShowSelected: true
|
|
100
|
+
isShowSelected: true,
|
|
101
|
+
onClickOutside: this.onClick
|
|
85
102
|
});
|
|
86
103
|
}
|
|
87
104
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Popover, {
|
|
@@ -106,7 +123,8 @@ class CollaboratorSelect extends _react.Component {
|
|
|
106
123
|
getFilterOptions: this.getFilterOptions,
|
|
107
124
|
supportMultipleSelect: this.props.supportMultipleSelect,
|
|
108
125
|
stopClickEvent: true,
|
|
109
|
-
isShowSelected: true
|
|
126
|
+
isShowSelected: true,
|
|
127
|
+
onClickOutside: this.onClick
|
|
110
128
|
})
|
|
111
129
|
});
|
|
112
130
|
};
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
|
|
2
|
+
.seatable-search-input {
|
|
3
|
+
width: 100%;
|
|
4
|
+
padding: 6px 10px;
|
|
5
|
+
min-width: 170px;
|
|
6
|
+
position: relative;
|
|
7
|
+
padding: 0;
|
|
8
|
+
height: 32px;
|
|
9
|
+
border-bottom: 1px solid var(--bs-border-color);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.seatable-search-input .form-control {
|
|
13
|
+
height: 32px;
|
|
14
|
+
border: none;
|
|
15
|
+
padding: .375rem 0 .375rem 1rem;
|
|
16
|
+
cursor: pointer;
|
|
17
|
+
border-bottom: 1px solid var(--bs-border-color);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.seatable-search-input-multiple .form-control:focus,
|
|
21
|
+
.seatable-search-input .form-control:focus {
|
|
22
|
+
outline: none;
|
|
23
|
+
box-shadow: none;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.seatable-search-input .input-icon-addon {
|
|
27
|
+
z-index: 1;
|
|
28
|
+
pointer-events: auto;
|
|
29
|
+
min-width: 2.75rem !important;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.seatable-search-input .input-icon-addon svg {
|
|
33
|
+
color: var(--bs-body-secondary-color);
|
|
34
|
+
cursor: pointer;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.seatable-search-input .none-search-result {
|
|
38
|
+
height: 100px;
|
|
39
|
+
width: 100%;
|
|
40
|
+
padding: 10px;
|
|
41
|
+
color: var(--bs-body-secondary-color);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
.seatable-search-input-multiple {
|
|
46
|
+
width: 100%;
|
|
47
|
+
padding: 6px 10px;
|
|
48
|
+
min-width: 170px;
|
|
49
|
+
position: relative;
|
|
50
|
+
height: 40px;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.seatable-search-input-multiple .form-control {
|
|
54
|
+
height: 30px;
|
|
55
|
+
padding: .375rem 2.5rem .375rem 1rem;
|
|
56
|
+
cursor: pointer;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.seatable-search-input-multiple .input-icon-addon {
|
|
60
|
+
z-index: 1;
|
|
61
|
+
pointer-events: auto;
|
|
62
|
+
min-width: 2.75rem !important;
|
|
63
|
+
top: 10px;
|
|
64
|
+
height: 30px;
|
|
65
|
+
right: 10px;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.seatable-search-input-multiple .input-icon-addon svg {
|
|
69
|
+
color: var(--bs-body-secondary-color);
|
|
70
|
+
cursor: pointer;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.seatable-search-input-multiple .none-search-result {
|
|
74
|
+
height: 100px;
|
|
75
|
+
width: 100%;
|
|
76
|
+
padding: 10px;
|
|
77
|
+
color: var(--bs-body-secondary-color);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.multiple-selects-editor-list .seatable-search-input-multiple {
|
|
81
|
+
padding: 10px 10px 0;
|
|
82
|
+
}
|
|
@@ -8,9 +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 _DTableIcon = _interopRequireDefault(require("
|
|
11
|
+
var _DTableIcon = _interopRequireDefault(require("../DTableIcon"));
|
|
12
|
+
require("./index.css");
|
|
12
13
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
|
-
class
|
|
14
|
+
class DTableCustomizeSearchInput extends _react.Component {
|
|
14
15
|
constructor(props) {
|
|
15
16
|
super(props);
|
|
16
17
|
this.onCompositionStart = () => {
|
|
@@ -66,9 +67,13 @@ class SearchInput extends _react.Component {
|
|
|
66
67
|
if (!isClearable || !searchValue) return null;
|
|
67
68
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
68
69
|
className: (0, _classnames.default)('search-text-clear input-icon-addon', clearClassName),
|
|
70
|
+
style: {
|
|
71
|
+
fontSize: '12px'
|
|
72
|
+
},
|
|
69
73
|
onClick: this.clearSearch,
|
|
70
74
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
|
|
71
|
-
symbol: "close"
|
|
75
|
+
symbol: "close",
|
|
76
|
+
color: "var(--bs-icon-secondary-color)"
|
|
72
77
|
})
|
|
73
78
|
});
|
|
74
79
|
};
|
|
@@ -106,12 +111,13 @@ class SearchInput extends _react.Component {
|
|
|
106
111
|
onKeyDown,
|
|
107
112
|
disabled = false,
|
|
108
113
|
style = {},
|
|
109
|
-
isClearable
|
|
114
|
+
isClearable,
|
|
115
|
+
isMultiple = false
|
|
110
116
|
} = this.props;
|
|
111
117
|
const {
|
|
112
118
|
searchValue
|
|
113
119
|
} = this.state;
|
|
114
|
-
const inputWidth = isClearable && searchValue ? 'calc(100% - 40px)' : '100%';
|
|
120
|
+
const inputWidth = isClearable && searchValue && !isMultiple ? 'calc(100% - 40px)' : '100%';
|
|
115
121
|
style.width = inputWidth;
|
|
116
122
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
|
|
117
123
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
|
|
@@ -132,4 +138,4 @@ class SearchInput extends _react.Component {
|
|
|
132
138
|
});
|
|
133
139
|
}
|
|
134
140
|
}
|
|
135
|
-
var _default = exports.default =
|
|
141
|
+
var _default = exports.default = DTableCustomizeSearchInput;
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
.seatable-check-color {
|
|
53
|
-
color: var(--bs-icon-
|
|
53
|
+
color: var(--bs-icon-color);
|
|
54
54
|
}
|
|
55
55
|
|
|
56
56
|
.seatable-customize-select.dtable-ui-collaborator-selector .seatable-option-group .seatable-option-group-content,
|
|
@@ -83,10 +83,26 @@
|
|
|
83
83
|
border-radius: 3px;
|
|
84
84
|
}
|
|
85
85
|
|
|
86
|
-
|
|
87
86
|
.seatable-customize-select .select-placeholder {
|
|
88
87
|
line-height: 1;
|
|
89
88
|
font-size: 14px;
|
|
90
89
|
white-space: nowrap;
|
|
91
90
|
color: #868E96;
|
|
91
|
+
margin-right: 8px;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.seatable-customize-select .selected-option-show {
|
|
95
|
+
height: 20px;
|
|
96
|
+
line-height: 20px;
|
|
97
|
+
margin-right: 8px;
|
|
98
|
+
width: calc(100% - 20px);
|
|
99
|
+
white-space: nowrap;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.seatable-customize-select .multiple-check-icon,
|
|
103
|
+
.seatable-customize-select .header-icon .dtable-font,
|
|
104
|
+
.seatable-option-group .select-label .header-icon .dtable-font {
|
|
105
|
+
color: var(--bs-icon-secondary-color) !important;
|
|
106
|
+
cursor: default;
|
|
107
|
+
font-size: 14px;
|
|
92
108
|
}
|
|
@@ -11,6 +11,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
|
|
|
11
11
|
var _selectOptionGroup = _interopRequireDefault(require("./select-option-group"));
|
|
12
12
|
var _ModalPortal = _interopRequireDefault(require("../ModalPortal"));
|
|
13
13
|
var _util = require("./util");
|
|
14
|
+
var _DTableIcon = _interopRequireDefault(require("../DTableIcon"));
|
|
14
15
|
require("./index.css");
|
|
15
16
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
16
17
|
class DTableCustomizeSelect extends _react.Component {
|
|
@@ -115,8 +116,12 @@ class DTableCustomizeSelect extends _react.Component {
|
|
|
115
116
|
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
116
117
|
className: "select-placeholder",
|
|
117
118
|
children: placeholder
|
|
118
|
-
}), !isLocked && /*#__PURE__*/(0, _jsxRuntime.jsx)("
|
|
119
|
-
className: "
|
|
119
|
+
}), !isLocked && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
120
|
+
className: "d-inline-flex align-items-center",
|
|
121
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
|
|
122
|
+
symbol: "down",
|
|
123
|
+
color: "var(--bs-icon-color)"
|
|
124
|
+
})
|
|
120
125
|
})]
|
|
121
126
|
}), this.state.isShowSelectOptions && !isInModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectOptionGroup.default, {
|
|
122
127
|
value: value,
|
|
@@ -14,7 +14,6 @@
|
|
|
14
14
|
|
|
15
15
|
.seatable-option-group .seatable-option-group-search {
|
|
16
16
|
width: 100%;
|
|
17
|
-
padding: 6px 10px;
|
|
18
17
|
min-width: 170px;
|
|
19
18
|
position: relative;
|
|
20
19
|
padding: 0;
|
|
@@ -23,10 +22,11 @@
|
|
|
23
22
|
}
|
|
24
23
|
|
|
25
24
|
.seatable-option-group .seatable-option-group-search .form-control {
|
|
26
|
-
height:
|
|
25
|
+
height: 32px;
|
|
27
26
|
border: none;
|
|
28
|
-
padding: .375rem 1rem;
|
|
27
|
+
padding: .375rem 0 .375rem 1rem;
|
|
29
28
|
cursor: pointer;
|
|
29
|
+
border-bottom: 1px solid var(--bs-border-color);
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
.seatable-option-group .seatable-option-group-search .form-control:focus {
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
.seatable-option-group .seatable-option-group-search .input-icon-addon {
|
|
38
38
|
z-index: 1;
|
|
39
39
|
pointer-events: auto;
|
|
40
|
-
min-width: 2.
|
|
40
|
+
min-width: 2.75rem !important;
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
.seatable-option-group .seatable-option-group-search .input-icon-addon svg {
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
align-items: center;
|
|
66
66
|
width: 100%;
|
|
67
67
|
line-height: 24px;
|
|
68
|
-
padding: 0.25rem
|
|
68
|
+
padding: 0.25rem 8px;
|
|
69
69
|
clear: both;
|
|
70
70
|
font-weight: 400;
|
|
71
71
|
text-align: inherit;
|
|
@@ -75,6 +75,7 @@
|
|
|
75
75
|
text-overflow: ellipsis;
|
|
76
76
|
white-space: nowrap;
|
|
77
77
|
border-radius: 4px;
|
|
78
|
+
height: 32px;
|
|
78
79
|
}
|
|
79
80
|
|
|
80
81
|
.seatable-select-option.seatable-select-option-active {
|
|
@@ -82,32 +83,19 @@
|
|
|
82
83
|
background-color: rgba(0, 0, 0, 0.04);
|
|
83
84
|
}
|
|
84
85
|
|
|
85
|
-
/* .seatable-select-option .seatable-multicolor-icon-tick {
|
|
86
|
-
right: 10px;
|
|
87
|
-
position: absolute;
|
|
88
|
-
color: inherit;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
.seatable-select-option:not(.seatable-select-option-active):hover .header-icon .seatable-multicolor-icon {
|
|
92
|
-
fill: #aaa;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
.seatable-select-option:not(.seatable-select-option-active):hover .header-icon .sf2-icon-tick {
|
|
96
|
-
color: #aaa;
|
|
97
|
-
} */
|
|
98
|
-
|
|
99
|
-
.seatable-select-option .select-option-name .single-select-option {
|
|
100
|
-
margin: 0 0 0 12px;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
86
|
.seatable-select-option .select-option-name .multiple-select-option {
|
|
104
87
|
margin: 0;
|
|
105
88
|
}
|
|
106
89
|
|
|
107
90
|
.seatable-option-group .dtable-icon-check {
|
|
108
|
-
color:
|
|
91
|
+
color: var(--bs-icon-color);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.select-label {
|
|
95
|
+
width: 100%;
|
|
109
96
|
}
|
|
110
97
|
|
|
98
|
+
.seatable-option-group-selector-multiple-select .select-label,
|
|
111
99
|
.seatable-option-group-selector-single-select .select-option-name,
|
|
112
100
|
.seatable-option-group-selector-multiple-select .multiple-option-name {
|
|
113
101
|
display: flex;
|
|
@@ -119,11 +107,11 @@
|
|
|
119
107
|
display: inline-flex;
|
|
120
108
|
width: 20px;
|
|
121
109
|
text-align: center;
|
|
110
|
+
color: var(--bs-icon-color);
|
|
122
111
|
}
|
|
123
112
|
|
|
124
|
-
.seatable-option-group-selector-multiple-select .multiple-check-icon .dtable-icon-check
|
|
125
|
-
font-size:
|
|
126
|
-
color: #798d99;
|
|
113
|
+
.seatable-option-group-selector-multiple-select .multiple-check-icon .dtable-icon-check {
|
|
114
|
+
font-size: 14px;
|
|
127
115
|
}
|
|
128
116
|
|
|
129
117
|
.seatable-option-group-selector-single-select .seatable-select-option:hover,
|
|
@@ -9,7 +9,7 @@ exports.default = void 0;
|
|
|
9
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
10
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
11
11
|
var _ClickOutside = _interopRequireDefault(require("../../ClickOutside"));
|
|
12
|
-
var
|
|
12
|
+
var _DTableCustomizeSearchInput = _interopRequireDefault(require("../../DTableCustomizeSearchInput"));
|
|
13
13
|
var _option = _interopRequireDefault(require("./option"));
|
|
14
14
|
var _KeyCodes = _interopRequireDefault(require("./KeyCodes"));
|
|
15
15
|
require("./index.css");
|
|
@@ -144,7 +144,15 @@ class SelectOptionGroup extends _react.Component {
|
|
|
144
144
|
return this.filterOptions.map((opt, i) => {
|
|
145
145
|
let key = opt.value.column ? opt.value.column.key : i;
|
|
146
146
|
let isActive = this.state.activeIndex === i;
|
|
147
|
-
|
|
147
|
+
let isSelected = false;
|
|
148
|
+
if (value) {
|
|
149
|
+
// Handle both single value and array of values
|
|
150
|
+
if (Array.isArray(value.value)) {
|
|
151
|
+
isSelected = value.value.includes(opt.value);
|
|
152
|
+
} else {
|
|
153
|
+
isSelected = opt.value === value.value || JSON.stringify(opt.value) === JSON.stringify(value.value);
|
|
154
|
+
}
|
|
155
|
+
}
|
|
148
156
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_option.default, {
|
|
149
157
|
index: i,
|
|
150
158
|
isActive: isActive,
|
|
@@ -154,6 +162,7 @@ class SelectOptionGroup extends _react.Component {
|
|
|
154
162
|
supportMultipleSelect: this.props.supportMultipleSelect,
|
|
155
163
|
disableHover: this.state.disableHover,
|
|
156
164
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
165
|
+
className: "select-label",
|
|
157
166
|
children: opt.label
|
|
158
167
|
}), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
|
|
159
168
|
className: "dtable-font dtable-icon-check seatable-check-color"
|
|
@@ -232,7 +241,7 @@ class SelectOptionGroup extends _react.Component {
|
|
|
232
241
|
children: value.label || ''
|
|
233
242
|
}), searchable && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
234
243
|
className: "seatable-option-group-search",
|
|
235
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
244
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableCustomizeSearchInput.default, {
|
|
236
245
|
className: "option-search-control",
|
|
237
246
|
placeholder: searchPlaceholder,
|
|
238
247
|
onChange: this.onChangeSearch,
|
|
@@ -108,7 +108,7 @@
|
|
|
108
108
|
border: none;
|
|
109
109
|
border-bottom: 1px solid rgb(0 40 100 / 12%) !important;
|
|
110
110
|
border-radius: 4px 4px 0 0;
|
|
111
|
-
padding: .375rem 1rem
|
|
111
|
+
padding: .375rem 0 .375rem 1rem;
|
|
112
112
|
height: 32px;
|
|
113
113
|
}
|
|
114
114
|
|
|
@@ -119,7 +119,6 @@
|
|
|
119
119
|
}
|
|
120
120
|
|
|
121
121
|
.option-group-content .dtable-icon-check {
|
|
122
|
-
color:
|
|
122
|
+
color: var(--bs-icon-color);
|
|
123
123
|
font-size: 14px;
|
|
124
|
-
margin-left: 16px;
|
|
125
124
|
}
|
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
align-items: center;
|
|
15
15
|
justify-content: space-between;
|
|
16
16
|
padding: 0.25rem 8px;
|
|
17
|
+
border-radius: 4px;
|
|
17
18
|
}
|
|
18
19
|
|
|
19
20
|
.group-selector .option .dtable-icon-check{
|
|
@@ -31,10 +32,6 @@
|
|
|
31
32
|
cursor: pointer;
|
|
32
33
|
}
|
|
33
34
|
|
|
34
|
-
.group-selector .option.option-active .dtable-icon-check-mark {
|
|
35
|
-
color: #666666 !important;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
35
|
.group-selector .option .select-option-name .multiple-select-option {
|
|
39
36
|
margin: 0;
|
|
40
37
|
}
|
|
@@ -8,11 +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
|
|
11
|
+
var _DTableCustomizeSearchInput = _interopRequireDefault(require("../DTableCustomizeSearchInput"));
|
|
12
12
|
var _option = _interopRequireDefault(require("./option"));
|
|
13
13
|
var _KeyCodes = _interopRequireDefault(require("../SelectOptionGroup/KeyCodes"));
|
|
14
|
-
var _IconButton = _interopRequireDefault(require("../IconButton"));
|
|
15
|
-
var _lang = require("../lang");
|
|
16
14
|
require("./select-option-group.css");
|
|
17
15
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
18
16
|
const OPTION_HEIGHT = 32;
|
|
@@ -220,26 +218,15 @@ class SelectOptionGroup extends _react.Component {
|
|
|
220
218
|
style: style,
|
|
221
219
|
onMouseDown: this.onMouseDown,
|
|
222
220
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
223
|
-
className: "
|
|
224
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
225
|
-
className: "option-search-control",
|
|
221
|
+
className: "seatable-search-input",
|
|
222
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableCustomizeSearchInput.default, {
|
|
226
223
|
placeholder: searchPlaceholder,
|
|
227
224
|
onChange: this.onChangeSearch,
|
|
228
|
-
|
|
229
|
-
|
|
225
|
+
autoFocus: true,
|
|
226
|
+
value: searchVal,
|
|
230
227
|
clearValue: this.clearValue,
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
|
|
234
|
-
className: (0, _classnames.default)('select-search-text-clear input-icon-addon seatable-icon dtable-font dtable-icon-x'),
|
|
235
|
-
onClick: e => {
|
|
236
|
-
e.stopPropagation();
|
|
237
|
-
e.nativeEvent.stopImmediatePropagation();
|
|
238
|
-
props.clearValue();
|
|
239
|
-
}
|
|
240
|
-
});
|
|
241
|
-
}
|
|
242
|
-
}
|
|
228
|
+
isClearable: true,
|
|
229
|
+
isLeftIcon: true
|
|
243
230
|
})
|
|
244
231
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
245
232
|
className: "option-group-content",
|
|
@@ -89,9 +89,18 @@ class DTableSelect extends _react.default.Component {
|
|
|
89
89
|
};
|
|
90
90
|
this.handleSelectChange = val => {
|
|
91
91
|
const {
|
|
92
|
-
onChange
|
|
92
|
+
onChange,
|
|
93
|
+
isMulti
|
|
93
94
|
} = this.props;
|
|
94
|
-
|
|
95
|
+
|
|
96
|
+
// Handle multi-select case
|
|
97
|
+
if (isMulti) {
|
|
98
|
+
onChange(val || []);
|
|
99
|
+
return;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
// Handle single select case
|
|
103
|
+
if (!val || !val.value) {
|
|
95
104
|
onChange('');
|
|
96
105
|
return;
|
|
97
106
|
}
|
|
@@ -106,7 +115,7 @@ class DTableSelect extends _react.default.Component {
|
|
|
106
115
|
placeholder = '',
|
|
107
116
|
isMulti = false,
|
|
108
117
|
menuPosition,
|
|
109
|
-
isClearable =
|
|
118
|
+
isClearable = false,
|
|
110
119
|
noOptionsMessage = () => {
|
|
111
120
|
return null;
|
|
112
121
|
},
|
|
@@ -129,24 +138,7 @@ class DTableSelect extends _react.default.Component {
|
|
|
129
138
|
options.shift();
|
|
130
139
|
}
|
|
131
140
|
}
|
|
132
|
-
const optionsWithCheck = options.map(option => {
|
|
133
|
-
const isSelected = value && value.value === option.value;
|
|
134
|
-
return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, option), {}, {
|
|
135
|
-
label: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
|
|
136
|
-
className: "d-flex align-items-center justify-content-between",
|
|
137
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
138
|
-
className: "select-option-label",
|
|
139
|
-
children: option.label
|
|
140
|
-
}), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
141
|
-
className: "dtable-font dtable-icon-check seatable-check-color",
|
|
142
|
-
style: {
|
|
143
|
-
width: '12px',
|
|
144
|
-
height: '12px'
|
|
145
|
-
}
|
|
146
|
-
})]
|
|
147
|
-
})
|
|
148
|
-
});
|
|
149
|
-
});
|
|
141
|
+
const optionsWithCheck = options.map(option => (0, _objectSpread2.default)({}, option));
|
|
150
142
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.default, {
|
|
151
143
|
value: value,
|
|
152
144
|
isDisabled: isDisabled,
|
|
@@ -177,7 +169,32 @@ class DTableSelect extends _react.default.Component {
|
|
|
177
169
|
filterOption: customFilterOption,
|
|
178
170
|
autoFocus: autoFocus,
|
|
179
171
|
form: form,
|
|
180
|
-
|
|
172
|
+
formatOptionLabel: (option, _ref3) => {
|
|
173
|
+
let {
|
|
174
|
+
context
|
|
175
|
+
} = _ref3;
|
|
176
|
+
const isSelected = value && value.value === option.value;
|
|
177
|
+
if (context === 'menu') {
|
|
178
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
|
|
179
|
+
className: "d-flex align-items-center justify-content-between",
|
|
180
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
181
|
+
className: "select-option-label",
|
|
182
|
+
children: option.label
|
|
183
|
+
}), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
184
|
+
className: "dtable-font dtable-icon-check seatable-check-color",
|
|
185
|
+
style: {
|
|
186
|
+
width: '12px',
|
|
187
|
+
height: '12px'
|
|
188
|
+
}
|
|
189
|
+
})]
|
|
190
|
+
});
|
|
191
|
+
}
|
|
192
|
+
// context === 'value'
|
|
193
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
194
|
+
className: "select-option-label",
|
|
195
|
+
children: option.label
|
|
196
|
+
});
|
|
197
|
+
}
|
|
181
198
|
});
|
|
182
199
|
}
|
|
183
200
|
}
|
|
@@ -6,14 +6,16 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.default = void 0;
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _DTableIcon = _interopRequireDefault(require("../../DTableIcon"));
|
|
9
10
|
require("./index.css");
|
|
10
11
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
11
12
|
const SelectDropdownIndicator = () => {
|
|
12
13
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
13
14
|
className: "select-dropdown-indicator d-flex align-items-center",
|
|
14
15
|
"aria-hidden": "true",
|
|
15
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
16
|
-
|
|
16
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
|
|
17
|
+
symbol: "down",
|
|
18
|
+
color: "var(--bs-icon-color)"
|
|
17
19
|
})
|
|
18
20
|
});
|
|
19
21
|
};
|
|
@@ -8,8 +8,8 @@ exports.MenuSelectStyle = void 0;
|
|
|
8
8
|
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
|
|
9
9
|
// Seahub select is based on seafile-ui.css, so use the following content to override the default react-select style
|
|
10
10
|
const DEFAULT_CONTROL_STYLE = {
|
|
11
|
-
fontSize: '
|
|
12
|
-
padding: '0
|
|
11
|
+
fontSize: '12px',
|
|
12
|
+
padding: '0 8px',
|
|
13
13
|
border: '1px solid var(--bs-border-color) !important',
|
|
14
14
|
boxShadow: 'none',
|
|
15
15
|
backgroundColor: 'var(--bs-popover-bg)',
|
|
@@ -17,8 +17,8 @@ const DEFAULT_CONTROL_STYLE = {
|
|
|
17
17
|
outline: '0'
|
|
18
18
|
};
|
|
19
19
|
const FOCUS_CONTROL_STYLE = {
|
|
20
|
-
fontSize: '
|
|
21
|
-
padding: '0
|
|
20
|
+
fontSize: '12px',
|
|
21
|
+
padding: '0 8px',
|
|
22
22
|
border: '1px solid #3e84f7',
|
|
23
23
|
boxShadow: 'none',
|
|
24
24
|
backgroundColor: 'var(--bs-popover-bg)',
|
|
@@ -43,7 +43,7 @@ const controlCallback = (provided, state) => {
|
|
|
43
43
|
});
|
|
44
44
|
}
|
|
45
45
|
return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
|
|
46
|
-
fontSize: '
|
|
46
|
+
fontSize: '12px',
|
|
47
47
|
lineHeight: '1.5',
|
|
48
48
|
cursor: 'pointer'
|
|
49
49
|
}, DEFAULT_CONTROL_STYLE), {}, {
|
|
@@ -130,5 +130,8 @@ const MenuSelectStyle = exports.MenuSelectStyle = {
|
|
|
130
130
|
return {
|
|
131
131
|
'display': 'none'
|
|
132
132
|
};
|
|
133
|
-
}
|
|
133
|
+
},
|
|
134
|
+
indicatorsContainer: provided => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
|
|
135
|
+
padding: '0 !important'
|
|
136
|
+
})
|
|
134
137
|
};
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
border: none;
|
|
69
69
|
border-bottom: 1px solid rgb(0 40 100 / 12%) !important;
|
|
70
70
|
border-radius: 4px 4px 0 0;
|
|
71
|
-
padding: .375rem 1rem
|
|
71
|
+
padding: .375rem 0 .375rem 1rem;
|
|
72
72
|
height: 32px;
|
|
73
73
|
}
|
|
74
74
|
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
|
|
86
86
|
.option-group-content .dtable-icon-check {
|
|
87
87
|
font-size: 14px !important;
|
|
88
|
-
color:
|
|
88
|
+
color: var(--bs-icon-color);
|
|
89
89
|
}
|
|
90
90
|
|
|
91
91
|
.option.option-active {
|
package/lib/index.js
CHANGED
|
@@ -124,6 +124,12 @@ Object.defineProperty(exports, "DTableCustomizeCollaboratorSelect", {
|
|
|
124
124
|
return _DTableCustomizeCollaboratorSelect.default;
|
|
125
125
|
}
|
|
126
126
|
});
|
|
127
|
+
Object.defineProperty(exports, "DTableCustomizeSearchInput", {
|
|
128
|
+
enumerable: true,
|
|
129
|
+
get: function () {
|
|
130
|
+
return _DTableCustomizeSearchInput.default;
|
|
131
|
+
}
|
|
132
|
+
});
|
|
127
133
|
Object.defineProperty(exports, "DTableCustomizeSelect", {
|
|
128
134
|
enumerable: true,
|
|
129
135
|
get: function () {
|
|
@@ -693,6 +699,7 @@ var _DTableSwitch = _interopRequireDefault(require("./DTableSwitch"));
|
|
|
693
699
|
var _DTableCustomizeSelect = _interopRequireDefault(require("./DTableCustomizeSelect"));
|
|
694
700
|
var _DTableCustomizeCollaboratorSelect = _interopRequireDefault(require("./DTableCustomizeCollaboratorSelect"));
|
|
695
701
|
var _DTableSearchInput = _interopRequireDefault(require("./DTableSearchInput"));
|
|
702
|
+
var _DTableCustomizeSearchInput = _interopRequireDefault(require("./DTableCustomizeSearchInput"));
|
|
696
703
|
var _DTableColorPicker = _interopRequireDefault(require("./DTableColorPicker"));
|
|
697
704
|
var _ModalPortal = _interopRequireDefault(require("./ModalPortal"));
|
|
698
705
|
var _RoleStatusEditor = _interopRequireDefault(require("./RoleStatusEditor"));
|