Skip to content

Commit f6e7609

Browse files
chrismcvchrismcv
committed
popover component
1 parent bb6cbf4 commit f6e7609

File tree

7 files changed

+639
-0
lines changed

7 files changed

+639
-0
lines changed

‎docs/src/app/app-routes.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ const LeftNav = require('./components/pages/components/left-nav');
3636
const Lists = require('./components/pages/components/lists');
3737
const Menus = require('./components/pages/components/menus');
3838
const Paper = require('./components/pages/components/paper');
39+
const Popover = require('./components/pages/components/popover');
3940
const Progress = require('./components/pages/components/progress');
4041
const RefreshIndicator = require('./components/pages/components/refresh-indicator');
4142
const Sliders = require('./components/pages/components/sliders');
@@ -92,6 +93,7 @@ const AppRoutes = (
9293
<Route path="lists" component={Lists} />
9394
<Route path="menus" component={Menus} />
9495
<Route path="paper" component={Paper} />
96+
<Route path="popover" component={Popover} />
9597
<Route path="progress" component={Progress} />
9698
<Route path="refresh-indicator" component={RefreshIndicator} />
9799
<Route path="sliders" component={Sliders} />

‎docs/src/app/components/pages/components.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export default class Components extends React.Component {
2121
{ route: '/components/lists', text: 'Lists'},
2222
{ route: '/components/menus', text: 'Menus'},
2323
{ route: '/components/paper', text: 'Paper'},
24+
{ route: '/components/popover', text: 'Popover'},
2425
{ route: '/components/progress', text: 'Progress'},
2526
{ route: '/components/refresh-indicator', text: 'Refresh Indicator'},
2627
{ route: '/components/sliders', text: 'Sliders'},

‎docs/src/app/components/pages/components/popover.jsx‎

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
let React = require('react');
2+
let { Popover, RadioButton, RaisedButton, SelectField, TextField } = require('material-ui');
3+
let ComponentDoc = require('../../component-doc');
4+
let Code = require('popover-code');
5+
let CodeExample = require('../../code-example/code-example');
6+
7+
8+
let PopoverPage = React.createClass({
9+
getInitialState() {
10+
return {
11+
selectValue:'1',
12+
textValue:'here is a value',
13+
activePopover:'none',
14+
anchorOrigin:{horizontal:'left', vertical:'bottom'},
15+
targetOrigin:{horizontal:'left', vertical:'top'},
16+
}
17+
},
18+
19+
render() {
20+
21+
let componentInfo = [
22+
{
23+
name: 'Props',
24+
infoArray: [
25+
{
26+
name: 'anchorOrigin',
27+
type: 'origin object',
28+
header: 'optional',
29+
desc:
30+
'This is the point on the anchor where the popover targetOrigin will stick to.\n' +
31+
'Options:\n'+
32+
'vertical: [top, middle, bottom]\n' +
33+
'horizontal: [left, center, right]\n',
34+
},
35+
{
36+
name: 'targetOrigin',
37+
type: 'origin object',
38+
header: 'optional',
39+
desc:
40+
'This is the point on the popover which will stick to the anchors origin.' +
41+
'Options:'+
42+
'vertical: [top, middle, bottom]' +
43+
'horizontal: [left, center, right]',
44+
},
45+
{
46+
name: 'animated',
47+
type: 'bool',
48+
header: 'default: false',
49+
desc: 'If true, the popover will apply transitions when added it gets added to the DOM.',
50+
},
51+
{
52+
name: 'autoCloseWhenOffScreen',
53+
type: 'bool',
54+
header: 'default: true',
55+
desc: 'If true, the popover will hide when the anchor scrolls off the screen',
56+
},
57+
{
58+
name: 'canAutoPosition',
59+
type: 'bool',
60+
header: 'default: true',
61+
desc: 'If true, the popover (potentially) ignores targetOrigin and anchorOrigin to make itself fit on screen,' +
62+
'which is useful for mobile devices.',
63+
},
64+
{
65+
name: 'open',
66+
type: 'bool',
67+
header: 'default: false',
68+
desc: 'Controls the visibility of the popover.',
69+
},
70+
{
71+
name: 'onRequestClose',
72+
type: 'func',
73+
header: 'default: no-op',
74+
desc: 'This is a callback that fires when the popover thinks it should close. (e.g. click-away or scroll off-screen)',
75+
},
76+
{
77+
name: 'zDepth',
78+
type: 'number (0-5)',
79+
header: 'default: 1',
80+
desc: 'This number represents the zDepth of the paper shadow.',
81+
},
82+
],
83+
},
84+
];
85+
86+
let menuItems = [
87+
{ payload: '1', text: 'Never' },
88+
{ payload: '2', text: 'Every Night' },
89+
{ payload: '3', text: 'Weeknights' },
90+
{ payload: '4', text: 'Weekends' },
91+
{ payload: '5', text: 'Weekly' },
92+
];
93+
94+
return (
95+
<ComponentDoc
96+
name="Popover"
97+
componentInfo={componentInfo}>
98+
<CodeExample code={Code}>
99+
<RaisedButton onClick={this.show.bind(this, "pop")} label="Click on me to show a popover" />
100+
<br/>
101+
<br/>
102+
103+
<em>Note that in this version, the select field causes nasty scrolling,
104+
an upcoming PR will fix, which updates SelectField to use the popover for itself!</em>
105+
<br/>
106+
<h2>Position Options</h2>
107+
<p>Use the settings below to toggle the positioning of the popovers above</p>
108+
<strong>Current Settings</strong>
109+
<br/>
110+
<pre>
111+
anchorOrigin: {JSON.stringify(this.state.anchorOrigin)}
112+
<br/>
113+
targetOrigin: {JSON.stringify(this.state.targetOrigin)}
114+
</pre>
115+
<h3>Anchor Origin</h3>
116+
<div style={{float:'left'}}>
117+
<strong>Vertical</strong>
118+
<RadioButton onClick={this.setAnchor.bind(this, 'vertical', 'top')} label="Top" checked={this.state.anchorOrigin.vertical === "top"} />
119+
<RadioButton onClick={this.setAnchor.bind(this, 'vertical', 'center')} label="Center" checked={this.state.anchorOrigin.vertical === "center"} />
120+
<RadioButton onClick={this.setAnchor.bind(this, 'vertical', 'bottom')} label="Bottom" checked={this.state.anchorOrigin.vertical === "bottom"} />
121+
</div>
122+
<div style={{float:'left'}}>
123+
<strong>Horizontal</strong>
124+
<RadioButton onClick={this.setAnchor.bind(this, 'horizontal', 'left')} label="Left" checked={this.state.anchorOrigin.horizontal === "left"} />
125+
<RadioButton onClick={this.setAnchor.bind(this, 'horizontal', 'middle')} label="Middle" checked={this.state.anchorOrigin.horizontal === "middle"} />
126+
<RadioButton onClick={this.setAnchor.bind(this, 'horizontal', 'right')} label="Right" checked={this.state.anchorOrigin.horizontal === "right"} />
127+
</div>
128+
<br style={{clear:'both'}} />
129+
<br style={{clear:'both'}} />
130+
131+
<h3>Target Origin</h3>
132+
<div style={{float:'left'}}>
133+
<strong>Vertical</strong>
134+
<RadioButton onClick={this.setTarget.bind(this, 'vertical', 'top')} label="Top" checked={this.state.targetOrigin.vertical === "top"} />
135+
<RadioButton onClick={this.setTarget.bind(this, 'vertical', 'center')} label="Center" checked={this.state.targetOrigin.vertical === "center"} />
136+
<RadioButton onClick={this.setTarget.bind(this, 'vertical', 'bottom')} label="Bottom" checked={this.state.targetOrigin.vertical === "bottom"} />
137+
</div>
138+
<div style={{float:'left'}}>
139+
<strong>Horizontal</strong>
140+
<RadioButton onClick={this.setTarget.bind(this, 'horizontal', 'left')} label="Left" checked={this.state.targetOrigin.horizontal === "left"} />
141+
<RadioButton onClick={this.setTarget.bind(this, 'horizontal', 'middle')} label="Middle" checked={this.state.targetOrigin.horizontal === "middle"} />
142+
<RadioButton onClick={this.setTarget.bind(this, 'horizontal', 'right')} label="Right" checked={this.state.targetOrigin.horizontal === "right"} />
143+
</div>
144+
145+
<Popover open={this.state.activePopover === 'pop'}
146+
anchorEl={this.state.anchorEl}
147+
anchorOrigin={this.state.anchorOrigin}
148+
targetOrigin={this.state.targetOrigin}
149+
onRequestClose={this.closePopover.bind(this, 'pop')} >
150+
<div style={{padding:20}}>
151+
<h2>Here is an arbitrary popover</h2>
152+
<p>Hi - here is some content</p>
153+
<RaisedButton primary={true} label="Here is a button"/>
154+
</div>
155+
</Popover>
156+
</CodeExample>
157+
</ComponentDoc>
158+
);
159+
},
160+
161+
show(key, e) {
162+
this.setState({
163+
activePopover:key,
164+
anchorEl:e.currentTarget,
165+
});
166+
},
167+
168+
closePopover(key) {
169+
if (this.state.activePopover !== key)
170+
return
171+
this.setState({
172+
activePopover:'none',
173+
});
174+
},
175+
176+
setAnchor(positionElement, position, e) {
177+
let {anchorOrigin} = this.state;
178+
anchorOrigin[positionElement] = position;
179+
180+
this.setState({
181+
anchorOrigin:anchorOrigin,
182+
});
183+
},
184+
185+
setTarget(positionElement, position, e) {
186+
let {targetOrigin} = this.state;
187+
targetOrigin[positionElement] = position;
188+
189+
this.setState({
190+
targetOrigin:targetOrigin,
191+
});
192+
},
193+
194+
});
195+
196+
module.exports = PopoverPage;

‎docs/src/app/components/raw-code/popover-code.txt‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<RaisedButton onClick={this.show.bind(this, "pop")} label="Click on me to show a popover" />
2+
<br/>
3+
<br/>
4+
5+
<em>Note that in this version, the select field causes nasty scrolling,
6+
an upcoming PR will fix, which updates SelectField to use the popover for itself!</em>
7+
<br/>
8+
<h2>Position Options</h2>
9+
<p>Use the settings below to toggle the positioning of the popovers above</p>
10+
<strong>Current Settings</strong>
11+
<br/>
12+
<pre>
13+
anchorOrigin: {JSON.stringify(this.state.anchorOrigin)}
14+
<br/>
15+
targetOrigin: {JSON.stringify(this.state.targetOrigin)}
16+
</pre>
17+
<h3>Anchor Origin</h3>
18+
<div style={{float:'left'}}>
19+
<strong>Vertical</strong>
20+
<RadioButton onClick={this.setAnchor.bind(this, 'vertical', 'top')} label="Top" checked={this.state.anchorOrigin.vertical === "top"} />
21+
<RadioButton onClick={this.setAnchor.bind(this, 'vertical', 'center')} label="Center" checked={this.state.anchorOrigin.vertical === "center"} />
22+
<RadioButton onClick={this.setAnchor.bind(this, 'vertical', 'bottom')} label="Bottom" checked={this.state.anchorOrigin.vertical === "bottom"} />
23+
</div>
24+
<div style={{float:'left'}}>
25+
<strong>Horizontal</strong>
26+
<RadioButton onClick={this.setAnchor.bind(this, 'horizontal', 'left')} label="Left" checked={this.state.anchorOrigin.horizontal === "left"} />
27+
<RadioButton onClick={this.setAnchor.bind(this, 'horizontal', 'middle')} label="Middle" checked={this.state.anchorOrigin.horizontal === "middle"} />
28+
<RadioButton onClick={this.setAnchor.bind(this, 'horizontal', 'right')} label="Right" checked={this.state.anchorOrigin.horizontal === "right"} />
29+
</div>
30+
<br style={{clear:'both'}} />
31+
<br style={{clear:'both'}} />
32+
33+
<h3>Target Origin</h3>
34+
<div style={{float:'left'}}>
35+
<strong>Vertical</strong>
36+
<RadioButton onClick={this.setTarget.bind(this, 'vertical', 'top')} label="Top" checked={this.state.targetOrigin.vertical === "top"} />
37+
<RadioButton onClick={this.setTarget.bind(this, 'vertical', 'center')} label="Center" checked={this.state.targetOrigin.vertical === "center"} />
38+
<RadioButton onClick={this.setTarget.bind(this, 'vertical', 'bottom')} label="Bottom" checked={this.state.targetOrigin.vertical === "bottom"} />
39+
</div>
40+
<div style={{float:'left'}}>
41+
<strong>Horizontal</strong>
42+
<RadioButton onClick={this.setTarget.bind(this, 'horizontal', 'left')} label="Left" checked={this.state.targetOrigin.horizontal === "left"} />
43+
<RadioButton onClick={this.setTarget.bind(this, 'horizontal', 'middle')} label="Middle" checked={this.state.targetOrigin.horizontal === "middle"} />
44+
<RadioButton onClick={this.setTarget.bind(this, 'horizontal', 'right')} label="Right" checked={this.state.targetOrigin.horizontal === "right"} />
45+
</div>
46+
47+
<Popover open={this.state.activePopover === 'pop'}
48+
anchorEl={this.state.anchorEl}
49+
anchorOrigin={this.state.anchorOrigin}
50+
targetOrigin={this.state.targetOrigin}
51+
onRequestClose={this.closePopover.bind(this, 'pop')} >
52+
<div style={{padding:20}}>
53+
<h2>Here is an arbitrary popover</h2>
54+
<p>Hi - here is some content</p>
55+
<RaisedButton primary={true} label="Here is a button"/>
56+
</div>
57+
</Popover>
58+
59+
show(key, e) {
60+
this.setState({
61+
activePopover:key,
62+
anchorEl:e.currentTarget,
63+
});
64+
},
65+
66+
closePopover(key) {
67+
if (this.state.activePopover !== key)
68+
return
69+
this.setState({
70+
activePopover:'none',
71+
});
72+
},
73+
74+
setAnchor(positionElement, position, e) {
75+
let {anchorOrigin} = this.state;
76+
anchorOrigin[positionElement] = position;
77+
78+
this.setState({
79+
anchorOrigin:anchorOrigin,
80+
});
81+
},
82+
83+
setTarget(positionElement, position, e) {
84+
let {targetOrigin} = this.state;
85+
targetOrigin[positionElement] = position;
86+
87+
this.setState({
88+
targetOrigin:targetOrigin,
89+
});
90+
},

‎src/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ module.exports = {
3737
Mixins: require('./mixins/'),
3838
Overlay: require('./overlay'),
3939
Paper: require('./paper'),
40+
Popover:require('./popover/popover'),
4041
RadioButton: require('./radio-button'),
4142
RadioButtonGroup: require('./radio-button-group'),
4243
RaisedButton: require('./raised-button'),

0 commit comments

Comments
 (0)