@semcore/spin - npm Package Compare versions

Comparing version 3.1.1 to 3.2.0

CHANGELOG.md

@@ -5,3 +5,3 @@ # Changelog
 
-## [3.1.1] - 2021-05-14
+## [3.2.0] - 2021-05-17
 
@@ -11,4 +11,7 @@ ### Fixed
 - Fixed animation
-- Rewrite code from TS to JS
 
+### Changed
+
+- Rewrite code from TS to JS 👩‍💻
+
 ## [3.1.0] - 2020-12-17
@@ -15,0 +18,0 @@

lib/cjs/Spin.js

@@ -45,33 +45,22 @@ "use strict";
 /*__inner_css_start__*/
-"@-webkit-keyframes spin-rotate_10k33rc{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes spin-rotate_10k33rc{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.___SSpin_qgxcd_gg_{display:block;flex-shrink:0;box-sizing:border-box;-webkit-animation-name:spin-rotate_10k33rc;animation-name:spin-rotate_10k33rc;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-duration:.75s;animation-duration:.75s;border-radius:50%;border-style:solid;border-bottom-color:transparent;border-left-color:transparent;color:var(--color_10k33rc)}.___SSpin_qgxcd_gg_._theme_dark_qgxcd_gg_{color:rgba(0,0,0,.3)}.___SSpin_qgxcd_gg_._theme_invert_qgxcd_gg_{color:#fff}.___SSpin_qgxcd_gg_.__centered_qgxcd_gg_{margin:auto}.___SSpin_qgxcd_gg_._size_xxs_qgxcd_gg_{width:10px;height:10px;border-width:1px}.___SSpin_qgxcd_gg_._size_xs_qgxcd_gg_{width:16px;height:16px;border-width:2px}.___SSpin_qgxcd_gg_._size_s_qgxcd_gg_{width:20px;height:20px;border-width:3px}.___SSpin_qgxcd_gg_._size_m_qgxcd_gg_{width:24px;height:24px;border-width:4px}.___SSpin_qgxcd_gg_._size_l_qgxcd_gg_{width:32px;height:32px;border-width:6px}.___SSpin_qgxcd_gg_._size_xl_qgxcd_gg_{width:48px;height:48px;border-width:8px}.___SSpin_qgxcd_gg_._size_xxl_qgxcd_gg_{width:72px;height:72px;border-width:10px}"
+"@-webkit-keyframes spin-rotate_jbivl0{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes spin-rotate_jbivl0{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.___SSpin_xek18_gg_{display:block;flex-shrink:0;box-sizing:border-box;-webkit-animation-name:spin-rotate_jbivl0;animation-name:spin-rotate_jbivl0;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-duration:.75s;animation-duration:.75s;border-radius:50%;border-style:solid;border-bottom-color:transparent;border-left-color:transparent;color:var(--theme_jbivl0)}.___SSpin_xek18_gg_._theme_dark_xek18_gg_{color:rgba(0,0,0,.3)}.___SSpin_xek18_gg_._theme_invert_xek18_gg_{color:#fff}.___SSpin_xek18_gg_.__centered_xek18_gg_{margin:auto}.___SSpin_xek18_gg_._size_xxs_xek18_gg_{width:10px;height:10px;border-width:1px}.___SSpin_xek18_gg_._size_xs_xek18_gg_{width:16px;height:16px;border-width:2px}.___SSpin_xek18_gg_._size_s_xek18_gg_{width:20px;height:20px;border-width:3px}.___SSpin_xek18_gg_._size_m_xek18_gg_{width:24px;height:24px;border-width:4px}.___SSpin_xek18_gg_._size_l_xek18_gg_{width:32px;height:32px;border-width:6px}.___SSpin_xek18_gg_._size_xl_xek18_gg_{width:48px;height:48px;border-width:8px}.___SSpin_xek18_gg_._size_xxl_xek18_gg_{width:72px;height:72px;border-width:10px}"
 /*__inner_css_end__*/
-, "10k33rc_gg_")
+, "jbivl0_gg_")
 /*__reshadow_css_end__*/
 , {
-  "@spin-rotate": "spin-rotate_10k33rc",
-  "__SSpin": "___SSpin_qgxcd_gg_",
-  "--color": "--color_10k33rc",
-  "_theme_dark": "_theme_dark_qgxcd_gg_",
-  "_theme_invert": "_theme_invert_qgxcd_gg_",
-  "_centered": "__centered_qgxcd_gg_",
-  "_size_xxs": "_size_xxs_qgxcd_gg_",
-  "_size_xs": "_size_xs_qgxcd_gg_",
-  "_size_s": "_size_s_qgxcd_gg_",
-  "_size_m": "_size_m_qgxcd_gg_",
-  "_size_l": "_size_l_qgxcd_gg_",
-  "_size_xl": "_size_xl_qgxcd_gg_",
-  "_size_xxl": "_size_xxl_qgxcd_gg_"
+  "@spin-rotate": "spin-rotate_jbivl0",
+  "__SSpin": "___SSpin_xek18_gg_",
+  "--theme": "--theme_jbivl0",
+  "_theme_dark": "_theme_dark_xek18_gg_",
+  "_theme_invert": "_theme_invert_xek18_gg_",
+  "_centered": "__centered_xek18_gg_",
+  "_size_xxs": "_size_xxs_xek18_gg_",
+  "_size_xs": "_size_xs_xek18_gg_",
+  "_size_s": "_size_s_xek18_gg_",
+  "_size_m": "_size_m_xek18_gg_",
+  "_size_l": "_size_l_xek18_gg_",
+  "_size_xl": "_size_xl_xek18_gg_",
+  "_size_xxl": "_size_xxl_xek18_gg_"
 });
 
-function getThemeColor(theme) {
-  switch (theme) {
-    case 'dark':
-    case 'invert':
-      return 'currentColor';
-
-    default:
-      return (0, _color["default"])(theme);
-  }
-}
-
 var RootSpin = /*#__PURE__*/function (_Component) {
@@ -98,4 +87,3 @@ (0, _inherits2["default"])(RootSpin, _Component);
       return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SSpin, _ref2.cn("SSpin", _objectSpread({}, (0, _core.assignProps)({
-        "theme": theme,
-        "color": getThemeColor(theme)
+        "use:theme": (0, _color["default"])(theme)
       }, _ref))));
@@ -102,0 +90,0 @@ }

lib/es6/Spin.js

@@ -28,33 +28,22 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 /*__inner_css_start__*/
-"@-webkit-keyframes spin-rotate_10k33rc{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes spin-rotate_10k33rc{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.___SSpin_qgxcd_gg_{display:block;flex-shrink:0;box-sizing:border-box;-webkit-animation-name:spin-rotate_10k33rc;animation-name:spin-rotate_10k33rc;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-duration:.75s;animation-duration:.75s;border-radius:50%;border-style:solid;border-bottom-color:transparent;border-left-color:transparent;color:var(--color_10k33rc)}.___SSpin_qgxcd_gg_._theme_dark_qgxcd_gg_{color:rgba(0,0,0,.3)}.___SSpin_qgxcd_gg_._theme_invert_qgxcd_gg_{color:#fff}.___SSpin_qgxcd_gg_.__centered_qgxcd_gg_{margin:auto}.___SSpin_qgxcd_gg_._size_xxs_qgxcd_gg_{width:10px;height:10px;border-width:1px}.___SSpin_qgxcd_gg_._size_xs_qgxcd_gg_{width:16px;height:16px;border-width:2px}.___SSpin_qgxcd_gg_._size_s_qgxcd_gg_{width:20px;height:20px;border-width:3px}.___SSpin_qgxcd_gg_._size_m_qgxcd_gg_{width:24px;height:24px;border-width:4px}.___SSpin_qgxcd_gg_._size_l_qgxcd_gg_{width:32px;height:32px;border-width:6px}.___SSpin_qgxcd_gg_._size_xl_qgxcd_gg_{width:48px;height:48px;border-width:8px}.___SSpin_qgxcd_gg_._size_xxl_qgxcd_gg_{width:72px;height:72px;border-width:10px}"
+"@-webkit-keyframes spin-rotate_jbivl0{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes spin-rotate_jbivl0{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.___SSpin_xek18_gg_{display:block;flex-shrink:0;box-sizing:border-box;-webkit-animation-name:spin-rotate_jbivl0;animation-name:spin-rotate_jbivl0;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-duration:.75s;animation-duration:.75s;border-radius:50%;border-style:solid;border-bottom-color:transparent;border-left-color:transparent;color:var(--theme_jbivl0)}.___SSpin_xek18_gg_._theme_dark_xek18_gg_{color:rgba(0,0,0,.3)}.___SSpin_xek18_gg_._theme_invert_xek18_gg_{color:#fff}.___SSpin_xek18_gg_.__centered_xek18_gg_{margin:auto}.___SSpin_xek18_gg_._size_xxs_xek18_gg_{width:10px;height:10px;border-width:1px}.___SSpin_xek18_gg_._size_xs_xek18_gg_{width:16px;height:16px;border-width:2px}.___SSpin_xek18_gg_._size_s_xek18_gg_{width:20px;height:20px;border-width:3px}.___SSpin_xek18_gg_._size_m_xek18_gg_{width:24px;height:24px;border-width:4px}.___SSpin_xek18_gg_._size_l_xek18_gg_{width:32px;height:32px;border-width:6px}.___SSpin_xek18_gg_._size_xl_xek18_gg_{width:48px;height:48px;border-width:8px}.___SSpin_xek18_gg_._size_xxl_xek18_gg_{width:72px;height:72px;border-width:10px}"
 /*__inner_css_end__*/
-, "10k33rc_gg_")
+, "jbivl0_gg_")
 /*__reshadow_css_end__*/
 , {
-  "@spin-rotate": "spin-rotate_10k33rc",
-  "__SSpin": "___SSpin_qgxcd_gg_",
-  "--color": "--color_10k33rc",
-  "_theme_dark": "_theme_dark_qgxcd_gg_",
-  "_theme_invert": "_theme_invert_qgxcd_gg_",
-  "_centered": "__centered_qgxcd_gg_",
-  "_size_xxs": "_size_xxs_qgxcd_gg_",
-  "_size_xs": "_size_xs_qgxcd_gg_",
-  "_size_s": "_size_s_qgxcd_gg_",
-  "_size_m": "_size_m_qgxcd_gg_",
-  "_size_l": "_size_l_qgxcd_gg_",
-  "_size_xl": "_size_xl_qgxcd_gg_",
-  "_size_xxl": "_size_xxl_qgxcd_gg_"
+  "@spin-rotate": "spin-rotate_jbivl0",
+  "__SSpin": "___SSpin_xek18_gg_",
+  "--theme": "--theme_jbivl0",
+  "_theme_dark": "_theme_dark_xek18_gg_",
+  "_theme_invert": "_theme_invert_xek18_gg_",
+  "_centered": "__centered_xek18_gg_",
+  "_size_xxs": "_size_xxs_xek18_gg_",
+  "_size_xs": "_size_xs_xek18_gg_",
+  "_size_s": "_size_s_xek18_gg_",
+  "_size_m": "_size_m_xek18_gg_",
+  "_size_l": "_size_l_xek18_gg_",
+  "_size_xl": "_size_xl_xek18_gg_",
+  "_size_xxl": "_size_xxl_xek18_gg_"
 });
 
-function getThemeColor(theme) {
-  switch (theme) {
-    case 'dark':
-    case 'invert':
-      return 'currentColor';
-
-    default:
-      return resolveColor(theme);
-  }
-}
-
 var RootSpin = /*#__PURE__*/function (_Component) {
@@ -82,4 +71,3 @@ _inherits(RootSpin, _Component);
       return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(SSpin, _ref2.cn("SSpin", _objectSpread({}, _assignProps({
-        "theme": theme,
-        "color": getThemeColor(theme)
+        "use:theme": resolveColor(theme)
       }, _ref))));
@@ -86,0 +74,0 @@ }

lib/types/index.d.ts

@@ -1,5 +0,6 @@
-import React from 'react';
 import { CProps, ReturnEl } from '@semcore/core';
 import { IBoxProps } from '@semcore/flex-box';
 
+export type SpinSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'
+
 export interface ISpinProps extends IBoxProps {
@@ -9,3 +10,3 @@ /** Spinner size
    **/
-  size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
+  size?: SpinSize;
   /** Spinner theme. There are several default themes or you can use your own color
@@ -12,0 +13,0 @@ * @default dark

package.json

 {
   "name": "@semcore/spin",
   "description": "SEMRush Spin Component",
-  "version": "3.1.1",
+  "version": "3.2.0",
   "main": "lib/cjs/index.js",
@@ -6,0 +6,0 @@ "module": "lib/es6/index.js",

src/index.d.ts

@@ -1,5 +0,6 @@
-import React from 'react';
 import { CProps, ReturnEl } from '@semcore/core';
 import { IBoxProps } from '@semcore/flex-box';
 
+export type SpinSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'
+
 export interface ISpinProps extends IBoxProps {
@@ -9,3 +10,3 @@ /** Spinner size
    **/
-  size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
+  size?: SpinSize;
   /** Spinner theme. There are several default themes or you can use your own color
@@ -12,0 +13,0 @@ * @default dark

src/Spin.js

@@ -8,12 +8,2 @@ import React from 'react';
 
-function getThemeColor(theme) {
-  switch (theme) {
-    case 'dark':
-    case 'invert':
-      return 'currentColor';
-    default:
-      return resolveColor(theme);
-  }
-}
-
 class RootSpin extends Component {
@@ -30,3 +20,3 @@ static displayName = 'Spin';
     const { styles, theme } = this.asProps;
-    return sstyled(styles)(<SSpin render={Box} theme={theme} color={getThemeColor(theme)} />);
+    return sstyled(styles)(<SSpin render={Box} use:theme={resolveColor(theme)} />);
   }
@@ -33,0 +23,0 @@ }

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

24594

decreased by-4.98%

Lines of code

455

decreased by-5.99%

No dependency changes