Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Popover] Expose the component #7927

Merged
merged 1 commit into from
Aug 26, 2017
Merged

[Popover] Expose the component #7927

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
164 changes: 164 additions & 0 deletions docs/src/pages/demos/popovers/AnchorPlayground.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@
/* eslint-disable flowtype/require-valid-file-annotation */

import React from 'react';
import { findDOMNode } from 'react-dom';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import { FormControl, FormLabel, FormControlLabel } from 'material-ui/Form';
import Radio, { RadioGroup } from 'material-ui/Radio';
import Grid from 'material-ui/Grid';
import Typography from 'material-ui/Typography';
import Button from 'material-ui/Button';
import Popover from 'material-ui/Popover';

const styles = theme => ({
button: {
marginBottom: theme.spacing.unit * 4,
},
typography: {
margin: theme.spacing.unit * 2,
},
});

class AnchorPlayground extends React.Component {
state = {
open: false,
anchorEl: null,
anchorOriginVertical: 'bottom',
anchorOriginHorizontal: 'center',
transformOriginVertical: 'top',
transformOriginHorizontal: 'center',
};

handleChange = key => (event, value) => {
this.setState({
[key]: value,
});
};

handleClickButton = () => {
this.setState({
open: true,
anchorEl: findDOMNode(this.button),
});
};

handleRequestClose = () => {
this.setState({
open: false,
});
};

button = null;

render() {
const classes = this.props.classes;
const {
open,
anchorEl,
anchorOriginVertical,
anchorOriginHorizontal,
transformOriginVertical,
transformOriginHorizontal,
} = this.state;

return (
<div>
<Button
ref={node => {
this.button = node;
}}
className={classes.button}
onClick={this.handleClickButton}
>
Open Popover
</Button>
<Popover
open={open}
anchorEl={anchorEl}
onRequestClose={this.handleRequestClose}
anchorOrigin={{
vertical: anchorOriginVertical,
horizontal: anchorOriginHorizontal,
}}
transformOrigin={{
vertical: transformOriginVertical,
horizontal: transformOriginHorizontal,
}}
>
<Typography className={classes.typography}>The content of the Popover.</Typography>
</Popover>
<Grid container>
<Grid item xs={12} sm={6}>
<FormControl component="fieldset">
<FormLabel component="legend">anchorOrigin.vertical</FormLabel>
<RadioGroup
aria-label="anchorOriginVertical"
name="anchorOriginVertical"
value={this.state.anchorOriginVertical}
onChange={this.handleChange('anchorOriginVertical')}
>
<FormControlLabel value="top" control={<Radio />} label="Top" />
<FormControlLabel value="center" control={<Radio />} label="Center" />
<FormControlLabel value="bottom" control={<Radio />} label="Bottom" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12} sm={6}>
<FormControl component="fieldset">
<FormLabel component="legend">transformOrigin.vertical</FormLabel>
<RadioGroup
aria-label="transformOriginVertical"
name="transformOriginVertical"
value={this.state.transformOriginVertical}
onChange={this.handleChange('transformOriginVertical')}
>
<FormControlLabel value="top" control={<Radio />} label="Top" />
<FormControlLabel value="center" control={<Radio />} label="Center" />
<FormControlLabel value="bottom" control={<Radio />} label="Bottom" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12} sm={6}>
<FormControl component="fieldset">
<FormLabel component="legend">anchorOrigin.horizontal</FormLabel>
<RadioGroup
row
aria-label="anchorOriginHorizontal"
name="anchorOriginHorizontal"
value={this.state.anchorOriginHorizontal}
onChange={this.handleChange('anchorOriginHorizontal')}
>
<FormControlLabel value="left" control={<Radio />} label="Left" />
<FormControlLabel value="center" control={<Radio />} label="Center" />
<FormControlLabel value="right" control={<Radio />} label="Right" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12} sm={6}>
<FormControl component="fieldset">
<FormLabel component="legend">transformOrigin.horizontal</FormLabel>
<RadioGroup
row
aria-label="transformOriginHorizontal"
name="transformOriginHorizontal"
value={this.state.transformOriginHorizontal}
onChange={this.handleChange('transformOriginHorizontal')}
>
<FormControlLabel value="left" control={<Radio />} label="Left" />
<FormControlLabel value="center" control={<Radio />} label="Center" />
<FormControlLabel value="right" control={<Radio />} label="Right" />
</RadioGroup>
</FormControl>
</Grid>
</Grid>
</div>
);
}
}

AnchorPlayground.propTypes = {
classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(AnchorPlayground);
13 changes: 13 additions & 0 deletions docs/src/pages/demos/popovers/popovers.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
---
components: Popovers
---

# Popovers

A `Popover` can be used to display some content on top of another.

## Anchor playground

Use the radio buttons to adjust the `anchorOrigin` and `transformOrigin` positions.

{{demo='pages/demos/popovers/AnchorPlayground.js'}}
104 changes: 57 additions & 47 deletions docs/src/pages/layout/InteractiveGrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Grid from 'material-ui/Grid';
import { FormLabel, FormControlLabel } from 'material-ui/Form';
import { FormControl, FormLabel, FormControlLabel } from 'material-ui/Form';
import Radio, { RadioGroup } from 'material-ui/Radio';
import Paper from 'material-ui/Paper';

Expand Down Expand Up @@ -67,56 +67,66 @@ class InteractiveGrid extends React.Component {
<Paper className={classes.control}>
<Grid container>
<Grid item xs={6} sm={4}>
<FormLabel>direction</FormLabel>
<RadioGroup
name="direction"
aria-label="direction"
value={direction}
onChange={this.handleChange('direction')}
>
<FormControlLabel value="row" control={<Radio />} label="row" />
<FormControlLabel value="row-reverse" control={<Radio />} label="row-reverse" />
<FormControlLabel value="column" control={<Radio />} label="column" />
<FormControlLabel
value="column-reverse"
control={<Radio />}
label="column-reverse"
/>
</RadioGroup>
<FormControl component="fieldset">
<FormLabel>direction</FormLabel>
<RadioGroup
name="direction"
aria-label="direction"
value={direction}
onChange={this.handleChange('direction')}
>
<FormControlLabel value="row" control={<Radio />} label="row" />
<FormControlLabel value="row-reverse" control={<Radio />} label="row-reverse" />
<FormControlLabel value="column" control={<Radio />} label="column" />
<FormControlLabel
value="column-reverse"
control={<Radio />}
label="column-reverse"
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={6} sm={4}>
<FormLabel>justify</FormLabel>
<RadioGroup
name="justify"
aria-label="justify"
value={justify}
onChange={this.handleChange('justify')}
>
<FormControlLabel value="flex-start" control={<Radio />} label="flex-start" />
<FormControlLabel value="center" control={<Radio />} label="center" />
<FormControlLabel value="flex-end" control={<Radio />} label="flex-end" />
<FormControlLabel
value="space-between"
control={<Radio />}
label="space-between"
/>
<FormControlLabel value="space-around" control={<Radio />} label="space-around" />
</RadioGroup>
<FormControl component="fieldset">
<FormLabel>justify</FormLabel>
<RadioGroup
name="justify"
aria-label="justify"
value={justify}
onChange={this.handleChange('justify')}
>
<FormControlLabel value="flex-start" control={<Radio />} label="flex-start" />
<FormControlLabel value="center" control={<Radio />} label="center" />
<FormControlLabel value="flex-end" control={<Radio />} label="flex-end" />
<FormControlLabel
value="space-between"
control={<Radio />}
label="space-between"
/>
<FormControlLabel
value="space-around"
control={<Radio />}
label="space-around"
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={6} sm={4}>
<FormLabel>align</FormLabel>
<RadioGroup
name="align"
aria-label="align"
value={align}
onChange={this.handleChange('align')}
>
<FormControlLabel value="flex-start" control={<Radio />} label="flex-start" />
<FormControlLabel value="center" control={<Radio />} label="center" />
<FormControlLabel value="flex-end" control={<Radio />} label="flex-end" />
<FormControlLabel value="stretch" control={<Radio />} label="stretch" />
<FormControlLabel value="baseline" control={<Radio />} label="baseline" />
</RadioGroup>
<FormControl component="fieldset">
<FormLabel>align</FormLabel>
<RadioGroup
name="align"
aria-label="align"
value={align}
onChange={this.handleChange('align')}
>
<FormControlLabel value="flex-start" control={<Radio />} label="flex-start" />
<FormControlLabel value="center" control={<Radio />} label="center" />
<FormControlLabel value="flex-end" control={<Radio />} label="flex-end" />
<FormControlLabel value="stretch" control={<Radio />} label="stretch" />
<FormControlLabel value="baseline" control={<Radio />} label="baseline" />
</RadioGroup>
</FormControl>
</Grid>
</Grid>
</Paper>
Expand Down
25 changes: 25 additions & 0 deletions pages/demos/popovers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
// @flow

import React from 'react';
import withRoot from 'docs/src/modules/components/withRoot';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
import markdown from 'docs/src/pages/demos/popovers/popovers.md';

function Page() {
return (
<MarkdownDocs
markdown={markdown}
demos={{
'pages/demos/popovers/AnchorPlayground.js': {
js: require('docs/src/pages/demos/popovers/AnchorPlayground').default,
raw: preval`
module.exports = require('fs')
.readFileSync(require.resolve('docs/src/pages/demos/popovers/AnchorPlayground'), 'utf8')
`,
},
}}
/>
);
}

export default withRoot(Page);
14 changes: 7 additions & 7 deletions src/Menu/Menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import classNames from 'classnames';
import { findDOMNode } from 'react-dom';
import getScrollbarSize from 'dom-helpers/util/scrollbarSize';
import withStyles from '../styles/withStyles';
import Popover from '../internal/Popover';
import Popover from '../Popover';
import MenuList from './MenuList';
import type { TransitionCallback } from '../internal/Transition';

Expand Down Expand Up @@ -79,13 +79,12 @@ type AllProps = DefaultProps & Props;

export const styles = {
root: {
/**
* specZ: The maximum height of a simple menu should be one or more rows less than the view
* height. This ensures a tappable area outside of the simple menu with which to dismiss
* the menu.
*/
// specZ: The maximum height of a simple menu should be one or more rows less than the view
// height. This ensures a tappable area outside of the simple menu with which to dismiss
// the menu.
maxHeight: 'calc(100vh - 96px)',
WebkitOverflowScrolling: 'touch', // Add iOS momentum scrolling.
// Add iOS momentum scrolling.
WebkitOverflowScrolling: 'touch',
// So we see the menu when it's empty.
minWidth: 16,
minHeight: 16,
Expand Down Expand Up @@ -151,6 +150,7 @@ class Menu extends React.Component<AllProps, void> {

render() {
const { children, classes, className, MenuListProps, onEnter, ...other } = this.props;

return (
<Popover
getContentAnchorEl={this.getContentAnchorEl}
Expand Down
0 src/internal/Popover.d.ts → src/Popover/Popover.d.ts
View file
Open in desktop
File renamed without changes.
Loading