couchdb-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From robertkowal...@apache.org
Subject [1/4] fauxton commit: updated refs/heads/master to b19065e
Date Thu, 14 Apr 2016 16:06:05 GMT
Repository: couchdb-fauxton
Updated Branches:
  refs/heads/master f21e7615a -> b19065e3d


Change dropdown to react-select

react-select is easier to extend and customize and it also
supports rendering the result-list after a click.

it also supports react 15 and is actively maintained.

PR: #700
PR-URL: https://github.com/apache/couchdb-fauxton/pull/700
Reviewed-By: garren smith <garren.smith@gmail.com>


Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo
Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/b19065e3
Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/b19065e3
Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/b19065e3

Branch: refs/heads/master
Commit: b19065e3dd188a7241508b051e89b53be778ad6b
Parents: 05c6139
Author: Robert Kowalski <robertkowalski@apache.org>
Authored: Tue Apr 12 17:13:54 2016 +0200
Committer: Robert Kowalski <robertkowalski@apache.org>
Committed: Thu Apr 14 18:05:51 2016 +0200

----------------------------------------------------------------------
 .../documents/assets/less/index-results.less    |  39 ++++++-
 .../index-results.components.react.jsx          | 101 +++++--------------
 .../index-results.componentsSpec.react.jsx      |  20 ----
 package.json                                    |   1 +
 webpack.config.dev.js                           |   1 +
 webpack.config.release.js                       |   1 +
 webpack.config.test.js                          |   1 +
 7 files changed, 67 insertions(+), 97 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b19065e3/app/addons/documents/assets/less/index-results.less
----------------------------------------------------------------------
diff --git a/app/addons/documents/assets/less/index-results.less b/app/addons/documents/assets/less/index-results.less
index c58a3c1..dc46c6d 100644
--- a/app/addons/documents/assets/less/index-results.less
+++ b/app/addons/documents/assets/less/index-results.less
@@ -68,7 +68,6 @@
     width: auto;
   }
 
-
   .tableview-data-cell-id {
     a {
       color: @linkColor;
@@ -137,6 +136,44 @@
   .table-container-autocomplete {
     position: relative;
     width: 128px;
+    height: 29px;
+  }
+
+  .table-container-autocomplete .table-select-wrapper {
+    width: inherit;
+    position: fixed;
+  }
+
+  .Select div.Select-control {
+    border-radius: initial;
+    border: none;
+  }
+
+  .Select .Select-menu-outer {
+    border-radius: inherit;
+    border: none;
+  }
+
+  .Select-option {
+    color: #fff;
+    background-color: #333333;
+  }
+
+  .Select-option {
+    color: #fff;
+    background-color: #333333;
+  }
+
+  .Select-option:hover {
+    background-color: #E33F3B;
+  }
+
+  .Select-option:last-child {
+    border-radius: initial;
+  }
+
+  .Select .is-focused:not(.is-open) > .Select-control {
+    box-shadow: transparent;
   }
 
 }

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b19065e3/app/addons/documents/index-results/index-results.components.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/documents/index-results/index-results.components.react.jsx b/app/addons/documents/index-results/index-results.components.react.jsx
index 9a4c565..612eeb4 100644
--- a/app/addons/documents/index-results/index-results.components.react.jsx
+++ b/app/addons/documents/index-results/index-results.components.react.jsx
@@ -21,14 +21,18 @@ define([
   '../..//fauxton/components.react',
 
   'react-bootstrap',
-  'react-autocomplete',
+  'react-select',
   'react-addons-css-transition-group',
 
-  '../../../../assets/js/plugins/prettify'
+  '../../../../assets/js/plugins/prettify',
+  'react-select/dist/react-select.css'
 ],
 
 
-function (app, FauxtonAPI, React, Stores, Actions, Components, Documents, FauxtonComponents,
ReactBootstrap, Autocomplete, ReactCSSTransitionGroup) {
+function (app, FauxtonAPI, React, Stores, Actions, Components, Documents, FauxtonComponents,
+  ReactBootstrap, ReactSelect, ReactCSSTransitionGroup) {
+
+
   var store = Stores.indexResultsStore;
   var BulkActionComponent = Components.BulkActionComponent;
   var Clipboard = FauxtonComponents.Clipboard;
@@ -184,83 +188,28 @@ function (app, FauxtonAPI, React, Stores, Actions, Components, Documents,
Fauxto
     }
   });
 
-  var WrappedAutocomplete = React.createClass({
-
-    getInitialState: function () {
-      return {
-        showFilters: false
-      };
-    },
-
-    showFilters: function (state) {
-      this.setState({
-        showFilters: state
-      });
-    },
-
-    render: function () {
-
-      function matchItem (item, value) {
-        return (
-          item.indexOf(value) !== -1
-        );
-      }
-
-      function renderItems (items) {
-        return items.map(function (item) {
-          return item;
-        });
-      }
-
-      var menuStyle = {
-        borderRadius: '3px',
-        boxShadow: '0 2px 12px rgba(0, 0, 0, 0.1)',
-        background: 'rgba(255, 255, 255, 0.9)',
-        padding: '0',
-        fontSize: '90%',
-        position: 'fixed',
-        overflow: 'auto',
-        maxHeight: '50%'
-      };
-
-      return (
-        <div className="table-container-autocomplete">
-          <Autocomplete
-            shouldItemRender={matchItem}
-            initialValue={this.props.selectedField}
-            items={this.props.notSelectedFields}
-            menuStyle={menuStyle}
-            onSelect={function (item) {
+  const WrappedAutocomplete = ({selectedField, notSelectedFields, index}) => {
+    const options = notSelectedFields.map((el) => {
+      return {value: el, label: el};
+    });
+
+    return (
+      <div className="table-container-autocomplete">
+        <div className="table-select-wrapper">
+          <ReactSelect
+            value={selectedField}
+            options={options}
+            clearable={false}
+            onChange={(el) => {
               Actions.changeField({
-                newSelectedRow: item,
-                index: this.props.index
+                newSelectedRow: el.value,
+                index: index
               });
-
-              this.showFilters(false);
-            }.bind(this)}
-            onChange={function (e, text) {
-              if (!text) {
-                this.showFilters(true);
-                return;
-              }
-              this.showFilters(false);
-            }.bind(this)}
-            getItemValue={function (item) { return item; }}
-            renderItem={function (item, isHighlighted) {
-              var highlight = isHighlighted ? 'table-dropdown-item-highlight ' : '';
-              return (
-                <div
-                  className={highlight + 'table-dropdown-item'}
-                  key={item}>
-                  {item}
-                </div>
-              );
             }} />
-            {this.state.showFilters ? <i className="icon icon-filter"></i> :
null}
         </div>
-      );
-    }
-  });
+      </div>
+    );
+  };
 
 
   var TableView = React.createClass({

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b19065e3/app/addons/documents/index-results/tests/index-results.componentsSpec.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/documents/index-results/tests/index-results.componentsSpec.react.jsx
b/app/addons/documents/index-results/tests/index-results.componentsSpec.react.jsx
index 3bcd04e..3092d62 100644
--- a/app/addons/documents/index-results/tests/index-results.componentsSpec.react.jsx
+++ b/app/addons/documents/index-results/tests/index-results.componentsSpec.react.jsx
@@ -292,26 +292,6 @@ define([
       });
 
     });
-    describe('wrapped autocomplete', function () {
-      it('renders a filter icon if no text given', function () {
-
-        var elements = ['min_weight', 'max_weight'];
-
-        instance = TestUtils.renderIntoDocument(
-          <Views.WrappedAutocomplete selectedField="ente" />,
-          container
-        );
-
-        var $el = $(ReactDOM.findDOMNode(instance));
-
-        assert.equal($el.find('.icon-filter').length, 0);
-
-        var node = $el.find('input')[0];
-        node.value = '';
-        TestUtils.Simulate.change(node);
-        assert.equal($el.find('.icon-filter').length, 1);
-      });
-    });
 
     describe('loading', function () {
       beforeEach(function () {

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b19065e3/package.json
----------------------------------------------------------------------
diff --git a/package.json b/package.json
index 714d347..510c6eb 100644
--- a/package.json
+++ b/package.json
@@ -77,6 +77,7 @@
     "react-autocomplete": "^0.1.4",
     "react-bootstrap": "^0.28.5",
     "react-dom": "^15.0.1",
+    "react-select": "^1.0.0-beta12",
     "request": "^2.54.0",
     "semver": "^5.1.0",
     "send": "^0.13.1",

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b19065e3/webpack.config.dev.js
----------------------------------------------------------------------
diff --git a/webpack.config.dev.js b/webpack.config.dev.js
index 23aa847..edb4833 100644
--- a/webpack.config.dev.js
+++ b/webpack.config.dev.js
@@ -44,6 +44,7 @@ module.exports = {
       test: /\.less$/,
       loader: 'style!css!less'
     },
+    { test: /\.css$/, loader: 'style!css' },
     {
       test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
       loader: 'url?limit=10000&mimetype=application/font-woff&name=dashboard.assets/fonts/[name].[ext]'

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b19065e3/webpack.config.release.js
----------------------------------------------------------------------
diff --git a/webpack.config.release.js b/webpack.config.release.js
index 4bdedde..492e053 100644
--- a/webpack.config.release.js
+++ b/webpack.config.release.js
@@ -69,6 +69,7 @@ module.exports = {
       test: /\.less$/,
       loader: 'style!css!less'
     },
+    { test: /\.css$/, loader: 'style!css' },
     {
       test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
       loader: 'url?limit=10000&mimetype=application/font-woff&name=dashboard.assets/fonts/[name].[ext]'

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b19065e3/webpack.config.test.js
----------------------------------------------------------------------
diff --git a/webpack.config.test.js b/webpack.config.test.js
index 1783f22..be053c6 100644
--- a/webpack.config.test.js
+++ b/webpack.config.test.js
@@ -48,6 +48,7 @@ module.exports = {
       test: /\.less$/,
       loader: 'style!css!less'
     },
+    { test: /\.css$/, loader: 'style!css' },
     {
       test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
       loader: 'url?limit=10000&mimetype=application/font-woff&name=dashboard.assets/fonts/[name].[ext]'


Mime
View raw message