(WIP) Repeatable and collapsible widgets

package.json

@@ -146,6 +146,7 @@
     "react-sidebar": "^2.2.1",
     "react-simple-dnd": "^0.1.2",
     "react-sortable": "^1.2.0",
+    "react-sortable-hoc": "^0.6.5",
     "react-split-pane": "^0.1.57",
     "react-textarea-autosize": "^4.3.2",
     "react-toolbox": "^1.2.1",

src/components/Widgets/ControlHOC.js

@@ -1,5 +1,6 @@
 import React, { Component, PropTypes } from 'react';
-import ImmutablePropTypes from "react-immutable-proptypes";
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { applyHOCs } from './WidgetHOCs';
 
 const truthy = () => ({ error: false });
 
@@ -85,18 +86,13 @@ class ControlHOC extends Component {
   };
 
   render() {
-    const { controlComponent, field, value, metadata, onChange, onAddAsset, onRemoveAsset, getAsset } = this.props;
-    return React.createElement(controlComponent, {
-      field,
-      value,
-      metadata,
-      onChange,
-      onAddAsset,
-      onRemoveAsset,
-      getAsset,
-      forID: field.get('name'),
-      ref: this.processInnerControlRef,
-    });
+    const ControlComponent = applyHOCs(this.props.controlComponent);
+
+    return (<ControlComponent
+      {...this.props}
+      forID={this.props.field.get('name')}
+      ref={this.processInnerControlRef}
+    />);
   }
 }
 

src/components/Widgets/WidgetHOCs.js

@@ -0,0 +1,5 @@
+import repeatable from './WidgetHOCs/repeatable';
+
+export const HOCs = [repeatable];
+
+export const applyHOCs = component => repeatable(component);

src/components/Widgets/WidgetHOCs/collapsible.css

@@ -0,0 +1,20 @@
+@import "../../UI/theme";
+
+.toggleButton {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  height: 28px;
+  border: none;
+  border-radius: var(--borderRadius) var(--borderRadius) 0 0;
+  background: rgba(0,0,0,0.1);
+}
+
+.summary {
+  border: 2px solid rgba(0,0,0,0.1);
+  border-top-width: 28px;
+  border-radius: var(--borderRadius);
+  border-top-left-radius: 0;
+  margin-bottom: 20px;
+  padding: 20px;
+}

src/components/Widgets/WidgetHOCs/collapsible.js

@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import FontIcon from 'react-toolbox/lib/font_icon';
+
+const collapsible = WrappedComponent =>
+  class extends Component {
+    static propTypes = {
+      field: ImmutablePropTypes.map.isRequired,
+    };
+
+    constructor(props) {
+      super(props);
+      this.state = { collapsed: this.props.field.getIn(['collapse', 'startCollapsed'], false) };
+    }
+
+    handleToggle = () => {
+      this.setState(Object.assign({}, this.state, { collapsed: !this.state.collapsed }));
+    }
+
+    getSummary() {
+      return "SUMMARY";
+    }
+
+    render() {
+      if (this.props.field.get('collapse')) {
+        return (<div>
+           <button onClick={this.handleToggle}>
+             <FontIcon value={this.state.collapsed ? 'expand_more' : 'expand_less'} />
+           </button>
+           {this.state.collapsed
+             ? <div>SUMMARY</div>
+             : <WrappedComponent {...this.props} />}
+        </div>);
+      }
+
+      return <WrappedComponent {...this.props} />;
+    }
+  };
+
+export default collapsible;

src/components/Widgets/WidgetHOCs/repeatable.css

@@ -0,0 +1,63 @@
+@import "../../UI/theme";
+
+:global(.list-item-dragging) {
+  opacity: 0.5;
+}
+
+.addButton {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  margin-top: 20px;
+  padding: 8px;
+  border: 0;
+  border-radius: var(--borderRadius);
+  background-color: var(--controlBGColor);
+}
+
+.addButtonIcon {
+  font-size: 18px;
+}
+
+.addButtonText {
+  margin-left: 4px;
+}
+
+.removeButton {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  padding: 0 0 2px 2px;
+  border: 0;
+  background: none;
+  z-index: 1;
+}
+
+.objectLabel {
+  border: 2px solid rgba(0,0,0,0.1);
+  border-top-width: 28px;
+  border-radius: var(--borderRadius);
+  border-top-left-radius: 0;
+  margin-bottom: 20px;
+  padding: 20px;
+  display: none;
+}
+
+.repeatedComponent {
+  display: block;
+  border-top: 28px solid rgba(0,0,0,0.1);
+  border-top-left-radius: 0;
+}
+
+.dragIcon {
+  /* position: absolute; */
+  top: 2px;
+  display: block;
+  width: 100%;
+  text-align: center;
+  cursor: grab;
+}

src/components/Widgets/WidgetHOCs/repeatable.js

@@ -0,0 +1,110 @@
+import React, { Component, PropTypes } from 'react';
+import { fromJS, List } from 'immutable';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
+import FontIcon from 'react-toolbox/lib/font_icon';
+import styles from './repeatable.css';
+
+const RepeatableContainer = SortableContainer(
+  ({ items, renderItem }) => <div>{items.map(renderItem)}</div>
+);
+
+const DragHandle = SortableHandle(
+  () => <FontIcon value="drag_handle" className={styles.dragIcon} />
+);
+
+const repeatable = (WrappedComponent) => {
+  const RepeatableItem = SortableElement(
+    props => (<div {...props}>
+      <DragHandle />
+      {props.children}
+    </div>)
+  );
+
+  return class extends Component {
+    static propTypes = {
+      field: ImmutablePropTypes.map.isRequired,
+      value: PropTypes.oneOfType([
+        PropTypes.node,
+        PropTypes.object,
+        PropTypes.string,
+        PropTypes.bool,
+      ]),
+      metadata: ImmutablePropTypes.map,
+      onChange: PropTypes.func.isRequired,
+      forID: PropTypes.string,
+    };
+
+    constructor(props) {
+      super(props);
+    }
+
+    handleChangeFor = index => (newValueForIndex, newMetadata) => {
+      const { value, onChange } = this.props;
+      const newValue = value.set(index, newValueForIndex);
+      onChange(fromJS(newValue));
+    };
+
+    handleRemoveFor = index => (e) => {
+      e.preventDefault();
+      const { value, metadata, onChange, forID } = this.props;
+      const parsedMetadata = metadata && {
+        [forID]: metadata.removeIn(value.get(index).valueSeq()),
+      };
+      onChange(value.remove(index), parsedMetadata);
+    };
+
+    handleAdd = (e) => {
+      e.preventDefault();
+      const { value, onChange } = this.props;
+      onChange((value || List()).push(null));
+    };
+
+    renderItem = (item, i) =>
+      (<RepeatableItem key={`item-${ i }`} index={i}>
+        <button className={styles.removeButton} onClick={this.handleRemoveFor(i)}>
+          <FontIcon value="close" />
+        </button>
+        <WrappedComponent
+          {...this.props}
+          className={styles.repeatedComponent}
+          value={item}
+          onChange={this.handleChangeFor(i)}
+        />
+      </RepeatableItem>);
+
+    onSortEnd = ({ oldIndex, newIndex }) => {
+      const oldItem = this.props.value.get(oldIndex);
+      const newValue = this.props.value.delete(oldIndex).insert(newIndex, oldItem);
+      this.props.onChange(newValue);
+    };
+
+    renderItems() {
+      const { value, field, forID } = this.props;
+      return (<div id={forID}>
+        <RepeatableContainer
+          items={value || List()}
+          renderItem={this.renderItem}
+          onSortEnd={this.onSortEnd}
+          useDragHandle={true}
+        />
+        <button className={styles.addButton} onClick={this.handleAdd}>
+          <FontIcon value="add" className={styles.addButtonText} />
+          <span className={styles.addButtonText}>
+            new {field.get('label', '').toLowerCase()}
+          </span>
+        </button>
+      </div>);
+    }
+
+    render() {
+      if (this.props.field.get("repeat", false)) {
+        return this.renderItems();
+      }
+
+      return <WrappedComponent {...this.props} />;
+    }
+  };
+};
+
+export default repeatable;

yarn.lock

@@ -1078,7 +1078,7 @@ babel-register@^6.24.1:
     mkdirp "^0.5.1"
     source-map-support "^0.4.2"
 
-babel-runtime@6.x.x, babel-runtime@^6.18.0, babel-runtime@^6.2.0, babel-runtime@^6.22.0, babel-runtime@^6.5.0, babel-runtime@^6.6.1, babel-runtime@^6.9.2:
+babel-runtime@6.x.x, babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.2.0, babel-runtime@^6.22.0, babel-runtime@^6.5.0, babel-runtime@^6.6.1, babel-runtime@^6.9.2:
   version "6.23.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.23.0.tgz#0a9489f144de70efb3ce4300accdb329e2fc543b"
   dependencies:
@@ -4763,7 +4763,7 @@ lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
 
-"lodash@4.6.1 || ^4.16.1", lodash@^4.0.0, lodash@^4.1.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.16.2, lodash@^4.17.2, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1, lodash@^4.6.1, lodash@^4.7.0:
+"lodash@4.6.1 || ^4.16.1", lodash@^4.0.0, lodash@^4.1.0, lodash@^4.12.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.16.2, lodash@^4.17.2, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1, lodash@^4.6.1, lodash@^4.7.0:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
@@ -6783,6 +6783,15 @@ react-simple-dnd@^0.1.2:
     react-dnd "^2.1.4"
     react-dnd-html5-backend "^2.1.2"
 
+react-sortable-hoc@^0.6.5:
+  version "0.6.5"
+  resolved "https://registry.yarnpkg.com/react-sortable-hoc/-/react-sortable-hoc-0.6.5.tgz#e6b5d414476d51a0b621931298855d4fd608c227"
+  dependencies:
+    babel-runtime "^6.11.6"
+    invariant "^2.2.1"
+    lodash "^4.12.0"
+    prop-types "^15.5.7"
+
 react-sortable@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/react-sortable/-/react-sortable-1.2.0.tgz#5acd7e1910df665408957035acb5f2354519d849"