avataaars-customizer - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

dist/index.es.js

@@ -32,3 +32,3 @@ import React from 'react';
 
-var css = ".styles_container__2pRR5 {\n  position:relative;\n  width:400px;\n}\n\n.styles_avatar__2VLtI {\n  display: block;\n  width:315px;\n  vertical-align: top;\n  height:235px;\n  padding-left:20px;\n}\n\n.styles_tabs__zfQpR {\n  box-sizing: border-box;\n  display: block;\n  position: absolute;\n  right:50px;\n  top:18px;\n  width:100px;\n}\n\n.styles_tab__3CxtV {\n  font-size:12px;\n  text-align: center;\n  border:1px solid transparent;\n  padding: 4px;\n  border-radius: 4px;\n  cursor: pointer;\n  color:#007bff;\n}\n\n.styles_selectedTab__3XKBa {\n  background: #007bff;\n  color: white;\n}\n\n.styles_tabpanes__2uRkn {\n  box-sizing: border-box;\n  display: inline-block;\n  width: 400px;\n}\n\n.styles_tabpane__XUdZl {\n  box-sizing: border-box;\n  display: none;\n  width:400px;\n  padding:0 10px 10px;\n}\n\n.styles_visible__3TqW5 {\n  display:flex;\n  align-items: center;\n  justify-items: center;\n  flex-wrap: wrap;\n  align-content: center;\n  justify-content: center;\n}\n\n.styles_piece__2PSWK {\n  display: inline-block;\n  position: relative;\n  overflow: hidden;\n}\n\n.styles_piece__2PSWK:hover {\n  background-color: #cce5ff;\n  cursor: pointer;\n}\n\n.styles_none__3LJZL {\n  opacity: .2;\n  font-size: 11px;\n  position: absolute;\n  top: 20px;\n  left: 9px;\n}\n\n.styles_divider__3zNPB {\n  display: block;\n  width: 100%;\n  height:20px;\n  padding:5px 60px;\n}\n\n.styles_divider__3zNPB > div {\n  height: 1px;\n  background-color: #dee2e6;\n}\n\n.styles_colorContainer__NbBrA {\n  display:flex;\n  align-items: center;\n  justify-items: center;\n  flex-wrap: wrap;\n  align-content: center;\n  justify-content: center;\n}\n\n.styles_color__3GZQJ {\n  display: inline-block;\n  height: 26px;\n  width:23px;\n  cursor: pointer;\n}\n\n.styles_color__3GZQJ[color=#FFFFFF] {\n  border:1px solid #ccc;\n}";
+var css = ".styles_container__2pRR5 {\n  position:relative;\n  width:400px;\n}\n\n.styles_avatar__2VLtI {\n  display: block;\n  width:315px;\n  vertical-align: top;\n  height:235px;\n  padding-left:20px;\n}\n\n.styles_tabs__zfQpR {\n  box-sizing: border-box;\n  display: block;\n  position: absolute;\n  right:50px;\n  top:8px;\n  width:100px;\n}\n\n.styles_tab__3CxtV {\n  font-size:12px;\n  text-align: center;\n  border:1px solid transparent;\n  padding: 4px;\n  border-radius: 4px;\n  cursor: pointer;\n  color:#007bff;\n}\n\n.styles_selectedTab__3XKBa {\n  background: #007bff;\n  color: white;\n}\n\n.styles_tabpanes__2uRkn {\n  box-sizing: border-box;\n  display: inline-block;\n  width: 400px;\n}\n\n.styles_tabpane__XUdZl {\n  box-sizing: border-box;\n  display: none;\n  width:400px;\n  padding:0 10px 10px;\n}\n\n.styles_visible__3TqW5 {\n  display:flex;\n  align-items: center;\n  justify-items: center;\n  flex-wrap: wrap;\n  align-content: center;\n  justify-content: center;\n}\n\n.styles_piece__2PSWK {\n  display: inline-block;\n  position: relative;\n  overflow: hidden;\n}\n\n.styles_piece__2PSWK:hover {\n  background-color: #cce5ff;\n  cursor: pointer;\n}\n\n.styles_none__3LJZL {\n  opacity: .2;\n  font-size: 11px;\n  position: absolute;\n  top: 20px;\n  left: 9px;\n}\n\n.styles_divider__3zNPB {\n  display: block;\n  width: 100%;\n  height:20px;\n  padding:5px 60px;\n}\n\n.styles_divider__3zNPB > div {\n  height: 1px;\n  background-color: #dee2e6;\n}\n\n.styles_colorContainer__NbBrA {\n  display:flex;\n  align-items: center;\n  justify-items: center;\n  flex-wrap: wrap;\n  align-content: center;\n  justify-content: center;\n}\n\n.styles_color__3GZQJ {\n  display: inline-block;\n  height: 26px;\n  width:23px;\n  cursor: pointer;\n}\n\n.styles_color__3GZQJ[color=#FFFFFF] {\n  border:1px solid #ccc;\n}";
 var styles = { "container": "styles_container__2pRR5", "avatar": "styles_avatar__2VLtI", "tabs": "styles_tabs__zfQpR", "tab": "styles_tab__3CxtV", "selectedTab": "styles_selectedTab__3XKBa", "tabpanes": "styles_tabpanes__2uRkn", "tabpane": "styles_tabpane__XUdZl", "visible": "styles_visible__3TqW5", "piece": "styles_piece__2PSWK", "none": "styles_none__3LJZL", "divider": "styles_divider__3zNPB", "colorContainer": "styles_colorContainer__NbBrA", "color": "styles_color__3GZQJ" };
@@ -226,21 +226,5 @@ styleInject(css);
 
-  var _React$useState3 = React.useState(props.value || {
-    topType: 'LongHairMiaWallace',
-    accessoriesType: 'Prescription02',
-    hairColor: 'BrownDark',
-    facialHairType: 'Blank',
-    clotheType: 'Hoodie',
-    clotheColor: 'PastelBlue',
-    eyeType: 'Happy',
-    eyebrowType: 'Default',
-    mouthType: 'Smile',
-    skinColor: 'Light'
-  }),
-      _React$useState4 = slicedToArray(_React$useState3, 2),
-      attributes = _React$useState4[0],
-      setAttributes = _React$useState4[1];
-
   function pieceClicked(attr, val) {
-    var newAttributes = _extends({}, attributes, defineProperty({}, attr, val));
-    setAttributes(newAttributes);
+    var newAttributes = _extends({}, props.value, defineProperty({}, attr, val));
+    console.log(attr, val);
     if (props.onChange) {
@@ -260,3 +244,3 @@ props.onChange(newAttributes);
         avatarStyle: 'Circle'
-      }, attributes))
+      }, props.value))
     ),
@@ -292,9 +276,2 @@ React.createElement(
             }
-            // if (option.colors) {
-            //   if (option.hatColors && option.hats.indexOf(val) !== -1) {
-            //     attr.hatColor = attributes.hatColor;
-            //   } else {
-            //     attr[option.colorAttribute] = attributes[option.colorAttribute];
-            //   }
-            // }
             return React.createElement(
@@ -316,3 +293,3 @@ 'div',
             { className: styles.colorContainer },
-            option.colors && (option.type !== 'top' || option.hats.indexOf(attributes.topType) === -1) && attributes.topType !== 'Eyepatch' && map(option.colors, function (color, colorName) {
+            option.colors && (option.type !== 'top' || option.hats.indexOf(props.value.topType) === -1) && props.value.topType !== 'Eyepatch' && props.value.topType !== 'LongHairShavedSides' && props.value.topType !== 'LongHairFrida' && map(option.colors, function (color, colorName) {
               return React.createElement('div', {
@@ -326,3 +303,3 @@ className: styles.color,
             }),
-            option.hatColors && option.hats.indexOf(attributes.topType) !== -1 && attributes.topType !== 'Hat' && map(option.hatColors, function (color, colorName) {
+            option.hatColors && option.hats.indexOf(props.value.topType) !== -1 && props.value.topType !== 'Hat' && map(option.hatColors, function (color, colorName) {
               return React.createElement('div', {
@@ -329,0 +306,0 @@ className: styles.color,

dist/index.js

@@ -37,3 +37,3 @@ 'use strict';
 
-var css = ".styles_container__2pRR5 {\n  position:relative;\n  width:400px;\n}\n\n.styles_avatar__2VLtI {\n  display: block;\n  width:315px;\n  vertical-align: top;\n  height:235px;\n  padding-left:20px;\n}\n\n.styles_tabs__zfQpR {\n  box-sizing: border-box;\n  display: block;\n  position: absolute;\n  right:50px;\n  top:18px;\n  width:100px;\n}\n\n.styles_tab__3CxtV {\n  font-size:12px;\n  text-align: center;\n  border:1px solid transparent;\n  padding: 4px;\n  border-radius: 4px;\n  cursor: pointer;\n  color:#007bff;\n}\n\n.styles_selectedTab__3XKBa {\n  background: #007bff;\n  color: white;\n}\n\n.styles_tabpanes__2uRkn {\n  box-sizing: border-box;\n  display: inline-block;\n  width: 400px;\n}\n\n.styles_tabpane__XUdZl {\n  box-sizing: border-box;\n  display: none;\n  width:400px;\n  padding:0 10px 10px;\n}\n\n.styles_visible__3TqW5 {\n  display:flex;\n  align-items: center;\n  justify-items: center;\n  flex-wrap: wrap;\n  align-content: center;\n  justify-content: center;\n}\n\n.styles_piece__2PSWK {\n  display: inline-block;\n  position: relative;\n  overflow: hidden;\n}\n\n.styles_piece__2PSWK:hover {\n  background-color: #cce5ff;\n  cursor: pointer;\n}\n\n.styles_none__3LJZL {\n  opacity: .2;\n  font-size: 11px;\n  position: absolute;\n  top: 20px;\n  left: 9px;\n}\n\n.styles_divider__3zNPB {\n  display: block;\n  width: 100%;\n  height:20px;\n  padding:5px 60px;\n}\n\n.styles_divider__3zNPB > div {\n  height: 1px;\n  background-color: #dee2e6;\n}\n\n.styles_colorContainer__NbBrA {\n  display:flex;\n  align-items: center;\n  justify-items: center;\n  flex-wrap: wrap;\n  align-content: center;\n  justify-content: center;\n}\n\n.styles_color__3GZQJ {\n  display: inline-block;\n  height: 26px;\n  width:23px;\n  cursor: pointer;\n}\n\n.styles_color__3GZQJ[color=#FFFFFF] {\n  border:1px solid #ccc;\n}";
+var css = ".styles_container__2pRR5 {\n  position:relative;\n  width:400px;\n}\n\n.styles_avatar__2VLtI {\n  display: block;\n  width:315px;\n  vertical-align: top;\n  height:235px;\n  padding-left:20px;\n}\n\n.styles_tabs__zfQpR {\n  box-sizing: border-box;\n  display: block;\n  position: absolute;\n  right:50px;\n  top:8px;\n  width:100px;\n}\n\n.styles_tab__3CxtV {\n  font-size:12px;\n  text-align: center;\n  border:1px solid transparent;\n  padding: 4px;\n  border-radius: 4px;\n  cursor: pointer;\n  color:#007bff;\n}\n\n.styles_selectedTab__3XKBa {\n  background: #007bff;\n  color: white;\n}\n\n.styles_tabpanes__2uRkn {\n  box-sizing: border-box;\n  display: inline-block;\n  width: 400px;\n}\n\n.styles_tabpane__XUdZl {\n  box-sizing: border-box;\n  display: none;\n  width:400px;\n  padding:0 10px 10px;\n}\n\n.styles_visible__3TqW5 {\n  display:flex;\n  align-items: center;\n  justify-items: center;\n  flex-wrap: wrap;\n  align-content: center;\n  justify-content: center;\n}\n\n.styles_piece__2PSWK {\n  display: inline-block;\n  position: relative;\n  overflow: hidden;\n}\n\n.styles_piece__2PSWK:hover {\n  background-color: #cce5ff;\n  cursor: pointer;\n}\n\n.styles_none__3LJZL {\n  opacity: .2;\n  font-size: 11px;\n  position: absolute;\n  top: 20px;\n  left: 9px;\n}\n\n.styles_divider__3zNPB {\n  display: block;\n  width: 100%;\n  height:20px;\n  padding:5px 60px;\n}\n\n.styles_divider__3zNPB > div {\n  height: 1px;\n  background-color: #dee2e6;\n}\n\n.styles_colorContainer__NbBrA {\n  display:flex;\n  align-items: center;\n  justify-items: center;\n  flex-wrap: wrap;\n  align-content: center;\n  justify-content: center;\n}\n\n.styles_color__3GZQJ {\n  display: inline-block;\n  height: 26px;\n  width:23px;\n  cursor: pointer;\n}\n\n.styles_color__3GZQJ[color=#FFFFFF] {\n  border:1px solid #ccc;\n}";
 var styles = { "container": "styles_container__2pRR5", "avatar": "styles_avatar__2VLtI", "tabs": "styles_tabs__zfQpR", "tab": "styles_tab__3CxtV", "selectedTab": "styles_selectedTab__3XKBa", "tabpanes": "styles_tabpanes__2uRkn", "tabpane": "styles_tabpane__XUdZl", "visible": "styles_visible__3TqW5", "piece": "styles_piece__2PSWK", "none": "styles_none__3LJZL", "divider": "styles_divider__3zNPB", "colorContainer": "styles_colorContainer__NbBrA", "color": "styles_color__3GZQJ" };
@@ -231,21 +231,5 @@ styleInject(css);
 
-  var _React$useState3 = React.useState(props.value || {
-    topType: 'LongHairMiaWallace',
-    accessoriesType: 'Prescription02',
-    hairColor: 'BrownDark',
-    facialHairType: 'Blank',
-    clotheType: 'Hoodie',
-    clotheColor: 'PastelBlue',
-    eyeType: 'Happy',
-    eyebrowType: 'Default',
-    mouthType: 'Smile',
-    skinColor: 'Light'
-  }),
-      _React$useState4 = slicedToArray(_React$useState3, 2),
-      attributes = _React$useState4[0],
-      setAttributes = _React$useState4[1];
-
   function pieceClicked(attr, val) {
-    var newAttributes = _extends({}, attributes, defineProperty({}, attr, val));
-    setAttributes(newAttributes);
+    var newAttributes = _extends({}, props.value, defineProperty({}, attr, val));
+    console.log(attr, val);
     if (props.onChange) {
@@ -265,3 +249,3 @@ props.onChange(newAttributes);
         avatarStyle: 'Circle'
-      }, attributes))
+      }, props.value))
     ),
@@ -297,9 +281,2 @@ React.createElement(
             }
-            // if (option.colors) {
-            //   if (option.hatColors && option.hats.indexOf(val) !== -1) {
-            //     attr.hatColor = attributes.hatColor;
-            //   } else {
-            //     attr[option.colorAttribute] = attributes[option.colorAttribute];
-            //   }
-            // }
             return React.createElement(
@@ -321,3 +298,3 @@ 'div',
             { className: styles.colorContainer },
-            option.colors && (option.type !== 'top' || option.hats.indexOf(attributes.topType) === -1) && attributes.topType !== 'Eyepatch' && map(option.colors, function (color, colorName) {
+            option.colors && (option.type !== 'top' || option.hats.indexOf(props.value.topType) === -1) && props.value.topType !== 'Eyepatch' && props.value.topType !== 'LongHairShavedSides' && props.value.topType !== 'LongHairFrida' && map(option.colors, function (color, colorName) {
               return React.createElement('div', {
@@ -331,3 +308,3 @@ className: styles.color,
             }),
-            option.hatColors && option.hats.indexOf(attributes.topType) !== -1 && attributes.topType !== 'Hat' && map(option.hatColors, function (color, colorName) {
+            option.hatColors && option.hats.indexOf(props.value.topType) !== -1 && props.value.topType !== 'Hat' && map(option.hatColors, function (color, colorName) {
               return React.createElement('div', {
@@ -334,0 +311,0 @@ className: styles.color,

package.json

 {
   "name": "avataaars-customizer",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "",
@@ -5,0 +5,0 @@ "author": "cgross",

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

62682

decreased by-4.9%

Lines of code

607

decreased by-6.76%

No dependency changes