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

81 lines
2.4 KiB
JavaScript
Raw Normal View History

import React, { useState } from "react";
import { ShowComparisons } from "./advancedOptions/showComparisons.js";
import { ComparisonsChanger } from "./advancedOptions/comparisonsChanger.js";
import { DataSetChanger } from "./advancedOptions/datasetChanger.js";
const effectButtonStyle =
"bg-transparent m-2 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";
export function AdvancedOptions({
links,
setLinks,
listOfElements,
moveToNextStep,
onChangeOfDataset,
}) {
const [showAdvancedOptions, changeShowAdvanceOptions] = useState(false);
const [showComparisons, setShowComparisons] = useState(false);
const toggleShowComparisons = () => setShowComparisons(!showComparisons);
const [showLoadComparisons, setShowLoadComparisons] = useState(false);
const toggleShowLoadComparisons = () =>
setShowLoadComparisons(!showLoadComparisons);
const [showChangeDataset, setShowChangeDataset] = useState(false);
const toggleShowChangeDataset = () =>
setShowChangeDataset(!showChangeDataset);
const buttonNames = [
"Show Comparisons",
"Load comparisons",
"Use your own data",
];
const buttonToggles = [
toggleShowComparisons,
toggleShowLoadComparisons,
toggleShowChangeDataset,
];
return (
<div>
<br />
{/* Show advanced options*/}
<button
className="text-gray-500 text-sm"
2022-06-17 22:55:58 +00:00
onClick={() => changeShowAdvanceOptions(!showAdvancedOptions)}
>
Advanced options
</button>
<br />
{/* Toggle buttons */}
2022-06-17 22:55:58 +00:00
<div className={showAdvancedOptions ? "" : "hidden"}>
{buttonNames.map((buttonName, i) => {
return (
<button
className={effectButtonStyle}
onClick={() => buttonToggles[i]()}
id={`advancedOptionsButton-${i}`}
>
{buttonName}
</button>
);
})}
{/* Element: Show comparisons */}
<ShowComparisons links={links} show={showComparisons} />
{/* Element: Change comparisons */}
<ComparisonsChanger
setLinks={setLinks}
listOfElements={listOfElements}
show={showLoadComparisons}
moveToNextStep={moveToNextStep}
/>
<DataSetChanger
onChangeOfDataset={onChangeOfDataset}
show={showChangeDataset}
/>
2022-06-17 22:48:11 +00:00
</div>
</div>
);
}