@pingux/astro 1.12.0-alpha.0 → 1.12.0-alpha.1

package/lib/cjs/components/Image/Image.js

@@ -88,7 +88,12 @@ var Image = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _useState3 = (0, _react.useState)(false),
       _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
       loadedSuccessfully = _useState4[0],
-      setLoadedSuccessfully = _useState4[1]; // we need to use useRef here with useState so it will be updated in setTimeout and onload
+      setLoadedSuccessfully = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      hasTimedOut = _useState6[0],
+      setHasTimedOut = _useState6[1]; // we need to use useRef here with useState so it will be updated in setTimeout and onload
   // https://github.com/facebook/react/issues/14010#issuecomment-433788147
 
 
@@ -99,11 +104,17 @@ var Image = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     isLoadingRef.current = newState;
   };
 
-  var _useState5 = (0, _react.useState)(fallbackImage || src),
-      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      imgSrc = _useState6[0],
-      setImgSrc = _useState6[1];
+  var setImgSrc = function setImgSrc() {
+    if (!loadedSuccessfully && !(isLoadingRef !== null && isLoadingRef !== void 0 && isLoadingRef.current) || hasTimedOut) {
+      return fallbackImage;
+    }
+
+    return src;
+  };
 
+  var imgSrc = (0, _react.useMemo)(function () {
+    return setImgSrc();
+  }, [src, isLoading, hasTimedOut]);
   var imgRef = (0, _react.useRef)();
   /* istanbul ignore next */
 
@@ -126,20 +137,18 @@ var Image = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var onImageLoad = function onImageLoad() {
     if (isLoadingRef !== null && isLoadingRef !== void 0 && isLoadingRef.current) {
       setIsLoadingWithRef(false);
-      setImgSrc(src);
       setLoadedSuccessfully(true);
     }
   };
 
   var onImageError = function onImageError() {
     setIsLoadingWithRef(false);
-    setImgSrc(fallbackImage || null);
   };
 
   var onFallbackTimeout = function onFallbackTimeout() {
     if (isLoadingRef !== null && isLoadingRef !== void 0 && isLoadingRef.current) {
       setIsLoadingWithRef(false);
-      setImgSrc(fallbackImage || null);
+      setHasTimedOut(true);
     }
   };
 

package/lib/cjs/components/Image/Image.stories.js

@@ -2,17 +2,25 @@
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.WithSkeletonLoadTimeout = exports.WithSkeletonLoadSuccess = exports.FallbackImage = exports.Disabled = exports.Default = exports.CustomSizeAndRadius = exports.Avatar = void 0;
+exports["default"] = exports.WithSkeletonLoadTimeout = exports.WithSkeletonLoadSuccess = exports.UpdatingImageSrc = exports.FallbackImage = exports.Disabled = exports.Default = exports.CustomSizeAndRadius = exports.Avatar = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _isChromatic = _interopRequireDefault(require("chromatic/isChromatic"));
 
@@ -22,8 +30,14 @@ var _imageConstants = require("./imageConstants");
 
 var _htmlElements = require("../../utils/devUtils/constants/htmlElements");
 
+var _index = require("../../index");
+
 var _react2 = require("@emotion/react");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var _default = {
   title: 'Image',
   component: _["default"],
@@ -130,4 +144,33 @@ var WithSkeletonLoadTimeout = function WithSkeletonLoadTimeout() {
   });
 };
 
-exports.WithSkeletonLoadTimeout = WithSkeletonLoadTimeout;
+exports.WithSkeletonLoadTimeout = WithSkeletonLoadTimeout;
+
+var UpdatingImageSrc = function UpdatingImageSrc() {
+  var _useState = (0, _react.useState)(_imageConstants.chiefIdentityChampions),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      image = _useState2[0],
+      setImage = _useState2[1];
+
+  var handleButtonPress = function handleButtonPress() {
+    var src = image === _imageConstants.pingImg ? _imageConstants.chiefIdentityChampions : _imageConstants.pingImg;
+    setImage(src);
+  };
+
+  return (0, _react2.jsx)(_index.Box, {
+    sx: {
+      width: '200px'
+    }
+  }, (0, _react2.jsx)(_index.Button, {
+    onPress: handleButtonPress
+  }, "Change Image"), (0, _react2.jsx)(_["default"], {
+    src: image,
+    sx: {
+      width: '200px',
+      height: '200px',
+      mt: '25px'
+    }
+  }));
+};
+
+exports.UpdatingImageSrc = UpdatingImageSrc;

package/lib/cjs/components/Image/Image.test.js

@@ -48,7 +48,12 @@ var defaultProps = {
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _testWrapper.render)((0, _react3.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props)));
+
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref$renderFn = _ref.renderFn,
+      renderFn = _ref$renderFn === void 0 ? _testWrapper.render : _ref$renderFn;
+
+  return renderFn((0, _react3.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props)));
 }; // Need to be added to each test file to test accessibility using axe.
 
 
@@ -96,6 +101,26 @@ test('image shows disabled status', function () {
 
   expect(img).toHaveClass('is-disabled');
 });
+test('image source is able to be changed', function () {
+  var src2 = 'second-src';
+
+  var _getComponent = getComponent(),
+      rerender = _getComponent.rerender;
+
+  (0, _react2.act)(function () {
+    fallbackImageObj.onImageLoad();
+  });
+  expect(_testWrapper.screen.getByRole('img')).toHaveAttribute('src', testSrc);
+  getComponent({
+    src: src2
+  }, {
+    renderFn: rerender
+  });
+  (0, _react2.act)(function () {
+    fallbackImageObj.onImageLoad();
+  });
+  expect(_testWrapper.screen.getByRole('img')).toHaveAttribute('src', src2);
+});
 describe('test Image component with useFallbackImage hook', function () {
   test('image component will use src if loaded correctly', function () {
     getComponent();

package/lib/components/Image/Image.js

@@ -20,7 +20,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-import React, { forwardRef, useRef, useImperativeHandle, useState } from 'react';
+import React, { forwardRef, useRef, useImperativeHandle, useState, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Image as ThemeUIImage } from 'theme-ui';
 import { useHover } from '@react-aria/interactions';
@@ -52,7 +52,12 @@ var Image = /*#__PURE__*/forwardRef(function (props, ref) {
   var _useState3 = useState(false),
       _useState4 = _slicedToArray(_useState3, 2),
       loadedSuccessfully = _useState4[0],
-      setLoadedSuccessfully = _useState4[1]; // we need to use useRef here with useState so it will be updated in setTimeout and onload
+      setLoadedSuccessfully = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      hasTimedOut = _useState6[0],
+      setHasTimedOut = _useState6[1]; // we need to use useRef here with useState so it will be updated in setTimeout and onload
   // https://github.com/facebook/react/issues/14010#issuecomment-433788147
 
 
@@ -63,11 +68,17 @@ var Image = /*#__PURE__*/forwardRef(function (props, ref) {
     isLoadingRef.current = newState;
   };
 
-  var _useState5 = useState(fallbackImage || src),
-      _useState6 = _slicedToArray(_useState5, 2),
-      imgSrc = _useState6[0],
-      setImgSrc = _useState6[1];
+  var setImgSrc = function setImgSrc() {
+    if (!loadedSuccessfully && !(isLoadingRef !== null && isLoadingRef !== void 0 && isLoadingRef.current) || hasTimedOut) {
+      return fallbackImage;
+    }
+
+    return src;
+  };
 
+  var imgSrc = useMemo(function () {
+    return setImgSrc();
+  }, [src, isLoading, hasTimedOut]);
   var imgRef = useRef();
   /* istanbul ignore next */
 
@@ -90,20 +101,18 @@ var Image = /*#__PURE__*/forwardRef(function (props, ref) {
   var onImageLoad = function onImageLoad() {
     if (isLoadingRef !== null && isLoadingRef !== void 0 && isLoadingRef.current) {
       setIsLoadingWithRef(false);
-      setImgSrc(src);
       setLoadedSuccessfully(true);
     }
   };
 
   var onImageError = function onImageError() {
     setIsLoadingWithRef(false);
-    setImgSrc(fallbackImage || null);
   };
 
   var onFallbackTimeout = function onFallbackTimeout() {
     if (isLoadingRef !== null && isLoadingRef !== void 0 && isLoadingRef.current) {
       setIsLoadingWithRef(false);
-      setImgSrc(fallbackImage || null);
+      setHasTimedOut(true);
     }
   };
 

package/lib/components/Image/Image.stories.js

@@ -1,9 +1,11 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import React from 'react';
+import React, { useState } from 'react';
 import isChromatic from 'chromatic/isChromatic';
 import Image from '.';
 import { chiefIdentityChampions, pingImg } from './imageConstants';
 import { htmlElements } from '../../utils/devUtils/constants/htmlElements';
+import { Box, Button } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Image',
@@ -90,4 +92,30 @@ export var WithSkeletonLoadTimeout = function WithSkeletonLoadTimeout() {
       height: '150px'
     }
   });
+};
+export var UpdatingImageSrc = function UpdatingImageSrc() {
+  var _useState = useState(chiefIdentityChampions),
+      _useState2 = _slicedToArray(_useState, 2),
+      image = _useState2[0],
+      setImage = _useState2[1];
+
+  var handleButtonPress = function handleButtonPress() {
+    var src = image === pingImg ? chiefIdentityChampions : pingImg;
+    setImage(src);
+  };
+
+  return ___EmotionJSX(Box, {
+    sx: {
+      width: '200px'
+    }
+  }, ___EmotionJSX(Button, {
+    onPress: handleButtonPress
+  }, "Change Image"), ___EmotionJSX(Image, {
+    src: image,
+    sx: {
+      width: '200px',
+      height: '200px',
+      mt: '25px'
+    }
+  }));
 };

package/lib/components/Image/Image.test.js

@@ -29,7 +29,12 @@ var defaultProps = {
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return render(___EmotionJSX(Image, _extends({}, defaultProps, props)));
+
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref$renderFn = _ref.renderFn,
+      renderFn = _ref$renderFn === void 0 ? render : _ref$renderFn;
+
+  return renderFn(___EmotionJSX(Image, _extends({}, defaultProps, props)));
 }; // Need to be added to each test file to test accessibility using axe.
 
 
@@ -71,6 +76,26 @@ test('image shows disabled status', function () {
   var img = screen.getByRole('img');
   expect(img).toHaveClass('is-disabled');
 });
+test('image source is able to be changed', function () {
+  var src2 = 'second-src';
+
+  var _getComponent = getComponent(),
+      rerender = _getComponent.rerender;
+
+  act(function () {
+    fallbackImageObj.onImageLoad();
+  });
+  expect(screen.getByRole('img')).toHaveAttribute('src', testSrc);
+  getComponent({
+    src: src2
+  }, {
+    renderFn: rerender
+  });
+  act(function () {
+    fallbackImageObj.onImageLoad();
+  });
+  expect(screen.getByRole('img')).toHaveAttribute('src', src2);
+});
 describe('test Image component with useFallbackImage hook', function () {
   test('image component will use src if loaded correctly', function () {
     getComponent();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.12.0-alpha.0",
+  "version": "1.12.0-alpha.1",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",