Feat: added the new prop scrollToItem (#76)

I've completely redesigned scrollTo behaviour #70

From this very moment, you can control the behavior with newly introduced prop `scrollToItem` (defaults to true, which means default implementation, see the gif bellow)
![scrolltoitem](https://user-images.githubusercontent.com/8135252/42452843-70648be2-838b-11e8-94e4-c69383454980.gif)

If you are not satisfied you can pass your own function which takes (container: HTMLDivElement, Item: HTMLDivElement), [take a look for default implementation as an example](https://github.com/webscopeio/react-textarea-autocomplete/pull/76/files#diff-b5c8f479fd199c465e4e5fce91bed60dR3).

Example of usage:

```js
<ReactTextareaAutocomplete
	...
	scrollToItem={false} // to disable
```

```js
<ReactTextareaAutocomplete
	...
	scrollToItem={true} // to enable default implementation
```

```js
<ReactTextareaAutocomplete
	...
	scrollToItem={(container, item) => {/*do stuff*/}}
```

Author: jukben

.eslintrc

@@ -10,6 +10,7 @@
     "no-underscore-dangle": 0,
     "no-console": 0,
     "flowtype/no-weak-types": 0,
+    "import/prefer-default-export": 0,
     "react/forbid-prop-types": [0, { "forbid": ["object"] }]
   },
   "globals": {

README.md

@@ -41,6 +41,7 @@ or there is UMD build available. [Check out this pen as example](https://codepen
 | **trigger*** | Object: Trigger type | Define triggers and their corresponding behavior
 | **loadingComponent*** | React Component | Gets `data` props which is already fetched (and displayed) suggestion 
 | innerRef | Function: (HTMLTextAreaElement) => void) | Allows you to get React ref of the underlying textarea
+| scrollToItem | boolean \| (container: HTMLDivElement, item: HTMLDivElement) => void) | Defaults to true. With default implementation it will scroll the dropdown every time when the item gets out of the view. 
 | minChar | Number | Number of characters that user should type for trigger a suggestion. Defaults to 1.
 | onCaretPositionChange | Function: (number) => void | Listener called every time the textarea's caret position is changed. The listener is called with one attribute - caret position denoted by an integer number.
 | closeOnClickOutside | boolean | When it's true autocomplete will close when use click outside. Defaults to false.

example/App.jsx

@@ -308,7 +308,7 @@ class App extends React.Component {
             },
           }}
         />
-        {!showSecondTextarea ? null :
+        {!showSecondTextarea ? null : (
           <ReactTextareaAutocomplete
             style={{
               padding: 5,
@@ -336,7 +336,7 @@ class App extends React.Component {
               },
             }}
           />
-        }
+        )}
       </div>
     );
   }

src/List.jsx

@@ -79,9 +79,11 @@ export default class List extends React.Component<ListProps, ListState> {
     onSelect(getTextToReplace(value));
   };
 
-  selectItem = (item: Object | string) => {
+  selectItem = (item: Object | string, keyboard: boolean = false) => {
     this.setState({ selectedItem: item }, () => {
-      this.itemsRef[this.getId(item)].scrollIntoView();
+      if (keyboard) {
+        this.props.dropdownScroll(this.itemsRef[this.getId(item)]);
+      }
     });
   };
 
@@ -107,7 +109,10 @@ export default class List extends React.Component<ListProps, ListState> {
     }
 
     newPosition = (newPosition % values.length + values.length) % values.length; // eslint-disable-line
-    this.selectItem(values[newPosition]);
+    this.selectItem(
+      values[newPosition],
+      [KEY_CODES.DOWN, KEY_CODES.UP].includes(code)
+    );
   };
 
   isSelected = (item: Object | string): boolean => {

src/Textarea.jsx

@@ -7,6 +7,8 @@ import getCaretCoordinates from 'textarea-caret';
 import Listeners, { KEY_CODES } from './listener';
 import List from './List';
 
+import { defaultScrollToItem } from './utilities';
+
 import type {
   TextareaProps,
   TextareaState,
@@ -34,6 +36,7 @@ class ReactTextareaAutocomplete extends React.Component<
     movePopupAsYouType: false,
     value: '',
     minChar: 1,
+    scrollToItem: true,
   };
 
   constructor(props: TextareaProps) {
@@ -362,6 +365,7 @@ class ReactTextareaAutocomplete extends React.Component<
       'loadingComponent',
       'containerStyle',
       'minChar',
+      'scrollToItem',
       'ref',
       'innerRef',
       'onChange',
@@ -546,11 +550,30 @@ class ReactTextareaAutocomplete extends React.Component<
     }
   };
 
+  _dropdownScroll = (item: HTMLDivElement) => {
+    const { scrollToItem } = this.props;
+
+    if (!scrollToItem) return;
+
+    if (scrollToItem === true) {
+      defaultScrollToItem(this.dropdownRef, item);
+      return;
+    }
+
+    if (typeof scrollToItem !== 'function' || scrollToItem.length !== 2) {
+      throw new Error(
+        '`scrollToItem` has to be boolean (true for default implementation) or function with two parameters: container, item.'
+      );
+    }
+
+    scrollToItem(this.dropdownRef, item);
+  };
+
   props: TextareaProps;
 
   textareaRef: HTMLInputElement;
 
-  dropdownRef: ?HTMLDivElement;
+  dropdownRef: HTMLDivElement;
 
   tokenRegExp: RegExp;
 
@@ -610,6 +633,7 @@ class ReactTextareaAutocomplete extends React.Component<
           currentTrigger && (
             <div
               ref={ref => {
+                // $FlowFixMe
                 this.dropdownRef = ref;
               }}
               style={{ top, left, ...dropdownStyle }}
@@ -627,6 +651,7 @@ class ReactTextareaAutocomplete extends React.Component<
                     itemStyle={itemStyle}
                     getTextToReplace={textToReplace}
                     onSelect={this._onSelect}
+                    dropdownScroll={this._dropdownScroll}
                   />
                 )}
               {dataLoading && (

src/types.js

@@ -37,6 +37,7 @@ export type ListProps = {
   className: ?string,
   itemClassName: ?string,
   onSelect: textToReplaceType => void,
+  dropdownScroll: HTMLDivElement => void,
 };
 
 /**
@@ -69,6 +70,9 @@ export type TextareaProps = {
   onBlur: ?(SyntheticEvent<*> | Event) => void,
   onCaretPositionChange: ?(number) => void,
   innerRef: ?(HTMLTextAreaElement) => void,
+  scrollToItem:
+    | boolean
+    | ((container: HTMLDivElement, item: HTMLDivElement) => void),
   closeOnClickOutside?: boolean,
   movePopupAsYouType?: boolean,
   minChar: ?number,

src/utilities.js

@@ -0,0 +1,28 @@
+// @flow
+
+export function defaultScrollToItem(
+  container: HTMLDivElement,
+  item: HTMLDivElement
+) {
+  const itemHeight = parseInt(
+    getComputedStyle(item).getPropertyValue('height'),
+    10
+  );
+
+  const containerHight =
+    parseInt(getComputedStyle(container).getPropertyValue('height'), 10) -
+    itemHeight;
+
+  const itemOffsetTop = item.offsetTop;
+  const actualScrollTop = container.scrollTop;
+
+  if (
+    itemOffsetTop < actualScrollTop + containerHight &&
+    actualScrollTop < itemOffsetTop
+  ) {
+    return;
+  }
+
+  // eslint-disable-next-line
+  container.scrollTop = itemOffsetTop;
+}