34 lines
940 B
TypeScript
34 lines
940 B
TypeScript
import { Button, ColumnLayout, Input, InputProps, SpaceBetween, TokenGroup, TokenGroupProps } from "@cloudscape-design/components";
|
|
import CInput from "react-hook-form-cloudscape/components/input";
|
|
|
|
export type InputTokenGroupProps = {
|
|
type?: InputProps.Type;
|
|
control: any;
|
|
name: string;
|
|
tokenGroupProps: TokenGroupProps,
|
|
onAdd: () => void,
|
|
onDismiss: (i: number) => void,
|
|
};
|
|
|
|
export const InputTokenGroup = (props: InputTokenGroupProps) => {
|
|
return (
|
|
<SpaceBetween size="xs">
|
|
<ColumnLayout columns={2}>
|
|
<CInput
|
|
type={props.type}
|
|
name={props.name}
|
|
rules={{
|
|
minLength: 1
|
|
}}
|
|
control={props.control}
|
|
/>
|
|
<Button onClick={() => props.onAdd()}>Add</Button>
|
|
</ColumnLayout>
|
|
<TokenGroup
|
|
onDismiss={(e) => props.onDismiss(e.detail.itemIndex)}
|
|
{...props.tokenGroupProps}
|
|
/>
|
|
</SpaceBetween>
|
|
);
|
|
};
|