Add collapsable repeaters

zackify · Jun 26, 2018 · fb8d567 · fb8d567
1 parent 7becb77
commit fb8d567
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 35 deletions.
diff --git a/controls/package.json b/controls/package.json
@@ -1,14 +1,18 @@
 {
   "name": "gutenblock-controls",
-  "version": "0.5.3",
+  "version": "0.6.0",
   "description": "Useful inspector controls for gutenberg",
   "main": "dist/index.js",
   "scripts": {
     "build": "npx babel src --out-dir dist"
   },
   "author": "Zach Silveira",
   "license": "ISC",
-  "keywords": ["Gutenberg", "Wordpress", "Inspector"],
+  "keywords": [
+    "Gutenberg",
+    "Wordpress",
+    "Inspector"
+  ],
   "devDependencies": {
     "babel-cli": "^6.26.0"
   },

diff --git a/controls/src/repeat/caret.js b/controls/src/repeat/caret.js
@@ -0,0 +1,18 @@
+import React from 'react';
+
+export default ({ rotate, color, style, width, height, className }) => (
+  <svg
+    className={className}
+    width={width || 7}
+    height={height || 14}
+    viewBox="0 0 11 17"
+    style={{ transform: `rotate(${rotate}deg)`, ...style }}
+  >
+    <title>Shape</title>
+    <path
+      d="M10.444 8.108L2.139.17a.577.577 0 0 0-.82 0l-.89.852a.527.527 0 0 0-.179.392c0 .148.06.278.178.392L7.432 8.5.428 15.195a.527.527 0 0 0-.178.391c0 .148.06.279.178.392l.891.852a.576.576 0 0 0 .82 0l8.304-7.938a.528.528 0 0 0 .178-.392.528.528 0 0 0-.177-.392z"
+      fill={color}
+      fillRule="nonzero"
+    />
+  </svg>
+);
diff --git a/controls/src/repeat/index.js b/controls/src/repeat/index.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import Item from './item';
 
 const { Button } = wp.components;
 
@@ -8,6 +9,7 @@ let getItems = ({ attributes, attribute }) =>
 export default class Repeat extends React.Component {
   constructor() {
     super();
+
     this.add = this.add.bind(this);
     this.update = this.update.bind(this);
     this.delete = this.delete.bind(this);
@@ -25,15 +27,15 @@ export default class Repeat extends React.Component {
     let currentAttributes = getItems(this.props);
 
     let foundAttribute = currentAttributes.find(
-      (attr, index) => index === tabId
+      (attr, index) => index === tabId,
     );
 
     let newAttributes;
     if (!foundAttribute)
       newAttributes = [...currentAttributes, { [name]: value }];
     else
       newAttributes = currentAttributes.map(
-        (attr, index) => (index === tabId ? { ...attr, [name]: value } : attr)
+        (attr, index) => (index === tabId ? { ...attr, [name]: value } : attr),
       );
 
     return onChange(attribute, newAttributes);
@@ -43,7 +45,7 @@ export default class Repeat extends React.Component {
     let { attribute, attributes } = this.props;
 
     let newAttributes = attributes[attribute].filter(
-      (attr, index) => index !== tabId
+      (attr, index) => index !== tabId,
     );
 
     return onChange(attribute, newAttributes);
@@ -57,52 +59,64 @@ export default class Repeat extends React.Component {
       attributes,
       onChange,
       deleteButton,
+      collapsable,
+      title,
     } = this.props;
 
+    let component = 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),
+      });
+    let [first, ...restOfChildren] = children;
+
     return (
-      <div
-        style={{
-          marginLeft: '10px',
-          marginTop: '15px',
-        }}
+      <Item
+        title={title}
+        collapsable={collapsable}
+        first={component(first)}
+        deleteButton={
+          deleteButton ? (
+            deleteButton(() => this.delete(index, onChange))
+          ) : (
+            <div onClick={() => this.delete(index, onChange)}>Delete item</div>
+          )
+        }
       >
-        {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),
-          })
-        )}
-        {deleteButton ? (
-          deleteButton(() => this.delete(index, onChange))
-        ) : (
-          <div onClick={() => this.delete(index, onChange)}>Delete item</div>
-        )}
-      </div>
+        <div
+          style={{
+            marginLeft: '10px',
+            marginTop: '15px',
+          }}
+        >
+          {React.Children.map(collapsable ? restOfChildren : children, child =>
+            component(child),
+          )}
+        </div>
+      </Item>
     );
   }
 
   render() {
-    let { style, title, indent, addNew, max, createButton } = this.props;
+    let { style, title, addNew, max, createButton, collapsable } = this.props;
 
     let items = getItems(this.props).length;
 
     let repeats = [];
+
     for (let item = 0; item < items; item++) {
       repeats.push(this.renderChildren(item));
     }
 
     return (
       <div style={style}>
-        <h1>{title}</h1>
+        {collapsable ? null : <h1>{title}</h1>}
         <div>
           {repeats}
           <div style={{ marginTop: '10px' }}>

diff --git a/controls/src/repeat/item.js b/controls/src/repeat/item.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import Caret from './caret';
+
+export default class Item extends React.Component {
+  constructor({ collapsable }) {
+    super();
+    this.state = { collapsed: collapsable };
+  }
+
+  render() {
+    let { collapsed } = this.state;
+    let { children, deleteButton, first, collapsable, title } = this.props;
+    return (
+      <React.Fragment>
+        {collapsable ? (
+          <div style={{ display: 'flex' }}>
+            <h2 style={{ marginRight: 10 }}>{title}</h2>
+            {first}
+            <div
+              style={{
+                marginLeft: 20,
+                padding: 10,
+                justifyContent: 'center',
+                alignSelf: 'center',
+              }}
+              onClick={() => this.setState({ collapsed: !collapsed })}
+            >
+              <Caret rotate={collapsed ? 90 : -90} color="#0085ba" />
+            </div>
+          </div>
+        ) : null}
+        {collapsed ? null : children}
+        {collapsed ? null : deleteButton}
+      </React.Fragment>
+    );
+  }
+}
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gutenblock",
-  "version": "0.6.9",
+  "version": "0.7.0",
   "description": "",
   "main": "index.js",
   "scripts": {

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.5.2",
+    "gutenblock-controls": "^0.6.0",
     "react": "^16.3.2",
     "react-dom": "^16.3.2",
     "react-hot-loader": "^4.0.1"