portainer/app/react/docker/containers/CreateView/NetworkTab/HostsFileEntries.tsx

57 lines
1.2 KiB
TypeScript

import { array, string } from 'yup';
import { FormError } from '@@/form-components/FormError';
import { InputLabeled } from '@@/form-components/Input/InputLabeled';
import { ItemProps } from '@@/form-components/InputList';
import { ArrayError, InputList } from '@@/form-components/InputList/InputList';
export const hostFileSchema = array(
string().required('Entry is required')
).default([]);
export function HostsFileEntries({
values,
onChange,
errors,
}: {
values: string[];
onChange: (values: string[]) => void;
errors?: ArrayError<string>;
}) {
return (
<InputList
label="Hosts file entries"
value={values}
onChange={(hostsFileEntries) => onChange(hostsFileEntries)}
errors={errors}
item={HostsFileEntryItem}
itemBuilder={() => ''}
data-cy="hosts-file-entries"
/>
);
}
function HostsFileEntryItem({
item,
onChange,
disabled,
error,
readOnly,
index,
}: ItemProps<string>) {
return (
<div>
<InputLabeled
label="value"
value={item}
onChange={(e) => onChange(e.target.value)}
disabled={disabled}
readOnly={readOnly}
data-cy={`hosts-file-entry_${index}`}
/>
{error && <FormError>{error}</FormError>}
</div>
);
}