You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
71 lines
2.2 KiB
71 lines
2.2 KiB
const _excluded = ["eventKey", "disabled", "onClick", "active", "as"];
|
|
|
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
|
|
import * as React from 'react';
|
|
import { useContext } from 'react';
|
|
import useEventCallback from '@restart/hooks/useEventCallback';
|
|
import SelectableContext, { makeEventKey } from './SelectableContext';
|
|
import NavContext from './NavContext';
|
|
import Button from './Button';
|
|
import { dataAttr } from './DataKey';
|
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
|
/**
|
|
* Create a dropdown item. Returns a set of props for the dropdown item component
|
|
* including an `onClick` handler that prevents selection when the item is disabled
|
|
*/
|
|
export function useDropdownItem({
|
|
key,
|
|
href,
|
|
active,
|
|
disabled,
|
|
onClick
|
|
}) {
|
|
const onSelectCtx = useContext(SelectableContext);
|
|
const navContext = useContext(NavContext);
|
|
const {
|
|
activeKey
|
|
} = navContext || {};
|
|
const eventKey = makeEventKey(key, href);
|
|
const isActive = active == null && key != null ? makeEventKey(activeKey) === eventKey : active;
|
|
const handleClick = useEventCallback(event => {
|
|
if (disabled) return;
|
|
onClick == null ? void 0 : onClick(event);
|
|
|
|
if (onSelectCtx && !event.isPropagationStopped()) {
|
|
onSelectCtx(eventKey, event);
|
|
}
|
|
});
|
|
return [{
|
|
onClick: handleClick,
|
|
'aria-disabled': disabled || undefined,
|
|
'aria-selected': isActive,
|
|
[dataAttr('dropdown-item')]: ''
|
|
}, {
|
|
isActive
|
|
}];
|
|
}
|
|
const DropdownItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
let {
|
|
eventKey,
|
|
disabled,
|
|
onClick,
|
|
active,
|
|
as: Component = Button
|
|
} = _ref,
|
|
props = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
|
|
const [dropdownItemProps] = useDropdownItem({
|
|
key: eventKey,
|
|
href: props.href,
|
|
disabled,
|
|
onClick,
|
|
active
|
|
});
|
|
return /*#__PURE__*/_jsx(Component, Object.assign({}, props, {
|
|
ref: ref
|
|
}, dropdownItemProps));
|
|
});
|
|
DropdownItem.displayName = 'DropdownItem';
|
|
export default DropdownItem; |