rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: replace 'preact' with 'react' (#1048)

Browse Source
This commit is contained in:
Aman Harwara
2022-05-30 12:42:52 +05:30
committed by GitHub
parent e74b4953ea
commit 8c368dd96b
231 changed files with 4794 additions and 4302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/assets/javascripts/Components/NotesOptions/AccordionMenuGroup.tsx Normal file
View File

@@ -0,0 +1,8 @@
import { IconType } from '@standardnotes/snjs'
export type AccordionMenuGroup<T> = {
icon?: IconType
iconClassName?: string
title: string
items: Array<T>
}

13
app/assets/javascripts/Components/NotesOptions/AddTagOption.tsx
View File

@@ -2,16 +2,15 @@ import { AppState } from '@/UIModels/AppState'
import { calculateSubmenuStyle, SubmenuStyle } from '@/Utils/CalculateSubmenuStyle'
import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
import { observer } from 'mobx-react-lite'
import { FunctionComponent } from 'preact'
import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
import { Icon } from '@/Components/Icon/Icon'
import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
import Icon from '@/Components/Icon/Icon'
import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
type Props = {
appState: AppState
}
export const AddTagOption: FunctionComponent<Props> = observer(({ appState }) => {
const AddTagOption: FunctionComponent<Props> = ({ appState }) => {
const menuContainerRef = useRef<HTMLDivElement>(null)
const menuRef = useRef<HTMLDivElement>(null)
const menuButtonRef = useRef<HTMLButtonElement>(null)
@@ -87,7 +86,7 @@ export const AddTagOption: FunctionComponent<Props> = observer(({ appState }) =>
>
{appState.tags.tags.map((tag) => (
<button
key={tag.title}
key={tag.uuid}
className="sn-dropdown-item sn-dropdown-item--no-icon max-w-80"
onBlur={closeOnBlur}
onClick={() => {
@@ -108,4 +107,6 @@ export const AddTagOption: FunctionComponent<Props> = observer(({ appState }) =>
</Disclosure>
</div>
)
})
}
export default observer(AddTagOption)

28
app/assets/javascripts/Components/NotesOptions/ChangeEditorOption.tsx
View File

@@ -2,11 +2,10 @@ import { KeyboardKey } from '@/Services/IOService'
import { WebApplication } from '@/UIModels/Application'
import { AppState } from '@/UIModels/AppState'
import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
import { IconType, SNComponent, SNNote } from '@standardnotes/snjs'
import { FunctionComponent } from 'preact'
import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
import { Icon } from '@/Components/Icon/Icon'
import { ChangeEditorMenu } from '@/Components/ChangeEditor/ChangeEditorMenu'
import { SNNote } from '@standardnotes/snjs'
import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
import Icon from '@/Components/Icon/Icon'
import ChangeEditorMenu from '@/Components/ChangeEditor/ChangeEditorMenu'
import { calculateSubmenuStyle, SubmenuStyle } from '@/Utils/CalculateSubmenuStyle'
import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
@@ -16,22 +15,7 @@ type ChangeEditorOptionProps = {
note: SNNote
}
type AccordionMenuGroup<T> = {
icon?: IconType
iconClassName?: string
title: string
items: Array<T>
}
export type EditorMenuItem = {
name: string
component?: SNComponent
isEntitled: boolean
}
export type EditorMenuGroup = AccordionMenuGroup<EditorMenuItem>
export const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({ application, note }) => {
const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({ application, note }) => {
const [isOpen, setIsOpen] = useState(false)
const [isVisible, setIsVisible] = useState(false)
const [menuStyle, setMenuStyle] = useState<SubmenuStyle>({
@@ -121,3 +105,5 @@ export const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({
</div>
)
}
export default ChangeEditorOption

4
app/assets/javascripts/Components/NotesOptions/EditorMenuGroup.tsx Normal file
View File

@@ -0,0 +1,4 @@
import { EditorMenuItem } from './EditorMenuItem'
import { AccordionMenuGroup } from './AccordionMenuGroup'
export type EditorMenuGroup = AccordionMenuGroup<EditorMenuItem>

7
app/assets/javascripts/Components/NotesOptions/EditorMenuItem.tsx Normal file
View File

@@ -0,0 +1,7 @@
import { SNComponent } from '@standardnotes/snjs'
export type EditorMenuItem = {
name: string
component?: SNComponent
isEntitled: boolean
}

9
app/assets/javascripts/Components/NotesOptions/ListedActionsOption.tsx
View File

@@ -2,9 +2,8 @@ import { WebApplication } from '@/UIModels/Application'
import { calculateSubmenuStyle, SubmenuStyle } from '@/Utils/CalculateSubmenuStyle'
import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
import { Action, ListedAccount, SNNote } from '@standardnotes/snjs'
import { Fragment, FunctionComponent } from 'preact'
import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
import { Icon } from '@/Components/Icon/Icon'
import { Fragment, FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
import Icon from '@/Components/Icon/Icon'
import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
type Props = {
@@ -206,7 +205,7 @@ const ListedActionsMenu: FunctionComponent<ListedActionsMenuProps> = ({ applicat
)
}
export const ListedActionsOption: FunctionComponent<Props> = ({ application, note }) => {
const ListedActionsOption: FunctionComponent<Props> = ({ application, note }) => {
const menuContainerRef = useRef<HTMLDivElement>(null)
const menuRef = useRef<HTMLDivElement>(null)
const menuButtonRef = useRef<HTMLButtonElement>(null)
@@ -273,3 +272,5 @@ export const ListedActionsOption: FunctionComponent<Props> = ({ application, not
</div>
)
}
export default ListedActionsOption

27
app/assets/javascripts/Components/NotesOptions/NotesOptions.tsx
View File

@@ -1,23 +1,16 @@
import { AppState } from '@/UIModels/AppState'
import { Icon } from '@/Components/Icon/Icon'
import { Switch } from '@/Components/Switch/Switch'
import Icon from '@/Components/Icon/Icon'
import Switch from '@/Components/Switch/Switch'
import { observer } from 'mobx-react-lite'
import { useState, useEffect, useMemo, useCallback } from 'preact/hooks'
import { useState, useEffect, useMemo, useCallback, FunctionComponent } from 'react'
import { SNApplication, SNNote } from '@standardnotes/snjs'
import { WebApplication } from '@/UIModels/Application'
import { KeyboardModifier } from '@/Services/IOService'
import { FunctionComponent } from 'preact'
import { ChangeEditorOption } from './ChangeEditorOption'
import ChangeEditorOption from './ChangeEditorOption'
import { BYTES_IN_ONE_MEGABYTE } from '@/Constants'
import { ListedActionsOption } from './ListedActionsOption'
import { AddTagOption } from './AddTagOption'
import ListedActionsOption from './ListedActionsOption'
import AddTagOption from './AddTagOption'
import { addToast, dismissToast, ToastType } from '@standardnotes/stylekit'
export type NotesOptionsProps = {
application: WebApplication
appState: AppState
closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void
}
import { NotesOptionsProps } from './NotesOptionsProps'
type DeletePermanentlyButtonProps = {
closeOnBlur: NotesOptionsProps['closeOnBlur']
@@ -176,7 +169,7 @@ const NoteSizeWarning: FunctionComponent<{
) : null
}
export const NotesOptions = observer(({ application, appState, closeOnBlur }: NotesOptionsProps) => {
const NotesOptions = ({ application, appState, closeOnBlur }: NotesOptionsProps) => {
const [altKeyDown, setAltKeyDown] = useState(false)
const toggleOn = (condition: (note: SNNote) => boolean) => {
@@ -440,4 +433,6 @@ export const NotesOptions = observer(({ application, appState, closeOnBlur }: No
) : null}
</>
)
})
}
export default observer(NotesOptions)

12
app/assets/javascripts/Components/NotesOptions/NotesOptionsPanel.tsx
View File

@@ -1,11 +1,11 @@
import { AppState } from '@/UIModels/AppState'
import { Icon } from '@/Components/Icon/Icon'
import Icon from '@/Components/Icon/Icon'
import VisuallyHidden from '@reach/visually-hidden'
import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
import { useRef, useState } from 'preact/hooks'
import { useRef, useState } from 'react'
import { observer } from 'mobx-react-lite'
import { NotesOptions } from './NotesOptions'
import NotesOptions from './NotesOptions'
import { WebApplication } from '@/UIModels/Application'
import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants'
@@ -15,7 +15,7 @@ type Props = {
onClickPreprocessing?: () => Promise<void>
}
export const NotesOptionsPanel = observer(({ application, appState, onClickPreprocessing }: Props) => {
const NotesOptionsPanel = ({ application, appState, onClickPreprocessing }: Props) => {
const [open, setOpen] = useState(false)
const [position, setPosition] = useState({
top: 0,
@@ -83,4 +83,6 @@ export const NotesOptionsPanel = observer(({ application, appState, onClickPrepr
</DisclosurePanel>
</Disclosure>
)
})
}
export default observer(NotesOptionsPanel)

8
app/assets/javascripts/Components/NotesOptions/NotesOptionsProps.ts Normal file
View File

@@ -0,0 +1,8 @@
import { WebApplication } from '@/UIModels/Application'
import { AppState } from '@/UIModels/AppState'
export type NotesOptionsProps = {
application: WebApplication
appState: AppState
closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void
}