@henrybuilt/react-lib - npm Package Compare versions

Comparing version 1.0.13 to 1.0.14

package.json

 {
   "name": "@henrybuilt/react-lib",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "description": "",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/assets/icons/index.js

@@ -5,2 +5,4 @@ import checkBlack from './check-black.png';
 import checkWhite2 from './check-white-2.png';
+import closeBlack from './x-black.png';
+import closeWhite from './x-white.png';
 import createWhite from './create-white.png';
@@ -11,8 +13,8 @@ import fullscreenActiveBlack from './fullscreen-active-black.png';
 import fullscreenInactiveWhite from './fullscreen-inactive-white.png';
-import rightArrowBlack from './right-arrow-black.png';
-import upArrowBlack from './up-arrow-black.png';
-import closeBlack from './x-black.png';
-import closeWhite from './x-white.png';
 import homeBlack from './home-black.png';
 import homeWhite from './home-white.png';
+import largeIconActiveBlack from './large-icon-active-black.png';
+import largeIconActiveWhite from './large-icon-active-white.png';
+import largeIconBlack from './large-icon-black.png';
+import largeIconWhite from './large-icon-white.png';
 import leftArrowBlack from './left-arrow-black.png';
@@ -22,2 +24,7 @@ import leftArrowWhite from './left-arrow-white.png';
 import menuWhite from './menu-white.png';
+import notesHiddenIconBlack from './notes-hidden-icon-black.png';
+import notesHiddenIconWhite from './notes-hidden-icon-white.png';
+import notesVisibleIconBlack from './notes-visible-icon-black.png';
+import notesVisibleIconWhite from './notes-visible-icon-white.png';
+import printIconWhite from './print-icon-white.png';
 import privacyEyeClosedBlack from './privacy-eye-closed-black.png';
@@ -27,2 +34,8 @@ import privacyEyeClosedWhite from './privacy-eye-closed-white.png';
 import privacyEyeOpenWhite from './privacy-eye-open-white.png';
+import rightArrowBlack from './right-arrow-black.png';
+import smallIconActiveBlack from './small-icon-active-black.png';
+import smallIconActiveWhite from './small-icon-active-white.png';
+import smallIconBlack from './small-icon-black.png';
+import smallIconWhite from './small-icon-white.png';
+import upArrowBlack from './up-arrow-black.png';
 import uploadBlack from './upload-black.png';
@@ -59,2 +72,10 @@ import uploadWhite from './upload-white.png';
   },
+  largeIconActive: {
+    black: largeIconActiveBlack,
+    white: largeIconActiveWhite,
+  },
+  largeIcon: {
+    black: largeIconBlack,
+    white: largeIconWhite,
+  },
   leftArrow: {
@@ -68,5 +89,32 @@ black: leftArrowBlack,
   },
+  notesHidden: {
+    black: notesHiddenIconBlack,
+    white: notesHiddenIconWhite,
+  },
+  notesVisible: {
+    black: notesVisibleIconBlack,
+    white: notesVisibleIconWhite,
+  },
+  print: {
+    white: printIconWhite,
+  },
+  privacyEyeOpen: {
+    black: privacyEyeOpenBlack,
+    white: privacyEyeOpenWhite
+  },
+  privacyEyeClosed: {
+    black: privacyEyeClosedBlack,
+    white: privacyEyeClosedWhite
+  },
   rightArrow: {
     black: rightArrowBlack,
   },
+  smallIconActive: {
+    black: smallIconActiveBlack,
+    white: smallIconActiveWhite,
+  },
+  smallIcon: {
+    black: smallIconBlack,
+    white: smallIconWhite,
+  },
   upArrow: {
@@ -79,12 +127,4 @@ black: upArrowBlack,
   },
-  privacyEyeOpen: {
-    black: privacyEyeOpenBlack,
-    white: privacyEyeOpenWhite
-  },
-  privacyEyeClosed: {
-    black: privacyEyeClosedBlack,
-    white: privacyEyeClosedWhite
-  }
 };
 
 export default icons;

src/components/image.js

@@ -23,6 +23,8 @@ import React, {forwardRef, useEffect, useState} from 'react';
 }, ref) {
-  const [imgSrc, setImgSrc] = useState(src || placeholderSrc);
+  const [imgSrc, setImgSrc] = useState(null);
   const [isHovering, setIsHovering] = !_.isEmpty(extra) ? useState(false) : [false, null];
+  const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
+    setIsLoading(true);
     const img = new Image();
@@ -34,2 +36,3 @@
       setImgSrc(src);
+      setIsLoading(false);
     };
@@ -72,2 +75,12 @@ }, [src]);
     },
+    skeleton: {
+      display: 'block',
+      width: '100%',
+      height: '100%',
+      backgroundColor: K.colors.gray,
+      background: 'linear-gradient(-90deg, #efefef 0%, #fcfcfc 50%, #efefef 100%)',
+      backgroundSize: '400% 400%',
+      animation: '{0% {background-position: 0% 0%;} 100% {background-position: -135% 0%;}} 1.2s ease-in-out infinite',
+      ...style,
+    },
   };
@@ -95,9 +108,14 @@
       ))}
-      <img
-        ref={ref}
-        {...{alt, height, width}}
-        src={imgSrc}
-        style={styles.image}
-        {...props}
-      />
+      {isLoading
+        ? (<div
+          className='pulse'
+          style={styles.skeleton}
+        />)
+        : (<img
+          ref={ref}
+          {...{alt, height, width}}
+          src={imgSrc}
+          style={styles.image}
+          {...props}
+        />)}
     </div>
@@ -104,0 +122,0 @@ );

src/components/popup.js

@@ -16,3 +16,3 @@ import React, {useEffect, useRef} from 'react';
 
-const Popup = ({type = PopupTypes.MODAL, placement = placements.RIGHT, visible, shadow, children, style, contentStyle, closable = true, closeIcon, onClose}) => {
+const Popup = ({type = PopupTypes.MODAL, placement = placements.RIGHT, visible, shadow, children, style, contentStyle, closable = true, closeIcon, onClose, className}) => {
   //HINT panes with center placements render as modals
@@ -90,3 +90,3 @@ if (type === PopupTypes.PANE && placement === placements.CENTER) type = PopupTypes.MODAL;
   return visible ? (
-    <div style={styles.overlay}>
+    <div {...{className}} style={styles.overlay}>
       <div style={styles[type]} ref={popup}>
@@ -93,0 +93,0 @@ {closable && <Icon icon={closeIcon} name='close' style={styles.closeIcon} onClick={handleClose}/>}

New alerts

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

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

Improved metrics

Total package byte prevSize

3793643

increased by1.23%

Number of package files

74

increased by21.31%

Lines of code

41166

increased by0.51%

Worsened metrics

Number of low supply chain risk alerts

17

increased by13.33%

No dependency changes