fix defaultSrc behavior if src is null

changelog.md

@@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [0.14.7] - 2020-04-29
+### Changed
+- `lib/avatar.js`: fix Avatar defaultSrc behavior when src is null / undefined
+
 ## [0.14.6] - 2020-04-23
 Add EditableProjectDomain and a back arrow icon
 

lib/avatar.js

@@ -2,12 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
 import { CodeExample, PropsDefinition, Prop } from './story-utils';
+import { TextInput } from './text-input';
 
 const Image = React.forwardRef(({ src, defaultSrc, alt, ...props }, ref) => {
   const [activeSrc, setActiveSrc] = React.useState(src || defaultSrc);
   React.useEffect(() => {
-    setActiveSrc(src);
-  }, [src]);
+    setActiveSrc(src || defaultSrc);
+  }, [src, defaultSrc]);
 
   const onError = () => {
     if (defaultSrc && activeSrc !== defaultSrc) {
@@ -117,3 +118,23 @@ export const StoryAvatar_variants = () => (
     </div>
   </Flex>
 );
+
+const AvatarContainer = styled.div`
+  width: 100px;
+  margin: var(--space-2);
+`;
+
+export const StoryAvatar_defaultSrc = () => {
+  const [src, setSrc] = React.useState(null);
+  return (
+    <>
+      <p>If src is not present or the image at the URL does not load, Avatar shows the image at defaultSrc instead.</p>
+      <div>
+        <TextInput value={src} onChange={setSrc} placeholder="img src" label="img src" />
+      </div>
+      <AvatarContainer>
+        <Avatar variant="square" src={src} defaultSrc={DEFAULT_PROJECT_AVATAR_URL} alt="" />
+      </AvatarContainer>
+    </>
+  );
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glitchdotcom/shared-components",
-  "version": "0.14.6",
+  "version": "0.14.7",
   "description": "Shared components",
   "main": "build/main.js",
   "module": "build/module.js",