UIKit: типичная «ошибка»

0
357

Одна из самых распространенных проблем, корни которые уходят в bootstrap, это закладывать модификаторы как boolean флаги, например:

type ButtonProps = {
   primary?: boolean;
   danger?: boolean;
   warning?: boolean;
   info?: boolean;
   // ... etc
}

Проблема в том, что bootstrap тоже не идеален, кроме этого, он «CSS-фреймворк» и в итоге, используя подобный подход в компонентах, вы получаете неконтролируемую комбинаторику, типа

<Button primary info warning>WTF?</Button>

Никто это никак не покрывает тестами, никаких варнингов в консоле не выдаёт, ну а внешний вид будет зависеть от того, в какой последовательности описаны эти «модификаторы» в CSS.

Есть ещё смешной момент, когда в коде, нужен будет динамический «mode», это будет решать как-то так:

mode === 'warning'
   ? <Button warning/>
   : <Button primary/>
;
// Либо
<Button
   primary={!!mode || mode === 'primary'}
   warning={mode ==== 'warning'}
   info={mode ==== 'info'}
/>

Поэтому сделайте сразу правильно, а именно, если параметры взаимоисключающие, то заверните их в одно enum свойство, например:

UIKit: типичная «ошибка»

UIKit: типичная «ошибка»
UIKit: типичная «ошибка»

Кроме того, конкретно для кнопки есть прикольный факт, практически все делают «primary» и не учитывают его в логике компонента, в итоге либо жестко ставят тип кнопки по умолчанию «button», либо никакой, а следовательно это будет «submit». Второй исход хуже первого, но лучше просто учитывать этот момент при выставлении типа кнопки по умолчанию, тоже самое и обратно, выставлять «mode» кнопки от её «type»:

UIKit: типичная «ошибка»

Всё выше перечисленное относиться не только к кнопке (просто у меня только кнопка есть :]), но и к любому другому компоненту, всегда думайте над комбинаторингом свойств и не плодите boolean свойства в угоду их «псевдо-красоте», которое в добавок и не расширяемо.

источник