hierarchical-estimates-visu.../packages/webpage-refactor/components/comparisonActuator.js

63 lines
1.8 KiB
JavaScript
Raw Normal View History

2022-06-17 17:44:08 +00:00
import React, { useState } from "react";
// import { SubmitButton } from "./submitButton";
2022-06-17 18:47:10 +00:00
export function ComparisonActuator({
listOfElements,
pairCurrentlyBeingCompared,
moveToNextStep,
2022-06-18 18:18:15 +00:00
isListOrdered,
2022-06-17 18:47:10 +00:00
}) {
const initialComparisonString = "x to y";
const [comparisonString, setComparisonString] = useState("x to y");
2022-06-18 18:18:15 +00:00
const onChangeComparisonString = async (event) => {
if (!isListOrdered) {
await setComparisonString(event.target.value);
}
};
2022-06-17 18:47:10 +00:00
2022-06-17 17:44:08 +00:00
const onClickSubmitEvent = (event) => {
2022-06-17 18:47:10 +00:00
// console.log(event.target.value);
2022-06-18 18:18:15 +00:00
if (!isListOrdered) {
moveToNextStep({
listOfElements,
pairCurrentlyBeingCompared,
comparisonString,
});
setComparisonString(initialComparisonString);
}
2022-06-17 17:44:08 +00:00
};
2022-06-17 18:47:10 +00:00
2022-06-17 17:44:08 +00:00
return (
<div className="flex m-auto w-72">
<div className="block m-auto text-center">
<br />
<label>
{`... is `}
<br />
<input
2022-06-18 18:18:15 +00:00
disabled={isListOrdered ? true : false}
2022-06-17 17:44:08 +00:00
type="text"
className="text-center text-blueGray-600 bg-white rounded text-lg border-0 shadow outline-none focus:outline-none focus:ring w-8/12 h-10 m-2"
2022-06-17 18:47:10 +00:00
value={comparisonString}
onChange={onChangeComparisonString}
2022-06-17 17:44:08 +00:00
/>
<br />
{`times as valuable as ...`}
</label>
<br />
<button
className={
!true
? "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"
: "bg-transparent text-blue-700 font-semibold py-2 px-4 border border-blue-500 rounded mt-5"
}
onClick={onClickSubmitEvent}
>
Submit
</button>
</div>
</div>
);
}