Add filter editor block

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>
+      return <FilterEditorBlock onDelete={this.deleteFilterItem.bind(this, idx)}>
-        <div style={{display: 'inline-block', width: '25%'}}>
-          <Button
-            style={{backgroundColor: null}}
-            onClick={this.deleteFilterItem.bind(this, idx)}
-          >
-            <DeleteIcon />
-          </Button>
-        </div>
         <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

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