feat: add menu list

package.json

@@ -55,7 +55,9 @@
   },
   "dependencies": {
     "@blueprintjs/core": "^3.41.0",
+    "@blueprintjs/popover2": "^1.10.1",
     "@octokit/core": "^3.4.0",
+    "@types/react": "^16.14.32 || 17 || 18",
     "@uppy/core": "^1.17.0",
     "@uppy/dashboard": "^1.18.0",
     "@uppy/dropbox": "^1.4.26",
@@ -80,16 +82,17 @@
     "html2canvas": "^1.0.0-rc.7",
     "mobile-device-detect": "^0.4.3",
     "paste-image": "^0.0.3",
-    "react": "17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^16.8 || 17 || 18",
+    "react-dom": "^16.8 || 17 || 18",
     "roam-client": "^1.49.3",
     "rss-parser": "^3.12.0",
     "styled-components": "^5.2.1",
     "tippy.js": "^6.2.7",
-    "uppy": "^1.27.0"
+    "uppy": "^1.27.0",
+    "vhtml": "^2.2.0"
   },
   "lint-staged": {
-    "*": "prettier"
+    "*.js,*.less": "prettier"
   },
   "simple-git-hooks": {
     "pre-commit": "npx lint-staged"

src/components/MenuList.js

@@ -0,0 +1,24 @@
+import { html } from 'htm/react';
+
+export default function MenuList() {
+  function hello() {
+    alert('eh');
+  }
+
+  return html`
+    <ul class='bp3-menu bp3-elevation-1'>
+      <li>
+        <a class='bp3-menu-item bp3-icon-people' tabindex='0' onClick='${hello}'> Share... </a>
+      </li>
+      <li>
+        <a class='bp3-menu-item bp3-icon-circle-arrow-right' tabindex='0'> Move... </a>
+      </li>
+      <li>
+        <a class='bp3-menu-item bp3-icon-edit' tabindex='0'> Rename </a>
+      </li>
+      <li class='bp3-menu-divider'></li>
+      <li>
+        <a class='bp3-menu-item bp3-icon-trash bp3-intent-danger' tabindex='0'> Delete </a>
+      </li>
+    </ul>`;
+}

src/views/addToggleMode.js

@@ -20,5 +20,5 @@ export default function addToggleMode({ id, on, turnOn, off, turnOff }) {
 
   modeIcon.addEventListener('click', toggleMode)
 
-  return toggleMode
+  return { modeIcon, toggleMode }
 }

src/views/calendar.js

@@ -6,7 +6,7 @@ import addToggleMode from './addToggleMode'
 import './calendar.less'
 
 export default function initCalendarMode() {
-  const toggleCalendarMode = addToggleMode({
+  const { toggleMode: toggleCalendarMode } = addToggleMode({
     id: 'mode-toggle-calendar',
     on: 'cube-add',
     off: 'cube',

src/views/card-list.js

@@ -4,7 +4,7 @@ import addToggleMode from './addToggleMode';
 import './card-list.less';
 
 export default function initCardListMode() {
-  const toggleCardMode = addToggleMode({
+  const { toggleMode: toggleCardMode }  = addToggleMode({
     id: 'mode-button-cardList',
     on: 'full-stacked-chart',
     off: 'timeline-bar-chart',

src/views/focus.js

@@ -3,7 +3,7 @@ import addToggleMode from './addToggleMode'
 import './focus.less'
 
 export default function initFocusMode() {
-  const toggleFocusMode = addToggleMode({
+  const { toggleMode: toggleFocusMode } = addToggleMode({
     id: 'mode-toggle-focus',
     on: 'eye-on',
     off: 'eye-open',

src/views/index.js

@@ -3,6 +3,7 @@ import initCardListMode from './card-list'
 import initDocumentMode from './document'
 import initDownloadMode from './download'
 import initCardFlowMode from './card-flow'
+import initMenuListMode from './menu-list';
 import initTreeTableMode from './tree-table'
 import initFocusMode from './focus'
 import addHotKeys from '../utils/hotkey'
@@ -16,6 +17,7 @@ function isEnabled(mode) {
 }
 
 export default function initModes() {
+  initMenuListMode()
   isEnabled('CardListMode') && initCardListMode()
   isEnabled('CardFlowMode') && initCardFlowMode()
   isEnabled('TreeTableMode') && initTreeTableMode()

src/views/menu-list.js

@@ -0,0 +1,51 @@
+import { html } from 'htm/react'
+import { render } from 'react-dom'
+import tippy from 'tippy.js'
+import './menu-list.less'
+import MenuList from '../components/MenuList'
+
+export default function initMenuListMode() {
+  const targetElementId = 'mode-button-menuList'
+  appendMenuListIcon(targetElementId)
+  createMenuListContent()
+
+  const dropdownElement = creatDropdownWrapper()
+  const menuList = document.getElementById('menu-list-content')
+
+  tippy(`#${targetElementId}`, {
+    content: dropdownElement,
+    allowHTML: true,
+    theme: 'light-border',
+    trigger: 'click',
+    interactive: true,
+    onShow: () => {
+      dropdownElement.appendChild(menuList)
+    },
+    onHidden: () => {
+      document.body.appendChild(menuList)
+    },
+  })
+}
+
+function appendMenuListIcon(targetElementId) {
+  var modeIcon = document.createElement('div')
+  modeIcon.id = targetElementId
+  modeIcon.className = `bp3-button bp3-minimal bp3-icon-full-stacked-chart bp3-small`
+
+  var wrapper = document.querySelector('.rm-topbar')
+  wrapper.appendChild(modeIcon)
+}
+
+function createMenuListContent() {
+  const menuListContent = document.createElement('div')
+  menuListContent.id = 'menu-list-content'
+  document.body.appendChild(menuListContent)
+  render(html`<${MenuList} />`, document.getElementById('menu-list-content'))
+}
+
+function creatDropdownWrapper() {
+  const dropdownElement = document.createElement('div')
+  dropdownElement.className = 'menu-list-dropdown'
+  document.body.append(dropdownElement)
+  return dropdownElement
+}

src/views/menu-list.less

@@ -0,0 +1,7 @@
+#menu-list-content {
+  display: none;
+}
+
+.menu-list-dropdown #menu-list-content {
+  display: block;
+}