Skip to content

Commit afd8c9f

Browse files
loadchangeloadchange
authored
Merge branch 'master' into master
2 parents f7be2a2 + afbfe7a commit afd8c9f

File tree

14 files changed

+261
-159
lines changed

14 files changed

+261
-159
lines changed

‎site/docs/en-US/form.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -383,7 +383,7 @@ constructor(props) {
383383
} else {
384384
callback();
385385
}
386-
} }
386+
} , trigger: 'blur'}
387387
],
388388
age: [
389389
{ required: true, message: 'Please input the age', trigger: 'blur' },

‎site/docs/en-US/table.md

+28-9
Original file line numberDiff line numberDiff line change
@@ -925,17 +925,36 @@ constructor(props) {
925925
}
926926
}
927927

928+
toggleSelection(rows) {
929+
if (rows) {
930+
rows.forEach(row => {
931+
this.refs.multipleTable.toggleRowSelection(row);
932+
});
933+
} else {
934+
this.refs.multipleTable.clearSelection();
935+
}
936+
}
937+
928938
render() {
939+
const { columns, data } = this.state;
940+
929941
return (
930-
<Table
931-
style={{width: '100%'}}
932-
columns={this.state.columns}
933-
data={this.state.data}
934-
border={true}
935-
height={250}
936-
onSelectChange={(selection) => { console.log(selection) }}
937-
onSelectAll={(selection) => { console.log(selection) }}
938-
/>
942+
<div>
943+
<Table
944+
ref="multipleTable"
945+
style={{width: '100%'}}
946+
columns={columns}
947+
data={data}
948+
border={true}
949+
height={250}
950+
onSelectChange={(selection) => { console.log(selection) }}
951+
onSelectAll={(selection) => { console.log(selection) }}
952+
/>
953+
<div style={{marginTop: '20px'}}>
954+
<Button onClick={() => this.toggleSelection([ data[1], data[2] ])}>Toggle selection status of second and third rows</Button>
955+
<Button onClick={() => this.toggleSelection()}>Clear selection</Button>
956+
</div>
957+
</div>
939958
)
940959
}
941960
```

‎site/docs/zh-CN/form.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -381,7 +381,7 @@ constructor(props) {
381381
} else {
382382
callback();
383383
}
384-
} }
384+
} , trigger: 'blur'}
385385
],
386386
age: [
387387
{ required: true, message: '请填写年龄', trigger: 'blur' },

‎site/docs/zh-CN/table.md

+28-9
Original file line numberDiff line numberDiff line change
@@ -1182,17 +1182,36 @@ constructor(props) {
11821182
}
11831183
}
11841184

1185+
toggleSelection(rows) {
1186+
if (rows) {
1187+
rows.forEach(row => {
1188+
this.refs.multipleTable.toggleRowSelection(row);
1189+
});
1190+
} else {
1191+
this.refs.multipleTable.clearSelection();
1192+
}
1193+
}
1194+
11851195
render() {
1196+
const { columns, data } = this.state;
1197+
11861198
return (
1187-
<Table
1188-
style={{width: '100%'}}
1189-
columns={this.state.columns}
1190-
data={this.state.data}
1191-
border={true}
1192-
height={250}
1193-
onSelectChange={(selection) => { console.log(selection) }}
1194-
onSelectAll={(selection) => { console.log(selection) }}
1195-
/>
1199+
<div>
1200+
<Table
1201+
ref="multipleTable"
1202+
style={{width: '100%'}}
1203+
columns={columns}
1204+
data={data}
1205+
border={true}
1206+
height={250}
1207+
onSelectChange={(selection) => { console.log(selection) }}
1208+
onSelectAll={(selection) => { console.log(selection) }}
1209+
/>
1210+
<div style={{marginTop: '20px'}}>
1211+
<Button onClick={() => this.toggleSelection([ data[1], data[2] ])}>切换第二、第三行的选中状态</Button>
1212+
<Button onClick={() => this.toggleSelection()}>取消选择</Button>
1213+
</div>
1214+
</div>
11961215
)
11971216
}
11981217
```

‎site/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@
77
<script src="bundle.js" type="text/javascript" defer></script>
88
</head>
99
<body>
10-
<div id="app" />
10+
<div id="app"></div>
1111
</body>
1212
</html>

‎site/index.jsx

+22
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,25 @@ if (module.hot) {
2020
render(<AppContainer><App /></AppContainer>, document.getElementById('app'));
2121
});
2222
}
23+
24+
function inChinaConfirm() {
25+
import('../src/message-box').then(MessageBox => {
26+
MessageBox.default.confirm('建议大陆用户访问部署在国内的站点，是否跳转？', '提示').then(() => {
27+
location.href = 'https://element-react.faas.ele.me';
28+
});
29+
});
30+
}
31+
32+
function inChina() {
33+
if (window.fetch && document.domain !== 'element-react.faas.ele.me') {
34+
fetch('//restapi.amap.com/v3/ip?output=JSON&key=53a87f7c6a6d173be31d4123958ad5c2')
35+
.then(res => res.json())
36+
.then(({ city }) => {
37+
if (city || typeof city === 'string') {
38+
inChinaConfirm();
39+
}
40+
})
41+
}
42+
}
43+
44+
setTimeout(() => inChina());

‎src/dialog/Dialog.jsx

+21-15
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
import React from 'react';
44
import { Component, View, Transition, PropTypes } from '../../libs';
5+
import { cleanScrollBar } from '../table/utils';
56

67
type State = {
78
bodyOverflow: string,
@@ -24,17 +25,19 @@ export default class Dialog extends Component {
2425

2526
constructor(props: Object) {
2627
super(props);
27-
28+
this.wrap = React.createRef();
2829
this.state = {
2930
bodyOverflow: ''
3031
}
3132
}
3233

3334
componentWillReceiveProps(nextProps: Object): void {
34-
35+
const { bodyOverflow } = this.state;
36+
const { lockScroll, modal } = this.props;
3537
if (this.willOpen(this.props, nextProps)) {
36-
if (this.props.lockScroll && document.body && document.body.style) {
37-
if (!this.state.bodyOverflow) {
38+
cleanScrollBar();
39+
if (lockScroll && document.body && document.body.style) {
40+
if (!bodyOverflow) {
3841
this.setState({
3942
bodyOverflow: document.body.style.overflow
4043
});
@@ -43,35 +46,38 @@ export default class Dialog extends Component {
4346
}
4447
}
4548

46-
if (this.willClose(this.props, nextProps) && this.props.lockScroll) {
47-
if (this.props.modal && this.state.bodyOverflow !== 'hidden' && document.body && document.body.style) {
48-
document.body.style.overflow = this.state.bodyOverflow;
49+
if (this.willClose(this.props, nextProps) && lockScroll) {
50+
if (modal && bodyOverflow !== 'hidden' && document.body && document.body.style) {
51+
document.body.style.overflow = bodyOverflow;
4952
}
5053
}
5154

5255
}
5356

5457
componentDidUpdate(prevProps: Object): void {
5558
if (this.willOpen(prevProps, this.props)) {
56-
this.refs.wrap.focus();
59+
this.wrap.current.focus();
5760
}
5861
}
5962

6063
componentWillUnmount(): void {
61-
if (this.props.lockScroll && document.body && document.body.style) {
64+
const { lockScroll } = this.props;
65+
if (lockScroll && document.body && document.body.style) {
6266
document.body.style.removeProperty('overflow');
6367
}
6468
}
6569

6670
onKeyDown(e: SyntheticKeyboardEvent<any>): void {
67-
if (this.props.closeOnPressEscape && e.keyCode === 27) {
71+
const { closeOnPressEscape } = this.props;
72+
if (closeOnPressEscape && e.keyCode === 27) {
6873
this.close(e);
6974
}
7075
}
7176

7277
handleWrapperClick(e: SyntheticEvent<HTMLDivElement>): void {
78+
const { closeOnClickModal } = this.props;
7379
if (e.target instanceof HTMLDivElement) {
74-
if (this.props.closeOnClickModal && e.target === e.currentTarget) {
80+
if (closeOnClickModal && e.target === e.currentTarget) {
7581
this.close(e);
7682
}
7783
}
@@ -90,14 +96,14 @@ export default class Dialog extends Component {
9096
}
9197

9298
render(): React.DOM {
93-
const { visible, title, size, top, modal, customClass, showClose } = this.props;
99+
const { visible, title, size, top, modal, customClass, showClose, children } = this.props;
94100

95101
return (
96102
<div>
97103
<Transition name="dialog-fade">
98104
<View show={visible}>
99105
<div
100-
ref="wrap"
106+
ref={this.wrap}
101107
style={{ zIndex: 1013 }}
102108
className={this.classNames('el-dialog__wrapper')}
103109
onClick={e => this.handleWrapperClick(e)}
@@ -118,15 +124,15 @@ export default class Dialog extends Component {
118124
)
119125
}
120126
</div>
121-
{this.props.children}
127+
{children}
122128
</div>
123129
</div>
124130
</View>
125131
</Transition>
126132
{
127133
modal && (
128134
<View show={visible}>
129-
<div className="v-modal" style={{ zIndex: 1012 }}></div>
135+
<div className="v-modal" style={{ zIndex: 1012 }} />
130136
</View>
131137
)
132138
}

‎src/form/Form.jsx

-11
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,6 @@ export default class Form extends Component {
1818
}
1919
}
2020

21-
componentDidUpdate(newProps: Object): void {
22-
const {model} = newProps
23-
const oldModel = this.props.model
24-
if (!model) return
25-
const diff = Object.keys(model).filter(key => model[key] !== oldModel[key])
26-
if (diff.length) {
27-
this.state.fields.filter(({props}) => props.prop.match(diff))
28-
.map(field => field.validate('', () => undefined));
29-
}
30-
}
31-
3221
getChildContext(): { component: Form } {
3322
return {
3423
component: this

‎src/form/FormItem.jsx

+9-3
Original file line numberDiff line numberDiff line change
@@ -75,9 +75,10 @@ export default class FormItem extends Component {
7575

7676
return;
7777
}
78-
78+
7979
setTimeout(() => {
8080
this.validate('change');
81+
8182
});
8283
}
8384

@@ -152,8 +153,13 @@ export default class FormItem extends Component {
152153
const rules = this.getRules();
153154

154155
return rules.filter(rule => {
155-
return !rule.trigger || rule.trigger.indexOf(trigger) !== -1;
156-
});
156+
if (!rule.trigger || trigger === '') return true;
157+
if (Array.isArray(rule.trigger)) {
158+
return rule.trigger.indexOf(trigger) > -1;
159+
} else {
160+
return rule.trigger === trigger;
161+
}
162+
}).map(rule => Object.assign({}, rule));
157163
}
158164

159165
labelStyle(): { width?: number | string } {

‎src/message-box/MessageBox.jsx

+14-8
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
import React from 'react';
44
import { Component, PropTypes, Transition, View } from '../../libs';
5+
import { cleanScrollBar } from '../table/utils';
56
import Button from '../button';
67
import Input from '../input';
78
import i18n from '../locale';
@@ -32,9 +33,8 @@ export default class MessageBox extends Component {
3233
}
3334

3435
componentDidMount() {
35-
this.setState({
36-
visible: true
37-
})
36+
cleanScrollBar()
37+
this.setState({ visible: true });
3838
document.activeElement && document.activeElement.blur()
3939
}
4040

@@ -130,7 +130,9 @@ export default class MessageBox extends Component {
130130
<div style={{ position: 'absolute', zIndex: 2001 }}>
131131
<Transition
132132
name="msgbox-fade"
133-
onAfterLeave={() => { willUnmount && willUnmount() }}
133+
onAfterLeave={() => {
134+
willUnmount && willUnmount()
135+
}}
134136
>
135137
<View show={visible}>
136138
<div className={this.classNames('el-message-box__wrapper', customClass)}>
@@ -141,7 +143,8 @@ export default class MessageBox extends Component {
141143
<div className="el-message-box__title">{title}</div>
142144
{
143145
showClose && (
144-
<button type="button" className="el-message-box__headerbtn" aria-label="Close" onClick={this.handleAction.bind(this, 'cancel')}>
146+
<button type="button" className="el-message-box__headerbtn" aria-label="Close"
147+
onClick={this.handleAction.bind(this, 'cancel')}>
145148
<i className="el-message-box__close el-icon-close" />
146149
</button>
147150
)
@@ -153,7 +156,8 @@ export default class MessageBox extends Component {
153156
message && (
154157
<div className="el-message-box__content">
155158
<div className={this.classNames('el-message-box__status', this.typeClass())} />
156-
<div className="el-message-box__message" style={{ marginLeft: this.typeClass() ? '50px' : '0' }}>
159+
<div className="el-message-box__message"
160+
style={{ marginLeft: this.typeClass() ? '50px' : '0' }}>
157161
<div>{message}</div>
158162
</div>
159163
<View show={showInput}>
@@ -177,10 +181,12 @@ export default class MessageBox extends Component {
177181
}
178182
<div className="el-message-box__btns">
179183
<View show={showCancelButton}>
180-
<Button className={cancelButtonClass} onClick={this.handleAction.bind(this, 'cancel')}>{this.cancelButtonText()}</Button>
184+
<Button className={cancelButtonClass}
185+
onClick={this.handleAction.bind(this, 'cancel')}>{this.cancelButtonText()}</Button>
181186
</View>
182187
<View show={showConfirmButton}>
183-
<Button className={this.classNames('el-button--primary', confirmButtonClass)} onClick={this.handleAction.bind(this, 'confirm')}>{this.confirmButtonText()}</Button>
188+
<Button className={this.classNames('el-button--primary', confirmButtonClass)}
189+
onClick={this.handleAction.bind(this, 'confirm')}>{this.confirmButtonText()}</Button>
184190
</View>
185191
</div>
186192
</div>

0 commit comments

Comments
 (0)