UNPKG

8.22 kBJavaScriptView Raw
1
2import { Con, Row, Col } from 'bee-layout';
3import { Panel } from 'bee-panel';
4import Button from 'bee-button';
5import React, { Component } from 'react';
6import ReactDOM from 'react-dom';
7import FormGroup from 'bee-form-group';
8import FormControl from 'bee-form-control';
9import InputGroup from '../src';
10import Dropdown from 'bee-dropdown';
11import Menu, { Item as MenuItem, Divider, SubMenu, MenuItemGroup } from 'bee-menu';
12
13const CARET = <i className="uf uf-chevronarrowdown"></i>;
14
15const CARETUP = <i className="uf uf-chevronarrowup"></i>;
16
17
18/**
19 * @title InputGroup 两边是可选Addon
20 * @description
21 */
22class Demo1 extends Component {
23 render () {
24 return (
25 <div className="demo-input-group">
26 <FormGroup>
27 <InputGroup>
28 <InputGroup.Addon>.00</InputGroup.Addon>
29 <FormControl type="text" />
30 <InputGroup.Addon>.00</InputGroup.Addon>
31 </InputGroup>
32
33 <InputGroup>
34 <InputGroup.Addon>.00</InputGroup.Addon>
35 <FormControl type="text" />
36 </InputGroup>
37
38 <InputGroup>
39 <FormControl type="text" />
40 <InputGroup.Addon>.00</InputGroup.Addon>
41 </InputGroup>
42 </FormGroup>
43 </div>
44 )
45 }
46}/**
47 * @title InputGroup 两边是可选Button
48 * @description
49 */
50
51function onSelect({ key }) {
52 console.log(`${key} selected`);
53
54}
55
56function onVisibleChange(visible) {
57 console.log(visible);
58}
59
60const menu1 = (
61 <Menu
62 multiple
63 onSelect={onSelect}>
64 <MenuItem key="1">借款合同</MenuItem>
65 <MenuItem key="2">抵/质押合同</MenuItem>
66 <MenuItem key="3">担保合同</MenuItem>
67 <MenuItem key="4">联保合同</MenuItem>
68 <Divider />
69 <MenuItem key="5">合同审批</MenuItem>
70 <MenuItem key="6">抵/质押合同跟踪</MenuItem>
71 </Menu>
72);
73class Demo2 extends Component {
74 render(){
75 return (
76 <div className="demo-input-group">
77 <FormGroup>
78 <InputGroup>
79 <InputGroup.Button>
80 <Button>test</Button>
81 </InputGroup.Button>
82 <FormControl type="text" />
83 </InputGroup>
84
85 <InputGroup>
86 <InputGroup.Button shape="border">
87 <Dropdown
88 trigger={['click']}
89 overlay={menu1}
90 animation="slide-up"
91 onVisibleChange={onVisibleChange}
92 >
93 <Button shape="border">带有分割线的下拉 <span className="uf uf-arrow-down"> </span></Button>
94 </Dropdown>
95 </InputGroup.Button>
96 <FormControl type="text" />
97 <InputGroup.Button>
98 <Button><span className="uf uf-search"> </span></Button>
99 </InputGroup.Button>
100 </InputGroup>
101
102 <InputGroup simple>
103 <FormControl style={{width:300}} type="text" />
104 <InputGroup.Button shape="border">
105 <span className="uf uf-search"> </span>
106 </InputGroup.Button>
107 </InputGroup>
108
109 <InputGroup>
110 <InputGroup.Button>
111 <Button>test</Button>
112 </InputGroup.Button>
113 <FormControl type="text" />
114 <InputGroup.Button>
115 <Button>test</Button>
116 </InputGroup.Button>
117 </InputGroup>
118 </FormGroup>
119 </div>
120 )
121 }
122}var DemoArray = [{"example":<Demo1 />,"title":" InputGroup 两边是可选Add","code":"/**\n * @title InputGroup 两边是可选Addon\n * @description \n */\nclass Demo1 extends Component {\n\trender () {\n\t\treturn (\n\t\t\t<div className=\"demo-input-group\">\n\t \t<FormGroup>\n\t \t\t<InputGroup>\n\t\t\t\t \t\t<InputGroup.Addon>.00</InputGroup.Addon>\n\t\t\t\t <FormControl type=\"text\" />\n\t\t\t\t <InputGroup.Addon>.00</InputGroup.Addon>\n\t\t\t\t </InputGroup>\n\n\t\t\t\t <InputGroup>\n\t\t\t\t \t\t<InputGroup.Addon>.00</InputGroup.Addon>\n\t\t\t\t <FormControl type=\"text\" />\n\t\t\t\t </InputGroup>\n\n\t\t\t\t <InputGroup>\n\t\t\t\t <FormControl type=\"text\" />\n\t\t\t\t <InputGroup.Addon>.00</InputGroup.Addon>\n\t\t\t\t </InputGroup>\n\t \t</FormGroup>\t\t\n\t </div>\n\t\t)\n\t}\n}","desc":" "},{"example":<Demo2 />,"title":" InputGroup 两边是可选But","code":"/**\n * @title InputGroup 两边是可选Button\n * @description \n */\n\nfunction onSelect({ key }) {\n\tconsole.log(`${key} selected`);\n\n}\n\nfunction onVisibleChange(visible) {\n\tconsole.log(visible);\n}\n\nconst menu1 = (\n <Menu\n multiple\n onSelect={onSelect}>\n <MenuItem key=\"1\">借款合同</MenuItem>\n <MenuItem key=\"2\">抵/质押合同</MenuItem>\n <MenuItem key=\"3\">担保合同</MenuItem>\n <MenuItem key=\"4\">联保合同</MenuItem>\n <Divider />\n <MenuItem key=\"5\">合同审批</MenuItem>\n <MenuItem key=\"6\">抵/质押合同跟踪</MenuItem>\n </Menu>\n);\nclass Demo2 extends Component {\n\trender(){\n\t\treturn (\n\t\t\t<div className=\"demo-input-group\">\n\t \t<FormGroup>\n\t\t\t\t <InputGroup>\n\t\t\t\t \t\t<InputGroup.Button>\n\t\t\t\t \t\t\t<Button>test</Button>\n\t\t\t\t \t\t</InputGroup.Button>\n\t\t\t\t <FormControl type=\"text\" />\n\t\t\t\t </InputGroup>\n\n\t\t\t\t <InputGroup>\n\t\t\t\t \t<InputGroup.Button shape=\"border\">\n\t\t\t\t \t\t\t<Dropdown\n\t\t\t trigger={['click']}\n\t\t\t overlay={menu1}\n\t\t\t animation=\"slide-up\"\n\t\t\t onVisibleChange={onVisibleChange}\n\t\t\t >\n\t\t\t <Button shape=\"border\">带有分割线的下拉 <span className=\"uf uf-arrow-down\"> </span></Button>\n\t\t\t </Dropdown>\n\t\t\t\t \t\t</InputGroup.Button>\n\t\t\t\t <FormControl type=\"text\" />\n\t\t\t\t <InputGroup.Button>\n\t\t\t\t \t\t\t<Button><span className=\"uf uf-search\"> </span></Button>\n\t\t\t\t \t\t</InputGroup.Button>\n\t\t\t\t </InputGroup>\n\n\t\t\t\t <InputGroup simple>\n\t\t\t\t <FormControl style={{width:300}} type=\"text\" />\n\t\t\t\t <InputGroup.Button shape=\"border\">\n\t\t\t\t \t\t\t<span className=\"uf uf-search\"> </span>\n\t\t\t\t \t\t</InputGroup.Button>\n\t\t\t\t </InputGroup>\n\n\t\t\t\t <InputGroup>\n\t\t\t\t \t<InputGroup.Button>\n\t\t\t\t \t\t\t<Button>test</Button>\n\t\t\t\t \t\t</InputGroup.Button>\n\t\t\t\t <FormControl type=\"text\" />\n\t\t\t\t <InputGroup.Button>\n\t\t\t\t \t\t\t<Button>test</Button>\n\t\t\t\t \t\t</InputGroup.Button>\n\t\t\t\t </InputGroup>\n\t \t</FormGroup>\t\t\n\t </div>\n\t\t)\n\t}\n}","desc":" "}]
123
124
125class Demo extends Component {
126 constructor(props){
127 super(props);
128 this.state = {
129 open: false
130 }
131 this.handleClick = this.handleClick.bind(this);
132 }
133 handleClick() {
134 this.setState({ open: !this.state.open })
135 }
136
137 render () {
138 const { title, example, code, desc } = this.props;
139 let caret = this.state.open ? CARETUP : CARET;
140 let text = this.state.open ? "隐藏代码" : "查看代码";
141
142 const footer = (
143 <Button shape="block" onClick={ this.handleClick }>
144 { caret }
145 { text }
146 </Button>
147 );
148 return (
149 <Col md={12}>
150 <h3>{ title }</h3>
151 <p>{ desc }</p>
152 <Panel collapsible expanded={ this.state.open } colors='bordered' header={ example } footer={footer} footerStyle = {{padding: 0,borderColor: "transparent"}} >
153 <pre><code className="hljs javascript">{ code }</code></pre>
154 </Panel>
155 </Col>
156 )
157 }
158}
159
160class DemoGroup extends Component {
161 constructor(props){
162 super(props)
163 }
164 render () {
165 return (
166 <Row>
167 {DemoArray.map((child,index) => {
168
169 return (
170 <Demo example= {child.example} title= {child.title} code= {child.code} desc= {child.desc} key= {index}/>
171 )
172
173 })}
174 </Row>
175 )
176 }
177}
178
179ReactDOM.render(<DemoGroup/>, document.getElementById('tinperBeeDemo'));