Skip to content

Commit

Permalink
style: improve CSS background properties and update FileSelector comp…
Browse files Browse the repository at this point in the history 
…onent to use Button from react-bootstrap
  • Loading branch information
@afarago
afarago committed Nov 12, 2024
1 parent d8a9479 commit 1bfc92d
Show file tree
Hide file tree
Showing 2 changed files with 96 additions and 109 deletions.
26 changes: 6 additions & 20 deletions src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,36 +109,21 @@ a {
transparent 39.3px,
#f6c407 60px
);
background-size:
3px calc(100% + 120px),
calc(100% + 120px) 3px,
3px calc(100% + 120px),
calc(100% + 120px) 3px;
background-position:
0 0,
0 0,
100% 0,
0 100%;
background-size: 3px calc(100% + 120px), calc(100% + 120px) 3px,
3px calc(100% + 120px), calc(100% + 120px) 3px;
background-position: 0 0, 0 0, 100% 0, 0 100%;
background-repeat: no-repeat;
animation: dropActive-borderAnimation 0.8s infinite linear;
border-radius: 8px;
}

@keyframes dropActive-borderAnimation {
from {
background-position:
0 0,
-120px 0,
100% -120px,
0 100%;
background-position: 0 0, -120px 0, 100% -120px, 0 100%;
}

to {
background-position:
0 -120px,
0 0,
100% 0,
-120px 100%;
background-position: 0 -120px, 0 0, 100% 0, -120px 100%;
}
}

Expand Down Expand Up @@ -227,4 +212,5 @@ a {

.example-content-button {
margin-left: 0.4em;
font-size: 14px;
}
179 changes: 90 additions & 89 deletions src/FileSelector.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { useEffect, useRef } from 'react';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';

const FileSelector: React.FC<{
selectedFile: File | undefined;
Expand All @@ -12,103 +13,103 @@ const FileSelector: React.FC<{
isAdditionalCommentsChecked,
setIsAdditionalCommentsChecked,
}) => {
const fileInputRef = useRef<HTMLInputElement | null>(null);
// const [lastFile, setLastFile] = React.useState<File | undefined>(undefined);
const fileInputRef = useRef<HTMLInputElement | null>(null);
// const [lastFile, setLastFile] = React.useState<File | undefined>(undefined);

const handleAdditionalCommentsChange = (
event: React.ChangeEvent<HTMLInputElement>,
) => {
setIsAdditionalCommentsChecked(event.target.checked);
};

const handleExampleButtonClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
const path = (event.target as HTMLAnchorElement).dataset.file;
if (!path) {
return;
}
const handleAdditionalCommentsChange = (
event: React.ChangeEvent<HTMLInputElement>,
) => {
setIsAdditionalCommentsChecked(event.target.checked);
};

fetch(path)
.then(async (data) => {
const data2 = await data.blob();
const fname = path?.split('/')?.pop();
if (!fname) return false;
const file = new File([data2], fname);
const handleExampleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
const path = (event.target as HTMLAnchorElement).dataset.file;
if (!path) {
return;
}

const dataTransfer = new DataTransfer();
dataTransfer.items.add(file);
fetch(path)
.then(async (data) => {
const data2 = await data.blob();
const fname = path?.split('/')?.pop();
if (!fname) return false;
const file = new File([data2], fname);

// ($('#file-selector').get(0) as HTMLInputElement).files =
// dataTransfer.files;
setSelectedFile(file);
})
.catch((error: unknown) => {
console.error('::ERROR::', error);
});
return false;
};
const dataTransfer = new DataTransfer();
dataTransfer.items.add(file);

useEffect(() => {
if (fileInputRef.current && selectedFile) {
const dataTransfer = new DataTransfer();
dataTransfer.items.add(selectedFile);
fileInputRef.current.files = dataTransfer.files;
}
}, [selectedFile]);
// ($('#file-selector').get(0) as HTMLInputElement).files =
// dataTransfer.files;
setSelectedFile(file);
})
.catch((error: unknown) => {
console.error('::ERROR::', error);
});
return false;
};

return (
<div>
<Form.Group controlId="file-selector">
<Form.Control
type="file"
accept=".llsp,.lms,.lmsp,.llsp3,.ev3,.ev3m"
ref={fileInputRef}
onChange={(e) => {
const target = e.target as HTMLInputElement;
if (target.files) setSelectedFile(target.files[0]);
}}
/>
</Form.Group>
useEffect(() => {
if (fileInputRef.current && selectedFile) {
const dataTransfer = new DataTransfer();
dataTransfer.items.add(selectedFile);
fileInputRef.current.files = dataTransfer.files;
}
}, [selectedFile]);

<div className="col-sm-12 m-0 p-0 pt-1 fileptions">
<small>
<b>Examples:</b>
{[
{
file: './static/samples/demo_cityshaper_cranemission.llsp3',
label: 'SPIKE block sample',
},
{
file: './static/samples/demo_cityshaper_cranemission.lmsp',
label: 'EV3Classroom sample',
},
{
file: './static/samples/demo_cityshaper_cranemission.ev3',
label: 'EV3Lab sample',
},
].map((example, index) => (
<a
href="#"
key={index}
className="example-content-button mx-1"
data-file={example.file}
onClick={handleExampleButtonClick}
>
{example.label}
</a>
))}
</small>
<small>
<Form.Check
type="switch"
id="additionalCommentsCheck"
label="Explanatory&nbsp;Comments"
checked={isAdditionalCommentsChecked}
onChange={handleAdditionalCommentsChange}
return (
<div>
<Form.Group controlId="file-selector">
<Form.Control
type="file"
accept=".llsp,.lms,.lmsp,.llsp3,.ev3,.ev3m"
ref={fileInputRef}
onChange={(e) => {
const target = e.target as HTMLInputElement;
if (target.files) setSelectedFile(target.files[0]);
}}
/>
</small>
</Form.Group>

<div className="col-sm-12 m-0 p-0 pt-1 fileptions">
<small>
<b>Examples:</b>
{[
{
file: './static/samples/demo_cityshaper_cranemission.llsp3',
label: 'SPIKE block sample',
},
{
file: './static/samples/demo_cityshaper_cranemission.lmsp',
label: 'EV3Classroom sample',
},
{
file: './static/samples/demo_cityshaper_cranemission.ev3',
label: 'EV3Lab sample',
},
].map((example, index) => (
<Button
variant="link"
key={index}
className="example-content-button"
data-file={example.file}
onClick={handleExampleButtonClick}
>
{example.label}
</Button>
))}
</small>
<small>
<Form.Check
type="switch"
id="additionalCommentsCheck"
label="Explanatory&nbsp;Comments"
checked={isAdditionalCommentsChecked}
onChange={handleAdditionalCommentsChange}
/>
</small>
</div>
</div>
</div>
);
};
);
};

export default FileSelector;

0 comments on commit 1bfc92d

Please sign in to comment.