From 6689bbb4c1558de0b668b9522ba84f6cf7d9cd36 Mon Sep 17 00:00:00 2001 From: "Taushanova-Atanasova, Inna" Date: Sat, 27 Oct 2018 18:56:18 -0400 Subject: [PATCH] Issue#9: implements popover component --- src/Menu/Menu.Component.js | 1 - src/Menu/Menu.js | 2 +- src/Popover/Popover.Component.js | 168 +++++++++++++++++++++++++++++++ src/Popover/Popover.js | 96 ++++++++++++++++++ src/Routes.js | 2 + src/index.js | 30 ++---- 6 files changed, 276 insertions(+), 23 deletions(-) create mode 100644 src/Popover/Popover.Component.js create mode 100644 src/Popover/Popover.js diff --git a/src/Menu/Menu.Component.js b/src/Menu/Menu.Component.js index 55f7d0544..2b41cef7b 100644 --- a/src/Menu/Menu.Component.js +++ b/src/Menu/Menu.Component.js @@ -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 '..'; diff --git a/src/Menu/Menu.js b/src/Menu/Menu.js index 9bba31636..7dd70b14f 100644 --- a/src/Menu/Menu.js +++ b/src/Menu/Menu.js @@ -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 => { diff --git a/src/Popover/Popover.Component.js b/src/Popover/Popover.Component.js new file mode 100644 index 000000000..0526590e3 --- /dev/null +++ b/src/Popover/Popover.Component.js @@ -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 = `} + body={ + + + Option 1 + Option 2 + Option 3 + Option 4 + + + } +/> + +} + body={ + + + Option 1 + Option 2 + Option 3 + Option 4 + + + } +/> + +} + body={ + + + Option 1 + Option 2 + Option 3 + Option 4 + + + } +/> + + } + body={ + + + Option 1 + Option 2 + Option 3 + Option 4 + + + } +/>`; + + return ( +
+
Popover
+ + 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. + + + + + + + + + +

Popover Example

+ + } + body={ + + + Option 1 + Option 2 + Option 3 + Option 4 + + + } + /> + + } + body={ + + + Option 1 + Option 2 + Option 3 + Option 4 + + + } + /> + + } + body={ + + + Option 1 + Option 2 + Option 3 + Option 4 + + + } + /> + + } + body={ + + + Option 1 + Option 2 + Option 3 + Option 4 + + + } + /> + + {popoverCode} + +
+ ); +}; diff --git a/src/Popover/Popover.js b/src/Popover/Popover.js new file mode 100644 index 000000000..fae347059 --- /dev/null +++ b/src/Popover/Popover.js @@ -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 ( +
{ + this.node = node; + }} + > + + {control} + + +
+ ); + } +} + +// ------------------------------------- Popover Control------------------------------------ +export const PopoverControl = props => { + const { id, expanded, trigger, disabled, isDropdown, glyph, size, btnType, children } = props; + return ( +
+ {children} +
+ ); +}; + +// -------------------------------------- Popover Body-------------------------------------- +export const PopoverBody = props => { + const { id, hidden, children } = props; + return ( +
+ {children} +
+ ); +}; diff --git a/src/Routes.js b/src/Routes.js index c6e8d3cff..daf9bcb30 100644 --- a/src/Routes.js +++ b/src/Routes.js @@ -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'; @@ -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 }, diff --git a/src/index.js b/src/index.js index 02e81ede6..abe532212 100644 --- a/src/index.js +++ b/src/index.js @@ -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, @@ -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'; @@ -126,9 +110,13 @@ export { MenuList, MenuItem, MenuGroup, + Popover, + PopoverControl, + PopoverBody, Pagination, SideNav, SideNavList, + SideNavItem, SideNavGroup, Table, Tabs,