2 компонента на React Native.
1. Список "колесо"
--------------------------
Листопад
Грудень
Січень
Лютий
Березень
--------------------------
Props:
- items: string[] | {value,label}[]
["Січень", ..., "Грудень"] | [{value: "0" label: "Січень"}, ..., {value: "11" label: "Грудень"}] - loop: boolean
- strings: number – завжди приводиться до непарного числа (наприклад, 4 → 5), щоб вибрана строка знаходилася посередині
- selected: string | value
- disable: string[] | value[] – Я можу посилатися на елементи або за міткою, або за значенням, тому обидва варіанти повинні працювати.
Events:
- onChange віддає вибраний string | value
Без 3d ефекту, плоский. З інерцією, якщо свайпнув. Гарний приклад - вибір часу на будильнику в Андроїді.
Дизайн, звичайно, налаштовуваний. Зміна шрифтів, відступів і т.д. не повинна ламати компонент
2. Два календарі, побудовані на основі цього колеса
1. Звичайний календар, який вводить/виводить дати в форматі «дд-мм-rrrr».
2. Єврейський календар з ідентичним зовнішнім інтерфейсом «дд-мм-rrrr», але всередині використовує єврейську систему дат. Щоб дізнатися кількість днів у місяці в році, використовуйте бібліотеку «hebcal».
Що очікую отримати
• Повторно використовувані, добре типізовані компоненти React Native (бажано TypeScript)
• Чистий, прокоментований вихідний код без зовнішніх нативних модулів, окрім стандартних бібліотек React Native та бібліотек дати від спільноти (наприклад, moment-hijri, date-fns та подібних)
• Швидкий демонстраційний екран, що демонструє колесо окремо та кожен календар в дії
• Базовий файл README з описом властивостей, очікуваних форматів та прикладом імпорту
Я інтегрую компоненти в існуючий додаток, тому ясність і зручність підтримки грають ключову роль.
Ось приклади зовнішнього вигляду:
