From 0f341eee6e8f93f94e38f8303a142e4c1bea467d Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 5 May 2022 14:41:35 -0500
Subject: [PATCH] Streamfield: export generic StreamfieldComponent<T> type

---
 app/soapbox/components/ui/streamfield/streamfield.tsx | 8 +++++++-
 app/soapbox/features/edit_profile/index.tsx           | 9 ++-------
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/app/soapbox/components/ui/streamfield/streamfield.tsx b/app/soapbox/components/ui/streamfield/streamfield.tsx
index 90651fb78..ff4f619f8 100644
--- a/app/soapbox/components/ui/streamfield/streamfield.tsx
+++ b/app/soapbox/components/ui/streamfield/streamfield.tsx
@@ -12,6 +12,12 @@ const messages = defineMessages({
   remove: { id: 'streamfield.remove', defaultMessage: 'Remove' },
 });
 
+/** Type of the inner Streamfield input component. */
+export type StreamfieldComponent<T> = React.ComponentType<{
+  value: T,
+  onChange: (value: T) => void,
+}>;
+
 interface IStreamfield {
   /** Array of values for the streamfield. */
   values: any[],
@@ -26,7 +32,7 @@ interface IStreamfield {
   /** Callback when values are changed. */
   onChange: (values: any[]) => void,
   /** Input to render for each value. */
-  component: React.ComponentType<{ onChange: (value: any) => void, value: any }>,
+  component: StreamfieldComponent<any>,
   /** Maximum number of allowed inputs. */
   maxItems?: number,
 }
diff --git a/app/soapbox/features/edit_profile/index.tsx b/app/soapbox/features/edit_profile/index.tsx
index 6a174a022..b2e0df172 100644
--- a/app/soapbox/features/edit_profile/index.tsx
+++ b/app/soapbox/features/edit_profile/index.tsx
@@ -12,7 +12,7 @@ import { normalizeAccount } from 'soapbox/normalizers';
 import resizeImage from 'soapbox/utils/resize_image';
 
 import { Button, Column, Form, FormActions, FormGroup, Input, Textarea, HStack } from '../../components/ui';
-import Streamfield from '../../components/ui/streamfield/streamfield';
+import Streamfield, { StreamfieldComponent } from '../../components/ui/streamfield/streamfield';
 
 import ProfilePreview from './components/profile-preview';
 
@@ -147,12 +147,7 @@ const accountToCredentials = (account: Account): AccountCredentials => {
   };
 };
 
-interface IProfileField {
-  value: AccountCredentialsField,
-  onChange: (field: AccountCredentialsField) => void,
-}
-
-const ProfileField: React.FC<IProfileField> = ({ value, onChange }) => {
+const ProfileField: StreamfieldComponent<AccountCredentialsField> = ({ value, onChange }) => {
   const intl = useIntl();
 
   const handleChange = (key: string): React.ChangeEventHandler<HTMLInputElement> => {