feat: support dragHandle="inside" on reorderable HasManyFields

src/components/HasManyFields/HasManyFields.d.ts

@@ -16,6 +16,8 @@ interface HasManyFieldsPropTypes {
   minimumRows?: number;
   maximumRows?: number;
   reorderable?: boolean;
+  dragHandle?: 'outside' | 'inside';
+  rowClassName?: string;
   value?: HasManyValue[];
   className?: string;
 }

src/components/HasManyFields/HasManyFields.js

@@ -9,22 +9,30 @@ import HasManyFieldsRow from './HasManyFieldsRow';
 
 const DragHandler = withDragHandler();
 
-const SortableItem = ReorderableElement(({ key, sortIndex, value, renderHasManyFieldsRow }) => (
-  <div className="d-flex js-reorderable-item" key={key}>
-    <DragHandler />
-    <div className="w-100">{renderHasManyFieldsRow(null, sortIndex, value)}</div>
-  </div>
-));
+const SortableItem = ReorderableElement(
+  ({ key, sortIndex, value, renderHasManyFieldsRow, dragHandleInside }) =>
+    dragHandleInside ? (
+      <div className="js-reorderable-item" key={key}>
+        {renderHasManyFieldsRow(null, sortIndex, value, <DragHandler />)}
+      </div>
+    ) : (
+      <div className="d-flex js-reorderable-item" key={key}>
+        <DragHandler />
+        <div className="w-100">{renderHasManyFieldsRow(null, sortIndex, value)}</div>
+      </div>
+    )
+);
 
 const SortableContainer = ReorderableContainer(
-  ({ value, renderAddRow, renderHasManyFieldsRow }) => (
+  ({ value, renderAddRow, renderHasManyFieldsRow, dragHandleInside }) => (
     <div>
       {value.map((item, index) => (
         <SortableItem
           key={`${item.key ? item.key : index}`}
           index={index}
           sortIndex={index}
           value={item}
+          dragHandleInside={dragHandleInside}
           renderHasManyFieldsRow={renderHasManyFieldsRow}
         />
       ))}
@@ -44,6 +52,7 @@ class HasManyFields extends React.Component {
     minimumRows: 1,
     maximumRows: Infinity,
     reorderable: false,
+    dragHandle: 'outside',
   };
 
   constructor(props) {
@@ -135,32 +144,53 @@ class HasManyFields extends React.Component {
     return isFunction && !(Template.prototype && Template.prototype.render);
   };
 
-  renderHasManyFieldsRow = (key, index, value) => {
-    const { template: Template, disabled, deleteProps, errors, minimumRows } = this.props;
+  renderHasManyFieldsRow = (key, index, value, dragHandle) => {
+    const {
+      template: Template,
+      disabled,
+      deleteProps,
+      errors,
+      minimumRows,
+      rowClassName,
+    } = this.props;
     const refProps = this.isStateless(Template) ? {} : { ref: this.setRowReference(index) };
 
+    const template = (
+      <Template
+        value={value}
+        errors={errors[index]}
+        onChange={this.updateItem(index)}
+        disabled={disabled}
+        index={index}
+        {...refProps}
+      />
+    );
+
     return (
       <HasManyFieldsRow
         onDelete={this.deleteItem(index)}
         key={key}
+        className={rowClassName}
         deletable={this.value.length > minimumRows}
         disabled={disabled}
         deleteProps={deleteProps}
       >
-        <Template
-          value={value}
-          errors={errors[index]}
-          onChange={this.updateItem(index)}
-          disabled={disabled}
-          index={index}
-          {...refProps}
-        />
+        {dragHandle ? (
+          <div className="d-flex">
+            {dragHandle}
+            <div className="w-100" style={{ minWidth: 0 }}>
+              {template}
+            </div>
+          </div>
+        ) : (
+          template
+        )}
       </HasManyFieldsRow>
     );
   };
 
   render() {
-    const { className, disabled, reorderable } = this.props;
+    const { className, disabled, reorderable, dragHandle } = this.props;
 
     if (!disabled && reorderable) {
       return (
@@ -172,6 +202,7 @@ class HasManyFields extends React.Component {
             useDragHandle
             lockAxis="y"
             value={this.value}
+            dragHandleInside={dragHandle === 'inside'}
             renderHasManyFieldsRow={this.renderHasManyFieldsRow}
             renderAddRow={this.renderAddRow}
           />

src/components/HasManyFields/HasManyFields.spec.js

@@ -274,6 +274,50 @@ describe('<HasManyFields />', () => {
         assert.equal(items.length, component.find('.js-reorderable-item').length);
         assert.equal(items.length, component.find(HasManyFieldsRow).length);
       });
+
+      it('renders drag handles outside the rows by default', () => {
+        assert.equal(items.length, component.find('div.rg-DragHandler').length);
+        assert.equal(0, component.find(HasManyFieldsRow).at(0).find('div.rg-DragHandler').length);
+      });
+    });
+  });
+
+  describe('reorderable with dragHandle="inside"', () => {
+    let component;
+
+    beforeEach(() => {
+      component = mount(
+        <HasManyFields
+          value={items}
+          errors={errors}
+          template={Input}
+          blank="foo"
+          label="Add an Animal"
+          reorderable
+          dragHandle="inside"
+        />
+      );
+    });
+
+    it('has correct number of reorderable items', () => {
+      assert.equal(items.length, component.find('.js-reorderable-item').length);
+      assert.equal(items.length, component.find(HasManyFieldsRow).length);
+    });
+
+    it('renders each drag handle inside its row', () => {
+      component.find(HasManyFieldsRow).forEach((row) => {
+        assert.equal(1, row.find('div.rg-DragHandler').length);
+      });
+    });
+  });
+
+  it('passes rowClassName through to each row', () => {
+    const component = mount(
+      <HasManyFields value={items} template={Input} label="Add an Animal" rowClassName="border rounded p-3" />
+    );
+
+    component.find(HasManyFieldsRow).forEach((row) => {
+      assert.equal('border rounded p-3', row.prop('className'));
     });
   });
 });

src/components/HasManyFields/HasManyFields.stories.js

@@ -66,6 +66,14 @@ LiveExample.args = {
   minimumRows: 1,
   maximumRows: 5,
   reorderable: false,
+  dragHandle: 'outside',
+  rowClassName: '',
+};
+LiveExample.argTypes = {
+  dragHandle: {
+    control: 'radio',
+    options: ['outside', 'inside'],
+  },
 };
 
 export const RowWrapper = (args) => (