1.0.5 • Published 3 years ago
popover-windows v1.0.5
Popover
- Using popover in multi window
API:
| Property | Type | Required | Description | Default |
|---|---|---|---|---|
| identity | object | ✓ | Identity popover according window and name | empty |
| content | React element or underling html | ✓ | Content overlay popover | null |
| placement | string | Position where popover was displayed. Includes: top, top-left, top-right, right, righ-top, right-bottom,... | bottom-right | |
| affectWindow | string array | List window (Every window has multi popover) was affected on page click or press keyboard events. If value = [] affect total window | Only window where popover defined | |
| anchorEl | dom node | Any element. Popover's position depend on this element | null | |
| fixedPosition | object | popover was fit on window. Includes 2 prop left and top. Ex: {left:'300px', top:'500px} | null | |
| deltaPosition | object | Diff position with anchor element position} | {left:0, top:'0'} | |
| isArrow | boolean | false | ||
| style | object | Allow override style popover root | null | |
| className | string | Allow append className to popover container | null | |
| mountContainter | Dom Node | Specific container render | Window global | |
| windowContext | Object. {window: window, document: window.document} | Specific context of window |
Example:
import Popover, {PopoverManager} from 'popover-windows';
- Where open popover, using method: PopoverManager.openPopover({windowId:'1',name:'your popover name', anchorEvent: event, onAfterOpen: () => console.log('do something after open popover)});
- Where close popover, using method: PopoverManager.closePopover({windowId:'1',name:'your popover name'});
onClick (event) {
PopoverManager.openPopover({windowId:'1',name:'your popover name',anchorEvent: event});
}<Popover
identity={{windowId:'1',name:'your popover name'}}
content={<YourComponent/>}
placement={'bottom-left'}
/>- Get popover:
const status = PopoverManager.isVisible({windowId:'1',name:'your popover name'});- Listent popover status:
PopoverManager.on('afterOpen', {windowId,popoverName}, () => {
// Do something
});
PopoverManager.removeListener('afterOpen', {windowId,popoverName}, () => {
// Do something
});
Supported Events : afterOpen, beforeClose