Web: Components: Submenu: add onSelect method

This commit is contained in:
Viktor Fomin 2022-03-30 19:17:40 +03:00
parent 700631836b
commit 9c3637bafb
2 changed files with 6 additions and 3 deletions

View File

@ -40,7 +40,7 @@ export const countAutoFocus = (itemId, data, submenuItemsRef) => {
const [focusedItem] = itemsAndGaps.filter((obj) => obj.id === itemId);
const submenuWidth = submenuItemsRef.current.offsetWidth;
if (itemOnMarker.id && focusedItem.id === itemOnMarker.id)
if (itemOnMarker?.id && focusedItem.id === itemOnMarker.id)
return focusedItem.end - marker;
if (
focusedItem.start < marker - submenuWidth ||

View File

@ -13,7 +13,7 @@ import {
StyledSubmenuItemText,
} from "./styled-submenu";
const Submenu = ({ data, startSelect = 0, ...rest }) => {
const Submenu = ({ data, startSelect = 0, onSelect, ...rest }) => {
if (!data) return null;
const [currentItem, setCurrentItem] = useState(
@ -27,6 +27,7 @@ const Submenu = ({ data, startSelect = 0, ...rest }) => {
if (item) setCurrentItem(item);
const offset = countAutoFocus(item.name, data, submenuItemsRef);
submenuItemsRef.current.scrollLeft += offset;
onSelect && onSelect(item);
};
useEffect(() => {
@ -75,7 +76,8 @@ const Submenu = ({ data, startSelect = 0, ...rest }) => {
<StyledSubmenu {...rest}>
<StyledSubmenuItems ref={submenuItemsRef} role="list">
{data.map((d) => {
const isActive = d === currentItem;
const isActive = d.id === currentItem.id;
return (
<StyledSubmenuItem key={d.id} id={d.id} onClick={selectSubmenuItem}>
<StyledSubmenuItemText>
@ -105,6 +107,7 @@ const Submenu = ({ data, startSelect = 0, ...rest }) => {
Submenu.propTypes = {
data: PropTypes.arrayOf(PropTypes.object.isRequired).isRequired,
startSelect: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
onSelect: PropTypes.func,
};
export default Submenu;