toast-me - npm Package Compare versions

Comparing version 1.0.18 to 1.0.19

package.json

 {
   "name": "toast-me",
-  "version": "1.0.18",
+  "version": "1.0.19",
   "description": "Creates toast messages",
@@ -5,0 +5,0 @@ "main": "lib/toast-me.min.js",

README.md

@@ -22,3 +22,4 @@ # toast-me
   * [Action argument](#action-argument)
-
+* [Instance of ToastMeClass](#instance-of-toastmeclass)
+* [class ToastMeClass](#class-toastmeclass)
 * [Contributing](#contributing)
@@ -28,10 +29,3 @@ * [Getting started](#getting-started)
   * [Structure](#structure)
-    * [Files structure](#files-structure)
-    * [Path alias](#path-alias)
-    * [Git repository architecture](#git-repository-architecture)
-    * [Redux state](#redux-state)
-  * [Dependencies](#dependencies)
-  * [API](#api)
-  * [Guidelines](#guidelines)
-  * [Useful links](#useful-links)
+  * [Readings](#readings)
 
@@ -44,2 +38,3 @@ ## Features
 * Supports actions
+* Pauses toast on hover
 
@@ -70,2 +65,27 @@ ## How to use
 
+#### Using with own customization and action button
+```javascript
+toast(
+  'My message',
+  { duration: 1000 },
+  {
+    label: 'Confirm',
+    action: () => alert('Cool!'),
+    class: 'my-custom-class', // optional
+  },
+);
+```
+
+#### Using with action button but no customizations
+```javascript
+toast(
+  'My message',
+  null,
+  {
+    label: 'Confirm',
+    action: () => alert('Cool!'),
+  },
+);
+```
+
 ## Toast function arguments
@@ -80,2 +100,4 @@ ```javascript
 
+Returns instance of ToastMeClass. You can learn method of it [here]()
+
 #### Message argument
@@ -94,2 +116,13 @@
 ##### Accepted options
+Default options preset (all available options with their default values):
+```javascript
+{
+  position: 'top',
+  toastClass: '',
+  removedToastClass: '',
+  closeable: true,
+  timeoutOnRemove: 1000,
+  duration: 5000,
+}
+```
 * `position` - *string*, one of `"top"` `"bottom"`. Default `"top"`.
@@ -117,10 +150,30 @@ * `toastClass` - *string*, CSS class name for toast node, can be used for custom toast styling.
 
+## Instance of ToastMeClass
+Has methods:
+* `close()` - Closes current toast.
+* `startTimer()` - Starts/restarts timer with timeout, set in options object on toast create.
+* `stopTimer()` - Stops timer, the toast won't disappear. After calling this
+                  you should handle toast's behavior by yourself
+                  (i.e. with `close()` method).
+```javascript
+import toast from 'toast-me';
 
-#Contributing
+const message = toast('Something');
+// ...
+message.stopTimer();
+// ...
+message.close();
+```
 
-%%%%%%%%%%%%%%%%%%%%%%%%%
+## class ToastMeClass
+Has static methods:
+* `removeAll(position)` - Closes all toasts in that position. Accepts one argument
+                          `position`, default `"top"` (described in [options section](#accepted-options))
+```javascript
+import { ToastMeClass } from 'toast-me';
 
-SECTION BELOW IS IN WORK
+ToastMeClass.removeAll('bottom');
+```
 
-%%%%%%%%%%%%%%%%%%%%%%%%%
+#Contributing
 
@@ -127,0 +180,0 @@ ## Getting started

src/toastMe.js

@@ -19,16 +19,17 @@ // @flow
   ) {
-    ToastMeClass.removeAll();
-
-    let options = {};
+    let options = { ...ToastOptions.default };
     if (typeof receivedOptions === 'string' && ToastOptions[receivedOptions]) {
-      options = ToastOptions[receivedOptions];
+      options = { ...options, ...ToastOptions[receivedOptions] };
     } else if (typeof receivedOptions === 'object') {
-      options = receivedOptions
+      options = { ...options, ...receivedOptions };
     }
 
-    this.options = { ...ToastOptions.default, ...options };
+    ToastMeClass.removeAll(options.position);
+
+    this.options = options;
     this.content = content;
-    this.container = ToastMeClass.getContainer(this.options.position);
+    ToastMeClass
+      .getContainer(options.position)
+      .appendChild(this.domNode);
     this.domNode = this.createToastNode(action);
-    this.container.appendChild(this.domNode);
     this.startTimer();
@@ -41,4 +42,2 @@ }
 
-  container: Element;
-
   domNode: Element;
@@ -97,18 +96,16 @@
   static getContainer(position): Element {
-    let node = document.querySelector(`.${styles.container}`);
+    const onBottom = position === 'bottom';
+    const selector = `.${styles.container} ${onBottom ? `.${styles.bottom}` : ''}`;
+    let node = document.querySelector(selector);
     if (!node) {
       node = document.createElement('div');
       node.classList.add(styles.container);
+      if (onBottom) node.classList.add(styles.bottom);
       document.body.appendChild(node);
     }
-    if (position !== 'bottom' && node.classList.contains('bottom')) {
-      node.classList.remove(styles.bottom);
-    } else if (position === 'bottom' && !node.classList.contains('bottom')) {
-      node.classList.add(styles.bottom);
-    }
     return node;
   }
 
-  static removeAll() {
-    const node = ToastMeClass.getContainer();
+  static removeAll(position) {
+    const node = ToastMeClass.getContainer(position);
     const closeButtons = node.querySelectorAll(`.${styles.close}`);
@@ -136,2 +133,3 @@ for (let i = 0, l = closeButtons.length; i < l; i += 1) {
   startTimer() {
+    this.stopTimer();
     this.timerShow = setTimeout(
@@ -138,0 +136,0 @@ () => this.close(),

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

346546

increased by0.36%

Number of lines in readme file

213

increased by33.13%

Worsened metrics

Lines of code

212

decreased by-0.47%

No dependency changes