50 lines
1.7 KiB
TypeScript
50 lines
1.7 KiB
TypeScript
import React, { FC, useCallback, useEffect, useRef } from 'react';
|
|
import IconButtonElement from '../../elements/IconButtonElement';
|
|
import { ViewQuerySettings } from '../../types/interface';
|
|
|
|
interface SelectViewProps {
|
|
getVisibleViewSettings: () => string[];
|
|
viewQuerySettings: ViewQuerySettings;
|
|
setViewQuerySettings: React.Dispatch<React.SetStateAction<ViewQuerySettings>>;
|
|
}
|
|
|
|
const SelectView: FC<SelectViewProps> = ({
|
|
getVisibleViewSettings,
|
|
viewQuerySettings,
|
|
setViewQuerySettings
|
|
}) => {
|
|
const element = useRef<HTMLDivElement>(null);
|
|
|
|
const showViewSettingsMenu = useCallback(() => {
|
|
import('../viewSettings/viewSettings').then(({ default: ViewSettings }) => {
|
|
const viewsettings = new ViewSettings();
|
|
viewsettings.show({
|
|
settings: viewQuerySettings,
|
|
visibleSettings: getVisibleViewSettings(),
|
|
setviewsettings: setViewQuerySettings
|
|
});
|
|
});
|
|
}, [getVisibleViewSettings, viewQuerySettings, setViewQuerySettings]);
|
|
|
|
useEffect(() => {
|
|
const btnSelectView = element.current?.querySelector('.btnSelectView') as HTMLButtonElement;
|
|
btnSelectView?.addEventListener('click', showViewSettingsMenu);
|
|
|
|
return () => {
|
|
btnSelectView?.removeEventListener('click', showViewSettingsMenu);
|
|
};
|
|
}, [showViewSettingsMenu]);
|
|
|
|
return (
|
|
<div ref={element}>
|
|
<IconButtonElement
|
|
is='paper-icon-button-light'
|
|
className='btnSelectView autoSize'
|
|
title='ButtonSelectView'
|
|
icon='material-icons view_comfy'
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SelectView;
|