Skip to content

Commit

Permalink
docs fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@chrismcv
chrismcv committed Nov 12, 2015
1 parent 5a883f4 commit 6b13100
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 66 deletions.
116 changes: 51 additions & 65 deletions docs/src/app/components/pages/components/popover.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
let React = require('react');
let { Popover, RaisedButton, SelectField, TextField } = require('material-ui');
let { Popover, RadioButton, RaisedButton, SelectField, TextField } = require('material-ui');
let ComponentDoc = require('../../component-doc');
let Code = require('popover-code');
let CodeExample = require('../../code-example/code-example');
Expand Down Expand Up @@ -96,51 +96,59 @@ let PopoverPage = React.createClass({
name="Popover"
componentInfo={componentInfo}>
<CodeExample code={Code}>
<a onClick={this.show.bind(this, "pop")}>
Click on me to show a popover
</a>
<RaisedButton onClick={this.show.bind(this, "pop")} label="Click on me to show a popover" />
<br/>
<br/>

<a onClick={this.show.bind(this, "pop2")}>
Click on me to show a with a nested popover (SelectField)
</a>
<RaisedButton onClick={this.show.bind(this, "pop2")} label="Click on me to show a with a nested popover (SelectField)" />
<br />
<em>Note that in this version, the select field causes nasty scrolling,
an upcoming PR will fix, which updates SelectField to use the popover for itself!</em>

<br/>
<br/>
<h2>Position Options</h2>
<p>Use the settings below to toggle the positioning of the popovers above</p>
<strong>Current Settings</strong>
<br/>
<h2>Positioning Playground</h2>
<p>There are two important properties, <strong>anchorOrigin</strong> and <strong>targetOrigin</strong>.
The popover position will be the intersection of the two origins.
</p>
<div ref="anchor" style={{display:'block', width:'100%', border:'1px solid #ccc', position:'relative', padding:5}}>
<h3>AnchorOrigin</h3>
<p>This box is the anchor element for the Popover component. Click on a link to set what the anchorOrigin should be.</p>
<pre>anchorOrigin:{JSON.stringify(this.state.anchorOrigin)}</pre>
<div style={{display:'block', width:'100%', height:60, background:'#eee', position:'relative'}}>
<h4>Horizontal Position Modes</h4>
<a onClick={this.showPositionedPopover.bind(this, 'horizontal', 'left')} style={{position:'absolute', top: 30, left:0, background:'#eee', border:'1px solid ', width:50}}>Left</a>
<a onClick={this.showPositionedPopover.bind(this, 'horizontal', 'middle')} style={{position:'absolute', top: 30, left:'50%', background:'#eee', border:'1px solid ', width:50}}>Middle</a>
<a onClick={this.showPositionedPopover.bind(this, 'horizontal', 'right')} style={{position:'absolute', top: 30, right:0, background:'#eee', border:'1px solid ', width:50}}>Right</a>

</div>

<div style={{display:'block', height:200, background:'#eee', position:'relative'}}>
<h4>Vertical Position Modes</h4>
<a onClick={this.showPositionedPopover.bind(this, 'vertical', 'top')} style={{position:'absolute', left:200, top:0, background:'#eee', border:'1px solid ', width:50}}>Top</a>
<a onClick={this.showPositionedPopover.bind(this, 'vertical', 'center')} style={{position:'absolute', left:200, top:'50%', background:'#eee', border:'1px solid ', width:50}}>Center</a>
<a onClick={this.showPositionedPopover.bind(this, 'vertical', 'bottom')} style={{position:'absolute', left:200, bottom:0, background:'#eee', border:'1px solid ', width:50}}>Bottom*</a>

<div style={{position:'absolute', left:260, bottom:0}}>* Popover auto positions to stay on screen, so note that a bottom anchor won't work unless your page is scrolled a bit!</div>
</div>
<pre>
anchorOrigin: {JSON.stringify(this.state.anchorOrigin)}
<br/>
targetOrigin: {JSON.stringify(this.state.targetOrigin)}
</pre>
<h3>Anchor Origin</h3>
<div style={{float:'left'}}>
<strong>Vertical</strong>
<RadioButton onClick={this.setAnchor.bind(this, 'vertical', 'top')} label="Top" checked={this.state.anchorOrigin.vertical == "top"} />
<RadioButton onClick={this.setAnchor.bind(this, 'vertical', 'center')} label="Center" checked={this.state.anchorOrigin.vertical == "center"} />
<RadioButton onClick={this.setAnchor.bind(this, 'vertical', 'bottom')} label="Bottom" checked={this.state.anchorOrigin.vertical == "bottom"} />
</div>
<div style={{float:'left'}}>
<strong>Horizontal</strong>
<RadioButton onClick={this.setAnchor.bind(this, 'horizontal', 'left')} label="Left" checked={this.state.anchorOrigin.horizontal == "left"} />
<RadioButton onClick={this.setAnchor.bind(this, 'horizontal', 'middle')} label="Middle" checked={this.state.anchorOrigin.horizontal == "middle"} />
<RadioButton onClick={this.setAnchor.bind(this, 'horizontal', 'right')} label="Right" checked={this.state.anchorOrigin.horizontal == "right"} />
</div>
<br style={{clear:'both'}} />
<br style={{clear:'both'}} />

<h3>Target Origin</h3>
<div style={{float:'left'}}>
<strong>Vertical</strong>
<RadioButton onClick={this.setTarget.bind(this, 'vertical', 'top')} label="Top" checked={this.state.targetOrigin.vertical == "top"} />
<RadioButton onClick={this.setTarget.bind(this, 'vertical', 'center')} label="Center" checked={this.state.targetOrigin.vertical == "center"} />
<RadioButton onClick={this.setTarget.bind(this, 'vertical', 'bottom')} label="Bottom" checked={this.state.targetOrigin.vertical == "bottom"} />
</div>
<div style={{float:'left'}}>
<strong>Horizontal</strong>
<RadioButton onClick={this.setTarget.bind(this, 'horizontal', 'left')} label="Left" checked={this.state.targetOrigin.horizontal == "left"} />
<RadioButton onClick={this.setTarget.bind(this, 'horizontal', 'middle')} label="Middle" checked={this.state.targetOrigin.horizontal == "middle"} />
<RadioButton onClick={this.setTarget.bind(this, 'horizontal', 'right')} label="Right" checked={this.state.targetOrigin.horizontal == "right"} />
</div>

<Popover open={this.state.activePopover === 'pop'}
anchorEl={this.state.anchorEl}
onRequestClose={this.closePopover} >
anchorOrigin={this.state.anchorOrigin}
targetOrigin={this.state.targetOrigin}
onRequestClose={this.closePopover.bind(this, 'pop')} >
<div style={{padding:20}}>
<h2>Here is an arbitrary popover</h2>
<p>Hi - here is some content</p>
Expand All @@ -149,7 +157,9 @@ let PopoverPage = React.createClass({
</Popover>
<Popover open={this.state.activePopover === 'pop2'}
anchorEl={this.state.anchorEl}
onRequestClose={this.closePopover} >
anchorOrigin={this.state.anchorOrigin}
targetOrigin={this.state.targetOrigin}
onRequestClose={this.closePopover.bind(this, 'pop2')} >
<div style={{padding:20}}>
<h2>Here is an arbitrary popover</h2>
<p>Hi - here is some content</p>
Expand All @@ -161,29 +171,7 @@ let PopoverPage = React.createClass({



<Popover open={this.state.activePopover === 'anchors'}
anchorEl={this.state.anchorEl}
anchorOrigin={this.state.anchorOrigin}
targetOrigin={this.state.targetOrigin}>
<div style={{padding:20, width:400}}>
<h3>TargetOrigin</h3>
<p>This box is the "targetOrigin" element for the Popover component. Click on a link to set what the targetOrigin should be.</p>
<pre>targetOrigin:{JSON.stringify(this.state.targetOrigin)}</pre>
<div style={{display:'block', width:'100%', height:60, background:'#eee', position:'relative'}}>
<h4>Horizontal Position Modes</h4>
<a onClick={this.showTargetedPopover.bind(this, 'horizontal', 'left')} style={{position:'absolute', top: 30, left:0, background:'#eee', border:'1px solid ', width:50}}>Left</a>
<a onClick={this.showTargetedPopover.bind(this, 'horizontal', 'middle')} style={{position:'absolute', top: 30, left:'50%', background:'#eee', border:'1px solid ', width:50}}>Middle</a>
<a onClick={this.showTargetedPopover.bind(this, 'horizontal', 'right')} style={{position:'absolute', top: 30, right:0, background:'#eee', border:'1px solid ', width:50}}>Right</a>
</div>

<div style={{display:'block', height:200, background:'#eee', position:'relative'}}>
<h4>Vertical Position Modes</h4>
<a onClick={this.showTargetedPopover.bind(this, 'vertical', 'top')} style={{position:'absolute', left:200, top:0, background:'#eee', border:'1px solid ', width:50}}>Top</a>
<a onClick={this.showTargetedPopover.bind(this, 'vertical', 'center')} style={{position:'absolute', left:200, top:'50%', background:'#eee', border:'1px solid ', width:50}}>Center</a>
<a onClick={this.showTargetedPopover.bind(this, 'vertical', 'bottom')} style={{position:'absolute', left:200, bottom:0, background:'#eee', border:'1px solid ', width:50}}>Bottom</a>
</div>
</div>
</Popover>

</CodeExample>
</ComponentDoc>
);
Expand All @@ -196,30 +184,28 @@ let PopoverPage = React.createClass({
});
},

closePopover() {
closePopover(key) {
if (this.state.activePopover != key)
return
this.setState({
activePopover:'none',
});
},

showPositionedPopover(positionElement, position, e) {
setAnchor(positionElement, position, e) {
let {anchorOrigin} = this.state;
anchorOrigin[positionElement] = position;

this.setState({
activePopover:'anchors',
anchorEl:this.refs.anchor,
anchorOrigin:anchorOrigin,
});
},

showTargetedPopover(positionElement, position, e) {
setTarget(positionElement, position, e) {
let {targetOrigin} = this.state;
targetOrigin[positionElement] = position;

this.setState({
activePopover:'anchors',
anchorEl:this.refs.anchor,
targetOrigin:targetOrigin,
});
},
Expand Down
2 changes: 1 addition & 1 deletion src/popover/popover.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@ const Popover = React.createClass({
}, () => {
this._animateClose();
const popOverHideEvent = new CustomEvent('popOverOnHide');
process.nextTick(() => { document.dispatchEvent(popOverHideEvent) });
document.dispatchEvent(popOverHideEvent);
});
},

Expand Down

0 comments on commit 6b13100

Please sign in to comment.