hierarchical-estimates-visu.../packages/webpage-refactor/components/advancedOptions/advancedOptions.js
2022-06-18 19:10:27 -04:00

84 lines
2.5 KiB
JavaScript

import React, { useState } from "react";
import { ShowComparisons } from "./showComparisons.js";
import { ComparisonsChanger } from "./comparisonsChanger.js";
import { DataSetChanger } from "./datasetChanger.js";
import { setRevalidateHeaders } from "next/dist/server/send-payload/revalidate-headers.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"
onClick={() => changeShowAdvanceOptions(!showAdvancedOptions)}
>
Advanced options
</button>
<br />
{/* Toggle buttons */}
<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}
links={links}
/>
<DataSetChanger
onChangeOfDataset={onChangeOfDataset}
show={showChangeDataset}
listOfElements={listOfElements}
/>
</div>
</div>
);
}