wix-style-react
Version:
426 lines (353 loc) • 14.2 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
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) { _defineProperty(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 = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
import React from 'react';
import PropTypes from 'prop-types';
import { listItemActionBuilder } from '../ListItemAction';
import DropdownBase from '../DropdownBase';
import { placements } from '../Popover';
import { st, classes } from './PopoverMenu.st.css';
import { listItemSectionBuilder } from '../ListItemSection';
/** PopoverMenu */
var PopoverMenu = /*#__PURE__*/function (_React$PureComponent) {
_inherits(PopoverMenu, _React$PureComponent);
var _super = _createSuper(PopoverMenu);
function PopoverMenu() {
var _this;
_classCallCheck(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));
_defineProperty(_assertThisInitialized(_this), "savedOnClicks", null);
_defineProperty(_assertThisInitialized(_this), "focusableList", []);
_defineProperty(_assertThisInitialized(_this), "children", {});
_defineProperty(_assertThisInitialized(_this), "state", {
focused: 0
});
_defineProperty(_assertThisInitialized(_this), "_onSelect", function (e) {
var onClick = _this.savedOnClicks.find(function (_ref) {
var id = _ref.id;
return id === e.id;
}).onClick;
onClick && onClick();
});
_defineProperty(_assertThisInitialized(_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);
}
});
_defineProperty(_assertThisInitialized(_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();
});
});
_defineProperty(_assertThisInitialized(_this), "_filterChildren", function (children) {
return React.Children.map(children, function (child) {
return child;
}).filter(function (child) {
return typeof child !== 'string';
});
});
_defineProperty(_assertThisInitialized(_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
};
});
});
_defineProperty(_assertThisInitialized(_this), "_saveOnClicks", function (options) {
_this.savedOnClicks = options.map(function (_ref2) {
var id = _ref2.id,
onClick = _ref2.onClick;
return {
id: id,
onClick: onClick
};
});
});
_defineProperty(_assertThisInitialized(_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 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 = _objectWithoutProperties(option, _excluded);
var focused = _this.state.focused;
if (!disabled) {
_this.focusableList = [].concat(_toConsumableArray(_this.focusableList), [id]);
}
return 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: classes.listItem,
ellipsis: ellipsis,
subtitle: subtitle
}));
});
});
_defineProperty(_assertThisInitialized(_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.isValidElement(triggerElement) ? /*#__PURE__*/React.cloneElement(triggerElement, {
onClick: toggle
}) : triggerElement({
onClick: toggle,
toggle: toggle,
open: open,
close: close,
isOpen: isOpen
});
});
return _this;
}
_createClass(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.createElement(DropdownBase, {
className: st(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.PureComponent);
_defineProperty(PopoverMenu, "displayName", 'PopoverMenu');
_defineProperty(PopoverMenu, "MenuItem", function () {
return {};
});
_defineProperty(PopoverMenu, "Divider", function () {
return {};
});
_defineProperty(PopoverMenu, "propTypes", {
/** The maximum width applied to the list */
maxWidth: PropTypes.number,
/** The minimum width applied to the list */
minWidth: PropTypes.number,
/** The maximum height value applied to the list */
maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/** Popover content z-index */
zIndex: PropTypes.number,
/** Moves popover content relative to the parent by x or y */
moveBy: PropTypes.shape({
x: PropTypes.number,
y: PropTypes.number
}),
/** Element to trigger the popover */
triggerElement: PropTypes.oneOfType([PropTypes.element, PropTypes.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.oneOf(placements),
/** Changing text size */
textSize: PropTypes.oneOf(['small', 'medium']),
/** Enables text ellipsis on tight containers */
ellipsis: PropTypes.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.node,
/** The Popover's appendTo */
appendTo: PropTypes.oneOfType([PropTypes.string, PropTypes.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.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.bool,
/* stretch trigger element to the width of its container. */
fluid: PropTypes.bool,
/** Whether to show the Popover's arrow */
showArrow: PropTypes.bool,
/** Applied as data-hook HTML attribute that can be used in the tests*/
dataHook: PropTypes.string,
/** A single CSS class name to be appended to the root element. */
className: PropTypes.string,
/** Defines a callback function which is called when dropdown is opened */
onShow: PropTypes.func,
/** Defines a callback function which is called when dropdown is closed */
onHide: PropTypes.func
});
_defineProperty(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';
export default PopoverMenu;