Untitled
unknown
plain_text
a year ago
4.4 kB
4
Indexable
import React, { useState, useEffect } from 'react'; import { Grid, FormControl, InputLabel, Select, MenuItem, Button, Box, Typography } from '@mui/material'; import * as XLSX from 'xlsx'; const styles = { formControl: { '& .MuiInputBase-root': { color: '#000000', // Input text color }, '& .MuiInputLabel-root': { color: '#0288d1', // Input label color }, '& .MuiSelect-icon': { color: '#0288d1', // Dropdown arrow color }, '& .MuiOutlinedInput-root': { '& fieldset': { borderColor: '#0288d1', // Outline border color }, '&:hover fieldset': { borderColor: '#00acc1', // Hover border color }, '&.Mui-focused fieldset': { borderColor: '#00acc1', // Focused border color }, }, }, button: { backgroundColor: '#00acc1', // Custom button color color: '#ffffff', // Button text color '&:hover': { backgroundColor: '#00838f', // Button hover color }, }, errorText: { color: '#d32f2f', marginTop: '10px', }, }; function ConverterForm({ inputFile, setOutputFile, onInputTypeChange, fileTypeError }) { const [inputType, setInputType] = useState(''); const [outputType, setOutputType] = useState(''); useEffect(() => { onInputTypeChange(inputType); }, [inputType, onInputTypeChange]); const handleConvert = () => { // Conversion logic here // const reader = new FileReader(); // reader.onload = (e) => { // let output; // const data = new Uint8Array(e.target.result); // if (inputType === 'excel') { // const workbook = XLSX.read(data, { type: 'array' }); // output = XLSX.write(workbook, { bookType: outputType, type: 'array' }); // } else if (inputType === 'csv' || inputType === 'json') { // const text = new TextDecoder().decode(data); // if (inputType === 'csv' && outputType === 'json') { // const csvData = XLSX.utils.sheet_to_json(XLSX.utils.csv_to_sheet(text)); // output = new Blob([JSON.stringify(csvData)], { type: 'application/json' }); // } else if (inputType === 'json' && outputType === 'csv') { // const jsonData = JSON.parse(text); // const ws = XLSX.utils.json_to_sheet(jsonData); // output = XLSX.write({ SheetNames: ['Sheet1'], Sheets: { Sheet1: ws } }, { bookType: 'csv', type: 'array' }); // } // } // setOutputFile(new Blob([output], { type: outputType === 'json' ? 'application/json' : 'text/csv' })); // }; // reader.readAsArrayBuffer(inputFile); console.log('file converted'); }; return ( <Box marginTop={2}> <Grid container spacing={2}> <Grid item xs={12} sm={6}> <FormControl fullWidth variant="outlined" style={styles.formControl}> <InputLabel>Input File Type</InputLabel> <Select value={inputType} onChange={(e) => setInputType(e.target.value)} label="Input File Type"> <MenuItem value="json">JSON</MenuItem> <MenuItem value="csv">CSV</MenuItem> <MenuItem value="excel">Excel</MenuItem> </Select> </FormControl> </Grid> <Grid item xs={12} sm={6}> <FormControl fullWidth variant="outlined" style={styles.formControl}> <InputLabel>Output File Type</InputLabel> <Select value={outputType} onChange={(e) => setOutputType(e.target.value)} label="Output File Type"> <MenuItem value="json">JSON</MenuItem> <MenuItem value="csv">CSV</MenuItem> <MenuItem value="xlsx">Excel</MenuItem> </Select> </FormControl> </Grid> {fileTypeError && ( <Grid item xs={12}> <Typography variant="body2" style={styles.errorText}> {fileTypeError} </Typography> </Grid> )} <Grid item xs={12}> <Button variant="contained" style={styles.button} fullWidth onClick={handleConvert} disabled={Boolean(fileTypeError)} > Convert </Button> </Grid> </Grid> </Box> ); } export default ConverterForm;
Editor is loading...
Leave a Comment