react-lightning-design-system
Version:
Salesforce Lightning Design System components built with React
203 lines (200 loc) • 9.1 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DropdownButton = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _Button = require("./Button");
var _DropdownMenu = require("./DropdownMenu");
var _util = require("./util");
var _ComponentSettings = require("./ComponentSettings");
var _ButtonGroup = require("./ButtonGroup");
var _hooks = require("./hooks");
var _excluded = ["className", "opened", "defaultOpened", "menuAlign", "menuSize", "menuHeader", "nubbinTop", "hoverPopup", "menuStyle", "type", "label", "children", "style", "buttonRef", "dropdownRef", "onBlur", "onClick", "onMenuSelect"];
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; }
/**
*
*/
function useInitComponentStyle() {
(0, _react.useEffect)(function () {
(0, _util.registerStyle)('no-hover-popup', [['.slds-dropdown-trigger:hover .slds-dropdown_menu.react-slds-no-hover-popup', '{ visibility: hidden; opacity: 0; }'], ['.slds-dropdown-trigger.react-slds-dropdown-opened .slds-dropdown_menu', '{ visibility: visible !important; opacity: 1 !important; }']]);
}, []);
}
function isFocusedInComponent(targetEl, rootEl, dropdownEl) {
return (0, _util.isElInChildren)(rootEl, targetEl) || (0, _util.isElInChildren)(dropdownEl, targetEl);
}
function focusToTargetItemEl(dropdownEl) {
if (!dropdownEl) {
return;
}
var firstItemEl = dropdownEl.querySelector('.slds-is-selected > .react-slds-menuitem[tabIndex]') || dropdownEl.querySelector('.react-slds-menuitem[tabIndex]');
if (firstItemEl) {
firstItemEl.focus();
}
}
/**
*
*/
/**
*
*/
var DropdownButton = exports.DropdownButton = function DropdownButton(props) {
var _useContext2;
var className = props.className,
opened_ = props.opened,
defaultOpened = props.defaultOpened,
menuAlign = props.menuAlign,
menuSize = props.menuSize,
menuHeader = props.menuHeader,
nubbinTop = props.nubbinTop,
hoverPopup = props.hoverPopup,
menuStyle = props.menuStyle,
type = props.type,
label = props.label,
children = props.children,
style = props.style,
buttonRef_ = props.buttonRef,
dropdownRef_ = props.dropdownRef,
onBlur_ = props.onBlur,
onClick_ = props.onClick,
onMenuSelect_ = props.onMenuSelect,
rprops = (0, _objectWithoutProperties2["default"])(props, _excluded);
useInitComponentStyle();
var _useContext = (0, _react.useContext)(_ComponentSettings.ComponentSettingsContext),
getActiveElement = _useContext.getActiveElement;
var _ref = (_useContext2 = (0, _react.useContext)(_ButtonGroup.ButtonGroupContext)) !== null && _useContext2 !== void 0 ? _useContext2 : {},
grouped = _ref.grouped,
isFirstInGroup = _ref.isFirstInGroup,
isLastInGroup = _ref.isLastInGroup;
var elRef = (0, _react.useRef)(null);
var buttonElRef = (0, _react.useRef)(null);
var buttonRef = (0, _hooks.useMergeRefs)([buttonElRef, buttonRef_]);
var dropdownElRef = (0, _react.useRef)(null);
var dropdownRef = (0, _hooks.useMergeRefs)([dropdownElRef, dropdownRef_]);
var _useControlledValue = (0, _hooks.useControlledValue)(opened_, defaultOpened || false),
_useControlledValue2 = (0, _slicedToArray2["default"])(_useControlledValue, 2),
opened = _useControlledValue2[0],
setOpened = _useControlledValue2[1];
var onBlur = (0, _hooks.useEventCallback)(function () {
setTimeout(function () {
var targetEl = getActiveElement();
if (!isFocusedInComponent(targetEl, elRef.current, dropdownElRef.current)) {
setOpened(false);
onBlur_ === null || onBlur_ === void 0 || onBlur_();
}
}, 10);
});
var onKeyDown = (0, _hooks.useEventCallback)(function (e) {
if (e.keyCode === 40) {
// down
e.preventDefault();
e.stopPropagation();
if (!opened) {
setOpened(true);
onClick_ === null || onClick_ === void 0 || onClick_(e);
setTimeout(function () {
focusToTargetItemEl(dropdownElRef.current);
}, 20);
} else {
focusToTargetItemEl(dropdownElRef.current);
}
} else if (e.keyCode === 27) {
// ESC
e.preventDefault();
e.stopPropagation();
setOpened(false);
}
});
var onTriggerClick = (0, _hooks.useEventCallback)(function (e) {
if (!hoverPopup) {
setOpened(function (opened) {
return !opened;
});
}
onClick_ === null || onClick_ === void 0 || onClick_(e);
});
var onMenuSelect = (0, _hooks.useEventCallback)(function (eventKey) {
if (!hoverPopup) {
setTimeout(function () {
var _buttonElRef$current;
(_buttonElRef$current = buttonElRef.current) === null || _buttonElRef$current === void 0 || _buttonElRef$current.focus();
setOpened(false);
}, 10);
}
onMenuSelect_ === null || onMenuSelect_ === void 0 || onMenuSelect_(eventKey);
});
var onMenuClose = (0, _hooks.useEventCallback)(function () {
var _buttonElRef$current2;
(_buttonElRef$current2 = buttonElRef.current) === null || _buttonElRef$current2 === void 0 || _buttonElRef$current2.focus();
setOpened(false);
});
var icon = props.icon;
var iconMore = undefined;
if (!label && !icon) {
icon = 'down';
}
if (label || type === 'icon-more') {
iconMore = 'down';
}
var button = /*#__PURE__*/_react["default"].createElement(_Button.Button, (0, _extends2["default"])({
type: type,
label: label,
icon: icon,
iconMore: iconMore
}, rprops, {
"aria-haspopup": true,
"aria-expanded": opened,
buttonRef: buttonRef,
onClick: onTriggerClick,
onKeyDown: onKeyDown,
onBlur: onBlur
}));
var dropdownClassNames = (0, _classnames["default"])(className, 'slds-dropdown-trigger', 'slds-dropdown-trigger_click', {
'slds-m-left_xx-small': !grouped,
'slds-is-open': opened,
'react-slds-dropdown-opened': opened
});
var noneStyle = {
display: 'none'
};
return /*#__PURE__*/_react["default"].createElement("div", {
className: dropdownClassNames,
style: style,
ref: elRef
}, grouped ? /*#__PURE__*/_react["default"].createElement("div", {
className: "slds-button-group"
}, isFirstInGroup ? null : /*#__PURE__*/_react["default"].createElement("button", {
type: "button",
className: "slds-button",
style: noneStyle
}), button, isLastInGroup ? null : /*#__PURE__*/_react["default"].createElement("button", {
type: "button",
className: "slds-button",
style: noneStyle
})) : button, hoverPopup || opened ? /*#__PURE__*/_react["default"].createElement(_DropdownMenu.DropdownMenu, {
portalClassName: className,
align: menuAlign,
header: menuHeader,
size: menuSize,
nubbinTop: nubbinTop,
hoverPopup: hoverPopup,
elementRef: dropdownRef,
onMenuSelect: onMenuSelect,
onMenuClose: onMenuClose,
onBlur: onBlur,
style: _objectSpread({
transition: 'none'
}, menuStyle)
}, children) : undefined);
};
//# sourceMappingURL=DropdownButton.js.map