Update controls so you can delete inside repeater

zackify · May 3, 2018 · 710fc3c · 710fc3c
1 parent 0d460dd
commit 710fc3c
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 49 deletions.
diff --git a/controls/package.json b/controls/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gutenblock-controls",
-  "version": "0.3.5",
+  "version": "0.4.6",
   "description": "Useful inspector controls for gutenberg",
   "main": "dist/index.js",
   "scripts": {

diff --git a/controls/src/form/media-select.js b/controls/src/form/media-select.js
@@ -1,7 +1,7 @@
 const { Button } = wp.components;
 const { MediaUpload } = wp.blocks;
 
-export default ({ name, attributes, onChange, label }) => (
+export default ({ name, attributes, onChange, beforeChange, label }) => (
   <MediaUpload
     type="image"
     value={attributes[name]}
@@ -10,6 +10,8 @@ export default ({ name, attributes, onChange, label }) => (
         {label || 'Open Media Library'}
       </Button>
     )}
-    onSelect={media => onChange(name, media.sizes.full.url)}
+    onSelect={media =>
+      onChange(name, beforeChange ? beforeChange(media) : media.sizes.full.url)
+    }
   />
 );
diff --git a/controls/src/form/select.js b/controls/src/form/select.js
@@ -7,16 +7,6 @@ export default ({ loadOptions, name, onChange, attributes, onDelete }) => (
     value={attributes ? attributes[name] : null}
     loadOptions={loadOptions}
     joinValues={attributes ? true : false}
-    clearRenderer={() => (
-      <div
-        onClick={e => {
-          e.stopPropagation();
-          onDelete();
-        }}
-      >
-        X
-      </div>
-    )}
     onChange={value => (value ? onChange(name, value.value) : null)}
   />
 );
diff --git a/controls/src/repeat/index.js b/controls/src/repeat/index.js
@@ -40,24 +40,12 @@ export default class Repeat extends React.Component {
     return onChange(attribute, newAttributes);
   }
 
-  delete(childAttributes, childAttribute, tabId, onChange) {
+  delete(tabId, onChange) {
     let { attribute, attributes } = this.props;
 
-    let newAttributes;
-    if (!childAttributes)
-      newAttributes = attributes[attribute].filter(
-        (attr, index) => index !== tabId
-      );
-
-    if (childAttributes) {
-      let newItem = {
-        ...attributes[attribute][tabId],
-        [childAttribute]: childAttributes,
-      };
-      newAttributes = attributes[attribute].map(
-        (item, index) => (index === tabId ? newItem : item)
-      );
-    }
+    let newAttributes = attributes[attribute].filter(
+      (attr, index) => index !== tabId
+    );
 
     return onChange(attribute, newAttributes);
   }
@@ -71,23 +59,30 @@ export default class Repeat extends React.Component {
       onChange,
     } = this.props;
 
-    return React.Children.map(children, child =>
-      React.cloneElement(child, {
-        key: index,
-        index,
-        setAttributes,
-        attributes:
-          attributes && attributes[attribute] && attributes[attribute][index]
-            ? attributes[attribute][index]
-            : {},
-        onChange: (name, value) => this.update(name, value, index, onChange),
-        onDelete: (childAttributes, childAttribute) =>
-          this.delete(childAttributes, childAttribute, index, onChange),
-        style: {
+    return (
+      <div
+        style={{
           marginLeft: '10px',
           marginTop: '15px',
-        },
-      })
+        }}
+      >
+        {React.Children.map(children, child =>
+          React.cloneElement(child, {
+            key: index,
+            index,
+            setAttributes,
+            attributes:
+              attributes &&
+              attributes[attribute] &&
+              attributes[attribute][index]
+                ? attributes[attribute][index]
+                : {},
+            onChange: (name, value) =>
+              this.update(name, value, index, onChange),
+          })
+        )}
+        <div onClick={() => this.delete(index, onChange)}>Delete item</div>
+      </div>
     );
   }
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gutenblock",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "",
   "main": "index.js",
   "scripts": {

diff --git a/plugin/package-lock.json b/plugin/package-lock.json
diff --git a/plugin/package.json b/plugin/package.json
@@ -14,7 +14,7 @@
   "license": "ISC",
   "dependencies": {
     "@babel/polyfill": "^7.0.0-beta.46",
-    "gutenblock-controls": "^0.3.5",
+    "gutenblock-controls": "^0.4.6",
     "react": "^16.3.2",
     "react-dom": "^16.3.2",
     "react-hot-loader": "^4.0.1"