I am using Antd Typography component and it's ellipsis behaviour working inconsistently in different places. Please find the root cause and fix it.
Example value = These are channel specific settings right. Why to hide them based on features? Creator can manage settings before enabling the feature or he can set the settings beforehand and can enable the feature whenever needed. It will have clear visibility showing the settings always.
Think of such an example:
I enabled allow members to post having feed enabled. Now if I disabled feed and in channel settings I don’t know what was set previously. Now I want to give feed access to users with a limited time period but without allowing members to post. And now I can not see what was set previously before enabling the feed. So I have to enabled feed and then again go to channel settings to check it.
Why have such complications? These settings are not breaking anything. They can change it anytime and enabled/disable features accordingly.
Working:
1.
<CustomReadMoreContent
lines={onlyTextPost ? 3 : 1}
className="post-card__caption"
style={style}
>
{caption}
</CustomReadMoreContent>
2.
<Paragraph ellipsis={{ rows: 3, expandable: true, symbol: "more" }}>
{caption}
<span>
Design, a design language for background applications, is refined by
Ant UED Team.
</span>
</Paragraph>
Not working here:
<CustomReadMoreContent
className="comment-card__content__text"
lines={5}
seeMoreText="Read more"
seeLessText="Read less"
>
<MentionedContent content={text || ''} />
</CustomReadMoreContent>
MentionedContent component:
import React, { memo, useCallback, useMemo } from 'react';
import ReactLinkify from 'react-linkify';
import { useHistory } from 'react-router-dom';
import { useAppSelector } from '../../context/hooks';
import { useAppTheme } from '../../context/ThemeProvider';
import { ROUTES } from '../../types/routes';
const regex = /{{[0-9a-f]{24}#[\s\S]*?}}/g;
interface Props {
content: string;
showPlainText?: boolean;
disableMentionClick?: boolean;
}
const MentionedContent: React.FC<Props> = ({
content,
showPlainText,
disableMentionClick,
}) => {
const history = useHistory();
const { COLORS } = useAppTheme();
const { isTagMango } = useAppSelector(state => state.app);
const onClickMention = useCallback(
(mentionedUserId: string) => {
if (!isTagMango) {
history.push(ROUTES.USER_PROFILE.replace(':id', mentionedUserId));
} else {
window.open(
ROUTES.CREATOR_PROFILE.replace(':id', mentionedUserId),
'_blank',
);
}
},
[history, isTagMango],
);
const getNameFromMentiontag = (tag: string) =>
tag.substring(tag.indexOf('#') + 1, tag.length - 2);
const getIdFromMentiontag = (tag: string) =>
tag.substring(2, tag.indexOf('#'));
const textToRender = useMemo(() => {
const text = content;
const tagsRegexResult = `${text}`.match(regex);
const tags: string[] = [];
tagsRegexResult?.forEach(element => {
tags.push(element);
});
const comment = text as string;
const splits = comment.split(regex);
const nodes: React.ReactNode[] = [];
let newText = '';
splits.forEach((textPart, index) => {
nodes.push(textPart);
newText += textPart;
if (index < tags.length) {
const tag = tags[index];
const tagName = getNameFromMentiontag(tag);
const mentionedUserId = getIdFromMentiontag(tag);
newText += `@${tagName}`;
nodes.push(
<span
key={mentionedUserId}
role="button"
tabIndex={0}
onClick={
showPlainText || disableMentionClick
? undefined
: () => onClickMention(mentionedUserId)
}
style={
showPlainText
? undefined
: {
fontWeight: 600,
color: COLORS.INFO_ALT,
cursor: disableMentionClick ? undefined : 'pointer',
}
}
>
@{tagName}
</span>,
);
}
});
return { nodes, text: newText };
}, [
COLORS.INFO_ALT,
content,
disableMentionClick,
onClickMention,
showPlainText,
]);
if (showPlainText) return textToRender.nodes;
return <ReactLinkify>{textToRender.nodes}</ReactLinkify>;
};
export default memo(MentionedContent);
Result: '...Read more'
Please find the root cause why is it behaving differently and fix without affecting previous behaviours.
I need the solution ASAP. Can anyone please help me with the above issue?
SOCIAL SHARE CARD GENERATOR