Skip to content

Commit 0db5b84

Browse files
oldjoldj
committed
更新添加、编辑窗口的组件。
1 parent efda8df commit 0db5b84

File tree

4 files changed

+60
-106
lines changed

4 files changed

+60
-106
lines changed

‎app/ui/bundle.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ui/frame/edit.jsx‎

Lines changed: 24 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,16 @@
88
import React from 'react'
99
import MyFrame from './frame'
1010
import classnames from 'classnames'
11+
import { Icon, Input, Radio, Select } from 'antd'
1112
import Group from './group'
1213
import Agent from '../Agent'
1314
import makeId from '../../app/libs/make-id'
1415
import './edit.less'
1516

17+
const RadioButton = Radio.Button
18+
const RadioGroup = Radio.Group
19+
const Option = Select.Option
20+
1621
export default class EditPrompt extends React.Component {
1722
constructor (props) {
1823
super(props)
@@ -175,7 +180,7 @@ export default class EditPrompt extends React.Component {
175180
}
176181
return k.map(([v, n], idx) => {
177182
return (
178-
<option value={v} key={idx}>{n}</option>
183+
<Option value={v} key={idx}>{n}</Option>
179184
)
180185
})
181186
}
@@ -229,30 +234,30 @@ export default class EditPrompt extends React.Component {
229234
<div className="ln">
230235
<div className="title">{lang.url}</div>
231236
<div className="cnt">
232-
<input
233-
type="text"
237+
<Input
234238
ref="url"
235239
value={this.state.url}
236240
placeholder="http://"
237-
onChange={(e) => this.setState({url: e.target.value})}
238-
onKeyDown={(e) => (e.keyCode === 13 && this.onOK()) || (e.keyCode === 27 && this.onCancel())}
241+
onChange={e => this.setState({url: e.target.value})}
242+
onKeyDown={e => (e.keyCode === 13 && this.onOK()) || (e.keyCode === 27 && this.onCancel())}
239243
/>
240244
</div>
241245
</div>
242246
<div className="ln">
243247
<div className="title">{lang.auto_refresh}</div>
244248
<div className="cnt">
245-
<select
249+
<Select
246250
value={this.state.refresh_interval}
247-
onChange={(e) => this.setState(
248-
{refresh_interval: parseFloat(e.target.value) || 0})}
251+
style={{width: 120}}
252+
onChange={v => this.setState({refresh_interval: parseFloat(v) || 0})}
249253
>
250254
{this.getRefreshOptions()}
251-
</select>
255+
</Select>
252256

253-
<i
257+
<Icon
258+
type="reload"
254259
className={classnames({
255-
iconfont: 1,
260+
'iconfont': 1,
256261
'icon-refresh': 1,
257262
'invisible': !this.current_hosts || this.state.url !== this.current_hosts.url,
258263
'loading': this.state.is_loading
@@ -276,29 +281,18 @@ export default class EditPrompt extends React.Component {
276281
return (
277282
<div ref="body">
278283
<div className="ln">
279-
<input id="ipt-local" type="radio" name="where" value="local"
280-
checked={this.state.where === 'local'}
281-
onChange={(e) => this.setState({where: e.target.value})}
282-
/>
283-
<label htmlFor="ipt-local">{lang.where_local}</label>
284-
<input id="ipt-remote" type="radio" name="where" value="remote"
285-
checked={this.state.where === 'remote'}
286-
onChange={(e) => this.setState({where: e.target.value})}
287-
/>
288-
<label htmlFor="ipt-remote">{lang.where_remote}</label>
289-
<input id="ipt-group" type="radio" name="where" value="group"
290-
checked={this.state.where === 'group'}
291-
onChange={(e) => this.setState({where: e.target.value})}
292-
/>
293-
<label htmlFor="ipt-group">{lang.where_group}</label>
284+
<RadioGroup onChange={e => this.setState({where: e.target.value})} value={this.state.where}>
285+
<RadioButton value="local">{lang.where_local}</RadioButton>
286+
<RadioButton value="remote">{lang.where_remote}</RadioButton>
287+
<RadioButton value="group">{lang.where_group}</RadioButton>
288+
</RadioGroup>
294289
</div>
290+
295291
<div className="ln">
296292
<div className="title">{lang.hosts_title}</div>
297293
<div className="cnt">
298-
<input
299-
type="text"
294+
<Input
300295
ref="title"
301-
name="text"
302296
value={this.state.title}
303297
onChange={(e) => this.setState({title: e.target.value})}
304298
onKeyDown={(e) => (e.keyCode === 13 && this.onOK() || e.keyCode === 27 && this.onCancel())}
@@ -318,7 +312,7 @@ export default class EditPrompt extends React.Component {
318312
return (
319313
<MyFrame
320314
show={this.state.show}
321-
head={lang[this.state.is_add ? 'add_hosts' : 'edit_hosts']}
315+
title={lang[this.state.is_add ? 'add_hosts' : 'edit_hosts']}
322316
body={this.body()}
323317
onOK={() => this.onOK()}
324318
onCancel={() => this.onCancel()}

‎ui/frame/frame.jsx‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -60,26 +60,30 @@ export default class MyFrame extends React.Component {
6060
if (!this.props.show) {
6161
return null
6262
}
63-
let {show} = this.props
63+
let {show, title, body, lang} = this.props
6464

6565
return (
6666
<Modal
6767
visible={show}
68-
title="Title"
68+
title={title}
6969
onOk={this.onOK.bind(this)}
7070
onCancel={this.onCancel.bind(this)}
71+
wrapClassName="frame"
7172
footer={[
72-
<Button key="back" size="large" onClick={this.onCancel.bind(this)}>Return</Button>,
73+
<Button key="back" size="large" onClick={this.onCancel.bind(this)}>
74+
{lang.cancel}
75+
</Button>,
7376
<Button key="submit" type="primary" size="large" loading={false} onClick={this.onOK.bind(this)}>
74-
Submit
77+
{lang.ok}
7578
</Button>
7679
]}
7780
>
78-
<div className="prompt">
79-
<div className="head">{this.props.head}</div>
80-
<div className="body">{this.props.body}</div>
81-
<div className="foot">{this.renderFootButtons()}</div>
82-
</div>
81+
<div className="prompt-body">{body}</div>
82+
{/*<div className="prompt">*/}
83+
{/*<div className="head">{this.props.head}</div>*/}
84+
{/*<div className="body">{this.props.body}</div>*/}
85+
{/*<div className="foot">{this.renderFootButtons()}</div>*/}
86+
{/*</div>*/}
8387
</Modal>
8488
)
8589
}

‎ui/frame/frame.less‎

Lines changed: 22 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -3,44 +3,34 @@
33
@btn_default: #05a;
44
@lh: 24px;
55

6-
position: fixed;
7-
top: 0;
8-
right: 0;
9-
bottom: 0;
10-
left: 0;
11-
12-
.overlay {
13-
position: absolute;
14-
z-index: -1;
15-
width: 100%;
6+
&:before {
7+
content: '';
8+
display: inline-block;
169
height: 100%;
17-
background: #000;
18-
opacity: 0.5;
10+
vertical-align: middle;
11+
width: 0;
1912
}
2013

21-
.prompt {
22-
position: absolute;
14+
.ant-modal {
15+
//display: inline-block;
16+
//vertical-align: middle;
17+
position: fixed;
2318
top: 50%;
2419
left: 50%;
2520
transform: translate(-50%, -50%);
26-
min-width: 300px;
27-
max-width: 600px;
28-
background: #fff;
29-
box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.1);
30-
31-
.head {
32-
padding: 20px;
33-
font-size: 16px;
34-
background: @bg;
35-
//border-bottom: solid 1px #ccc;
36-
}
21+
min-width: 520px;
22+
//max-width: 600px;
23+
//background: #fff;
24+
//box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.1);
25+
line-height: 30px;
3726

38-
.body {
39-
padding: 20px 20px;
27+
.prompt-body {
28+
//padding: 20px 20px;
4029

4130
.ln {
4231
line-height: 30px;
4332
padding: 2px 0;
33+
margin-bottom: 10px;
4434

4535
.title {
4636
float: left;
@@ -50,11 +40,11 @@
5040
.cnt {
5141
margin-left: 100px;
5242
line-height: 30px;
53-
input[type=text] {
54-
width: 240px;
55-
outline: none;
56-
padding: 4px 10px;
57-
}
43+
//input[type=text] {
44+
// width: 240px;
45+
// outline: none;
46+
// padding: 4px 10px;
47+
//}
5848
textarea {
5949
font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
6050
}
@@ -66,42 +56,8 @@
6656
}
6757
}
6858

69-
input {
70-
padding: 4px 4px;
71-
}
72-
7359
input[type=password] {
7460
letter-spacing: 8px;
75-
width: 240px;
76-
outline: none;
77-
padding: 4px 10px;
78-
}
79-
}
80-
81-
.foot {
82-
padding: 20px;
83-
background: @bg;
84-
text-align: right;
85-
86-
.button {
87-
display: inline-block;
88-
background: #ccc;
89-
padding: 8px 20px;
90-
margin-left: 1em;
91-
cursor: pointer;
92-
93-
&:hover {
94-
background: #ddd;
95-
}
96-
97-
&.btn-default {
98-
background: @btn_default;
99-
color: #fff;
100-
101-
&:hover {
102-
background: @btn_default * 1.4;
103-
}
104-
}
10561
}
10662
}
10763
}

0 commit comments

Comments
 (0)