From d0d04047dd00dc928557cbb6e9927a09e7e1cce9 Mon Sep 17 00:00:00 2001
From: Daniil Suvorov <severecloud@gmail.com>
Date: Thu, 18 May 2023 12:25:45 +0300
Subject: [PATCH] concept: new ModalPage

---
 .../ModalPageNew/ModalPageNew.module.css      |  73 +++++++
 .../ModalPageNew/ModalPageNew.stories.tsx     | 130 ++++++++++++
 .../components/ModalPageNew/ModalPageNew.tsx  | 185 ++++++++++++++++++
 .../src/components/ModalPageNew/Readme.md     | 103 ++++++++++
 packages/vkui/src/index.ts                    |   3 +
 styleguide/config.js                          |   6 +
 6 files changed, 500 insertions(+)
 create mode 100644 packages/vkui/src/components/ModalPageNew/ModalPageNew.module.css
 create mode 100644 packages/vkui/src/components/ModalPageNew/ModalPageNew.stories.tsx
 create mode 100644 packages/vkui/src/components/ModalPageNew/ModalPageNew.tsx
 create mode 100644 packages/vkui/src/components/ModalPageNew/Readme.md

diff --git a/packages/vkui/src/components/ModalPageNew/ModalPageNew.module.css b/packages/vkui/src/components/ModalPageNew/ModalPageNew.module.css
new file mode 100644
index 0000000000..5c9747b39c
--- /dev/null
+++ b/packages/vkui/src/components/ModalPageNew/ModalPageNew.module.css
@@ -0,0 +1,73 @@
+.ModalPageNew__container {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  overflow-x: hidden;
+  overflow-y: auto;
+  z-index: var(--vkui--z_index_modal);
+  -webkit-overflow-scrolling: touch;
+
+  /**
+   * Для удаление скролла в Firefox.
+   * В версии ниже 64 будет виден скролл, но это не ломает функциональность.
+   */
+  scrollbar-width: none;
+
+  /**
+   * В старых браузерах не работает, но это не ломает функциональность.
+   */
+  scroll-snap-type: y mandatory;
+}
+
+/* stylelint-disable-next-line @project-tools/stylelint-atomic */
+.ModalPageNew__container > * {
+  scroll-snap-align: start;
+}
+
+.ModalPageNew__container::-webkit-scrollbar {
+  display: none;
+}
+
+.ModalPageNew__contentIn {
+  background: var(--vkui--color_background_modal);
+  border-radius: var(--vkui--size_border_radius_paper--regular)
+    var(--vkui--size_border_radius_paper--regular) 0 0;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: var(--vkui--size_popup_small--regular);
+}
+
+.ModalPageNew__mask {
+  z-index: var(--vkui--z_index_modal);
+  position: fixed;
+  background: var(--vkui--color_overlay_primary);
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  opacity: 0;
+}
+
+/**
+  * В старых браузерах sticky не работает, но это не ломает функциональность.
+  */
+.ModalPageNew__header {
+  z-index: 1;
+  position: sticky;
+  top: 0;
+  border-radius: inherit;
+  background: var(--vkui--color_background_modal);
+}
+
+.ModalPageNew__headerFixed {
+  border-radius: 0;
+}
+
+.ModalPageNew__footer {
+  z-index: 2;
+  position: sticky;
+  bottom: 0;
+  background: var(--vkui--color_background_modal);
+}
diff --git a/packages/vkui/src/components/ModalPageNew/ModalPageNew.stories.tsx b/packages/vkui/src/components/ModalPageNew/ModalPageNew.stories.tsx
new file mode 100644
index 0000000000..f72e197ae0
--- /dev/null
+++ b/packages/vkui/src/components/ModalPageNew/ModalPageNew.stories.tsx
@@ -0,0 +1,130 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { withSinglePanel, withVKUILayout } from '../../storybook/VKUIDecorators';
+import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
+import { Avatar } from '../Avatar/Avatar';
+import { Button } from '../Button/Button';
+import { Card } from '../Card/Card';
+import { CardScroll } from '../CardScroll/CardScroll';
+import { Div } from '../Div/Div';
+import { FormItem } from '../FormItem/FormItem';
+import { Group } from '../Group/Group';
+import { Header } from '../Header/Header';
+import { HorizontalCell } from '../HorizontalCell/HorizontalCell';
+import { HorizontalScroll } from '../HorizontalScroll/HorizontalScroll';
+import { Input } from '../Input/Input';
+import { ModalPageHeader } from '../ModalPageHeader/ModalPageHeader';
+import { Panel } from '../Panel/Panel';
+import { PanelHeader } from '../PanelHeader/PanelHeader';
+import { SimpleCell } from '../SimpleCell/SimpleCell';
+import { Textarea } from '../Textarea/Textarea';
+import { ModalPageNew, ModalPageNewProps } from './ModalPageNew';
+
+const story: Meta<ModalPageNewProps> = {
+  title: 'Modals/ModalPageNew',
+  component: ModalPageNew,
+  parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
+  decorators: [withSinglePanel, withVKUILayout],
+};
+
+export default story;
+
+type Story = StoryObj<ModalPageNewProps>;
+
+export const Example: Story = {
+  render: function Render() {
+    const [modal, setModal] = React.useState(true);
+
+    const openModal = () => setModal(true);
+    const closeModal = () => setModal(false);
+
+    return (
+      <Panel>
+        <PanelHeader>ANKI</PanelHeader>
+        <Group>
+          <FormItem>
+            <Input />
+          </FormItem>
+
+          <SimpleCell onClick={openModal}>open modal</SimpleCell>
+        </Group>
+
+        <Group>
+          {Array(50)
+            .fill(undefined)
+            .map((_, i) => (
+              <SimpleCell key={i} expandable>
+                SimpleCell
+              </SimpleCell>
+            ))}
+        </Group>
+
+        {modal && (
+          <ModalPageNew
+            header={<ModalPageHeader>Заголовок</ModalPageHeader>}
+            footer={
+              <Div>
+                <Button size="l" stretched>
+                  Button
+                </Button>
+              </Div>
+            }
+            onClosed={closeModal}
+          >
+            <Group>
+              <Header>https://github.com/VKCOM/VKUI/issues/335</Header>
+              <HorizontalScroll>
+                <div style={{ display: 'flex' }}>
+                  {Array(50)
+                    .fill(undefined)
+                    .map((_, i) => (
+                      <HorizontalCell key={i} header="title">
+                        <Avatar />
+                      </HorizontalCell>
+                    ))}
+                </div>
+              </HorizontalScroll>
+            </Group>
+
+            <Group>
+              <Header>https://github.com/VKCOM/VKUI/issues/338</Header>
+              <Header>https://github.com/VKCOM/VKUI/issues/599</Header>
+              <FormItem>
+                <Input />
+              </FormItem>
+            </Group>
+
+            <Group>
+              <Header>https://github.com/VKCOM/VKUI/issues/1071</Header>
+              <FormItem>
+                <Textarea />
+              </FormItem>
+            </Group>
+
+            <Group>
+              <Header>https://github.com/VKCOM/VKUI/issues/1494</Header>
+              <CardScroll size="s">
+                <div style={{ display: 'flex' }}>
+                  {Array(50)
+                    .fill(undefined)
+                    .map((_, i) => (
+                      <Card key={i}>
+                        <div style={{ paddingBottom: '66%' }} />
+                      </Card>
+                    ))}
+                </div>
+              </CardScroll>
+            </Group>
+
+            <Div>
+              https://github.com/VKCOM/VKUI/issues/604 https://github.com/VKCOM/VKUI/issues/741
+              https://github.com/VKCOM/VKUI/issues/876 https://github.com/VKCOM/VKUI/issues/1570
+              https://github.com/VKCOM/VKUI/issues/2008 https://github.com/VKCOM/VKUI/issues/2029
+              https://github.com/VKCOM/VKUI/issues/2030 https://github.com/VKCOM/VKUI/issues/2449
+            </Div>
+          </ModalPageNew>
+        )}
+      </Panel>
+    );
+  },
+};
diff --git a/packages/vkui/src/components/ModalPageNew/ModalPageNew.tsx b/packages/vkui/src/components/ModalPageNew/ModalPageNew.tsx
new file mode 100644
index 0000000000..a6da9b6026
--- /dev/null
+++ b/packages/vkui/src/components/ModalPageNew/ModalPageNew.tsx
@@ -0,0 +1,185 @@
+import React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { useEventListener } from '../../hooks/useEventListener';
+import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
+import { useDOM } from '../../lib/dom';
+import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
+import { useScrollLock } from '../AppRoot/ScrollContext';
+import styles from './ModalPageNew.module.css';
+
+// Прокрутка элемента на определенный процент
+function useFirstOpen(container: React.RefObject<HTMLDivElement>, settlingHeight: number) {
+  useIsomorphicLayoutEffect(() => {
+    const el = container.current!;
+
+    el.scrollTop = 0;
+    el.scrollTo({
+      top: (el.clientHeight * settlingHeight) / 100,
+      behavior: 'smooth',
+    });
+  }, []);
+}
+
+// Отступы для модалки
+function useIndents(settlingHeight: number) {
+  const { document, window } = useDOM();
+
+  const indent1Ref = React.useRef<HTMLDivElement>(null);
+  const indent2Ref = React.useRef<HTMLDivElement>(null);
+
+  const indentCalculate = () => {
+    const indent1Height = (document!.documentElement.clientHeight * settlingHeight) / 100;
+    const indent2Height = document!.documentElement.clientHeight - indent1Height;
+
+    indent1Ref.current!.style.height = `${indent1Height}px`;
+    indent2Ref.current!.style.height = `${indent2Height}px`;
+  };
+
+  useGlobalEventListener(window, 'resize', indentCalculate);
+
+  useIsomorphicLayoutEffect(() => {
+    indentCalculate();
+  }, [settlingHeight]);
+
+  return [indent1Ref, indent2Ref];
+}
+
+// Маска для модалки
+function useMask(container: React.RefObject<HTMLDivElement>, settlingHeight: number) {
+  const maskRef = React.useRef<HTMLDivElement>(null);
+
+  const scroll = () => {
+    const el = container.current!;
+
+    const indent1 = (el.clientHeight * settlingHeight) / 100;
+
+    const opacity = Math.min(el.scrollTop / indent1, 1);
+
+    maskRef.current!.style.opacity = `${opacity}`;
+  };
+
+  const scrollListener = useEventListener('scroll', scroll);
+
+  useIsomorphicLayoutEffect(() => {
+    const el = container.current!;
+    scrollListener.add(el);
+  }, [settlingHeight]);
+
+  return maskRef;
+}
+
+function useCheckScroll(container: React.RefObject<HTMLDivElement>, closeCallback: () => void) {
+  useIsomorphicLayoutEffect(() => {
+    const el = container.current!;
+
+    const scroll = () => {
+      if (el.scrollTop === 0) {
+        closeCallback();
+      }
+    };
+
+    el.addEventListener('scroll', scroll);
+
+    return () => el.removeEventListener('scroll', scroll);
+  }, []);
+}
+
+function useFullOpen(container: React.RefObject<HTMLDivElement>) {
+  const [fullOpen, setFullOpen] = React.useState(false);
+
+  useIsomorphicLayoutEffect(() => {
+    const el = container.current!;
+
+    const scroll = () => {
+      if (el.scrollTop >= el.offsetHeight) {
+        !fullOpen && setFullOpen(true);
+        return;
+      }
+
+      fullOpen && setFullOpen(false);
+    };
+
+    el.addEventListener('scroll', scroll);
+
+    return () => el.removeEventListener('scroll', scroll);
+  }, [fullOpen]);
+
+  return fullOpen;
+}
+
+export interface ModalPageNewProps {
+  header?: React.ReactNode;
+  children?: React.ReactNode;
+  footer?: React.ReactNode;
+
+  onClose?: () => void;
+  onClosed?: () => void;
+
+  /**
+   * Процент, на который изначально будет открыта модальная страница.
+   * При settlingHeight={100} модальная страница раскрывается на всю высоту.
+   */
+  settlingHeight?: number;
+}
+
+export const ModalPageNew = ({
+  header,
+  children,
+  footer,
+  onClose,
+  onClosed,
+  settlingHeight = 75,
+  ...restProp
+}: ModalPageNewProps) => {
+  const containerRef = React.useRef<HTMLDivElement>(null);
+
+  const [indent1Ref, indent2Ref] = useIndents(settlingHeight);
+  const maskRef = useMask(containerRef, settlingHeight);
+
+  useFirstOpen(containerRef, settlingHeight);
+  const fullOpen = useFullOpen(containerRef);
+  useCheckScroll(containerRef, () => {
+    console.log('Closed');
+    onClosed && onClosed();
+  });
+
+  useScrollLock();
+
+  const close = () => {
+    onClose && onClose();
+
+    containerRef.current?.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  return (
+    <>
+      <div className={styles['ModalPageNew__mask']} ref={maskRef} />
+      <div
+        className={styles['ModalPageNew__container']}
+        ref={containerRef}
+        {...restProp}
+        onClick={close}
+      >
+        <div style={{ height: `${settlingHeight}%` }} ref={indent1Ref} />
+        <div style={{ height: `${100 - settlingHeight}%` }} ref={indent2Ref} />
+        <div className={styles['ModalPageNew__contentIn']} onClick={(e) => e.stopPropagation()}>
+          <div
+            className={classNames(
+              styles['ModalPageNew__header'],
+              fullOpen && styles['ModalPageNew__headerFixed'],
+            )}
+          >
+            {header}
+          </div>
+
+          {children}
+
+          {footer && <div className={styles['ModalPageNew__footer']}>{footer}</div>}
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/packages/vkui/src/components/ModalPageNew/Readme.md b/packages/vkui/src/components/ModalPageNew/Readme.md
new file mode 100644
index 0000000000..31cabf33ed
--- /dev/null
+++ b/packages/vkui/src/components/ModalPageNew/Readme.md
@@ -0,0 +1,103 @@
+```jsx { "props": { "adaptivity": true, "webviewType": true } }
+const Home = ({ id }) => {
+  const [modal, setModal] = React.useState(true);
+
+  const openModal = () => setModal(true);
+  const closeModal = () => setModal(false);
+
+  return (
+    <Panel id={id}>
+      <PanelHeader>ANKI</PanelHeader>
+      <Group>
+        <FormItem>
+          <Input />
+        </FormItem>
+
+        <SimpleCell onClick={openModal}>open modal</SimpleCell>
+      </Group>
+
+      <Group>
+        {Array(50)
+          .fill(undefined)
+          .map((_, i) => (
+            <SimpleCell key={i} expandable>
+              SimpleCell
+            </SimpleCell>
+          ))}
+      </Group>
+
+      {modal && (
+        <ModalPageNew
+          header={<ModalPageHeader>Заголовок</ModalPageHeader>}
+          footer={
+            <Div>
+              <Button size="l" stretched>
+                Button
+              </Button>
+            </Div>
+          }
+          onClosed={closeModal}
+        >
+          <Group>
+            <Header>https://github.com/VKCOM/VKUI/issues/335</Header>
+            <HorizontalScroll>
+              <div style={{ display: 'flex' }}>
+                {Array(50)
+                  .fill(undefined)
+                  .map((_, i) => (
+                    <HorizontalCell key={i} header="title">
+                      <Avatar />
+                    </HorizontalCell>
+                  ))}
+              </div>
+            </HorizontalScroll>
+          </Group>
+
+          <Group>
+            <Header>https://github.com/VKCOM/VKUI/issues/338</Header>
+            <Header>https://github.com/VKCOM/VKUI/issues/599</Header>
+            <FormItem>
+              <Input />
+            </FormItem>
+          </Group>
+
+          <Group>
+            <Header>https://github.com/VKCOM/VKUI/issues/1071</Header>
+            <FormItem>
+              <Textarea />
+            </FormItem>
+          </Group>
+
+          <Group>
+            <Header>https://github.com/VKCOM/VKUI/issues/1494</Header>
+            <CardScroll size="s">
+              <div style={{ display: 'flex' }}>
+                {Array(50)
+                  .fill(undefined)
+                  .map((_, i) => (
+                    <Card key={i}>
+                      <div style={{ paddingBottom: '66%' }} />
+                    </Card>
+                  ))}
+              </div>
+            </CardScroll>
+          </Group>
+
+          <Div>
+            https://github.com/VKCOM/VKUI/issues/604 https://github.com/VKCOM/VKUI/issues/741
+            https://github.com/VKCOM/VKUI/issues/876 https://github.com/VKCOM/VKUI/issues/1570
+            https://github.com/VKCOM/VKUI/issues/2008 https://github.com/VKCOM/VKUI/issues/2029
+            https://github.com/VKCOM/VKUI/issues/2030 https://github.com/VKCOM/VKUI/issues/2449
+          </Div>
+        </ModalPageNew>
+      )}
+    </Panel>
+  );
+};
+
+<ConfigProvider>
+  <AppRoot>
+    <Home />
+  </AppRoot>
+</ConfigProvider>;
+```
diff --git a/packages/vkui/src/index.ts b/packages/vkui/src/index.ts
index 5be587764e..072cbfbd86 100644
--- a/packages/vkui/src/index.ts
+++ b/packages/vkui/src/index.ts
@@ -114,6 +114,9 @@ export type { ModalCardProps } from './components/ModalCard/ModalCard';
 export { ModalDismissButton } from './components/ModalDismissButton/ModalDismissButton';
 export type { ModalDismissButtonProps } from './components/ModalDismissButton/ModalDismissButton';
 
+export { ModalPageNew } from './components/ModalPageNew/ModalPageNew';
+export type { ModalPageNewProps } from './components/ModalPageNew/ModalPageNew';
+
 /**
  * Blocks
  */
diff --git a/styleguide/config.js b/styleguide/config.js
index bfaa4f5628..d66bc77e24 100644
--- a/styleguide/config.js
+++ b/styleguide/config.js
@@ -198,6 +198,12 @@ const baseConfig = {
             `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/ModalDismissButton/ModalDismissButton.tsx`,
           ],
         },
+        {
+          name: 'Modals new',
+          components: () => [
+            `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/ModalPageNew/ModalPageNew.tsx`,
+          ],
+        },
         {
           name: 'Blocks',
           components: () => [