owncast/web/stories/Form.stories.tsx
2022-05-11 23:31:31 -07:00

111 lines
2.6 KiB
TypeScript

import React, { useState } from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import {
Button,
Form,
Input,
Radio,
Select,
Cascader,
DatePicker,
InputNumber,
TreeSelect,
Switch,
} from 'antd';
import { SizeType } from 'antd/lib/config-provider/SizeContext';
const FormExample = () => {
const [componentSize, setComponentSize] = useState('default');
const onFormLayoutChange = ({ size }) => {
setComponentSize(size);
};
return (
<Form
labelCol={{
span: 4,
}}
wrapperCol={{
span: 14,
}}
layout="horizontal"
initialValues={{
size: componentSize,
}}
onValuesChange={onFormLayoutChange}
size={componentSize as SizeType}
>
<Form.Item label="Form Size" name="size">
<Radio.Group>
<Radio.Button value="small">Small</Radio.Button>
<Radio.Button value="default">Default</Radio.Button>
<Radio.Button value="large">Large</Radio.Button>
</Radio.Group>
</Form.Item>
<Form.Item label="Required text input" required>
<Input />
</Form.Item>
<Form.Item label="Select">
<Select>
<Select.Option value="demo">Demo</Select.Option>
</Select>
</Form.Item>
<Form.Item label="TreeSelect">
<TreeSelect
treeData={[
{
title: 'Light',
value: 'light',
children: [
{
title: 'Bamboo',
value: 'bamboo',
},
],
},
]}
/>
</Form.Item>
<Form.Item label="Cascader">
<Cascader
options={[
{
value: 'zhejiang',
label: 'Zhejiang',
children: [
{
value: 'hangzhou',
label: 'Hangzhou',
},
],
},
]}
/>
</Form.Item>
<Form.Item label="DatePicker">
<DatePicker />
</Form.Item>
<Form.Item label="InputNumber">
<InputNumber />
</Form.Item>
<Form.Item label="Switch" valuePropName="checked">
<Switch />
</Form.Item>
<Form.Item label="Button">
<Button>Button</Button>
</Form.Item>
</Form>
);
};
export default {
title: 'example/Form',
component: Form,
// parameters: {},
} as ComponentMeta<typeof Form>;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const Template: ComponentStory<typeof Form> = args => <FormExample />;
export const Demo = Template.bind({});