-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
/
AlertsPage.js
117 lines (104 loc) · 3.94 KB
/
AlertsPage.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
import React from 'react';
import { PrismCode } from 'react-prism';
import { Alert } from 'reactstrap';
import PageTitle from '../UI/PageTitle';
import SectionTitle from '../UI/SectionTitle';
import AlertExample from '../examples/Alert';
const AlertExampleSource = require('!!raw-loader!../examples/Alert');
import AlertLinkExample from '../examples/AlertLink';
const AlertLinkExampleSource = require('!!raw-loader!../examples/AlertLink');
import AlertContentExample from '../examples/AlertContent';
const AlertContentExampleSource = require('!!raw-loader!../examples/AlertContent');
import AlertDismissExample from '../examples/AlertDismiss';
const AlertDismissExampleSource = require('!!raw-loader!../examples/AlertDismiss');
import AlertUncontrolledDismissExample from '../examples/AlertUncontrolledDismiss';
const AlertUncontrolledDismissExampleSource = require('!!raw-loader!../examples/AlertUncontrolledDismiss');
import {AlertFadelessExample, UncontrolledAlertFadelessExample} from '../examples/AlertFadeless';
const AlertFadelessExampleSource = require('!!raw-loader!../examples/AlertFadeless');
export default class AlertsPage extends React.Component {
render() {
return (
<div>
<PageTitle title="Alerts" />
<div className="docs-example">
<AlertExample />
</div>
<pre>
<PrismCode className="language-jsx">
{AlertExampleSource}
</PrismCode>
</pre>
<SectionTitle>Properties</SectionTitle>
<pre>
<PrismCode className="language-jsx">
{`Alert.propTypes = {
className: PropTypes.string,
closeClassName: PropTypes.string,
color: PropTypes.string, // default: 'success'
isOpen: PropTypes.bool, // default: true
toggle: PropTypes.func,
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
fade: PropTypes.bool, // default: true
// Controls the transition of the alert fading in and out
// See [Fade](/components/fade/) for more details
transition: PropTypes.shape(Fade.propTypes),
}`}
</PrismCode>
</pre>
<SectionTitle>Link color</SectionTitle>
<div className="docs-example">
<AlertLinkExample />
</div>
<pre>
<PrismCode className="language-jsx">
{AlertLinkExampleSource}
</PrismCode>
</pre>
<SectionTitle>Additional content</SectionTitle>
<div className="docs-example">
<AlertContentExample />
</div>
<pre>
<PrismCode className="language-jsx">
{AlertContentExampleSource}
</PrismCode>
</pre>
<SectionTitle>Dismissing</SectionTitle>
<div className="docs-example">
<AlertDismissExample />
</div>
<pre>
<PrismCode className="language-jsx">
{AlertDismissExampleSource}
</PrismCode>
</pre>
<SectionTitle>Uncontrolled [disable] Alerts</SectionTitle>
<p>
For the most basic use-case an uncontrolled component can provide the functionality wanted without the need to manage/control the state of the component. <code>UncontrolledAlert</code> does not require <code>isOpen</code> nor <code>toggle</code> props to work.
</p>
<div className="docs-example">
<AlertUncontrolledDismissExample />
</div>
<pre>
<PrismCode className="language-jsx">
{AlertUncontrolledDismissExampleSource}
</PrismCode>
</pre>
<SectionTitle>Alerts without fade</SectionTitle>
<p>
Fade can be disabled using <code>fade=false</code>.
</p>
<div className="docs-example">
<AlertFadelessExample />
<UncontrolledAlertFadelessExample />
</div>
<pre>
<PrismCode className="language-jsx">
{AlertFadelessExampleSource}
</PrismCode>
</pre>
</div>
);
}
}