45 lines
1.2 KiB
React
45 lines
1.2 KiB
React
|
// @flow
|
||
|
|
import TextareaSuggestionsItem from 'component/textareaSuggestionsItem';
|
||
|
|
import LbcSymbol from 'component/common/lbc-symbol';
|
||
|
|
import React from 'react';
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
filteredTop: string,
|
||
|
|
isResolvingUri: boolean,
|
||
|
|
uriFromQuery: string,
|
||
|
|
winningUri: string,
|
||
|
|
doResolveUri: (string) => void,
|
||
|
|
setTopSuggestion: (string) => void,
|
||
|
|
};
|
||
|
|
|
||
|
|
export default function TextareaTopSuggestion(props: Props) {
|
||
|
|
const { filteredTop, isResolvingUri, uriFromQuery, winningUri, doResolveUri, setTopSuggestion } = props;
|
||
|
|
|
||
|
|
React.useEffect(() => {
|
||
|
|
if (uriFromQuery) doResolveUri(uriFromQuery);
|
||
|
|
}, [doResolveUri, uriFromQuery]);
|
||
|
|
|
||
|
|
React.useEffect(() => {
|
||
|
|
if (winningUri) setTopSuggestion(winningUri);
|
||
|
|
}, [setTopSuggestion, winningUri]);
|
||
|
|
|
||
|
|
if (isResolvingUri) {
|
||
|
|
return (
|
||
|
|
<div className="textareaSuggestion">
|
||
|
|
<div className="media__thumb media__thumb--resolving" />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return filteredTop && filteredTop.length > 0 ? (
|
||
|
|
<div className="textareaSuggestions__row">
|
||
|
|
<div className="textareaSuggestions__label">
|
||
|
|
<LbcSymbol prefix={__('Most Supported')} />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<TextareaSuggestionsItem uri={filteredTop} />
|
||
|
|
<hr className="textareaSuggestions__topSeparator" />
|
||
|
|
</div>
|
||
|
|
) : null;
|
||
|
|
}
|