rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 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/QuickSettingsMenu/EventHandlers.ts
View File

@@ -1,10 +1,8 @@
import { RefObject } from 'preact'
import { StateUpdater } from 'preact/hooks'
import { JSXInternal } from 'preact/src/jsx'
import { Dispatch, RefObject, SetStateAction } from 'react'
export const quickSettingsKeyDownHandler = (
closeQuickSettingsMenu: () => void,
event: JSXInternal.TargetedKeyboardEvent<HTMLDivElement>,
event: React.KeyboardEvent,
quickSettingsMenuRef: RefObject<HTMLDivElement>,
themesMenuOpen: boolean,
) => {
@@ -39,7 +37,7 @@ export const quickSettingsKeyDownHandler = (
export const themesMenuKeyDownHandler = (
event: React.KeyboardEvent<HTMLDivElement>,
themesMenuRef: RefObject<HTMLDivElement>,
setThemesMenuOpen: StateUpdater<boolean>,
setThemesMenuOpen: Dispatch<SetStateAction<boolean>>,
themesButtonRef: RefObject<HTMLButtonElement>,
) => {
if (themesMenuRef?.current) {

16
app/assets/javascripts/Components/QuickSettingsMenu/FocusModeSwitch.tsx
View File

@@ -1,11 +1,9 @@
import { WebApplication } from '@/UIModels/Application'
import { FeatureStatus, FeatureIdentifier } from '@standardnotes/snjs'
import { FunctionComponent } from 'preact'
import { useCallback } from 'preact/hooks'
import { JSXInternal } from 'preact/src/jsx'
import { Icon } from '@/Components/Icon/Icon'
import { FunctionComponent, MouseEventHandler, useCallback } from 'react'
import Icon from '@/Components/Icon/Icon'
import { usePremiumModal } from '@/Hooks/usePremiumModal'
import { Switch } from '@/Components/Switch/Switch'
import Switch from '@/Components/Switch/Switch'
type Props = {
application: WebApplication
@@ -14,12 +12,12 @@ type Props = {
isEnabled: boolean
}
export const FocusModeSwitch: FunctionComponent<Props> = ({ application, onToggle, onClose, isEnabled }) => {
const FocusModeSwitch: FunctionComponent<Props> = ({ application, onToggle, onClose, isEnabled }) => {
const premiumModal = usePremiumModal()
const isEntitled = application.features.getFeatureStatus(FeatureIdentifier.FocusMode) === FeatureStatus.Entitled
const toggle = useCallback(
(e: JSXInternal.TargetedMouseEvent<HTMLButtonElement>) => {
const toggle: MouseEventHandler = useCallback(
(e) => {
e.preventDefault()
if (isEntitled) {
@@ -50,3 +48,5 @@ export const FocusModeSwitch: FunctionComponent<Props> = ({ application, onToggl
</>
)
}
export default FocusModeSwitch

21
app/assets/javascripts/Components/QuickSettingsMenu/QuickSettingsMenu.tsx
View File

@@ -3,15 +3,13 @@ import { AppState } from '@/UIModels/AppState'
import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
import { ComponentArea, ContentType, FeatureIdentifier, GetFeatures, SNComponent } from '@standardnotes/snjs'
import { observer } from 'mobx-react-lite'
import { FunctionComponent } from 'preact'
import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
import { JSXInternal } from 'preact/src/jsx'
import { Icon } from '@/Components/Icon/Icon'
import { Switch } from '@/Components/Switch/Switch'
import { FunctionComponent, KeyboardEventHandler, useCallback, useEffect, useRef, useState } from 'react'
import Icon from '@/Components/Icon/Icon'
import Switch from '@/Components/Switch/Switch'
import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
import { quickSettingsKeyDownHandler, themesMenuKeyDownHandler } from './EventHandlers'
import { FocusModeSwitch } from './FocusModeSwitch'
import { ThemesMenuButton } from './ThemesMenuButton'
import FocusModeSwitch from './FocusModeSwitch'
import ThemesMenuButton from './ThemesMenuButton'
import { useCloseOnClickOutside } from '@/Hooks/useCloseOnClickOutside'
import { ThemeItem } from './ThemeItem'
import { sortThemes } from '@/Utils/SortThemes'
@@ -40,7 +38,7 @@ const toggleFocusMode = (enabled: boolean) => {
}
}
export const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(({ application, appState, onClickOutside }) => {
const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ application, appState, onClickOutside }) => {
const { closeQuickSettingsMenu, shouldAnimateCloseMenu, focusModeEnabled, setFocusModeEnabled } =
appState.quickSettingsMenu
const [themes, setThemes] = useState<ThemeItem[]>([])
@@ -188,7 +186,7 @@ export const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(({ appli
[themesMenuOpen, toggleThemesMenu],
)
const handleQuickSettingsKeyDown: JSXInternal.KeyboardEventHandler<HTMLDivElement> = useCallback(
const handleQuickSettingsKeyDown: KeyboardEventHandler<HTMLDivElement> = useCallback(
(event) => {
quickSettingsKeyDownHandler(closeQuickSettingsMenu, event, quickSettingsMenuRef, themesMenuOpen)
},
@@ -264,6 +262,7 @@ export const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(({ appli
onClick={() => {
toggleComponent(component)
}}
key={component.uuid}
>
<div className="flex items-center">
<Icon type="window" className="color-neutral mr-2" />
@@ -290,4 +289,6 @@ export const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(({ appli
</div>
</div>
)
})
}
export default observer(QuickSettingsMenu)

14
app/assets/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx
View File

@@ -1,11 +1,9 @@
import { WebApplication } from '@/UIModels/Application'
import { FeatureStatus } from '@standardnotes/snjs'
import { FunctionComponent } from 'preact'
import { useCallback, useMemo } from 'preact/hooks'
import { JSXInternal } from 'preact/src/jsx'
import { Icon } from '@/Components/Icon/Icon'
import { FunctionComponent, MouseEventHandler, useCallback, useMemo } from 'react'
import Icon from '@/Components/Icon/Icon'
import { usePremiumModal } from '@/Hooks/usePremiumModal'
import { Switch } from '@/Components/Switch/Switch'
import Switch from '@/Components/Switch/Switch'
import { ThemeItem } from './ThemeItem'
type Props = {
@@ -14,7 +12,7 @@ type Props = {
onBlur: (event: { relatedTarget: EventTarget | null }) => void
}
export const ThemesMenuButton: FunctionComponent<Props> = ({ application, item, onBlur }) => {
const ThemesMenuButton: FunctionComponent<Props> = ({ application, item, onBlur }) => {
const premiumModal = usePremiumModal()
const isThirdPartyTheme = useMemo(
@@ -27,7 +25,7 @@ export const ThemesMenuButton: FunctionComponent<Props> = ({ application, item,
)
const canActivateTheme = useMemo(() => isEntitledToTheme || isThirdPartyTheme, [isEntitledToTheme, isThirdPartyTheme])
const toggleTheme: JSXInternal.MouseEventHandler<HTMLButtonElement> = useCallback(
const toggleTheme: MouseEventHandler<HTMLButtonElement> = useCallback(
(e) => {
e.preventDefault()
@@ -79,3 +77,5 @@ export const ThemesMenuButton: FunctionComponent<Props> = ({ application, item,
</button>
)
}
export default ThemesMenuButton