Streamfield: allow removing elements

app/soapbox/components/ui/input/input.tsx

@@ -18,6 +18,8 @@ interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'maxL
   defaultValue?: string,
   /** Extra class names for the <input> element. */
   className?: string,
+  /** Extra class names for the outer <div> element. */
+  outerClassName?: string,
   /** URL to the svg icon. */
   icon?: string,
   /** Internal input name. */
@@ -37,7 +39,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
   (props, ref) => {
     const intl = useIntl();
 
-    const { type = 'text', icon, className, ...filteredProps } = props;
+    const { type = 'text', icon, className, outerClassName, ...filteredProps } = props;
 
     const [revealed, setRevealed] = React.useState(false);
 
@@ -48,7 +50,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
     }, []);
 
     return (
-      <div className='mt-1 relative rounded-md shadow-sm'>
+      <div className={classNames('mt-1 relative rounded-md shadow-sm', outerClassName)}>
         {icon ? (
           <div className='absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none'>
             <Icon src={icon} className='h-4 w-4 text-gray-400' aria-hidden='true' />

app/soapbox/components/ui/streamfield/streamfield.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
 
 import Button from '../button/button';
+import HStack from '../hstack/hstack';
+import IconButton from '../icon-button/icon-button';
 import Stack from '../stack/stack';
 
 interface IStreamfield {
   values: any[],
   onAddItem?: () => void,
+  onRemoveItem?: (i: number) => void,
   onChange: (values: any[]) => void,
   component: React.ComponentType<{ onChange: (value: any) => void, value: any }>,
   maxItems?: number,
@@ -15,6 +18,7 @@ interface IStreamfield {
 const Streamfield: React.FC<IStreamfield> = ({
   values,
   onAddItem,
+  onRemoveItem,
   onChange,
   component: Component,
   maxItems = Infinity,
@@ -32,11 +36,19 @@ const Streamfield: React.FC<IStreamfield> = ({
     <Stack space={4}>
 
       <Stack>
-        {values.map((value, i) => {
-          return (
+        {values.map((value, i) => (
+          <HStack space={2} alignItems='center'>
             <Component key={i} onChange={handleChange(i)} value={value} />
-          );
-        })}
+            {onRemoveItem && (
+              <IconButton
+                iconClassName='w-4 h-4'
+                className='bg-transparent text-gray-400 hover:text-gray-600'
+                src={require('@tabler/icons/icons/x.svg')}
+                onClick={() => onRemoveItem(i)}
+              />
+            )}
+          </HStack>
+        ))}
       </Stack>
 
       {onAddItem && (

app/soapbox/features/edit_profile/index.tsx

@@ -143,8 +143,8 @@ const ProfileField: React.FC<IProfileField> = ({ value, onChange }) => {
 
   return (
     <HStack space={2} grow>
-      <Input type='text' value={value.name} onChange={handleChange('name')} />
-      <Input type='text' value={value.value} onChange={handleChange('value')} />
+      <Input outerClassName='w-full flex-grow' type='text' value={value.name} onChange={handleChange('name')} />
+      <Input outerClassName='w-full flex-grow' type='text' value={value.value} onChange={handleChange('value')} />
     </HStack>
   );
 };
@@ -254,6 +254,13 @@ const EditProfile: React.FC = () => {
     updateData('fields_attributes', fields);
   };
 
+  const handleRemoveField = (i: number) => {
+    const oldFields = data.fields_attributes || [];
+    const fields = [...oldFields];
+    fields.splice(i, 1);
+    updateData('fields_attributes', fields);
+  };
+
   /** Memoized avatar preview URL. */
   const avatarUrl = useMemo(() => {
     return data.avatar ? URL.createObjectURL(data.avatar) : account?.avatar;
@@ -419,6 +426,7 @@ const EditProfile: React.FC = () => {
           values={data.fields_attributes || []}
           onChange={handleFieldsChange}
           onAddItem={handleAddField}
+          onRemoveItem={handleRemoveField}
           component={ProfileField}
           maxItems={maxFields}
         />