mirror of
https://github.com/aculix/vector-drawable-nextjs.git
synced 2025-12-06 06:08:24 +00:00
fix click to upload
This commit is contained in:
Yath Seanghay
parent
fe8a460933
commit
a424e868ab
5
package-lock.json
generated
5
package-lock.json
generated
@ -3820,6 +3820,11 @@
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
|
||||
"integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg=="
|
||||
},
|
||||
"react-sage": {
|
||||
"version": "0.1.5",
|
||||
"resolved": "https://registry.npmjs.org/react-sage/-/react-sage-0.1.5.tgz",
|
||||
"integrity": "sha512-a/L5ILib9QitvtCY4BwFnMwaelgDfg7Hg8lNWaYlqxVHtbrvc6A/JGPwcUX/6/ye9LZ4Vo7bCRFKamdMKEpvcA=="
|
||||
},
|
||||
"react-svg": {
|
||||
"version": "11.2.1",
|
||||
"resolved": "https://registry.npmjs.org/react-svg/-/react-svg-11.2.1.tgz",
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
"react": "17.0.1",
|
||||
"react-dom": "17.0.1",
|
||||
"react-inlinesvg": "^2.2.2",
|
||||
"react-sage": "^0.1.5",
|
||||
"react-svg": "^11.2.1",
|
||||
"vector-drawable-svg": "^1.0.2"
|
||||
}
|
||||
|
||||
@ -12,7 +12,6 @@ export default class MyDocument extends Document {
|
||||
<link rel="manifest" href="/site.webmanifest"/>
|
||||
<meta name="msapplication-TileColor" content="#1F1F1F"/>
|
||||
<meta name="theme-color" content="#1F1F1F"/>
|
||||
<title>VectorDrawable to SVG</title>
|
||||
|
||||
<meta property="og:url" content="https://vector-drawable.vercel.app/" />
|
||||
<meta property="og:title" content="Android VectorDrawable to SVG" />
|
||||
|
||||
131
pages/index.js
131
pages/index.js
@ -1,7 +1,9 @@
|
||||
import {ReactSVG} from "react-svg";
|
||||
import {useState} from "react";
|
||||
import {useState, useEffect} from "react";
|
||||
import {transform} from 'vector-drawable-svg';
|
||||
import SVG from 'react-inlinesvg';
|
||||
import { useFilePicker } from 'react-sage';
|
||||
import Head from "next/head";
|
||||
|
||||
|
||||
const STATE_NONE = -1
|
||||
@ -52,14 +54,15 @@ async function readFileContent(file) {
|
||||
|
||||
export default function Home() {
|
||||
|
||||
const { files, onClick: onDropzoneClick, errors, HiddenFileInput } = useFilePicker({
|
||||
maxFileSize: 1,
|
||||
})
|
||||
|
||||
const [dragState, setDragState] = useState(STATE_NONE)
|
||||
const [isEnabled, setEnabled] = useState(false);
|
||||
const [vectorDrawableFile, setVectorDrawableFile] = useState()
|
||||
const [transformedSvg, setTransformedSvg] = useState()
|
||||
|
||||
function handleFileUpload() {
|
||||
setEnabled(!isEnabled)
|
||||
}
|
||||
|
||||
function dragEnter(e) {
|
||||
e.stopPropagation();
|
||||
@ -73,6 +76,19 @@ export default function Home() {
|
||||
setDragState(STATE_DRAG_LEAVE)
|
||||
}
|
||||
|
||||
|
||||
async function proceedFile(file) {
|
||||
const xmlContent = await readFileContent(file);
|
||||
const svgContent = transformXmlOrNull(xmlContent);
|
||||
if (!svgContent) {
|
||||
return;
|
||||
}
|
||||
|
||||
setTransformedSvg(svgContent);
|
||||
setVectorDrawableFile(file);
|
||||
setDragState(STATE_DROP);
|
||||
}
|
||||
|
||||
async function fileDrop(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
@ -81,15 +97,7 @@ export default function Home() {
|
||||
if (files.length > 0) {
|
||||
const file = files[0]
|
||||
if (isValidFileType(file.type)) {
|
||||
const xmlContent = await readFileContent(file);
|
||||
const svgContent = transformXmlOrNull(xmlContent);
|
||||
if (!svgContent) {
|
||||
return;
|
||||
}
|
||||
|
||||
setTransformedSvg(svgContent);
|
||||
setVectorDrawableFile(file);
|
||||
setDragState(STATE_DROP);
|
||||
await proceedFile(file);
|
||||
return;
|
||||
}
|
||||
}
|
||||
@ -103,7 +111,8 @@ export default function Home() {
|
||||
e.dataTransfer.dropEffect = 'copy';
|
||||
}
|
||||
|
||||
function clearUpload() {
|
||||
function clearUpload(e) {
|
||||
e.stopPropagation();
|
||||
setDragState(STATE_NONE)
|
||||
setVectorDrawableFile(null);
|
||||
setTransformedSvg(null);
|
||||
@ -121,48 +130,68 @@ export default function Home() {
|
||||
downloadBlob(filename, transformedSvg);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const getDataUrls = async () => {
|
||||
if (files.length <= 0) {
|
||||
return;
|
||||
}
|
||||
const file = files[0];
|
||||
if (isValidFileType(file.type)) {
|
||||
await proceedFile(file);
|
||||
}
|
||||
}
|
||||
getDataUrls()
|
||||
}, [files])
|
||||
|
||||
return (
|
||||
<div className="vd-form-center">
|
||||
<div className="vd-head vd-form-center">
|
||||
<h1 className="vd-title">VectorDrawable to SVG</h1>
|
||||
<p className="vd-subtitle">Drop a valid vector drawable file here.</p>
|
||||
<div
|
||||
onDragEnter={dragEnter}
|
||||
onDragLeave={dragLeave}
|
||||
onDragOver={dragOver}
|
||||
onDrop={fileDrop}
|
||||
onClick={handleFileUpload}
|
||||
className={"vd-dropzone " + dropzoneClassOfState(dragState)}>
|
||||
<div className="vd-placeholder">
|
||||
<ReactSVG src="plus.svg"/>
|
||||
</div>
|
||||
<div className="vd-image-container">
|
||||
<div onClick={clearUpload} className="text-button-icon">
|
||||
<ReactSVG src="close.svg"/>
|
||||
</div>
|
||||
<div className="vd-image">
|
||||
<SVG src={transformedSvg} width={300} height={300} title="SVG"/>
|
||||
</div>
|
||||
<>
|
||||
<Head>
|
||||
<title>VectorDrawable to SVG</title>
|
||||
</Head>
|
||||
<div className="vd-form-center">
|
||||
<HiddenFileInput accept=".xml" multiple={false} />
|
||||
<div className="vd-head vd-form-center">
|
||||
<h1 className="vd-title">VectorDrawable to SVG</h1>
|
||||
<p className="vd-subtitle">Drop a valid vector drawable file here.</p>
|
||||
<div
|
||||
onDragEnter={dragEnter}
|
||||
onDragLeave={dragLeave}
|
||||
onDragOver={dragOver}
|
||||
onDrop={fileDrop}
|
||||
onClick={onDropzoneClick}
|
||||
|
||||
<div className="vd-filename">
|
||||
<p>{vectorDrawableFile?.name}</p>
|
||||
className={"vd-dropzone " + dropzoneClassOfState(dragState)}>
|
||||
<div className="vd-placeholder">
|
||||
<ReactSVG src="plus.svg"/>
|
||||
</div>
|
||||
<div className="vd-image-container">
|
||||
<div onClick={clearUpload} className="text-button-icon">
|
||||
<ReactSVG src="close.svg"/>
|
||||
</div>
|
||||
<div className="vd-image">
|
||||
<SVG src={transformedSvg} width={300} height={300} title="SVG"/>
|
||||
</div>
|
||||
|
||||
<div className="vd-filename">
|
||||
<p>{vectorDrawableFile?.name}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button onClick={downloadCurrentSvg} disabled={!vectorDrawableFile} className="vd-download">
|
||||
<ReactSVG src="/download-circular-button.svg"/>
|
||||
Download
|
||||
</button>
|
||||
|
||||
<footer className="vd-footer">
|
||||
<div className="vd-github">
|
||||
<a href="https://github.com/seanghay/vector-drawable-nextjs" target="_blank">
|
||||
<ReactSVG src="/github.svg"/>
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<button onClick={downloadCurrentSvg} disabled={!vectorDrawableFile} className="vd-download">
|
||||
<ReactSVG src="/download-circular-button.svg"/>
|
||||
Download
|
||||
</button>
|
||||
|
||||
<footer className="vd-footer">
|
||||
<div className="vd-github">
|
||||
<a href="https://github.com/seanghay/vector-drawable-nextjs" target="_blank">
|
||||
<ReactSVG src="/github.svg"/>
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user