wix-style-react
Version:
297 lines (228 loc) • 10.6 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "placements", {
enumerable: true,
get: function get() {
return _constants.placements;
}
});
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _popover = require("wix-ui-core/dist/src/components/popover");
var _utils = require("wix-ui-core/dist/src/utils");
var _requestAnimationFrame = _interopRequireDefault(require("../utils/request-animation-frame"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _PopoverSt = require("./Popover.st.css");
var _context = require("../FontUpgrade/context");
var _FontUpgrade = _interopRequireDefault(require("../FontUpgrade"));
var _ThemeProviderConsumerBackwardCompatible = require("../ThemeProvider/ThemeProviderConsumerBackwardCompatible");
var _constants = require("./constants");
var _excluded = ["dataHook", "animate", "theme", "className"];
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
/**
* 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.
* Decided with Shlomi to get rid of this on next major version 7, where we will support
* only jest.
*/
if (process.env.NODE_ENV === 'test') {
_requestAnimationFrame["default"].install();
}
var ANIMATION_ENTER = 150;
var ANIMATION_EXIT = 100;
var ContentElement = function ContentElement(_ref) {
var children = _ref.children;
return /*#__PURE__*/_react["default"].createElement(_context.FontUpgradeContext.Consumer, null, function (_ref2) {
var active = _ref2.active;
return /*#__PURE__*/_react["default"].createElement(_FontUpgrade["default"], {
active: !!active
}, /*#__PURE__*/_react["default"].createElement(_popover.Popover.Content, {
children: children
}));
});
};
ContentElement.displayName = 'Popover.Content';
var Popover = /*#__PURE__*/function (_React$Component) {
(0, _inherits2["default"])(Popover, _React$Component);
var _super = _createSuper(Popover);
function Popover() {
(0, _classCallCheck2["default"])(this, Popover);
return _super.apply(this, arguments);
}
(0, _createClass2["default"])(Popover, [{
key: "render",
value: function render() {
var _this$props = this.props,
dataHook = _this$props.dataHook,
animate = _this$props.animate,
theme = _this$props.theme,
className = _this$props.className,
rest = (0, _objectWithoutProperties2["default"])(_this$props, _excluded);
var timeout = animate ? {
enter: ANIMATION_ENTER,
exit: ANIMATION_EXIT
} : undefined;
return /*#__PURE__*/_react["default"].createElement(_ThemeProviderConsumerBackwardCompatible.ThemeProviderConsumerBackwardCompatible, null, function (_ref3) {
var themeClassName = _ref3.className;
return /*#__PURE__*/_react["default"].createElement(_popover.Popover, (0, _extends2["default"])({
disableClickOutsideWhenClosed: true,
timeout: timeout,
"data-hook": dataHook
}, rest, {
className: (0, _PopoverSt.st)(_PopoverSt.classes.root, {
theme: theme
}, className, themeClassName)
}));
});
}
}]);
return Popover;
}(_react["default"].Component);
(0, _defineProperty2["default"])(Popover, "displayName", 'Popover');
(0, _defineProperty2["default"])(Popover, "Element", _popover.Popover.Element);
(0, _defineProperty2["default"])(Popover, "Content", ContentElement);
(0, _defineProperty2["default"])(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']),
children: function children(props, propName) {
var childrenArr = _react["default"].Children.toArray(props[propName]);
var childrenObj = (0, _utils.buildChildrenObject)(childrenArr, {
Element: null,
Content: null
});
if (!childrenObj.Element) {
return new Error('Invalid children provided, <Popover.Element/> must be provided');
}
if (!childrenObj.Content) {
return new Error('Invalid children provided, <Popover.Content/> must be provided');
}
return childrenArr.reduce(function (err, child) {
if (!err && child.type.displayName !== 'Popover.Element' && child.type.displayName !== 'Popover.Content') {
return new Error("Invalid children provided, unknown child <".concat(child.type.displayName || child.type, "/> supplied"));
}
return err;
}, false);
}
});
(0, _defineProperty2["default"])(Popover, "defaultProps", {
appendTo: 'parent',
animate: false
});
var _default = Popover;
exports["default"] = _default;