mirror of https://github.com/grafana/grafana.git
139 lines
3.4 KiB
TypeScript
139 lines
3.4 KiB
TypeScript
import React from 'react';
|
|
import { Legend } from './Legend';
|
|
|
|
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
|
|
import { withStoryContainer } from '../../utils/storybook/withStoryContainer';
|
|
import { Field } from './Field';
|
|
import { Input } from './Input/Input';
|
|
import { Button } from './Button';
|
|
import { Form } from './Form';
|
|
import { Switch } from './Switch';
|
|
import { Checkbox } from './Checkbox';
|
|
|
|
import { RadioButtonGroup } from './RadioButtonGroup/RadioButtonGroup';
|
|
import { Select } from './Select/Select';
|
|
import Forms from './index';
|
|
import mdx from './Form.mdx';
|
|
|
|
export default {
|
|
title: 'UI/Forms/Test forms',
|
|
decorators: [withStoryContainer, withCenteredStory],
|
|
parameters: {
|
|
docs: {
|
|
page: mdx,
|
|
},
|
|
},
|
|
};
|
|
|
|
const selectOptions = [
|
|
{
|
|
label: 'Option 1',
|
|
value: 'option1',
|
|
},
|
|
{
|
|
label: 'Option 2',
|
|
value: 'option2',
|
|
},
|
|
{
|
|
label: 'Option 3',
|
|
value: 'option3',
|
|
},
|
|
];
|
|
|
|
interface FormDTO {
|
|
name: string;
|
|
email: string;
|
|
username: string;
|
|
checkbox: boolean;
|
|
switch: boolean;
|
|
radio: string;
|
|
select: string;
|
|
nested: {
|
|
path: string;
|
|
};
|
|
}
|
|
|
|
const renderForm = (defaultValues?: Partial<FormDTO>) => (
|
|
<Form
|
|
defaultValues={defaultValues}
|
|
onSubmit={(data: FormDTO) => {
|
|
console.log(data);
|
|
}}
|
|
>
|
|
{({ register, control, errors }) =>
|
|
(console.log(errors) as any) || (
|
|
<>
|
|
<Legend>Edit user</Legend>
|
|
|
|
<Field label="Name" invalid={!!errors.name} error="Name is required">
|
|
<Input name="name" placeholder="Roger Waters" size="md" ref={register({ required: true })} />
|
|
</Field>
|
|
|
|
<Field label="Email" invalid={!!errors.email} error="E-mail is required">
|
|
<Input
|
|
id="email"
|
|
name="email"
|
|
placeholder="roger.waters@grafana.com"
|
|
size="md"
|
|
ref={register({ required: true })}
|
|
/>
|
|
</Field>
|
|
|
|
<Field label="Username">
|
|
<Input name="username" placeholder="mr.waters" size="md" ref={register} />
|
|
</Field>
|
|
<Field label="Nested object">
|
|
<Input name="nested.path" placeholder="Nested path" size="md" ref={register} />
|
|
</Field>
|
|
|
|
<Field label="Checkbox" invalid={!!errors.checkbox} error="We need your consent">
|
|
<Checkbox name="checkbox" label="Do you consent?" ref={register({ required: true })} />
|
|
</Field>
|
|
|
|
<Field label="Switch">
|
|
<Switch name="switch" ref={register} />
|
|
</Field>
|
|
|
|
<Field label="RadioButton">
|
|
<Forms.InputControl name="radio" control={control} options={selectOptions} as={RadioButtonGroup} />
|
|
</Field>
|
|
|
|
<Field label="RadioButton" invalid={!!errors.select}>
|
|
<Forms.InputControl
|
|
name="select"
|
|
control={control}
|
|
rules={{
|
|
required: true,
|
|
}}
|
|
options={selectOptions}
|
|
as={Select}
|
|
/>
|
|
</Field>
|
|
|
|
<Button type="submit">Update</Button>
|
|
</>
|
|
)
|
|
}
|
|
</Form>
|
|
);
|
|
|
|
export const basic = () => {
|
|
return <>{renderForm()}</>;
|
|
};
|
|
|
|
export const defaultValues = () => {
|
|
return (
|
|
<>
|
|
{renderForm({
|
|
name: 'Roger Waters',
|
|
nested: {
|
|
path: 'Nested path default value',
|
|
},
|
|
radio: 'option2',
|
|
select: 'option1',
|
|
switch: true,
|
|
})}
|
|
</>
|
|
);
|
|
};
|