Re-position toast component

libraries/ui-material/SnackBar/index.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Spring } from 'react-spring';
+import { Spring, config } from 'react-spring';
 import Ellipsis from '@shopgate/pwa-common/components/Ellipsis';
 import I18n from '@shopgate/pwa-common/components/I18n';
 import styles from './style';
@@ -97,33 +97,35 @@ class SnackBar extends Component {
     };
 
     return (
-      <Spring
-        from={{ y: 0 }}
-        to={{ y: -100 }}
-        config={{ tension: 200, friction: 18 }}
-        reverse={!visible}
-        force
-        onRest={this.handleRest}
-      >
-        {props => (
-          <div
-            className={styles.wrapper}
-            style={{ transform: `translateY(${props.y}%)` }}
-            data-footer-inset-update-ignore="true"
-          >
-            <div className={styles.box} {...boxProps}>
-              <Ellipsis rows={2}>
-                <I18n.Text className={styles.label} string={message || ''} params={messageParams} />
-              </Ellipsis>
-              {(action && actionLabel) && (
-                <button className={styles.button} onClick={this.handleAction}>
-                  <I18n.Text string={actionLabel} />
-                </button>
-              )}
+      <div className={styles.container}>
+        <Spring
+          from={{ top: 80 }}
+          to={{ top: 0 }}
+          config={config.stiff}
+          reverse={!visible}
+          force
+          onRest={this.handleRest}
+        >
+          {props => (
+            <div
+              className={styles.wrapper}
+              style={props}
+              data-footer-inset-update-ignore="true"
+            >
+              <div className={styles.box} {...boxProps}>
+                <Ellipsis rows={2}>
+                  <I18n.Text className={styles.label} string={message || ''} params={messageParams} />
+                </Ellipsis>
+                {(action && actionLabel) && (
+                  <button className={styles.button} onClick={this.handleAction}>
+                    <I18n.Text string={actionLabel} />
+                  </button>
+                )}
+              </div>
             </div>
-          </div>
-        )}
-      </Spring>
+          )}
+        </Spring>
+      </div>
     );
   }
 }

libraries/ui-material/SnackBar/style.js

@@ -8,14 +8,22 @@ const buttonColorContrast = Color(buttonColor).contrast(Color(backgroundColor));
 // Button color can be anything. Fall back to white if accent is too dark.
 const safebuttonColor = buttonColorContrast > 4 ? buttonColor : '#fff';
 
+const container = css({
+  marginTop: 'calc(-80px - var(--footer-height))',
+  position: 'relative',
+  height: 80,
+  overflow: 'hidden',
+  zIndex: 6,
+});
+
 const wrapper = css({
-  top: 0,
+  top: 80,
   display: 'flex',
   justifyContent: 'center',
   left: 0,
   position: 'absolute',
   width: '100%',
-  zIndex: 1,
+  zIndex: 6,
 });
 
 const box = css({
@@ -53,6 +61,7 @@ const button = css({
 });
 
 export default {
+  container,
   wrapper,
   box,
   label,

libraries/ui-shared/Footer/index.jsx

@@ -1,15 +1,18 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Portal from '@shopgate/pwa-common/components/Portal';
+import UIEvents from '@shopgate/pwa-core/emitters/ui';
 import {
   APP_FOOTER_CONTENT_BEFORE,
   APP_FOOTER_CONTENT_AFTER,
 } from '@shopgate/pwa-common/constants/Portals';
-import { getStyle } from '@shopgate/pwa-common/helpers/dom';
+import { getAbsoluteHeight, getStyle } from '@shopgate/pwa-common/helpers/dom';
+import { SHEET_EVENTS } from '../Sheet';
 import {
   footer,
   withInset,
   updateInsetBackgroundColor,
+  updateFooterHeight,
 } from './style';
 
 const APP_FOOTER_ID = 'AppFooter';
@@ -32,14 +35,14 @@ class Footer extends Component {
    * background color, which matches the background color of the last element within the footer.
    */
   componentDidMount() {
-    this.performInsetBackgroundUpdate();
+    this.performFooterUpdate();
 
     const observer = new MutationObserver((mutations) => {
       const update = mutations
         .filter(mutation => mutation.target.getAttribute(DATA_IGNORED) !== 'true').length > 0;
 
       if (update) {
-        this.performInsetBackgroundUpdate();
+        this.performFooterUpdate();
       }
     });
 
@@ -48,6 +51,14 @@ class Footer extends Component {
       childList: true,
       subtree: true,
     });
+    UIEvents.addListener(SHEET_EVENTS.OPEN, this.hide);
+    UIEvents.addListener(SHEET_EVENTS.CLOSE, this.show);
+  }
+
+  /** @inheritDoc */
+  componentWillUnmount() {
+    UIEvents.removeListener(SHEET_EVENTS.OPEN, this.hide);
+    UIEvents.removeListener(SHEET_EVENTS.CLOSE, this.show);
   }
 
   /**
@@ -89,13 +100,28 @@ class Footer extends Component {
     return color || null;
   }
 
+  /** Perform hide action */
+  hide = () => {
+    if (this.ref.current) {
+      updateFooterHeight(0);
+    }
+  }
+
+  /** Perform show action */
+  show = () => {
+    if (this.ref.current) {
+      updateFooterHeight(getAbsoluteHeight(this.ref.current));
+    }
+  }
+
   /**
-   * Performs an update of the inset background color.
+   * Performs an update of the footer: background color, height.
    */
-  performInsetBackgroundUpdate() {
+  performFooterUpdate() {
     if (this.ref.current) {
       this.ref.current.classList.toggle(withInset, this.hasVisibleContent());
 
+      updateFooterHeight(getAbsoluteHeight(this.ref.current));
       updateInsetBackgroundColor(this.getInsetBackgroundColor(this.ref.current.children));
     }
   }

libraries/ui-shared/Footer/index.spec.jsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { updateInsetBackgroundColor } from './style';
+import { getAbsoluteHeight } from '@shopgate/pwa-common/helpers/dom';
+import UIEvents from '@shopgate/pwa-core/emitters/ui';
+import { SHEET_EVENTS } from '../Sheet';
+import { updateInsetBackgroundColor, updateFooterHeight } from './style';
 import Footer from './index';
 
 const mutationConstructorSpy = jest.fn();
@@ -20,9 +23,20 @@ jest.mock('./style', () => {
   return {
     ...actual,
     updateInsetBackgroundColor: jest.fn(),
+    updateFooterHeight: jest.fn(),
+  };
+});
+jest.mock('@shopgate/pwa-core/emitters/ui', () => ({
+  addListener: jest.fn(),
+  removeListener: jest.fn(),
+}));
+jest.mock('@shopgate/pwa-common/helpers/dom', () => {
+  const actual = require.requireActual('@shopgate/pwa-common/helpers/dom');
+  return {
+    ...actual,
+    getAbsoluteHeight: jest.fn(),
   };
 });
-
 jest.mock('@shopgate/pwa-common/components/Portal', () => {
   // eslint-disable-next-line require-jsdoc
   function Portal() {
@@ -34,7 +48,7 @@ jest.mock('@shopgate/pwa-common/components/Portal', () => {
 
 const FOOTER_CHILD_ID = 'footer-child';
 const PORTAL_CONTENT_ID = 'portal-content';
-const insetBackgroundUpdateSpy = jest.spyOn(Footer.prototype, 'performInsetBackgroundUpdate');
+const insetBackgroundUpdateSpy = jest.spyOn(Footer.prototype, 'performFooterUpdate');
 const defaultBackgroundColor = 'red';
 const defaultChildren = (<div
   id={FOOTER_CHILD_ID}
@@ -174,20 +188,20 @@ describe('<Footer />', () => {
     });
   });
 
-  describe('.performInsetBackgroundUpdate()', () => {
+  describe('.performFooterUpdate()', () => {
     it('should do nothing when the ref is empty', () => {
       const wrapper = createComponent();
       wrapper.instance().ref.current = null;
       updateInsetBackgroundColor.mockClear();
-      wrapper.instance().performInsetBackgroundUpdate();
+      wrapper.instance().performFooterUpdate();
       expect(updateInsetBackgroundColor).not.toHaveBeenCalled();
     });
 
     it('should update the inset background color', () => {
       const wrapper = createComponent();
       updateInsetBackgroundColor.mockClear();
       const instance = wrapper.instance();
-      instance.performInsetBackgroundUpdate();
+      instance.performFooterUpdate();
       const backgroundColor = instance.getInsetBackgroundColor(instance.ref.current.children);
       expect(updateInsetBackgroundColor).toHaveBeenCalledTimes(1);
       expect(updateInsetBackgroundColor).toHaveBeenCalledWith(backgroundColor);
@@ -229,4 +243,43 @@ describe('<Footer />', () => {
       expect(insetBackgroundUpdateSpy).not.toHaveBeenCalled();
     });
   });
+
+  describe('UI events subscriptions', () => {
+    it('should subscribe / unsubscribe UI events', () => {
+      const wrapper = mount((
+        <Footer>
+          <div>Footer</div>
+        </Footer>
+      ));
+      const instance = wrapper.instance();
+
+      expect(UIEvents.addListener).toBeCalledTimes(2);
+      expect(UIEvents.addListener).nthCalledWith(1, SHEET_EVENTS.OPEN, instance.hide);
+      expect(UIEvents.addListener).nthCalledWith(2, SHEET_EVENTS.CLOSE, instance.show);
+
+      wrapper.unmount();
+      expect(UIEvents.removeListener).toBeCalledTimes(2);
+      expect(UIEvents.removeListener).nthCalledWith(1, SHEET_EVENTS.OPEN, instance.hide);
+      expect(UIEvents.removeListener).nthCalledWith(2, SHEET_EVENTS.CLOSE, instance.show);
+    });
+  });
+
+  describe('updateFooterHeight', () => {
+    let instance;
+
+    beforeEach(() => {
+      const wrapper = createComponent();
+      instance = wrapper.instance();
+    });
+
+    it('should set footer height to zero', () => {
+      instance.hide();
+      expect(updateFooterHeight).toHaveBeenCalledWith(0);
+    });
+    it('should set footer height', () => {
+      getAbsoluteHeight.mockReturnValueOnce('48px');
+      instance.show();
+      expect(updateFooterHeight).toHaveBeenCalledWith('48px');
+    });
+  });
 });

libraries/ui-shared/Footer/style.js

@@ -12,6 +12,18 @@ export const updateInsetBackgroundColor = (color) => {
   }
 };
 
+/**
+ * Update the footer height
+ * @param {number} height height
+ */
+export const updateFooterHeight = (height) => {
+  const inset = Number(style.getPropertyValue('--safe-area-inset-bottom').replace(/\D/g, ''));
+  const footerHeight = `${inset + height}px`;
+  if (style.getPropertyValue('--footer-height') !== footerHeight) {
+    style.setProperty('--footer-height', footerHeight);
+  }
+};
+
 export const footer = css({
   bottom: 0,
   flexShrink: 1,

libraries/ui-shared/Sheet/index.jsx

@@ -2,11 +2,16 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import throttle from 'lodash/throttle';
 import classNames from 'classnames';
+import UIEvents from '@shopgate/pwa-core/emitters/ui';
 import Backdrop from '@shopgate/pwa-common/components/Backdrop';
 import Drawer from '@shopgate/pwa-common/components/Drawer';
 import Header from './components/Header';
 import styles from './style';
 
+export const SHEET_EVENTS = {
+  OPEN: 'Sheet.open',
+  CLOSE: 'Sheet.close',
+};
 /**
  * Sheet component.
  */
@@ -101,6 +106,17 @@ class Sheet extends Component {
     });
   };
 
+  /** The Sheet is opened */
+  handleDidOpen = () => {
+    UIEvents.emit(SHEET_EVENTS.OPEN);
+    this.props.onDidOpen();
+  };
+
+  /** The Sheet is closed */
+  handleDidClose = () => {
+    UIEvents.emit(SHEET_EVENTS.CLOSE);
+  };
+
   /**
    * Close the Sheet.
    */
@@ -143,7 +159,8 @@ class Sheet extends Component {
         <Drawer
           className={drawerClassNames}
           isOpen={this.state.isOpen}
-          onDidOpen={this.props.onDidOpen}
+          onDidOpen={this.handleDidOpen}
+          onDidClose={this.handleDidClose}
           onOpen={this.props.onOpen}
           onClose={this.handleClose}
           animation={this.animationProps}