Skip to content

Commit a09719a

Browse files
committed
#68 Cell* 增加支持传入自定义 className
1 parent 4a577ad commit a09719a

File tree

10 files changed

+55
-25
lines changed

10 files changed

+55
-25
lines changed

src/components/cell/cell_body.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,15 @@ import classNames from 'classnames';
99

1010
export default class CellBody extends React.Component {
1111
render() {
12-
const {children, ...others} = this.props;
13-
const className = classNames({
12+
const {className, children, ...others} = this.props;
13+
const cls = classNames({
1414
weui_cell_bd: true,
15-
weui_cell_primary: true
15+
weui_cell_primary: true,
16+
[className]: className
1617
});
1718

1819
return (
19-
<div className={className} {...others}>{children}</div>
20+
<div className={cls} {...others}>{children}</div>
2021
);
2122
}
2223
};

src/components/cell/cell_footer.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,14 @@ import classNames from 'classnames';
99

1010
export default class CellFooter extends React.Component {
1111
render() {
12-
const {children, ...others} = this.props;
13-
const className = classNames({
14-
weui_cell_ft: true
12+
const {className, children, ...others} = this.props;
13+
const cls = classNames({
14+
weui_cell_ft: true,
15+
[className]: className
1516
});
1617

1718
return (
18-
<div className={className} {...others}>{children}</div>
19+
<div className={cls} {...others}>{children}</div>
1920
);
2021
}
2122
};

src/components/cell/cell_header.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,14 @@ import classNames from 'classnames';
99

1010
export default class CellHeader extends React.Component {
1111
render() {
12-
const {children, ...others} = this.props;
13-
const className = classNames({
14-
weui_cell_hd: true
12+
const {className, children, ...others} = this.props;
13+
const cls = classNames({
14+
weui_cell_hd: true,
15+
[className]: className
1516
});
1617

1718
return (
18-
<div className={className} {...others}>{children}</div>
19+
<div className={cls} {...others}>{children}</div>
1920
);
2021
}
2122
};

src/components/cell/cells_tips.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,14 @@ import classNames from 'classnames';
99

1010
export default class CellsTips extends React.Component {
1111
render() {
12-
const {children, ...others} = this.props;
13-
const className = classNames({
14-
weui_cells_tips: true
12+
const {className, children, ...others} = this.props;
13+
const cls = classNames({
14+
weui_cells_tips: true,
15+
[className]: className
1516
});
1617

1718
return (
18-
<div className={className} {...others}>{children}</div>
19+
<div className={cls} {...others}>{children}</div>
1920
);
2021
}
2122
};

src/components/cell/cells_title.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,14 @@ import classNames from 'classnames';
99

1010
export default class CellsTitle extends React.Component {
1111
render() {
12-
const {children, ...others} = this.props;
13-
const className = classNames({
14-
weui_cells_title: true
12+
const {className, children, ...others} = this.props;
13+
const cls = classNames({
14+
weui_cells_title: true,
15+
[className]: className
1516
});
1617

1718
return (
18-
<div className={className} {...others}>{children}</div>
19+
<div className={cls} {...others}>{children}</div>
1920
);
2021
}
2122
};

test/cell_body.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,9 @@ describe('<CellBody></CellBody>', ()=> {
1515

1616
['cell body wording', <img src="http://mmrb.github.io/avatar/jf.jpg" />, <div><h2 className="title">文章标题</h2><p className="desc">文章描述</p></div>].map((child)=>{
1717
describe(`<CellBody>${child}</CellBody>`, ()=>{
18+
const customClassName = 'customClassName1 customClassName2';
1819
const wrapper = shallow(
19-
<CellBody>{child}</CellBody>
20+
<CellBody className={customClassName}>{child}</CellBody>
2021
);
2122

2223
it(`should render <CellBody></CellBody> component `, ()=>{
@@ -27,6 +28,10 @@ describe('<CellBody></CellBody>', ()=> {
2728
assert(wrapper.hasClass(`weui_cell_bd`));
2829
});
2930

31+
it(`should have custom class name ${customClassName}`, ()=> {
32+
assert(wrapper.hasClass(customClassName));
33+
});
34+
3035
it(`should have child ${child}`, ()=>{
3136
assert(wrapper.contains(child));
3237
});

test/cell_footer.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,9 @@ describe('<CellFooter></CellFooter>', ()=> {
1515

1616
['cell footer wording', <img src="http://mmrb.github.io/avatar/bear.jpg" />].map((child)=>{
1717
describe(`<CellFooter>${child}</CellFooter>`, ()=>{
18+
const customClassName = 'customClassName1 customClassName2';
1819
const wrapper = shallow(
19-
<CellFooter>{child}</CellFooter>
20+
<CellFooter className={customClassName}>{child}</CellFooter>
2021
);
2122

2223
it(`should render <CellFooter></CellFooter> component `, ()=>{
@@ -27,6 +28,10 @@ describe('<CellFooter></CellFooter>', ()=> {
2728
assert(wrapper.hasClass(`weui_cell_ft`));
2829
});
2930

31+
it(`should have custom class name ${customClassName}`, ()=> {
32+
assert(wrapper.hasClass(customClassName));
33+
});
34+
3035
it(`should have child ${child}`, ()=>{
3136
assert(wrapper.contains(child));
3237
});

test/cell_header.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,9 @@ describe('<CellHeader></CellHeader>', ()=> {
1515

1616
['cell header wording', <img src="http://mmrb.github.io/avatar/jf.jpg" />, <p>cell header wording</p>].map((child)=>{
1717
describe(`<CellHeader>${child}</CellHeader>`, ()=>{
18+
const customClassName = 'customClassName1 customClassName2';
1819
const wrapper = shallow(
19-
<CellHeader>{child}</CellHeader>
20+
<CellHeader className={customClassName}>{child}</CellHeader>
2021
);
2122

2223
it(`should render <CellHeader></CellHeader> component `, ()=>{
@@ -27,6 +28,10 @@ describe('<CellHeader></CellHeader>', ()=> {
2728
assert(wrapper.hasClass(`weui_cell_hd`));
2829
});
2930

31+
it(`should have custom class name ${customClassName}`, ()=> {
32+
assert(wrapper.hasClass(customClassName));
33+
});
34+
3035
it(`should have child ${child}`, ()=>{
3136
assert(wrapper.contains(child));
3237
});

test/cells_tips.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,9 @@ const {CellsTips} = WeUI;
1414
describe('<CellsTips></CellsTips>', ()=> {
1515

1616
const text = `cells tips wording`;
17+
const customClassName = 'customClassName1 customClassName2';
1718
const wrapper = shallow(
18-
<CellsTips>{text}</CellsTips>
19+
<CellsTips className={customClassName}>{text}</CellsTips>
1920
);
2021

2122
it(`should render <CellsTips></CellsTips> component `, ()=>{
@@ -26,6 +27,10 @@ describe('<CellsTips></CellsTips>', ()=> {
2627
assert(wrapper.hasClass(`weui_cells_tips`));
2728
});
2829

30+
it(`should have custom class name ${customClassName}`, ()=> {
31+
assert(wrapper.hasClass(customClassName));
32+
});
33+
2934
it(`should have text ${text}`, ()=>{
3035
assert(wrapper.text() === text);
3136
});

test/cells_title.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,9 @@ const {CellsTitle} = WeUI;
1414
describe('<CellsTitle></CellsTitle>', ()=> {
1515

1616
const text = `cells tips wording`;
17+
const customClassName = 'customClassName1 customClassName2';
1718
const wrapper = shallow(
18-
<CellsTitle>{text}</CellsTitle>
19+
<CellsTitle className={customClassName}>{text}</CellsTitle>
1920
);
2021

2122
it(`should render <CellsTitle></CellsTitle> component `, ()=>{
@@ -26,6 +27,10 @@ describe('<CellsTitle></CellsTitle>', ()=> {
2627
assert(wrapper.hasClass(`weui_cells_title`));
2728
});
2829

30+
it(`should have custom class name ${customClassName}`, ()=> {
31+
assert(wrapper.hasClass(customClassName));
32+
});
33+
2934
it(`should have text ${text}`, ()=>{
3035
assert(wrapper.text() === text);
3136
});

0 commit comments

Comments
 (0)