Стварэнне настаўляемага элемента выбору для React Native Paper

Стварэнне справжняга выпадаючага меню ў React Native практычна ніколі не ёсць такім простым, як здаецца

Якщо вы витрачалі час на спробы реалізаваціі належнага выпадаючага меню ў React Native, вы вже знаеце, што „простая выпадаючая ліста“ быстра ператвараецца на значна сложнейшую задачу.

Вам даводзіцца кераваць станом выбору, налагоджваці функцыю пошуку, падтрымляць множыны выбораў, карацца з дужа дзьвінкімі спискамі, прадставляць інтерфейс так, каб ён выглядаў натывна на мобільных прыстроях, дадаць пераканання і старацца, каб усё гэта візуальна пасляўжылася да рэшты вашага дапрынтку.

Якщо ваш проект вже пабудаваны на базе React Native Paper, выкарыстоўванне окранучай бібліятэкі інтерфейсу толькі для стварэння працюючага поля выбору здаецца надмерным.

Самэ гэта несасвячанне і є той проблемны момент, які праглаў рашыць гэты компонент.

Метай быў стварэння компонента для выбору, які можна было б практычна перадаць з аднаго проекту ў іншы, які гармонаваў бы з фреймворкам React Native Paper, падтрымляў бы як адынаковы, так і множыны выборы, і адвяртаў бы кожны проект ад пастойчыга перастраювання таго ж прыему взаімадзеяння.

Таму яго было створана з нуля.

Тое, што спачатку было досыта спецыялізаваным компонентам інтэрфейсу, згодзе ператворылася на react-native-paper-select — пакет на адкрытым кодзе для React Native, які сёньня включае можлівасці пошуку, множыны выбора, адображэння на основе чіпов, роздзелаваных спісоў, выбору за дапамогою радыё-кнапак, ніжных листоў, меню і ефектывае адображэння спісоў.

У этай статыце рассказваецца пра мотыўы стварэння гэтага компонента, пра тое, як ён змяніўся з часам, пра інжынерныя рашэнні, якія на яго вплылі, а таксама пра урокі, якія былі вывучаны падчас ператварэння чагось, што спачатку было створана для аднаго дапрыему, у універсальную бібліятэку на адкрытым кодзе.

Проблема

На першы погляд, спадныя справкі здаюцца простымі.

Але калі вы насправдэўна прыначынаеце ўпрацоўванне такога элемента, з’яўляецца дужы список пытанняў да дизайну:

• Як паказваць актуальна выбраную значэнне?
• Чы хацяца, каб поле падтрымала адны выбор чы калькі?
• Якая ўпорядкованасць падае для спісу варыянтав?
• Як должна працаваць пашуковая функцыя ўнутрь гэтага спісу?
• Чы повинна робота разлічвацца между Android і iOS?
• Як паказваць дужа дзяўныя спісы без пагубленае выдатнасці?
• Як заставіць API, якое викорыстоўвае разработчык, заставіцца простым?
• Як дазволіць налаштаванне без таго, каб компонент стаў чымсь складным у викорыстоўванні?

Рашэнне гэтых пытанняў з нуля ў кожным окремым дапрынце не мела сэнсу.

У замест на стварэнне ўсё новага, спецыяльнага для аплікацыі компонента, было логічнейша з самага пачатку спроектаваць ўсё такое, што можна было б викорыстоўваць знову.

Основная ідея была простая:

Стварыць компонент select на адной паўазе з сабственнымі элементамі інтэрфейсу React Native Paper, пры чым зробіць яго настолькі простым, каб іншы разработчыки React Native дасклаліся яго викорыстоўваць.

Представляем react-native-paper-select

react-native-paper-select — это настаўляемы компонент для React Native, які падтрымляе як сцэнарыі адзінаковага, так і багатакратнага выбору.

Першая версія базавалася на вядомых элементах, які ўжо надаваліся React Native Paper, у тым числе:

• TextInput
• Checkbox
• Dialog

Мета была такой — запропандаваць разработчыкам можлівасць выбору, яка візуальна і функцыональна чынюцься адпаведна дапрацоўкам, які ўжо створеныя на аднойчынцы дизайнарскага системы React Native Paper.

Калі пакет стаў болей зрэлым, ён перайшоў за межы таго пачатковага выканання, ўзьміўшы падтрымку дадатковых стыляў візуалізацыі і болей розгледнага поваджэння пад час выбору.

Інсталяванне пакета

Ёго запуск і наладка адбываецца за калькі крокаў.

npm install react-native-paper-select

Альбо, якщо вы воліяеце Yarn:

yarn add react-native-paper-select

Пасля інсталявання імпортуйце компонент так:

import { PaperSelect } from 'react-native-paper-select';

Базавы выбірач

Ёсць кане стварыць мінімальнае полье выбору — трэба толькі список опцый і функцыя для обробкі выбору.

Ось прыклад:

const [selected, setSelected] = useState({
  value: '',
  label: '',
});

const options = [
  {
    _id: '1',
    value: 'React Native',
  },
  {
    _id: '2',
    value: 'Flutter',
  },
  {
    _id: '3',
    value: 'Native Android',
  },
];

А потым адрасаванне компонента:

<PaperSelect
  label="Framework"
  value={selected.label}
  onSelection={(value) => setSelected(value)}
  arrayList={options}
  selectedArrayList={selected}
/>

Тут важліва не тое, насколькі мало коду трэба.

Важліва тое, што гэты код маскіе.

З точкі зору прыемніка існуе фактычна толькі два пытанні, на які трэба даць адказ:

Якія опцыі ў наявнасці?

і

Што выбраў корыстнік?

Усё, што стосуецца адображэння і взаімадзеяння, обрабляецца внутршна самым прыемнікам.

Адзін выбор протыва багатаго выбору

Падтрымка як адзінаго, так і багатага выбору з самага пачатку была аднай з ключоўых вакалідацый для гэтага прыемніка.

Адзіны выбор досыта проста для разумення:

Select Framework
----------------
○ React Native
○ Flutter
○ Native Android

Багаты выбор, аднак, выклікае патрэбнае кераванне дадатковым станам:

Select Technologies
-------------------
☑ React Native
☑ TypeScript
☐ Flutter
☑ Node.js

Это значыць, што прыемнік должен кераваць:

1. Станам выбору
2. Анулюванням выбору
3. Адображэнням калькі выбраных значэнняў адразу
4. Верненнем апошніх выбораў

Зберагчы выклікаецца інтэрфейс у сінхроназе з базовымі дадзеннямі

Мета была ў тым, каб усю гэтую складнасць разместіць у самым компоненте, а не перакладваць яе на кожнага разработчыка, які викорыстоўвае пакет.

Чаму React Native Paper?

Паколькі аплікацыя, якая яго викорыстоўвае, вже спакою апіралася на React Native Paper, стварэнне компонента select на адной з тых сябе системаў дизайна было прыродным выборам.

У замест на тое, каб перазмацаваць кожны візуальны элемент, компонент могаў перысвайць часткі інтэрфейсу, якія вже былі запроўдзеныя Paper.

У загальных рысах внутрэшняя структура выглядала прыблізна так:

                PaperSelect
                     │
          ┌──────────┴──────────┐
          │                     │
      TextInput            Selection UI
                                │
                    ┌───────────┼───────────┐
                    │           │           │
                 Checkbox      Radio       List

Гэты выбор дизайна прыносіць рэальную выгоду.

Будзь-якая аплікацыя, якая вже викорыстоўвае React Native Paper, можа проста дадаць гэты компонент select, не ствараючы візуальнага стылю, які бы суперсечаўся з рэштой інтерфейсу.

З дыялога да калькі варыянтов адображэння

Першая версія гэтага компонента адказвала толькі дыялогавым окнам для выбору.

Інтэракцыя працавала так:

TextInput
    ↓
User taps field
    ↓
Dialog opens
    ↓
User selects an item
    ↓
Selected value appears in TextInput

Аднак, калі компонент стаў болей развітым, стала яснаю, што дыялогава панель не завжды ўсёрасована для кожнага мобільнага экрана.

Патрабавання ў плане UX сильна разніцяюцца між рознымі дапытамі.

Ёсць цяму, компонент быў расшыраны, каб падтрымліваць калькі способаў відображэння:

• Дыялогава панель
• Ніжняя панель
• Меню

Завдзяк гэтой змене той самы компонент выбору можа быць викорыстаны ў абсолютна разных контэкстах інтэракцыі, і разработчыкам не трэба перапісваць свою інтеграцыю, каб пераходзіць между ўсімі гэтымі варыянтамі.

Напрыклад:

<PaperSelect
  presentationStyle="bottomSheet"
  ...
/>

Гэтая гнучкасць стала значным крокам уперад для бібліятэкі.

Логіка выбору застаецца тая ж самая, незалежна ад таго, які стыль выбран — зменшваецца толькі спосаб ўражэння яго корыстніку.

Работа з вялікімі спісамі

Менш очвячныя проблемы у компонентах у стылі выпадаючага меню — як добра працуе спіс праз час, калі ён расте.

Уявіце сабе компонент выбору з:

10 items

Яго лёгка адрасаваць.

Тепер уявіце сабе такі з:

1,000 items

альбо нават:

10,000 items

Адрасаванне столькіх элементаў спісу адразу можа пагоршыць рэактыўнасць мобільнага дапамогу.

Ёжчы гэтага, пакет выкарыстоўвае FlashList для адрасавання своіх спісаў варыянтаў.

Канцэпція простая:

Large dataset
      ↓
Virtualized list
      ↓
Render what is needed
      ↓
Better scrolling performance

Прыдатнасц не ў тых проблемах, якія можна адкласці да моменту стварэння чаго-то масштабнага.

Кожны элемент, прызначаны для павтаральнага выкарыстоўвання, трэба ствараць з урахоўваннем масштабавання з самага пачатку, адколькі рэдка калі можна заздалегідь ведаць, насколькі вялікія будуць наборы дадзеных, якія ў яго падаюць.

Пошук

Калі колькасць вароў для выбору зростае, пошук становіцься неабходным.

У замест на тое, каб выклікаць у корыстувальніку бесканечнае прасуванне па дужа дзьялегім списку, элемент прымае форму з можласцю пошуку, якая дапамагае скармаліць варыанты.

Алгорытм выглядае так:

Search
  ↓
Filter options
  ↓
Select result
  ↓
Update selection

З точкі зору корыстувальніка гэта можа здавацца незначным дадаткам, але калі колькасць элементаў у наборы дадзеных перасягне калькі, гэта мае вялікы патэнцый на паслабленне ўжыванняя.

Багаты выбір з іконкамі

Праказваўанне калькі выбраных значэнняй адразу можа быць дужа хаотычным.

Напрыклад, такое значэнне:

React Native, TypeScript, Node.js, MongoDB

якраз і є складным для аналізу, калі яго паклаціць у стандартны поле для тэксту.

Іконкі рашаюць гэту проблему.

Выбраныя значэнні можна адказаць у вачынку як окольныя, адзінаковыя блокі:

[ React Native ] [ TypeScript ]
[ Node.js ]      [ MongoDB ]

Кампанента падтрымляе такой дыскрэйн на аснове чыпа для сцэнарыяў мнагакратнага выбору, чым дае корыстнікам набліжэйшую карціну таго, што яны выбралі.

Гэта таксама робіць адзельны выключэння выбора значна інтуітыўнейшым.

Раздзяльныя спісы

Іншая патрэба, якая з’явілася, — гэта можлівасць агрупаваць супакоўаныя опцыі разам.

У змену на адны дзёгкі, плоскі спіс, напрыму:

React
Angular
Vue
Node.js
Java
Python
MongoDB
PostgreSQL

опцыі можна арганізаваць пад заголовкамі:

Frontend

☐ React
☐ Angular
☐ Vue
Backend☐ Node.js
☐ Java
☐ Python
Database☐ MongoDB
☐ PostgreSQL

Такая агрупаванне значна спрыяе лёгкаму сканаванню і разумэнню большых набораў опцый.

У режыме мнагакратнага выбору можлівасць для корыстнікаў выбраць цэлы раздзял зараз прышвартавае процес значна.

Напрыклад:

☑ Frontend

    ☑ React
    ☑ Angular
    ☑ Vue

Гэта краща, чым прымусваць каго-небудзь нажымаць на кожны элемент по аднаму.

Кнопкі з радіо-пунктамі для адміністрацыі ўсьго адна выборка

Поле для пазначэння галочкамі ўжыткова, калі можна выбраць больш аднаго варыянта.

Але для сцэнарыёў адміністрацыі ўсьго адна выборка кнопкі з радіо-пунктамі ясней перадаюць намер корыстувальніку.

Самэй таго пакет таксама прымеў варіянт інтерфейсу выборкі з кнопкамі з радіо-пунктамі.

Основная ідея застаецца аднаковай:

Options
   ↓
User chooses one
   ↓
Selection state updated

Зменяецца толькі візуальная прыемка.

Гэта падкресляе важны прынцып практычнага стварэння компонентав, якія можна перызначаць:

Раздзеляйце логіку выборкі ад спосабу ў якім гэта выбранне паказваецца.

TypeScript і дизайн API

Паколькі гэта праглядаецца да вжытку іншымі разработчыкамі, форма API мае такое ж значэнне, як і выгляд інтерфейсу.

Той, хто вжывае пакет, не должен знати ніч пра тое, як ён функцыонуе внутршняя частка.

У ідеале яны можаць разумаваць гэта выключна на аднойчынку з:

Input
  ↓
Options
  ↓
User interaction
  ↓
Selection
  ↓
Callback

замест:

Dialog state
Modal state
List state
Search state
Checkbox state
Rendering state
...

Якісна, правяльна API складовайкі маскуюць гэтую внутранюя складнасць ад корыстувальніка.

Гэта адна з яснейшых наўчанняў, якія выйшлі з стварэння і постаўкі гэтага пакета.

Адкрыты код зменяе спосаб стварэння

Стварэнне складовайкі для сябе ў сваёй прыкладнай програме — гэта іншая задача, чым стварэнне яе для шырокага калекцыі разработчыкаў.

У межах адной прыкладнай программы стандарт можа быць:

"Гэта рашае мой конкрэтны кейс."

Калі код стае адкрытым, пытанне перастраюецца на:

"Чы будзе гэтая API зрозумелая для разработчыка, які ніколі не бачыў вучорні код?"

Гэтая змена пераменяе вашы прыорітеты пад час стварэння.

Разам вы пачаткаеце зусім уважней старацца да такіх рэчаў, як:

• Адпаведнасць у всім API
• Дакументацыя
• Сумеснае працаванне з старымі версіямі
• Актычныя сцэнарыі
• Разумныя стандартныя настройкі
• Апісацыя типоў
• Варыянты налаштавання
• Працэснае выдатковасць
• Версіяванне

Тое, што спачатку было маленькім, простым компанентам, можа ператворыцца на ўсё бол складную структуру, калі іншыя разработчыкі пачнуць апыллявацца яй у рэальных проектах.

Як праект развіваўся з часам

Тое, што спачатку было простым компонентам для выбору, паступова ператварылася на болей шырокі набор інструментаў для выбору.

Яго рост можна прыбліжна паказаць так:

Simple Select
      ↓
Single Selection
      ↓
Multi Selection
      ↓
    Search
      ↓
Large List Handling
      ↓
    Chips
      ↓
   Sections
      ↓
Radio Selection
      ↓
Bottom Sheet
      ↓
Menu Presentation

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

Гэта адны з аспектаў розработы ў відкрытым формате, якія выдзеляюцца.

Калі вы аплываете версію 1, рэдкая час з’яўляецца чыстая картіна таго, як у падсумку будзе выглядаць готовая бібліятэка.

У замен пакет постаўляецца ў стані постаўленых змян, калі з’яўляюцца рэальныя трэбаванні, адзывы корыстувачаў і новыя сцэнарыі викорыстання.

Урокі з гэтага процесу

1. Незначныя проблемы можуць перацвістці ў корисныя проекты з відкрытым кодам

Пачатковая проблема ніяк не была рэвалюцыйной.

Проста не было компонента select, які можна было б викорыстоўваць знову.

Але існуе рэальная разліка межы тым, калі вы лагодзіце ўсё для сабе, і тым, калі вы доўодзіце ўсё да такога стану, каб іншыя людзі таксама моглі яго взяць і выкорыстоўваць.

Інодзе гэтая разліка ўсё самае достатня, каб практычна паспрацаваць над стварэнням проекту з відкрытым кодам.

2. Ёжы ўсё можна викорыстоўваць знову значыць правільна яго абстрагаваць

Добра спроектаваны компонент не павінен быць прычаўленым да конкрэтнага дапрыемства, яке яго створыла.

У замене ён должен практыкуваць чысты, просты інтэрфейс ззовні, а ўнутранюю складнасць залишаць непазорной.

Гэты прынцып практыкуецца не толькі ў свете React Native.

3. Дизайн компанентоў таксама стосуецца досвіту корыстніка

Рэалізацыя можлівасці повторнага викорыстання компаненту на рэвэльскам роўні — гэта не ўсё.

Таксама важліва тое, як выглядае абмент з корыстнікам.

Дыялогавыя вікна, нижнія листы, меню, чыпы, поля пошуку, радыя-кнопкі і роздзелаваныя спісы — гэта проста разныя варыянты адпаведзення на тую ж самую основную запытанне:

Якой ёсць найлепшы спосаб для корыстніка здзейсніць выбор?

4. Компаненты, якія можна повторна викорыставаць, трэба ствараць з урахоўваннем выконавальных характэрасцей

Компанент, які чынна працуе з дзесятьма элементамі, пазней можа быць викорыстаны там, дзе ўсьмо тысяча.

Самэ гэтая прычына, чаму рашэнні ўжо на стадзіі проектавання, а не пазней, калі ў працэйнае среду пачынаюць з’яўляцца проблемы з выданнем ресурсаў, стосуюцца атрыбутаў відображэння і віртуалізацыі.

5. Дакументацыя ўскладнівае частка пакета, а не дадатковы элемент

Толькі код, яны працуюць, недастатковы, каб сказаць, што пакет завершаны.

Разработчыкам усё ж трэба чыстыя адказы на такія пытанні:

• Як яго інсталаваць
• Як яго выкарыстоўваць
• Калія прынтары є доступныя
• Які формат павінны маць даны
• Як налаштаваць яго функцыянаванне і візуальны выгляд
• Калія функцыяй насправды падтрымліваюцца

Якісная дакументацыя заполняе прасоц межы між становішчам, калі хтось думае:

"I found this package."

і моментам, калі ён можа абавярэнна сказаць:

"I can use this package."

Куды будзе развивацца проект

Спачатку мета проекту react-native-paper-select была простая: створыць компонент для выбірання, які бы пасуў да прыложэнняў, якія вжо выкарыстоўваюць React Native Paper.

З тэх пачатку ён перацвіў у значна болей моцны элемент, які зараз падтрымлеў калькольна спосабы выбірання, разныя стылі відображэння, пошук, выбіранне за дапамогою чыпаў, роздзелаваныя даны і ефектывае відображэння спісаў.

Ўсё ще є многа можлівасцяў для його падтрымкі та удосконалення.

Няма жаднага проекту на адкрытым кодзе, які б быў абсалютна завершаны.

Прыходзяць новыя прыстроі, сам React Native продавае апдэйты, змянююцыся патрабавання да дизайна, розвіваюцыяся потрэбы ў доступнасці, знову вырашаюцыяся пытанні эфектывнасці, а разработчыкі продаваюць своія прыказы, якія вартае выйсці ў працу.

Гэтая постаянная эвалюцыя ў часе яўляецца часткай таго, што робіць падтрымку такой бібліятэкі справжньям захопленням.

Заключныя думкі

Работа над react-native-paper-select паказвала, што проект з відкрытым кодам не павінен выходзіць з вялікага задуму.

Частаючы, ён пачынаецца з маленькай, конкрэтной проблемы, з якою сталкаешся пад час стварэння чаго-небудзь іншага.

Ты яе рашаеш для сябе.

Потым становіцца яснае, што гэты рашэнне можа дапамогчы іншым, якія сталкаюцца з той самай проблемай.

Тады ты яго дапрацоўваеш да канца.

Ты правільна яго описваеш.

Ты ўпускаеш його у свет.

І з часам маленькі внутраній компонент можа ператворыцца на пакет, ад якога іншы разработчыкі завісяюць для своіх проектаў.

Гэта і є історыя за react-native-paper-select.

Якщо ваш проект выкарыстоўвае React Native Paper і вам патрэбны гнучкія компоненты для выбору аднарочку чы роўнавэсна, то репазітарый размешчаны на GitHub, а сам пакет выпускаецца на npm.

Якщо вы вирашыце выкарыстоўваць гэты пакет, вашыя адзывы, апавешчэння пра багі і дапамога зялёжныя.