From f67cb4c5605b2c0150bbd27cb2fc6c59f37d8dc7 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 4 Aug 2018 16:50:53 +0200 Subject: [PATCH] let's merge --- docs/src/modules/components/withRoot.js | 3 - docs/src/pages/demos/menus/FadeMenu.js | 5 +- docs/src/pages/demos/menus/LongMenu.js | 5 +- docs/src/pages/demos/menus/RenderPropsMenu.js | 42 +++ docs/src/pages/demos/menus/menus.md | 7 + .../pages/utils/popover/MouseOverPopover.js | 10 +- .../pages/utils/popover/RenderPropsPopover.js | 66 +++++ docs/src/pages/utils/popover/SimplePopover.js | 11 +- docs/src/pages/utils/popover/popover.md | 7 + .../utils/popper/FakedReferencePopper.js | 5 +- .../pages/utils/popper/RenderPropsPopper.js | 61 +++++ .../pages/utils/popper/ScrollPlayground.js | 3 + docs/src/pages/utils/popper/popper.md | 7 + .../popup-state/HoverPopoverPopupState.js | 49 ---- .../pages/utils/popup-state/MenuPopupState.js | 26 -- .../utils/popup-state/PopoverPopupState.js | 44 --- .../utils/popup-state/PopperPopupState.js | 42 --- .../pages/utils/popup-state/popup-state.md | 72 ----- .../material-ui/src/PopupState/PopupState.js | 157 ----------- .../src/PopupState/PopupState.test.js | 253 ------------------ packages/material-ui/src/PopupState/index.js | 9 - pages/api/menu.md | 1 - pages/api/popover.md | 1 - pages/api/popper.md | 1 - pages/api/popup-state.js | 10 - pages/api/popup-state.md | 26 -- pages/demos/menus.js | 7 + pages/utils/popover.js | 7 + pages/utils/popper.js | 7 + pages/utils/popup-state.js | 44 --- 30 files changed, 240 insertions(+), 748 deletions(-) create mode 100644 docs/src/pages/demos/menus/RenderPropsMenu.js create mode 100644 docs/src/pages/utils/popover/RenderPropsPopover.js create mode 100644 docs/src/pages/utils/popper/RenderPropsPopper.js delete mode 100644 docs/src/pages/utils/popup-state/HoverPopoverPopupState.js delete mode 100644 docs/src/pages/utils/popup-state/MenuPopupState.js delete mode 100644 docs/src/pages/utils/popup-state/PopoverPopupState.js delete mode 100644 docs/src/pages/utils/popup-state/PopperPopupState.js delete mode 100644 docs/src/pages/utils/popup-state/popup-state.md delete mode 100644 packages/material-ui/src/PopupState/PopupState.js delete mode 100644 packages/material-ui/src/PopupState/PopupState.test.js delete mode 100644 packages/material-ui/src/PopupState/index.js delete mode 100644 pages/api/popup-state.js delete mode 100644 pages/api/popup-state.md delete mode 100644 pages/utils/popup-state.js diff --git a/docs/src/modules/components/withRoot.js b/docs/src/modules/components/withRoot.js index a5c7122f691d00..8620a3a22f9f81 100644 --- a/docs/src/modules/components/withRoot.js +++ b/docs/src/modules/components/withRoot.js @@ -92,9 +92,6 @@ const pages = [ { pathname: '/utils/transitions', }, - { - pathname: '/utils/popup-state', - }, { pathname: '/utils/popover', }, diff --git a/docs/src/pages/demos/menus/FadeMenu.js b/docs/src/pages/demos/menus/FadeMenu.js index 3ed6a101389d55..0283739bf8fa1b 100644 --- a/docs/src/pages/demos/menus/FadeMenu.js +++ b/docs/src/pages/demos/menus/FadeMenu.js @@ -19,11 +19,12 @@ class FadeMenu extends React.Component { render() { const { anchorEl } = this.state; + const open = Boolean(anchorEl); return (
+ + Profile + My account + Logout + + + ); + }} + + ); +} + +export default RenderPropsMenu; diff --git a/docs/src/pages/demos/menus/menus.md b/docs/src/pages/demos/menus/menus.md index 03587b2745068d..a05a7a8310ff14 100644 --- a/docs/src/pages/demos/menus/menus.md +++ b/docs/src/pages/demos/menus/menus.md @@ -55,3 +55,10 @@ You can use the same list composition features with the `MenuItem` component: Use a different transition altogether. {{"demo": "pages/demos/menus/FadeMenu.js"}} + +## Render Props + +It is a [render props](https://reactjs.org/docs/render-props.html) demo that +keeps track of the local state for a single menu. + +{{"demo": "pages/demos/menus/RenderPropsMenu.js"}} diff --git a/docs/src/pages/utils/popover/MouseOverPopover.js b/docs/src/pages/utils/popover/MouseOverPopover.js index ba00447826b0d5..b4db4f395a66b6 100644 --- a/docs/src/pages/utils/popover/MouseOverPopover.js +++ b/docs/src/pages/utils/popover/MouseOverPopover.js @@ -21,7 +21,7 @@ class MouseOverPopover extends React.Component { }; handlePopoverOpen = event => { - this.setState({ anchorEl: event.target }); + this.setState({ anchorEl: event.currentTarget }); }; handlePopoverClose = () => { @@ -35,10 +35,16 @@ class MouseOverPopover extends React.Component { return (
- + Hover with a Popover. ({ + typography: { + margin: theme.spacing.unit * 2, + }, +}); + +function RenderPropsPopover(props) { + const { classes } = props; + + return ( + + {({ anchorEl, updateAnchorEl }) => { + const open = Boolean(anchorEl); + return ( + + + { + updateAnchorEl(null); + }} + anchorOrigin={{ + vertical: 'bottom', + horizontal: 'center', + }} + transformOrigin={{ + vertical: 'top', + horizontal: 'center', + }} + > + The content of the Popover. + + + ); + }} + + ); +} + +RenderPropsPopover.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(RenderPropsPopover); diff --git a/docs/src/pages/utils/popover/SimplePopover.js b/docs/src/pages/utils/popover/SimplePopover.js index a960037475de94..20e0c73ac9a89e 100644 --- a/docs/src/pages/utils/popover/SimplePopover.js +++ b/docs/src/pages/utils/popover/SimplePopover.js @@ -31,14 +31,21 @@ class SimplePopover extends React.Component { render() { const { classes } = this.props; const { anchorEl } = this.state; + const open = Boolean(anchorEl); return (
- - + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus, bibendum sit amet vulputate eget, porta semper ligula. Donec bibendum vulputate erat, ac fringilla mi finibus nec. Donec ac dolor sed dolor porttitor blandit vel vel purus. Fusce vel malesuada @@ -62,7 +63,7 @@ class FakedReferencePopper extends React.Component { facilisis neque enim sed neque. Quisque accumsan metus vel maximus consequat. Suspendisse lacinia tellus a libero volutpat maximus. - + {({ TransitionProps }) => ( diff --git a/docs/src/pages/utils/popper/RenderPropsPopper.js b/docs/src/pages/utils/popper/RenderPropsPopper.js new file mode 100644 index 00000000000000..33ca8ead74ffb3 --- /dev/null +++ b/docs/src/pages/utils/popper/RenderPropsPopper.js @@ -0,0 +1,61 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import Popper from '@material-ui/core/Popper'; +import Typography from '@material-ui/core/Typography'; +import Button from '@material-ui/core/Button'; +import Fade from '@material-ui/core/Fade'; +import Paper from '@material-ui/core/Paper'; +import toRenderProps from 'recompose/toRenderProps'; +import withState from 'recompose/withState'; + +const WithState = toRenderProps(withState('anchorEl', 'updateAnchorEl', null)); + +const styles = theme => ({ + typography: { + padding: theme.spacing.unit * 2, + }, +}); + +function RenderPropsPopper(props) { + const { classes } = props; + + return ( + + {({ anchorEl, updateAnchorEl }) => { + const open = Boolean(anchorEl); + const id = open ? 'render-props-popper' : null; + return ( + + + + {({ TransitionProps }) => ( + + + + The content of the Popper. + + + + )} + + + ); + }} + + ); +} + +RenderPropsPopper.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(RenderPropsPopper); diff --git a/docs/src/pages/utils/popper/ScrollPlayground.js b/docs/src/pages/utils/popper/ScrollPlayground.js index a134cffca71d0b..10ddd4d56deb55 100644 --- a/docs/src/pages/utils/popper/ScrollPlayground.js +++ b/docs/src/pages/utils/popper/ScrollPlayground.js @@ -175,6 +175,7 @@ class AnchorPlayground extends React.Component { > \`\`\` `; + const id = open ? 'scroll-playground' : null; return (
@@ -188,6 +189,7 @@ class AnchorPlayground extends React.Component { }} variant="contained" onClick={this.handleClickButton} + aria-describedby={id} > Toggle Popper @@ -196,6 +198,7 @@ class AnchorPlayground extends React.Component { modifiers. ({ - popover: { - pointerEvents: 'none', - }, - paper: { - padding: theme.spacing.unit, - }, -}); - -const HoverPopoverPopupState = ({ classes }) => ( - - {popupState => ( -
- Hover with a Popover. - - The content of the Popover. - -
- )} - -); - -HoverPopoverPopupState.propTypes = { - classes: PropTypes.object.isRequired, -}; - -export default withStyles(styles)(HoverPopoverPopupState); diff --git a/docs/src/pages/utils/popup-state/MenuPopupState.js b/docs/src/pages/utils/popup-state/MenuPopupState.js deleted file mode 100644 index 345fa85a58a9d1..00000000000000 --- a/docs/src/pages/utils/popup-state/MenuPopupState.js +++ /dev/null @@ -1,26 +0,0 @@ -import * as React from 'react'; -import Button from '@material-ui/core/Button'; -import Menu from '@material-ui/core/Menu'; -import MenuItem from '@material-ui/core/MenuItem'; -import PopupState, { bindTrigger, bindMenu } from '@material-ui/core/PopupState'; - -const MenuPopupState = () => ( - - {popupState => { - const { close } = popupState; - return ( - - - - Cake - Death - - - ); - }} - -); - -export default MenuPopupState; diff --git a/docs/src/pages/utils/popup-state/PopoverPopupState.js b/docs/src/pages/utils/popup-state/PopoverPopupState.js deleted file mode 100644 index 875d1de5a6f7bf..00000000000000 --- a/docs/src/pages/utils/popup-state/PopoverPopupState.js +++ /dev/null @@ -1,44 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; -import Typography from '@material-ui/core/Typography'; -import Button from '@material-ui/core/Button'; -import Popover from '@material-ui/core/Popover'; -import PopupState, { bindTrigger, bindPopover } from '@material-ui/core/PopupState'; - -const styles = theme => ({ - typography: { - margin: theme.spacing.unit * 2, - }, -}); - -const PopoverPopupState = ({ classes }) => ( - - {popupState => ( -
- - - The content of the Popover. - -
- )} - -); - -PopoverPopupState.propTypes = { - classes: PropTypes.object.isRequired, -}; - -export default withStyles(styles)(PopoverPopupState); diff --git a/docs/src/pages/utils/popup-state/PopperPopupState.js b/docs/src/pages/utils/popup-state/PopperPopupState.js deleted file mode 100644 index 1dd544ab880e71..00000000000000 --- a/docs/src/pages/utils/popup-state/PopperPopupState.js +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; -import Typography from '@material-ui/core/Typography'; -import Button from '@material-ui/core/Button'; -import Popper from '@material-ui/core/Popper'; -import PopupState, { bindToggle, bindPopper } from '@material-ui/core/PopupState'; -import Fade from '@material-ui/core/Fade'; -import Paper from '@material-ui/core/Paper'; - -const styles = theme => ({ - typography: { - padding: theme.spacing.unit * 2, - }, -}); - -const PopperPopupState = ({ classes }) => ( - - {popupState => ( -
- - - {({ TransitionProps }) => ( - - - The content of the Popper. - - - )} - -
- )} - -); - -PopperPopupState.propTypes = { - classes: PropTypes.object.isRequired, -}; - -export default withStyles(styles)(PopperPopupState); diff --git a/docs/src/pages/utils/popup-state/popup-state.md b/docs/src/pages/utils/popup-state/popup-state.md deleted file mode 100644 index b2acdddff2c0b3..00000000000000 --- a/docs/src/pages/utils/popup-state/popup-state.md +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: PopupState React component -components: PopupState, Menu, Popover, Popper ---- - -# PopupState - -

PopupState takes care of the boilerplate for common Menu, Popover and Popper use cases.

- -It is a [render props component](https://reactjs.org/docs/render-props.html) that -keeps track of the local state for a single popup, and passes the state and -mutation functions to a child render function. - -## Bind functions - -`@material-ui/core/PopupState` exports several helper functions you can use to -connect components easily: - -* `bindMenu`: creates props to control a `Menu` component. -* `bindPopover`: creates props to control a `Popover` component. -* `bindPopper`: creates props to control a `Popper` component. -* `bindTrigger`: creates props for a component that opens the popup when clicked. -* `bindToggle`: creates props for a component that toggles the popup when clicked. -* `bindHover`: creates props for a component that opens the popup while hovered. - -To use one of these functions, you should call it with the props `PopupState` -passed to your child function, and spread the return value into the desired -element: - -```js -import * as React from 'react'; -import Button from '@material-ui/core/Button'; -import Menu from '@material-ui/core/Menu'; -import MenuItem from '@material-ui/core/MenuItem'; -import PopupState, { bindTrigger, bindMenu } from '@material-ui/core/PopupState'; - -const MenuPopupState = () => ( - - {popupState => ( - - - - Cake - Death - - - )} - -); - -export default MenuPopupState; -``` - -## Examples - -### Menu - -{{"demo": "pages/utils/popup-state/MenuPopupState.js"}} - -### Popover - -{{"demo": "pages/utils/popup-state/PopoverPopupState.js"}} - -### Mouse over Interaction - -{{"demo": "pages/utils/popup-state/HoverPopoverPopupState.js"}} - -### Popper - -{{"demo": "pages/utils/popup-state/PopperPopupState.js"}} diff --git a/packages/material-ui/src/PopupState/PopupState.js b/packages/material-ui/src/PopupState/PopupState.js deleted file mode 100644 index f06919088e0480..00000000000000 --- a/packages/material-ui/src/PopupState/PopupState.js +++ /dev/null @@ -1,157 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import warning from 'warning'; -import exactProp from '../utils/exactProp'; - -/** - * Creates props for a component that opens the popup when clicked. - * - * @param {object} popupState the argument passed to the child function of - * `PopupState` - */ -export function bindTrigger({ isOpen, open, popupId }) { - return { - 'aria-owns': isOpen ? popupId : null, - 'aria-haspopup': true, - onClick: open, - }; -} - -/** - * Creates props for a component that toggles the popup when clicked. - * - * @param {object} popupState the argument passed to the child function of - * `PopupState` - */ -export function bindToggle({ isOpen, toggle, popupId }) { - return { - 'aria-owns': isOpen ? popupId : null, - 'aria-haspopup': true, - onClick: toggle, - }; -} - -/** - * Creates props for a component that opens the popup while hovered. - * - * @param {object} popupState the argument passed to the child function of - * `PopupState` - */ -export function bindHover({ isOpen, open, close, popupId }) { - return { - 'aria-owns': isOpen ? popupId : null, - 'aria-haspopup': true, - onMouseEnter: open, - onMouseLeave: close, - }; -} - -/** - * Creates props for a `Popover` component. - * - * @param {object} popupState the argument passed to the child function of - * `PopupState` - */ -export function bindPopover({ isOpen, anchorEl, close, popupId }) { - return { - id: popupId, - anchorEl, - open: isOpen, - onClose: close, - }; -} - -/** - * Creates props for a `Menu` component. - * - * @param {object} popupState the argument passed to the child function of - * `PopupState` - */ -export const bindMenu = bindPopover; - -/** - * Creates props for a `Popper` component. - * - * @param {object} popupState the argument passed to the child function of - * `PopupState` - */ -export function bindPopper({ isOpen, anchorEl, popupId }) { - return { - id: popupId, - anchorEl, - open: isOpen, - }; -} - -export default class PopupState extends React.Component { - state = { anchorEl: null }; - - handleToggle = eventOrAnchorEl => { - if (this.state.anchorEl) this.handleClose(); - else this.handleOpen(eventOrAnchorEl); - }; - - handleOpen = eventOrAnchorEl => { - warning(eventOrAnchorEl || eventOrAnchorEl.target, 'eventOrAnchorEl should be defined'); - this.setState({ - anchorEl: - eventOrAnchorEl && eventOrAnchorEl.target ? eventOrAnchorEl.target : eventOrAnchorEl, - }); - }; - - handleClose = () => this.setState({ anchorEl: null }); - - handleSetOpen = (open, eventOrAnchorEl) => { - if (open) this.handleOpen(eventOrAnchorEl); - else this.handleClose(); - }; - - render() { - const { children, popupId } = this.props; - const { anchorEl } = this.state; - - const isOpen = Boolean(anchorEl); - - return children({ - open: this.handleOpen, - close: this.handleClose, - toggle: this.handleToggle, - setOpen: this.handleSetOpen, - isOpen, - anchorEl, - popupId, - }); - } -} - -PopupState.propTypes = { - /** - * The render function. - * - * @param {object} props the properties injected by `PopupState`: - *
    - *
  • `open(eventOrAnchorEl)`: opens the popup
    • - *
  • `close()`: closes the popup
    • - *
  • `toggle(eventOrAnchorEl)`: opens the popup if it is closed, or - * closes the popup if it is open. - *
    • - *
  • `setOpen(open, [eventOrAnchorEl])`: sets whether the popup is open. - * `eventOrAnchorEl` is required if `open` is truthy. - *
    • - *
  • `isOpen`: `true`/`false` if the popup is open/closed
    • - *
  • `anchorEl`: the current anchor element (`null` the popup is closed)
    • - *
  • `popupId`: the `popupId` prop you passed
    • - *
- * - * @returns {React.Node} the content to display - */ - children: PropTypes.func.isRequired, - /** - * The `id` property to use for the popup. Will be passed to the render - * function as `bindPopup.id`, and also used for the `aria-owns` property - * passed to the trigger component via `bindTrigger`. - */ - popupId: PropTypes.string, -}; - -PopupState.propTypes = exactProp(PopupState.propTypes); diff --git a/packages/material-ui/src/PopupState/PopupState.test.js b/packages/material-ui/src/PopupState/PopupState.test.js deleted file mode 100644 index d8ec3a5d69b077..00000000000000 --- a/packages/material-ui/src/PopupState/PopupState.test.js +++ /dev/null @@ -1,253 +0,0 @@ -import * as React from 'react'; -import { spy } from 'sinon'; -import { assert } from 'chai'; -import { createMount } from '../test-utils'; -import Button from '../Button'; -import Popper from '../Popper'; -import Popover from '../Popover'; -import Menu from '../Menu'; -import MenuItem from '../MenuItem'; -import PopupState, { - bindMenu, - bindPopover, - bindPopper, - bindTrigger, - bindToggle, - bindHover, -} from './PopupState'; - -/* eslint-disable react/jsx-handler-names */ - -describe('', () => { - let mount; - - before(() => { - mount = createMount(); - }); - - after(() => { - mount.cleanUp(); - }); - - describe('bindMenu/bindTrigger', () => { - let buttonRef; - let button; - let menu; - - const render = spy(popupState => ( - - - - Test - - - )); - - beforeEach(() => render.resetHistory()); - - it('passes correct props to bindTrigger/bindPopup', () => { - const wrapper = mount({render}); - button = wrapper.find(Button); - menu = wrapper.find(Menu); - assert.strictEqual(render.args[0][0].isOpen, false); - assert.strictEqual(button.prop('aria-owns'), null); - assert.strictEqual(button.prop('aria-haspopup'), true); - assert.strictEqual(button.prop('onClick'), render.args[0][0].open); - assert.strictEqual(menu.prop('id'), 'menu'); - assert.strictEqual(menu.prop('anchorEl'), null); - assert.strictEqual(menu.prop('open'), false); - assert.strictEqual(menu.prop('onClose'), render.args[0][0].close); - - button.simulate('click'); - wrapper.update(); - button = wrapper.find(Button); - menu = wrapper.find(Menu); - assert.strictEqual(render.args[1][0].isOpen, true); - assert.strictEqual(button.prop('aria-owns'), 'menu'); - assert.strictEqual(button.prop('aria-haspopup'), true); - assert.strictEqual(button.prop('onClick'), render.args[1][0].open); - assert.strictEqual(menu.prop('id'), 'menu'); - assert.strictEqual(menu.prop('anchorEl'), buttonRef); - assert.strictEqual(menu.prop('open'), true); - assert.strictEqual(menu.prop('onClose'), render.args[1][0].close); - - wrapper.find(MenuItem).simulate('click'); - wrapper.update(); - button = wrapper.find(Button); - menu = wrapper.find(Menu); - assert.strictEqual(render.args[2][0].isOpen, false); - assert.strictEqual(button.prop('aria-owns'), null); - assert.strictEqual(button.prop('aria-haspopup'), true); - assert.strictEqual(button.prop('onClick'), render.args[2][0].open); - assert.strictEqual(menu.prop('id'), 'menu'); - assert.strictEqual(menu.prop('anchorEl'), null); - assert.strictEqual(menu.prop('open'), false); - assert.strictEqual(menu.prop('onClose'), render.args[2][0].close); - }); - it('open/close works', () => { - const wrapper = mount({render}); - - render.args[0][0].open(buttonRef); - wrapper.update(); - assert.strictEqual(render.args[1][0].isOpen, true); - - render.args[1][0].close(); - wrapper.update(); - assert.strictEqual(render.args[2][0].isOpen, false); - }); - it('toggle works', () => { - const wrapper = mount({render}); - - render.args[0][0].toggle(buttonRef); - wrapper.update(); - assert.strictEqual(render.args[1][0].isOpen, true); - - render.args[1][0].toggle(buttonRef); - wrapper.update(); - assert.strictEqual(render.args[2][0].isOpen, false); - }); - it('setOpen works', () => { - const wrapper = mount({render}); - - render.args[0][0].setOpen(true, buttonRef); - wrapper.update(); - assert.strictEqual(render.args[1][0].isOpen, true); - - render.args[1][0].setOpen(false); - wrapper.update(); - assert.strictEqual(render.args[2][0].isOpen, false); - }); - }); - describe('bindToggle/bindPopper', () => { - let buttonRef; - let button; - let popper; - - const render = spy(popupState => ( - - - The popper content - - )); - - beforeEach(() => render.resetHistory()); - - it('passes correct props to bindToggle/bindPopup', () => { - const wrapper = mount({render}); - button = wrapper.find(Button); - popper = wrapper.find(Popper); - assert.strictEqual(render.args[0][0].isOpen, false); - assert.strictEqual(button.prop('aria-owns'), null); - assert.strictEqual(button.prop('aria-haspopup'), true); - assert.strictEqual(button.prop('onClick'), render.args[0][0].toggle); - assert.strictEqual(popper.prop('id'), 'popper'); - assert.strictEqual(popper.prop('anchorEl'), null); - assert.strictEqual(popper.prop('open'), false); - assert.strictEqual(popper.prop('onClose'), undefined); - - button.simulate('click'); - wrapper.update(); - button = wrapper.find(Button); - popper = wrapper.find(Popper); - assert.strictEqual(render.args[1][0].isOpen, true); - assert.strictEqual(button.prop('aria-owns'), 'popper'); - assert.strictEqual(button.prop('aria-haspopup'), true); - assert.strictEqual(button.prop('onClick'), render.args[1][0].toggle); - assert.strictEqual(popper.prop('id'), 'popper'); - assert.strictEqual(popper.prop('anchorEl'), buttonRef); - assert.strictEqual(popper.prop('open'), true); - assert.strictEqual(popper.prop('onClose'), undefined); - - button.simulate('click'); - wrapper.update(); - button = wrapper.find(Button); - popper = wrapper.find(Popper); - assert.strictEqual(render.args[2][0].isOpen, false); - assert.strictEqual(button.prop('aria-owns'), null); - assert.strictEqual(button.prop('aria-haspopup'), true); - assert.strictEqual(button.prop('onClick'), render.args[2][0].toggle); - assert.strictEqual(popper.prop('id'), 'popper'); - assert.strictEqual(popper.prop('anchorEl'), null); - assert.strictEqual(popper.prop('open'), false); - assert.strictEqual(popper.prop('onClose'), undefined); - }); - }); - describe('bindHover/bindPopover', () => { - let buttonRef; - let button; - let popover; - - const render = spy(popupState => ( - - - The popover content - - )); - - beforeEach(() => render.resetHistory()); - - it('passes correct props to bindHover/bindPopover', () => { - const wrapper = mount({render}); - button = wrapper.find(Button); - popover = wrapper.find(Popover); - assert.strictEqual(render.args[0][0].isOpen, false); - assert.strictEqual(button.prop('aria-owns'), null); - assert.strictEqual(button.prop('aria-haspopup'), true); - assert.strictEqual(button.prop('onMouseEnter'), render.args[0][0].open); - assert.strictEqual(button.prop('onMouseLeave'), render.args[0][0].close); - assert.strictEqual(popover.prop('id'), 'popover'); - assert.strictEqual(popover.prop('anchorEl'), null); - assert.strictEqual(popover.prop('open'), false); - assert.strictEqual(popover.prop('onClose'), render.args[0][0].close); - - button.simulate('mouseenter'); - wrapper.update(); - button = wrapper.find(Button); - popover = wrapper.find(Popover); - assert.strictEqual(render.args[1][0].isOpen, true); - assert.strictEqual(button.prop('aria-owns'), 'popover'); - assert.strictEqual(button.prop('aria-haspopup'), true); - assert.strictEqual(button.prop('onMouseEnter'), render.args[1][0].open); - assert.strictEqual(button.prop('onMouseLeave'), render.args[1][0].close); - assert.strictEqual(popover.prop('id'), 'popover'); - assert.strictEqual(popover.prop('anchorEl'), buttonRef); - assert.strictEqual(popover.prop('open'), true); - assert.strictEqual(popover.prop('onClose'), render.args[1][0].close); - - button.simulate('mouseleave'); - wrapper.update(); - button = wrapper.find(Button); - popover = wrapper.find(Popover); - assert.strictEqual(render.args[2][0].isOpen, false); - assert.strictEqual(button.prop('aria-owns'), null); - assert.strictEqual(button.prop('aria-haspopup'), true); - assert.strictEqual(button.prop('onMouseEnter'), render.args[2][0].open); - assert.strictEqual(button.prop('onMouseLeave'), render.args[2][0].close); - assert.strictEqual(popover.prop('id'), 'popover'); - assert.strictEqual(popover.prop('anchorEl'), null); - assert.strictEqual(popover.prop('open'), false); - assert.strictEqual(popover.prop('onClose'), render.args[1][0].close); - }); - }); -}); diff --git a/packages/material-ui/src/PopupState/index.js b/packages/material-ui/src/PopupState/index.js deleted file mode 100644 index 389f4c9364b4e2..00000000000000 --- a/packages/material-ui/src/PopupState/index.js +++ /dev/null @@ -1,9 +0,0 @@ -export { - default, - bindMenu, - bindPopover, - bindPopper, - bindToggle, - bindTrigger, - bindHover, -} from './PopupState'; diff --git a/pages/api/menu.md b/pages/api/menu.md index bc76d17fa6650d..ec799e64a74b35 100644 --- a/pages/api/menu.md +++ b/pages/api/menu.md @@ -59,5 +59,4 @@ You can take advantage of this behavior to [target nested components](/guides/ap ## Demos - [Menus](/demos/menus) -- [Popup State](/utils/popup-state) diff --git a/pages/api/popover.md b/pages/api/popover.md index e62513d66763d2..5c52886d0266d8 100644 --- a/pages/api/popover.md +++ b/pages/api/popover.md @@ -68,5 +68,4 @@ You can take advantage of this behavior to [target nested components](/guides/ap ## Demos - [Popover](/utils/popover) -- [Popup State](/utils/popup-state) diff --git a/pages/api/popper.md b/pages/api/popper.md index 00b19c4e98f33e..a0f50c2b344672 100644 --- a/pages/api/popper.md +++ b/pages/api/popper.md @@ -33,5 +33,4 @@ Any other properties supplied will be spread to the root element (native element - [Autocomplete](/demos/autocomplete) - [Menus](/demos/menus) - [Popper](/utils/popper) -- [Popup State](/utils/popup-state) diff --git a/pages/api/popup-state.js b/pages/api/popup-state.js deleted file mode 100644 index ecd4a503a45b09..00000000000000 --- a/pages/api/popup-state.js +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import withRoot from 'docs/src/modules/components/withRoot'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import markdown from './popup-state.md'; - -function Page() { - return ; -} - -export default withRoot(Page); diff --git a/pages/api/popup-state.md b/pages/api/popup-state.md deleted file mode 100644 index dbffd03792abbf..00000000000000 --- a/pages/api/popup-state.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -filename: /packages/material-ui/src/PopupState/PopupState.js -title: PopupState API ---- - - - -# PopupState - -

The API documentation of the PopupState React component.

- - - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| children * | func |   | The render function.

**Signature:**
`function(props: object) => React.Node`
*props:* the properties injected by `PopupState`:
  • `open(eventOrAnchorEl)`: opens the popup
  • `close()`: closes the popup
  • `toggle(eventOrAnchorEl)`: opens the popup if it is closed, or closes the popup if it is open.
  • `setOpen(open, [eventOrAnchorEl])`: sets whether the popup is open. `eventOrAnchorEl` is required if `open` is truthy.
  • `isOpen`: `true`/`false` if the popup is open/closed
  • `anchorEl`: the current anchor element (`null` the popup is closed)
  • `popupId`: the `popupId` prop you passed

*returns* (React.Node): the content to display | -| popupId | string |   | The `id` property to use for the popup. Will be passed to the render function as `bindPopup.id`, and also used for the `aria-owns` property passed to the trigger component via `bindTrigger`. | - -Any other properties supplied will be spread to the root element (native element). - -## Demos - -- [Popup State](/utils/popup-state) - diff --git a/pages/demos/menus.js b/pages/demos/menus.js index 64d81ce3a5a214..06d935e252eda1 100644 --- a/pages/demos/menus.js +++ b/pages/demos/menus.js @@ -48,6 +48,13 @@ module.exports = require('fs') raw: preval` module.exports = require('fs') .readFileSync(require.resolve('docs/src/pages/demos/menus/FadeMenu'), 'utf8') +`, + }, + 'pages/demos/menus/RenderPropsMenu.js': { + js: require('docs/src/pages/demos/menus/RenderPropsMenu').default, + raw: preval` +module.exports = require('fs') + .readFileSync(require.resolve('docs/src/pages/demos/menus/RenderPropsMenu'), 'utf8') `, }, }} diff --git a/pages/utils/popover.js b/pages/utils/popover.js index f62cdf2b48daef..fd72e70426c473 100644 --- a/pages/utils/popover.js +++ b/pages/utils/popover.js @@ -27,6 +27,13 @@ module.exports = require('fs') raw: preval` module.exports = require('fs') .readFileSync(require.resolve('docs/src/pages/utils/popover/MouseOverPopover'), 'utf8') +`, + }, + 'pages/utils/popover/RenderPropsPopover.js': { + js: require('docs/src/pages/utils/popover/RenderPropsPopover').default, + raw: preval` +module.exports = require('fs') + .readFileSync(require.resolve('docs/src/pages/utils/popover/RenderPropsPopover'), 'utf8') `, }, }} diff --git a/pages/utils/popper.js b/pages/utils/popper.js index c4d81415697622..248875e8e6969e 100644 --- a/pages/utils/popper.js +++ b/pages/utils/popper.js @@ -41,6 +41,13 @@ module.exports = require('fs') raw: preval` module.exports = require('fs') .readFileSync(require.resolve('docs/src/pages/utils/popper/ScrollPlayground'), 'utf8') +`, + }, + 'pages/utils/popper/RenderPropsPopper.js': { + js: require('docs/src/pages/utils/popper/RenderPropsPopper').default, + raw: preval` +module.exports = require('fs') + .readFileSync(require.resolve('docs/src/pages/utils/popper/RenderPropsPopper'), 'utf8') `, }, }} diff --git a/pages/utils/popup-state.js b/pages/utils/popup-state.js deleted file mode 100644 index 8a6521f65cb308..00000000000000 --- a/pages/utils/popup-state.js +++ /dev/null @@ -1,44 +0,0 @@ -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/utils/popup-state/popup-state.md'; - -function Page() { - return ( - - ); -} - -export default withRoot(Page);