63 lines
1.9 KiB
JavaScript
63 lines
1.9 KiB
JavaScript
// @flow
|
|
import React from 'react';
|
|
import classnames from 'classnames';
|
|
import MarkdownPreview from 'component/common/markdown-preview';
|
|
import ClaimTags from 'component/claimTags';
|
|
import Button from 'component/button';
|
|
|
|
type Props = {
|
|
uri: string,
|
|
claim: StreamClaim,
|
|
metadata: StreamMetadata,
|
|
user: ?any,
|
|
tags: any,
|
|
};
|
|
|
|
function FileDescription(props: Props) {
|
|
const { uri, claim, metadata, tags } = props;
|
|
const [expanded, setExpanded] = React.useState(false);
|
|
const [hasOverflow, setHasOverflow] = React.useState(false);
|
|
const [hasCalculatedOverflow, setHasCalculatedOverflow] = React.useState(false);
|
|
const descriptionRef = React.useRef();
|
|
|
|
React.useEffect(() => {
|
|
if (descriptionRef && descriptionRef.current) {
|
|
const element = descriptionRef.current;
|
|
const isOverflowing = element.scrollHeight > element.clientHeight;
|
|
setHasOverflow(isOverflowing);
|
|
setHasCalculatedOverflow(true);
|
|
}
|
|
}, [descriptionRef]);
|
|
|
|
if (!claim || !metadata) {
|
|
return <span className="empty">{__('Empty claim or metadata info.')}</span>;
|
|
}
|
|
|
|
const { description } = metadata;
|
|
|
|
if (!description && !(tags && tags.length)) return null;
|
|
|
|
return (
|
|
<div>
|
|
<div
|
|
ref={descriptionRef}
|
|
className={classnames({ 'media__info-text--contracted': !expanded, 'media__info-text--expanded': expanded })}
|
|
>
|
|
<MarkdownPreview className="markdown-preview--description" content={description} />
|
|
<ClaimTags uri={uri} type="large" />
|
|
</div>
|
|
{hasCalculatedOverflow && hasOverflow && (
|
|
<div className="media__info-expand">
|
|
{expanded ? (
|
|
<Button button="link" label={__('Less')} onClick={() => setExpanded(!expanded)} />
|
|
) : (
|
|
<Button button="link" label={__('More')} onClick={() => setExpanded(!expanded)} />
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default FileDescription;
|