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 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 | 1x 3x 3x 3x 3x 3x 1x 1x 1x 3x 3x 1x | /* eslint-disable react/prop-types */
import {Children, useRef} from 'react'
import isEqual from 'lodash.isequal'
import useMergeRefs from '@s-ui/react-hooks/lib/useMergeRefs'
import MoleculeDropdownList from '@s-ui/react-molecule-dropdown-list'
import MoleculeInputTags from '@s-ui/react-molecule-input-tags'
import InputWithClearUI from '../InputWithClearUI/index.js'
const MoleculeAutosuggestFieldMultiSelection = ({
allowDuplicates,
autoFocus,
autoComplete = 'nope',
children,
design,
disabled = false,
iconClear,
iconCloseTag = <span />,
id,
innerRefInput: refInput = {},
inputMode,
isOpen,
maxLength,
minLength,
onChange,
onChangeTags,
onClear,
onInputKeyDown,
onSelect,
onKeyDown,
onToggle,
placeholder,
required,
shape,
size,
tabIndex,
tags = [],
type,
value = ''
}) => {
const innerRefInput = useRef()
const moleculeInputRef = useMergeRefs(innerRefInput, refInput)
const handleMultiSelection = (ev, args = {}) => {
const {value} = args
let newTags = [...tags]
const existsTag = tags.some(tagValue => isEqual(tagValue, value))
if (existsTag) {
// delete
newTags = tags.filter(tagValue => !isEqual(tagValue, value))
} else {
// add
newTags.push(value)
}
typeof onChangeTags === 'function' &&
onChangeTags(ev, {
...args,
value: '',
tags: newTags
})
typeof onSelect === 'function' &&
onSelect(ev, {
...args,
value: '',
tags: newTags
})
typeof onToggle === 'function' && onToggle(ev, {isOpen: false})
innerRefInput.current && innerRefInput.current.focus()
}
const handleChangeTags = (ev, {tags, value, ...args}) => {
const isOpen = Boolean(value)
typeof onChangeTags === 'function' && onChangeTags(ev, {tags, value, ...args})
typeof onToggle === 'function' && onToggle(ev, {isOpen})
innerRefInput.current && innerRefInput.current.focus()
}
const handleChange = (ev, {value, ...args}) => {
const isOpen = Boolean(value)
typeof onChange === 'function' && onChange(ev, {value, ...args})
typeof onToggle === 'function' && onToggle(ev, {isOpen})
}
const handleClear = ev => {
if (!disabled) {
typeof onChange === 'function' && onChange(null, {value: ''})
typeof onChangeTags === 'function' && onChangeTags(null, {tags: []})
typeof onClear === 'function' && onClear(ev)
}
}
return (
<>
<InputWithClearUI
allowDuplicates={allowDuplicates}
autoComplete={autoComplete}
autoFocus={autoFocus}
disabled={disabled}
iconClear={iconClear}
id={id}
innerRefInput={moleculeInputRef}
inputMode={inputMode}
isOpen={isOpen}
isVisibleClear={!disabled && tags.length}
maxLength={maxLength}
minLength={minLength}
noBorder
onChange={handleChange}
onChangeTags={handleChangeTags}
onClick={onToggle}
onClickClear={handleClear}
onKeyDown={onInputKeyDown}
placeholder={!tags.length ? placeholder : ''}
required={required}
shape={shape}
tabIndex={tabIndex}
tags={tags}
tagsCloseIcon={iconCloseTag}
type={type}
value={value}
>
<MoleculeInputTags />
</InputWithClearUI>
{isOpen && (
<MoleculeDropdownList
checkbox
highlightQuery={value}
onSelect={handleMultiSelection}
onKeyDown={onKeyDown}
size={size}
value={tags}
visible={isOpen && Children.count(children) > 0}
design={design}
>
{children}
</MoleculeDropdownList>
)}
</>
)
}
MoleculeAutosuggestFieldMultiSelection.displayName = 'MoleculeAutosuggestFieldMultiSelection'
export default MoleculeAutosuggestFieldMultiSelection
|