couchdb-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From gar...@apache.org
Subject [2/2] fauxton commit: updated refs/heads/jump-to-docs to 2d99c7f
Date Wed, 18 May 2016 13:16:38 GMT
working


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

Branch: refs/heads/jump-to-docs
Commit: 2d99c7fd86e45f25d09b1e45df17f501742103ef
Parents: 842baeb
Author: Garren Smith <garren.smith@gmail.com>
Authored: Wed May 18 15:16:25 2016 +0200
Committer: Garren Smith <garren.smith@gmail.com>
Committed: Wed May 18 15:16:25 2016 +0200

----------------------------------------------------------------------
 app/addons/documents/jumptodoc.react.jsx | 74 +++++++++++++++++++--------
 1 file changed, 53 insertions(+), 21 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/2d99c7fd/app/addons/documents/jumptodoc.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/documents/jumptodoc.react.jsx b/app/addons/documents/jumptodoc.react.jsx
index 2692bd7..8b25e62 100644
--- a/app/addons/documents/jumptodoc.react.jsx
+++ b/app/addons/documents/jumptodoc.react.jsx
@@ -16,28 +16,60 @@ define([
   'react',
   'react-dom',
   'react-select',
-], (app, FauxtonAPI, React, ReactDOM, ReactSelect) => {
+  'lodash'
+], (app, FauxtonAPI, React, ReactDOM, ReactSelect, {debounce}) => {
 
-  const JumpToDoc = ({database, allDocs}) => {
-    const options = allDocs.map(doc => {
-      return {
-        value: doc.get('_id'),
-        label: doc.get('_id')
-      };
-    });
-    console.log('op', options);
-    return (
-      <div id="jump-to-doc-wrapper" class="input-append">
-        <ReactSelect
-          name="jump-to-doc"
-          placeholder="Document ID"
-          className="input-large"
-          options={options}
-          clearable={false}
-          onChange={(val) => {console.log('bbb', val);}} />
-      </div>
-    );
-  };
+  const JumpToDoc = React.createClass({
+    propTypes: {
+      database: React.PropTypes.object.isRequired,
+      allDocs: React.PropTypes.object.isRequired,
+    },
+    /*
+    This makes me so so so sad,
+    basically we have done something wrong with the positioning of our sidebar,
+    so the only way to get the dropdown to be visible is to make its position absolute
+    and position it relative to the control next to it.
+    */
+    positionSelect () {
+      const el = ReactDOM.findDOMNode(this);
+      const dimensions = $('.control-toggle-include-docs')[0].getBoundingClientRect();
+      $(el).find('.jump-to-doc').css({
+        position: 'absolute',
+        left: dimensions.left + 84 + 'px'
+      });
+    },
+
+    componentDidMount () {
+      this.positionSelect();
+       window.addEventListener("resize", debounce(() => this.positionSelect(), 150));
+    },
+
+    onChange ({value: docId}) {
+      var url = FauxtonAPI.urls('document', 'app', app.utils.safeURLName(this.props.database.id),
app.utils.safeURLName(docId) );
+      FauxtonAPI.navigate(url, {trigger: true});
+    },
+
+    render () {
+      const {database, allDocs} = this.props;
+      const options = allDocs.map(doc => {
+        return {
+          value: doc.get('_id'),
+          label: doc.get('_id')
+        };
+      });
+      return (
+        <div id="jump-to-doc" class="input-append">
+          <ReactSelect
+            name="jump-to-doc"
+            placeholder="Document ID"
+            className="input-large jump-to-doc"
+            options={options}
+            clearable={false}
+            onChange={this.onChange} />
+        </div>
+      );
+    }
+  });
 
   return {
     JumpToDoc,


Mime
View raw message