/
PopoversPage.js
124 lines (121 loc) · 4.2 KB
/
PopoversPage.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
118
119
120
121
122
123
124
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
import React from 'react';
import { PrismCode } from 'react-prism';
import PageTitle from '../UI/PageTitle';
import SectionTitle from '../UI/SectionTitle';
import PopoverExample from '../examples/Popover';
const PopoverExampleSource = require('!!raw-loader!../examples/Popover');
import PopoverExampleMulti from '../examples/PopoverMulti';
const PopoverExampleMultiSource = require('!!raw-loader!../examples/PopoverMulti');
import PopoverFocusExample from '../examples/PopoverFocus';
const PopoverFocusExampleSource = require('!!raw-loader!../examples/PopoverFocus');
import UncontrolledPopoverExample from '../examples/PopoverUncontrolled';
const UncontrolledPopoverExampleSource = require('!!raw-loader!../examples/PopoverUncontrolled');
export default class PopoversPage extends React.Component {
render() {
return (
<div>
<PageTitle title="Popovers" />
<p>Popovers are built with <a href="https://popper.js.org/">https://popper.js.org/</a> via <a href="https://github.com/souporserious/react-popper">https://github.com/souporserious/react-popper</a>.</p>
<div className="docs-example">
<PopoverExample />
</div>
<pre>
<PrismCode className="language-jsx">
{PopoverExampleSource}
</PrismCode>
</pre>
<h4>Properties</h4>
<pre>
<PrismCode className="language-jsx">
{`Popover.propTypes = {
// space separated list of triggers (e.g. "click hover focus")
trigger: PropTypes.string,
// boolean to control the state of the popover
isOpen: PropTypes.bool,
// callback for toggling isOpen in the controlling component
toggle: PropTypes.func,
// boundaries for popper, can be scrollParent, window, viewport, or any DOM element
boundariesElement: PropTypes.oneOfType([PropTypes.string, DOMElement]),
target: PropTypes.oneOfType([
PropTypes.string,
PropTypes.func,
DOMElement, // instanceof Element (https://developer.mozilla.org/en-US/docs/Web/API/Element)
]).isRequired,
// Where to inject the popper DOM node, default to body
container: PropTypes.oneOfType([PropTypes.string, PropTypes.func, DOMElement]),
className: PropTypes.string,
// Apply class to the inner-popover
innerClassName: PropTypes.string,
disabled: PropTypes.bool,
hideArrow: PropTypes.bool,
placementPrefix: PropTypes.string,
delay: PropTypes.oneOfType([
PropTypes.shape({ show: PropTypes.number, hide: PropTypes.number }),
PropTypes.number,
]),
placement: PropTypes.oneOf([
'auto',
'auto-start',
'auto-end',
'top',
'top-start',
'top-end',
'right',
'right-start',
'right-end',
'bottom',
'bottom-start',
'bottom-end',
'left',
'left-start',
'left-end',
]),
// Custom modifiers that are passed to Popper.js, see https://popper.js.org/popper-documentation.html#modifiers
modifiers: PropTypes.object,
offset: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number
]),
// Whether to show/hide the popover with a fade effect
// (default: true)
fade: PropTypes.bool,
// Whether to flip the direction of the popover if too close to
// the container edge
// (default: true)
flip: PropTypes.bool,
}`}
</PrismCode>
</pre>
<SectionTitle>Popovers Trigger</SectionTitle>
<p>Trigger each popover to see information about the trigger</p>
<div className="docs-example">
<PopoverFocusExample />
</div>
<pre>
<PrismCode className="language-jsx">
{PopoverFocusExampleSource}
</PrismCode>
</pre>
<SectionTitle>Popovers Placements</SectionTitle>
<div className="docs-example">
<PopoverExampleMulti />
</div>
<pre>
<PrismCode className="language-jsx">
{PopoverExampleMultiSource}
</PrismCode>
</pre>
<SectionTitle>UncontrolledPopovers</SectionTitle>
<div className="docs-example">
<UncontrolledPopoverExample />
</div>
<pre>
<PrismCode className="language-jsx">
{UncontrolledPopoverExampleSource}
</PrismCode>
</pre>
</div>
);
}
}