-
Notifications
You must be signed in to change notification settings - Fork 22
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
18 changed files
with
336 additions
and
99 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
161 changes: 161 additions & 0 deletions
161
tdrive/frontend/src/app/components/menus/mobile-menu.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,161 @@ | ||
| import React, { Component } from 'react'; | ||
|
|
||
| import Icon from '@components/icon/icon.jsx'; | ||
| import { Modal, ModalContent } from '@atoms/modal'; | ||
| import Emojione from 'components/emojione/emojione'; | ||
| import MenusManager from '@components/menus/menus-manager.jsx'; | ||
| import './menu.scss'; | ||
|
|
||
| /* | ||
| One menu | ||
| */ | ||
| export default class MobileMenu extends React.Component { | ||
| constructor(props) { | ||
| super(); | ||
| this.state = { | ||
| menus_manager: MenusManager, | ||
| }; | ||
| MenusManager.addListener(this); | ||
| } | ||
| componentWillUnmount() { | ||
| MenusManager.removeListener(this); | ||
| } | ||
| openSubMenu(dom_element, menu, level) { | ||
| var elementRect = window.getBoundingClientRect(dom_element); | ||
| elementRect.x = elementRect.x || elementRect.left; | ||
| elementRect.y = elementRect.y || elementRect.top; | ||
| MenusManager.openSubMenu(menu, elementRect, level); | ||
| } | ||
| closeSubMenu(level) { | ||
| MenusManager.closeSubMenu(level); | ||
| } | ||
| hoverMenu(dom_element, item) { | ||
| if (item.submenu && !item.submenu_replace) { | ||
| this.last_hovered = item; | ||
| this.openSubMenu(dom_element, item.submenu, this.props.level || 0); | ||
| } else { | ||
| this.closeSubMenu(this.props.level || 0); | ||
| } | ||
| } | ||
| clickMenu(dom_element, item, evt) { | ||
| if(Date.now() - this.props.openAt < 200 ){ | ||
| // When a menu is open and another one opens above it, you have to block the buttons for a while. Otherwise, the hovered option of the new menu will be clicked | ||
| return; | ||
| } | ||
| if (item.submenu_replace) { | ||
| this.state.menus_manager.openMenu(item.submenu, { x: evt.clientX, y: evt.clientY }, 'center'); | ||
| return; | ||
| } | ||
| if (item.onClick) { | ||
| var res = item.onClick(evt); | ||
| if (res !== false) { | ||
| this.state.menus_manager.closeMenu(); | ||
| } | ||
| } | ||
| } | ||
| render() { | ||
| return ( | ||
| <Modal | ||
| open={this.state.menus_manager.isOpen === 1} | ||
| closable={true} | ||
| onClose={() => this.state.menus_manager.closeMenu()} | ||
| className={`md:!max-w-sm testid:${this.props.testClassId}`} | ||
| disableCountVisibleModals={true} | ||
| > | ||
| <ModalContent title=""> | ||
| <div | ||
| ref={node => (this.original_menu = node)} | ||
| className={ | ||
| 'menu-list sm:py-0 ' + (this.props.withFrame ? 'text-black bg-white dark:bg-zinc-900 dark:text-white rounded-lg ' : '') + this.props.animationClass | ||
| }> | ||
| {(this.props.menu || []) | ||
| .filter(item => item && !item.hide) | ||
| .map((item, index) => { | ||
| if (item.type == 'separator') { | ||
| return <div key={'menu_' + index} className="menu-separator" />; | ||
| } else if (item.type == 'title') { | ||
| return ( | ||
| <div key={'menu_' + index} className={'menu-title ' + item.className}> | ||
| {item.text} | ||
| </div> | ||
| ); | ||
| } else if (item.type == 'text') { | ||
| return ( | ||
| <div | ||
| key={'menu_' + index} | ||
| ref={node => (item.ref = node)} | ||
| className={'menu-text ' + item.className + ' testid:menu-item'} | ||
| onMouseEnter={evt => { | ||
| this.hoverMenu(item.ref, item); | ||
| }} | ||
| > | ||
| {item.icon && ( | ||
| <div className="icon"> | ||
| {typeof item.icon === 'string' ? <Icon type={item.icon} /> : item.icon} | ||
| </div> | ||
| )} | ||
| <div className={`text testid:menu-item-${item.testClassId}`}>{item.text}</div> | ||
| </div> | ||
| ); | ||
| } else if (item.type == 'react-element') { | ||
| return ( | ||
| <div | ||
| key={'menu_' + index} | ||
| className={'menu-custom ' + item.className + ' testid:menu-item'} | ||
| onClick={item.onClick} | ||
| > | ||
| {typeof item.reactElement == 'function' | ||
| ? item.reactElement(this.props.level) | ||
| : item.reactElement} | ||
| </div> | ||
| ); | ||
| } else { | ||
| return ( | ||
| <div | ||
| key={'menu_' + index} | ||
| ref={node => (item.ref = node)} | ||
| className={ | ||
| 'menu ' + | ||
| item.className + | ||
| ' ' + | ||
| (this.state.menus_manager.max_level > this.props.level && | ||
| this.last_hovered == item | ||
| ? 'hovered ' | ||
| : '') + | ||
| (item.selected ? 'selected ' : '') + | ||
| ' testid:menu-item' | ||
| } | ||
| onMouseEnter={evt => { | ||
| this.hoverMenu(item.ref, item); | ||
| }} | ||
| onClick={evt => { | ||
| this.clickMenu(item.ref, item, evt); | ||
| }} | ||
| > | ||
| {item.icon && ( | ||
| <div className="icon"> | ||
| {typeof item.icon === 'string' ? <Icon type={item.icon} /> : item.icon} | ||
| </div> | ||
| )} | ||
| {item.emoji && ( | ||
| <div className="icon"> | ||
| <Emojione type={item.emoji} /> | ||
| </div> | ||
| )} | ||
| <div className={`text testid:menu-item-${item.testClassId}`}>{item.text}</div> | ||
| <div className="more"> | ||
| {item.rightIcon && <Icon type={item.rightIcon} />} | ||
| {item.submenu && !item.submenu_replace && <Icon type="angle-right" />} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
| }) | ||
| } | ||
| </div> | ||
|
|
||
| </ModalContent> | ||
| </Modal> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.