-
-
Notifications
You must be signed in to change notification settings - Fork 32.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Portal] Second iteration on the component
- Loading branch information
1 parent
f66e0fc
commit 9c411bf
Showing
227 changed files
with
2,539 additions
and
2,380 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,7 @@ | ||
[ | ||
{ | ||
"path": "build/index.js", | ||
"limit": "91.2 KB" | ||
"limit": "92.8 KB" | ||
}, | ||
{ | ||
"path": "test/size/overhead.js", | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,66 @@ | ||
import React from 'react'; | ||
import Typography from 'material-ui/Typography'; | ||
import Modal from 'material-ui/Modal'; | ||
import Button from 'material-ui/Button'; | ||
|
||
function rand() { | ||
return Math.floor(Math.random() * 20) - 10; | ||
} | ||
|
||
function getModalStyle() { | ||
const top = 50 + rand(); | ||
const left = 50 + rand(); | ||
|
||
return { | ||
position: 'absolute', | ||
width: 8 * 50, | ||
top: `${top}%`, | ||
left: `${left}%`, | ||
transform: `translate(-${top}%, -${left}%)`, | ||
border: '1px solid #e5e5e5', | ||
backgroundColor: '#fff', | ||
boxShadow: '0 5px 15px rgba(0, 0, 0, .5)', | ||
padding: 8 * 4, | ||
}; | ||
} | ||
|
||
class SimpleModal extends React.Component { | ||
state = { | ||
open: false, | ||
}; | ||
|
||
handleOpen = () => { | ||
this.setState({ open: true }); | ||
}; | ||
|
||
handleClose = () => { | ||
this.setState({ open: false }); | ||
}; | ||
|
||
render() { | ||
return ( | ||
<div> | ||
<Typography gutterBottom>Click to get the full Modal experience!</Typography> | ||
<Button onClick={this.handleOpen}>Open Modal</Button> | ||
<Modal | ||
aria-labelledby="simple-modal-title" | ||
aria-describedby="simple-modal-description" | ||
open={this.state.open} | ||
onClose={this.handleClose} | ||
> | ||
<div style={getModalStyle()}> | ||
<Typography type="title" id="modal-title"> | ||
Text in a modal | ||
</Typography> | ||
<Typography type="subheading" id="simple-modal-description"> | ||
Duis mollis, est non commodo luctus, nisi erat porttitor ligula. | ||
</Typography> | ||
<SimpleModal /> | ||
</div> | ||
</Modal> | ||
</div> | ||
); | ||
} | ||
} | ||
|
||
export default SimpleModal; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
--- | ||
components: Modal | ||
--- | ||
|
||
# Modals | ||
|
||
The modal component provides a solid foundation for creating dialogs, | ||
popovers, lightboxes, or whatever else. | ||
The component renders its `children` node in front of a backdrop component. | ||
|
||
The `Modal` offers a few helpful features over using just a [`Portal`](/layout/portal) | ||
component and some styles: | ||
- Manages dialog stacking when one-at-a-time just isn't enough. | ||
- Creates a backdrop, for disabling interaction below the modal. | ||
- It properly manages focus; moving to the modal content, | ||
and keeping it there until the modal is closed. | ||
- It disables scrolling of the page content while open. | ||
- Adds the appropriate ARIA roles are automatically. | ||
|
||
This component shares many concepts with [react-overlays](https://react-bootstrap.github.io/react-overlays/#modals). | ||
|
||
## Simple modal | ||
|
||
{{"demo": "pages/demos/modals/SimpleModal.js"}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,17 +1,21 @@ | ||
# Related projects | ||
|
||
Because the scope of problems Material-UI solves is limited, we try to play nicely with | ||
other libraries. | ||
We have built a carefully curated collection of libraries that worth giving a look at. | ||
Feel free to submit a pull-request to add more projects. We will accept them if they match our criterias. | ||
|
||
## Material-UI Specific Projects | ||
|
||
- [dx-react-grid-material-ui](https://devexpress.github.io/devextreme-reactive/react/grid/) A data grid for Material-UI with paging, sorting, filtering, grouping and editing features. | ||
- [material-ui-time-picker](https://github.com/TeamWertarbyte/material-ui-time-picker) A TimePicker for Material-UI. | ||
- [material-ui-pickers](https://github.com/dmtrKovalenko/material-ui-pickers) Components, that implement Material Design date and time pickers for Material-UI. | ||
- [material-ui-time-picker](https://github.com/TeamWertarbyte/material-ui-time-picker) A TimePicker for Material-UI. | ||
|
||
## Complementary Projects | ||
|
||
- [react-autosuggest](https://github.com/moroshko/react-autosuggest) WAI-ARIA compliant React autosuggest component. | ||
- [react-number-format](https://github.com/s-yadav/react-number-format) React component to format numbers in an input or as a text. | ||
- [react-popper](https://github.com/souporserious/react-popper) React wrapper around PopperJS. | ||
- [react-swipeable-views](https://github.com/oliviertassinari/react-swipeable-views) | ||
A React component for swipeable views. Plays well with the `Tabs` component. | ||
- [redux-form](http://redux-form.com/6.1.1/examples/material-ui/) Manage your form state in Redux. | ||
- [react-swipeable-views](https://github.com/oliviertassinari/react-swipeable-views) A React component for swipeable views. Plays well with the `Tabs` component. | ||
- [react-text-mask](https://github.com/text-mask/text-mask) Input mask for React, Angular, Ember, Vue, & plain JavaScript. | ||
- [react-number-format](https://github.com/s-yadav/react-number-format) React component to format numbers in an input or as a text. | ||
- [redux-form](http://redux-form.com/6.1.1/examples/material-ui/) Manage your form state in Redux. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import Portal from 'material-ui/Portal'; | ||
import Button from 'material-ui/Button'; | ||
import Typography from 'material-ui/Typography'; | ||
import { withStyles } from 'material-ui/styles'; | ||
|
||
const styles = theme => ({ | ||
alert: { | ||
padding: theme.spacing.unit, | ||
margin: `${theme.spacing.unit}px 0`, | ||
border: '1px solid', | ||
borderColor: theme.palette.text.primary, | ||
}, | ||
}); | ||
|
||
class SimplePortal extends React.Component { | ||
state = { | ||
show: false, | ||
}; | ||
|
||
handleClick = () => { | ||
this.setState({ show: !this.state.show }); | ||
}; | ||
|
||
container = null; | ||
|
||
render() { | ||
const { classes } = this.props; | ||
const { show } = this.state; | ||
return ( | ||
<div> | ||
<Button onClick={this.handleClick}>{show ? 'Unmount children' : 'Mount children'}</Button> | ||
<div className={classes.alert}> | ||
<Typography>It looks like I will render here.</Typography> | ||
{show ? ( | ||
<Portal container={this.container}> | ||
<Typography>But I actually render here!</Typography> | ||
</Portal> | ||
) : null} | ||
</div> | ||
<div | ||
className={classes.alert} | ||
ref={node => { | ||
this.container = node; | ||
}} | ||
/> | ||
</div> | ||
); | ||
} | ||
} | ||
|
||
SimplePortal.propTypes = { | ||
classes: PropTypes.object.isRequired, | ||
}; | ||
|
||
export default withStyles(styles)(SimplePortal); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
--- | ||
components: Portal | ||
--- | ||
|
||
# Portal | ||
|
||
The portal component renders its children into a new "subtree" | ||
outside of current component hierarchy. | ||
The children of the portal component will be appended to the `container` specified. | ||
|
||
The component is used interally by our [`Modal`](/api/modal) component. | ||
On the server, the content won't be rendered. | ||
You have to wait for the client side reconciliation to see the children. | ||
|
||
## Simple Portal | ||
|
||
{{"demo": "pages/layout/SimplePortal.js"}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,3 @@ | ||
declare module 'jss' | ||
declare module 'jss-preset-default' | ||
declare module 'react-jss/*' | ||
declare module 'jss'; | ||
declare module 'jss-preset-default'; | ||
declare module 'react-jss/*'; |
Oops, something went wrong.