mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 09:49:57 +08:00
117 lines
3.1 KiB
TypeScript
117 lines
3.1 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { DownOutlined } from '@ant-design/icons';
|
|
import { Button, Col, Form, Input, Row, Select, Space, theme } from 'antd';
|
|
|
|
const { Option } = Select;
|
|
|
|
const AdvancedSearchForm = () => {
|
|
const { token } = theme.useToken();
|
|
const [form] = Form.useForm();
|
|
const [expand, setExpand] = useState(false);
|
|
|
|
const formStyle: React.CSSProperties = {
|
|
maxWidth: 'none',
|
|
background: token.colorFillAlter,
|
|
borderRadius: token.borderRadiusLG,
|
|
padding: 24,
|
|
};
|
|
|
|
const getFields = () => {
|
|
const count = expand ? 10 : 6;
|
|
const children = [];
|
|
for (let i = 0; i < count; i++) {
|
|
children.push(
|
|
<Col span={8} key={i}>
|
|
{i % 3 !== 1 ? (
|
|
<Form.Item
|
|
name={`field-${i}`}
|
|
label={`Field ${i}`}
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: 'Input something!',
|
|
},
|
|
]}
|
|
>
|
|
<Input placeholder="placeholder" />
|
|
</Form.Item>
|
|
) : (
|
|
<Form.Item
|
|
name={`field-${i}`}
|
|
label={`Field ${i}`}
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: 'Select something!',
|
|
},
|
|
]}
|
|
initialValue="1"
|
|
>
|
|
<Select>
|
|
<Option value="1">
|
|
longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
|
|
</Option>
|
|
<Option value="2">222</Option>
|
|
</Select>
|
|
</Form.Item>
|
|
)}
|
|
</Col>,
|
|
);
|
|
}
|
|
return children;
|
|
};
|
|
|
|
const onFinish = (values: any) => {
|
|
console.log('Received values of form: ', values);
|
|
};
|
|
|
|
return (
|
|
<Form form={form} name="advanced_search" style={formStyle} onFinish={onFinish}>
|
|
<Row gutter={24}>{getFields()}</Row>
|
|
<div style={{ textAlign: 'right' }}>
|
|
<Space size="small">
|
|
<Button type="primary" htmlType="submit">
|
|
Search
|
|
</Button>
|
|
<Button
|
|
onClick={() => {
|
|
form.resetFields();
|
|
}}
|
|
>
|
|
Clear
|
|
</Button>
|
|
<a
|
|
style={{ fontSize: 12 }}
|
|
onClick={() => {
|
|
setExpand(!expand);
|
|
}}
|
|
>
|
|
<DownOutlined rotate={expand ? 180 : 0} /> Collapse
|
|
</a>
|
|
</Space>
|
|
</div>
|
|
</Form>
|
|
);
|
|
};
|
|
|
|
const App: React.FC = () => {
|
|
const { token } = theme.useToken();
|
|
|
|
const listStyle: React.CSSProperties = {
|
|
lineHeight: '200px',
|
|
textAlign: 'center',
|
|
background: token.colorFillAlter,
|
|
borderRadius: token.borderRadiusLG,
|
|
marginTop: 16,
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<AdvancedSearchForm />
|
|
<div style={listStyle}>Search Result List</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default App;
|