[NEP-12629] WIP

Author: Sergei Aksiutin

docs/react-components-structure.md

@@ -0,0 +1,18 @@
+React Components Structure
+--------------------------
+
+FilterBar
+  -> FilterList
+      -> FilterListOption
+  -> ApplyFiltersButton
+  -> ClearFiltersButton
+  -> SaveFiltersButton
+  -> SavedSearchesList
+  -> ConfigurationButton *
+  -> ExportResultsButton *
+  -> BatchActionsList
+  -> FilterDisplay
+      -> FilterGroup
+          -> FilterItem
+          -> FilterButton
+      -> FilterButton

example/public/js/react-filterbar.js

@@ -18,10 +18,6 @@ export class FilterBar extends React.Component {
       <div>
         <div>
           <div className="btn-group margin-bottom-sm">
-            <FilterList
-              disabledFilters={this.context.filterBarStore.getDisabled()}
-            />
-
             <ApplyFiltersButton
               filterBarActor={this.context.filterBarActor}
             />

src/components/FilterBar/FilterBar.react.js

@@ -0,0 +1,58 @@
+import { FilterListOption } from "../FilterList/FilterListOption.react";
+export class FilterButton extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { filters: props.disabledFilters };
+  }
+
+  componentDidMount() {
+    this.context.filterBarStore.addChangeListener(this.onChange.bind(this));
+  }
+
+  onChange() {
+    this.setState(this.getStateFromStores());
+  }
+
+  getStateFromStores() {
+    return {
+      filters: this.context.filterBarStore.getDisabled()
+    };
+  }
+
+  render() {
+    var optionKey = "";
+    var filterOptions = Object.keys(this.state.filters).map(function(filterUid) {
+      optionKey = "option-" + filterUid;
+      return (
+        <FilterListOption
+          filterUid={filterUid}
+          key={optionKey}
+          label={this.state.filters[filterUid].label}
+        />
+      );
+    }, this);
+    return (
+      <div className='btn-group'>
+        <button className='btn btn-default dropdown-toggle' data-toggle='dropdown' type='button'>
+          <span>{ this.props.title }</span>
+          <i className='icon icon-add'></i>
+        </button>
+        <div className='dropdown-menu' role='menu'>
+          <ul className='filter-options'>
+            {filterOptions}
+          </ul>
+        </div>
+      </div>
+    )
+  }
+}
+
+FilterButton.contextTypes = {
+  filterBarActor: React.PropTypes.object,
+  filterBarStore: React.PropTypes.object
+};
+
+FilterButton.propTypes = {
+  disabledFilters: React.PropTypes.object.isRequired
+};

src/components/FilterBar/FilterDisplay/FilterButton.react.js

@@ -1,5 +1,7 @@
 import {FilterInput} from "./FilterInput.react";
-
+import {FilterButton} from "./FilterButton.react";
+import {FilterGroup} from "./FilterGroup.react";
+import { FilterList } from "../FilterList/FilterList.react";
 export class FilterDisplay extends React.Component {
   constructor(props) {
     super(props);
@@ -41,29 +43,35 @@ export class FilterDisplay extends React.Component {
   }
 
   render() {
-    var filters = Object.keys(this.state.filters).map(function(filterUid) {
-      var filter = this.state.filters[filterUid];
-
+    var button = (
+      <FilterButton
+        disabledFilters={this.context.filterBarStore.getDisabled()}
+        title="OR"
+      />
+    )
+    var filters = Object.keys(this.state.filters).map(function(filterUID) {
       return (
-        <FilterInput
-          filterUid={filterUid}
-          key={filterUid}
-          label={filter.label}
-          type={filter.type}
-          value={filter.value}
-          operator={filter.operator}
+        <FilterGroup
+          filters={this.state.filters}
         />
       );
     }, this);
 
     if (filters.length === 0) {
-      filters = (<div>No Filters Enabled!</div>);
+      filters = (
+        <FilterButton
+          disabledFilters={this.context.filterBarStore.getDisabled()}
+          title="ADD FILTER"
+        />
+      );
+      button = "";
     }
 
     return (
       <div className="navbar filterbar">
         <div className="panel panel-default">
-          {filters}
+          <div>{filters}</div>
+          <div>{button}</div>
         </div>
       </div>
     );

src/components/FilterBar/FilterDisplay/FilterDisplay.react.js

@@ -0,0 +1,53 @@
+import { FilterInput } from "./FilterInput.react"
+import { FilterButton } from "./FilterButton.react"
+
+export class FilterGroup extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { filters: props.filters };
+  }
+
+  addFilter() {
+    alert("Add Filter");
+  }
+
+  render() {
+    var button = (
+      <FilterButton
+        disabledFilters={this.context.filterBarStore.getDisabled()}
+        title="ADD"
+      />
+    )
+    var filters = Object.keys(this.state.filters).map(function(filterUid) {
+      var filter = this.state.filters[filterUid];
+
+      return (
+        <div>
+          <FilterInput
+            filterUid={filterUid}
+            key={filterUid}
+            label={filter.label}
+            type={filter.type}
+            value={filter.value}
+            operator={filter.operator}
+          />
+        </div>
+      );
+    }, this);
+
+    return (
+      <div>
+        {filters}
+        <div>
+          {button}
+        </div>
+      </div>
+    )
+  }
+}
+
+FilterGroup.contextTypes = {
+  filterBarActor: React.PropTypes.object,
+  filterBarStore: React.PropTypes.object
+};