graphiql - npm Package Compare versions

Comparing version 0.6.3 to 0.6.4

dist/components/DocExplorer.js

@@ -20,2 +20,6 @@ 'use strict';
 
+var _debounce = require('../utility/debounce');
+
+var _debounce2 = _interopRequireDefault(_debounce);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -68,6 +72,6 @@
 
-    _this.handleSearch = function (event) {
+    _this.handleSearch = function (value) {
       _this.showSearch({
         name: 'Search Results',
-        searchValue: event.target.value
+        searchValue: value
       });
@@ -122,7 +126,3 @@ };
         title = 'Documentation Explorer';
-        content = _react2.default.createElement(SchemaDoc, {
-          schema: schema,
-          onClickType: this.handleClickTypeOrField,
-          onSearch: this.handleSearch
-        });
+        content = _react2.default.createElement(SchemaDoc, { schema: schema, onClickType: this.handleClickTypeOrField });
       }
@@ -174,4 +174,3 @@
             isShown: shouldSearchBoxAppear,
-            onSearch: this.handleSearch,
-            searchValue: navItem ? navItem.searchValue : ''
+            onSearch: this.handleSearch
           }),
@@ -224,6 +223,18 @@ this.props.schema ? content : spinnerDiv
 
-  function SearchBox() {
+  function SearchBox(props) {
     _classCallCheck(this, SearchBox);
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(SearchBox).apply(this, arguments));
+    var _this2 = _possibleConstructorReturn(this, Object.getPrototypeOf(SearchBox).call(this, props));
+
+    _this2.handleChange = function (event) {
+      _this2.setState({ value: event.target.value });
+      _this2._debouncedOnSearch();
+    };
+
+    _this2.state = { value: null };
+
+    _this2._debouncedOnSearch = (0, _debounce2.default)(200, function () {
+      _this2.props.onSearch(_this2.state.value);
+    });
+    return _this2;
   }
@@ -233,4 +244,4 @@
     key: 'shouldComponentUpdate',
-    value: function shouldComponentUpdate(nextProps) {
-      return nextProps.isShown !== this.props.isShown || nextProps.searchValue !== this.props.searchValue;
+    value: function shouldComponentUpdate(nextProps, nextState) {
+      return nextProps.isShown !== this.props.isShown || nextState.value !== this.state.value;
     }
@@ -240,4 +251,2 @@ }, {
     value: function render() {
-      var _this3 = this;
-
       return _react2.default.createElement(
@@ -250,7 +259,5 @@ 'div',
           _react2.default.createElement('input', { className: 'search-box-input',
-            onChange: function onChange(event) {
-              return _this3.props.onSearch(event);
-            },
+            onChange: this.handleChange,
             type: 'text',
-            value: this.props.searchValue,
+            value: this.state.value,
             placeholder: 'Search the schema ...'
@@ -271,3 +278,2 @@ })
   isShown: _react.PropTypes.bool,
-  searchValue: _react.PropTypes.string,
   onSearch: _react.PropTypes.func
@@ -293,3 +299,3 @@ };
     value: function render() {
-      var _this5 = this;
+      var _this4 = this;
 
@@ -306,42 +312,35 @@ var searchValue = this.props.searchValue;
 
-      Object.keys(typeMap).forEach(function (typeName) {
-        var type = typeMap[typeName];
-        var matchedOn = [];
-        if (_this5._isMatch(typeName, searchValue)) {
-          matchedOn.push('Type Name');
-        }
+      var typeNames = Object.keys(typeMap);
+      var _iteratorNormalCompletion = true;
+      var _didIteratorError = false;
+      var _iteratorError = undefined;
 
-        if (matchedOn.length) {
-          matchedTypes.push(_react2.default.createElement(
-            'div',
-            { className: 'doc-category-item' },
-            _react2.default.createElement(TypeLink, { type: type, onClick: onClickType })
-          ));
-        }
+      try {
+        var _loop = function _loop() {
+          var typeName = _step.value;
 
-        if (type.getFields) {
-          (function () {
-            var fields = type.getFields();
-            Object.keys(fields).forEach(function (fieldName) {
-              var field = fields[fieldName];
-              if (_this5._isMatch(fieldName, searchValue)) {
-                matchedFields.push(_react2.default.createElement(
-                  'div',
-                  { className: 'doc-category-item' },
-                  _react2.default.createElement(
-                    'a',
-                    { className: 'field-name',
-                      onClick: function onClick(event) {
-                        return onClickField(field, type, event);
-                      } },
-                    field.name
-                  ),
-                  ' on ',
-                  _react2.default.createElement(TypeLink, { type: type, onClick: onClickType })
-                ));
-              } else if (field.args && field.args.length) {
-                var matches = field.args.filter(function (arg) {
-                  return _this5._isMatch(arg.name, searchValue);
-                });
-                if (matches.length > 0) {
+          if (matchedTypes.length + matchedFields.length >= 100) {
+            return 'break';
+          }
+
+          var type = typeMap[typeName];
+          var matchedOn = [];
+          if (_this4._isMatch(typeName, searchValue)) {
+            matchedOn.push('Type Name');
+          }
+
+          if (matchedOn.length) {
+            matchedTypes.push(_react2.default.createElement(
+              'div',
+              { className: 'doc-category-item' },
+              _react2.default.createElement(TypeLink, { type: type, onClick: onClickType })
+            ));
+          }
+
+          if (type.getFields) {
+            (function () {
+              var fields = type.getFields();
+              Object.keys(fields).forEach(function (fieldName) {
+                var field = fields[fieldName];
+                if (_this4._isMatch(fieldName, searchValue)) {
                   matchedFields.push(_react2.default.createElement(
@@ -358,30 +357,69 @@ 'div',
                     ),
-                    '(',
-                    _react2.default.createElement(
-                      'span',
-                      null,
-                      matches.map(function (arg) {
-                        return _react2.default.createElement(
-                          'span',
-                          { className: 'arg', key: arg.name },
-                          _react2.default.createElement(
-                            'span',
-                            { className: 'arg-name' },
-                            arg.name
-                          ),
-                          ': ',
-                          _react2.default.createElement(TypeLink, { type: arg.type, onClick: onClickType })
-                        );
-                      })
-                    ),
-                    ')',
                     ' on ',
                     _react2.default.createElement(TypeLink, { type: type, onClick: onClickType })
                   ));
+                } else if (field.args && field.args.length) {
+                  var matches = field.args.filter(function (arg) {
+                    return _this4._isMatch(arg.name, searchValue);
+                  });
+                  if (matches.length > 0) {
+                    matchedFields.push(_react2.default.createElement(
+                      'div',
+                      { className: 'doc-category-item' },
+                      _react2.default.createElement(
+                        'a',
+                        { className: 'field-name',
+                          onClick: function onClick(event) {
+                            return onClickField(field, type, event);
+                          } },
+                        field.name
+                      ),
+                      '(',
+                      _react2.default.createElement(
+                        'span',
+                        null,
+                        matches.map(function (arg) {
+                          return _react2.default.createElement(
+                            'span',
+                            { className: 'arg', key: arg.name },
+                            _react2.default.createElement(
+                              'span',
+                              { className: 'arg-name' },
+                              arg.name
+                            ),
+                            ': ',
+                            _react2.default.createElement(TypeLink, { type: arg.type, onClick: onClickType })
+                          );
+                        })
+                      ),
+                      ')',
+                      ' on ',
+                      _react2.default.createElement(TypeLink, { type: type, onClick: onClickType })
+                    ));
+                  }
                 }
-              }
-            });
-          })();
+              });
+            })();
+          }
+        };
+
+        for (var _iterator = typeNames[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+          var _ret = _loop();
+
+          if (_ret === 'break') break;
         }
-      });
+      } catch (err) {
+        _didIteratorError = true;
+        _iteratorError = err;
+      } finally {
+        try {
+          if (!_iteratorNormalCompletion && _iterator.return) {
+            _iterator.return();
+          }
+        } finally {
+          if (_didIteratorError) {
+            throw _iteratorError;
+          }
+        }
+      }
 
@@ -715,3 +753,3 @@ if (matchedTypes.length === 0 && matchedFields.length === 0) {
     value: function render() {
-      var _this9 = this;
+      var _this8 = this;
 
@@ -743,3 +781,3 @@ var field = this.props.field;
                 ': ',
-                _react2.default.createElement(TypeLink, { type: arg.type, onClick: _this9.props.onClickType })
+                _react2.default.createElement(TypeLink, { type: arg.type, onClick: _this8.props.onClickType })
               ),
@@ -746,0 +784,0 @@ _react2.default.createElement(Description, {

package.json

 {
   "name": "graphiql",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "description": "An graphical interactive in-browser GraphQL IDE.",
@@ -5,0 +5,0 @@ "contributors": [

README.md

@@ -6,3 +6,3 @@ GraphiQL
 
-[![Build Status](https://travis-ci.org/graphql/graphiql.svg)](https://travis-ci.org/graphql/graphiql)
+[![Build Status](https://travis-ci.org/graphql/graphiql.svg?branch=master)](https://travis-ci.org/graphql/graphiql)
 
@@ -9,0 +9,0 @@ ![](resources/graphiql.png)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1806890

increased by0.21%

Lines of code

33238

increased by0.22%

No dependency changes