@vkontakte/vkui 4.28.0 → 4.28.1

package/src/components/View/Readme.md

@@ -0,0 +1,98 @@
+Базовый компонент для создания панелей. В качестве `children` принимает коллекцию `Panel`.
+У каждой `Panel` должен быть уникальный `id`. Свойство `activePanel` определяет какая `Panel` активна.
+
+При смене значения свойства `activePanel` происходит плавный переход от одной панели к другой.
+Как только он заканчивается, вызывается свойство-функция `onTransition`.
+
+```jsx
+const [activePanel, setActivePanel] = useState("panel1");
+
+<View activePanel={activePanel}>
+  <Panel id="panel1">
+    <PanelHeader>Panel 1</PanelHeader>
+    <Group>
+      <div style={{ height: 200 }} />
+      <CellButton onClick={() => setActivePanel("panel2")}>
+        Go to panel 2
+      </CellButton>
+      <div style={{ height: 600 }} />
+    </Group>
+  </Panel>
+  <Panel id="panel2">
+    <PanelHeader>Panel 2</PanelHeader>
+    <Group>
+      <div style={{ height: 200 }} />
+      <CellButton onClick={() => setActivePanel("panel3")}>
+        Go to panel 3
+      </CellButton>
+      <div style={{ height: 600 }} />
+    </Group>
+  </Panel>
+  <Panel id="panel3">
+    <PanelHeader>Panel 3</PanelHeader>
+    <Group>
+      <div style={{ height: 200 }} />
+      <CellButton onClick={() => setActivePanel("panel1")}>
+        Back to panel 1
+      </CellButton>
+      <div style={{ height: 600 }} />
+    </Group>
+  </Panel>
+</View>;
+```
+
+### <a id="/View?id=iosswipeback"></a>[iOS Swipe Back](#/View?id=iosswipeback)
+
+В iOS есть возможность свайпнуть от левого края назад, чтобы перейти на предыдущую панель. Для того, чтобы
+повторить такое поведение в VKUI нужно:
+
+- Передать во `View` коллбек `onSwipeBack` — он сработает при завершении анимации свайпа. Поменяйте в нем `activePanel` и обновите `history`.
+- Передать во `View` проп `history` — массив из id панелей в порядке открытия. Например, если пользователь из `main` перешел в `profile`, а оттуда попал в `education`, то `history=['main', 'profile', 'education']`.
+- Обернуть ваше приложение в `ConfigProvider` — он определит, открыто приложение в webview клиента VK или в браузере (там есть свой swipe back, который будет конфликтовать с нашим). Для проверки в браузере форсируйте определение webview: `<СonfigProvider isWebView>`.
+- На первой панели должен включаться свайпбек нативного клиента, чтобы пользователь смог выйти из приложения — для этого используют `vk-bridge`. **Если вы не из ВК,** при переходах отправляйте [событие `VKWebAppSetSwipeSettings`](https://dev.vk.com/bridge/VKWebAppSetSwipeSettings) с `history: true` на первой панели или `history: false` на других. **Если вы из ВК,** при переходе на первую панель отправляйте событие `VKWebAppEnableSwipeBack`, на любую другую — `VKWebAppDisableSwipeBack`.
+- Компоненты, которые сами обрабатывают жесты (например, карта), могут конфликтовать со свайпбеком — повесьте на них свойство `data-vkui-swipe-back={false}`
+
+```jsx
+import vkBridge from "@vkontakte/vk-bridge";
+
+const [history, setHistory] = useState(["main"]);
+const activePanel = history[history.length - 1];
+const isFirst = history.length === 1;
+
+React.useEffect(() => {
+  // Если вы из ВК, делайте так
+  vkBridge.send(
+    isFirst ? "VKWebAppEnableSwipeBack" : "VKWebAppDisableSwipeBack"
+  );
+  // Если вы не из ВК, то так:
+  vkBridge.send("VKWebAppSetSwipeSettings", { history: isFirst });
+}, [isFirst]);
+
+const goBack = () => setHistory(history.slice(0, -1));
+const go = (panel) => setHistory([...history, panel]);
+
+<ConfigProvider platform={IOS} isWebView>
+  <View onSwipeBack={goBack} history={history} activePanel={activePanel}>
+    <Panel id="main">
+      <PanelHeader>Main</PanelHeader>
+      <Group>
+        <CellButton onClick={() => go("profile")}>profile</CellButton>
+      </Group>
+    </Panel>
+    <Panel id="profile">
+      <PanelHeader>Профиль</PanelHeader>
+      <Group>
+        <Placeholder>
+          Теперь свайпните от левого края направо, чтобы вернуться
+        </Placeholder>
+        <Div
+          style={{ height: 50, background: "#eee" }}
+          data-vkui-swipe-back={false}
+        >
+          Здесь свайпбек отключен
+        </Div>
+      </Group>
+    </Panel>
+  </View>
+</ConfigProvider>;
+```

package/src/components/View/View.css

@@ -0,0 +1,125 @@
+@import "./ViewIOS.css";
+
+.View {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  word-wrap: break-word;
+}
+
+.View--animated,
+.View--swiping-back {
+  overflow: hidden;
+}
+
+.View__header {
+  z-index: 2;
+  position: fixed;
+  width: 100%;
+}
+
+.View--animated .View__panel,
+.View--animated .View__header,
+.View--swiping-back .View__panel,
+.View--swiping-back .View__header {
+  pointer-events: none;
+}
+
+.View__panels {
+  height: 100%;
+  width: 100%;
+}
+
+.View__panel {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  z-index: 1;
+}
+
+.View__panel-in {
+  height: 100%;
+}
+
+.View--animated .View__panel,
+.View--swiping-back .View__panel {
+  position: fixed;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+}
+
+.View__popout {
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 100;
+  width: 100%;
+  height: 100%;
+}
+
+.View__modal {
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 99;
+  width: 100%;
+  height: 100%;
+}
+
+.View__modal:empty {
+  display: none;
+}
+
+.View--vkcom,
+.View--android {
+  font-family: var(--font-common);
+}
+
+/**
+ * Active panel
+ */
+.View--vkcom .View__panel--active::before,
+.View--android .View__panel--active::before {
+  content: none;
+}
+
+/**
+ * Panel transition
+ */
+.View__panel--next ~ .View__panel--prev {
+  animation: vkui-animation-view-prev-back 0.3s var(--android-easing);
+}
+
+.View__panel--prev ~ .View__panel--next {
+  animation: vkui-animation-view-next-forward 0.3s var(--android-easing);
+}
+
+.View--no-motion .View__panel {
+  animation: none;
+}
+
+@keyframes vkui-animation-view-prev-back {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateY(80px);
+  }
+}
+
+@keyframes vkui-animation-view-next-forward {
+  from {
+    opacity: 0;
+    transform: translateY(80px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}