@veracity/vui 2.15.1 → 2.15.2

package/dist/cjs/avatar/avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/avatar/avatar.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAY5C,eAAO,MAAM,UAAU,gIAoBtB,CAAA;AAED,kEAAkE;AAClE,eAAO,MAAM,MAAM,qDA8DjB,CAAA;AAGF,eAAe,MAAM,CAAA"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/avatar/avatar.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAG5C,eAAO,MAAM,UAAU,gIAoBtB,CAAA;AAED,kEAAkE;AAClE,eAAO,MAAM,MAAM,qDA8DjB,CAAA;AAsCF,eAAe,MAAM,CAAA"}

package/dist/cjs/avatar/avatar.js

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -15,18 +38,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Avatar = exports.AvatarBase = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const core_1 = require("../core");
 const icon_1 = __importDefault(require("../icon"));
 const image_1 = __importDefault(require("../image"));
 const utils_1 = require("../utils");
+const images_1 = require("../utils/images");
 const helpers_1 = require("./helpers");
-function imageExists(image_url) {
-    const http = new XMLHttpRequest();
-    http.open('HEAD', image_url, false);
-    http.send();
-    return http.status !== 404;
-}
 exports.AvatarBase = core_1.styled.spanBox `
   align-items: center;
   display: inline-flex;
@@ -54,7 +72,6 @@ exports.Avatar = (0, core_1.vui)((props, ref) => {
     const _b = (0, core_1.useStyleConfig)('Avatar', props), { activeBg, h, hoverBg, iconSize } = _b, styles = __rest(_b, ["activeBg", "h", "hoverBg", "iconSize"]);
     const borderRadius = isSquare ? (props.size === 'sm' ? '3px' : '6px') : '50%';
     const initials = getInitials(name);
-    const internalIcon = src && !imageExists(src) ? 'falUser' : icon;
     const interactiveProps = !disabled && isInteractive
         ? {
             cursor: 'pointer',
@@ -71,7 +88,21 @@ exports.Avatar = (0, core_1.vui)((props, ref) => {
         borderRadius: borderRadius,
         'aria-disabled': disabled
     });
-    return (react_1.default.createElement(exports.AvatarBase, Object.assign({ borderRadius: borderRadius, className: (0, utils_1.cs)('vui-avatar', className), h: h, ref: ref, w: h }, styles, interactiveProps, aliasedProps, rest), children ? (children) : src && imageExists(src) ? (react_1.default.createElement(image_1.default, Object.assign({}, { borderRadius, src }))) : internalIcon ? (react_1.default.createElement(icon_1.default, { name: internalIcon, size: iconSize })) : initials ? (initials) : null));
+    return (react_1.default.createElement(exports.AvatarBase, Object.assign({ borderRadius: borderRadius, className: (0, utils_1.cs)('vui-avatar', className), h: h, ref: ref, w: h }, styles, interactiveProps, aliasedProps, rest), children ? (children) : src ? (react_1.default.createElement(LazyImageOrDefault, { borderRadius: borderRadius, icon: icon, iconSize: iconSize, initials: initials, src: src })) : icon ? (react_1.default.createElement(icon_1.default, { name: icon, size: iconSize })) : initials ? (initials) : (react_1.default.createElement(icon_1.default, { name: "falUser", size: iconSize }))));
 });
+function LazyImageOrDefault({ src, borderRadius, icon, iconSize, initials }) {
+    const [imgLoaded, setImgLoaded] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        let cancelled = false;
+        (0, images_1.loadImageUrl)(src).then(res => {
+            if (!cancelled)
+                setImgLoaded(res);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [src]);
+    return imgLoaded ? (react_1.default.createElement(image_1.default, { borderRadius: borderRadius, src: src })) : icon ? (react_1.default.createElement(icon_1.default, { name: icon, size: iconSize })) : initials ? (react_1.default.createElement(react_1.default.Fragment, null, "initials")) : (react_1.default.createElement(icon_1.default, { name: "falUser", size: iconSize }));
+}
 exports.Avatar.displayName = 'Avatar';
 exports.default = exports.Avatar;

package/dist/cjs/utils/images.d.ts

@@ -0,0 +1,3 @@
+/** Attempts to load the image and returns a boolean indicating success or not. */
+export declare function loadImageUrl(url: string): Promise<boolean>;
+//# sourceMappingURL=images.d.ts.map

package/dist/cjs/utils/images.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"images.d.ts","sourceRoot":"","sources":["../../../src/utils/images.ts"],"names":[],"mappings":"AAEA,kFAAkF;AAClF,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,oBAgBvC"}

package/dist/cjs/utils/images.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadImageUrl = void 0;
+const loadImagePromises = new Map();
+/** Attempts to load the image and returns a boolean indicating success or not. */
+function loadImageUrl(url) {
+    let promise = loadImagePromises.get(url);
+    if (promise)
+        return promise;
+    promise = new Promise(resolve => {
+        const img = new Image();
+        img.onload = () => {
+            // After this event occurs, you can use the url in the DOM. The browser will not make another request for the image; there will be no delay.
+            resolve(true);
+        };
+        img.onerror = () => {
+            resolve(false);
+        };
+        img.src = url;
+    });
+    loadImagePromises.set(url, promise);
+    return promise;
+}
+exports.loadImageUrl = loadImageUrl;

package/dist/esm/avatar/avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/avatar/avatar.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAY5C,eAAO,MAAM,UAAU,gIAoBtB,CAAA;AAED,kEAAkE;AAClE,eAAO,MAAM,MAAM,qDA8DjB,CAAA;AAGF,eAAe,MAAM,CAAA"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/avatar/avatar.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAG5C,eAAO,MAAM,UAAU,gIAoBtB,CAAA;AAED,kEAAkE;AAClE,eAAO,MAAM,MAAM,qDA8DjB,CAAA;AAsCF,eAAe,MAAM,CAAA"}

package/dist/esm/avatar/avatar.js

@@ -1,15 +1,10 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { omitThemingProps, styled, useStyleConfig, vui } from '../core';
 import Icon from '../icon';
 import Image from '../image';
 import { cs, filterUndefined } from '../utils';
+import { loadImageUrl } from '../utils/images';
 import { defaultGetInitials } from './helpers';
-function imageExists(image_url) {
-    const http = new XMLHttpRequest();
-    http.open('HEAD', image_url, false);
-    http.send();
-    return http.status !== 404;
-}
 export const AvatarBase = styled.spanBox `
   align-items: center;
   display: inline-flex;
@@ -37,7 +32,6 @@ export const Avatar = vui((props, ref) => {
     const { activeBg, h, hoverBg, iconSize, ...styles } = useStyleConfig('Avatar', props);
     const borderRadius = isSquare ? (props.size === 'sm' ? '3px' : '6px') : '50%';
     const initials = getInitials(name);
-    const internalIcon = src && !imageExists(src) ? 'falUser' : icon;
     const interactiveProps = !disabled && isInteractive
         ? {
             cursor: 'pointer',
@@ -54,7 +48,21 @@ export const Avatar = vui((props, ref) => {
         borderRadius: borderRadius,
         'aria-disabled': disabled
     });
-    return (React.createElement(AvatarBase, { borderRadius: borderRadius, className: cs('vui-avatar', className), h: h, ref: ref, w: h, ...styles, ...interactiveProps, ...aliasedProps, ...rest }, children ? (children) : src && imageExists(src) ? (React.createElement(Image, { ...{ borderRadius, src } })) : internalIcon ? (React.createElement(Icon, { name: internalIcon, size: iconSize })) : initials ? (initials) : null));
+    return (React.createElement(AvatarBase, { borderRadius: borderRadius, className: cs('vui-avatar', className), h: h, ref: ref, w: h, ...styles, ...interactiveProps, ...aliasedProps, ...rest }, children ? (children) : src ? (React.createElement(LazyImageOrDefault, { borderRadius: borderRadius, icon: icon, iconSize: iconSize, initials: initials, src: src })) : icon ? (React.createElement(Icon, { name: icon, size: iconSize })) : initials ? (initials) : (React.createElement(Icon, { name: "falUser", size: iconSize }))));
 });
+function LazyImageOrDefault({ src, borderRadius, icon, iconSize, initials }) {
+    const [imgLoaded, setImgLoaded] = useState(false);
+    useEffect(() => {
+        let cancelled = false;
+        loadImageUrl(src).then(res => {
+            if (!cancelled)
+                setImgLoaded(res);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [src]);
+    return imgLoaded ? (React.createElement(Image, { borderRadius: borderRadius, src: src })) : icon ? (React.createElement(Icon, { name: icon, size: iconSize })) : initials ? (React.createElement(React.Fragment, null, "initials")) : (React.createElement(Icon, { name: "falUser", size: iconSize }));
+}
 Avatar.displayName = 'Avatar';
 export default Avatar;

package/dist/esm/utils/images.d.ts

@@ -0,0 +1,3 @@
+/** Attempts to load the image and returns a boolean indicating success or not. */
+export declare function loadImageUrl(url: string): Promise<boolean>;
+//# sourceMappingURL=images.d.ts.map

package/dist/esm/utils/images.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"images.d.ts","sourceRoot":"","sources":["../../../src/utils/images.ts"],"names":[],"mappings":"AAEA,kFAAkF;AAClF,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,oBAgBvC"}

package/dist/esm/utils/images.js

@@ -0,0 +1,20 @@
+const loadImagePromises = new Map();
+/** Attempts to load the image and returns a boolean indicating success or not. */
+export function loadImageUrl(url) {
+    let promise = loadImagePromises.get(url);
+    if (promise)
+        return promise;
+    promise = new Promise(resolve => {
+        const img = new Image();
+        img.onload = () => {
+            // After this event occurs, you can use the url in the DOM. The browser will not make another request for the image; there will be no delay.
+            resolve(true);
+        };
+        img.onerror = () => {
+            resolve(false);
+        };
+        img.src = url;
+    });
+    loadImagePromises.set(url, promise);
+    return promise;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.15.1",
+  "version": "2.15.2",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/avatar/avatar.tsx

@@ -1,21 +1,13 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 
 import { omitThemingProps, styled, useStyleConfig, vui } from '../core'
-import Icon from '../icon'
+import Icon, { IconProp, IconProps } from '../icon'
 import Image from '../image'
 import { cs, filterUndefined } from '../utils'
+import { loadImageUrl } from '../utils/images'
 import { AvatarProps } from './avatar.types'
 import { defaultGetInitials } from './helpers'
 
-function imageExists(image_url: string) {
-  const http = new XMLHttpRequest()
-
-  http.open('HEAD', image_url, false)
-  http.send()
-
-  return http.status !== 404
-}
-
 export const AvatarBase = styled.spanBox`
   align-items: center;
   display: inline-flex;
@@ -57,8 +49,6 @@ export const Avatar = vui<'span', AvatarProps>((props, ref) => {
   const borderRadius = isSquare ? (props.size === 'sm' ? '3px' : '6px') : '50%'
   const initials = getInitials(name)
 
-  const internalIcon = src && !imageExists(src) ? 'falUser' : icon
-
   const interactiveProps =
     !disabled && isInteractive
       ? ({
@@ -92,16 +82,53 @@ export const Avatar = vui<'span', AvatarProps>((props, ref) => {
     >
       {children ? (
         children
-      ) : src && imageExists(src) ? (
-        <Image {...{ borderRadius, src }} />
-      ) : internalIcon ? (
-        <Icon name={internalIcon} size={iconSize} />
+      ) : src ? (
+        <LazyImageOrDefault borderRadius={borderRadius} icon={icon} iconSize={iconSize} initials={initials} src={src} />
+      ) : icon ? (
+        <Icon name={icon} size={iconSize} />
       ) : initials ? (
         initials
-      ) : null}
+      ) : (
+        <Icon name="falUser" size={iconSize} />
+      )}
     </AvatarBase>
   )
 })
 
+function LazyImageOrDefault({
+  src,
+  borderRadius,
+  icon,
+  iconSize,
+  initials
+}: {
+  src: string
+  borderRadius: string
+  icon: IconProp | undefined
+  iconSize: IconProps['size']
+  initials: string
+}) {
+  const [imgLoaded, setImgLoaded] = useState(false)
+  useEffect(() => {
+    let cancelled = false
+    loadImageUrl(src).then(res => {
+      if (!cancelled) setImgLoaded(res)
+    })
+    return () => {
+      cancelled = true
+    }
+  }, [src])
+
+  return imgLoaded ? (
+    <Image borderRadius={borderRadius} src={src} />
+  ) : icon ? (
+    <Icon name={icon} size={iconSize} />
+  ) : initials ? (
+    <>initials</>
+  ) : (
+    <Icon name="falUser" size={iconSize} />
+  )
+}
+
 Avatar.displayName = 'Avatar'
 export default Avatar

package/src/utils/images.ts

@@ -0,0 +1,20 @@
+const loadImagePromises = new Map<string, Promise<boolean>>()
+
+/** Attempts to load the image and returns a boolean indicating success or not. */
+export function loadImageUrl(url: string) {
+  let promise = loadImagePromises.get(url)
+  if (promise) return promise
+  promise = new Promise(resolve => {
+    const img = new Image()
+    img.onload = () => {
+      // After this event occurs, you can use the url in the DOM. The browser will not make another request for the image; there will be no delay.
+      resolve(true)
+    }
+    img.onerror = () => {
+      resolve(false)
+    }
+    img.src = url
+  })
+  loadImagePromises.set(url, promise)
+  return promise
+}