wix-style-react
Version:
wix-style-react
151 lines (150 loc) • 7.12 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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _ClosablePopover = _interopRequireDefault(require("./ClosablePopover/ClosablePopover"));
var _FloatingHelperContent = _interopRequireDefault(require("./FloatingHelperContent/FloatingHelperContent"));
var _FloatingHelperSt = require("./FloatingHelper.st.css");
var _constants = require("./constants");
var _CloseButton = _interopRequireDefault(require("../CloseButton"));
var _constants2 = require("../CloseButton/constants");
var _excluded = ["children", "width", "content", "appearance"];
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/FloatingHelper/FloatingHelper.js";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
class FloatingHelper extends _react.default.Component {
constructor() {
super(...arguments);
this.closablePopoverRef = void 0;
this.open = () => this.closablePopoverRef.open();
this.close = () => this.closablePopoverRef.close();
}
_isControlled() {
return this.props.opened !== undefined;
}
_getCloseButtonHandler(closableActions) {
return this._isControlled() ? this.props.onClose ? this.props.onClose : () => null : closableActions.close;
}
_renderContent(closableActions, _ref) {
var {
width,
content,
appearance
} = _ref;
return /*#__PURE__*/_react.default.createElement("div", {
"data-hook": _constants.dataHooks.contentWrapper,
style: {
width
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 34,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement("div", {
"data-hook": _constants.dataHooks.innerContent,
className: _FloatingHelperSt.classes.innerContent,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 35,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement(_CloseButton.default, {
className: _FloatingHelperSt.classes.closeButton,
dataHook: _constants.dataHooks.closeButton,
onClick: () => this._getCloseButtonHandler(closableActions)(),
skin: appearance === _constants.floatingHelperAppearance.dark ? _constants2.SKINS.light : _constants2.SKINS.dark,
size: _constants2.SIZES.medium,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 39,
columnNumber: 11
}
}), /*#__PURE__*/_react.default.cloneElement(content, {
appearance
})));
}
render() {
var _this$props = this.props,
{
children,
width,
content,
appearance
} = _this$props,
rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
var renderContent = closableActions => this._renderContent(closableActions, {
width,
content,
appearance
});
var closablePopoverProps = _objectSpread(_objectSpread({}, rest), {}, {
appearance,
content: renderContent,
showArrow: true,
closeOnMouseLeave: false
});
return /*#__PURE__*/_react.default.createElement(_ClosablePopover.default, (0, _extends2.default)({}, closablePopoverProps, {
ref: _ref2 => this.closablePopoverRef = _ref2,
className: _FloatingHelperSt.classes.root,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 75,
columnNumber: 7
}
}));
}
}
FloatingHelper.displayName = 'FloatingHelper';
FloatingHelper.propTypes = {
/** Applied as data-hook HTML attribute that can be used in the tests */
dataHook: _propTypes.default.string,
/** Width HTML attribute of the content. If a number is passed then it defaults to px. e.g width={400} => width="400px" */
width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/** The target of the popover */
target: _propTypes.default.node.isRequired,
/** A `<FloatingHelper.Content>` component */
content: _propTypes.default.node.isRequired,
/** callback to call when the popover content is requested to be closed (Uncontrolled mode only). NOTE: this callback is called when the close timeout (if exists) starts In Controlled mode - called when the close button is clicked. In Uncontrolled mode - called when the popover is closed */
onClose: _propTypes.default.func,
/** Appearance : `dark` or `light` */
appearance: _propTypes.default.oneOf(['dark', 'light']),
/** Controls whether the popover's content is initially opened (In Uncontrolled mode only) */
initiallyOpened: _propTypes.default.bool,
/** Controls whether the popover's content is shown or not (aka Controlled mode).
* When undefined, then the component is Uncontrolled. See open/close behaviour section in docs. */
opened: _propTypes.default.bool,
/** The location to display the content. */
placement: _propTypes.default.oneOf(['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']).isRequired,
/** Enables calculations in relation to a dom element. */
appendTo: _propTypes.default.oneOf(['scrollParent', 'viewport', 'window']),
/** Callback to call when the popover content is requested to be opened (Uncontrolled mode only)*/
onOpen: _propTypes.default.func,
/** Moves the floating helper relative to the parent by x or y */
moveBy: _propTypes.default.shape({
x: _propTypes.default.number,
y: _propTypes.default.number
}),
/** Floating helper z-index */
zIndex: _propTypes.default.number,
/** Set a delay on closing */
hideDelay: _propTypes.default.number
};
FloatingHelper.defaultProps = {
appendTo: 'window',
width: '444px',
initiallyOpened: true,
appearance: 'dark'
};
FloatingHelper.Content = _FloatingHelperContent.default;
var _default = exports.default = FloatingHelper;
//# sourceMappingURL=FloatingHelper.js.map