hierarchical-estimates-visu.../packages/webpage-refactor/components/advancedOptions/datasetChanger.js

87 lines
2.7 KiB
JavaScript
Raw Normal View History

import React, { useState } from "react";
2022-06-19 23:25:55 +00:00
import { Separator } from "../separator.js";
2022-06-18 23:10:27 +00:00
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"
}
2022-06-18 23:10:27 +00:00
]`);*/
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);
2022-06-18 23:10:27 +00:00
alert(error);
}
};
return (
<div className={`${show ? "" : "hidden"} `}>
2022-06-19 23:25:55 +00:00
<Separator />
<form onSubmit={handleSubmitInner} className="inline mt-0">
2022-06-18 23:10:27 +00:00
<h3 className="text-lg mt-8 mb-4">Change dataset</h3>
<textarea
value={value}
onChange={handleChange}
2022-06-18 23:10:27 +00:00
rows={
1.2 * JSON.stringify(listOfElements, null, 4).split("\n").length
}
cols={90}
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>
&nbsp;
<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>
);
}