React Native компоненти: список і календарі

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 з описом властивостей, очікуваних форматів та прикладом імпорту

Я інтегрую компоненти в існуючий додаток, тому ясність і зручність підтримки грають ключову роль. 

Ось приклади зовнішнього вигляду: