56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
|
import React, { useState } from "react";
|
||
|
|
import RegularDropDown from "./RegularDropDown";
|
||
|
|
import { EyeDroperIcon } from "../../icons/ExportCommonIcons";
|
||
|
|
|
||
|
|
type DataSourceSelectorProps = {
|
||
|
|
label?: string;
|
||
|
|
options: string[];
|
||
|
|
selected?: string;
|
||
|
|
onSelect: (value: string) => void;
|
||
|
|
eyeDropperActive?: boolean; // initial state
|
||
|
|
showEyeDropper?: boolean;
|
||
|
|
};
|
||
|
|
|
||
|
|
const DataSourceSelector: React.FC<DataSourceSelectorProps> = ({
|
||
|
|
label = "Data Source",
|
||
|
|
options,
|
||
|
|
selected,
|
||
|
|
onSelect,
|
||
|
|
showEyeDropper = true,
|
||
|
|
}) => {
|
||
|
|
// Local state to toggle EyeDropper
|
||
|
|
const [isEyeActive, setIsEyeActive] = useState(false);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="datas">
|
||
|
|
<div className="datas__label">{label}</div>
|
||
|
|
|
||
|
|
<div className="datas__class">
|
||
|
|
<RegularDropDown
|
||
|
|
header={selected || "Select value"}
|
||
|
|
options={options}
|
||
|
|
onSelect={onSelect}
|
||
|
|
search={false}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{showEyeDropper && (
|
||
|
|
<div
|
||
|
|
className={`icon ${isEyeActive ? "active" : ""}`}
|
||
|
|
onClick={() => setIsEyeActive(!isEyeActive)}
|
||
|
|
style={{ cursor: "pointer" }}
|
||
|
|
>
|
||
|
|
{/* Pass the local state here */}
|
||
|
|
<EyeDroperIcon isActive={isEyeActive} />
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default DataSourceSelector;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|