feat: add web implementation SvgXml and others component (#2382)

# Summary
We want to make available SvgXml and other components in the web
platform.

## Test Plan
We can easily check how that works by opening `Test1813`.

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| Web     |         |

---------

Co-authored-by: Jakub Grzywacz <jakub.grzywacz@swmansion.com>
This commit is contained in:
Bohdan Artiukhov
2024-07-31 11:56:48 +02:00
committed by GitHub
parent a27e17f505
commit a2e843bc9c
2 changed files with 18 additions and 9 deletions
+9 -8
View File
@@ -1,15 +1,16 @@
import * as React from 'react'; import * as React from 'react';
import { useState, useEffect, Component } from 'react'; import { useState, useEffect, Component } from 'react';
import type { ImageSourcePropType } from 'react-native'; import { Image, Platform, type ImageSourcePropType } from 'react-native';
import { Platform, Image } from 'react-native'; import { fetchText, type SvgProps } from 'react-native-svg';
import { resolveAssetUri } from '../lib/resolveAssetUri';
import { fetchText } from 'react-native-svg';
import { SvgCss, SvgWithCss } from './css'; import { SvgCss, SvgWithCss } from './css';
import type { SvgProps } from 'react-native-svg';
export function getUriFromSource(source: ImageSourcePropType) { export function getUriFromSource(source: ImageSourcePropType) {
const resolvedAssetSource = Image.resolveAssetSource(source); const resolvedAssetSource =
return resolvedAssetSource.uri; Platform.OS === 'web'
? resolveAssetUri(source)
: Image.resolveAssetSource(source);
return resolvedAssetSource?.uri;
} }
export function loadLocalRawResourceDefault(source: ImageSourcePropType) { export function loadLocalRawResourceDefault(source: ImageSourcePropType) {
@@ -39,7 +40,7 @@ export async function loadAndroidRawResource(uri: string) {
export function loadLocalRawResourceAndroid(source: ImageSourcePropType) { export function loadLocalRawResourceAndroid(source: ImageSourcePropType) {
const uri = getUriFromSource(source); const uri = getUriFromSource(source);
if (isUriAnAndroidResourceIdentifier(uri)) { if (uri && isUriAnAndroidResourceIdentifier(uri)) {
return loadAndroidRawResource(uri); return loadAndroidRawResource(uri);
} else { } else {
return fetchText(uri); return fetchText(uri);
+9 -1
View File
@@ -78,7 +78,10 @@ export function SvgXml(props: XmlProps) {
} }
} }
export async function fetchText(uri: string) { export async function fetchText(uri?: string) {
if (!uri) {
return null;
}
const response = await fetch(uri); const response = await fetch(uri);
if (response.ok || (response.status === 0 && uri.startsWith('file://'))) { if (response.ok || (response.status === 0 && uri.startsWith('file://'))) {
return await response.text(); return await response.text();
@@ -207,6 +210,11 @@ export function astToReact(
): JSX.Element | string { ): JSX.Element | string {
if (typeof value === 'object') { if (typeof value === 'object') {
const { Tag, props, children } = value; const { Tag, props, children } = value;
if (props?.class) {
props.className = props.class;
delete props.class;
}
return ( return (
<Tag key={index} {...props}> <Tag key={index} {...props}>
{(children as (AST | string)[]).map(astToReact)} {(children as (AST | string)[]).map(astToReact)}