@s-ui/react-atom-toast - npm Package Compare versions

Comparing version 1.7.0 to 1.8.0

lib/styles/index.scss

+$base-class: '.sui-AtomToast';
+
+#{$base-class} {
+  $self: &;
+  background-color: $bgc-atom-toast;
+  border-radius: $bdrs-atom-toast;
+  border: $bd-atom-toast;
+  box-shadow: $bxsh-atom-toast;
+  color: $c-atom-toast-text;
+  font-size: $fz-atom-toast;
+  overflow: hidden;
+
+  &-container {
+    margin: $m-atom-toast;
+    position: fixed;
+    z-index: $z-notifications;
+  }
+
+  &-icon {
+    cursor: pointer;
+    margin: $m-s;
+    position: absolute;
+    right: 0;
+
+    svg {
+      fill: $c-atom-toast-icon !important;
+      height: $sz-icon-s;
+      width: $sz-icon-s;
+    }
+  }
+
+  // Position
+  &-position {
+    &--bottom,
+    &--bottom-right,
+    &--bottom-left {
+      bottom: 0;
+    }
+
+    &--top,
+    &--top-right,
+    &--top-left {
+      top: 0;
+    }
+
+    &--bottom,
+    &--top {
+      left: 50%;
+
+      #{$self} {
+        left: -50%;
+        position: relative;
+      }
+    }
+
+    &--bottom-right,
+    &--top-right {
+      right: 0;
+    }
+
+    &--bottom-left,
+    &--top-left {
+      left: 0;
+    }
+  }
+
+  // Effect
+  &-effect {
+    &--top {
+      transition: $toast-effect-slide-top-in;
+    }
+
+    &--top#{&}--hide {
+      top: -50%;
+      transition: $toast-effect-slide-top-out;
+    }
+
+    &--bottom {
+      transition: $toast-effect-slide-bottom-in;
+    }
+
+    &--bottom#{&}--hide {
+      bottom: -50%;
+      transition: $toast-effect-slide-bottom-out;
+    }
+
+    &--top-right,
+    &--bottom-right {
+      transition: $toast-effect-slide-right-in;
+    }
+
+    &--top-right#{&}--hide,
+    &--bottom-right#{&}--hide {
+      right: -100vh;
+      transition: $toast-effect-slide-right-out;
+    }
+
+    &--top-left,
+    &--bottom-left {
+      transition: $toast-effect-slide-left-in;
+    }
+
+    &--top-left#{&}--hide,
+    &--bottom-left#{&}--hide {
+      left: -100vh;
+      transition: $toast-effect-slide-left-out;
+    }
+  }
+}

lib/styles/settings.scss

+@import '../_settings.scss';

lib/_settings.scss

@@ -1,2 +0,2 @@
-$bd-atom-toast: 1px solid $c-gray !default;
+$bd-atom-toast: $bdw-s solid $c-gray !default;
 $bdrs-atom-toast: $bdrs-m !default;
@@ -3,0 +3,0 @@ $bgc-atom-toast: $c-white !default;

lib/config.js

 export var BASE_CLASS = 'sui-AtomToast';
 export var POSITIONS = {
+  topLeft: 'top-left',
+  top: 'top',
+  topRight: 'top-right',
+  bottomLeft: 'bottom-left',
   bottom: 'bottom',
-  bottomLeft: 'bottom-left',
-  bottomRight: 'bottom-right',
-  top: 'top',
-  topLeft: 'top-left',
-  topRight: 'top-right'
+  bottomRight: 'bottom-right'
 };
@@ -10,0 +10,0 @@ export var AUTO_CLOSE_TIMES = {

lib/index.js

@@ -1,7 +0,7 @@
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
 import { useState, useEffect, useRef, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { AUTO_CLOSE_TIMES, BASE_CLASS, EFFECT_DELAY, POSITIONS } from './config';
+import { AUTO_CLOSE_TIMES, BASE_CLASS, EFFECT_DELAY, POSITIONS } from './config.js';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 
@@ -22,4 +22,3 @@ function AtomToast(_ref) {
       iconClose = _ref$iconClose === void 0 ? null : _ref$iconClose,
-      _ref$onClose = _ref.onClose,
-      onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
+      onClose = _ref.onClose,
       _ref$position = _ref.position,
@@ -45,3 +44,3 @@ position = _ref$position === void 0 ? POSITIONS.topRight : _ref$position,
     setShow(false);
-    if (!effect) onClose();
+    if (!effect && typeof onClose === 'function') onClose();
   }, [effect, onClose]);
@@ -74,3 +73,3 @@ useEffect(function () {
         setDelay(false);
-        onClose();
+        typeof onClose === 'function' && onClose();
       }, EFFECT_DELAY.close);
@@ -77,0 +76,0 @@ }

lib/index.scss

 @import '~@s-ui/theme/lib/index';
-@import './settings';
 
-.sui-AtomToast {
-  $self: &;
-  background-color: $bgc-atom-toast;
-  border-radius: $bdrs-atom-toast;
-  border: $bd-atom-toast;
-  box-shadow: $bxsh-atom-toast;
-  color: $c-atom-toast-text;
-  font-size: $fz-atom-toast;
-  overflow: hidden;
-
-  &-container {
-    margin: $m-atom-toast;
-    position: fixed;
-    z-index: $z-notifications;
-  }
-
-  &-icon {
-    cursor: pointer;
-    margin: $m-s;
-    position: absolute;
-    right: 0;
-
-    svg {
-      fill: $c-atom-toast-icon !important;
-      height: $sz-icon-s;
-      width: $sz-icon-s;
-    }
-  }
-
-  // Position
-  &-position {
-    &--bottom,
-    &--bottom-right,
-    &--bottom-left {
-      bottom: 0;
-    }
-
-    &--top,
-    &--top-right,
-    &--top-left {
-      top: 0;
-    }
-
-    &--bottom,
-    &--top {
-      left: 50%;
-
-      #{$self} {
-        left: -50%;
-        position: relative;
-      }
-    }
-
-    &--bottom-right,
-    &--top-right {
-      right: 0;
-    }
-
-    &--bottom-left,
-    &--top-left {
-      left: 0;
-    }
-  }
-
-  // Effect
-  &-effect {
-    &--top {
-      transition: $toast-effect-slide-top-in;
-    }
-
-    &--top#{&}--hide {
-      top: -50%;
-      transition: $toast-effect-slide-top-out;
-    }
-
-    &--bottom {
-      transition: $toast-effect-slide-bottom-in;
-    }
-
-    &--bottom#{&}--hide {
-      bottom: -50%;
-      transition: $toast-effect-slide-bottom-out;
-    }
-
-    &--top-right,
-    &--bottom-right {
-      transition: $toast-effect-slide-right-in;
-    }
-
-    &--top-right#{&}--hide,
-    &--bottom-right#{&}--hide {
-      right: -100vh;
-      transition: $toast-effect-slide-right-out;
-    }
-
-    &--top-left,
-    &--bottom-left {
-      transition: $toast-effect-slide-left-in;
-    }
-
-    &--top-left#{&}--hide,
-    &--bottom-left#{&}--hide {
-      left: -100vh;
-      transition: $toast-effect-slide-left-out;
-    }
-  }
-}
+@import './styles/settings.scss';
+@import './styles/index.scss';

package.json

 {
   "name": "@s-ui/react-atom-toast",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
-    "prepare": "npx rimraf ./lib && npx mkdirp ./lib && npm run build:js && npm run build:styles",
-    "build:js": "../../../node_modules/.bin/babel --presets sui ./src --out-dir ./lib",
-    "build:styles": "../../../node_modules/.bin/cpx './src/**/*.scss' ./lib"
+    "prepublishOnly": "rimraf ./lib && npm run build:js && npm run build:styles",
+    "build:js": "babel --presets sui ./src --out-dir ./lib",
+    "build:styles": "cpx './src/**/*.scss' ./lib"
   },
@@ -11,0 +11,0 @@ "dependencies": {

CHANGELOG.md

-# Change Log
-
-All notable changes to this project will be documented in this file.
-
-# 1.5.0 (2020-05-29)
-
-
-### Features
-
-* add assets folder to .npmignore ([7a77fbc](https://github.com/SUI-Components/sui-components/commit/7a77fbcb2358ea9f74991efe723741e992c3be34))
-
-
-
-# 1.4.0 (2020-03-11)
-
-
-### Features
-
-* Use new [@s-ui-theme](https://github.com/s-ui-theme) ([af2568e](https://github.com/SUI-Components/sui-components/commit/af2568e484894fa3c307496bfe2523e890b27d66))
-
-
-
-# 1.3.0 (2019-11-26)
-
-
-### Features
-
-* add variable sass ([4e2efa5](https://github.com/SUI-Components/sui-components/commit/4e2efa5c5f4cc2bc23706aa640028286337630a7))
-
-
-
-# 1.2.0 (2019-11-25)
-
-
-### Bug Fixes
-
-* fix readme ([c729122](https://github.com/SUI-Components/sui-components/commit/c729122cbf9d5c64ca864abe16828e1eedddfc2f))
-* remove size vars ([7894927](https://github.com/SUI-Components/sui-components/commit/78949271875c8919e946dcea5dbccc481bbfb512))
-
-
-
-# 1.1.0 (2019-11-20)
-
-
-### Features
-
-* add auto close ([b046af1](https://github.com/SUI-Components/sui-components/commit/b046af1c850520364484390b5b8b42595a51bd62))
-* add auto close time ([d608c9d](https://github.com/SUI-Components/sui-components/commit/d608c9d238f7104ee380ca0dc75b8ef0ce783545))
-* add cross icon ([c5a5ad3](https://github.com/SUI-Components/sui-components/commit/c5a5ad382a844aaf8693ba93c5c51643d8d97e8e))
-* add cross to close ([7cd01c5](https://github.com/SUI-Components/sui-components/commit/7cd01c59f09a96ad361d639c113e9ac6c6b2aea9))
-* add effect ([ad0f91e](https://github.com/SUI-Components/sui-components/commit/ad0f91e83b6bd2a75bc1b7ee781523725eacdcb2))
-* add global close ([c8d8ea2](https://github.com/SUI-Components/sui-components/commit/c8d8ea2e8b42d8cb5cf9da57bb66cf655f79c658))
-* add margin ([9f5da59](https://github.com/SUI-Components/sui-components/commit/9f5da595b14db2fa74488ac843c81d3427fe586b))
-* add position ([2de187b](https://github.com/SUI-Components/sui-components/commit/2de187bfcd613a4f605ca7d1d47a5b47f880f088))
-* add sizes ([2e6e509](https://github.com/SUI-Components/sui-components/commit/2e6e50907c3db45f2c79466030881224b41fbad8))
-* comments PR ([7640afa](https://github.com/SUI-Components/sui-components/commit/7640afa9079f11dd703944e703dfb654c3f97fbf))
-* delete ([1f8204f](https://github.com/SUI-Components/sui-components/commit/1f8204f9072cceeccf62bcec16fcec61db0cb64b))
-* delete Sizes witdh and height Toast ([214fdee](https://github.com/SUI-Components/sui-components/commit/214fdee741db347512294f23534c46dc092af19a))
-* fix lint ([aa71882](https://github.com/SUI-Components/sui-components/commit/aa718827ba51e0f3d597df698cdfc5f931703837))
-* fix mobile effect ([6d0461f](https://github.com/SUI-Components/sui-components/commit/6d0461fc41ce6dc772cc2d6d0fddb3cb2a93d5da))
-* fix styles ([9bae8eb](https://github.com/SUI-Components/sui-components/commit/9bae8eb791d899160af042dcf478fa665f385234))
-* generate component ([338eff4](https://github.com/SUI-Components/sui-components/commit/338eff4927ea37496a19beabeb0adbf60dec7b9e))
-* move params to config ([46cf5b4](https://github.com/SUI-Components/sui-components/commit/46cf5b42f4ea7cf54634cbff8ed94ab7a3f79a14))
-* readme and rename config vars ([e838dfd](https://github.com/SUI-Components/sui-components/commit/e838dfd20ce90a0ba3ae3c5a3d85f80ce25b000d))
-* sort scss vars ([d52cb14](https://github.com/SUI-Components/sui-components/commit/d52cb14caca2a07109fb0bc9b642cb423543ac31))
-
-
-

No alert changes

Improved metrics

Number of package files

8

14.29%

Worsened metrics

Total package byte prevSize

7786

-30.31%

Lines of code

115

-0.86%

No dependency changes