Add support for movable array items

Author: bhch

dev/index.html

@@ -69,34 +69,59 @@
             margin-top: 15px;
             margin-bottom: 0;
         }
-        .rjf-remove-button {
-            color: #ff4444;
-            background-color: #ffeeee;
+        .rjf-form-row-controls {
             position: absolute;
-            top: 0.3rem;
             right: 0.3rem;
-            border-radius: 100%;
+            top: 0.3rem;
+            z-index: 2;
+            border-radius: 10rem; /* same as child button */
+        }
+        .rjf-form-row > .rjf-form-row-controls {
+            top: 50%;
+            transform: translateY(-50%);
+        }
+        .rjf-form-row-controls:hover + .rjf-form-row-inner,
+        .rjf-form-row-controls:hover + .rjf-form-group {
+            background-color: #fffedd;
+        }
+        .rjf-form-row-controls button {
+            position: relative;
+            color: #333;
+            background-color: #f3f3f3;
             padding: 0.3rem 0.58rem;
+            margin-left: -1px;
             text-align: center;
             line-height: 1;
-            border: 1px solid #ffcccc;
-            font-size: 1.3rem;
+            border: 1px solid #ccc;
+            border-radius: 10rem;
+            font-size: 1.2rem;
             font-weight: bold;
             cursor: pointer;
-            transition: background-color 0.12s ease-in-out, border-color 0.12s ease-in-out;
-            z-index: 2;
+            transition: background-color 0.12s ease-in-out,
+                        border-color 0.12s ease-in-out,
+                        color 0.12s ease-in-out;
         }
-        .rjf-form-row > .rjf-remove-button {
-            top: 50%;
-            transform: translateY(-50%);
+        .rjf-form-row-controls > button:not(:last-child) {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
         }
-        .rjf-remove-button:hover {
+        .rjf-form-row-controls > button:not(:first-child) {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+        .rjf-form-row-controls button:hover {
             background-color: #fff;
-            border-color: #ff4444;
+            border-color: #333;
+            z-index: 1;
         }
-        .rjf-remove-button:hover + .rjf-form-row-inner,
-        .rjf-remove-button:hover + .rjf-form-group {
-            background-color: #fff3f3;
+        .rjf-form-row-controls .rjf-remove-button {
+            color: #ff4444;
+            background-color: #ffeeee;
+            border-color: #ffcccc;
+        }
+        .rjf-form-row-controls .rjf-remove-button:hover {
+            color: #ff4444;
+            border-color: #ff4444;
         }
         .rjf-form-text {
             display: block;

src/components/buttons.js

@@ -2,10 +2,16 @@ export default function Button({className, ...props}) {
     if (!className)
         className = '';
 
-    className = 'rjf-' + className + '-button';
+    let classes = className.split(' ');
+
+    className = '';
+    for (let i = 0; i < classes.length; i++) {
+        className = className + 'rjf-' + classes[i] + '-button ';
+    }
+
     return (
         <button 
-            className={className}
+            className={className.trim()}
             type="button"
             {...props}
         >

src/components/containers.js

@@ -11,18 +11,44 @@ export function GroupTitle(props) {
 }
 
 
-export function FormRow(props) {
+export function FormRowControls(props) {
     return (
-        <div className="rjf-form-row">
+        <div className="rjf-form-row-controls">
+            {props.onMoveUp &&
+                <Button 
+                    className="move-up"
+                    onClick={props.onMoveUp}
+                    title="Move up"
+                >
+                    <span>&uarr;</span>
+                </Button>
+            }
+            {props.onMoveDown &&
+                <Button 
+                    className="move-down"
+                    onClick={props.onMoveDown}
+                    title="Move down"
+                >
+                    <span>&darr;</span>
+                </Button>
+            }
             {props.onRemove &&
                 <Button 
                     className="remove"
-                    onClick={(e) => props.onRemove(name)}
+                    onClick={props.onRemove}
                     title="Remove"
                 >
                     <span>&times;</span>
                 </Button>
             }
+        </div>
+    );
+}
+
+export function FormRow(props) {
+    return (
+        <div className="rjf-form-row">
+            <FormRowControls {...props} />
             <div className="rjf-form-row-inner">
                 {props.children}
             </div>

src/components/index.js

@@ -1,13 +1,13 @@
 import Button from './buttons';
 import {FormInput, FormCheckInput, FormRadioInput, FormSelectInput, FormFileInput,
     FormTextareaInput} from './form';
-import {FormRow, FormGroup} from './containers';
+import {FormRow, FormGroup, FormRowControls} from './containers';
 import Loader from './loaders';
 
 export {
     Button,
     FormInput, FormCheckInput, FormRadioInput, FormSelectInput, FormFileInput,
     FormTextareaInput,
-    FormRow, FormGroup,
+    FormRow, FormGroup, FormRowControls,
     Loader,
 };

src/form.js

@@ -95,6 +95,7 @@ export default class Form extends React.Component {
                 onChange: this.handleChange,
                 onAdd: this.addFieldset,
                 onRemove: this.removeFieldset,
+                onMove: this.moveFieldset,
                 level: 0
             };
 
@@ -162,7 +163,7 @@ export default class Form extends React.Component {
                     removeDataUsingCoords(coords, data[coord]);
                 } else {
                     if (Array.isArray(data))
-                        data = data.splice(coord, 1); // in-place mutation
+                        data.splice(coord, 1); // in-place mutation
                     else
                         delete data[coord];
                 }
@@ -176,6 +177,47 @@ export default class Form extends React.Component {
         });
     }
 
+    moveFieldset = (oldCoords, newCoords) => {
+        oldCoords = oldCoords.split("-");
+        oldCoords.shift();
+
+        newCoords = newCoords.split("-");
+        newCoords.shift();
+
+        this.setState((state) => {
+            function moveDataUsingCoords(oldCoords, newCoords, data) {
+                let oldCoord = oldCoords.shift();
+
+                if (!isNaN(Number(oldCoord)))
+                    oldCoord = Number(oldCoord);
+
+                if (oldCoords.length) {
+                    moveDataUsingCoords(oldCoords, newCoords, data[oldCoord]);
+                } else {
+                    if (Array.isArray(data)) {
+                        /* Using newCoords allows us to move items from 
+                        one array to another. 
+                        However, for now, we're only moving items in a 
+                        single array.
+                        */
+                        let newCoord = newCoords[newCoords.length - 1];
+                        
+                        let item = data[oldCoord];
+
+                        data.splice(oldCoord, 1);
+                        data.splice(newCoord, 0, item);
+                    }
+                }
+            }
+
+            let _data = JSON.parse(JSON.stringify(state.data));
+
+            moveDataUsingCoords(oldCoords, newCoords, _data);
+
+            return {data: _data};
+        });
+    }
+
     render() {
         return (
             <div className="rjf-form-wrapper">

src/ui.js

@@ -1,6 +1,6 @@
 import {getBlankData} from './data';
 import {Button, FormInput, FormCheckInput, FormRadioInput, FormSelectInput,
-    FormFileInput, FormRow, FormGroup, FormTextareaInput} from './components';
+    FormFileInput, FormRow, FormGroup, FormRowControls, FormTextareaInput} from './components';
 import {getVerboseName} from './util';
 
 
@@ -105,12 +105,17 @@ function FormField(props) {
 
 
 export function getStringFormRow(args) {
-    let {data, schema, name, onChange, onRemove, removable, onEdit, editable} = args;
+    let {
+        data, schema, name, onChange, onRemove, removable, onEdit, editable, 
+        onMoveUp, onMoveDown
+    } = args;
 
     return (
         <FormRow 
             key={name}
             onRemove={removable ? (e) => onRemove(name) : null}
+            onMoveUp={onMoveUp}
+            onMoveDown={onMoveDown}
         >
             <FormField 
                 data={data}
@@ -125,7 +130,7 @@ export function getStringFormRow(args) {
 }
 
 export function getArrayFormRow(args) {
-    let {data, schema, name, onChange, onAdd, onRemove, level} = args;
+    let {data, schema, name, onChange, onAdd, onRemove, onMove, level} = args;
 
     let rows = [];
     let groups = [];
@@ -153,13 +158,24 @@ export function getArrayFormRow(args) {
         onAdd: onAdd,
         onRemove: onRemove,
         level: level + 1,
-        removable: removable
+        removable: removable,
+        onMove: onMove,
     };
 
     for (let i = 0; i < data.length; i++) {
         nextArgs.data = data[i];
         nextArgs.name = name + '-' + i;
 
+        if (i === 0)
+            nextArgs.onMoveUp = null;
+        else
+            nextArgs.onMoveUp = (e) => onMove(name + '-' + i, name + '-' + (i - 1));
+
+        if (i === data.length - 1)
+            nextArgs.onMoveDown = null;
+        else
+            nextArgs.onMoveDown = (e) => onMove(name + '-' + i, name + '-' + (i + 1));;
+
         if (type === 'array') {
             groups.push(getArrayFormRow(nextArgs));
         } else if (type === 'object') {
@@ -193,15 +209,11 @@ export function getArrayFormRow(args) {
                 {groupTitle}
                 {groups.map((i, index) => (
                     <div className="rjf-form-group-wrapper" key={'group_wrapper_' + name + '_' + index}>
-                        {removable && 
-                            <Button
-                                className="remove"
-                                onClick={(e) => onRemove(name + '-' + index)}
-                                title="Remove"
-                            >
-                                <span>&times;</span>
-                            </Button>
-                        }
+                        <FormRowControls
+                            onRemove={removable ? (e) => onRemove(name + '-' + index) : null}
+                            onMoveUp={index > 0 ? (e) => onMove(name + '-' + index, name + '-' + (index - 1)) : null}
+                            onMoveDown={index < groups.length - 1 ? (e) => onMove(name + '-' + index, name + '-' + (index + 1)) : null}
+                        />
                         {i}
                     </div>
                     )
@@ -224,7 +236,7 @@ export function getArrayFormRow(args) {
 
 
 export function getObjectFormRow(args) {
-    let {data, schema, name, onChange, onAdd, onRemove, level} = args;
+    let {data, schema, name, onChange, onAdd, onRemove, level, onMove} = args;
 
     let rows = [];
 
@@ -263,7 +275,8 @@ export function getObjectFormRow(args) {
             onAdd: onAdd,
             onRemove: onRemove,
             level: level + 1,
-            removable: removable
+            removable: removable,
+            onMove: onMove
         };
 
          if (type === 'array') {