UNPKG

@awsui/components-react

Version:

On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en

45 lines 2.54 kB
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 import { useCallback, useState } from 'react'; export class HighlightType { constructor(type, moveFocus = type === 'keyboard') { this.type = type; this.moveFocus = moveFocus; } } export function useHighlightedOption({ options, isHighlightable, }) { const [highlightedIndex, setHighlightedIndexState] = useState(-1); const [highlightType, setHighlightType] = useState(new HighlightType('keyboard')); const setHighlightedIndex = useCallback((index, newHighlightType) => { setHighlightedIndexState(index); setHighlightType(oldHighlight => (oldHighlight.type !== newHighlightType.type ? newHighlightType : oldHighlight)); }, []); const highlightedOption = options[highlightedIndex] && isHighlightable(options[highlightedIndex]) ? options[highlightedIndex] : undefined; const moveHighlightFrom = (direction, startIndex = highlightedIndex, highlightType) => { const fromBottomEnd = startIndex === -1 && direction === -1; let newIndex = fromBottomEnd ? options.length : startIndex; do { newIndex += direction; } while (options[newIndex] && !isHighlightable(options[newIndex])); if (options[newIndex]) { setHighlightedIndex(newIndex, highlightType); } }; const moveHighlight = (direction, highlightType) => moveHighlightFrom(direction, highlightedIndex, highlightType); const highlightOption = useCallback((option, highlightType) => { const index = options.indexOf(option); setHighlightedIndex(index, highlightType); }, [options, setHighlightedIndex]); return [ { highlightType, highlightedIndex, highlightedOption }, { setHighlightedIndexWithMouse: (index, moveFocus = false) => setHighlightedIndex(index, new HighlightType('mouse', moveFocus)), moveHighlightWithKeyboard: (direction) => moveHighlight(direction, new HighlightType('keyboard')), highlightOptionWithKeyboard: (option) => highlightOption(option, new HighlightType('keyboard')), resetHighlightWithKeyboard: () => setHighlightedIndex(-1, new HighlightType('keyboard')), goHomeWithKeyboard: () => moveHighlightFrom(1, -1, new HighlightType('keyboard')), goEndWithKeyboard: () => moveHighlightFrom(-1, options.length, new HighlightType('keyboard')), }, ]; } //# sourceMappingURL=use-highlight-option.js.map