avatar-chip - npm Package Compare versions

Comparing version 2.0.13 to 2.0.14

lib/components/avatar-chip.js

@@ -20,2 +20,4 @@ "use strict";
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -25,7 +27,7 @@
 
-var _excluded = ["lgTextSizeArr", "textSizeArr", "breakpointsAttribute", "multiplyArr"],
+var _excluded = ["lgTextSizeArr", "textSizeArr"],
     _excluded2 = ["size", "personName"],
     _excluded3 = ["size", "personName", "label", "bgColor", "lift", "logoOn", "labelOn", "labelSize", "onDelete"],
     _excluded4 = ["lineTop", "lineDown", "className", "theme"],
-    _excluded5 = ["theme", "size"],
+    _excluded5 = ["size"],
     _excluded6 = ["classes", "personName", "src"],
@@ -65,14 +67,2 @@ _excluded7 = ["classes", "theme", "size", "personName", "avatarProps", "logoOn", "labelOn", "children"],
 
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -88,2 +78,4 @@
 
+//const size = ["5.2rem", "3.9rem", "2.6rem", "1.8rem"]
+//const labelSize = ["4rem", "3rem", "2rem", "1.5rem"]
 var breakpoints = (0, _createBreakpoints["default"])({});
@@ -132,4 +124,2 @@
       textSizeArr = _ref2.textSizeArr,
-      breakpointsAttribute = _ref2.breakpointsAttribute,
-      multiplyArr = _ref2.multiplyArr,
       theme = _objectWithoutProperties(_ref2, _excluded);
@@ -144,6 +134,7 @@
       var size_ = Array.isArray(size) ? size : typeof size === "string" ? [size] : lgTextSizeArr;
-      return _objectSpread({}, breakpointsAttribute(["width"].concat(_toConsumableArray(size_)), ["height"].concat(_toConsumableArray(size_))));
+      return _objectSpread({}, breakpointsAttribute(["width", size_], ["height", size_]));
     },
     chipCss: function chipCss(_ref4) {
-      var size = _ref4.size,
+      var _ref4$size = _ref4.size,
+          size = _ref4$size === void 0 ? ["1.3rem", "2.6rem", "3.9rem", "5.2rem"] : _ref4$size,
           personName = _ref4.personName,
@@ -158,3 +149,4 @@ label = _ref4.label,
           labelOn = _ref4$labelOn === void 0 ? true : _ref4$labelOn,
-          labelSize = _ref4.labelSize,
+          _ref4$labelSize = _ref4.labelSize,
+          labelSize = _ref4$labelSize === void 0 ? ["1rem", "2rem", "3rem", "4rem"] : _ref4$labelSize,
           onDelete = _ref4.onDelete,
@@ -170,3 +162,3 @@ props = _objectWithoutProperties(_ref4, _excluded3);
         margin: 0,
-        boxShadow: theme.shadows[lift],
+        // boxShadow: theme.shadows[lift],
         overflow: "hidden"
@@ -186,3 +178,3 @@ }, breakpointsAttribute(["borderRadius", "999999px"])), {}, {
           padding: 0
-        }, breakpointsAttribute(["fontSize", labelSize_], ["paddingLeft", labelOn ? multiplyArr(labelSize_, logoOn ? 0.15 : 0.5) : [0]], ["paddingRight", labelOn ? multiplyArr(labelSize_, onDelete ? 0.15 : 0.5) : [0]])),
+        }, breakpointsAttribute(["fontSize", labelSize_ || []], ["paddingLeft", labelOn ? multiplyArr(labelSize_ || [], logoOn ? 0.15 : 0.5) : [0]], ["paddingRight", labelOn ? multiplyArr(labelSize_ || [], onDelete ? 0.15 : 0.5) : [0]])),
         "& .MuiChip-deleteIcon": _objectSpread({
@@ -245,2 +237,4 @@ margin: 0
     value: function render() {
+      var _classNames, _classNames2;
+
       var _this$props = this.props,
@@ -255,17 +249,11 @@ lineTop = _this$props.lineTop,
           typoUpCss = _this$props$classes.typoUpCss,
-          typoDownCss = _this$props$classes.typoDownCss; // const allClassNamesTop = classNames({
-      //   [typoUpCss]: false,
-      //   [className]: true
-      // })
-      // const allClassNamesDown = classNames({
-      //   [typoDownCss]: false,
-      //   [className]: true
-      // })
-
+          typoDownCss = _this$props$classes.typoDownCss;
+      var allClassNamesTop = (0, _classnames["default"])((_classNames = {}, _defineProperty(_classNames, typoUpCss, false), _defineProperty(_classNames, className, true), _classNames));
+      var allClassNamesDown = (0, _classnames["default"])((_classNames2 = {}, _defineProperty(_classNames2, typoDownCss, false), _defineProperty(_classNames2, className, true), _classNames2));
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
         color: "textPrimary",
-        className: className
+        className: allClassNamesTop
       }, lineTop), /*#__PURE__*/_react["default"].createElement(_core.Typography, {
         color: "textSecondary",
-        className: className
+        className: allClassNamesDown
       }, lineDown));
@@ -283,10 +271,6 @@ }
 })(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    ", " \n"])), function (props) {
-  var _props$theme = props.theme,
-      textSizeArr = _props$theme.textSizeArr,
-      breakpointsAttribute = _props$theme.breakpointsAttribute,
-      multiplyArr = _props$theme.multiplyArr,
-      size = props.size,
+  var size = props.size,
       rest = _objectWithoutProperties(props, _excluded5);
 
-  var size_ = Array.isArray(size) ? size : typeof size === "string" ? [size] : textSizeArr;
+  var size_ = Array.isArray(size) ? size : typeof size === "string" ? [size] : size;
   return {
@@ -457,3 +441,3 @@ "&:first-of-type": _objectSpread({
         label: this.props.children
-      }, this.props.children && this.props.children.type && this.props.children.type.Naked && this.props.children.type.Naked.name === "TwoLineLabel_" && labelOn && {
+      }, this.props && this.props.children && this.props.children.type && this.props.children.type.Naked && this.props.children.type.Naked.render.displayName === "Styled(TwoLineLabel_)" && labelOn && {
         label: /*#__PURE__*/_react["default"].createElement(TwoLineLabel, _extends({}, this.props.children.props, {
@@ -508,11 +492,9 @@ logoOn: this.props.logoOn,
 _defineProperty(AvatarChip_, "defaultProps", {
-  textSizeArr: ["1.5rem", "2rem", "2.5rem", "3rem", "3.5rem"],
+  multiplyArr: multiplyArr,
   factor: 1.3,
-
-  get lgTextSizeArr() {
-    return this.multiplyArr(this.textSizeArr, this.factor);
-  },
-
-  multiplyArr: multiplyArr,
-  breakpointsAttribute: breakpointsAttribute
+  breakpointsAttribute: breakpointsAttribute,
+  size: ["2.6rem", "2.6rem", "2.6rem", "2.6rem", "2.6rem"],
+  labelSize: ["2rem", "2rem", "2rem", "2rem", "2rem"],
+  logoOn: true,
+  labelOn: true
 });
@@ -519,0 +501,0 @@

package.json

 {
   "name": "avatar-chip",
-  "version": "2.0.13",
+  "version": "2.0.14",
   "description": "",
@@ -52,4 +52,5 @@ "main": "lib/index.js",
     "@multiavatar/multiavatar": "^1.0.6",
+    "classnames": "^2.3.1",
     "styled-components": "^5.3.1"
   }
 }

src/components/avatar-chip.js

@@ -9,7 +9,7 @@ import React, { Component, useContext } from "react"
 import multiavatar from '@multiavatar/multiavatar';
-//import classNames from 'classnames';
+import classNames from 'classnames';
 import styled from 'styled-components'
 
-
-
+//const size = ["5.2rem", "3.9rem", "2.6rem", "1.8rem"]
+//const labelSize = ["4rem", "3rem", "2rem", "1.5rem"]
 const breakpoints = createBreakpoints({})
@@ -52,3 +52,3 @@ function breakpointsAttribute(...args) {
 
-function styleObj({ lgTextSizeArr, textSizeArr, breakpointsAttribute, multiplyArr, ...theme }) {
+function styleObj({ lgTextSizeArr, textSizeArr, ...theme }) {
   return {
@@ -63,6 +63,7 @@ avatarCss: ({ size, personName, ...props }) => {
       return {
-        ...breakpointsAttribute(["width", ...size_], ["height", ...size_]), //avatar size
+        ...breakpointsAttribute(["width", size_], ["height", size_]), //avatar size
       }
     },
-    chipCss: ({ size, personName, label, bgColor, lift = 3, logoOn = true, labelOn = true, labelSize, onDelete, ...props }) => {
+    chipCss: ({ size = ["1.3rem", "2.6rem", "3.9rem", "5.2rem"], personName, label, bgColor, lift = 3, logoOn = true, labelOn = true,
+      labelSize = ["1rem", "2rem", "3rem", "4rem"], onDelete, ...props }) => {
 
@@ -80,3 +81,2 @@ const size_ = Array.isArray(size)
           : textSizeArr
-
       return {
@@ -89,3 +89,3 @@
         margin: 0,
-        boxShadow: theme.shadows[lift],
+        // boxShadow: theme.shadows[lift],
 
@@ -110,5 +110,5 @@
           padding: 0,
-          ...breakpointsAttribute(["fontSize", labelSize_],
-            ["paddingLeft", labelOn ? multiplyArr(labelSize_, logoOn ? 0.15 : 0.5) : [0]],
-            ["paddingRight", labelOn ? multiplyArr(labelSize_, onDelete ? 0.15 : 0.5) : [0]]), // label size
+          ...breakpointsAttribute(["fontSize", labelSize_ || []],
+            ["paddingLeft", labelOn ? multiplyArr(labelSize_ || [], logoOn ? 0.15 : 0.5) : [0]],
+            ["paddingRight", labelOn ? multiplyArr(labelSize_ || [], onDelete ? 0.15 : 0.5) : [0]]), // label size
         },
@@ -180,15 +180,15 @@ "& .MuiChip-deleteIcon": {
 
-    // const allClassNamesTop = classNames({
-    //   [typoUpCss]: false,
-    //   [className]: true
-    // })
-    // const allClassNamesDown = classNames({
-    //   [typoDownCss]: false,
-    //   [className]: true
-    // })
+    const allClassNamesTop = classNames({
+      [typoUpCss]: false,
+      [className]: true
+    })
+    const allClassNamesDown = classNames({
+      [typoDownCss]: false,
+      [className]: true
+    })
     return (
 
       <>
-        <Typography color="textPrimary" className={className} >{lineTop}</Typography>
-        <Typography color="textSecondary" className={className} >{lineDown}</Typography>
+        <Typography color="textPrimary" className={allClassNamesTop} >{lineTop}</Typography>
+        <Typography color="textSecondary" className={allClassNamesDown} >{lineDown}</Typography>
       </>
@@ -208,42 +208,42 @@ )
 
-const { theme: { textSizeArr, breakpointsAttribute, multiplyArr }, size, ...rest } = props
+    const { size, ...rest } = props
 
 
 
-const size_ = Array.isArray(size)
-  ? size
-  : typeof (size) === "string"
-    ? [size]
-    : textSizeArr
+    const size_ = Array.isArray(size)
+      ? size
+      : typeof (size) === "string"
+        ? [size]
+        : size
 
 
-return {
-  "&:first-of-type": {
-    lineHeight: "115%",
-    // backgroundColor:"pink",
-    margin: 0,
-    padding: 0,
-    ...breakpointsAttribute(
-      ["fontSize", multiplyArr(size_, 65 / 100)],
+    return {
+      "&:first-of-type": {
+        lineHeight: "115%",
+        // backgroundColor:"pink",
+        margin: 0,
+        padding: 0,
+        ...breakpointsAttribute(
+          ["fontSize", multiplyArr(size_, 65 / 100)],
 
-      //   ((!logoOn) && labelOn) ? ["marginLeft", multiplyArr(size_, 40 / 100)] : []// not updating with props updating logoOn labelOn
+          //   ((!logoOn) && labelOn) ? ["marginLeft", multiplyArr(size_, 40 / 100)] : []// not updating with props updating logoOn labelOn
 
-    ),
-  },
-  "&:first-of-type ~ &": {
-    lineHeight: "115%",
-    // backgroundColor:"pink",
-    margin: 0,
-    padding: 0,
-    ...breakpointsAttribute(
-      ["fontSize", multiplyArr(size_, 35 / 100)],
+        ),
+      },
+      "&:first-of-type ~ &": {
+        lineHeight: "115%",
+        // backgroundColor:"pink",
+        margin: 0,
+        padding: 0,
+        ...breakpointsAttribute(
+          ["fontSize", multiplyArr(size_, 35 / 100)],
 
-      //   ((!logoOn) && labelOn) ? ["marginLeft", multiplyArr(size_, 40 / 100)] : []// not updating with props updating logoOn labelOn
+          //   ((!logoOn) && labelOn) ? ["marginLeft", multiplyArr(size_, 40 / 100)] : []// not updating with props updating logoOn labelOn
 
-    ),
-  }
-}
+        ),
+      }
+    }
 
 
-}} 
+  }} 
 `
@@ -265,10 +265,15 @@
   static defaultProps = {
-    textSizeArr: ["1.5rem", "2rem", "2.5rem", "3rem", "3.5rem"],
-    factor: 1.3,
-    get lgTextSizeArr() { return this.multiplyArr(this.textSizeArr, this.factor) },
 
     multiplyArr,
-
+    factor: 1.3,
     breakpointsAttribute,
 
+    size: ["2.6rem", "2.6rem", "2.6rem", "2.6rem", "2.6rem"],
+
+    labelSize: ["2rem", "2rem", "2rem", "2rem", "2rem"],
+
+    logoOn: true,
+    labelOn: true,
+
+
   }
@@ -351,3 +356,5 @@
 
-          {...(this.props.children && this.props.children.type && this.props.children.type.Naked && this.props.children.type.Naked.name === "TwoLineLabel_")
+          // {...(this.props.children && this.props.children.type && this.props.children.type.Naked && this.props.children.type.Naked.name === "TwoLineLabel_")
+          // && labelOn && {
+          {...(this.props && this.props.children && this.props.children.type && this.props.children.type.Naked && this.props.children.type.Naked.render.displayName === "Styled(TwoLineLabel_)")
           && labelOn && {
@@ -354,0 +361,0 @@ label: <TwoLineLabel

No alert changes

Worsened metrics

Total package byte prevSize

40822

decreased by-1.17%

Dependency count

6

increased by20%

Lines of code

747

decreased by-0.66%

Dependency changes

• + Addedclassnames@^2.3.1

• + Addedclassnames@2.5.1(transitive)