From 153232c1432a1f31ccc15304d2b7ae9470f07f30 Mon Sep 17 00:00:00 2001
From: Lukas Martinelli <me@lukasmartinelli.ch>
Date: Mon, 9 Jan 2017 20:07:48 +0100
Subject: [PATCH] Add filter editor block

---
 src/components/filter/FilterEditor.jsx      | 17 ++-------
 src/components/filter/FilterEditorBlock.jsx | 38 +++++++++++++++++++++
 2 files changed, 41 insertions(+), 14 deletions(-)
 create mode 100644 src/components/filter/FilterEditorBlock.jsx

diff --git a/src/components/filter/FilterEditor.jsx b/src/components/filter/FilterEditor.jsx
index 04b47701..4d635ff9 100644
--- a/src/components/filter/FilterEditor.jsx
+++ b/src/components/filter/FilterEditor.jsx
@@ -9,6 +9,7 @@ import { combiningFilterOps } from '../../libs/filterops.js'
 import OperatorSelect from './OperatorSelect'
 import SingleFilterEditor from './SingleFilterEditor'
 import CombiningOperatorSelect from './CombiningOperatorSelect'
+import FilterEditorBlock from './FilterEditorBlock'
 import DocLabel from '../fields/DocLabel'
 import Button from '../Button'
 
@@ -75,26 +76,14 @@ export default class CombiningFilterEditor extends React.Component {
     let filters = filter.slice(1)
 
     const filterEditors = filters.map((f, idx) => {
-      return <div>
-        <div style={{display: 'inline-block', width: '25%'}}>
-          <Button
-            style={{backgroundColor: null}}
-            onClick={this.deleteFilterItem.bind(this, idx)}
-          >
-            <DeleteIcon />
-          </Button>
-        </div>
+      return <FilterEditorBlock onDelete={this.deleteFilterItem.bind(this, idx)}>
         <SingleFilterEditor
-          style={{
-            display: 'inline-block',
-            width: '75%'
-          }}
           key={idx}
           properties={this.props.properties}
           filter={f}
           onChange={this.onFilterPartChanged.bind(this, idx + 1)}
         />
-      </div>
+      </FilterEditorBlock>
     })
 
     //TODO: Implement support for nested filter
diff --git a/src/components/filter/FilterEditorBlock.jsx b/src/components/filter/FilterEditorBlock.jsx
new file mode 100644
index 00000000..5413175b
--- /dev/null
+++ b/src/components/filter/FilterEditorBlock.jsx
@@ -0,0 +1,38 @@
+import React from 'react'
+import Button from '../Button'
+import DeleteIcon from 'react-icons/lib/md/delete'
+
+class FilterEditorBlock extends React.Component {
+  static propTypes = {
+    onDelete: React.PropTypes.func.isRequired,
+    children: React.PropTypes.element.isRequired,
+  }
+
+  renderChildren() {
+    return React.Children.map(this.props.children, child => {
+      return React.cloneElement(child, {
+        style: {
+          ...child.props.style,
+          display: 'inline-block',
+          width: '75%',
+        }
+      })
+    })
+  }
+
+  render() {
+    return <div>
+      <div style={{display: 'inline-block', width: '25%'}}>
+        <Button
+          style={{backgroundColor: null}}
+          onClick={this.props.onDelete}
+        >
+          <DeleteIcon />
+        </Button>
+      </div>
+      {this.props.children}
+    </div>
+  }
+}
+
+export default FilterEditorBlock