@momentum-ui/react-collaboration
Version:
Cisco Momentum UI Framework for React Collaboration Applications
72 lines • 3.87 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React, { forwardRef, useCallback } from 'react';
import { useAriaToolbarContext } from '../AriaToolbar/AriaToolbar.utils';
import { useProvidedRef } from '../../utils/useProvidedRef';
import { defaults } from 'lodash';
/**
* @deprecated Use the equivalent from momentum.design (NPM: `@momentum-design/components/dist/react`)
*/
var AriaToolbarItem = forwardRef(function (props, providedRef) {
var children = props.children, itemIndex = props.itemIndex, rest = __rest(props, ["children", "itemIndex"]);
var ariaToolbarContext = useAriaToolbarContext();
var ref = useProvidedRef(providedRef, null);
var onKeyDown = useCallback(function (e) {
if (!ariaToolbarContext)
return;
var orientation = ariaToolbarContext.orientation, setCurrentFocus = ariaToolbarContext.setCurrentFocus, ariaToolbarItemsSize = ariaToolbarContext.ariaToolbarItemsSize, currentFocus = ariaToolbarContext.currentFocus, onTabPress = ariaToolbarContext.onTabPress;
switch (e.key) {
case orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp':
e.preventDefault();
setCurrentFocus((ariaToolbarItemsSize + (currentFocus || 0) - 1) % ariaToolbarItemsSize);
break;
case orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown':
e.preventDefault();
setCurrentFocus((ariaToolbarItemsSize + (currentFocus || 0) + 1) % ariaToolbarItemsSize);
break;
case 'Tab': {
onTabPress === null || onTabPress === void 0 ? void 0 : onTabPress(e);
break;
}
default:
break;
}
}, [ariaToolbarContext]);
var getPropsForChildren = useCallback(function (child, index) {
if (!ariaToolbarContext)
return;
var setCurrentFocus = ariaToolbarContext.setCurrentFocus, buttonRefs = ariaToolbarContext.buttonRefs, currentFocus = ariaToolbarContext.currentFocus;
return defaults({
tabIndex: index === (currentFocus || 0) ? 0 : -1,
ref: function (element) {
buttonRefs.current[index] = element;
ref.current = element;
},
onFocus: function (event) {
var _a, _b;
setCurrentFocus === null || setCurrentFocus === void 0 ? void 0 : setCurrentFocus(index);
(_b = (_a = child.props) === null || _a === void 0 ? void 0 : _a.onFocus) === null || _b === void 0 ? void 0 : _b.call(_a, event);
},
onPress: function () {
var _a, _b;
setCurrentFocus === null || setCurrentFocus === void 0 ? void 0 : setCurrentFocus(index);
(_b = (_a = child.props) === null || _a === void 0 ? void 0 : _a.onPress) === null || _b === void 0 ? void 0 : _b.call(_a);
},
useNativeKeyDown: true,
onKeyDown: onKeyDown,
}, children === null || children === void 0 ? void 0 : children.props, // specified props of children should take precedent over drilled props from parent
rest);
}, [ariaToolbarContext, onKeyDown, children.props, rest, ref]);
return React.cloneElement(children, getPropsForChildren(children, itemIndex));
});
export default AriaToolbarItem;
//# sourceMappingURL=AriaToolbarItem.js.map