You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
import { ripple } from "./ripple";
|
|
|
|
|
|
|
|
export type ButtonMenuItemOptions = {icon: string, text: string, onClick: (e: MouseEvent) => void, element?: HTMLElement};
|
|
|
|
|
|
|
|
const ButtonMenuItem = (options: ButtonMenuItemOptions) => {
|
|
|
|
if(options.element) return options.element;
|
|
|
|
|
|
|
|
const {icon, text, onClick} = options;
|
|
|
|
const el = document.createElement('div');
|
|
|
|
el.className = 'btn-menu-item tgico-' + icon;
|
|
|
|
el.innerText = text;
|
|
|
|
|
|
|
|
ripple(el);
|
|
|
|
el.addEventListener('click', onClick);
|
|
|
|
|
|
|
|
return options.element = el;
|
|
|
|
};
|
|
|
|
|
|
|
|
const ButtonMenu = (buttons: ButtonMenuItemOptions[]) => {
|
|
|
|
const el = document.createElement('div');
|
|
|
|
el.classList.add('btn-menu');
|
|
|
|
|
|
|
|
const items = buttons.map(ButtonMenuItem);
|
|
|
|
|
|
|
|
el.append(...items);
|
|
|
|
|
|
|
|
return el;
|
|
|
|
};
|
|
|
|
|
|
|
|
export default ButtonMenu;
|