[config] forward ref if support by current version

ambassify · May 11, 2020 · 4c84f6c · 4c84f6c
1 parent d36c165
commit 4c84f6c
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 7 deletions.
diff --git a/demo/index.js b/demo/index.js
@@ -65,6 +65,12 @@ class Demo extends React.Component {
         this.setState({ color: customColors[next] });
     }
 
+    _onAttachRef(ref) {
+        // Dummy function to test errors on reference
+        // eslint-disable-next-line no-console
+        console && console.log('Ref received', ref);
+    }
+
     render() {
         return (
             <div>
@@ -80,7 +86,7 @@ class Demo extends React.Component {
                 </section>
                 <section>
                     <h2>Gravatar</h2>
-                    <Avatar className="myCustomClass" md5Email="8c5d4c4b9ef6c68c4ff91c319d4c56be" size={40} />
+                    <Avatar ref={this._onAttachRef} className="myCustomClass" md5Email="8c5d4c4b9ef6c68c4ff91c319d4c56be" size={40} />
                     <Avatar md5Email="8c5d4c4b9ef6c68c4ff91c319d4c56be" size={100} round={true} />
                     <Avatar md5Email="8c5d4c4b9ef6c68c4ff91c319d4c56be" size={150} round="20px" />
                     <Avatar md5Email="8c5d4c4b9ef6c68c4ff91c319d4c56be" size={200} />

diff --git a/src/context.js b/src/context.js
@@ -23,9 +23,18 @@ const contextKeys = Object.keys(defaults);
 
 const ConfigContext = React.createContext && React.createContext();
 const isLegacyContext = !ConfigContext;
-
 const ConfigConsumer = isLegacyContext ? null : ConfigContext.Consumer;
 
+/**
+ * This was introduced in React 16.3.0 we need this to
+ * prevent errors in newer versions. But we will just forward the
+ * component for any version lower than 16.3.0
+ *
+ * https://github.com/Sitebase/react-avatar/issues/201
+ * https://github.com/facebook/react/blob/master/CHANGELOG.md#1630-march-29-2018
+ */
+const forwardRef = React.forwardRef || (C => C);
+
 export class ConfigProvider extends React.Component {
 
     static displayName = 'ConfigProvider';
@@ -66,15 +75,23 @@ export class ConfigProvider extends React.Component {
 }
 
 export const withConfig = (Component) => {
-    function withAvatarConfig(props, context = {}) {
+    function withAvatarConfig(props, refOrContext) {
 
-        if (!ConfigConsumer)
-            return ( <Component {...defaults} {...context.reactAvatar} {...props} /> );
+        // If legacy context is enabled, there is no support for forwardedRefs either
+        if (isLegacyContext) {
+            const ctx = refOrContext && refOrContext.reactAvatar;
+            return ( <Component {...defaults} {...ctx} {...props} /> );
+        }
 
         /* eslint-disable react/display-name */
         return (
             <ConfigConsumer>
-                {config => ( <Component {...defaults} {...config} {...props} /> )}
+                {config => (
+                    <Component ref={refOrContext}
+                        {...defaults}
+                        {...config}
+                        {...props} />
+                )}
             </ConfigConsumer>
         );
         /* eslint-enable react/display-name */
@@ -83,7 +100,7 @@ export const withConfig = (Component) => {
     // Legacy support, only set when legacy is detected
     withAvatarConfig.contextTypes = ConfigProvider.childContextTypes;
 
-    return withAvatarConfig;
+    return forwardRef(withAvatarConfig);
 };
 
 if (isLegacyContext) {