wix-style-react
Version:
wix-style-react
296 lines (294 loc) • 10.4 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _DropdownBase = _interopRequireDefault(require("../DropdownBase"));
var _Popover = require("../Popover");
var _PopoverMenuSt = require("./PopoverMenu.st.css");
var _ListItemSection = require("../ListItemSection");
var _excluded = ["id", "disabled", "dataHook", "skin", "subtitle", "title"];
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/PopoverMenu/PopoverMenu.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; }
/** PopoverMenu */
class PopoverMenu extends _react.default.PureComponent {
constructor() {
super(...arguments);
this.ref = /*#__PURE__*/_react.default.createRef();
this._open = () => {
if (this.ref.current) {
this.ref.current._open();
}
};
this._filterChildren = children => {
return _react.default.Children.map(children, child => child).filter(child => typeof child !== 'string');
};
this._buildOptions = children => {
return children.map((child, id) => {
var displayName = child.type && child.type.displayName;
if (displayName && displayName === 'PopoverMenu.Divider') {
return {
id,
divider: true,
dataHook: child.props.dataHook
};
}
if (displayName && displayName === 'PopoverMenu.MenuItem') {
return {
id,
title: child.props.text,
onClick: child.props.onClick,
skin: child.props.skin,
dataHook: child.props.dataHook,
prefixIcon: child.props.prefixIcon,
disabled: child.props.disabled,
subtitle: child.props.subtitle,
suffixIcon: child.props.suffixIcon
};
}
return {
id,
value: child,
custom: true,
overrideStyle: true
};
});
};
this._renderOptions = () => {
var {
textSize,
ellipsis
} = this.props;
var children = this._filterChildren(this.props.children);
var options = this._buildOptions(children);
return options.map(option => {
// Custom
if (option.custom) {
return option;
}
// Divider
if (option.divider) {
return (0, _ListItemSection.listItemSectionBuilder)(_objectSpread({
type: 'divider'
}, option));
}
var {
id,
disabled,
dataHook,
skin,
subtitle,
title
} = option,
rest = (0, _objectWithoutProperties2.default)(option, _excluded);
return _objectSpread(_objectSpread({}, rest), {}, {
id,
disabled,
as: 'button',
dataHook: dataHook || "popover-menu-".concat(id),
skin: skin || 'dark',
size: textSize,
className: _PopoverMenuSt.classes.listItem,
ellipsis,
subtitle,
shouldFocusWithoutScroll: true,
value: 'action',
title: false,
optionTitle: title
});
});
};
this._renderTriggerElement = _ref => {
var {
toggle,
open,
close,
isOpen,
ref
} = _ref;
var {
triggerElement
} = this.props;
if (!triggerElement) {
return null;
}
var commonProps = {
onClick: toggle,
ref,
'aria-haspopup': 'menu',
'aria-expanded': isOpen
};
return /*#__PURE__*/_react.default.isValidElement(triggerElement) ? /*#__PURE__*/_react.default.cloneElement(triggerElement, _objectSpread({}, commonProps)) : triggerElement(_objectSpread({
toggle,
open,
close,
isOpen
}, commonProps));
};
}
render() {
var {
appendTo,
placement,
minWidth,
maxWidth,
flip,
fixed,
showArrow,
dataHook,
moveBy,
maxHeight,
zIndex,
className,
fluid,
onHide,
onShow
} = this.props;
return /*#__PURE__*/_react.default.createElement(_DropdownBase.default, {
ref: this.ref,
className: (0, _PopoverMenuSt.st)(_PopoverMenuSt.classes.root, className),
dataHook: dataHook,
animate: true,
options: this._renderOptions(),
appendTo: appendTo,
placement: placement,
minWidth: minWidth,
maxWidth: maxWidth,
flip: flip,
fixed: fixed,
showArrow: showArrow,
tabIndex: -1,
moveBy: moveBy,
maxHeight: maxHeight,
zIndex: zIndex,
fluid: fluid,
onHide: onHide,
onShow: onShow,
listType: "action",
autoFocus: true,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 254,
columnNumber: 7
}
}, _ref2 => {
var {
toggle,
open,
close,
isOpen,
ref
} = _ref2;
return this._renderTriggerElement({
toggle,
open,
close,
isOpen,
ref
});
});
}
}
PopoverMenu.displayName = 'PopoverMenu';
PopoverMenu.MenuItem = () => ({});
PopoverMenu.Divider = () => ({});
PopoverMenu.propTypes = {
/** Sets a maximum width for a Popover menu */
maxWidth: _propTypes.default.number,
/** Sets a minimum width for a Popover menu */
minWidth: _propTypes.default.number,
/** Sets a maximum height for a Popover menu */
maxHeight: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/** Sets the Popover z-index */
zIndex: _propTypes.default.number,
/** Moves Popover menu overlay relative to its trigger element by a defined number of px:
* - horizontally (on X-axis)
* - or vertically (on Y-axis)
*/
moveBy: _propTypes.default.shape({
x: _propTypes.default.number,
y: _propTypes.default.number
}),
/** Defines a component that calls out a Popover menu (`<IconButton />`, `<Button />` or `<Text Button />`) */
triggerElement: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]).isRequired,
/** Defines the Popover menu’s overlay placement in relation to its trigger element:
* * auto-start
* * auto
* * auto-end
* * top-start
* * top
* * top-end
* * right-start
* * right
* * right-end
* * bottom-start
* * bottom
* * bottom-end
* * left-start
* * left
* * left-end
*/
placement: _propTypes.default.oneOf(_Popover.placements),
/** Sets the size of text in Popover menu items */
textSize: _propTypes.default.oneOf(['small', 'medium']),
/** Truncates menu item text that overflows component’s max Width */
ellipsis: _propTypes.default.bool,
/**
* Stores Popover menu compound components:
* - <PopoverMenu.MenuItem />
* - <PopoverMenu.Divider /> (optional)
*
* `<PopoverMenu.MenuItem>` component has these fields:
* * `text` - Sets a label for a Popover menu item
* * `onClick` - Defines a callback function which is called when a Popover menu item is clicked on
* * `skin` - Controls the appearance of a Popover menu item (one of `standard`, `dark`, `destructive`)
* * `prefixIcon` - Contains an icon at the start of a Popover menu item
* * `dataHook` - Applies a data-hook HTML attribute to be used in the tests
* * `suffixIcon` - suffix icon property
* * `disabled` - Disables a Popover menu item
* * `subtitle` - Sets a text for a Popover menu item subtitle\
*
* `<PopoverMenu.Divider>` component has these fields:
* * `dataHook` - Applies a data-hook HTML attribute to be used in the tests
*/
children: _propTypes.default.node,
/** Enables calculations in relation to a DOM element */
appendTo: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
/** Enables the flip behaviour. This behaviour is used to flip the overlay placement when it starts to overlap the trigger element. */
flip: _propTypes.default.bool,
/** Enables the fixed behaviour. This behaviour is used to keep the overlay at its original placement even when it is being positioned outside the boundary. */
fixed: _propTypes.default.bool,
/* Allows truncating the trigger element to a specified parent container width. */
fluid: _propTypes.default.bool,
/** Controls visibility of the pointer arrow */
showArrow: _propTypes.default.bool,
/** Applies a data-hook HTML attribute to be used in the tests */
dataHook: _propTypes.default.string,
/** Applies a CSS class to the component’s root element */
className: _propTypes.default.string,
/** Defines a callback function which is called when a Popover menu is opened */
onShow: _propTypes.default.func,
/** Defines a callback function which is called when a Popover menu is closed */
onHide: _propTypes.default.func
};
PopoverMenu.defaultProps = {
maxWidth: 204,
minWidth: 144,
placement: 'bottom',
appendTo: 'window',
textSize: 'medium',
fixed: true,
flip: true,
showArrow: true,
ellipsis: false,
maxHeight: 'auto'
};
PopoverMenu.MenuItem.displayName = 'PopoverMenu.MenuItem';
PopoverMenu.Divider.displayName = 'PopoverMenu.Divider';
var _default = exports.default = PopoverMenu;
//# sourceMappingURL=PopoverMenu.js.map