vmik7/practicum-contest

Тестовое задание в практикум

Тестовое Задание. Автор программы "Веб-разработчик”.

Запуск

npm ci
npm start

Пакеты

• reset-css - обнуление стандартных стилей
• react-feather - иконки

Задание

С помощью TypeScript и библиотеки React реализуйте компонент DropdownMenu. Используйте только функциональные компоненты.

Контент должен задаваться снаружи компонента. DropdownMenu должен уметь автоматически определять сторону открытия контента и раскрывать его по клику и ховеру в ту сторону, где будет больше места относительно триггера.

Допустимые позиции:

• вниз-вправо,
• вверх-вправо,
• вниз-влево,
• вверх-влево.

Сделайте триггер изменяемым и представьте его любым элементом интерфейса. Клик внутри контента не должен закрывать дропдаун, тогда как клик снаружи или повторный клик в триггер должны закрывать активный дропдаун.

Может быть только один активный дропдаун. Если открывается другой, текущий должен быть закрыт.

Если при скролле дропдауна не хватает места для отрисовки, то он должен перерисоваться в новое место так, чтобы контент отобразился корректно. При выходе инициирующего элемента из вьюпорта скрывать дропдаун, а про появлении — отображать снова.

Ширина контента дропдауна должна быть ограничена 260 пикселями.

Для иконок (опционально) можно воспользоваться паком feather-icons. Избегайте any в типах и постарайтесь типизировать весь компонент. Для вёрстки используйте любое удобное решение.

Очень хорошо, если клик на пункт меню будет вызывать соответствующий ему колбэк, а после этого закрывать дропдаун.

Постарайтесь не использовать сторонние библиотеки, ограничьтесь React и react-dom.

Прототип:

Сопроводите код инструкцией по запуску проекта в README.md репозитория на GitHub.