Skip to content

Commit 9df3c19

Browse files
n7bestprogrape
n7best
authored and
progrape
committed
#58, patched searchbar, add iconSize for toast #62, change weui dependency to 0.4.1 (#63)
1 parent bf0278a commit 9df3c19

File tree

6 files changed

+88
-45
lines changed

6 files changed

+88
-45
lines changed

‎docs/toast.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
属性 | 类型 | 默认值 | 可选值 | 备注
77
-----|------|--------|-------|------|
88
icon|string|toast|所有icon|
9+
iconSize|string|'small'|small, large| icon size
910
show|bool|false|| 是否显示
1011

1112
示例：

‎example/pages/toast/index.js

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,10 @@ export default class ToastDemo extends React.Component {
1313
state = {
1414
showToast: false,
1515
showLoading: false,
16+
showCustom: false,
1617
toastTimer: null,
17-
loadingTimer: null
18+
loadingTimer: null,
19+
customTimer: null
1820
};
1921

2022
componentWillUnmount() {
@@ -26,7 +28,13 @@ export default class ToastDemo extends React.Component {
2628
return (
2729
<Page className="toast" title="Toast" spacing>
2830
<Button onClick={this.showToast.bind(this)}>Toast</Button>
31+
<Button onClick={this.showCustom.bind(this)}>Custom Toast</Button>
2932
<Button onClick={this.showLoading.bind(this)}>Loading</Button>
33+
<Toast
34+
show={this.state.showCustom}
35+
icon="waiting_circle"
36+
iconSize="large"
37+
>waiting...</Toast>
3038
<Toast show={this.state.showToast}>完成</Toast>
3139
<Toast icon="loading" show={this.state.showLoading}>正在加载中...</Toast>
3240
</Page>
@@ -48,4 +56,12 @@ export default class ToastDemo extends React.Component {
4856
this.setState({showLoading: false});
4957
}, 2000);
5058
}
59+
60+
showCustom() {
61+
this.setState({showCustom: true});
62+
63+
this.state.customTimer = setTimeout(()=> {
64+
this.setState({showCustom: false});
65+
}, 2000);
66+
}
5167
};

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,6 @@
6666
"url-loader": "^0.5.7",
6767
"webpack": "^1.12.2",
6868
"webpack-dev-server": "^1.12.1",
69-
"weui": "^0.4.0"
69+
"weui": "^0.4.1"
7070
}
7171
}

‎src/components/searchbar/searchbar.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,12 @@ class SearchBar extends React.Component {
7272
onChange={this.changeHandle.bind(this)}
7373
value={this.state.text}
7474
/>
75-
<a className='weui_icon_clear' onMouseDown={this.clearHandle.bind(this)}/>
75+
{/*React will not trigger onMouseDown when not onClick presented*/}
76+
<a
77+
className='weui_icon_clear'
78+
onClick={e=>e/*issues #59*/}
79+
onMouseDown={this.clearHandle.bind(this)}
80+
/>
7681
</div>
7782
<label
7883
className='weui_search_text'

‎src/components/toast/toast.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,22 +13,23 @@ import Icon from '../icon/index';
1313
class Toast extends React.Component {
1414
static propTypes = {
1515
icon: React.PropTypes.string,
16+
iconSize: React.PropTypes.string,
1617
show: React.PropTypes.bool
1718
};
1819

1920
static defaultProps = {
2021
icon: 'toast',
21-
show: false
22+
show: false,
2223
};
2324

2425
render() {
25-
const {icon, show, children} = this.props;
26+
const {icon, show, children, iconSize} = this.props;
2627

2728
return (
2829
<div className={icon === 'loading' ? 'weui_loading_toast' : ''} style={{display: show ? 'block' : 'none'}}>
2930
<Mask transparent={true}/>
3031
<div className="weui_toast">
31-
<Icon value={icon}/>
32+
<Icon value={icon} size={iconSize}/>
3233
<p className="weui_toast_content">{children}</p>
3334
</div>
3435
</div>

‎test/toast.js

Lines changed: 59 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -12,51 +12,71 @@ import WeUI from '../src/index';
1212
const {Toast, Mask, Icon} = WeUI;
1313

1414
describe('<Toast></Toast>', ()=> {
15-
[undefined, null, false, true].map((show) => {
16-
['toast', 'loading'].map((icon) => {
17-
describe(`<Toast icon="${icon}" show="${show}"></Toast>`, ()=> {
18-
const body = '加载中...';
19-
const wrapper = shallow(
20-
<Toast show={show} icon={icon}>
21-
{body}
22-
</Toast>
23-
);
15+
['small', 'large'].map((iconSize) => {
16+
[undefined, null, false, true].map((show) => {
17+
['toast', 'loading'].map((icon) => {
18+
describe(`<Toast icon="${icon}" iconSize="${iconSize}" show="${show}"></Toast>`, ()=> {
19+
const body = '加载中...';
20+
const wrapper = shallow(
21+
<Toast show={show} icon={icon} iconSize={iconSize}>
22+
{body}
23+
</Toast>
24+
);
2425

25-
it(`should render <Toast></Toast> component`, () => {
26-
assert(wrapper.instance() instanceof Toast);
27-
assert(wrapper.find('.weui_toast'));
28-
});
26+
it(`should render <Toast></Toast> component`, () => {
27+
assert(wrapper.instance() instanceof Toast);
28+
assert(wrapper.find('.weui_toast'));
29+
});
2930

30-
it(`should be hidden when 'show' attribute is false`, ()=> {
31-
if (show) {
32-
assert(wrapper.prop('style').display === 'block');
33-
}
34-
else {
35-
assert(wrapper.prop('style').display === 'none');
36-
}
37-
});
31+
it(`should be hidden when 'show' attribute is false`, ()=> {
32+
if (show) {
33+
assert(wrapper.prop('style').display === 'block');
34+
}
35+
else {
36+
assert(wrapper.prop('style').display === 'none');
37+
}
38+
});
3839

39-
it(`should have a transparent mask`, ()=> {
40-
const mask = wrapper.find(Mask).shallow();
41-
assert(mask.instance() instanceof Mask);
42-
assert(!mask.hasClass('weui_mask'));
43-
assert(mask.hasClass('weui_mask_transparent'));
44-
});
40+
it(`should have a transparent mask`, ()=> {
41+
const mask = wrapper.find(Mask).shallow();
42+
assert(mask.instance() instanceof Mask);
43+
assert(!mask.hasClass('weui_mask'));
44+
assert(mask.hasClass('weui_mask_transparent'));
45+
});
4546

46-
it(`should have a icon`, ()=> {
47-
const icon = wrapper.find(Icon).shallow();
48-
assert(icon.instance() instanceof Icon);
49-
});
47+
it(`should have a icon`, ()=> {
48+
const icon = wrapper.find(Icon).shallow();
49+
assert(icon.instance() instanceof Icon);
50+
});
5051

51-
it(`should have 'weui_loading_toast' class name when icon is 'loading'`, ()=> {
52-
if (icon === 'loading') {
53-
assert(wrapper.hasClass('weui_loading_toast'));
54-
}
55-
});
52+
it(`should have a icon with appropriate size`, ()=> {
53+
const icon = wrapper.find(Icon).shallow();
54+
assert(icon.instance() instanceof Icon);
55+
});
56+
57+
it(`should have a icon with appropriate size: ${iconSize}`, ()=> {
58+
const iconWrapper = wrapper.find(Icon).shallow();
59+
//exclude loading case
60+
if(icon != 'loading'){
61+
if (iconSize === 'large') {
62+
assert(iconWrapper.hasClass('weui_icon_msg'));
63+
}
64+
else {
65+
assert(!iconWrapper.hasClass('weui_icon_msg'));
66+
}
67+
}
68+
});
69+
70+
it(`should have 'weui_loading_toast' class name when icon is 'loading'`, ()=> {
71+
if (icon === 'loading') {
72+
assert(wrapper.hasClass('weui_loading_toast'));
73+
}
74+
});
5675

57-
it(`should have body`, ()=> {
58-
const $body = wrapper.find('.weui_toast_content');
59-
assert($body.text() === body);
76+
it(`should have body`, ()=> {
77+
const $body = wrapper.find('.weui_toast_content');
78+
assert($body.text() === body);
79+
});
6080
});
6181
});
6282
});

0 commit comments

Comments
 (0)