Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 | 1x 14x 14x 1x 1x 14x 14x 14x 1x | /* eslint-disable react/prop-types */
import {Children} from 'react'
import AtomInput from '@s-ui/react-atom-input'
import MoleculeDropdownList from '@s-ui/react-molecule-dropdown-list'
import InputWithClearUI from '../InputWithClearUI/index.js'
const MoleculeAutosuggestSingleSelection = ({
autoFocus,
'aria-expanded': ariaExpanded,
ariaLabel,
autoComplete = 'nope',
children,
design,
disabled,
iconClear,
id,
dropdownListId,
innerRefInput: refInput = {},
inputMode,
isOpen,
leftIcon,
maxLength,
minLength,
onChange,
onClear,
onClickRightIcon,
onInputKeyDown,
onKeyDown,
onSelect,
onToggle,
placeholder,
required,
rightButton,
rightIcon,
shape,
size,
tabIndex,
type,
value = '',
noBorder
}) => {
const handleSelection = (ev, {value, ...args}) => {
typeof onChange === 'function' && onChange(ev, {value, ...args})
typeof onSelect === 'function' && onSelect(ev, {value, ...args})
typeof onToggle === 'function' && onToggle(ev, {isOpen: false})
}
const handleChange = (ev, {value, ...args}) => {
typeof onChange === 'function' && onChange(ev, {value, ...args})
typeof onToggle === 'function' && onToggle(ev, {isOpen: true})
}
const handleClear = (ev, args = {}) => {
if (!disabled) {
typeof onChange === 'function' && onChange(null, {...args, value: ''})
typeof onClear === 'function' && onClear(ev)
}
}
const handleRightClick = (ev, args = {}) => {
typeof onClickRightIcon === 'function' && onClickRightIcon(ev, {...args, value})
}
return (
<>
<InputWithClearUI
role="combobox"
aria-haspopup="true"
aria-autocomplete="list"
aria-controls={dropdownListId}
aria-expanded={ariaExpanded}
ariaLabel={ariaLabel}
autoComplete={autoComplete}
autoFocus={autoFocus}
button={rightButton}
disabled={disabled}
iconClear={!disabled && iconClear}
id={id}
reference={refInput}
inputMode={inputMode}
isVisibleClear={value}
leftIcon={leftIcon}
maxLength={maxLength}
minLength={minLength}
onChange={handleChange}
onClickClear={handleClear}
onClickRightIcon={handleRightClick}
onKeyDown={onInputKeyDown}
placeholder={placeholder}
required={required}
rightIcon={rightIcon}
shape={shape}
tabIndex={tabIndex}
type={type}
value={value}
noBorder={noBorder}
>
<AtomInput />
</InputWithClearUI>
{(value || isOpen) && (
<MoleculeDropdownList
id={dropdownListId}
aria-labelledby={id}
size={size}
onSelect={handleSelection}
visible={isOpen && Children.count(children) > 0}
value={value}
highlightQuery={value}
onKeyDown={onKeyDown}
design={design}
>
{children}
</MoleculeDropdownList>
)}
</>
)
}
MoleculeAutosuggestSingleSelection.displayName = 'MoleculeAutosuggestSingleSelection'
export default MoleculeAutosuggestSingleSelection
|