Войти Регистрация
Фронтенд

55. Раскрывающееся меню платежей СберБанк Онлайн плоским списком

Лёгкая

Каталог платежей СберБанк Онлайн — дерево: «ЖКХ и дом» → «Электроэнергия» → «Мосэнергосбыт». Список рендерится одним плоским массивом строк с отступом, чтобы его можно было виртуализировать и листать с клавиатуры.

Напишите visibleRows(tree, expanded). tree — массив корневых узлов {id, title, children}, expanded — массив id раскрытых узлов. Верните массив [id, depth, hasChildren] в порядке отображения: узел, затем (если он раскрыт) его видимые потомки. У корней depth = 0.

Узел виден, только если раскрыты все его предки. id раскрытого узла, который сам скрыт свёрнутым родителем, ничего не показывает. hasChildren — есть ли у узла хотя бы один ребёнок, независимо от раскрытия.

В работе: В каталоге платежей около 40 категорий и 3 уровня вложенности, а на экране телефона помещается 9 строк.

Пример 1: всё свёрнуто

Аргументы теста
[{"id": "home", "title": "ЖКХ и дом", "children": [{"id": "kvart", "title": "Квартплата", "children": []}, {"id": "energy", "title": "Электроэнергия", "children": [{"id": "mosenergo", "title": "Мосэнергосбыт", "children": []}, {"id": "pes", "title": "Петроэлектросбыт", "children": []}]}]}, {"id": "mobile", "title": "Мобильная связь", "children": []}, {"id": "tax", "title": "Налоги и штрафы", "children": [{"id": "gibdd", "title": "Штрафы ГИБДД", "children": []}]}], []
Ожидается
[["home", 0, true], ["mobile", 0, false], ["tax", 0, true]]

Пример 2: раскрыт ЖКХ

Аргументы теста
[{"id": "home", "title": "ЖКХ и дом", "children": [{"id": "kvart", "title": "Квартплата", "children": []}, {"id": "energy", "title": "Электроэнергия", "children": [{"id": "mosenergo", "title": "Мосэнергосбыт", "children": []}, {"id": "pes", "title": "Петроэлектросбыт", "children": []}]}]}, {"id": "mobile", "title": "Мобильная связь", "children": []}, {"id": "tax", "title": "Налоги и штрафы", "children": [{"id": "gibdd", "title": "Штрафы ГИБДД", "children": []}]}], ["home"]
Ожидается
[["home", 0, true], ["kvart", 1, false], ["energy", 1, true], ["mobile", 0, false], ["tax", 0, true]]
Как проверяем Объявите visibleRows — тест вызывает её сам. Таймеры и Date в тестах ненастоящие: время идёт по команде теста, поэтому setTimeout на 5 секунд проверяется мгновенно. Тестов 7: 2 открыты выше, остальные приходят после старта подхода. Лимит — 2 с на тест. 
function visibleRows(tree, expanded) // → Array<[id, depth, hasChildren]>
деревьяобход в глубинурендер списков

Источник: на задачах Сбера: каталог платежей в СберБанк Онлайн. Условие пересказано своими словами.