This commit is contained in:
parent
8d44eb6a09
commit
9a0b7c08d9
@ -36,6 +36,7 @@ export interface NoteProps {
|
|||||||
canClick?: boolean;
|
canClick?: boolean;
|
||||||
showMediaSpotlight?: boolean;
|
showMediaSpotlight?: boolean;
|
||||||
longFormPreview?: boolean;
|
longFormPreview?: boolean;
|
||||||
|
truncate?: boolean;
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -27,6 +27,8 @@ import { NoteProps } from "./Note";
|
|||||||
import { chainKey } from "@/Hooks/useThreadContext";
|
import { chainKey } from "@/Hooks/useThreadContext";
|
||||||
import { ProfileLink } from "@/Element/User/ProfileLink";
|
import { ProfileLink } from "@/Element/User/ProfileLink";
|
||||||
|
|
||||||
|
const TEXT_TRUNCATE_LENGTH = 400;
|
||||||
|
|
||||||
export function NoteInner(props: NoteProps) {
|
export function NoteInner(props: NoteProps) {
|
||||||
const { data: ev, related, highlight, options: opt, ignoreModeration = false, className } = props;
|
const { data: ev, related, highlight, options: opt, ignoreModeration = false, className } = props;
|
||||||
|
|
||||||
@ -43,6 +45,7 @@ export function NoteInner(props: NoteProps) {
|
|||||||
const [translated, setTranslated] = useState<NoteTranslation>();
|
const [translated, setTranslated] = useState<NoteTranslation>();
|
||||||
const [showTranslation, setShowTranslation] = useState(true);
|
const [showTranslation, setShowTranslation] = useState(true);
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage } = useIntl();
|
||||||
|
const [showMore, setShowMore] = useState(false);
|
||||||
|
|
||||||
const totalReactions = reactions.positive.length + reactions.negative.length + reposts.length + zaps.length;
|
const totalReactions = reactions.positive.length + reactions.negative.length + reposts.length + zaps.length;
|
||||||
|
|
||||||
@ -78,22 +81,46 @@ export function NoteInner(props: NoteProps) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const ToggleShowMore = () => (
|
||||||
|
<a
|
||||||
|
className="highlight"
|
||||||
|
onClick={e => {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
setShowMore(!showMore);
|
||||||
|
}}>
|
||||||
|
{showMore ? (
|
||||||
|
<FormattedMessage defaultMessage="Show less" id="qyJtWy" />
|
||||||
|
) : (
|
||||||
|
<FormattedMessage defaultMessage="Show more" id="aWpBzj" />
|
||||||
|
)}
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
|
||||||
const innerContent = useMemo(() => {
|
const innerContent = useMemo(() => {
|
||||||
const body = translated && showTranslation ? translated.text : ev?.content ?? "";
|
const body = translated && showTranslation ? translated.text : ev?.content ?? "";
|
||||||
const id = translated && showTranslation ? `${ev.id}-translated` : ev.id;
|
const id = translated && showTranslation ? `${ev.id}-translated` : ev.id;
|
||||||
|
const shouldTruncate = opt?.truncate && body.length > TEXT_TRUNCATE_LENGTH;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Text
|
<>
|
||||||
id={id}
|
{shouldTruncate && showMore && <ToggleShowMore />}
|
||||||
highlighText={props.searchedValue}
|
<Text
|
||||||
content={body}
|
id={id}
|
||||||
tags={ev.tags}
|
highlighText={props.searchedValue}
|
||||||
creator={ev.pubkey}
|
content={body}
|
||||||
depth={props.depth}
|
tags={ev.tags}
|
||||||
disableMedia={!(options.showMedia ?? true)}
|
creator={ev.pubkey}
|
||||||
disableMediaSpotlight={!(props.options?.showMediaSpotlight ?? true)}
|
depth={props.depth}
|
||||||
/>
|
disableMedia={!(options.showMedia ?? true)}
|
||||||
|
disableMediaSpotlight={!(props.options?.showMediaSpotlight ?? true)}
|
||||||
|
truncate={shouldTruncate && !showMore ? TEXT_TRUNCATE_LENGTH : undefined}
|
||||||
|
/>
|
||||||
|
{shouldTruncate && !showMore && <ToggleShowMore />}
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}, [
|
}, [
|
||||||
|
showMore,
|
||||||
ev,
|
ev,
|
||||||
translated,
|
translated,
|
||||||
showTranslation,
|
showTranslation,
|
||||||
@ -101,6 +128,8 @@ export function NoteInner(props: NoteProps) {
|
|||||||
props.depth,
|
props.depth,
|
||||||
options.showMedia,
|
options.showMedia,
|
||||||
props.options?.showMediaSpotlight,
|
props.options?.showMediaSpotlight,
|
||||||
|
opt?.truncate,
|
||||||
|
TEXT_TRUNCATE_LENGTH,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const transformBody = () => {
|
const transformBody = () => {
|
||||||
|
@ -15,6 +15,7 @@ export default function NoteQuote({ link, depth }: { link: NostrLink; depth?: nu
|
|||||||
depth={(depth ?? 0) + 1}
|
depth={(depth ?? 0) + 1}
|
||||||
options={{
|
options={{
|
||||||
showFooter: false,
|
showFooter: false,
|
||||||
|
truncate: true,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
@ -103,6 +103,9 @@ export function TimelineFragment(props: TimelineFragProps) {
|
|||||||
depth={0}
|
depth={0}
|
||||||
onClick={props.noteOnClick}
|
onClick={props.noteOnClick}
|
||||||
context={props.noteContext?.(e)}
|
context={props.noteContext?.(e)}
|
||||||
|
options={{
|
||||||
|
truncate: true,
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
),
|
),
|
||||||
)}
|
)}
|
||||||
|
@ -1343,6 +1343,9 @@
|
|||||||
"qtWLmt": {
|
"qtWLmt": {
|
||||||
"defaultMessage": "Like"
|
"defaultMessage": "Like"
|
||||||
},
|
},
|
||||||
|
"qyJtWy": {
|
||||||
|
"defaultMessage": "Show less"
|
||||||
|
},
|
||||||
"qydxOd": {
|
"qydxOd": {
|
||||||
"defaultMessage": "Science"
|
"defaultMessage": "Science"
|
||||||
},
|
},
|
||||||
|
@ -442,6 +442,7 @@
|
|||||||
"qkvYUb": "Add to Profile",
|
"qkvYUb": "Add to Profile",
|
||||||
"qmJ8kD": "Translation failed",
|
"qmJ8kD": "Translation failed",
|
||||||
"qtWLmt": "Like",
|
"qtWLmt": "Like",
|
||||||
|
"qyJtWy": "Show less",
|
||||||
"qydxOd": "Science",
|
"qydxOd": "Science",
|
||||||
"qz9fty": "Incorrect pin",
|
"qz9fty": "Incorrect pin",
|
||||||
"r3C4x/": "Software",
|
"r3C4x/": "Software",
|
||||||
|
Loading…
Reference in New Issue
Block a user