Add button that removes an image (#134)

* Add button that removes an image

* Make remove button 100% width

The calc + 2px is to account for inconsistency with the other inputs
and selectors which appear to be 2px wider than 100% (presumably from
border)

* Make splice/filter operation clearer

The array has to be spread before filtering.
This is for the case where only a later image has a defined width/height
In those cases the width/height array would be defined as [4: 350]
for example.
Filtering on that array would give unexpected result.
The spreading creates the full array and then filters correctly.

Co-authored-by: Steven <steven@ceriously.com>

public/style.css

@@ -73,7 +73,7 @@ button {
     line-height: 0;
 
     height: 24px;
-    width: 100px;
+    width: calc(100% + 2px);
     padding: 0 10px;
     font-size: 12px;
     background: #fff;

web/index.ts

@@ -355,6 +355,20 @@ const App = (_: any, state: AppState, setState: SetState) => {
                                     setLoadingState({ heights: clone });
                                 }
                             })
+                        ),
+                        H('div',
+                            { className: 'field-flex' },
+                            H(Button, {
+                                label: `Remove Image ${i + 2}`,
+                                onclick: (e: MouseEvent) => {
+                                    e.preventDefault();
+                                    const filter = (arr: any[]) => [...arr].filter((_, n) => n !== i + 1);
+                                    const imagesClone = filter(images);
+                                    const widthsClone = filter(widths);
+                                    const heightsClone = filter(heights);
+                                    setLoadingState({ images: imagesClone, widths: widthsClone, heights: heightsClone });
+                                }
+                            })
                         )
                     )
                 })),