#1093: Компонент Snackbar не отображается поверх модального окона

src/components/Snackbar/Readme.md

@@ -13,7 +13,8 @@ class SnackBarExample extends React.Component {
 
     this.state = {
       text: '',
-      snackbar: null
+      snackbar: null,
+      hasModal: false,
     };
 
     this.openBaseWithAction = this.openBaseWithAction.bind(this);
@@ -29,6 +30,7 @@ class SnackBarExample extends React.Component {
     if (this.state.snackbar) return;
     this.setState({ snackbar:
       <Snackbar
+        duration={4000}
         onClose={() => this.setState({ snackbar: null })}
         action="Поделиться"
         onActionClick={() => this.setState({ text: 'Добавляем метку.' })}
@@ -68,8 +70,25 @@ class SnackBarExample extends React.Component {
   }
 
   render() {
+    const closeModal = () => this.setState({ hasModal: false });
+    const modal = (
+      <ModalRoot activeModal={this.state.hasModal ? 'modal' : null} onClose={closeModal}>
+        <ModalPage
+          id="modal"
+          onClose={closeModal}
+          header={
+            <ModalPageHeader
+              left={IS_PLATFORM_ANDROID && <PanelHeaderButton onClick={closeModal}><Icon24Cancel /></PanelHeaderButton>}
+              right={IS_PLATFORM_IOS && <PanelHeaderButton onClick={closeModal}><Icon24Done /></PanelHeaderButton>}
+            >Модалка</ModalPageHeader>
+          }
+        >
+          <div style={{ height: '600px' }} />
+        </ModalPage>
+      </ModalRoot>
+    );
     return (
-      <View activePanel="example">
+      <View activePanel="example" modal={modal}>
         <Panel id="example">
           <PanelHeader>Snackbar</PanelHeader>
           <Group>
@@ -78,8 +97,11 @@ class SnackBarExample extends React.Component {
             <CellButton onClick={this.openWithAvatar}>Уведомление с аватаркой</CellButton>
           </Group>
 
-          {this.state.text && <Group><Div>{this.state.text}</Div></Group>}
+          <Group>
+            <CellButton onClick={() => this.setState({ hasModal: true })}>Открыть модалку</CellButton>
+          </Group>
 
+          {this.state.text && <Group><Div>{this.state.text}</Div></Group>}
           {this.state.snackbar}
         </Panel>
       </View>

src/components/Snackbar/Snackbar.css

@@ -1,5 +1,6 @@
 .Snackbar {
   user-select: none;
+  z-index: 101;
 }
 
 .Snackbar__in {

src/components/Snackbar/Snackbar.tsx

@@ -13,6 +13,7 @@ import { rubber } from '../../lib/touch';
 import withAdaptivity, { AdaptivityProps, ViewWidth } from '../../hoc/withAdaptivity';
 import Text from '../Typography/Text/Text';
 import Button from '../Button/Button';
+import { withSnackbarPortal } from './hoc';
 
 export interface SnackbarProps extends HTMLAttributes<HTMLElement>, HasPlatform, AdaptivityProps {
   /**
@@ -262,6 +263,6 @@ class Snackbar extends PureComponent<SnackbarProps, SnackbarState> {
   }
 }
 
-export default withPlatform(withAdaptivity(Snackbar, {
+export default withPlatform(withAdaptivity(withSnackbarPortal(Snackbar), {
   viewWidth: true,
 }));

src/components/Snackbar/hoc.tsx

@@ -0,0 +1,31 @@
+import React, { createContext, ComponentType, useMemo, useState, useContext } from 'react';
+import { createPortal } from 'react-dom';
+
+export const SnackbarContext = createContext<{
+  isolated?: boolean;
+  node?: HTMLElement;
+}>({ isolated: true });
+
+export const withSnackbarContainer = <T extends ComponentType<any>>(Cmp: T) => ((props: any) => {
+  const [snackbarNode, setSnackbarNode] = useState<HTMLElement>(null);
+  const contextValue = useMemo(() => ({ node: snackbarNode }), [snackbarNode]);
+  const snackbarContainer = <div ref={setSnackbarNode} />;
+  return (
+    <SnackbarContext.Provider value={contextValue}>
+      <Cmp {...props} snackbar={snackbarContainer} />
+    </SnackbarContext.Provider>
+  );
+}) as T;
+
+export const withSnackbarPortal = <T extends ComponentType<any>>(Cmp: T) => ((props: any) => {
+  const { isolated, node } = useContext(SnackbarContext);
+
+  const jsx = <Cmp {...props} />;
+  if (isolated) {
+    return jsx;
+  }
+  if (!node) {
+    return null;
+  }
+  return createPortal(jsx, node);
+}) as T;

src/components/View/View.tsx

@@ -12,6 +12,7 @@ import withContext from '../../hoc/withContext';
 import { ConfigProviderContext, ConfigProviderContextInterface } from '../ConfigProvider/ConfigProviderContext';
 import { createCustomEvent } from '../../lib/utils';
 import { SplitColContext, SplitColContextProps } from '../SplitCol/SplitCol';
+import { withSnackbarContainer } from '../Snackbar/hoc';
 
 export const transitionStartEventName = 'VKUI:View:transition-start';
 export const transitionEndEventName = 'VKUI:View:transition-end';
@@ -42,6 +43,7 @@ export interface ViewProps extends HTMLAttributes<HTMLElement>, HasChildren, Has
   activePanel: string;
   popout?: ReactNode;
   modal?: ReactNode;
+  snackbar?: ReactNode;
   onTransition?(params: { isBack: boolean; from: string; to: string }): void;
   /**
    * callback свайпа назад
@@ -442,7 +444,7 @@ class View extends Component<ViewProps, ViewState> {
   }
 
   render() {
-    const { style, popout, modal, platform } = this.props;
+    const { style, popout, modal, snackbar, platform } = this.props;
     const { prevPanel, nextPanel, activePanel, swipeBackPrevPanel, swipeBackNextPanel, swipeBackResult } = this.state;
 
     const hasPopout = !!popout;
@@ -497,13 +499,14 @@ class View extends Component<ViewProps, ViewState> {
         </div>
         {hasPopout && <div className="View__popout">{popout}</div>}
         {hasModal && <div className="View__modal">{modal}</div>}
+        {snackbar}
       </Touch>
     );
   }
 }
 
 export default withContext(withContext(
-  withPlatform(View),
+  withPlatform(withSnackbarContainer(View)),
   SplitColContext,
   'splitCol',
 ), ConfigProviderContext, 'configProvider');