55 lines
No EOL
1.2 KiB
TypeScript
55 lines
No EOL
1.2 KiB
TypeScript
import { observer } from 'mobx-react-lite';
|
|
import { Instance, types } from 'mobx-state-tree';
|
|
import React from 'react';
|
|
import Css from './top-right-menu.module.css';
|
|
|
|
export const Store = types.model({
|
|
visible: types.boolean
|
|
}).views((self) => {
|
|
return {
|
|
get style(): React.CSSProperties {
|
|
return {
|
|
display: self.visible ? 'block' : 'none'
|
|
};
|
|
}
|
|
};
|
|
}).actions((self) => {
|
|
return {
|
|
show: () => {
|
|
self.visible = true;
|
|
},
|
|
hide: () => {
|
|
self.visible = false;
|
|
},
|
|
toggle: () => {
|
|
self.visible = !self.visible;
|
|
}
|
|
};
|
|
});
|
|
|
|
export type Props = {
|
|
store: Instance<typeof Store>;
|
|
children?: any;
|
|
};
|
|
|
|
export const TopRightMenu = observer((props: Props): JSX.Element => {
|
|
const menuItems = [];
|
|
if (props.children.length > 1) {
|
|
for (let key = 0; key < props.children.length; key++) {
|
|
const item = props.children[key];
|
|
menuItems.push(<li key={key}>{item}</li>);
|
|
}
|
|
} else if (props.children) {
|
|
menuItems.push(<li key={0}>{props.children}</li>)
|
|
}
|
|
return (
|
|
<>
|
|
<button className={Css.menuButton} onClick={(e) => {e.stopPropagation(); props.store.toggle();}}>Menu</button>
|
|
<div className={Css.menu} style={props.store.style}>
|
|
<ul>
|
|
{menuItems}
|
|
</ul>
|
|
</div>
|
|
</>
|
|
);
|
|
}) |