2f4dedfba2
* Add Channel Mention selection ability * Fix mentioned user name being smaller than other text * Improve logic for locating a mention * Fix mentioning with enter on livestream * Fix breaking for invalid URI query * Handle punctuation after mention * Fix name display and appeareance * Use canonical url * Fix missing search
32 lines
1,010 B
JavaScript
32 lines
1,010 B
JavaScript
// @flow
|
|
import { ComboboxOption } from '@reach/combobox';
|
|
import ChannelThumbnail from 'component/channelThumbnail';
|
|
import React from 'react';
|
|
|
|
type Props = {
|
|
claim: ?Claim,
|
|
uri?: string,
|
|
isResolvingUri: boolean,
|
|
};
|
|
|
|
export default function ChannelMentionSuggestion(props: Props) {
|
|
const { claim, uri, isResolvingUri } = props;
|
|
|
|
return !claim ? null : (
|
|
<ComboboxOption value={uri}>
|
|
{isResolvingUri ? (
|
|
<div className="channel-mention__suggestion">
|
|
<div className="media__thumb media__thumb--resolving" />
|
|
</div>
|
|
) : (
|
|
<div className="channel-mention__suggestion">
|
|
<ChannelThumbnail xsmall uri={uri} />
|
|
<span className="channel-mention__suggestion-label">
|
|
<div className="channel-mention__suggestion-title">{(claim.value && claim.value.title) || claim.name}</div>
|
|
<div className="channel-mention__suggestion-name">{claim.name}</div>
|
|
</span>
|
|
</div>
|
|
)}
|
|
</ComboboxOption>
|
|
);
|
|
}
|