96 lines
2.3 KiB
TypeScript
96 lines
2.3 KiB
TypeScript
import Paper from '@mui/material/Paper';
|
|
import Popper from '@mui/material/Popper';
|
|
import Tab from '@mui/material/Tab';
|
|
import * as React from 'react';
|
|
|
|
import type { IFieldDropdownOption } from '@automatisch/types';
|
|
import Suggestions from 'components/PowerInput/Suggestions';
|
|
import TabPanel from 'components/TabPanel';
|
|
|
|
import Options from './Options';
|
|
import { Tabs } from './style';
|
|
|
|
interface CustomOptionsProps {
|
|
open: boolean;
|
|
anchorEl: any;
|
|
data: any;
|
|
options: readonly IFieldDropdownOption[];
|
|
onSuggestionClick: any;
|
|
onOptionClick: (event: React.MouseEvent, option: any) => void;
|
|
onTabChange: (tabIndex: 0 | 1) => void;
|
|
label?: string;
|
|
initialTabIndex?: 0 | 1;
|
|
}
|
|
|
|
const CustomOptions = (props: CustomOptionsProps) => {
|
|
const {
|
|
open,
|
|
anchorEl,
|
|
data,
|
|
options = [],
|
|
onSuggestionClick,
|
|
onOptionClick,
|
|
onTabChange,
|
|
label,
|
|
initialTabIndex,
|
|
} = props;
|
|
|
|
const [activeTabIndex, setActiveTabIndex] = React.useState<
|
|
number | undefined
|
|
>(undefined);
|
|
|
|
React.useEffect(
|
|
function applyInitialActiveTabIndex() {
|
|
setActiveTabIndex((currentActiveTabIndex) => {
|
|
if (currentActiveTabIndex === undefined) {
|
|
return initialTabIndex;
|
|
}
|
|
|
|
return currentActiveTabIndex;
|
|
});
|
|
},
|
|
[initialTabIndex]
|
|
);
|
|
|
|
return (
|
|
<Popper
|
|
open={open}
|
|
anchorEl={anchorEl}
|
|
style={{ width: anchorEl?.clientWidth, zIndex: 1 }}
|
|
modifiers={[
|
|
{
|
|
name: 'flip',
|
|
enabled: false,
|
|
options: {
|
|
altBoundary: false,
|
|
},
|
|
},
|
|
]}
|
|
>
|
|
<Paper elevation={5} sx={{ width: '100%' }}>
|
|
<Tabs
|
|
sx={{ mb: 2 }}
|
|
value={activeTabIndex ?? 0}
|
|
onChange={(event, tabIndex) => {
|
|
onTabChange(tabIndex);
|
|
setActiveTabIndex(tabIndex);
|
|
}}
|
|
>
|
|
<Tab label={label} />
|
|
<Tab label="Custom" />
|
|
</Tabs>
|
|
|
|
<TabPanel value={activeTabIndex ?? 0} index={0}>
|
|
<Options data={options} onOptionClick={onOptionClick} />
|
|
</TabPanel>
|
|
|
|
<TabPanel value={activeTabIndex ?? 0} index={1}>
|
|
<Suggestions data={data} onSuggestionClick={onSuggestionClick} />
|
|
</TabPanel>
|
|
</Paper>
|
|
</Popper>
|
|
);
|
|
};
|
|
|
|
export default CustomOptions;
|