react-onboarding-sdk/dist/screens/FileUploadScreen.js

A TypeScript SDK for fetching onboarding data from backend APIs with React hooks support

import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Alert } from 'react-native';
import * as DocumentPicker from 'expo-document-picker';
export default function FileUploadScreen({ content, actions, onAction }) {
    const [fileName, setFileName] = React.useState();
    const [fileMeta, setFileMeta] = React.useState();
    const pick = async () => {
        try {
            const res = await DocumentPicker.getDocumentAsync({ type: '*/*', copyToCacheDirectory: true });
            if (res.type === 'success') {
                setFileName(res.name);
                setFileMeta({ name: res.name, type: res.mimeType, size: res.size, uri: res.uri });
                Alert.alert('Selected', res.name);
            }
        }
        catch (e) {
            Alert.alert('Error', 'Failed to pick document');
        }
    };
    const renderPreview = () => {
        if (!fileMeta)
            return null;
        const type = (fileMeta.type || '').toLowerCase();
        if (type.startsWith('video/')) {
            return _jsxs(Text, { style: styles.previewNote, children: ["\uD83C\uDFAC Video selected: ", fileMeta.name] });
        }
        if (type.startsWith('audio/')) {
            return _jsxs(Text, { style: styles.previewNote, children: ["\uD83C\uDFB5 Audio selected: ", fileMeta.name] });
        }
        return _jsxs(Text, { style: styles.previewNote, children: ["\uD83D\uDCC4 File selected: ", fileMeta.name] });
    };
    return (_jsxs(View, { style: [styles.container, { backgroundColor: content.background }], children: [_jsxs(View, { style: styles.center, children: [_jsx(Text, { style: [styles.title, { color: content.color }], children: content.title }), content.subtitle ? (_jsx(Text, { style: [styles.subtitle, { color: content.color }], children: content.subtitle })) : null, _jsx(TouchableOpacity, { style: styles.upload, onPress: pick, children: _jsx(Text, { style: styles.uploadText, children: fileName ? `✓ ${fileName}` : '📁 Choose File' }) }), renderPreview()] }), _jsx(View, { style: styles.actions, children: actions.map((a, idx) => (_jsx(TouchableOpacity, { style: [styles.button, { backgroundColor: a.background }], onPress: () => onAction(a, fileName, fileMeta), children: _jsx(Text, { style: [styles.buttonText, { color: a.color }], children: a.label }) }, idx))) })] }));
}
const styles = StyleSheet.create({
    container: { flex: 1, justifyContent: 'space-between', padding: 20 },
    center: { flex: 1, alignItems: 'center', justifyContent: 'center' },
    title: { fontSize: 24, fontWeight: '700', textAlign: 'center', marginBottom: 12 },
    subtitle: { fontSize: 16, textAlign: 'center', marginBottom: 16 },
    upload: { backgroundColor: '#007AFF', paddingHorizontal: 20, paddingVertical: 10, borderRadius: 8, marginTop: 12 },
    uploadText: { color: '#fff', fontWeight: '600' },
    previewNote: { marginTop: 8, color: '#666' },
    actions: { flexDirection: 'row', justifyContent: 'space-around', paddingBottom: 32 },
    button: { paddingHorizontal: 24, paddingVertical: 12, borderRadius: 8 },
    buttonText: { fontSize: 16, fontWeight: '600' },
});
//# sourceMappingURL=FileUploadScreen.js.map