Skip to content

Commit

Permalink
Merge 1e80fe4 into 08974b3
Browse files Browse the repository at this point in the history
  • Loading branch information
@parostatkiem-zz
parostatkiem-zz committed Nov 5, 2019
2 parents 08974b3 + 1e80fe4 commit b9bfcdc
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 11 deletions.
39 changes: 33 additions & 6 deletions src/Dropdown/Dropdown.Component.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
import path from 'path';
import React from 'react';
import { useRef } from 'react';
import { Button, Dropdown, Menu, Popover } from '../';
import { ComponentPage, Example } from '../_playground';


export const DropdownComponent = () => {
const dropdownRef = useRef(null);

return (
<ComponentPage
description={`The **Dropdown** component lets the user select one of the different options.
Expand Down Expand Up @@ -45,7 +49,7 @@ export const DropdownComponent = () => {
}
control={
<Button className='fd-dropdown__control' compact>
Select
Select
</Button>
}
id='jhqD0556'
Expand All @@ -71,7 +75,7 @@ export const DropdownComponent = () => {
}
control={
<Button className='fd-dropdown__control' glyph='filter'>
Select
Select
</Button>
}
id='jhqD0557'
Expand All @@ -93,7 +97,7 @@ export const DropdownComponent = () => {
control={
<Button className='fd-dropdown__control' compact
glyph='filter'>
Select
Select
</Button>
}
id='jhqD0558'
Expand All @@ -118,7 +122,7 @@ export const DropdownComponent = () => {
}
control={
<Button className='fd-dropdown__control'>
Select
Select
</Button>
}
id='jhqD0559'
Expand All @@ -139,13 +143,36 @@ export const DropdownComponent = () => {
}
control={
<Button className='fd-dropdown__control' compact>
Select
Select
</Button>
}
id='jhqD0560'
noArrow />
</Dropdown>
</Example>
<Example
centered
description="Assign a reference (useRef) to <Dropdown> and use it as the 'parentElement' property of <Popover>"
title="Width limited to parent's">
<Dropdown ref={dropdownRef}>
<Popover
body={
<Menu>
<Menu.List>
<Menu.Item url='#'>Option 1</Menu.Item>
<Menu.Item url='#'>Option 2</Menu.Item>
<Menu.Item url='#'>Option 3</Menu.Item>
<Menu.Item url='#'>Option 4</Menu.Item>
</Menu.List>
</Menu>
}
control={<Button className='fd-dropdown__control'>Select</Button>}
id='jhqD0555'
noArrow
parentElement={dropdownRef} />
</Dropdown>
</Example>


<Example
centered
Expand All @@ -165,7 +192,7 @@ export const DropdownComponent = () => {
control={
<Button className='fd-dropdown__control' disabled
glyph='filter'>
Select
Select
</Button>
}
disabled
Expand Down
9 changes: 6 additions & 3 deletions src/Popover/Popover.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ class Popover extends Component {
className,
placement,
popperProps,
parentElement,
...rest
} = this.props;

Expand All @@ -55,7 +56,6 @@ class Popover extends Component {
const referenceComponent = React.cloneElement(control, {
onClick: onClickFunctions
});

const popoverClasses = classnames('fd-popover', className);

return (
Expand All @@ -66,6 +66,7 @@ class Popover extends Component {
noArrow={noArrow}
onClickOutside={chain(this.handleOutsideClick, onClickOutside)}
onEscapeKey={chain(this.handleOutsideClick, onEscapeKey)}
parentElement={parentElement}
popperPlacement={placement}
popperProps={popperProps}
referenceClassName='fd-popover__control'
Expand All @@ -90,22 +91,24 @@ Popover.propTypes = {
disableEdgeDetection: PropTypes.bool,
disableStyles: PropTypes.bool,
noArrow: PropTypes.bool,
parentElement: PropTypes.shape({ current: PropTypes.any }),
placement: PropTypes.oneOf(POPPER_PLACEMENTS),
popperProps: PropTypes.object,
onClickOutside: PropTypes.func,
onEscapeKey: PropTypes.func
};

Popover.defaultProps = {
onClickOutside: () => {},
onEscapeKey: () => {}
onClickOutside: () => { },
onEscapeKey: () => { }
};

Popover.propDescriptions = {
body: 'Node(s) to render in the overlay.',
control: 'Node to render as the reference element (that the `body` will be placed in relation to).',
disableEdgeDetection: 'Set to **true** to render popover without edge detection so popover will not flip from top to bottom with scroll.',
noArrow: 'Set to **true** to render a popover without an arrow.',
parentElement: 'A reference (useRef) to an element of which the Popover will be positioned and sized relatively. Leave it empty to let it be done automatically.',
placement: 'Initial position of the `body` (overlay) related to the `control`.',
popperProps: 'Additional props to be spread to the overlay element, supported by <a href="https://popper.js.org" target="_blank">popper.js</a>.',
onClickOutside: 'Callback for consumer clicking outside of popover body.',
Expand Down
11 changes: 9 additions & 2 deletions src/utils/_Popper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ class Popper extends React.Component {
disableEdgeDetection,
noArrow,
onClickOutside,
parentElement,
popperClassName,
popperModifiers,
popperPlacement,
Expand Down Expand Up @@ -94,6 +95,11 @@ class Popper extends React.Component {
if (!show) {
return null;
}
const currentParentElement = parentElement && parentElement.current;
if (currentParentElement) {
const { x: left, bottom: top, width } = currentParentElement.getBoundingClientRect();
style = { ...style, left, top, width };
}

return (
<div
Expand Down Expand Up @@ -149,6 +155,7 @@ Popper.propTypes = {
referenceComponent: PropTypes.element.isRequired,
disableEdgeDetection: PropTypes.bool,
noArrow: PropTypes.bool,
parentElement: PropTypes.shape({ current: PropTypes.any }),
popperClassName: PropTypes.string,
popperModifiers: PropTypes.object,
popperPlacement: PropTypes.oneOf(POPPER_PLACEMENTS),
Expand All @@ -175,8 +182,8 @@ Popper.defaultProps = {
}
},
popperPlacement: 'bottom-start',
onClickOutside: () => {},
onKeyDown: () => {}
onClickOutside: () => { },
onKeyDown: () => { }
};

export default Popper;

0 comments on commit b9bfcdc

Please sign in to comment.