File size: 2,673 Bytes
3206347 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
import PropTypes from 'prop-types';
import Paper from '@mui/material/Paper';
import Popper from '@mui/material/Popper';
import Tab from '@mui/material/Tab';
import * as React from 'react';
import Suggestions from 'components/PowerInput/Suggestions';
import TabPanel from 'components/TabPanel';
import { FieldDropdownOptionPropType } from 'propTypes/propTypes';
import Options from './Options';
import { Tabs } from './style';
const CustomOptions = (props) => {
const {
open,
anchorEl,
data,
options = [],
onSuggestionClick,
onOptionClick,
onTabChange,
label,
initialTabIndex,
} = props;
const [activeTabIndex, setActiveTabIndex] = React.useState(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,
},
},
]}
className="nowheel"
>
<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>
);
};
CustomOptions.propTypes = {
open: PropTypes.bool.isRequired,
anchorEl: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,
data: PropTypes.arrayOf(
PropTypes.shape({
id: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
output: PropTypes.arrayOf(PropTypes.object).isRequired,
}),
).isRequired,
options: PropTypes.arrayOf(FieldDropdownOptionPropType).isRequired,
onSuggestionClick: PropTypes.func.isRequired,
onOptionClick: PropTypes.func.isRequired,
onTabChange: PropTypes.func.isRequired,
label: PropTypes.string,
initialTabIndex: PropTypes.oneOf([0, 1]),
};
export default CustomOptions;
|