How to use the @elastic/eui.keyCodes.DOWN function in @elastic/eui

*   } else if (dir === Direction.down) {
 *     // moved down
 *   }
 * }
 */
import { uiModules } from '../../../modules';
import { keyCodes } from '@elastic/eui';

export const Direction = {
  up: 'up',
  down: 'down'
};

const directionMapping = {
  [keyCodes.UP]: Direction.up,
  [keyCodes.DOWN]: Direction.down
};

uiModules.get('kibana')
  .directive('keyboardMove', ($parse, $timeout) => ({
    restrict: 'A',
    link(scope, el, attr) {
      const callbackFn = $parse(attr.keyboardMove);
      el.keydown((ev) => {
        if (ev.which in directionMapping) {
          ev.preventDefault();
          const direction = directionMapping[ev.which];
          scope.$apply(() => callbackFn(scope, { direction }));
          // Keep focus on that element, even though it might be attached somewhere
          // else in the DOM (e.g. because it has a new position in an ng-repeat).
          $timeout(() => el.focus());
        }

it('should call the callback when pressing down', () => {
    const spy = sinon.spy();
    const button = createTestButton(spy);
    button.trigger(createKeydownEvent(keyCodes.DOWN));
    expect(spy.calledWith(Direction.down)).to.be(true);
  });
});

onSizeHandleKeyDown = ev => {
    const { keyCode } = ev;
    if (keyCode === keyCodes.UP || keyCode === keyCodes.DOWN) {
      ev.preventDefault();
      this.setState(prevState => {
        const newHeight = prevState.height + (keyCode === keyCodes.UP ? -15 : 15);
        return {
          height: Math.max(MIN_CHART_HEIGHT, newHeight),
        };
      });
    }
  };

onKeyDown={(ev: React.KeyboardEvent) => {
              if (ev.keyCode === keyCodes.ENTER) {
                restore();
                return;
              }

              let currentIdx = selectedIndex;

              if (ev.keyCode === keyCodes.UP) {
                ev.preventDefault();
                --currentIdx;
              } else if (ev.keyCode === keyCodes.DOWN) {
                ev.preventDefault();
                ++currentIdx;
              }

              const nextSelectedIndex = Math.min(Math.max(0, currentIdx), requests.length - 1);

              setViewingReq(requests[nextSelectedIndex]);
              selectedReq.current = requests[nextSelectedIndex];
              setSelectedIndex(nextSelectedIndex);
              scrollIntoView(nextSelectedIndex);
            }}
            role="listbox"

onKeyDown = event => {
    const { isSuggestionsVisible, index, value } = this.state;
    switch (event.keyCode) {
      case keyCodes.DOWN:
        event.preventDefault();
        if (isSuggestionsVisible) {
          this.incrementIndex(index);
        } else {
          this.setState({ isSuggestionsVisible: true, index: 0 });
        }
        break;
      case keyCodes.UP:
        event.preventDefault();
        if (isSuggestionsVisible) {
          this.decrementIndex(index);
        }
        break;
      case keyCodes.ENTER:
        event.preventDefault();
        if (isSuggestionsVisible && this.props.suggestions[index]) {

handleKeyDown = (event, group, index) => {
    switch (event.keyCode) {
      case keyCodes.ENTER:
        this.selectGroup(group);
        break;
      case keyCodes.SPACE:
        this.selectGroup(group);
        break;
      case keyCodes.DOWN:
        this.moveDown(event, index);
        break;
      case keyCodes.UP:
        this.moveUp(event, index);
        break;
    }
  }

this.onKeyDown = (ev) => {
          if (ev.keyCode === keyCodes.ENTER) {
            this.restore();
            return;
          }

          if (ev.keyCode === keyCodes.UP) {
            ev.preventDefault();
            this.selectedIndex--;
          } else if (ev.keyCode === keyCodes.DOWN) {
            ev.preventDefault();
            this.selectedIndex++;
          }

          this.selectedIndex = Math.min(Math.max(0, this.selectedIndex), this.reqs.length - 1);
          this.selectedReq = this.reqs[this.selectedIndex];
          this.viewingReq = this.reqs[this.selectedIndex];
        };
      }

return (ev) => {
    if (ev.keyCode === keyCodes.UP) {
      ev.preventDefault();
      callback('up');
    } else if (ev.keyCode === keyCodes.DOWN) {
      ev.preventDefault();
      callback('down');
    }
  };
}

handleKeyDown = (event, group, index) => {
    switch (event.keyCode) {
      case keyCodes.ENTER:
        this.selectGroup(group);
        break;
      case keyCodes.SPACE:
        this.selectGroup(group);
        break;
      case keyCodes.DOWN:
        this.moveDown(event, index);
        break;
      case keyCodes.UP:
        this.moveUp(event, index);
        break;
    }
  };

return (ev) => {
    if (ev.keyCode === keyCodes.UP) {
      ev.preventDefault();
      callback('up');
    } else if (ev.keyCode === keyCodes.DOWN) {
      ev.preventDefault();
      callback('down');
    }
  };
}