60 lines · 2.1 KB · TypeScript
RawDownload
import { useState } from "react";import { ActivityIndicator, View } from "react-native";import { WebView } from "react-native-webview"; import { AppText as Text } from "../../components/AppText";import { LoadingStrip } from "../../components/LoadingStrip"; export function WorkspaceFileWebPreview(props: { readonly uri: string | null }) {  const [loadProgress, setLoadProgress] = useState(0);  const [loadError, setLoadError] = useState<string | null>(null);   if (props.uri === null) {    return (      <View className="flex-1 items-center justify-center gap-3 bg-card px-6">        <ActivityIndicator />        <Text className="text-center text-sm text-foreground-muted">Preparing preview...</Text>      </View>    );  }   return (    <View className="relative flex-1 bg-card">      {loadProgress > 0 && loadProgress < 1 ? <LoadingStrip progress={loadProgress} /> : null}      {loadError ? (        <View className="border-b border-border bg-card px-4 py-2">          <Text className="text-xs font-t3-bold text-foreground">Preview failed</Text>          <Text className="mt-0.5 text-xs leading-snug text-foreground-muted">{loadError}</Text>        </View>      ) : null}      <WebView        source={{ uri: props.uri }}        originWhitelist={["*"]}        allowsBackForwardNavigationGestures        allowsFullscreenVideo        setSupportMultipleWindows={false}        startInLoadingState        onLoadProgress={(event) => {          setLoadProgress(event.nativeEvent.progress);        }}        onLoadStart={() => {          setLoadProgress(0.05);          setLoadError(null);        }}        onLoadEnd={() => {          setLoadProgress(0);        }}        onError={(event) => {          setLoadProgress(0);          setLoadError(event.nativeEvent.description || "The file could not be rendered.");        }}        renderLoading={() => (          <View className="absolute inset-0 items-center justify-center bg-card">            <ActivityIndicator />          </View>        )}        style={{ flex: 1, backgroundColor: "transparent" }}      />    </View>  );}