Merge pull request #1 from brunoracosta/feature/add-possibility-of-cu…

…stom-end

Add possibility of custom end string

src/components/read-more-web.tsx

@@ -1,5 +1,6 @@
+import type { CSSProperties } from 'react';
+import React from 'react';
 import { ReadMore } from './read-more';
-import React, { CSSProperties } from 'react';
 
 export interface ReadMoreWebProps {
 	truncate: number | undefined;
@@ -8,6 +9,7 @@ export interface ReadMoreWebProps {
 	className?: string;
 	style?: CSSProperties;
 	children: React.ReactNode;
+	endTruncate?: string;
 }
 
 export const ReadMoreWeb: React.FC<ReadMoreWebProps> = ({
@@ -17,6 +19,7 @@ export const ReadMoreWeb: React.FC<ReadMoreWebProps> = ({
 	className,
 	style,
 	children,
+	endTruncate,
 }) => {
 	const [expanded, setExpanded] = React.useState(false);
 
@@ -27,6 +30,7 @@ export const ReadMoreWeb: React.FC<ReadMoreWebProps> = ({
 	return (
 		<ReadMore
 			truncate={truncate}
+			endTruncate={endTruncate}
 			expanded={expanded}
 			showMore={
 				<>

src/components/read-more.tsx

@@ -3,11 +3,16 @@ import React from 'react';
 interface ParseResult {
 	content: React.ReactNode | React.ReactNode[];
 	remaining: number;
+	endTruncate: string;
 }
 
 type Parse = (root: ParseResult, parse: Parse) => ParseResult;
 
-const parseString = (text: string, remaining: number): ParseResult => {
+const parseString = (
+	text: string,
+	remaining: number,
+	endTruncate: string,
+): ParseResult => {
 	if (!text?.length) {
 		return { content: text, remaining };
 	}
@@ -16,17 +21,17 @@ const parseString = (text: string, remaining: number): ParseResult => {
 		remaining <= 0
 			? ''
 			: text.length > remaining
-				? text.substring(0, remaining)
+				? text.substring(0, remaining) + endTruncate
 				: text;
 
 	return { content: newText, remaining: remaining - text.length };
 };
 
 const parse: Parse = (root, parseCallback) => {
-	const { content, remaining = 0 } = root;
+	const { content, remaining = 0, endTruncate = '' } = root;
 
 	if (typeof content === 'string') {
-		const result = parseString(content, remaining);
+		const result = parseString(content, remaining, endTruncate);
 		return result;
 	} else if (React.isValidElement(content)) {
 		const children = (content.props as { children?: React.ReactNode })
@@ -37,6 +42,7 @@ const parse: Parse = (root, parseCallback) => {
 				{
 					content: children,
 					remaining,
+					endTruncate,
 				},
 				parseCallback,
 			);
@@ -49,7 +55,7 @@ const parse: Parse = (root, parseCallback) => {
 
 		for (const child of content) {
 			const parsed = parseCallback(
-				{ content: child, remaining: newRemaining },
+				{ content: child, remaining: newRemaining, endTruncate },
 				parseCallback,
 			);
 			newRemaining = parsed.remaining;
@@ -63,7 +69,7 @@ const parse: Parse = (root, parseCallback) => {
 			}
 		}
 
-		return { content: list, remaining: newRemaining };
+		return { content: list, remaining: newRemaining, endTruncate };
 	}
 
 	return root;
@@ -73,17 +79,19 @@ export interface ReadMoreAdditionalProps {
 	expanded?: boolean;
 	showMore?: React.ReactNode;
 	showLess?: React.ReactNode;
+	endTruncate?: string;
 }
 
 const ReadMoreInner: React.FC<
 	{
 		children: React.ReactNode;
 		truncate: number;
 	} & ReadMoreAdditionalProps
-> = ({ truncate, expanded, showMore, showLess, children }) => {
+> = ({ truncate, expanded, showMore, showLess, children, endTruncate }) => {
 	const root: ParseResult = {
 		content: children,
 		remaining: truncate,
+		endTruncate,
 	};
 	const result = parse(root, parse);