dtable-ui-component 6.0.110-oot.15 → 6.0.110-oot.17
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/DTableCustomizeSearchInput/index.css +52 -0
- package/lib/DTableCustomizeSearchInput/index.js +5 -26
- package/lib/DTableCustomizeSelect/index.css +1 -1
- package/lib/DTableCustomizeSelect/index.js +2 -1
- package/lib/DTableSelect/index.js +1 -0
- package/lib/DTableSelect/select-dropdown-indicator/index.js +2 -1
- package/package.json +1 -1
|
@@ -0,0 +1,52 @@
|
|
|
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 1rem;
|
|
16
|
+
cursor: pointer;
|
|
17
|
+
border-bottom: 1px solid var(--bs-border-color);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.seatable-search-input .form-control:focus {
|
|
21
|
+
outline: none;
|
|
22
|
+
box-shadow: none;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.seatable-search-input .input-icon-addon {
|
|
26
|
+
z-index: 1;
|
|
27
|
+
pointer-events: auto;
|
|
28
|
+
min-width: 2.5rem !important;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.seatable-search-input .input-icon-addon svg {
|
|
32
|
+
color: #999;
|
|
33
|
+
cursor: pointer;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.seatable-search-input .none-search-result {
|
|
37
|
+
height: 100px;
|
|
38
|
+
width: 100%;
|
|
39
|
+
padding: 10px;
|
|
40
|
+
color: var(--bs-body-secondary-color);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.seatable-search-input .input-icon-addon {
|
|
44
|
+
z-index: 1;
|
|
45
|
+
pointer-events: auto;
|
|
46
|
+
min-width: 2.5rem !important;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.seatable-search-input .input-icon-addon svg {
|
|
50
|
+
color: #999;
|
|
51
|
+
cursor: pointer;
|
|
52
|
+
}
|
|
@@ -55,22 +55,6 @@ class DTableCustomizeSearchInput extends _react.Component {
|
|
|
55
55
|
this.inputRef.setSelectionRange(0, txtLength);
|
|
56
56
|
}
|
|
57
57
|
};
|
|
58
|
-
this.renderLeftIcon = () => {
|
|
59
|
-
const {
|
|
60
|
-
leftIcon,
|
|
61
|
-
leftIconClassName
|
|
62
|
-
} = this.props;
|
|
63
|
-
if (!leftIcon) return null;
|
|
64
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
65
|
-
className: (0, _classnames.default)('search-left-icon input-icon-addon', leftIconClassName),
|
|
66
|
-
style: {
|
|
67
|
-
fontSize: '12px'
|
|
68
|
-
},
|
|
69
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
|
|
70
|
-
symbol: leftIcon
|
|
71
|
-
})
|
|
72
|
-
});
|
|
73
|
-
};
|
|
74
58
|
this.renderClear = () => {
|
|
75
59
|
const {
|
|
76
60
|
isClearable,
|
|
@@ -87,7 +71,8 @@ class DTableCustomizeSearchInput extends _react.Component {
|
|
|
87
71
|
},
|
|
88
72
|
onClick: this.clearSearch,
|
|
89
73
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
|
|
90
|
-
symbol: "close"
|
|
74
|
+
symbol: "close",
|
|
75
|
+
color: "var(--bs-icon-secondary-color)"
|
|
91
76
|
})
|
|
92
77
|
});
|
|
93
78
|
};
|
|
@@ -125,21 +110,15 @@ class DTableCustomizeSearchInput extends _react.Component {
|
|
|
125
110
|
onKeyDown,
|
|
126
111
|
disabled = false,
|
|
127
112
|
style = {},
|
|
128
|
-
isClearable
|
|
129
|
-
leftIcon
|
|
113
|
+
isClearable
|
|
130
114
|
} = this.props;
|
|
131
115
|
const {
|
|
132
116
|
searchValue
|
|
133
117
|
} = this.state;
|
|
134
|
-
|
|
135
|
-
if (isClearable && searchValue) {
|
|
136
|
-
inputWidth = leftIcon ? 'calc(100% - 80px)' : 'calc(100% - 40px)';
|
|
137
|
-
} else if (leftIcon) {
|
|
138
|
-
inputWidth = 'calc(100% - 40px)';
|
|
139
|
-
}
|
|
118
|
+
const inputWidth = isClearable && searchValue ? 'calc(100% - 40px)' : '100%';
|
|
140
119
|
style.width = inputWidth;
|
|
141
120
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
|
|
142
|
-
children: [this.
|
|
121
|
+
children: [this.renderClear(), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
|
|
143
122
|
type: "text",
|
|
144
123
|
name: "search-input",
|
|
145
124
|
value: searchValue,
|
|
@@ -119,7 +119,8 @@ class DTableCustomizeSelect extends _react.Component {
|
|
|
119
119
|
}), !isLocked && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
120
120
|
className: "d-inline-flex align-items-center",
|
|
121
121
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
|
|
122
|
-
symbol: "down"
|
|
122
|
+
symbol: "down",
|
|
123
|
+
color: "var(--bs-icon-color)"
|
|
123
124
|
})
|
|
124
125
|
})]
|
|
125
126
|
}), this.state.isShowSelectOptions && !isInModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectOptionGroup.default, {
|
|
@@ -14,7 +14,8 @@ const SelectDropdownIndicator = () => {
|
|
|
14
14
|
className: "select-dropdown-indicator d-flex align-items-center",
|
|
15
15
|
"aria-hidden": "true",
|
|
16
16
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
|
|
17
|
-
symbol: "down"
|
|
17
|
+
symbol: "down",
|
|
18
|
+
color: "var(--bs-icon-color)"
|
|
18
19
|
})
|
|
19
20
|
});
|
|
20
21
|
};
|