Skip to content

v2.0.0
Compare
Choose a tag to compare
@ArthurStam ArthurStam released this 11 Jun 11:27
· 11520 commits to master since this release
v2.0.0
fb8b96b

ScrollView => Panel

Тут все просто, мы решили, что ScrollView – не самое подходящее название, Panel гораздо лучше отражает назначение этого компонента

Свойства header у Panel больше нет

Мы давно хотели избавить пользователей от декларации шапки в виде объекта, да еще и не в коде компонента панели. О чем речь?

Вот так было раньше:

<ScrollView header={{ title: 'Some Panel Title', left: '...', right: '...' }}>
  <SomePanel />
</ScrollView>

Проблема в том, что логика отображения панели "размазывается" в двух компонентах: там, где декларируется <ScrollView /> и непосредственно в <SomePanel />.

Как сейчас:

// App.js

<Panel>
  <SomePanel />
</Panel>

// SomePanel.js
<div>
  <PanelHeader left="..." right="...">
    Some Panel Title
  </PanelHeader>
  Panel content
</div>

PanelHeader можно располагать где угодно внутри Panel, он все равно будет отрисовываться сверху (привет, React.createPortal)

Кнопки в PanelHeader

Слегка поменялась логика отрисовки кнопок слева в PanelHeader

Как было раньше:

<ScrollView header={{
  left: <HeaderButton>{osname === IOS ? 'Назад' : <Icon24Back />}</HeaderButton>
  icon: osname === IOS && <HeaderButton><Icon28Chevron_back /></HeaderButton>
}} />

Как сейчас:

<PanelHeader
  left={<HeaderButton>{osname === IOS ? <Icon28Chevron_back /> : <Icon24Back />}</HeaderButton>}
  addon={<HeaderButton>Назад</HeaderButton>}
>
  Some Panel Title
</PanelHeader>

Больше примеров можно посмотреть вот тут: https://vkcom.github.io/vkui-styleguide/#!/HeaderButton

Новый дизайн

Компоненты Input, Select, Button, Textarea, Radio, Checkbox, FormLayout переехали на новый дизайн, который раньше включался свойством v="new".

Иконки

Иконки больше не являются частью VKUI. Теперь это самостоятельный пакет @vkonktakte/icons.
Вся информация об иконках содержится тут.

FormLayout

Свойство allowSubmit больше не используется. Submit формы будет только в том случае, если передан onSubmit. Разработчики должны сами управлять такими сценариями, как e.preventDefault().

Tappable

Используется почти во всех "кликабельных" компонентах. Раньше, для того чтобы заставить Tappable реагировать на прикосновения, ему обязательно нужно было передавать onClick. В некоторых случаях это приводило к навешиванию пустых обработчиков. Сейчас эффект нажатия будет работать всегда по-умолчанию.
Для отключения эффекта нужно передавать свойство disabled, по аналогии с Input, Button, Radio.

Удалены ненужные компоненты

  • Pane – оказалось, что этот компонент лишний и может запутать разработчиков. Чтобы понять, как жить без него,
    достаточно полистать доку. Практически во всех случаях можно обойтись комбинацией Div и Group.

  • Flex – не имеет отношения к VKUI.

View

Свойство header теперь по-дефолту true

Assets 2
Loading