Add hosted URL preview

rohanlekamge · Sep 6, 2020 · a127afa · a127afa
1 parent 55c7676
commit a127afa
Showing 1 changed file with 13 additions and 2 deletions.
diff --git a/modules/react-components/src/components/modal/edit-avatar-modal/edit-avatar-modal.tsx b/modules/react-components/src/components/modal/edit-avatar-modal/edit-avatar-modal.tsx
@@ -377,7 +377,7 @@ export const EditAvatarModal: FunctionComponent<EditAvatarModalPropsInterface> =
 
         if (avatarType !== AvatarTypes.URL) {
             setCustomHostedURLError(null);
-            
+
             return;
         }
 
@@ -386,7 +386,7 @@ export const EditAvatarModal: FunctionComponent<EditAvatarModalPropsInterface> =
                 content: translations.hostedAvatar.input.errors.invalid.content,
                 pointing: translations.hostedAvatar.input.errors.invalid.pointing as LabelProps["pointing"]
             });
-            
+
             return;
         }
     };
@@ -571,13 +571,24 @@ export const EditAvatarModal: FunctionComponent<EditAvatarModalPropsInterface> =
                                 <div className="avatar-from-url-field">
                                     <Form.Field
                                         fluid
+                                        className="hosted-url-input"
                                         control={ Input }
                                         placeholder={ translations.hostedAvatar.input.placeholder }
                                         onFocus={ handleHostedURLFieldOnFocus }
                                         onChange={ handleCustomHostedURLFieldOnChange }
                                         error={ customHostedURLError }
                                         loading={ isHostedURLValidationRequestLoading }
                                     />
+                                    {
+                                        customHostedURL && isHostedURLValid && (
+                                            <UserAvatar
+                                                spaced="left"
+                                                size="mini"
+                                                isLoading={ isHostedURLValidationRequestLoading }
+                                                image={ customHostedURL }
+                                            />
+                                        )
+                                    }
                                 </div>
                                 <Hint>{ translations.hostedAvatar.input.hint }</Hint>
                             </Grid.Column>