wix-style-react/dist/es/src/Popover/Popover.js

wix-style-react

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { PopoverCore } from './PopoverCore/PopoverCore';
import requestAnimationFramePolyfill from '../utils/request-animation-frame';
import { placements } from './constants';
/**
 *  This has been added in order to fix jsdom not having requestAnimation frame
 *  installed. Jest by default has this polyfilled, but mocha fails on it.
 */
if (process.env.NODE_ENV === 'test') {
    requestAnimationFramePolyfill.install();
}
const ANIMATION_ENTER = 150;
const ANIMATION_EXIT = 100;
class Popover extends PureComponent {
    render() {
        const { animate, ...rest } = this.props;
        const timeout = animate
            ? { enter: ANIMATION_ENTER, exit: ANIMATION_EXIT }
            : undefined;
        return React.createElement(PopoverCore, { timeout: timeout, ...rest });
    }
}
Popover.displayName = 'Popover';
Popover.Element = PopoverCore.Element;
Popover.Content = PopoverCore.Content;
Popover.propTypes = {
    /** The Popover's placement:
     *  * auto-start
     *  * auto
     *  * auto-end
     *  * top-start
     *  * top
     *  * top-end
     *  * right-start
     *  * right
     *  * right-end
     *  * bottom-end
     *  * bottom
     *  * bottom-start
     *  * left-end
     *  * left
     *  * left-start
     */
    placement: PropTypes.oneOf(placements),
    /** Is the content shown or not */
    shown: PropTypes.bool,
    /** Enables calculations in relation to a dom element */
    appendTo: PropTypes.oneOf(['window', 'scrollParent', 'parent', 'viewport']),
    /** custom classname */
    className: PropTypes.string,
    /** the classname to be passed to the popover's content container */
    contentClassName: PropTypes.string,
    /** Custom arrow element */
    customArrow: PropTypes.func,
    /** Breaking change: When true - onClickOutside will be called only when popover content is shown */
    disableClickOutsideWhenClosed: PropTypes.bool,
    /** popovers content is set to minnimum width of trigger element, but it can expand up to the value of maxWidth. */
    dynamicWidth: PropTypes.bool,
    /** Clicking on elements with this excluded class will will not trigger onClickOutside callback */
    excludeClass: PropTypes.string,
    /**
     * Whether to enable the fixed behaviour. This behaviour is used to keep the `<Popover/>` at it's
     * original placement even when it's being positioned outside the boundary.
     */
    fixed: PropTypes.bool,
    /**
     * Whether to enable the flip behaviour. This behaviour is used to flip the `<Popover/>`'s placement
     * when it starts to overlap the target element (`<Popover.Element/>`).
     */
    flip: PropTypes.bool,
    /* stretch trigger element to the width of its container. */
    fluid: PropTypes.bool,
    /** Hide Delay in ms */
    hideDelay: PropTypes.number,
    /** Id */
    id: PropTypes.string,
    /**
     * popover content maxWidth value
     * - `number` value which converts to css with `px`
     * - `string` value that contains `px`
     */
    maxWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    /**
     * popover content minWidth value
     * - `number` value which converts to css with `px`
     * - `string` value that contains `px`
     */
    minWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    /** Moves arrow by amount */
    moveArrowTo: PropTypes.number,
    /** Moves popover relative to the parent */
    moveBy: PropTypes.shape({ x: PropTypes.number, y: PropTypes.number }),
    /** onClick on the component */
    onClick: PropTypes.func,
    /** Provides callback to invoke when clicked outside of the popover */
    onClickOutside: PropTypes.func,
    /** onKeyDown on the target component */
    onKeyDown: PropTypes.func,
    /** onMouseEnter on the component */
    onMouseEnter: PropTypes.func,
    /** onMouseLeave on the component */
    onMouseLeave: PropTypes.func,
    /** target element role value */
    role: PropTypes.string,
    /** Show show arrow from the content */
    showArrow: PropTypes.bool,
    /** Show Delay in ms */
    showDelay: PropTypes.number,
    /** Inline style */
    style: PropTypes.object,
    /** Animation timer */
    timeout: PropTypes.oneOfType([
        PropTypes.number,
        PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number }),
    ]),
    /**
     * popover content width value
     * - `number` value which converts to css with `px`
     * - `string` value that contains `px`
     */
    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    /** popover z-index */
    zIndex: PropTypes.number,
    /** Applied as data-hook HTML attribute that can be used in the tests */
    dataHook: PropTypes.string,
    /** Adds enter and exit animation */
    animate: PropTypes.bool,
    /** The theme of the popover */
    theme: PropTypes.oneOf(['dark', 'light']),
    /** Callback fo invoke when popover is shown */
    onShow: PropTypes.func,
    /** Callback fo invoke when popover is hidden */
    onHide: PropTypes.func,
};
Popover.defaultProps = {
    appendTo: 'parent',
    theme: 'light',
    animate: false,
};
export default Popover;
//# sourceMappingURL=Popover.js.map