Make EuiGlobalToastList responsible for managing the lifetime and dis…

…missal of its toasts.
elastic · Feb 5, 2018 · b799d5c · b799d5c
1 parent 6a9d9c0
commit b799d5c
Show file tree

Hide file tree

Showing 5 changed files with 309 additions and 120 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,10 @@
   - Deleting selected items now resets the select all checkbox to an unchecked state
   - The select all checkbox only becomes checked when all selectable rows are checked, not just some of them
 
+**Breaking changes**
+
+- Changed `<EuiGlobalToastList>` to be responsible for instantiating toasts, tracking their lifetimes, and dismissing them. It now acepts `toasts`, `dismissToast`, and `toastLifeTimeMs` props. It no longer accepts `children`. ([]())
+
 # [`0.0.18`](https://github.com/elastic/eui/tree/v0.0.18)
 
 **Bug fixes**
@@ -21,7 +25,7 @@
 # [`0.0.16`](https://github.com/elastic/eui/tree/v0.0.16)
 
 - `EuiRadio` now supports the `input` tag's `name` attribute. `EuiRadioGroup` accepts a `name` prop that will propagate to its `EuiRadio`s. ([#348](https://github.com/elastic/eui/pull/348))
-- Machine Learning create jobs icon set. ([#338](https://github.com/elastic/eui/pull/338))
+- Added Machine Learning create jobs icon set. ([#338](https://github.com/elastic/eui/pull/338))
 - Added `EuiTableOfRecords`, a higher level table component to take away all your table listings frustrations. ([#250](https://github.com/elastic/eui/pull/250))
 
 **Bug fixes**

diff --git a/src-docs/src/views/toast/toast_list.js b/src-docs/src/views/toast/toast_list.js
@@ -1,22 +1,16 @@
 import React, {
-  cloneElement,
   Component,
+  Fragment,
 } from 'react';
 
 import {
   EuiGlobalToastList,
-  EuiGlobalToastListItem,
   EuiLink,
-  EuiToast,
 } from '../../../../src/components';
 
-const TOAST_LIFE_TIME_MS = 4000;
-const TOAST_FADE_OUT_MS = 250;
-let toastIdCounter = 0;
-const timeoutIds = [];
-
 let addToastHandler;
 let removeAllToastsHandler;
+let toastId = 0;
 
 export function addToast() {
   addToastHandler();
@@ -39,45 +33,14 @@ export default class extends Component {
   }
 
   addToast = () => {
-    const {
-      toast,
-      toastId,
-    } = this.renderRandomToast();
+    const toast = this.getRandomToast();
 
     this.setState({
       toasts: this.state.toasts.concat(toast),
     });
-
-    this.scheduleToastForDismissal(toastId);
-  };
-
-  scheduleToastForDismissal = (toastId, isImmediate = false) => {
-    const lifeTime = isImmediate ? TOAST_FADE_OUT_MS : TOAST_LIFE_TIME_MS;
-
-    timeoutIds.push(setTimeout(() => {
-      this.dismissToast(toastId);
-    }, lifeTime));
-
-    timeoutIds.push(setTimeout(() => {
-      this.startDismissingToast(toastId);
-    }, lifeTime - TOAST_FADE_OUT_MS));
   };
 
-  startDismissingToast(toastId) {
-    this.setState({
-      toasts: this.state.toasts.map(toast => {
-        if (toast.key === toastId) {
-          return cloneElement(toast, {
-            isDismissed: true,
-          });
-        }
-
-        return toast;
-      }),
-    });
-  }
-
-  dismissToast(toastId) {
+  removeToast(toastId) {
     this.setState({
       toasts: this.state.toasts.filter(toast => toast.key !== toastId),
     });
@@ -89,80 +52,66 @@ export default class extends Component {
     });
   };
 
-  componentWillUnmount() {
-    timeoutIds.forEach(timeoutId => clearTimeout(timeoutId));
-  }
-
-  renderRandomToast = () => {
-    const toastId = (toastIdCounter++).toString();
-    const dismissToast = () => this.scheduleToastForDismissal(toastId, true);
-
-    const toasts = [
-      (
-        <EuiToast
-          title="Check it out, here's a really long title that will wrap within a narrower browser"
-          onClose={dismissToast}
-        >
+  getRandomToast = () => {
+    const toasts = [{
+      title: `Check it out, here's a really long title that will wrap within a narrower browser`,
+      text: (
+        <Fragment>
           <p>
             Here&rsquo;s some stuff that you need to know. We can make this text really long so that,
             when viewed within a browser that&rsquo;s fairly narrow, it will wrap, too.
           </p>
           <p>
             And some other stuff on another line, just for kicks. And <EuiLink href="#">here&rsquo;s a link</EuiLink>.
           </p>
-        </EuiToast>
-      ), (
-        <EuiToast
-          title="Download complete!"
-          color="success"
-          onClose={dismissToast}
-        >
-          <p>
-            Thanks for your patience!
-          </p>
-        </EuiToast>
-      ), (
-        <EuiToast
-          title="Logging you out soon, due to inactivity"
-          color="warning"
-          iconType="user"
-          onClose={dismissToast}
-        >
+        </Fragment>
+      ),
+    }, {
+      title: 'Download complete!',
+      color: 'success',
+      text: (
+        <p>
+          Thanks for your patience!
+        </p>
+      ),
+    }, {
+      title: 'Logging you out soon, due to inactivity',
+      color: 'warning',
+      iconType: 'user',
+      text: (
+        <Fragment>
           <p>
             This is a security measure.
           </p>
           <p>
             Please move your mouse to show that you&rsquo;re still using Kibana.
           </p>
-        </EuiToast>
-      ), (
-        <EuiToast
-          title="Oops, there was an error"
-          color="danger"
-          iconType="help"
-          onClose={dismissToast}
-        >
-          <p>
-            Sorry. We&rsquo;ll try not to let it happen it again.
-          </p>
-        </EuiToast>
+        </Fragment>
       ),
-    ];
-
-    const toast = (
-      <EuiGlobalToastListItem key={toastId}>
-        {toasts[Math.floor(Math.random() * toasts.length)]}
-      </EuiGlobalToastListItem>
-    );
+    }, {
+      title: 'Oops, there was an error',
+      color: 'danger',
+      iconType: 'help',
+      text: (
+        <p>
+          Sorry. We&rsquo;ll try not to let it happen it again.
+        </p>
+      ),
+    }];
 
-    return { toast, toastId };
+    return {
+      id: toastId++,
+      ...toasts[Math.floor(Math.random() * toasts.length)],
+    };
   };
 
   render() {
     return (
-      <EuiGlobalToastList>
-        {this.state.toasts}
-      </EuiGlobalToastList>
+      <EuiGlobalToastList
+        toasts={this.state.toasts}
+        dismissToast={this.removeToast}
+        toastLifeTimeMs={6000}
+      />
     );
   }
 }
diff --git a/src/components/toast/__snapshots__/global_toast_list.test.js.snap b/src/components/toast/__snapshots__/global_toast_list.test.js.snap
@@ -5,9 +5,135 @@ exports[`EuiGlobalToastList is rendered 1`] = `
   aria-label="aria-label"
   class="euiGlobalToastList testClass1 testClass2"
   data-test-subj="test subject string"
+/>
+`;
+
+exports[`EuiGlobalToastList props toasts is rendered 1`] = `
+<div
+  class="euiGlobalToastList"
 >
-  <div>
-    hi
+  <div
+    class="euiToast euiGlobalToastListItem"
+    id="A"
+  >
+    <div
+      class="euiToastHeader"
+    >
+      <span
+        class="euiToastHeader__title"
+      >
+        A
+      </span>
+    </div>
+    <button
+      aria-label="Dismiss toast"
+      class="euiToast__closeButton"
+      data-test-subj="toastCloseButton"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        class="euiIcon euiIcon--medium"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
+        xlink="http://www.w3.org/1999/xlink"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <defs>
+          <path
+            d="M7.293 8l-4.147 4.146a.5.5 0 0 0 .708.708L8 8.707l4.146 4.147a.5.5 0 0 0 .708-.708L8.707 8l4.147-4.146a.5.5 0 0 0-.708-.708L8 7.293 3.854 3.146a.5.5 0 1 0-.708.708L7.293 8z"
+            id="cross-a"
+          />
+        </defs>
+        <use
+          fill-rule="nonzero"
+          href="#cross-a"
+        />
+      </svg>
+    </button>
+  </div>
+  <div
+    class="euiToast euiGlobalToastListItem"
+    id="B"
+  >
+    <div
+      class="euiToastHeader"
+    >
+      <span
+        class="euiToastHeader__title"
+      >
+        B
+      </span>
+    </div>
+    <button
+      aria-label="Dismiss toast"
+      class="euiToast__closeButton"
+      data-test-subj="toastCloseButton"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        class="euiIcon euiIcon--medium"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
+        xlink="http://www.w3.org/1999/xlink"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <defs>
+          <path
+            d="M7.293 8l-4.147 4.146a.5.5 0 0 0 .708.708L8 8.707l4.146 4.147a.5.5 0 0 0 .708-.708L8.707 8l4.147-4.146a.5.5 0 0 0-.708-.708L8 7.293 3.854 3.146a.5.5 0 1 0-.708.708L7.293 8z"
+            id="cross-a"
+          />
+        </defs>
+        <use
+          fill-rule="nonzero"
+          href="#cross-a"
+        />
+      </svg>
+    </button>
+  </div>
+  <div
+    class="euiToast euiGlobalToastListItem"
+    id="C"
+  >
+    <div
+      class="euiToastHeader"
+    >
+      <span
+        class="euiToastHeader__title"
+      >
+        C
+      </span>
+    </div>
+    <button
+      aria-label="Dismiss toast"
+      class="euiToast__closeButton"
+      data-test-subj="toastCloseButton"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        class="euiIcon euiIcon--medium"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
+        xlink="http://www.w3.org/1999/xlink"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <defs>
+          <path
+            d="M7.293 8l-4.147 4.146a.5.5 0 0 0 .708.708L8 8.707l4.146 4.147a.5.5 0 0 0 .708-.708L8.707 8l4.147-4.146a.5.5 0 0 0-.708-.708L8 7.293 3.854 3.146a.5.5 0 1 0-.708.708L7.293 8z"
+            id="cross-a"
+          />
+        </defs>
+        <use
+          fill-rule="nonzero"
+          href="#cross-a"
+        />
+      </svg>
+    </button>
   </div>
 </div>
 `;