WARNING: THIS SITE IS A MIRROR OF GITHUB.COM / IT CANNOT LOGIN OR REGISTER ACCOUNTS / THE CONTENTS ARE PROVIDED AS-IS / THIS SITE ASSUMES NO RESPONSIBILITY FOR ANY DISPLAYED CONTENT OR LINKS / IF YOU FOUND SOMETHING MAY NOT GOOD FOR EVERYONE, CONTACT ADMIN AT ilovescratch@foxmail.com
Skip to content

Commit 6086ec4

Browse files
yazhouioyazhouio
authored
chore: update dependencies and enhance Select component (#336)
* chore: update dependencies and enhance Select component - Bump rc-select to version 14.16.6 in package.json. - Add showArrow prop to Select component for arrow visibility. - Update iconUtil to conditionally render arrow icons based on showArrow prop. - Enhance Select styles to accommodate new showArrow functionality. - Add new stories for Select component demonstrating loading state and arrow visibility. Signed-off-by: ya zhou <[email protected]> * ci: update version Signed-off-by: ya zhou <[email protected]> * fix(Select): remove unnecessary keys from icon components in iconUtil Signed-off-by: ya zhou <[email protected]> --------- Signed-off-by: ya zhou <[email protected]>
1 parent 2678907 commit 6086ec4

File tree

7 files changed

+177
-30
lines changed

7 files changed

+177
-30
lines changed

‎.changeset/twenty-kangaroos-own.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
'@kubed/code-editor': patch
3+
'@kubed/diff-viewer': patch
4+
'@kubed/components': patch
5+
'@kubed/log-viewer': patch
6+
'@kubed/charts': patch
7+
'@kubed/hooks': patch
8+
'@kubed/icons': patch
9+
'@kubed/tests': patch
10+
'kubed-documents': patch
11+
---
12+
13+
chore: update dependencies and enhance Select component

‎packages/components/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
"rc-input-number": "^7.3.0",
3232
"rc-motion": "^2.4.4",
3333
"rc-picker": "^2.5.19",
34-
"rc-select": "^13.1.0",
34+
"rc-select": "^14.16.6",
3535
"react-dropzone": "^14.2.3",
3636
"react-hot-toast": "^2.1.1",
3737
"react-textarea-autosize": "^8.3.2",

‎packages/components/src/Select/Select.story.tsx‎

Lines changed: 50 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,66 @@ export const Basic = () => (
1818
);
1919

2020
export const Search = () => (
21-
<Select allowClear style={{ width: '120px' }} placeholder="请选择" showSearch>
21+
<Select allowClear style={{ width: '120px' }} placeholder="请选择">
2222
<Option value="China">China</Option>
2323
<Option value="USA">USA</Option>
2424
<Option value="Russian">Russian</Option>
2525
</Select>
2626
);
2727

2828
export const Multiple = () => (
29+
<Select style={{ width: '300px' }} placeholder="请选择" allowClear mode="multiple">
30+
<Option value="China">按 CPU 平均负载排行</Option>
31+
<Option value="USA">按内存用量排行</Option>
32+
<Option value="Russian">按磁盘用量排行</Option>
33+
</Select>
34+
);
35+
36+
export const HasArrow = () => (
2937
<Select style={{ width: '300px' }} placeholder="请选择" allowClear mode="multiple" showArrow>
3038
<Option value="China">按 CPU 平均负载排行</Option>
3139
<Option value="USA">按内存用量排行</Option>
3240
<Option value="Russian">按磁盘用量排行</Option>
3341
</Select>
3442
);
43+
44+
export const HasLoading = () => {
45+
const [loading, setLoading] = React.useState(false);
46+
const [options, setOptions] = React.useState<any[]>([]);
47+
48+
const timerRef = React.useRef<any>();
49+
const handleChange = (value?: string) => {
50+
setLoading(true);
51+
if (timerRef.current) {
52+
clearTimeout(timerRef.current);
53+
}
54+
timerRef.current = setTimeout(() => {
55+
clearTimeout(timerRef.current);
56+
setOptions([
57+
{ value: 'host', label: 'host' },
58+
{ value: 'member', label: 'member' },
59+
{ value: 'other_member', label: 'other_member_long_long_long_long_long_long_long_label' },
60+
...(value ? [{ value: `cluster_${value}`, label: `cluster_${value}` }] : []),
61+
]);
62+
setLoading(false);
63+
}, 2000);
64+
};
65+
React.useEffect(() => {
66+
handleChange();
67+
}, []);
68+
69+
return (
70+
<Select
71+
style={{ width: '300px' }}
72+
placeholder="请选择"
73+
prefix="集群"
74+
allowClear
75+
showArrow
76+
showSearch
77+
// mode="multiple"
78+
loading={loading}
79+
options={options}
80+
onSearch={handleChange}
81+
/>
82+
);
83+
};

‎packages/components/src/Select/Select.styles.ts‎

Lines changed: 47 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,15 @@ export interface SelectProps<VT>
1717
'inputIcon' | 'mode' | 'getInputElement' | 'getRawInputElement' | 'backfill'
1818
> {
1919
mode?: 'multiple' | 'tags';
20+
showArrow?: boolean;
2021
}
2122

2223
export const SelectStyles = createGlobalStyle`
2324
.kubed-select-dropdown-hidden {
2425
display: none;
2526
}
2627
.kubed-select-dropdown {
28+
position: absolute;
2729
z-index: 1000;
2830
padding: 4px 0;
2931
border-radius: 4px;
@@ -51,8 +53,13 @@ export const SelectStyles = createGlobalStyle`
5153
display: flex;
5254
}
5355
56+
.kubed-select-selection-wrap {
57+
min-height: 30px;
58+
}
59+
5460
.kubed-select-item-option-content {
5561
flex-grow: 1;
62+
word-break: break-all;
5663
}
5764
5865
.kubed-select-item-option-state {
@@ -90,6 +97,11 @@ export const StyledSelect = styled(RcSelect)<SelectProps<any>>`
9097
}
9198
}
9299
100+
.kubed-select-selection-overflow {
101+
overflow-x: hidden;
102+
max-width: 100%;
103+
}
104+
93105
&:hover {
94106
.kubed-select-clear {
95107
opacity: 1;
@@ -98,6 +110,8 @@ export const StyledSelect = styled(RcSelect)<SelectProps<any>>`
98110
99111
.kubed-select-selector {
100112
display: flex;
113+
align-items: center;
114+
gap: 4px;
101115
position: relative;
102116
width: 100%;
103117
padding: 0 11px;
@@ -197,6 +211,16 @@ export const StyledSelect = styled(RcSelect)<SelectProps<any>>`
197211
}
198212
}
199213
214+
.kubed-select-selection-wrap {
215+
position: relative;
216+
flex: 1;
217+
display: flex;
218+
width: 100%;
219+
position: relative;
220+
min-width: 0;
221+
max-width: 100%;
222+
}
223+
200224
.kubed-select-selector {
201225
height: 32px; // to
202226
@@ -210,16 +234,18 @@ export const StyledSelect = styled(RcSelect)<SelectProps<any>>`
210234
}
211235
212236
.kubed-select-selection-search {
237+
width: 100%;
213238
position: absolute;
214239
top: 0;
215240
right: 11px;
216241
bottom: 0;
217-
left: 11px;
242+
left: 0;
218243
}
219244
220245
.kubed-select-selection-search-input {
221-
width: 100%;
246+
width: calc(100% - 18px);
222247
height: 30px;
248+
line-height: 30px;
223249
}
224250
225251
.kubed-select-selection-placeholder {
@@ -231,6 +257,11 @@ export const StyledSelect = styled(RcSelect)<SelectProps<any>>`
231257
}
232258
233259
&.kubed-select-multiple {
260+
&.kubed-select-show-arrow {
261+
.kubed-select-selection-wrap {
262+
max-width: calc(100% - 24px);
263+
}
264+
}
234265
&.kubed-select-allow-clear {
235266
.kubed-select-selector {
236267
padding-right: 24px;
@@ -243,15 +274,21 @@ export const StyledSelect = styled(RcSelect)<SelectProps<any>>`
243274
width: 100%;
244275
padding: 1px 4px;
245276
}
277+
.kubed-select-selection-wrap {
278+
display: grid;
279+
grid-template-columns: auto 1fr;
280+
align-items: center;
281+
}
246282
247283
.kubed-select-selection-placeholder {
248-
line-height: 30px;
284+
position: relative;
285+
/* line-height: 30px;
249286
position: absolute;
250287
top: 50%;
251288
right: 11px;
252289
left: 11px;
253-
transform: translateY(-50%);
254-
transition: all 0.3s;
290+
transform: translateY(-50%); */
291+
/* transition: all 0.3s; */
255292
}
256293
257294
.kubed-select-selection-item {
@@ -289,6 +326,11 @@ export const StyledSelect = styled(RcSelect)<SelectProps<any>>`
289326
.kubed-select-selection-search-input {
290327
height: 20px;
291328
line-height: 20px;
329+
min-width: 100%;
330+
}
331+
332+
.kubed-select-selection-overflow-item-suffix {
333+
overflow-x: hidden;
292334
}
293335
294336
.kubed-select-selection-search-mirror {

‎packages/components/src/Select/Select.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ const InternalSelect = forwardRef<SelectProps<any>, 'div'>(
8686
listHeight={listHeight}
8787
listItemHeight={listItemHeight}
8888
mode={mode}
89-
inputIcon={suffixIcon}
89+
suffixIcon={suffixIcon}
9090
menuItemSelectedIcon={itemIcon}
9191
removeIcon={removeIcon}
9292
clearIcon={clearIcon}

‎packages/components/src/Select/iconUtil.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ interface IconProps {
99
removeIcon?: React.ReactNode;
1010
loading?: boolean;
1111
multiple?: boolean;
12+
showArrow?: boolean;
1213
}
1314
export default function getIcons({
1415
suffixIcon,
@@ -17,9 +18,9 @@ export default function getIcons({
1718
removeIcon,
1819
loading,
1920
multiple,
21+
showArrow = false,
2022
}: IconProps) {
2123
const mergedClearIcon = clearIcon || <Close size={16} />;
22-
2324
// Arrow item icon
2425
let mergedSuffixIcon = null;
2526
if (suffixIcon !== undefined) {
@@ -31,10 +32,13 @@ export default function getIcons({
3132
if (open && showSearch) {
3233
return <Magnifier size={16} />;
3334
}
34-
if (open) {
35-
return <ChevronUp size={16} />;
35+
if (showArrow) {
36+
if (open) {
37+
return <ChevronUp size={16} />;
38+
}
39+
return <ChevronDown size={16} />;
3640
}
37-
return <ChevronDown size={16} />;
41+
return null;
3842
};
3943
}
4044

‎yarn.lock‎

Lines changed: 57 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2455,6 +2455,27 @@
24552455
dependencies:
24562456
"@babel/runtime" "^7.18.0"
24572457

2458+
"@rc-component/portal@^1.1.0":
2459+
version "1.1.2"
2460+
resolved "https://registry.yarnpkg.com/@rc-component/portal/-/portal-1.1.2.tgz#55db1e51d784e034442e9700536faaa6ab63fc71"
2461+
integrity sha512-6f813C0IsasTZms08kfA8kPAGxbbkYToa8ALaiDIGGECU4i9hj8Plgbx0sNJDrey3EtHO30hmdaxtT0138xZcg==
2462+
dependencies:
2463+
"@babel/runtime" "^7.18.0"
2464+
classnames "^2.3.2"
2465+
rc-util "^5.24.4"
2466+
2467+
"@rc-component/trigger@^2.1.1":
2468+
version "2.2.6"
2469+
resolved "https://registry.yarnpkg.com/@rc-component/trigger/-/trigger-2.2.6.tgz#bfe6602313b3fadd659687746511f813299d5ea4"
2470+
integrity sha512-/9zuTnWwhQ3S3WT1T8BubuFTT46kvnXgaERR9f4BTKyn61/wpf/BvbImzYBubzJibU707FxwbKszLlHjcLiv1Q==
2471+
dependencies:
2472+
"@babel/runtime" "^7.23.2"
2473+
"@rc-component/portal" "^1.1.0"
2474+
classnames "^2.3.2"
2475+
rc-motion "^2.0.0"
2476+
rc-resize-observer "^1.3.1"
2477+
rc-util "^5.44.0"
2478+
24582479
"@rollup/plugin-alias@^3.1.2":
24592480
version "3.1.9"
24602481
resolved "https://registry.npmjs.org/@rollup/plugin-alias/-/plugin-alias-3.1.9.tgz#a5d267548fe48441f34be8323fb64d1d4a1b3fdf"
@@ -4970,7 +4991,7 @@ class-utils@^0.3.5:
49704991
isobject "^3.0.0"
49714992
static-extend "^0.1.1"
49724993

4973-
[email protected], classnames@^2.2.1, classnames@^2.2.5, classnames@^2.2.6, classnames@^2.3.1:
4994+
[email protected], classnames@^2.2.1, classnames@^2.2.5, classnames@^2.2.6, classnames@^2.3.1, classnames@^2.3.2:
49744995
version "2.5.1"
49754996
resolved "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
49764997
integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
@@ -11753,10 +11774,10 @@ rc-motion@^2.0.0, rc-motion@^2.0.1, rc-motion@^2.3.0, rc-motion@^2.3.4, rc-motio
1175311774
classnames "^2.2.1"
1175411775
rc-util "^5.43.0"
1175511776

11756-
rc-overflow@^1.0.0:
11757-
version "1.3.2"
11758-
resolved "https://registry.npmjs.org/rc-overflow/-/rc-overflow-1.3.2.tgz#72ee49e85a1308d8d4e3bd53285dc1f3e0bcce2c"
11759-
integrity sha512-nsUm78jkYAoPygDAcGZeC2VwIg/IBGSodtOY3pMof4W3M9qRJgqaDYm03ZayHlde3I6ipliAxbN0RUcGf5KOzw==
11777+
rc-overflow@^1.3.1:
11778+
version "1.4.1"
11779+
resolved "https://registry.yarnpkg.com/rc-overflow/-/rc-overflow-1.4.1.tgz#e1bcf0375979c24cffa2d87bf83a19ded5fcdf45"
11780+
integrity sha512-3MoPQQPV1uKyOMVNd6SZfONi+f3st0r8PksexIdBTeIYbMX0Jr+k7pHEDvsXtR4BpCv90/Pv2MovVNhktKrwvw==
1176011781
dependencies:
1176111782
"@babel/runtime" "^7.11.1"
1176211783
classnames "^2.2.1"
@@ -11787,18 +11808,28 @@ rc-resize-observer@^1.0.0:
1178711808
rc-util "^5.38.0"
1178811809
resize-observer-polyfill "^1.5.1"
1178911810

11790-
rc-select@^13.1.0:
11791-
version "13.2.1"
11792-
resolved "https://registry.npmjs.org/rc-select/-/rc-select-13.2.1.tgz#d69675f8bc72622a8f3bc024fa21bfee8d56257d"
11793-
integrity sha512-L2cJFAjVEeDiNVa/dlOVKE79OUb0J7sUBvWN3Viav3XHcjvv9Ovn4D8J9QhBSlDXeGuczZ81CZI3BbdHD25+Gg==
11811+
rc-resize-observer@^1.3.1:
11812+
version "1.4.3"
11813+
resolved "https://registry.yarnpkg.com/rc-resize-observer/-/rc-resize-observer-1.4.3.tgz#4fd41fa561ba51362b5155a07c35d7c89a1ea569"
11814+
integrity sha512-YZLjUbyIWox8E9i9C3Tm7ia+W7euPItNWSPX5sCcQTYbnwDb5uNpnLHQCG1f22oZWUhLw4Mv2tFmeWe68CDQRQ==
11815+
dependencies:
11816+
"@babel/runtime" "^7.20.7"
11817+
classnames "^2.2.1"
11818+
rc-util "^5.44.1"
11819+
resize-observer-polyfill "^1.5.1"
11820+
11821+
rc-select@^14.16.6:
11822+
version "14.16.6"
11823+
resolved "https://registry.yarnpkg.com/rc-select/-/rc-select-14.16.6.tgz#1c57a9aa97248b3fd9a830d9bf5df6e9d2ad2c69"
11824+
integrity sha512-YPMtRPqfZWOm2XGTbx5/YVr1HT0vn//8QS77At0Gjb3Lv+Lbut0IORJPKLWu1hQ3u4GsA0SrDzs7nI8JG7Zmyg==
1179411825
dependencies:
1179511826
"@babel/runtime" "^7.10.1"
11827+
"@rc-component/trigger" "^2.1.1"
1179611828
classnames "2.x"
1179711829
rc-motion "^2.0.1"
11798-
rc-overflow "^1.0.0"
11799-
rc-trigger "^5.0.4"
11800-
rc-util "^5.9.8"
11801-
rc-virtual-list "^3.2.0"
11830+
rc-overflow "^1.3.1"
11831+
rc-util "^5.16.1"
11832+
rc-virtual-list "^3.5.2"
1180211833

1180311834
rc-trigger@^5.0.4:
1180411835
version "5.3.4"
@@ -11811,18 +11842,26 @@ rc-trigger@^5.0.4:
1181111842
rc-motion "^2.0.0"
1181211843
rc-util "^5.19.2"
1181311844

11814-
rc-util@^5.19.2, rc-util@^5.21.0, rc-util@^5.26.0, rc-util@^5.27.0, rc-util@^5.28.0, rc-util@^5.32.2, rc-util@^5.36.0, rc-util@^5.37.0, rc-util@^5.38.0, rc-util@^5.43.0, rc-util@^5.7.0, rc-util@^5.9.8:
11845+
rc-util@^5.16.1, rc-util@^5.24.4, rc-util@^5.44.0, rc-util@^5.44.1:
11846+
version "5.44.4"
11847+
resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.44.4.tgz#89ee9037683cca01cd60f1a6bbda761457dd6ba5"
11848+
integrity sha512-resueRJzmHG9Q6rI/DfK6Kdv9/Lfls05vzMs1Sk3M2P+3cJa+MakaZyWY8IPfehVuhPJFKrIY1IK4GqbiaiY5w==
11849+
dependencies:
11850+
"@babel/runtime" "^7.18.3"
11851+
react-is "^18.2.0"
11852+
11853+
rc-util@^5.19.2, rc-util@^5.21.0, rc-util@^5.26.0, rc-util@^5.27.0, rc-util@^5.28.0, rc-util@^5.32.2, rc-util@^5.36.0, rc-util@^5.37.0, rc-util@^5.38.0, rc-util@^5.43.0, rc-util@^5.7.0:
1181511854
version "5.43.0"
1181611855
resolved "https://registry.npmjs.org/rc-util/-/rc-util-5.43.0.tgz#bba91fbef2c3e30ea2c236893746f3e9b05ecc4c"
1181711856
integrity sha512-AzC7KKOXFqAdIBqdGWepL9Xn7cm3vnAmjlHqUnoQaTMZYhM4VlXGLkkHHxj/BZ7Td0+SOPKB4RGPboBVKT9htw==
1181811857
dependencies:
1181911858
"@babel/runtime" "^7.18.3"
1182011859
react-is "^18.2.0"
1182111860

11822-
rc-virtual-list@^3.2.0:
11823-
version "3.14.5"
11824-
resolved "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-3.14.5.tgz#593cd13fe05eabf4ad098329704a30c77701869e"
11825-
integrity sha512-ZMOnkCLv2wUN8Jz7yI4XiSLa9THlYvf00LuMhb1JlsQCewuU7ydPuHw1rGVPhe9VZYl/5UqODtNd7QKJ2DMGfg==
11861+
rc-virtual-list@^3.5.2:
11862+
version "3.18.5"
11863+
resolved "https://registry.yarnpkg.com/rc-virtual-list/-/rc-virtual-list-3.18.5.tgz#5ce9a68cc755df024526033d7993ace911197c23"
11864+
integrity sha512-1FuxVSxhzTj3y8k5xMPbhXCB0t2TOiI3Tq+qE2Bu+GGV7f+ECVuQl4OUg6lZ2qT5fordTW7CBpr9czdzXCI7Pg==
1182611865
dependencies:
1182711866
"@babel/runtime" "^7.20.0"
1182811867
classnames "^2.2.6"

0 commit comments

Comments
 (0)