🔧 fix(codeTabsComponent): remove unnecessary max-h-48 class from codeTabsComponent to fix overflow issue
🔧 fix(keypairListComponent): add mx-2 class to keypairListComponent when there are multiple key-value pairs to improve spacing 🔧 fix(keypairListComponent): remove ref parameter from onChange function in keypairListComponent to fix unnecessary re-rendering 🔧 fix(keypairListComponent): add mx-2 class to keypairListComponent when there are multiple key-value pairs to improve spacing 🔧 fix(editNodeModal): add my-3 class to keypairListComponent when there are multiple key-value pairs to improve spacing 🔧 fix(types): add advanced property to KeyPairListComponentType to support advanced mode in keypairListComponent
This commit is contained in:
parent
f6eafa7f0f
commit
61e50ac68e
4 changed files with 32 additions and 17 deletions
|
|
@ -682,7 +682,7 @@ export default function CodeTabsComponent({
|
|||
) : node.data.node.template[
|
||||
templateField
|
||||
].type === "dict" ? (
|
||||
<div className="mx-auto max-h-48 overflow-auto custom-scroll">
|
||||
<div className="mx-auto overflow-auto custom-scroll">
|
||||
<KeypairListComponent
|
||||
disabled={false}
|
||||
editNode={true}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ export default function KeypairListComponent({
|
|||
disabled,
|
||||
editNode = false,
|
||||
duplicateKey,
|
||||
advanced = false,
|
||||
}: KeyPairListComponentType): JSX.Element {
|
||||
useEffect(() => {
|
||||
if (disabled) {
|
||||
|
|
@ -24,7 +25,7 @@ export default function KeypairListComponent({
|
|||
useEffect(() => {
|
||||
if (JSON.stringify(value) !== JSON.stringify(ref.current)) {
|
||||
ref.current = value;
|
||||
onChange(value, ref);
|
||||
onChange(value);
|
||||
}
|
||||
}, [value]);
|
||||
|
||||
|
|
@ -46,14 +47,14 @@ export default function KeypairListComponent({
|
|||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
ref.current?.length > 1 && editNode ? "my-1" : "",
|
||||
ref.current?.length > 1 && editNode ? "mx-2 my-1" : "",
|
||||
"flex h-full flex-col gap-3"
|
||||
)}
|
||||
>
|
||||
{ref.current?.map((obj, index) => {
|
||||
return Object.keys(obj).map((key, idx) => {
|
||||
return (
|
||||
<div key={idx} className="flex w-full gap-3">
|
||||
<div key={idx} className="flex w-full gap-2">
|
||||
<Input
|
||||
type="text"
|
||||
value={key.trim()}
|
||||
|
|
|
|||
|
|
@ -256,8 +256,21 @@ const EditNodeModal = forwardRef(
|
|||
</div>
|
||||
) : myData.current.node?.template[templateParam]
|
||||
.type === "dict" ? (
|
||||
<div className="mt-2 max-h-48 w-full overflow-auto custom-scroll">
|
||||
<div
|
||||
className={classNames(
|
||||
"max-h-48 w-full overflow-auto custom-scroll",
|
||||
myData.current.node!.template[templateParam]
|
||||
.value?.length > 1
|
||||
? "my-3"
|
||||
: ""
|
||||
)}
|
||||
>
|
||||
<KeypairListComponent
|
||||
advanced={
|
||||
myData.current.node?.template[
|
||||
templateParam
|
||||
].advanced
|
||||
}
|
||||
disabled={disabled}
|
||||
editNode={true}
|
||||
value={
|
||||
|
|
|
|||
|
|
@ -61,6 +61,7 @@ export type KeyPairListComponentType = {
|
|||
disabled: boolean;
|
||||
editNode?: boolean;
|
||||
duplicateKey?: boolean;
|
||||
advanced?: boolean;
|
||||
};
|
||||
|
||||
export type DictComponentType = {
|
||||
|
|
@ -134,18 +135,18 @@ export type TooltipComponentType = {
|
|||
children: ReactElement;
|
||||
title: string | ReactElement;
|
||||
placement?:
|
||||
| "bottom-end"
|
||||
| "bottom-start"
|
||||
| "bottom"
|
||||
| "left-end"
|
||||
| "left-start"
|
||||
| "left"
|
||||
| "right-end"
|
||||
| "right-start"
|
||||
| "right"
|
||||
| "top-end"
|
||||
| "top-start"
|
||||
| "top";
|
||||
| "bottom-end"
|
||||
| "bottom-start"
|
||||
| "bottom"
|
||||
| "left-end"
|
||||
| "left-start"
|
||||
| "left"
|
||||
| "right-end"
|
||||
| "right-start"
|
||||
| "right"
|
||||
| "top-end"
|
||||
| "top-start"
|
||||
| "top";
|
||||
};
|
||||
|
||||
export type ProgressBarType = {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue