react-native-marked 8.1.1 → 8.2.0

package/src/components/MDImage.tsx

@@ -1,90 +1,90 @@
-import React, {
-	type FunctionComponent,
-	memo,
-	useEffect,
-	useState,
-} from "react";
-import {
-	ActivityIndicator,
-	Image,
-	ImageBackground,
-	type ImageStyle,
-} from "react-native";
-
-type MDImageProps = {
-	uri: string;
-	label?: string;
-	alt?: string;
-	style?: ImageStyle;
-};
-
-type MDImageState = {
-	isLoading: boolean;
-	aspectRatio: number | undefined;
-};
-
-const MDImage: FunctionComponent<MDImageProps> = ({
-	uri,
-	label,
-	alt = "Image",
-	style,
-}) => {
-	const [imageState, setImageState] = useState<MDImageState>({
-		isLoading: true,
-		aspectRatio: undefined,
-	});
-
-	/**
-	 * Fetches image dimension
-	 * Sets aspect ratio if resolved
-	 */
-	const fetchOriginalSizeFromRemoteImage = () => {
-		Image.getSize(
-			uri,
-			(width: number, height: number) => {
-				if (width > 0 && height > 0) {
-					setImageState({ isLoading: false, aspectRatio: width / height });
-				} else {
-					setImageState({ isLoading: false, aspectRatio: undefined });
-				}
-			},
-			() => {
-				setImageState((current) => {
-					return {
-						...current,
-						isLoading: false,
-					};
-				});
-			},
-		);
-	};
-
-	useEffect(() => {
-		fetchOriginalSizeFromRemoteImage();
-	});
-
-	return (
-		<ImageBackground
-			source={{ uri: uri }}
-			style={{
-				width: "100%",
-				aspectRatio: imageState.aspectRatio,
-			}}
-			aria-label={label}
-			accessibilityRole="image"
-			accessibilityLabel={alt}
-			accessibilityHint={undefined}
-			imageStyle={style}
-			testID="react-native-marked-md-image"
-		>
-			{imageState.isLoading ? (
-				<ActivityIndicator
-					testID="react-native-marked-md-image-activity-indicator"
-					size={"small"}
-				/>
-			) : null}
-		</ImageBackground>
-	);
-};
-
-export default memo(MDImage);
+import React, {
+	type FunctionComponent,
+	memo,
+	useEffect,
+	useState,
+} from "react";
+import {
+	ActivityIndicator,
+	Image,
+	ImageBackground,
+	type ImageStyle,
+} from "react-native";
+
+type MDImageProps = {
+	uri: string;
+	label?: string;
+	alt?: string;
+	style?: ImageStyle;
+};
+
+type MDImageState = {
+	isLoading: boolean;
+	aspectRatio: number | undefined;
+};
+
+const MDImage: FunctionComponent<MDImageProps> = ({
+	uri,
+	label,
+	alt = "Image",
+	style,
+}) => {
+	const [imageState, setImageState] = useState<MDImageState>({
+		isLoading: true,
+		aspectRatio: undefined,
+	});
+
+	/**
+	 * Fetches image dimension
+	 * Sets aspect ratio if resolved
+	 */
+	const fetchOriginalSizeFromRemoteImage = () => {
+		Image.getSize(
+			uri,
+			(width: number, height: number) => {
+				if (width > 0 && height > 0) {
+					setImageState({ isLoading: false, aspectRatio: width / height });
+				} else {
+					setImageState({ isLoading: false, aspectRatio: undefined });
+				}
+			},
+			() => {
+				setImageState((current) => {
+					return {
+						...current,
+						isLoading: false,
+					};
+				});
+			},
+		);
+	};
+
+	useEffect(() => {
+		fetchOriginalSizeFromRemoteImage();
+	});
+
+	return (
+		<ImageBackground
+			source={{ uri: uri }}
+			style={{
+				width: "100%",
+				aspectRatio: imageState.aspectRatio,
+			}}
+			aria-label={label}
+			accessibilityRole="image"
+			accessibilityLabel={alt}
+			accessibilityHint={undefined}
+			imageStyle={style}
+			testID="react-native-marked-md-image"
+		>
+			{imageState.isLoading ? (
+				<ActivityIndicator
+					testID="react-native-marked-md-image-activity-indicator"
+					size={"small"}
+				/>
+			) : null}
+		</ImageBackground>
+	);
+};
+
+export default memo(MDImage);

package/src/components/MDList.tsx

@@ -1,46 +1,46 @@
-import Decimal from "@jsamr/counter-style/presets/decimal";
-import Disc from "@jsamr/counter-style/presets/disc";
-import { MarkedListItem, useMarkedList } from "@jsamr/react-native-li";
-import React, {
-	Fragment,
-	type FunctionComponent,
-	memo,
-	type ReactNode,
-} from "react";
-import type { TextStyle, ViewStyle } from "react-native";
-
-type MDListProps = {
-	ordered: boolean;
-	li: ReactNode[];
-	listStyle?: ViewStyle;
-	textStyle?: TextStyle;
-	startIndex?: number;
-};
-
-const MDList: FunctionComponent<MDListProps> = ({
-	ordered,
-	li,
-	listStyle,
-	textStyle,
-	startIndex,
-}) => {
-	const listProps = useMarkedList({
-		counterRenderer: ordered ? Decimal : Disc,
-		startIndex: startIndex,
-		markerTextStyle: textStyle,
-		markerBoxStyle: listStyle,
-		length: li.length,
-	});
-
-	return (
-		<Fragment>
-			{li.map((node, index) => (
-				<MarkedListItem key={index} index={index} {...listProps}>
-					{node}
-				</MarkedListItem>
-			))}
-		</Fragment>
-	);
-};
-
-export default memo(MDList);
+import Decimal from "@jsamr/counter-style/presets/decimal";
+import Disc from "@jsamr/counter-style/presets/disc";
+import { MarkedListItem, useMarkedList } from "@jsamr/react-native-li";
+import React, {
+	Fragment,
+	type FunctionComponent,
+	memo,
+	type ReactNode,
+} from "react";
+import type { TextStyle, ViewStyle } from "react-native";
+
+type MDListProps = {
+	ordered: boolean;
+	li: ReactNode[];
+	listStyle?: ViewStyle;
+	textStyle?: TextStyle;
+	startIndex?: number;
+};
+
+const MDList: FunctionComponent<MDListProps> = ({
+	ordered,
+	li,
+	listStyle,
+	textStyle,
+	startIndex,
+}) => {
+	const listProps = useMarkedList({
+		counterRenderer: ordered ? Decimal : Disc,
+		startIndex: startIndex,
+		markerTextStyle: textStyle,
+		markerBoxStyle: listStyle,
+		length: li.length,
+	});
+
+	return (
+		<Fragment>
+			{li.map((node, index) => (
+				<MarkedListItem key={index} index={index} {...listProps}>
+					{node}
+				</MarkedListItem>
+			))}
+		</Fragment>
+	);
+};
+
+export default memo(MDList);

package/src/components/MDSvg.tsx

@@ -1,108 +1,108 @@
-import React, {
-	type FunctionComponent,
-	memo,
-	useEffect,
-	useRef,
-	useState,
-} from "react";
-import { ActivityIndicator, type LayoutChangeEvent, View } from "react-native";
-import { SvgFromXml } from "react-native-svg";
-import { getSvgDimensions } from "./../utils/svg";
-
-type MDSvgProps = {
-	uri: string;
-	alt?: string;
-};
-
-type MdSvgState = {
-	viewBox: string;
-	width: number;
-	height: number;
-	svg: string;
-	isLoading: boolean;
-	error: boolean;
-	aspectRatio?: number;
-};
-
-const MDSvg: FunctionComponent<MDSvgProps> = ({ uri, alt = "image" }) => {
-	const isFirstLoad = useRef<boolean>(false);
-	const [layoutWidth, setLayoutWidth] = useState<number>(0);
-	const [svgState, setSvgState] = useState<MdSvgState>({
-		viewBox: "",
-		width: 0,
-		height: 0,
-		svg: "",
-		isLoading: true,
-		error: false,
-		aspectRatio: undefined,
-	});
-	useEffect(() => {
-		const fetchSvg = async () => {
-			try {
-				const res = await fetch(uri);
-				const text = await res.text();
-				if (res.status !== 200) {
-					throw new Error("Status is not 200");
-				}
-				const { viewBox, width, height } = getSvgDimensions(text);
-
-				setSvgState({
-					width,
-					height,
-					viewBox,
-					svg: text,
-					isLoading: false,
-					error: false,
-					aspectRatio: width / height,
-				});
-			} catch (_e) {
-				setSvgState((state) => ({
-					...state,
-					error: true,
-					isLoading: false,
-				}));
-			}
-		};
-
-		fetchSvg();
-	}, [uri]);
-
-	const onLayout = (event: LayoutChangeEvent) => {
-		if (!isFirstLoad.current) {
-			setLayoutWidth(event.nativeEvent.layout.width ?? 0);
-			isFirstLoad.current = true;
-		}
-	};
-
-	const getWidth = () => {
-		if (layoutWidth && svgState.width) {
-			return Math.min(layoutWidth, svgState.width);
-		}
-		return "100%";
-	};
-
-	return (
-		<View
-			style={{ width: getWidth(), aspectRatio: svgState.aspectRatio }}
-			onLayout={onLayout}
-		>
-			{svgState.isLoading ? (
-				<ActivityIndicator size={"small"} />
-			) : (
-				<SvgFromXml
-					xml={svgState.svg}
-					width={"100%"}
-					height={"100%"}
-					viewBox={svgState.viewBox}
-					aria-label={alt}
-					accessibilityRole="image"
-					accessibilityLabel={alt}
-					accessibilityHint={undefined}
-					testID="react-native-marked-md-svg"
-				/>
-			)}
-		</View>
-	);
-};
-
-export default memo(MDSvg);
+import React, {
+	type FunctionComponent,
+	memo,
+	useEffect,
+	useRef,
+	useState,
+} from "react";
+import { ActivityIndicator, type LayoutChangeEvent, View } from "react-native";
+import { SvgFromXml } from "react-native-svg";
+import { getSvgDimensions } from "./../utils/svg";
+
+type MDSvgProps = {
+	uri: string;
+	alt?: string;
+};
+
+type MdSvgState = {
+	viewBox: string;
+	width: number;
+	height: number;
+	svg: string;
+	isLoading: boolean;
+	error: boolean;
+	aspectRatio?: number;
+};
+
+const MDSvg: FunctionComponent<MDSvgProps> = ({ uri, alt = "image" }) => {
+	const isFirstLoad = useRef<boolean>(false);
+	const [layoutWidth, setLayoutWidth] = useState<number>(0);
+	const [svgState, setSvgState] = useState<MdSvgState>({
+		viewBox: "",
+		width: 0,
+		height: 0,
+		svg: "",
+		isLoading: true,
+		error: false,
+		aspectRatio: undefined,
+	});
+	useEffect(() => {
+		const fetchSvg = async () => {
+			try {
+				const res = await fetch(uri);
+				const text = await res.text();
+				if (res.status !== 200) {
+					throw new Error("Status is not 200");
+				}
+				const { viewBox, width, height } = getSvgDimensions(text);
+
+				setSvgState({
+					width,
+					height,
+					viewBox,
+					svg: text,
+					isLoading: false,
+					error: false,
+					aspectRatio: width / height,
+				});
+			} catch (_e) {
+				setSvgState((state) => ({
+					...state,
+					error: true,
+					isLoading: false,
+				}));
+			}
+		};
+
+		fetchSvg();
+	}, [uri]);
+
+	const onLayout = (event: LayoutChangeEvent) => {
+		if (!isFirstLoad.current) {
+			setLayoutWidth(event.nativeEvent.layout.width ?? 0);
+			isFirstLoad.current = true;
+		}
+	};
+
+	const getWidth = () => {
+		if (layoutWidth && svgState.width) {
+			return Math.min(layoutWidth, svgState.width);
+		}
+		return "100%";
+	};
+
+	return (
+		<View
+			style={{ width: getWidth(), aspectRatio: svgState.aspectRatio }}
+			onLayout={onLayout}
+		>
+			{svgState.isLoading ? (
+				<ActivityIndicator size={"small"} />
+			) : (
+				<SvgFromXml
+					xml={svgState.svg}
+					width={"100%"}
+					height={"100%"}
+					viewBox={svgState.viewBox}
+					aria-label={alt}
+					accessibilityRole="image"
+					accessibilityLabel={alt}
+					accessibilityHint={undefined}
+					testID="react-native-marked-md-svg"
+				/>
+			)}
+		</View>
+	);
+};
+
+export default memo(MDSvg);

package/src/components/MDTable.tsx

@@ -1,60 +1,60 @@
-import React, { type FunctionComponent, memo, type ReactNode } from "react";
-import { ScrollView, View, type ViewStyle } from "react-native";
-import { Cell, Table, TableWrapper } from "react-native-reanimated-table";
-
-type MDTableProps = {
-	header: ReactNode[][];
-	rows: ReactNode[][][];
-	widthArr: number[];
-	rowStyle?: ViewStyle;
-	cellStyle?: ViewStyle;
-	borderColor?: string;
-	borderWidth?: number;
-	tableStyle?: ViewStyle;
-};
-
-const MDTable: FunctionComponent<MDTableProps> = ({
-	header,
-	rows,
-	widthArr,
-	cellStyle,
-	rowStyle,
-	tableStyle,
-	borderColor,
-	borderWidth,
-}) => {
-	return (
-		<ScrollView horizontal={true}>
-			<Table borderStyle={{ borderColor, borderWidth }} style={tableStyle}>
-				<TableWrapper style={rowStyle}>
-					{header.map((headerCol, index) => {
-						return (
-							<Cell
-								width={widthArr[index]}
-								key={`${index}`}
-								data={<View style={cellStyle}>{headerCol}</View>}
-							/>
-						);
-					})}
-				</TableWrapper>
-				{rows.map((rowData, index) => {
-					return (
-						<TableWrapper key={`${index}`} style={rowStyle}>
-							{rowData.map((cellData, cellIndex) => {
-								return (
-									<Cell
-										width={widthArr[cellIndex]}
-										key={`${cellIndex}`}
-										data={<View style={cellStyle}>{cellData}</View>}
-									/>
-								);
-							})}
-						</TableWrapper>
-					);
-				})}
-			</Table>
-		</ScrollView>
-	);
-};
-
-export default memo(MDTable);
+import React, { type FunctionComponent, memo, type ReactNode } from "react";
+import { ScrollView, View, type ViewStyle } from "react-native";
+import { Cell, Table, TableWrapper } from "react-native-reanimated-table";
+
+type MDTableProps = {
+	header: ReactNode[][];
+	rows: ReactNode[][][];
+	widthArr: number[];
+	rowStyle?: ViewStyle;
+	cellStyle?: ViewStyle;
+	borderColor?: string;
+	borderWidth?: number;
+	tableStyle?: ViewStyle;
+};
+
+const MDTable: FunctionComponent<MDTableProps> = ({
+	header,
+	rows,
+	widthArr,
+	cellStyle,
+	rowStyle,
+	tableStyle,
+	borderColor,
+	borderWidth,
+}) => {
+	return (
+		<ScrollView horizontal={true}>
+			<Table borderStyle={{ borderColor, borderWidth }} style={tableStyle}>
+				<TableWrapper style={rowStyle}>
+					{header.map((headerCol, index) => {
+						return (
+							<Cell
+								width={widthArr[index]}
+								key={`${index}`}
+								data={<View style={cellStyle}>{headerCol}</View>}
+							/>
+						);
+					})}
+				</TableWrapper>
+				{rows.map((rowData, index) => {
+					return (
+						<TableWrapper key={`${index}`} style={rowStyle}>
+							{rowData.map((cellData, cellIndex) => {
+								return (
+									<Cell
+										width={widthArr[cellIndex]}
+										key={`${cellIndex}`}
+										data={<View style={cellStyle}>{cellData}</View>}
+									/>
+								);
+							})}
+						</TableWrapper>
+					);
+				})}
+			</Table>
+		</ScrollView>
+	);
+};
+
+export default memo(MDTable);