refactor: format and lint codebase (#971)

2022-04-13 22:02:34 +05:30
parent dc9c1ea0fc
commit 8e467f9e6d
367 changed files with 13778 additions and 16093 deletions
--- a/app/assets/javascripts/Components/ChangeEditor/ChangeEditorButton.tsx
+++ b/app/assets/javascripts/Components/ChangeEditor/ChangeEditorButton.tsx
@@ -0,0 +1,109 @@
+import { WebApplication } from '@/UIModels/Application'
+import { AppState } from '@/UIModels/AppState'
+import { MENU_MARGIN_FROM_APP_BORDER } from '@/Constants'
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
+import VisuallyHidden from '@reach/visually-hidden'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+import { useRef, useState } from 'preact/hooks'
+import { Icon } from '@/Components/Icon'
+import { ChangeEditorMenu } from './ChangeEditorMenu'
+import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
+
+type Props = {
+  application: WebApplication
+  appState: AppState
+  onClickPreprocessing?: () => Promise<void>
+}
+
+export const ChangeEditorButton: FunctionComponent<Props> = observer(
+  ({ application, appState, onClickPreprocessing }) => {
+    const note = Object.values(appState.notes.selectedNotes)[0]
+    const [isOpen, setIsOpen] = useState(false)
+    const [isVisible, setIsVisible] = useState(false)
+    const [position, setPosition] = useState({
+      top: 0,
+      right: 0,
+    })
+    const [maxHeight, setMaxHeight] = useState<number | 'auto'>('auto')
+    const buttonRef = useRef<HTMLButtonElement>(null)
+    const panelRef = useRef<HTMLDivElement>(null)
+    const containerRef = useRef<HTMLDivElement>(null)
+    const [closeOnBlur] = useCloseOnBlur(containerRef, setIsOpen)
+
+    const toggleChangeEditorMenu = async () => {
+      const rect = buttonRef.current?.getBoundingClientRect()
+      if (rect) {
+        const { clientHeight } = document.documentElement
+        const footerElementRect = document.getElementById('footer-bar')?.getBoundingClientRect()
+        const footerHeightInPx = footerElementRect?.height
+
+        if (footerHeightInPx) {
+          setMaxHeight(clientHeight - rect.bottom - footerHeightInPx - MENU_MARGIN_FROM_APP_BORDER)
+        }
+
+        setPosition({
+          top: rect.bottom,
+          right: document.body.clientWidth - rect.right,
+        })
+
+        const newOpenState = !isOpen
+        if (newOpenState && onClickPreprocessing) {
+          await onClickPreprocessing()
+        }
+
+        setIsOpen(newOpenState)
+        setTimeout(() => {
+          setIsVisible(newOpenState)
+        })
+      }
+    }
+
+    return (
+      <div ref={containerRef}>
+        <Disclosure open={isOpen} onChange={toggleChangeEditorMenu}>
+          <DisclosureButton
+            onKeyDown={(event) => {
+              if (event.key === 'Escape') {
+                setIsOpen(false)
+              }
+            }}
+            onBlur={closeOnBlur}
+            ref={buttonRef}
+            className="sn-icon-button border-contrast"
+          >
+            <VisuallyHidden>Change editor</VisuallyHidden>
+            <Icon type="dashboard" className="block" />
+          </DisclosureButton>
+          <DisclosurePanel
+            onKeyDown={(event) => {
+              if (event.key === 'Escape') {
+                setIsOpen(false)
+                buttonRef.current?.focus()
+              }
+            }}
+            ref={panelRef}
+            style={{
+              ...position,
+              maxHeight,
+            }}
+            className="sn-dropdown sn-dropdown--animated min-w-68 max-h-120 max-w-xs flex flex-col overflow-y-auto fixed"
+            onBlur={closeOnBlur}
+          >
+            {isOpen && (
+              <ChangeEditorMenu
+                closeOnBlur={closeOnBlur}
+                application={application}
+                isVisible={isVisible}
+                note={note}
+                closeMenu={() => {
+                  setIsOpen(false)
+                }}
+              />
+            )}
+          </DisclosurePanel>
+        </Disclosure>
+      </div>
+    )
+  },
+)