react-lightning-design-system
Version:
Salesforce Lightning Design System components built with React
319 lines (307 loc) • 14.7 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.OpenSubmenuContext = exports.MenuItem = exports.MenuHeader = exports.DropdownSubmenu = exports.DropdownMenuItem = exports.DropdownMenuHeader = exports.DropdownMenuHandlerContext = exports.DropdownMenu = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _Icon = require("./Icon");
var _AutoAlign = require("./AutoAlign");
var _hooks = require("./hooks");
var _excluded = ["className", "label", "icon", "iconRight", "selected", "disabled", "divider", "tabIndex", "eventKey", "onClick", "onBlur", "onFocus", "submenu", "submenuItems", "children", "level"],
_excluded2 = ["key"],
_excluded3 = ["className", "size", "header", "nubbin", "nubbinTop", "hoverPopup", "children", "style", "alignment", "autoAlignContentRef", "elementRef", "onFocus", "onBlur", "onMenuSelect", "onMenuClose"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
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; }
/**
*
*/
/**
*
*/
/**
*
*/
var DropdownMenuHeader = exports.DropdownMenuHeader = function DropdownMenuHeader(_ref) {
var divider = _ref.divider,
className = _ref.className,
children = _ref.children;
var menuHeaderClass = (0, _classnames["default"])('slds-dropdown__header', 'slds-truncate', divider ? "slds-has-divider_".concat(divider, "-space") : undefined, className);
return /*#__PURE__*/_react["default"].createElement("li", {
className: menuHeaderClass,
role: "presentation"
}, /*#__PURE__*/_react["default"].createElement("span", null, children));
};
var MenuHeader = exports.MenuHeader = DropdownMenuHeader;
/**
*
*/
var DropdownMenuHandlerContext = exports.DropdownMenuHandlerContext = /*#__PURE__*/(0, _react.createContext)({});
var OpenSubmenuContext = exports.OpenSubmenuContext = /*#__PURE__*/(0, _react.createContext)({
openSubmenuKeys: {},
handleSubmenuOpen: function handleSubmenuOpen() {}
});
/**
*
*/
/**
*
*/
var DropdownMenuItem = exports.DropdownMenuItem = function DropdownMenuItem(props) {
var _openSubmenuKeys$subm, _openSubmenuKeys$subm2;
var className = props.className,
label = props.label,
icon = props.icon,
iconRight = props.iconRight,
selected = props.selected,
disabled = props.disabled,
divider = props.divider,
_props$tabIndex = props.tabIndex,
tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,
eventKey = props.eventKey,
onClick = props.onClick,
onBlur = props.onBlur,
onFocus = props.onFocus,
submenu_ = props.submenu,
submenuItems = props.submenuItems,
children = props.children,
_props$level = props.level,
level = _props$level === void 0 ? 0 : _props$level,
rprops = (0, _objectWithoutProperties2["default"])(props, _excluded);
var _useContext = (0, _react.useContext)(DropdownMenuHandlerContext),
onMenuSelect = _useContext.onMenuSelect,
onMenuBlur = _useContext.onMenuBlur,
onMenuFocus = _useContext.onMenuFocus;
var _useContext2 = (0, _react.useContext)(OpenSubmenuContext),
openSubmenuKeys = _useContext2.openSubmenuKeys,
handleSubmenuOpen = _useContext2.handleSubmenuOpen;
var submenuKey = (0, _react.useId)();
var onKeyDown = (0, _hooks.useEventCallback)(function (e) {
if (e.keyCode === 13 || e.keyCode === 32) {
// return or space
e.preventDefault();
e.stopPropagation();
onMenuItemClick(e);
} else if (e.keyCode === 38 /* up */ || e.keyCode === 40 /* down */) {
e.preventDefault();
e.stopPropagation();
var currentEl = e.currentTarget.parentElement;
var itemEl = currentEl ? e.keyCode === 40 ? currentEl.nextElementSibling : currentEl.previousElementSibling : null;
while (itemEl) {
var anchorEl = itemEl.querySelector('.react-slds-menuitem[tabIndex]');
if (anchorEl && !anchorEl.ariaDisabled) {
anchorEl.focus();
return;
}
itemEl = e.keyCode === 40 ? itemEl.nextElementSibling : itemEl.previousElementSibling;
}
} else if (submenuItems && (e.keyCode === 39 /* right */ || e.keyCode === 37) /* left */) {
var _e$currentTarget$pare;
e.preventDefault();
e.stopPropagation();
var submenuEl = (_e$currentTarget$pare = e.currentTarget.parentElement) === null || _e$currentTarget$pare === void 0 ? void 0 : _e$currentTarget$pare.querySelector('.slds-dropdown__list');
if (submenuEl) {
var _anchorEl = submenuEl.querySelector('.react-slds-menuitem[tabIndex]');
if (_anchorEl) {
_anchorEl.focus();
}
}
}
});
var onMenuItemClick = (0, _hooks.useEventCallback)(function (e) {
if (submenu) {
handleSubmenuOpen(submenuKey, level + 1);
return;
}
onClick === null || onClick === void 0 || onClick(e);
if (eventKey != null) {
onMenuSelect === null || onMenuSelect === void 0 || onMenuSelect(eventKey);
}
});
var onMenuItemBlur = (0, _hooks.useEventCallback)(function (e) {
onBlur === null || onBlur === void 0 || onBlur(e);
onMenuBlur === null || onMenuBlur === void 0 || onMenuBlur(e);
});
var onMenuItemFocus = (0, _hooks.useEventCallback)(function (e) {
onFocus === null || onFocus === void 0 || onFocus(e);
onMenuFocus === null || onMenuFocus === void 0 || onMenuFocus(e);
});
var submenu = submenu_ !== null && submenu_ !== void 0 ? submenu_ : submenuItems ? /*#__PURE__*/_react["default"].createElement(DropdownSubmenu, {
label: label
}, submenuItems === null || submenuItems === void 0 ? void 0 : submenuItems.map(function (_ref2) {
var key = _ref2.key,
itemProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
return /*#__PURE__*/_react["default"].createElement(DropdownMenuItem, (0, _extends2["default"])({
key: key,
level: level + 1
}, itemProps));
})) : undefined;
var submenuExpanded = (_openSubmenuKeys$subm = (_openSubmenuKeys$subm2 = openSubmenuKeys[submenuKey]) === null || _openSubmenuKeys$subm2 === void 0 ? void 0 : _openSubmenuKeys$subm2.isOpen) !== null && _openSubmenuKeys$subm !== void 0 ? _openSubmenuKeys$subm : false;
var menuItemClass = (0, _classnames["default"])('slds-dropdown__item', {
'slds-is-selected': selected
}, submenu ? 'slds-has-submenu' : undefined, className);
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, divider === 'top' ? /*#__PURE__*/_react["default"].createElement("li", {
className: "slds-has-divider_".concat(divider, "-space"),
role: "separator"
}) : null, /*#__PURE__*/_react["default"].createElement("li", {
className: menuItemClass,
role: "presentation"
}, /*#__PURE__*/_react["default"].createElement("a", (0, _extends2["default"])({
role: "menuitem"
}, rprops, {
className: "react-slds-menuitem",
"aria-disabled": disabled,
"aria-haspopup": submenu != null,
"aria-expanded": submenuExpanded,
tabIndex: disabled ? undefined : tabIndex,
onClick: disabled ? undefined : onMenuItemClick,
onBlur: disabled ? undefined : onMenuItemBlur,
onFocus: disabled ? undefined : onMenuItemFocus,
onKeyDown: disabled ? undefined : onKeyDown
}), /*#__PURE__*/_react["default"].createElement("span", {
className: "slds-truncate",
title: typeof label === 'string' ? label : undefined
}, icon ? /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
icon: icon,
size: "x-small",
align: "left"
}) : null, label || children), iconRight || submenu ? /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
icon: iconRight !== null && iconRight !== void 0 ? iconRight : 'right',
size: "x-small",
align: "right"
}) : null), submenu && submenuExpanded ? submenu : undefined), divider === 'bottom' ? /*#__PURE__*/_react["default"].createElement("li", {
className: "slds-has-divider_".concat(divider, "-space"),
role: "separator"
}) : null);
};
var MenuItem = exports.MenuItem = DropdownMenuItem;
/**
*
*/
/**
*
*/
var DropdownSubmenu = exports.DropdownSubmenu = function DropdownSubmenu(props) {
var label = props.label,
_props$align = props.align,
align = _props$align === void 0 ? 'right' : _props$align,
children = props.children;
var submenuClassName = (0, _classnames["default"])('slds-dropdown', 'slds-dropdown_submenu', "slds-dropdown_submenu-".concat(align));
return /*#__PURE__*/_react["default"].createElement("div", {
className: submenuClassName
}, /*#__PURE__*/_react["default"].createElement("ul", {
className: "slds-dropdown__list",
role: "menu",
"aria-label": label
}, children));
};
/**
*
*/
/**
*
*/
var DropdownMenuInner = function DropdownMenuInner(props) {
var className = props.className,
size = props.size,
header = props.header,
nubbin_ = props.nubbin,
nubbinTop = props.nubbinTop,
hoverPopup = props.hoverPopup,
children = props.children,
style = props.style,
alignment = props.alignment,
autoAlignContentRef = props.autoAlignContentRef,
elementRef_ = props.elementRef,
onFocus = props.onFocus,
onBlur = props.onBlur,
onMenuSelect = props.onMenuSelect,
onMenuClose = props.onMenuClose,
rprops = (0, _objectWithoutProperties2["default"])(props, _excluded3);
var elRef = (0, _react.useRef)(null);
var elementRef = (0, _hooks.useMergeRefs)([elRef, autoAlignContentRef, elementRef_]);
var onKeyDown = (0, _hooks.useEventCallback)(function (e) {
if (e.keyCode === 27) {
// ESC
onMenuClose === null || onMenuClose === void 0 || onMenuClose();
}
});
var nubbin = nubbinTop ? 'auto' : nubbin_;
var _alignment = (0, _slicedToArray2["default"])(alignment, 2),
vertAlign = _alignment[0],
align = _alignment[1];
var nubbinPosition = nubbin === 'auto' ? alignment.join('-') : nubbin === null || nubbin === void 0 ? void 0 : nubbin.split(' ').join('-');
var dropdownClassNames = (0, _classnames["default"])(className, 'slds-dropdown', vertAlign ? "slds-dropdown_".concat(vertAlign) : undefined, align ? "slds-dropdown_".concat(align) : undefined, size ? "slds-dropdown_".concat(size) : undefined, nubbinPosition ? "slds-nubbin_".concat(nubbinPosition) : undefined, {
'react-slds-no-hover-popup': !hoverPopup
});
var handlers = (0, _react.useMemo)(function () {
return {
onMenuSelect: onMenuSelect,
onMenuBlur: onBlur,
onMenuFocus: onFocus
};
}, [onBlur, onFocus, onMenuSelect]);
var _useState = (0, _react.useState)({}),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
openSubmenuKeys = _useState2[0],
setOpenSubmenuKeys = _useState2[1];
var handleSubmenuOpen = function handleSubmenuOpen(key, level) {
setOpenSubmenuKeys(function (prevState) {
var _newState$key;
var newState = _objectSpread({}, prevState);
Object.keys(newState).forEach(function (submenuKey) {
if (newState[submenuKey].level >= level && key !== submenuKey) {
newState[submenuKey].isOpen = false;
}
});
newState[key] = {
isOpen: !((_newState$key = newState[key]) !== null && _newState$key !== void 0 && _newState$key.isOpen),
level: level
};
return newState;
});
};
return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
className: dropdownClassNames,
ref: elementRef,
style: _objectSpread({
outline: 'none'
}, style),
onKeyDown: onKeyDown,
tabIndex: -1,
onFocus: onFocus,
onBlur: onBlur
}, rprops), /*#__PURE__*/_react["default"].createElement("ul", {
className: "slds-dropdown__list",
role: "menu",
"aria-label": header
}, header ? /*#__PURE__*/_react["default"].createElement(MenuHeader, null, header) : null, /*#__PURE__*/_react["default"].createElement(DropdownMenuHandlerContext.Provider, {
value: handlers
}, /*#__PURE__*/_react["default"].createElement(OpenSubmenuContext.Provider, {
value: {
openSubmenuKeys: openSubmenuKeys,
handleSubmenuOpen: handleSubmenuOpen
}
}, children))));
};
/**
*
*/
var DropdownMenu = exports.DropdownMenu = function DropdownMenu(props) {
return /*#__PURE__*/_react["default"].createElement(_AutoAlign.AutoAlign, (0, _extends2["default"])({}, props, {
preventPortalize: !!props.hoverPopup,
triggerSelector: ".slds-dropdown-trigger",
alignmentStyle: "menu"
}), function (injectedProps) {
return /*#__PURE__*/_react["default"].createElement(DropdownMenuInner, (0, _extends2["default"])({}, props, injectedProps));
});
};
//# sourceMappingURL=DropdownMenu.js.map