Skip to content

Issue#9: implements popover component #33

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

Merged
merged 1 commit into from
Oct 27, 2018
Merged

Issue#9: implements popover component #33

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
1 change: 0 additions & 1 deletion src/Menu/Menu.Component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React from 'react';
import {} from '..';
import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '..';
import { Menu, MenuList, MenuItem, MenuGroup } from '..';

Expand Down
2 changes: 1 addition & 1 deletion src/Menu/Menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { BrowserRouter, Link } from 'react-router-dom';
import { Link } from 'react-router-dom';

// ------------------------------------------- Menu ------------------------------------------
export const Menu = props => {
Expand Down
168 changes: 168 additions & 0 deletions src/Popover/Popover.Component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
import React from 'react';
import { Popover, Image, Identifier, Icon, Menu, MenuList, MenuItem } from '../';
import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';

export const PopoverComponent = () => {
const popoverCode = `<Popover
id="jhqD0555"
control={<Image size="m" photo="https://placeimg.com/400/400/nature" />}
body={
<Menu>
<MenuList>
<MenuItem url="/">Option 1</MenuItem>
<MenuItem url="/">Option 2</MenuItem>
<MenuItem url="/">Option 3</MenuItem>
<MenuItem url="/">Option 4</MenuItem>
</MenuList>
</Menu>
}
/>

<Popover
id="jhqD0556"
control={<Image size="m" type="circle" photo="https://placeimg.com/400/400/nature" />}
body={
<Menu>
<MenuList>
<MenuItem url="/">Option 1</MenuItem>
<MenuItem url="/">Option 2</MenuItem>
<MenuItem url="/">Option 3</MenuItem>
<MenuItem url="/">Option 4</MenuItem>
</MenuList>
</Menu>
}
/>

<Popover
id="jhqD0557"
control={<Identifier size="m" glyph="money-bills" color="6" />}
body={
<Menu>
<MenuList>
<MenuItem url="/">Option 1</MenuItem>
<MenuItem url="/">Option 2</MenuItem>
<MenuItem url="/">Option 3</MenuItem>
<MenuItem url="/">Option 4</MenuItem>
</MenuList>
</Menu>
}
/>

<Popover
id="jhqD0558"
control={<Icon glyph="menu2" size="xl" />}
body={
<Menu>
<MenuList>
<MenuItem url="/">Option 1</MenuItem>
<MenuItem url="/">Option 2</MenuItem>
<MenuItem url="/">Option 3</MenuItem>
<MenuItem url="/">Option 4</MenuItem>
</MenuList>
</Menu>
}
/>`;

return (
<div>
<Header>Popover</Header>
<Description>
The popover is a wrapping component that accepts a "control" as well as a "body". A control can be
anything that you want to trigger the interaction from. The body will be the contents of what you reveal
on the page after triggering the popover. When paired with the menu component, the popover is commonly
used as the interaction/wrapping component for composing "dropdowns", "contextual menus", "mega menus",
etc. As a general rule, it is suggested that one popover be revealed on the page at any given time.
Opening one popover should close all others to prevent multiple layers and collisions of several
popovers.
</Description>
<Import module="Popover" path="/fundamental-react/src/" />

<Separator />

<Properties
type="Inputs"
properties={[
{
name: 'control',
description: 'Component - Control element to toggle the display of the popover.'
},
{
name: 'body',
description: 'Component - Wrapper that contains the popover content.'
},
{
name: 'id',
description: 'string - optional. Element id.'
}
]}
/>

<Separator />

<h2>Popover Example</h2>
<DocsTile>
<Popover
id="jhqD0555"
control={<Image size="m" photo="https://placeimg.com/400/400/nature" />}
body={
<Menu>
<MenuList>
<MenuItem url="/">Option 1</MenuItem>
<MenuItem url="/">Option 2</MenuItem>
<MenuItem url="/">Option 3</MenuItem>
<MenuItem url="/">Option 4</MenuItem>
</MenuList>
</Menu>
}
/>

<Popover
id="jhqD0556"
control={<Image size="m" type="circle" photo="https://placeimg.com/400/400/nature" />}
body={
<Menu>
<MenuList>
<MenuItem url="/">Option 1</MenuItem>
<MenuItem url="/">Option 2</MenuItem>
<MenuItem url="/">Option 3</MenuItem>
<MenuItem url="/">Option 4</MenuItem>
</MenuList>
</Menu>
}
/>

<Popover
id="jhqD0557"
control={<Identifier size="m" glyph="money-bills" color="6" />}
body={
<Menu>
<MenuList>
<MenuItem url="/">Option 1</MenuItem>
<MenuItem url="/">Option 2</MenuItem>
<MenuItem url="/">Option 3</MenuItem>
<MenuItem url="/">Option 4</MenuItem>
</MenuList>
</Menu>
}
/>

<Popover
id="jhqD0558"
control={<Icon glyph="menu2" size="xl" />}
body={
<Menu>
<MenuList>
<MenuItem url="/">Option 1</MenuItem>
<MenuItem url="/">Option 2</MenuItem>
<MenuItem url="/">Option 3</MenuItem>
<MenuItem url="/">Option 4</MenuItem>
</MenuList>
</Menu>
}
/>
</DocsTile>
<DocsText>{popoverCode}</DocsText>
<Separator />
</div>
);
};
96 changes: 96 additions & 0 deletions src/Popover/Popover.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';

// ---------------------------------------- Popover ----------------------------------------
export class Popover extends Component {
constructor(props) {
super(props);
this.triggerBody = this.triggerBody.bind(this);
this.pressEsc = this.pressEsc.bind(this);
this.handleOutsideClick = this.handleOutsideClick.bind(this);
this.state = {
isExpanded: false
};
}

triggerBody() {
if (!this.state.isExpanded) {
document.addEventListener('click', this.handleOutsideClick, false);
} else {
document.removeEventListener('click', this.handleOutsideClick, false);
}

this.setState(prevState => ({
isExpanded: !prevState.isExpanded
}));
}

pressEsc(event) {
if (event.keyCode === 27 && this.state.isExpanded === true) {
this.setState({
isExpanded: false
});
}
}

handleOutsideClick(e) {
if (!this.node.contains(e.target)) {
if (this.state.isExpanded) {
this.setState({
isExpanded: false
});
} else {
return;
}
}
}

componentDidMount() {
document.addEventListener('keydown', this.pressEsc, false);
document.addEventListener('click', this.handleOutsideClick, false);
}
componentWillUnmount() {
document.removeEventListener('keydown', this.pressEsc, false);
document.removeEventListener('click', this.handleOutsideClick, false);
}

render() {
const { id, control, body } = this.props;
return (
<div
className="fd-popover"
ref={this.setWrapperRef}
ref={node => {
this.node = node;
}}
>
<PopoverControl id={id} trigger={this.triggerBody} expanded={this.state.isExpanded}>
{control}
</PopoverControl>
<PopoverBody id={id} hidden={!this.state.isExpanded}>
{body}
</PopoverBody>
</div>
);
}
}

// ------------------------------------- Popover Control------------------------------------
export const PopoverControl = props => {
const { id, expanded, trigger, disabled, isDropdown, glyph, size, btnType, children } = props;
return (
<div className="fd-popover__control" aria-expanded={expanded} onClick={trigger} aria-controls={id}>
{children}
</div>
);
};

// -------------------------------------- Popover Body--------------------------------------
export const PopoverBody = props => {
const { id, hidden, children } = props;
return (
<div className="fd-popover__body" aria-hidden={hidden} id={id}>
{children}
</div>
);
};
2 changes: 2 additions & 0 deletions src/Routes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import { ListGroupComponent } from './ListGroup/ListGroup.Component';
import { MegaMenuComponent } from './MegaMenu/MegaMenu.Component';
import { MenuComponent } from './Menu/Menu.Component';
import { PaginationComponent } from './Pagination/Pagination.Component'
import { PopoverComponent } from './Popover/Popover.Component';
import { SideNavigationComponent } from './SideNavigation/SideNavigation.Component';
import { TableComponent } from './Table/Table.Component';
import { TabsComponent } from './Tabs/Tabs.Component';
Expand Down Expand Up @@ -50,6 +51,7 @@ export default class Routes extends Component {
{ url: '/megaMenu', name: 'Mega Menu', component: MegaMenuComponent },
{ url: '/menu', name: 'Menu', component: MenuComponent },
{ url: '/pagination', name: 'Pagination', component: PaginationComponent },
{ url: '/popover', name: 'Popover', component: PopoverComponent },
{ url: '/sideNavigation', name: 'Side Navigation', component: SideNavigationComponent },
{ url: '/table', name: 'Table', component: TableComponent },
{ url: '/tabs', name: 'Tabs', component: TabsComponent },
Expand Down
30 changes: 9 additions & 21 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,7 @@ import { Breadcrumb, BreadcrumbItem } from '../src/Breadcrumb/Breadcrumb';
import { Button, ButtonGroup, ButtonGrouped } from '../src/Button/Button';
import { Calendar } from '../src/Calendar/Calendar';
import { DatePicker } from '../src/DatePicker/DatePicker';
import {
Dropdown,
DropdownList,
DropdownGroup
} from '../src/Dropdown/Dropdown';
import { Dropdown, DropdownList, DropdownGroup } from '../src/Dropdown/Dropdown';
import {
FormSet,
FormItem,
Expand All @@ -33,24 +29,12 @@ import { Identifier } from '../src/Identifier/Identifier';
import { Image } from '../src/Image/Image';
import { InlineHelp } from '../src/InlineHelp/InlineHelp';
import { InputGroup, FormGroup } from '../src/InputGroup/InputGroup';
import {
ListGroup,
ListGroupItem,
ListGroupItemActions,
ListGroupItemCheckbox
} from '../src/ListGroup/ListGroup';
import {
MegaMenu,
MegaMenuList,
MegaMenuGroup
} from '../src/MegaMenu/MegaMenu';
import { ListGroup, ListGroupItem, ListGroupItemActions, ListGroupItemCheckbox } from '../src/ListGroup/ListGroup';
import { MegaMenu, MegaMenuList, MegaMenuGroup } from '../src/MegaMenu/MegaMenu';
import { Menu, MenuList, MenuItem, MenuGroup } from '../src/Menu/Menu';
import { Pagination } from '../src/Pagination/Pagination';
import {
SideNav,
SideNavList,
SideNavGroup
} from '../src/SideNavigation/SideNavigation';
import { Popover, PopoverControl, PopoverBody } from '../src/Popover/Popover';
import { SideNav, SideNavItem, SideNavList, SideNavGroup } from '../src/SideNavigation/SideNavigation';
import { Table } from '../src/Table/Table';
import { Tabs, TabComponent } from '../src/Tabs/Tabs';
import { Tag } from '../src/Tag/Tag';
Expand Down Expand Up @@ -126,9 +110,13 @@ export {
MenuList,
MenuItem,
MenuGroup,
Popover,
PopoverControl,
PopoverBody,
Pagination,
SideNav,
SideNavList,
SideNavItem,
SideNavGroup,
Table,
Tabs,
Expand Down