tbleckert/react-select-search

View on GitHub
src/useHighlight.js

Summary

Maintainability
A
55 mins
Test Coverage
import { useState } from 'react';
import highlight from './lib/highlight';

export default function useHighlight(options, onSelect, ref) {
    const [highlighted, setHighlighted] = useState(-1);

    return [
        {
            onKeyDown: (e) => {
                const key = e.key.replace('Arrow', '').toLowerCase();

                if (key === 'down' || key === 'up') {
                    e.preventDefault();
                    setHighlighted(highlight(highlighted, key, options));
                }
            },
            onKeyUp: (e) => {
                if (e.key === 'Escape') {
                    e.preventDefault();
                    ref.current.blur();
                } else if (e.key === 'Enter') {
                    e.preventDefault();

                    if (options[highlighted]) {
                        onSelect(options[highlighted].value);
                    }
                }
            },
        },
        highlighted,
        setHighlighted,
    ];
}