Skip to content

Commit 1301b11

Browse files
LiJinyaoeddywashere
LiJinyao
authored and
eddywashere
committed
feat(ListGroup): prevent onClick when disabled & add docs #185 (#236)
* init ListGroup doc * Prevent click event when disabled. * set contextual classes by pass status props directly I use a color prop to pass contextual classes info to the component, when you want to set a status, you must type `color=“success”`. It trivially to do so. Now you just need pass a `success` bool prop to show the status. * ListGroup Doc * add test for disabled item * change back to color prop * remove Container * move disable handler function out
1 parent 656ee2d commit 1301b11

12 files changed

Lines changed: 229 additions & 1 deletion

‎docs/lib/Components/ListGroupPage.js‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
2+
import React from 'react';
3+
import { PrismCode } from 'react-prism';
4+
import Helmet from 'react-helmet';
5+
import ListGroupExample from '../examples/ListGroup';
6+
import ListGroupTagExample from '../examples/ListGroupTag';
7+
import ListGroupDisabledItemsExample from '../examples/ListGroupDisabledItems';
8+
import ListGroupAnchorsAndButtonsExample from '../examples/ListGroupAnchorsAndButtons';
9+
import ListGroupContextualClassesExample from '../examples/ListGroupContextualClasses';
10+
import ListGroupCustomContentExample from '../examples/ListGroupCustomContent';
11+
12+
const ListGroupTagExampleSource = require('!!raw!../examples/ListGroupTag');
13+
const ListGroupExampleSource = require('!!raw!../examples/ListGroup');
14+
const ListGroupDisabledItemsExampleSource = require('!!raw!../examples/ListGroupDisabledItems');
15+
const ListGroupAnchorsAndButtonsExampleSource = require('!!raw!../examples/ListGroupAnchorsAndButtons');
16+
const ListGroupContextualClassesExampleSource = require('!!raw!../examples/ListGroupContextualClasses');
17+
const ListGroupCustomContentExampleSource = require('!!raw!../examples/ListGroupCustomContent');
18+
19+
export default class ListGroupPage extends React.Component {
20+
render() {
21+
return (
22+
<div>
23+
<Helmet title="ListGroup Components" />
24+
<h3>ListGroup</h3>
25+
<div className="docs-example">
26+
<ListGroupExample />
27+
</div>
28+
<pre>
29+
<PrismCode className="language-jsx">
30+
{ListGroupExampleSource}
31+
</PrismCode>
32+
</pre>
33+
34+
<legend>Tags</legend>
35+
<div className="docs-example">
36+
<ListGroupTagExample />
37+
</div>
38+
<pre>
39+
<PrismCode className="language-jsx">
40+
{ListGroupTagExampleSource}
41+
</PrismCode>
42+
</pre>
43+
44+
<legend>Disabled items</legend>
45+
<div className="docs-example">
46+
<ListGroupDisabledItemsExample />
47+
</div>
48+
<pre>
49+
<PrismCode className="language-jsx">
50+
{ListGroupDisabledItemsExampleSource}
51+
</PrismCode>
52+
</pre>
53+
54+
<legend>Anchors and buttons</legend>
55+
<div className="docs-example">
56+
<p>Note: you need add action props to make these buttons fit the list.</p>
57+
<ListGroupAnchorsAndButtonsExample />
58+
</div>
59+
<pre>
60+
<PrismCode className="language-jsx">
61+
{ListGroupAnchorsAndButtonsExampleSource}
62+
</PrismCode>
63+
</pre>
64+
65+
<legend>Contextual classes</legend>
66+
<div className="docs-example">
67+
<ListGroupContextualClassesExample />
68+
</div>
69+
<pre>
70+
<PrismCode className="language-jsx">
71+
{ListGroupContextualClassesExampleSource}
72+
</PrismCode>
73+
</pre>
74+
75+
<legend>Custom content</legend>
76+
<div className="docs-example">
77+
<ListGroupCustomContentExample />
78+
</div>
79+
<pre>
80+
<PrismCode className="language-jsx">
81+
{ListGroupCustomContentExampleSource}
82+
</PrismCode>
83+
</pre>
84+
</div>
85+
);
86+
}
87+
}

‎docs/lib/Components/index.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,10 @@ class Components extends React.Component {
112112
{
113113
name: 'Collapse',
114114
to: '/components/collapse/',
115+
},
116+
{
117+
name: 'List Group',
118+
to: '/components/listgroup/'
115119
}
116120
]
117121
};

‎docs/lib/examples/ListGroup.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
import { ListGroup, ListGroupItem } from 'reactstrap';
3+
4+
export default class Example extends React.Component {
5+
render() {
6+
return (
7+
<ListGroup>
8+
<ListGroupItem>Cras justo odio</ListGroupItem>
9+
<ListGroupItem>Dapibus ac facilisis in</ListGroupItem>
10+
<ListGroupItem>Morbi leo risus</ListGroupItem>
11+
<ListGroupItem>Porta ac consectetur ac</ListGroupItem>
12+
<ListGroupItem>Vestibulum at eros</ListGroupItem>
13+
</ListGroup>
14+
);
15+
}
16+
}

‎docs/lib/examples/ListGroupAnchorsAndButtons.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react';
2+
import { ListGroup, ListGroupItem } from 'reactstrap';
3+
4+
export default class Example extends React.Component {
5+
render() {
6+
return (
7+
<div>
8+
<h3>Anchors </h3>
9+
<p>Be sure to <strong>not use the standard <code>.btn</code> classes here</strong>.</p>
10+
<ListGroup>
11+
<ListGroupItem active tag="a" href="#" action>Cras justo odio</ListGroupItem>
12+
<ListGroupItem tag="a" href="#" action>Dapibus ac facilisis in</ListGroupItem>
13+
<ListGroupItem tag="a" href="#" action>Morbi leo risus</ListGroupItem>
14+
<ListGroupItem tag="a" href="#" action>Porta ac consectetur ac</ListGroupItem>
15+
<ListGroupItem disabled tag="a" href="#" action>Vestibulum at eros</ListGroupItem>
16+
</ListGroup>
17+
<p />
18+
<h3>Buttons </h3>
19+
<ListGroup>
20+
<ListGroupItem active tag="button" action>Cras justo odio</ListGroupItem>
21+
<ListGroupItem tag="button" action>Dapibus ac facilisis in</ListGroupItem>
22+
<ListGroupItem tag="button" action>Morbi leo risus</ListGroupItem>
23+
<ListGroupItem tag="button" action>Porta ac consectetur ac</ListGroupItem>
24+
<ListGroupItem disabled tag="button" action>Vestibulum at eros</ListGroupItem>
25+
</ListGroup>
26+
</div>
27+
);
28+
}
29+
}

‎docs/lib/examples/ListGroupContextualClasses.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react';
2+
import { ListGroup, ListGroupItem } from 'reactstrap';
3+
4+
export default class Example extends React.Component {
5+
render() {
6+
return (
7+
<ListGroup>
8+
<ListGroupItem color="success">Cras justo odio</ListGroupItem>
9+
<ListGroupItem color="info">Dapibus ac facilisis in</ListGroupItem>
10+
<ListGroupItem color="warning">Morbi leo risus</ListGroupItem>
11+
<ListGroupItem color="danger">Porta ac consectetur ac</ListGroupItem>
12+
</ListGroup>
13+
);
14+
}
15+
}

‎docs/lib/examples/ListGroupCustomContent.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react';
2+
import { ListGroup, ListGroupItem, ListGroupItemHeading, ListGroupItemText } from 'reactstrap';
3+
4+
export default class Example extends React.Component {
5+
render() {
6+
return (
7+
<ListGroup>
8+
<ListGroupItem active>
9+
<ListGroupItemHeading>List group item heading</ListGroupItemHeading>
10+
<ListGroupItemText>
11+
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
12+
</ListGroupItemText>
13+
</ListGroupItem>
14+
<ListGroupItem>
15+
<ListGroupItemHeading>List group item heading</ListGroupItemHeading>
16+
<ListGroupItemText>
17+
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
18+
</ListGroupItemText>
19+
</ListGroupItem>
20+
<ListGroupItem>
21+
<ListGroupItemHeading>List group item heading</ListGroupItemHeading>
22+
<ListGroupItemText>
23+
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
24+
</ListGroupItemText>
25+
</ListGroupItem>
26+
</ListGroup>
27+
);
28+
}
29+
}

‎docs/lib/examples/ListGroupDisabledItems.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
import { ListGroup, ListGroupItem } from 'reactstrap';
3+
4+
export default class Example extends React.Component {
5+
render() {
6+
return (
7+
<ListGroup>
8+
<ListGroupItem disabled tag="a" href="#">Cras justo odio</ListGroupItem>
9+
<ListGroupItem tag="a" href="#">Dapibus ac facilisis in</ListGroupItem>
10+
<ListGroupItem tag="a" href="#">Morbi leo risus</ListGroupItem>
11+
<ListGroupItem tag="a" href="#">Porta ac consectetur ac</ListGroupItem>
12+
<ListGroupItem tag="a" href="#">Vestibulum at eros</ListGroupItem>
13+
</ListGroup>
14+
);
15+
}
16+
}

‎docs/lib/examples/ListGroupTag.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react';
2+
import { ListGroup, ListGroupItem, Tag } from 'reactstrap';
3+
4+
export default class Example extends React.Component {
5+
render() {
6+
return (
7+
<ListGroup>
8+
<ListGroupItem><Tag pill className="float-xs-right">14</Tag>Cras justo odio</ListGroupItem>
9+
<ListGroupItem><Tag pill className="float-xs-right">2</Tag>Dapibus ac facilisis in</ListGroupItem>
10+
<ListGroupItem><Tag pill className="float-xs-right">1</Tag>Morbi leo risus</ListGroupItem>
11+
</ListGroup>
12+
);
13+
}
14+
}

‎docs/lib/routes.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import TabsPage from './Components/TabsPage';
2424
import JumbotronPage from './Components/JumbotronPage';
2525
import AlertsPage from './Components/AlertsPage';
2626
import CollapsePage from './Components/CollapsePage';
27+
import ListGroupPage from './Components/ListGroupPage';
2728
import NotFound from './NotFound';
2829
import Components from './Components';
2930
import UI from './UI';
@@ -56,6 +57,7 @@ const routes = (
5657
<Route path="alerts/" component={AlertsPage} />
5758
<Route path="jumbotron/" component={JumbotronPage} />
5859
<Route path="collapse/" component={CollapsePage} />
60+
<Route path="listgroup/" component={ListGroupPage} />
5961
</Route>
6062
<Route path="*" component={NotFound} />
6163
</Route>

‎src/ListGroupItem.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@ const defaultProps = {
1414
tag: 'li'
1515
};
1616

17+
const handleDisabledOnClick = (e) => {
18+
e.preventDefault();
19+
};
20+
1721
const ListGroupItem = (props) => {
1822
const {
1923
className,
@@ -33,6 +37,10 @@ const ListGroupItem = (props) => {
3337
'list-group-item'
3438
);
3539

40+
// Prevent click event when disabled.
41+
if (disabled) {
42+
attributes.onClick = handleDisabledOnClick;
43+
}
3644
return (
3745
<Tag {...attributes} className={classes} />
3846
);

0 commit comments

Comments
 (0)