Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitd93a9cf

Browse files
authored
feat: add TagInput component for dynamic parameters (#17719)
resolvescoder/preview#50This uses the existing MultiTextField component as the tag-selectcomponent for Dynamic parameters.The intention is not to completely re-write the MultiTextField but tomake some design improvements to match the updated design patterns. Thisshould still work with the existing non-experimentalCreateWorkspacePage.Before<img width="556" alt="Screenshot 2025-05-08 at 12 58 31"src="https://github.com/user-attachments/assets/9bf5bbf8-e26d-4523-8b5f-e4234e83d192"/>After<img width="548" alt="Screenshot 2025-05-08 at 12 43 28"src="https://github.com/user-attachments/assets/9fa90795-b2a9-4c07-b90e-938219202799"/>
1 parent0b141c4 commitd93a9cf

File tree

4 files changed

+118
-60
lines changed

4 files changed

+118
-60
lines changed

‎site/src/components/RichParameterInput/RichParameterInput.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import type {
1919
AutofillBuildParameter,
2020
AutofillSource,
2121
}from"utils/richParameters";
22-
import{MultiTextField}from"./MultiTextField";
22+
import{TagInput}from"../TagInput/TagInput";
2323

2424
constisBoolean=(parameter:TemplateVersionParameter)=>{
2525
returnparameter.type==="bool";
@@ -372,7 +372,7 @@ const RichParameterField: FC<RichParameterInputProps> = ({
372372
}
373373

374374
return(
375-
<MultiTextField
375+
<TagInput
376376
id={parameter.name}
377377
data-testid="parameter-field-list-of-string"
378378
label={props.labelasstring}
Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
importtype{Meta,StoryObj}from"@storybook/react";
2+
import{TagInput}from"./TagInput";
3+
4+
constmeta:Meta<typeofTagInput>={
5+
title:"components/TagInput",
6+
component:TagInput,
7+
decorators:[(Story)=><divstyle={{maxWidth:"500px"}}>{Story()}</div>],
8+
};
9+
10+
exportdefaultmeta;
11+
typeStory=StoryObj<typeofTagInput>;
12+
13+
exportconstDefault:Story={
14+
args:{
15+
values:[],
16+
},
17+
};
18+
19+
exportconstWithEmptyTags:Story={
20+
args:{
21+
values:["","",""],
22+
},
23+
};
24+
25+
exportconstWithLongTags:Story={
26+
args:{
27+
values:[
28+
"this-is-a-very-long-long-long-tag-that-might-wrap",
29+
"another-long-tag-example",
30+
"short",
31+
],
32+
},
33+
};
34+
35+
exportconstWithManyTags:Story={
36+
args:{
37+
values:[
38+
"tag1",
39+
"tag2",
40+
"tag3",
41+
"tag4",
42+
"tag5",
43+
"tag6",
44+
"tag7",
45+
"tag8",
46+
"tag9",
47+
"tag10",
48+
"tag11",
49+
"tag12",
50+
"tag13",
51+
"tag14",
52+
"tag15",
53+
"tag16",
54+
"tag17",
55+
"tag18",
56+
"tag19",
57+
"tag20",
58+
],
59+
},
60+
};
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,39 @@
1-
importtype{Interpolation,Theme}from"@emotion/react";
21
importChipfrom"@mui/material/Chip";
32
importFormHelperTextfrom"@mui/material/FormHelperText";
4-
importtype{FC}from"react";
3+
import{typeFC,useId,useMemo}from"react";
54

6-
exporttypeMultiTextFieldProps={
5+
exporttypeTagInputProps={
76
label:string;
87
id?:string;
98
values:string[];
109
onChange:(values:string[])=>void;
1110
};
1211

13-
exportconstMultiTextField:FC<MultiTextFieldProps>=({
12+
exportconstTagInput:FC<TagInputProps>=({
1413
label,
1514
id,
1615
values,
1716
onChange,
1817
})=>{
18+
constbaseId=useId();
19+
20+
constitemIds=useMemo(()=>{
21+
returnArray.from(
22+
{length:values.length},
23+
(_,index)=>`${baseId}-item-${index}`,
24+
);
25+
},[baseId,values.length]);
26+
1927
return(
2028
<div>
21-
<labelcss={styles.root}>
29+
<label
30+
className="flex flex-wrap min-h-10 px-1.5 py-1.5 gap-2 border border-border border-solid relative rounded-md
31+
focus-within:border-content-link focus-within:border-2 focus-within:-top-px focus-within:-left-px"
32+
>
2233
{values.map((value,index)=>(
2334
<Chip
24-
key={index}
35+
key={itemIds[index]}
36+
className="rounded-md bg-surface-secondary text-content-secondary h-7"
2537
label={value}
2638
size="small"
2739
onDelete={()=>{
@@ -32,7 +44,7 @@ export const MultiTextField: FC<MultiTextFieldProps> = ({
3244
<input
3345
id={id}
3446
aria-label={label}
35-
css={styles.input}
47+
className="flex-grow text-inherit p-0 border-none bg-transparent focus:outline-none"
3648
onKeyDown={(event)=>{
3749
if(event.key===","){
3850
event.preventDefault();
@@ -64,42 +76,9 @@ export const MultiTextField: FC<MultiTextFieldProps> = ({
6476
/>
6577
</label>
6678

67-
<FormHelperText>{'Type "," to separate the values'}</FormHelperText>
79+
<FormHelperTextclassName="text-content-secondary text-xs">
80+
{'Type "," to separate the values'}
81+
</FormHelperText>
6882
</div>
6983
);
7084
};
71-
72-
conststyles={
73-
root:(theme)=>({
74-
border:`1px solid${theme.palette.divider}`,
75-
borderRadius:8,
76-
minHeight:48,// Chip height + paddings
77-
padding:"10px 14px",
78-
fontSize:16,
79-
display:"flex",
80-
flexWrap:"wrap",
81-
gap:8,
82-
position:"relative",
83-
margin:"8px 0 4px",// Have same margin than TextField
84-
85-
"&:has(input:focus)":{
86-
borderColor:theme.palette.primary.main,
87-
borderWidth:2,
88-
// Compensate for the border width
89-
top:-1,
90-
left:-1,
91-
},
92-
}),
93-
94-
input:{
95-
flexGrow:1,
96-
fontSize:"inherit",
97-
padding:0,
98-
border:"none",
99-
background:"none",
100-
101-
"&:focus":{
102-
outline:"none",
103-
},
104-
},
105-
}satisfiesRecord<string,Interpolation<Theme>>;

‎site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx

Lines changed: 34 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import {
2424
}from"components/Select/Select";
2525
import{Slider}from"components/Slider/Slider";
2626
import{Switch}from"components/Switch/Switch";
27+
import{TagInput}from"components/TagInput/TagInput";
2728
import{Textarea}from"components/Textarea/Textarea";
2829
import{
2930
Tooltip,
@@ -195,21 +196,7 @@ const ParameterField: FC<ParameterFieldProps> = ({
195196
);
196197

197198
case"multi-select":{
198-
letvalues:string[]=[];
199-
200-
if(value){
201-
try{
202-
constparsed=JSON.parse(value);
203-
if(Array.isArray(parsed)){
204-
values=parsed;
205-
}
206-
}catch(e){
207-
console.error(
208-
"Error parsing parameter value with form_type multi-select",
209-
e,
210-
);
211-
}
212-
}
199+
constvalues=parseStringArrayValue(value);
213200

214201
// Map parameter options to MultiSelectCombobox options format
215202
constoptions:Option[]=parameter.options.map((opt)=>({
@@ -253,6 +240,21 @@ const ParameterField: FC<ParameterFieldProps> = ({
253240
);
254241
}
255242

243+
case"tag-select":{
244+
constvalues=parseStringArrayValue(value);
245+
246+
return(
247+
<TagInput
248+
id={parameter.name}
249+
label={parameter.display_name||parameter.name}
250+
values={values}
251+
onChange={(values)=>{
252+
onChange(JSON.stringify(values));
253+
}}
254+
/>
255+
);
256+
}
257+
256258
case"switch":
257259
return(
258260
<Switch
@@ -375,6 +377,23 @@ const ParameterField: FC<ParameterFieldProps> = ({
375377
}
376378
};
377379

380+
constparseStringArrayValue=(value:string):string[]=>{
381+
letvalues:string[]=[];
382+
383+
if(value){
384+
try{
385+
constparsed=JSON.parse(value);
386+
if(Array.isArray(parsed)){
387+
values=parsed;
388+
}
389+
}catch(e){
390+
console.error("Error parsing parameter of type list(string)",e);
391+
}
392+
}
393+
394+
returnvalues;
395+
};
396+
378397
interfaceOptionDisplayProps{
379398
option:PreviewParameterOption;
380399
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp