Jelajahi Sumber

Debounce autosuggestions requests

Eugen Rochko 7 tahun lalu
induk
melakukan
c4eb63c1d4

+ 4 - 1
.babelrc

@@ -1,4 +1,7 @@
 {
   "presets": ["es2015", "react"],
-  "plugins": ["transform-object-rest-spread"]
+  "plugins": [
+    "transform-decorators-legacy",
+    "transform-object-rest-spread"
+  ]
 }

+ 2 - 0
app/assets/javascripts/components/features/compose/components/search.jsx

@@ -2,6 +2,7 @@ import PureRenderMixin from 'react-addons-pure-render-mixin';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import Autosuggest from 'react-autosuggest';
 import AutosuggestAccountContainer from '../containers/autosuggest_account_container';
+import { debounce } from 'react-decoration';
 
 const getSuggestionValue = suggestion => suggestion.value;
 
@@ -77,6 +78,7 @@ const Search = React.createClass({
     this.props.onClear();
   },
 
+  @debounce(500)
   onSuggestionsFetchRequested ({ value }) {
     value = value.replace('#', '');
     this.props.onFetch(value.trim());

+ 2 - 0
app/assets/javascripts/components/features/ui/components/compose_form.jsx

@@ -6,6 +6,7 @@ import ReplyIndicator from './reply_indicator';
 import UploadButton from './upload_button';
 import Autosuggest from 'react-autosuggest';
 import AutosuggestAccountContainer from '../../compose/containers/autosuggest_account_container';
+import { debounce } from 'react-decoration';
 
 const getTokenForSuggestions = (str, caretPosition) => {
   let word;
@@ -104,6 +105,7 @@ const ComposeForm = React.createClass({
     this.props.onClearSuggestions();
   },
 
+  @debounce(500)
   onSuggestionsFetchRequested ({ value }) {
     const textarea = this.autosuggest.input;
 

+ 2 - 0
package.json

@@ -41,8 +41,10 @@
     "sinon": "^1.17.6"
   },
   "dependencies": {
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "emojione": "^2.2.6",
     "react-autosuggest": "^7.0.1",
+    "react-decoration": "^1.4.0",
     "react-motion": "^0.4.5",
     "react-responsive": "^1.1.5",
     "react-router-scroll": "^0.3.2"

+ 30 - 1
yarn.lock

@@ -304,6 +304,10 @@ asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
 
+autobind-decorator@1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/autobind-decorator/-/autobind-decorator-1.3.3.tgz#41b1915ee742859c872b5d1743d10745254b83b4"
+
 autoprefixer@^6.3.1, autoprefixer@^6.3.7:
   version "6.5.0"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.5.0.tgz#910de0aa0f22af4c7d50367cbc9d4d412945162f"
@@ -519,6 +523,10 @@ babel-plugin-syntax-class-properties@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz#d7eb23b79a317f8543962c505b827c7d6cac27de"
 
+babel-plugin-syntax-decorators@^6.1.18:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz#312563b4dbde3cc806cee3e416cceeaddd11ac0b"
+
 babel-plugin-syntax-exponentiation-operator@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de"
@@ -555,6 +563,14 @@ babel-plugin-transform-class-properties@6.11.5:
     babel-plugin-syntax-class-properties "^6.8.0"
     babel-runtime "^6.9.1"
 
+babel-plugin-transform-decorators-legacy:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-decorators-legacy/-/babel-plugin-transform-decorators-legacy-1.3.4.tgz#741b58f6c5bce9e6027e0882d9c994f04f366925"
+  dependencies:
+    babel-plugin-syntax-decorators "^6.1.18"
+    babel-runtime "^6.2.0"
+    babel-template "^6.3.0"
+
 babel-plugin-transform-es2015-arrow-functions@^6.3.13:
   version "6.8.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.8.0.tgz#5b63afc3181bdc9a8c4d481b5a4f3f7d7fef3d9d"
@@ -931,7 +947,14 @@ babel-runtime@^6.0.0, babel-runtime@^6.11.6, babel-runtime@^6.5.0, babel-runtime
     core-js "^2.4.0"
     regenerator-runtime "^0.9.5"
 
-babel-template@^6.14.0, babel-template@^6.15.0, babel-template@^6.16.0, babel-template@^6.8.0:
+babel-runtime@^6.2.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.18.0.tgz#0f4177ffd98492ef13b9f823e9994a02584c9078"
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.9.5"
+
+babel-template@^6.14.0, babel-template@^6.15.0, babel-template@^6.16.0, babel-template@^6.3.0, babel-template@^6.8.0:
   version "6.16.0"
   resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.16.0.tgz#e149dd1a9f03a35f817ddbc4d0481988e7ebc8ca"
   dependencies:
@@ -3841,6 +3864,12 @@ react-autowhatever@^7.0.0:
     react-themeable "^1.1.0"
     section-iterator "^2.0.0"
 
+react-decoration:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/react-decoration/-/react-decoration-1.4.0.tgz#54c30aed3aa81d1fe8f844b37db0a536e4190da9"
+  dependencies:
+    autobind-decorator "1.3.3"
+
 react-deep-force-update@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-1.0.1.tgz#f911b5be1d2a6fe387507dd6e9a767aa2924b4c7"