wix-style-react
Version:
wix-style-react
169 lines (168 loc) • 6.98 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _PopoverCore = require("./PopoverCore/PopoverCore");
var _requestAnimationFrame = _interopRequireDefault(require("../utils/request-animation-frame"));
var _constants = require("./constants");
var _excluded = ["animate"];
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/Popover/Popover.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
/**
* 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') {
_requestAnimationFrame.default.install();
}
var ANIMATION_ENTER = 150;
var ANIMATION_EXIT = 100;
class Popover extends _react.PureComponent {
render() {
var _this$props = this.props,
{
animate
} = _this$props,
rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
var timeout = animate ? {
enter: ANIMATION_ENTER,
exit: ANIMATION_EXIT
} : undefined;
return /*#__PURE__*/_react.default.createElement(_PopoverCore.PopoverCore, (0, _extends2.default)({
timeout: timeout
}, rest, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 183,
columnNumber: 12
}
}));
}
}
Popover.displayName = 'Popover';
Popover.Element = _PopoverCore.PopoverCore.Element;
Popover.Content = _PopoverCore.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.default.oneOf(_constants.placements),
/** Is the content shown or not */
shown: _propTypes.default.bool,
/** Enables calculations in relation to a dom element */
appendTo: _propTypes.default.oneOf(['window', 'scrollParent', 'parent', 'viewport']),
/** custom classname */
className: _propTypes.default.string,
/** the classname to be passed to the popover's content container */
contentClassName: _propTypes.default.string,
/** Custom arrow element */
customArrow: _propTypes.default.func,
/** Breaking change: When true - onClickOutside will be called only when popover content is shown */
disableClickOutsideWhenClosed: _propTypes.default.bool,
/** popovers content is set to minnimum width of trigger element, but it can expand up to the value of maxWidth. */
dynamicWidth: _propTypes.default.bool,
/** Clicking on elements with this excluded class will will not trigger onClickOutside callback */
excludeClass: _propTypes.default.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.default.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.default.bool,
/* stretch trigger element to the width of its container. */
fluid: _propTypes.default.bool,
/** Hide Delay in ms */
hideDelay: _propTypes.default.number,
/** Id */
id: _propTypes.default.string,
/**
* popover content maxWidth value
* - `number` value which converts to css with `px`
* - `string` value that contains `px`
*/
maxWidth: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
/**
* popover content minWidth value
* - `number` value which converts to css with `px`
* - `string` value that contains `px`
*/
minWidth: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
/** Moves arrow by amount */
moveArrowTo: _propTypes.default.number,
/** Moves popover relative to the parent */
moveBy: _propTypes.default.shape({
x: _propTypes.default.number,
y: _propTypes.default.number
}),
/** onClick on the component */
onClick: _propTypes.default.func,
/** Provides callback to invoke when clicked outside of the popover */
onClickOutside: _propTypes.default.func,
/** onKeyDown on the target component */
onKeyDown: _propTypes.default.func,
/** onMouseEnter on the component */
onMouseEnter: _propTypes.default.func,
/** onMouseLeave on the component */
onMouseLeave: _propTypes.default.func,
/** target element role value */
role: _propTypes.default.string,
/** Show show arrow from the content */
showArrow: _propTypes.default.bool,
/** Show Delay in ms */
showDelay: _propTypes.default.number,
/** Inline style */
style: _propTypes.default.object,
/** Animation timer */
timeout: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
enter: _propTypes.default.number,
exit: _propTypes.default.number
})]),
/**
* popover content width value
* - `number` value which converts to css with `px`
* - `string` value that contains `px`
*/
width: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
/** popover z-index */
zIndex: _propTypes.default.number,
/** Applied as data-hook HTML attribute that can be used in the tests */
dataHook: _propTypes.default.string,
/** Adds enter and exit animation */
animate: _propTypes.default.bool,
/** The theme of the popover */
theme: _propTypes.default.oneOf(['dark', 'light']),
/** Callback fo invoke when popover is shown */
onShow: _propTypes.default.func,
/** Callback fo invoke when popover is hidden */
onHide: _propTypes.default.func
};
Popover.defaultProps = {
appendTo: 'parent',
theme: 'light',
animate: false
};
var _default = exports.default = Popover;
//# sourceMappingURL=Popover.js.map