wix-style-react
Version:
431 lines (360 loc) • 15.9 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
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 _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
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 _propTypes = _interopRequireDefault(require("prop-types"));
var _ListItemAction = require("../ListItemAction");
var _DropdownBase = _interopRequireDefault(require("../DropdownBase"));
var _Popover = require("../Popover");
var _PopoverMenuSt = require("./PopoverMenu.st.css");
var _ListItemSection = require("../ListItemSection");
var _excluded = ["id", "disabled", "onClick", "dataHook", "skin", "subtitle"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
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; } }
/** PopoverMenu */
var PopoverMenu = /*#__PURE__*/function (_React$PureComponent) {
(0, _inherits2["default"])(PopoverMenu, _React$PureComponent);
var _super = _createSuper(PopoverMenu);
function PopoverMenu() {
var _this;
(0, _classCallCheck2["default"])(this, PopoverMenu);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "savedOnClicks", null);
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "focusableList", []);
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "children", {});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
focused: 0
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onSelect", function (e) {
var onClick = _this.savedOnClicks.find(function (_ref) {
var id = _ref.id;
return id === e.id;
}).onClick;
onClick && onClick();
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onKeyDown", function (e, id) {
var ARROW_LEFT = 37;
var ARROW_UP = 38;
var ARROW_RIGHT = 39;
var ARROW_DOWN = 40;
var length = _this.focusableList.length;
var focused = _this.state.focused;
var keyCode = e.keyCode;
if (keyCode === ARROW_LEFT || keyCode === ARROW_UP) {
if (id === 0) {
focused = _this.focusableList[length - 1];
} else {
var nextIndex = _this.focusableList.indexOf(id) - 1;
focused = _this.focusableList[nextIndex];
}
}
if (keyCode === ARROW_RIGHT || keyCode === ARROW_DOWN) {
if (id === length - 1) {
focused = _this.focusableList[0];
} else {
var _nextIndex = _this.focusableList.indexOf(id) + 1;
focused = _this.focusableList[_nextIndex];
}
}
if (focused !== _this.state.focused) {
_this._focus(e, focused);
}
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_focus", function (e, focused) {
e.preventDefault();
var _native = _this.children[focused].focus;
var focusableHOC = _this.children[focused].wrappedComponentRef;
var callback = _native ? _this.children[focused].focus : focusableHOC ? focusableHOC.innerComponentRef.focus : function () {
return {};
};
_this.setState({
focused: focused
}, function () {
return callback();
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_filterChildren", function (children) {
return _react["default"].Children.map(children, function (child) {
return child;
}).filter(function (child) {
return typeof child !== 'string';
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_buildOptions", function (children) {
return children.map(function (child, id) {
var displayName = child.type && child.type.displayName;
if (displayName && displayName === 'PopoverMenu.Divider') {
return {
id: id,
divider: true,
dataHook: child.props.dataHook
};
}
if (displayName && displayName === 'PopoverMenu.MenuItem') {
return {
id: 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
};
}
return {
id: id,
value: child,
custom: true,
overrideStyle: true
};
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_saveOnClicks", function (options) {
_this.savedOnClicks = options.map(function (_ref2) {
var id = _ref2.id,
onClick = _ref2.onClick;
return {
id: id,
onClick: onClick
};
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_renderOptions", function () {
var _this$props = _this.props,
textSize = _this$props.textSize,
ellipsis = _this$props.ellipsis;
var children = _this._filterChildren(_this.props.children);
var options = _this._buildOptions(children); // Store information for further use
_this._saveOnClicks(options);
return options.map(function (option) {
// Custom
if (option.custom) {
return option;
} // Divider
if (option.divider) {
return (0, _ListItemSection.listItemSectionBuilder)(_objectSpread({
type: 'divider'
}, option));
}
var id = option.id,
disabled = option.disabled,
onClick = option.onClick,
dataHook = option.dataHook,
skin = option.skin,
subtitle = option.subtitle,
rest = (0, _objectWithoutProperties2["default"])(option, _excluded);
var focused = _this.state.focused;
if (!disabled) {
_this.focusableList = [].concat((0, _toConsumableArray2["default"])(_this.focusableList), [id]);
}
return (0, _ListItemAction.listItemActionBuilder)(_objectSpread(_objectSpread({}, rest), {}, {
id: id,
disabled: disabled,
as: 'button',
dataHook: dataHook || "popover-menu-".concat(id),
ref: function ref(_ref3) {
return _this.children[id] = _ref3;
},
tabIndex: id === focused && !disabled ? '0' : '-1',
onKeyDown: function onKeyDown(e) {
return _this._onKeyDown(e, id);
},
skin: skin || 'dark',
size: textSize,
className: _PopoverMenuSt.classes.listItem,
ellipsis: ellipsis,
subtitle: subtitle
}));
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_renderTriggerElement", function (_ref4) {
var toggle = _ref4.toggle,
open = _ref4.open,
close = _ref4.close,
isOpen = _ref4.isOpen;
var triggerElement = _this.props.triggerElement;
if (!triggerElement) {
return null;
}
return /*#__PURE__*/_react["default"].isValidElement(triggerElement) ? /*#__PURE__*/_react["default"].cloneElement(triggerElement, {
onClick: toggle
}) : triggerElement({
onClick: toggle,
toggle: toggle,
open: open,
close: close,
isOpen: isOpen
});
});
return _this;
}
(0, _createClass2["default"])(PopoverMenu, [{
key: "render",
value: function render() {
var _this2 = this;
var _this$props2 = this.props,
appendTo = _this$props2.appendTo,
placement = _this$props2.placement,
minWidth = _this$props2.minWidth,
maxWidth = _this$props2.maxWidth,
flip = _this$props2.flip,
fixed = _this$props2.fixed,
showArrow = _this$props2.showArrow,
dataHook = _this$props2.dataHook,
moveBy = _this$props2.moveBy,
maxHeight = _this$props2.maxHeight,
zIndex = _this$props2.zIndex,
className = _this$props2.className,
fluid = _this$props2.fluid,
onHide = _this$props2.onHide,
onShow = _this$props2.onShow;
return /*#__PURE__*/_react["default"].createElement(_DropdownBase["default"], {
className: (0, _PopoverMenuSt.st)(_PopoverMenuSt.classes.root, className),
dataHook: dataHook,
animate: true,
options: this._renderOptions(),
onSelect: this._onSelect,
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
}, function (_ref5) {
var toggle = _ref5.toggle,
open = _ref5.open,
close = _ref5.close,
isOpen = _ref5.isOpen;
return _this2._renderTriggerElement({
toggle: toggle,
open: open,
close: close,
isOpen: isOpen
});
});
}
}]);
return PopoverMenu;
}(_react["default"].PureComponent);
(0, _defineProperty2["default"])(PopoverMenu, "displayName", 'PopoverMenu');
(0, _defineProperty2["default"])(PopoverMenu, "MenuItem", function () {
return {};
});
(0, _defineProperty2["default"])(PopoverMenu, "Divider", function () {
return {};
});
(0, _defineProperty2["default"])(PopoverMenu, "propTypes", {
/** The maximum width applied to the list */
maxWidth: _propTypes["default"].number,
/** The minimum width applied to the list */
minWidth: _propTypes["default"].number,
/** The maximum height value applied to the list */
maxHeight: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
/** Popover content z-index */
zIndex: _propTypes["default"].number,
/** Moves popover content relative to the parent by x or y */
moveBy: _propTypes["default"].shape({
x: _propTypes["default"].number,
y: _propTypes["default"].number
}),
/** Element to trigger the popover */
triggerElement: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].func]).isRequired,
/** 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(_Popover.placements),
/** Changing text size */
textSize: _propTypes["default"].oneOf(['small', 'medium']),
/** Enables text ellipsis on tight containers */
ellipsis: _propTypes["default"].bool,
/**
* `<PopoverMenu.MenuItem>` components that has these fields:
* * `text` - Item text
* * `onClick` - Callback to be triggered on item click
* * `skin` - Item theme (standard, dark, destructive)
* * `prefixIcon` - Prefix icon
* * `dataHook` - Hook for testing purposes
* * `disabled` - Disabled
*/
children: _propTypes["default"].node,
/** The Popover's appendTo */
appendTo: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
/**
* 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,
/**
* 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,
/* stretch trigger element to the width of its container. */
fluid: _propTypes["default"].bool,
/** Whether to show the Popover's arrow */
showArrow: _propTypes["default"].bool,
/** Applied as data-hook HTML attribute that can be used in the tests*/
dataHook: _propTypes["default"].string,
/** A single CSS class name to be appended to the root element. */
className: _propTypes["default"].string,
/** Defines a callback function which is called when dropdown is opened */
onShow: _propTypes["default"].func,
/** Defines a callback function which is called when dropdown is closed */
onHide: _propTypes["default"].func
});
(0, _defineProperty2["default"])(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 = PopoverMenu;
exports["default"] = _default;