boundless-popover

# Popover A popover is a type of [Dialog](https://github.com/enigma-io/boundless/tree/master/packages/boundless-dialog) that is meant to provide additional context to content (an "anchor") currently on-screen. Typically, a popover is spawned by interacting with the content it enriches and is dismissed by clicking or shifting focus to an alternate location. Alignment options for the popover are designed to mirror compass directions: ``` → ← NNW N NNE ↓ WNW ENE ↓ W ANCHOR E ↑ WSW ESE ↑ SSW S SSE → ← ``` The arrows indicate which way the popover will extend, e.g. → means the popover is aligned to the left edge and extends in that direction. Diagonal corners (NW, NE, SE, SW) are currently not supported. ```jsx <Popover anchor={document.querySelector('.some-anchor-element')} preset={Popover.preset.N}> My popover content! </Popover> ``` ## Installation ```bash npm i boundless-popover --save ``` Then use it like: ```jsx /** @jsx createElement */ import { createElement, PureComponent } from 'react'; import ArrowKeyNavigation from 'boundless-arrow-key-navigation'; import Button from 'boundless-button'; import Popover from 'boundless-popover'; export default class PopoverDemo extends PureComponent { state = { words: [ { word: 'transcendental', syllabicRepresentation: 'tran·scen·den·tal', type: 'adjective', primaryDefinition: '', secondaryDefinitions: [ 'of or relating to a spiritual or nonphysical realm', '(of a number, e.g., e or π) real but not a root of an algebraic equation with rational roots', ], }, { word: 'obstetrics', syllabicRepresentation: 'ob·stet·rics', type: 'noun', preset: Popover.preset.N, primaryDefinition: 'the branch of medicine and surgery concerned with childbirth and the care of women giving birth', secondaryDefinitions: [], }, { word: 'olio', syllabicRepresentation: 'o·li·o', type: 'noun', preset: Popover.preset.E, primaryDefinition: [ <span key='1'>another term for </span>, <a key='2' href='https://www.google.com/search?safe=active&espv=2&biw=1440&bih=74&q=define+olla+podrida&sa=X&ved=0CB8QgCswAGoVChMIlbiutZmDxwIVQx0-Ch1f-g9t'>olla podrida</a>, ], secondaryDefinitions: [ 'a miscellaneous collection of things', 'a variety act or show', ], }, { word: 'anastrophe', syllabicRepresentation: 'a·nas·tro·phe', type: 'noun', preset: Popover.preset.W, primaryDefinition: 'the inversion of the usual order of words or clauses', secondaryDefinitions: [], }, { word: 'octothorp', syllabicRepresentation: 'oc·to·thorp', type: 'noun', preset: Popover.preset.WNW, primaryDefinition: 'another term for the pound sign (#)', secondaryDefinitions: [], } ], } handleKeyDown(index, event) { if (event.key === 'Enter') { this[this.state['showPopover' + index] ? 'showPopover' : 'hidePopover'](index, event); } } openPopover(index) { this.setState({ ['showPopover' + index]: true }); } closePopover(index) { this.setState({ ['showPopover' + index]: false }); } renderSecondaryDefinitions(definitions = []) { return definitions.length ? ( <ArrowKeyNavigation component='ol'> {definitions.map((definition, index) => <li key={index}>{definition}</li>)} </ArrowKeyNavigation> ) : null; } renderPrimaryDefinition(definition) { return definition ? (<p>{definition}</p>) : null; } renderBody(definition) { return ( <div> <strong>{definition.syllabicRepresentation}</strong> <br /> <em>{definition.type}</em> {this.renderPrimaryDefinition(definition.primaryDefinition)} {this.renderSecondaryDefinitions(definition.secondaryDefinitions)} </div> ); } renderPopovers() { return this.state.words.map((definition, index) => { return this.state['showPopover' + index] ? ( <Popover key={definition.word} anchor={this.refs[`$word${index}`]} caretAnchor={this.refs[`$word-caret-anchor${index}`]} className='demo-popover' closeOnOutsideFocus={true} preset={definition.preset} onClose={() => this.closePopover(index)}> {this.renderBody(definition)} </Popover> ) : undefined; }); } render() { return ( <div> <p> Words of the day for {(new Date()).toLocaleDateString()}:<br /> <sub>Note that the words with ⓘ symbols have their caret anchored to the symbol, rather than the center of the button.</sub> </p> <div className='spread'> {this.state.words.map((definition, index) => { return ( <Button key={definition.word} ref={`$word${index}`} className='show-help-popover' onPressed={() => this.openPopover(index)} pressed={this.state[`showPopover${index}`]} tabIndex='0'> {definition.word} {index % 2 === 0 ? <span ref={`$word-caret-anchor${index}`}>ⓘ</span> : null} </Button> ); })} </div> {this.renderPopovers()} </div> ); } } ``` Popover can also just be directly used from the main [Boundless library](https://www.npmjs.com/package/boundless). This is recommended when you're getting started to avoid maintaining the package versions of several components: ```bash npm i boundless --save ``` the ES6 `import` statement then becomes like: ```js import { Popover } from 'boundless'; ``` ## Props > Note: only top-level props are in the README, for the full list check out the [website](https://boundless.js.org/Popover). ### Required Props - __`anchor`__ · a DOM element or React reference (ref) to one for positioning purposes Expects | Default Value --- | --- `HTMLElement or object` | `undefined` ### Optional Props - __`*`__ · any [React-supported attribute](https://facebook.github.io/react/docs/tags-and-attributes.html#html-attributes) Expects | Default Value --- | --- `any` | `n/a` - __`after`__ · arbitrary content to be rendered after the dialog in the DOM Expects | Default Value --- | --- `any renderable` | `null` - __`autoReposition`__ · if the given alignment settings would take the popover out of bounds, change the alignment as necessary to remain in the viewport Expects | Default Value --- | --- `bool` | `true` - __`before`__ · arbitrary content to be rendered before the dialog in the DOM Expects | Default Value --- | --- `any renderable` | `null` - __`captureFocus`__ · determines if focus is allowed to move away from the dialog Expects | Default Value --- | --- `bool` | `true` - __`caretAnchor`__ · a DOM element or React reference (ref) to one for positioning purposes, the caret component will be automatically positioned to center on this provided anchor; by default it will center on `props.anchor` Expects | Default Value --- | --- `HTMLElement or object` | `undefined` - __`caretComponent`__ · the JSX that is rendered and used to point at the middle of the anchor element and indicate the context of the popover Expects | Default Value --- | --- `ReactElement` | `<svg viewBox='0 0 14 9.5' xmlns='http://www.w3.org/2000/svg'> <g> <polygon className='b-popover-caret-border' fill='#000' points='7 0 14 10 0 10' /> <polygon className='b-popover-caret-fill' fill='#FFF' points='6.98230444 1.75 12.75 10 1.25 10' /> </g></svg>` - __`closeOnEscKey`__ · enable detection of "Escape" keypresses to trigger `props.onClose`; if a function is provided, the return value determines if the dialog will be closed Expects | Default Value --- | --- `bool or function` | `false` - __`closeOnInsideClick`__ · enable detection of clicks inside the dialog area to trigger `props.onClose`; if a function is provided, the return value determines if the dialog will be closed Expects | Default Value --- | --- `bool or function` | `false` - __`closeOnOutsideClick`__ · enable detection of clicks outside the dialog area to trigger `props.onClose`; if a function is provided, the return value determines if the dialog will be closed Expects | Default Value --- | --- `bool or function` | `false` - __`closeOnOutsideFocus`__ · enable detection of focus outside the dialog area to trigger `props.onClose`; if a function is provided, the return value determines if the dialog will be closed Expects | Default Value --- | --- `bool or function` | `false` - __`closeOnOutsideScroll`__ · enable detection of scroll and mousewheel events outside the dialog area to trigger `props.onClose`; if a function is provided, the return value determines if the dialog will be closed Expects | Default Value --- | --- `bool or function` | `false` - __`component`__ · override the type of `.b-dialog-wrapper` HTML element Expects | Default Value --- | --- `string` | `'div'` - __`dialogComponent`__ · override the type of `.b-dialog` HTML element Expects | Default Value --- | --- `string` | `'div'` - __`dialogProps`__ Expects | Default Value --- | --- `object` | `{}` - __`onClose`__ · a custom event handler that is called to indicate that the dialog should be unrendered by its parent; the event occurs if one or more of the "closeOn" props (`closeOnEscKey`, `closeOnOutsideClick`, etc.) are passed as `true` and the dismissal criteria are satisfied Expects | Default Value --- | --- `function` | `() => {}` - __`portalProps`__ Expects | Default Value --- | --- `object` | `{}` - __`preset`__ · example: ```jsx <Popover anchor={document.querySelector('.some-anchor-element')} preset={Popover.preset.NNE}> My popover content! </Popover> ``` Expects | Default Value --- | --- `Popover.preset.NNW or Popover.preset.N or Popover.preset.NNE or Popover.preset.ENE or Popover.preset.E or Popover.preset.ESE or Popover.preset.SSE or Popover.preset.S or Popover.preset.SSW or Popover.preset.WSW or Popover.preset.W or Popover.preset.WNW` | `Popover.preset.S` ## Reference Styles ### Stylus You can see what variables are available to override in [variables.styl](https://github.com/enigma-io/boundless/blob/master/variables.styl). ```stylus // Redefine any variables as desired, e.g: color-accent = royalblue // Bring in the component styles; they will be autoconfigured based on the above @require "node_modules/boundless-popover/style" ``` ### CSS If desired, a precompiled plain CSS stylesheet is available for customization at `/build/style.css`, based on Boundless's [default variables](https://github.com/enigma-io/boundless/blob/master/variables.styl).