| 1 | import React from 'react'
|
| 2 | import { storiesOf } from '@storybook/react'
|
| 3 | import { action, decorateAction } from '@storybook/addon-actions'
|
| 4 | import PortaledPopper from '../src/popper-utils/PortaledPopper'
|
| 5 |
|
| 6 | const renderReferenceButton = ({ ref }) => (
|
| 7 | <button type="button" ref={ref}>
|
| 8 | Reference Button
|
| 9 | </button>
|
| 10 | )
|
| 11 |
|
| 12 | const renderPopper = ({ ref, style, placement, arrowProps }) => (
|
| 13 | <div ref={ref} style={style} data-placement={placement}>
|
| 14 | Popper element
|
| 15 | <div ref={arrowProps.ref} style={arrowProps.style} />
|
| 16 | </div>
|
| 17 | )
|
| 18 |
|
| 19 | storiesOf('Popper utils', module).add('React Popper', () => (
|
| 20 | <PortaledPopper popperRender={renderPopper}>{renderReferenceButton}</PortaledPopper>
|
| 21 | ))
|