Merge pull request #8500 from bang88/master

Type definitions for Antd

antd/antd-tests.tsx

@@ -0,0 +1,483 @@
+/// <reference path="../react/react.d.ts" />
+/// <reference path="./antd.d.ts" />
+import React = __React
+/*import {
+    Affix,
+    Button,
+    Alert,
+    Badge,
+    Breadcrumb,
+    Calendar,
+    Carousel,
+    Cascader,
+    Checkbox,
+    Collapse,
+    DatePicker,
+    Dropdown,
+    Icon,
+    Form,
+    Input,
+    InputNumber,
+    Row,
+    Col,
+    Menu,
+    message,
+    Modal,
+    Notification,
+    Pagination,
+    Popconfirm,
+    Popover,
+    Progress,
+    QueueAnim,
+    Radio,
+    Select,
+    Slider,
+    Spin,
+    Steps,
+    Switch,
+    Table,
+    Tabs,
+    Tag,
+    TimePicker,
+    Timeline,
+    Tooltip,
+    Transfer,
+    Tree,
+    TreeSelect,
+    Upload,
+
+
+
+} from 'antd';*/
+
+import Affix from 'antd/lib/Affix'
+import Button from 'antd/lib/Button'
+import Alert from 'antd/lib/Alert'
+import Badge from 'antd/lib/Badge'
+import Breadcrumb from 'antd/lib/Breadcrumb'
+import Calendar from 'antd/lib/Calendar'
+import Carousel from 'antd/lib/Carousel'
+import Cascader from 'antd/lib/Cascader'
+import Checkbox from 'antd/lib/Checkbox'
+import Collapse from 'antd/lib/Collapse'
+import DatePicker from 'antd/lib/DatePicker'
+import Dropdown from 'antd/lib/Dropdown'
+import Icon from 'antd/lib/Icon'
+import Form from 'antd/lib/Form'
+import Input from 'antd/lib/Input'
+import InputNumber from 'antd/lib/InputNumber'
+import Row from 'antd/lib/Row'
+import Col from 'antd/lib/Col'
+import Menu from 'antd/lib/Menu'
+import message from 'antd/lib/message'
+import Modal from 'antd/lib/Modal'
+import Notification from 'antd/lib/Notification'
+import Pagination from 'antd/lib/Pagination'
+import Popconfirm from 'antd/lib/Popconfirm'
+import Popover from 'antd/lib/Popover'
+import Progress from 'antd/lib/Progress'
+import QueueAnim from 'antd/lib/QueueAnim'
+import Radio from 'antd/lib/Radio'
+import Select from 'antd/lib/Select'
+import Slider from 'antd/lib/Slider'
+import Spin from 'antd/lib/Spin'
+import Steps from 'antd/lib/Steps'
+import Switch from 'antd/lib/Switch'
+import Table from 'antd/lib/Table'
+import Tabs from 'antd/lib/Tabs'
+import Tag from 'antd/lib/Tag'
+import TimePicker from 'antd/lib/TimePicker'
+import Timeline from 'antd/lib/Timeline'
+import Tooltip from 'antd/lib/Tooltip'
+import Transfer from 'antd/lib/Transfer'
+import Tree from 'antd/lib/Tree'
+import TreeSelect from 'antd/lib/TreeSelect'
+import Upload from 'antd/lib/Upload'
+
+const ButtonGroup = Button.Group;
+const CheckboxGroup = Checkbox.Group;
+const Panel = Collapse.Panel;
+const RangePicker = DatePicker.RangePicker;
+const MonthPicker = DatePicker.MonthPicker;
+const DropdownButton = Dropdown.Button;
+const SubMenu = Menu.SubMenu;
+const MenuItemGroup = Menu.ItemGroup;
+const ProgressCircle = Progress.Circle;
+const ProgressLine = Progress.Line;
+const RadioGroup = Radio.Group;
+const Option = Select.Option;
+const OptGroup = Select.OptGroup;
+const Step = Steps.Step;
+const FormItem = Form.Item;
+const TabPane = Tabs.TabPane;
+const TreeNode = Tree.TreeNode;
+const TreeSelectTreeNode = TreeSelect.TreeNode;
+
+const onChange = () => { }
+
+const options = [{
+    value: 'zhejiang',
+    label: '浙江',
+    children: [{
+        value: 'hangzhou',
+        label: '杭州',
+        children: [{
+            value: 'xihu',
+            label: '西湖',
+        }],
+    }],
+}, {
+        value: 'jiangsu',
+        label: '江苏',
+        children: [{
+            value: 'nanjing',
+            label: '南京',
+            children: [{
+                value: 'zhonghuamen',
+                label: '中华门',
+            }],
+        }],
+    }];
+
+const columns = [{
+    title: '姓名',
+    dataIndex: 'name',
+    key: 'name',
+    render(text: any) {
+        return <a href="#">{text}</a>;
+    }
+}, {
+        title: '年龄',
+        dataIndex: 'age',
+        key: 'age',
+    }, {
+        title: '住址',
+        dataIndex: 'address',
+        key: 'address',
+    }, {
+        title: '操作',
+        key: 'operation',
+        render(text: any, record: any) {
+            return (
+                <span>
+                    <a href="#">操作一{record.name}</a>
+                    <span className="ant-divider"></span>
+                    <a href="#">操作二</a>
+                    <span className="ant-divider"></span>
+                    <a href="#" className="ant-dropdown-link">
+                        更多 <Icon type="down" />
+                    </a>
+                </span>
+            );
+        }
+    }];
+const data = [{
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号'
+}, {
+        key: '2',
+        name: '胡彦祖',
+        age: 42,
+        address: '西湖区湖底公园1号'
+    }, {
+        key: '3',
+        name: '李大嘴',
+        age: 32,
+        address: '西湖区湖底公园1号'
+    }];
+
+// tests
+class AccountForm extends React.Component<any, any>{
+    render() {
+        const { getFieldProps } = this.props.form;
+        return (
+            <Form inline>
+                <FormItem
+                    label="账户：">
+                    <Input placeholder="请输入账户名"
+                        {...getFieldProps('userName') } />
+                </FormItem>
+                <FormItem
+                    label="密码：">
+                    <Input type="password" placeholder="请输入密码"
+                        {...getFieldProps('password') } />
+                </FormItem>
+                <FormItem>
+                    <label className="ant-checkbox-inline">
+                        <Checkbox
+                            {...getFieldProps('agreement') } />记住我
+                    </label>
+                </FormItem>
+                <Button type="primary" htmlType="submit">登录</Button>
+            </Form>
+        );
+    }
+}
+
+var Account = Form.create()(AccountForm);
+
+// app
+class App extends React.Component<any, any>{
+    render() {
+        message.success('success')
+        message.config({ top: 100 })
+        message.destroy()
+        message.info('info', 1000)
+        message.error('error', 3500)
+
+        Modal.info({ title: 'hello' });
+        Modal.success({ cancelText: 'No' })
+        Notification.success({
+            message: 'hello',
+            description: 'test'
+        })
+        const props = {
+            name: 'file',
+            action: '/upload.do',
+            onChange(info: any) {
+                if (info.file.status !== 'uploading') {
+                    console.log(info.file, info.fileList);
+                }
+                if (info.file.status === 'done') {
+                    message.success(`${info.file.name} 上传成功。`);
+                } else if (info.file.status === 'error') {
+                    message.error(`${info.file.name} 上传失败。`);
+                }
+            }
+        };
+        return <div>
+            <Affix>Affix</Affix>
+
+            <Row>
+                <Col>test</Col>
+            </Row>
+            <Alert message="Hello" type='info' closable={true}/>
+            <Badge count={10}/>
+            <Button type='primary'>Primary Button</Button>
+
+            <ButtonGroup>
+                <Button type='primary'>Primary Button</Button>
+                <Button type='ghost'>Primary Button</Button>
+
+            </ButtonGroup>
+            <Breadcrumb>
+                <Breadcrumb.Item>首页</Breadcrumb.Item>
+                <Breadcrumb.Item href="">应用中心</Breadcrumb.Item>
+                <Breadcrumb.Item href="">应用列表</Breadcrumb.Item>
+                <Breadcrumb.Item>某应用</Breadcrumb.Item>
+            </Breadcrumb>
+
+            <Calendar/>
+
+            <Carousel autoplay>
+                <div><h3>1</h3></div>
+                <div><h3>2</h3></div>
+                <div><h3>3</h3></div>
+                <div><h3>4</h3></div>
+            </Carousel>
+
+            <Cascader options={options} />
+
+            <CheckboxGroup options={['Apple', 'Pear', 'Orange']} defaultValue={['Apple']} onChange={onChange} />
+            <Collapse defaultActiveKey={['1']}>
+                <Panel header="This is panel header 1" key="1">
+                    <p>test1</p>
+                </Panel>
+                <Panel header="This is panel header 2" key="2">
+                    <p>test2</p>
+                </Panel>
+                <Panel header="This is panel header 3" key="3">
+                    <p>test3</p>
+                </Panel>
+            </Collapse>
+            <DatePicker defaultValue="2015-01-01" />
+            <RangePicker showTime format="yyyy/MM/dd HH:mm:ss" onChange={onChange} />
+            <MonthPicker defaultValue="2015-12" />
+            <Dropdown trigger={['click']} overlay={<div>Hello Dp</div>}>
+                <a className="ant-dropdown-link" href="#">
+                    触发链接 <Icon type="down" />
+                </a>
+            </Dropdown>
+            <DropdownButton overlay={<p>dpb</p>} type="primary">
+                某功能按钮
+            </DropdownButton>
+
+            <InputNumber min={0} max={10}/>
+
+
+            <Menu
+                selectedKeys={[this.state.current]}
+                theme={this.state.theme}
+                mode="horizontal">
+                <Menu.Item key="mail">
+                    <Icon type="mail" />导航一
+                </Menu.Item>
+
+                <SubMenu title={<span><Icon type="setting" />导航 - 子菜单</span>}>
+                    <MenuItemGroup title="分组1">
+                        <Menu.Item key="setting:1">选项1</Menu.Item>
+                        <Menu.Item key="setting:2">选项2</Menu.Item>
+                    </MenuItemGroup>
+                    <MenuItemGroup title="分组2">
+                        <Menu.Item key="setting:3">选项3</Menu.Item>
+                        <Menu.Item key="setting:4">选项4</Menu.Item>
+                    </MenuItemGroup>
+                </SubMenu>
+
+            </Menu>
+
+
+            <Modal title='Modal .....' maskClosable/>
+
+
+            <Pagination defaultCurrent={1} total={50} />,
+
+            <Popconfirm title="confirm .">
+                <a href="#">remove</a>
+            </Popconfirm>
+            <Popover overlay={<div>Overlay</div>} title="title">
+                <Button type="primary">display card</Button>
+            </Popover>
+
+
+
+            <ProgressCircle percent={75} />
+            <ProgressCircle percent={70} status="exception" />
+            <ProgressCircle percent={100} />
+
+
+            <ProgressLine percent={30} />
+            <ProgressLine percent={50} status="active" />
+            <ProgressLine percent={70} status="exception" />
+            <ProgressLine percent={100} />
+            <ProgressLine percent={50} showInfo={false} />
+
+
+            <QueueAnim>
+                <div key='demo1'>demo1</div>
+                <div key='demo2'>demo2</div>
+                <div key='demo3'>demo3</div>
+                <div key='demo4'>demo4</div>
+            </QueueAnim>
+
+            <RadioGroup>
+                <Radio key="a" value={1}>A</Radio>
+                <Radio key="b" value={2}>B</Radio>
+                <Radio key="c" value={3}>C</Radio>
+                <Radio key="d" value={null}>D</Radio>
+            </RadioGroup>
+
+            <Select defaultValue="lucy"
+                style={{ width: 200 }}
+                showSearch={false}>
+                <OptGroup label="Manager">
+                    <Option value="jack">jack</Option>
+                    <Option value="lucy">lucy</Option>
+                </OptGroup>
+                <OptGroup label="Engineer">
+                    <Option value="yiminghe">yiminghe</Option>
+                </OptGroup>
+            </Select>
+
+            <Select defaultValue="lucy" style={{ width: 120 }} disabled>
+                <Option value="lucy">Lucy</Option>
+            </Select>
+
+
+            <Slider defaultValue={30} />
+            <Slider range defaultValue={[20, 50]} />
+            <Slider range defaultValue={[20, 50]} disabled />
+
+
+            <Spin />
+
+
+            <Step status="finish" title="步骤1" icon="cloud" />
+            <Step status="process" title="步骤2" icon="apple" />
+            <Step status="wait" title="步骤3" icon="github" />
+
+            <Switch defaultChecked={false} onChange={onChange} />,
+
+
+            <Tabs defaultActiveKey="1" onChange={onChange}>
+                <TabPane tab="选项卡一" key="1">选项卡一内容</TabPane>
+                <TabPane tab="选项卡二" key="2">选项卡二内容</TabPane>
+                <TabPane tab="选项卡三" key="3">选项卡三内容</TabPane>
+            </Tabs>
+
+            <Tag>标签一</Tag>
+            <Tag>标签二</Tag>
+            <Tag closable onClose={() => { } }>标签三</Tag>
+            <Tag><a href="https://www.alipay.com/" target="_blank">标签四（链接）</a></Tag>
+
+
+            <TimePicker onChange={onChange} />
+
+            <Timeline>
+                <Timeline.Item>创建服务现场 2015-09-01</Timeline.Item>
+                <Timeline.Item>初步排除网络异常 2015-09-01</Timeline.Item>
+                <Timeline.Item>技术测试异常 2015-09-01</Timeline.Item>
+                <Timeline.Item>网络异常正在修复 2015-09-01</Timeline.Item>
+            </Timeline>
+
+
+            <Tooltip title="提示文字">
+                <span>鼠标移上来就会出现提示</span>
+            </Tooltip>
+
+
+            <Transfer
+                dataSource={this.state.mockData}
+                targetKeys={this.state.targetKeys}
+                onChange={onChange}  />
+
+
+
+            <Tree className="myCls" showLine multiple checkable
+                defaultExpandedKeys={this.state.defaultExpandedKeys}
+                defaultSelectedKeys={this.state.defaultSelectedKeys}
+                defaultCheckedKeys={this.state.defaultCheckedKeys}
+                >
+                <TreeNode title="parent 1" key="0-0">
+                    <TreeNode title="parent 1-0" key="0-0-0" disabled>
+                        <TreeNode title="leaf" key="0-0-0-0" disableCheckbox />
+                        <TreeNode title="leaf" key="0-0-0-1" />
+                    </TreeNode>
+                    <TreeNode title="parent 1-1" key="0-0-1">
+                        <TreeNode title={<span style={{ color: '#08c' }}>sss</span>} key="0-0-1-0" />
+                    </TreeNode>
+                </TreeNode>
+            </Tree>
+
+
+
+
+            <Upload {...props}>
+                <Button type="ghost">
+                    <Icon type="upload" /> 点击上传
+                </Button>
+            </Upload>
+
+            <TreeSelect style={{ width: 300 }}
+                value={this.state.value}
+                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+                placeholder="请选择"
+                allowClear
+                treeDefaultExpandAll
+                onChange={onChange}>
+                <TreeSelectTreeNode value="parent 1" title="parent 1" key="0-1">
+                    <TreeSelectTreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
+                        <TreeSelectTreeNode value="leaf1" title="my leaf" key="random" />
+                        <TreeSelectTreeNode value="leaf2" title="your leaf" key="random1" />
+                    </TreeSelectTreeNode>
+                    <TreeSelectTreeNode value="parent 1-1" title="parent 1-1" key="random2">
+                        <TreeSelectTreeNode value="sss" title={<b style={{ color: '#08c' }}>sss</b>} key="random3" />
+                    </TreeSelectTreeNode>
+                </TreeSelectTreeNode>
+            </TreeSelect>
+            <Table columns={columns} dataSource={data}/>
+        </div>
+    }
+}