full code:
const PanelVisbilityController: React.FC<{
set_show_MediaStreamLocalSelfGridPanel_rst: React.Dispatch<React.SetStateAction<boolean>>;
set_show_LobbyUserListPanel_rst: React.Dispatch<React.SetStateAction<boolean>>;
set_show_VideoConnectionControlPanel_rst: React.Dispatch<React.SetStateAction<boolean>>;
set_show_TextChat_rst: React.Dispatch<React.SetStateAction<boolean>>;
set_show_DebugPanel_rst: React.Dispatch<React.SetStateAction<boolean>>;
}> = React.memo(({ set_show_MediaStreamLocalSelfGridPanel_rst, set_show_LobbyUserListPanel_rst, set_show_VideoConnectionControlPanel_rst, set_show_TextChat_rst, set_show_DebugPanel_rst }) => {
const [show, set_show] = React.useState<boolean>(true);
// reversed order ...
const actions = [
{ icon: <VideoLibraryIcon />, name: 'MediaStream', onClick: () => set_show_MediaStreamLocalSelfGridPanel_rst(show => !show) },
{ icon: <VideoChatIcon />, name: 'ConnectionAnchor', onClick: () => { console.log('// Do nothing')} },
{ icon: <VideoCameraFrontIcon />, name: 'LobbyUserList', onClick: () => set_show_LobbyUserListPanel_rst(show => !show) },
{ icon: <VideogameAssetOutlined />,name: 'ControlPanel', onClick: () => set_show_VideoConnectionControlPanel_rst(show => !show) },
{ icon: <ChatIcon />, name: 'TextChat', onClick: () => set_show_TextChat_rst(show => !show) },
{ icon: <BugReportIcon />, name: 'DebugPanel', onClick: () => set_show_DebugPanel_rst(show => !show) },
]; // prettier-ignore
return (
<SpeedDial
ariaLabel="SpeedDial PanelVisbilityController"
sx={{ position: 'fixed', bottom: 16, right: 16 }}
icon={
<SpeedDialIcon
ref={React.useCallback((elt: HTMLElement | null | any) => {
if (elt instanceof HTMLElement) {
if (elt.parentElement instanceof HTMLButtonElement) {
elt.parentElement.onclick = () => set_show((show) => !show);
} else {
console.warn('internal structure of material-ui SpeedDialIcon is changed, hack doesnt work, fall back to default handling');
elt.onclick = () => set_show((show) => !show);
}
} else if (elt === null) {
// @do_nothing react thing ... elt is null
} else {
// console.log(typeof elt);
// console.log(elt.constructor.name);
console.error('I may use the ref wrong in react,, to access to the dom element...');
}
}, [])}
// onClick={() => set_show((show) => !show)}
/>
}
open={show}
>
{actions.reverse().map((action) => (
<SpeedDialAction
key={action.name}
icon={action.icon}
tooltipTitle={action.name}
onClick={(ev) => {
// ;not_good, clicking the icon inside also triggers; () => set_show((show) => !show);
// ;not_good, clicking the blank region also triggers; []
// ;not_good, clicking the blank region also triggers; You should use the stopPropagation instead:
// ;not_good, clicking the blank region also triggers; <>
// ;not_good, clicking the blank region also triggers; https://stackoverflow.com/questions/61649335/how-do-i-get-material-ui-speeddialaction-onclick-events-to-fire-when-speeddial-i
// ;not_good, clicking the blank region also triggers; ev.stopPropagation();
action.onClick();
}}
// open={false}
/>
))}
</SpeedDial>
);
});