|
|
|
|
@ -4,16 +4,16 @@ import { AutoComplete, Option, Options } from '@rocket.chat/fuselage'; |
|
|
|
|
import RoomAvatar from '../../../client/components/avatar/RoomAvatar'; |
|
|
|
|
import { useEndpointData } from '../../../client/hooks/useEndpointData'; |
|
|
|
|
|
|
|
|
|
const query = (term = '') => ({ selector: JSON.stringify({ term }) }); |
|
|
|
|
const query = (name = '') => ({ selector: JSON.stringify({ name }) }); |
|
|
|
|
|
|
|
|
|
const Avatar = ({ value, type, avatarETag, ...props }) => <RoomAvatar size={Options.AvatarSize} room={{ type, _id: value, avatarETag }} {...props} />; |
|
|
|
|
|
|
|
|
|
const RoomAutoComplete = React.memo((props) => { |
|
|
|
|
const [filter, setFilter] = useState(''); |
|
|
|
|
const { value: data } = useEndpointData('rooms.autocomplete.channelAndPrivate', useMemo(() => query(filter), [filter])); |
|
|
|
|
const options = useMemo(() => (data && data.items.map(({ name, _id, avatarETag, t }) => ({ |
|
|
|
|
const options = useMemo(() => (data && data.items.map(({ name, _id, fname, avatarETag, t }) => ({ |
|
|
|
|
value: _id, |
|
|
|
|
label: { name, avatarETag, type: t }, |
|
|
|
|
label: { name: fname || name, avatarETag, type: t }, |
|
|
|
|
}))) || [], [data]); |
|
|
|
|
|
|
|
|
|
return <AutoComplete |
|
|
|
|
@ -23,7 +23,7 @@ const RoomAutoComplete = React.memo((props) => { |
|
|
|
|
renderSelected={({ |
|
|
|
|
value, |
|
|
|
|
label, |
|
|
|
|
}) => <><RoomAvatar size='x20' room={{ _id: value, ...label }} /> {label?.name}</>} |
|
|
|
|
}) => <Option label={label.name} avatar={<Avatar value={value} room={{ _id: value, ...label }} />} />} |
|
|
|
|
renderItem={({ value, label, ...props }) => <Option key={value} {...props} label={label.name} avatar={<Avatar value={value} {...label} />} />} |
|
|
|
|
options={ options } |
|
|
|
|
/>; |
|
|
|
|
|
Guilherme Gazzo
5 years ago
committed by