a9df8d98bb
- Introduced new alignment icons: AlignRightIcon, AlignJustifyIcon, AlignLeftIcon, FlexRowIcon, FlexColumnIcon, FlexRowReverseIcon, and FlexColumnReverseIcon. - Updated MainScene to ensure loading progress is displayed correctly. - Enhanced DataDetailedDropdown to include click outside functionality for closing the dropdown and improved eye dropper icon interaction. - Created a new DataSourceSelector component for selecting data sources with an optional eye dropper feature. - Cleaned up InputWithDropDown component by removing unnecessary whitespace. - Improved styles in _simulationDashBoard.scss for better layout and responsiveness, including new design sections and alignment options.
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;
|
|
|
|
|
|
|
|
|