feat(Navbar): controlled subMenu #67
Conversation
- Added `NavbarPropGetItemSubMenuOpen` - Added `NavbarPropOnItemSubMenuToggle` - Updated `NavbarProps` and `NavbarItemProps` to support controlled sub-menu behavior
- Pass `getItemSubMenuOpen` and `onItemSubMenuToggle` to `NavbarItem` - Update `withDefaultGetters`
- Add controlled/uncontrolled logic via `getItemSubMenuOpen` and `onItemSubMenuToggle` - Use external state when controlled, preserve local state otherwise - Update click handlers and arrow toggle behavior - Ensure backward compatibility
ShavrinAleksei
requested review from
N1MBER,
arhayka and
gizeasy
as code owners
|
Описание изменений Ключевые изменения
Закрыт issue: Navbar: управление состоянием подменю #4063 |
- Replaced onItemSubMenuToggle with onSubMenuToggle in handleToggle - Added useEffect for syncing controlled open state - Removed isControlled flag for simpler logic
|
|
||
| Для управления состоянием подменю (открыто/закрыто) используйте связку getItemSubMenuOpen и onSubMenuToggle. Это позволяет контролировать открытие подменю через внешний стейт, включая задание начального состояния. | ||
|
|
||
| ```tsx |
There was a problem hiding this comment.
давай живой пример создадим который пощелкать можно будет.
менюха с 3мя пунктами
- Пункт 1
- Пункт 2
- Пункт 3
и 3 кнопки
- Открыть 1
- Открыть 2
- Открыть 3
если пункт открыт то кнопку переименуй в закрыть
src/components/Navbar/types.ts
Outdated
|
|
||
| export type NavbarPropGetItemSubMenuOpen<ITEM> = ( | ||
| item: ITEM, | ||
| ) => boolean | undefined; |
There was a problem hiding this comment.
undefined думаю стоит убрать так как далее по логике у нас
const controlledOpen = getItemSubMenuOpen?.(item);
useEffect(() => {
if (controlledOpen !== undefined) {
setOpen.set(controlledOpen);
}
}, [controlledOpen]);
где если приходит undefined то мы считаем что контролировать пункт не надо и не будем синкать внутреннее состояние. А пользователь может подумать что если не true то будет закрываться, и отдаст undefined. Пусть будет строго boolean
2 participants
Описание изменений
Чек-лист
Опционально