@momentum-ui/react-collaboration
Version:
Cisco Momentum UI Framework for React Collaboration Applications
60 lines • 3.52 kB
JavaScript
/* eslint-disable @typescript-eslint/ban-types */
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import React, { useEffect, useMemo } from 'react';
import classNames from 'classnames';
import { STYLE } from './MenuSelectionGroup.constants';
import './MenuSelectionGroup.style.scss';
import MenuItem from '../MenuItem';
import { SelectionManager, useMultipleSelectionState } from '@react-stately/selection';
import { useMenuSection } from '@react-aria/menu';
import ContentSeparator from '../ContentSeparator';
/**
* @deprecated Use the equivalent from momentum.design (NPM: `@momentum-design/components/dist/react`)
*/
var MenuSelectionGroup = function (props) {
var item = props.item, state = props.state, onAction = props.onAction, tickPosition = props.tickPosition, classNameSelectedItem = props.classNameSelectedItem, className = props.className, itemSize = props.itemSize;
var tree = state.collection, menuSelectionManager = state.selectionManager;
var selectionState = useMultipleSelectionState(props);
var selectionManager = useMemo(function () { return new SelectionManager(tree, selectionState); }, [tree, selectionState]);
var newState = __assign(__assign({}, state), { selectionManager: selectionManager });
useEffect(function () {
menuSelectionManager.setFocusedKey(selectionManager.focusedKey);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectionManager.focusedKey]);
useEffect(function () {
selectionManager.setFocused(menuSelectionManager.isFocused);
selectionManager.setFocusedKey(menuSelectionManager.focusedKey);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [menuSelectionManager.focusedKey, menuSelectionManager.isFocused]);
var _a = useMenuSection({
heading: item.rendered,
'aria-label': item['aria-label'],
}), itemProps = _a.itemProps, headingProps = _a.headingProps, groupProps = _a.groupProps;
return (React.createElement("div", __assign({}, itemProps),
item.rendered && (React.createElement("div", { className: STYLE.header }, !React.isValidElement(item.rendered) ? (React.createElement("span", __assign({}, headingProps), item.rendered)) : (React.cloneElement(item.rendered, __assign({}, headingProps))))),
React.createElement("ul", __assign({}, groupProps, { className: classNames(STYLE.wrapper, className) }), Array.from(item.childNodes).map(function (node) {
var _a;
if ((_a = node.props) === null || _a === void 0 ? void 0 : _a._isSeparator) {
var props_1 = __assign({}, node.props);
delete props_1._isSeparator;
return React.createElement(ContentSeparator, __assign({}, props_1));
}
var item = (React.createElement(MenuItem, { key: node.key, item: node, itemSize: itemSize, state: newState, tickPosition: tickPosition, classNameSelectedItem: classNameSelectedItem, onAction: onAction }));
if (node.wrapper) {
item = node.wrapper(item);
}
return item;
}))));
};
export default MenuSelectionGroup;
//# sourceMappingURL=MenuSelectionGroup.js.map