87 lines
2.7 KiB
JavaScript
87 lines
2.7 KiB
JavaScript
import React, { useState } from "react";
|
|
import { Separator } from "../separator.js";
|
|
|
|
export function DataSetChanger({ onChangeOfDataset, show, listOfElements }) {
|
|
/*let [value, setValue] = useState(`[
|
|
{
|
|
"name": "Some element. The name field is necessary",
|
|
"url": "http://www.example.com",
|
|
"somethirdfield": "a"
|
|
},
|
|
{
|
|
"name": "Another element",
|
|
"url": "http://www.example1.com",
|
|
"somethirdfield": "b"
|
|
},
|
|
{
|
|
"name": "A third element",
|
|
"url": "http://www.example2.com",
|
|
"isReferenceValue": true,
|
|
"somethirdfield": "c"
|
|
}
|
|
]`);*/
|
|
let [value, setValue] = useState(JSON.stringify(listOfElements, null, 4));
|
|
|
|
const [displayingDoneMessage, setDisplayingDoneMessage] = useState(false);
|
|
const [displayingDoneMessageTimer, setDisplayingDoneMessageTimer] =
|
|
useState(null);
|
|
|
|
let handleChange = (event) => {
|
|
setValue(event.target.value);
|
|
};
|
|
|
|
let handleSubmitInner = (event) => {
|
|
clearTimeout(displayingDoneMessageTimer);
|
|
event.preventDefault();
|
|
console.log("value@handleSubmitInner@DataSetChanger");
|
|
console.log(value);
|
|
try {
|
|
let newData = JSON.parse(value);
|
|
if (!newData.length || newData.length < 2) {
|
|
throw Error("Not enough objects");
|
|
}
|
|
onChangeOfDataset(newData);
|
|
setDisplayingDoneMessage(true);
|
|
let timer = setTimeout(() => setDisplayingDoneMessage(false), 3000);
|
|
setDisplayingDoneMessageTimer(timer);
|
|
} catch (error) {
|
|
setDisplayingDoneMessage(false);
|
|
alert(error);
|
|
}
|
|
};
|
|
return (
|
|
<div className={`${show ? "" : "hidden"} `}>
|
|
<Separator />
|
|
<form onSubmit={handleSubmitInner} className="inline mt-0">
|
|
<h3 className="text-lg mt-8 mb-4">Change dataset</h3>
|
|
<textarea
|
|
value={value}
|
|
onChange={handleChange}
|
|
rows={
|
|
1.2 * JSON.stringify(listOfElements, null, 4).split("\n").length
|
|
}
|
|
cols={70}
|
|
className="text-left text-gray-600 bg-white rounded text-normal p-10 border-0 shadow outline-none focus:outline-none focus:ring "
|
|
/>
|
|
<br />
|
|
<button
|
|
className="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded mt-5 p-10"
|
|
onClick={handleSubmitInner}
|
|
>
|
|
Change dataset
|
|
</button>
|
|
|
|
<button
|
|
className={
|
|
displayingDoneMessage
|
|
? "bg-transparent text-blue-700 font-semibold py-2 px-4 border border-blue-500 rounded mt-5 p-10"
|
|
: "hidden"
|
|
}
|
|
>
|
|
Done!
|
|
</button>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|