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

24
app/assets/javascripts/App.tsx
View File

@@ -22,14 +22,13 @@ declare global {
import { IsWebPlatform, WebAppVersion } from '@/Version'
import { DesktopManagerInterface, SNLog } from '@standardnotes/snjs'
import { render } from 'preact'
import { ApplicationGroupView } from './Components/ApplicationGroupView/ApplicationGroupView'
import ApplicationGroupView from './Components/ApplicationGroupView/ApplicationGroupView'
import { WebDevice } from './Device/WebDevice'
import { StartApplication } from './Device/StartApplication'
import { ApplicationGroup } from './UIModels/ApplicationGroup'
import { WebOrDesktopDevice } from './Device/WebOrDesktopDevice'
import { WebApplication } from './UIModels/Application'
import { unmountComponentAtRoot } from './Utils/PreactUtils'
import { createRoot } from 'react-dom/client'
let keyCount = 0
const getKey = () => {
@@ -38,6 +37,11 @@ const getKey = () => {
const RootId = 'app-group-root'
const rootElement = document.createElement('div')
rootElement.id = RootId
const appendedRootNode = document.body.appendChild(rootElement)
const root = createRoot(appendedRootNode)
const startApplication: StartApplication = async function startApplication(
defaultSyncServerHost: string,
device: WebOrDesktopDevice,
@@ -48,19 +52,14 @@ const startApplication: StartApplication = async function startApplication(
SNLog.onError = console.error
const onDestroy = () => {
const root = document.getElementById(RootId) as HTMLElement
unmountComponentAtRoot(root)
root.remove()
const rootElement = document.getElementById(RootId) as HTMLElement
root.unmount()
rootElement.remove()
renderApp()
}
const renderApp = () => {
const root = document.createElement('div')
root.id = RootId
const parentNode = document.body.appendChild(root)
render(
root.render(
<ApplicationGroupView
key={getKey()}
server={defaultSyncServerHost}
@@ -69,7 +68,6 @@ const startApplication: StartApplication = async function startApplication(
websocketUrl={webSocketUrl}
onDestroy={onDestroy}
/>,
parentNode,
)
}

22
app/assets/javascripts/Components/Abstract/PureComponent.tsx
View File

@@ -2,9 +2,7 @@ import { ApplicationEvent } from '@standardnotes/snjs'
import { WebApplication } from '@/UIModels/Application'
import { AppState, AppStateEvent } from '@/UIModels/AppState'
import { autorun, IReactionDisposer, IReactionPublic } from 'mobx'
import { Component } from 'preact'
import { findDOMNode, unmountComponentAtNode } from 'preact/compat'
import { Component } from 'react'
export type PureComponentState = Partial<Record<string, any>>
export type PureComponentProps = Partial<Record<string, any>>
@@ -36,20 +34,6 @@ export abstract class PureComponent<P = PureComponentProps, S = PureComponentSta
;(this.state as unknown) = undefined
}
protected dismissModal(): void {
const elem = this.getElement()
if (!elem) {
return
}
const parent = elem.parentElement
if (!parent) {
return
}
parent.remove()
unmountComponentAtNode(parent)
}
override componentWillUnmount(): void {
this.deinit()
}
@@ -58,10 +42,6 @@ export abstract class PureComponent<P = PureComponentProps, S = PureComponentSta
return this.application.getAppState()
}
protected getElement(): Element | null {
return findDOMNode(this)
}
autorun(view: (r: IReactionPublic) => void): void {
this.reactionDisposers.push(autorun(view))
}

72
app/assets/javascripts/Components/AccountMenu/AccountMenu.tsx
View File

@@ -2,15 +2,10 @@ import { observer } from 'mobx-react-lite'
import { useCloseOnClickOutside } from '@/Hooks/useCloseOnClickOutside'
import { AppState } from '@/UIModels/AppState'
import { WebApplication } from '@/UIModels/Application'
import { useCallback, useRef, useState } from 'preact/hooks'
import { GeneralAccountMenu } from './GeneralAccountMenu'
import { FunctionComponent } from 'preact'
import { SignInPane } from './SignIn'
import { CreateAccount } from './CreateAccount'
import { ConfirmPassword } from './ConfirmPassword'
import { JSXInternal } from 'preact/src/jsx'
import { useCallback, useRef, FunctionComponent, KeyboardEventHandler } from 'react'
import { ApplicationGroup } from '@/UIModels/ApplicationGroup'
import { AccountMenuPane } from './AccountMenuPane'
import MenuPaneSelector from './MenuPaneSelector'
type Props = {
appState: AppState
@@ -19,61 +14,7 @@ type Props = {
mainApplicationGroup: ApplicationGroup
}
type PaneSelectorProps = {
appState: AppState
application: WebApplication
mainApplicationGroup: ApplicationGroup
menuPane: AccountMenuPane
setMenuPane: (pane: AccountMenuPane) => void
closeMenu: () => void
}
const MenuPaneSelector: FunctionComponent<PaneSelectorProps> = observer(
({ application, appState, menuPane, setMenuPane, closeMenu, mainApplicationGroup }) => {
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
switch (menuPane) {
case AccountMenuPane.GeneralMenu:
return (
<GeneralAccountMenu
appState={appState}
application={application}
mainApplicationGroup={mainApplicationGroup}
setMenuPane={setMenuPane}
closeMenu={closeMenu}
/>
)
case AccountMenuPane.SignIn:
return <SignInPane appState={appState} application={application} setMenuPane={setMenuPane} />
case AccountMenuPane.Register:
return (
<CreateAccount
appState={appState}
application={application}
setMenuPane={setMenuPane}
email={email}
setEmail={setEmail}
password={password}
setPassword={setPassword}
/>
)
case AccountMenuPane.ConfirmPassword:
return (
<ConfirmPassword
appState={appState}
application={application}
setMenuPane={setMenuPane}
email={email}
password={password}
/>
)
}
},
)
export const AccountMenu: FunctionComponent<Props> = observer(
({ application, appState, onClickOutside, mainApplicationGroup }) => {
const AccountMenu: FunctionComponent<Props> = ({ application, appState, onClickOutside, mainApplicationGroup }) => {
const { currentPane, shouldAnimateCloseMenu } = appState.accountMenu
const closeAccountMenu = useCallback(() => {
@@ -92,7 +33,7 @@ export const AccountMenu: FunctionComponent<Props> = observer(
onClickOutside()
})
const handleKeyDown: JSXInternal.KeyboardEventHandler<HTMLDivElement> = useCallback(
const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = useCallback(
(event) => {
switch (event.key) {
case 'Escape':
@@ -128,5 +69,6 @@ export const AccountMenu: FunctionComponent<Props> = observer(
</div>
</div>
)
},
)
}
export default observer(AccountMenu)

28
app/assets/javascripts/Components/AccountMenu/AdvancedOptions.tsx
View File

@@ -1,11 +1,10 @@
import { WebApplication } from '@/UIModels/Application'
import { AppState } from '@/UIModels/AppState'
import { observer } from 'mobx-react-lite'
import { FunctionComponent } from 'preact'
import { useCallback, useEffect, useState } from 'preact/hooks'
import { Checkbox } from '@/Components/Checkbox/Checkbox'
import { DecoratedInput } from '@/Components/Input/DecoratedInput'
import { Icon } from '@/Components/Icon/Icon'
import { ChangeEventHandler, FunctionComponent, useCallback, useEffect, useState } from 'react'
import Checkbox from '@/Components/Checkbox/Checkbox'
import DecoratedInput from '@/Components/Input/DecoratedInput'
import Icon from '@/Components/Icon/Icon'
type Props = {
application: WebApplication
@@ -15,8 +14,14 @@ type Props = {
onStrictSignInChange?: (isStrictSignIn: boolean) => void
}
export const AdvancedOptions: FunctionComponent<Props> = observer(
({ appState, application, disabled = false, onPrivateWorkspaceChange, onStrictSignInChange, children }) => {
const AdvancedOptions: FunctionComponent<Props> = ({
appState,
application,
disabled = false,
onPrivateWorkspaceChange,
onStrictSignInChange,
children,
}) => {
const { server, setServer, enableServerOption, setEnableServerOption } = appState.accountMenu
const [showAdvanced, setShowAdvanced] = useState(false)
@@ -63,8 +68,8 @@ export const AdvancedOptions: FunctionComponent<Props> = observer(
setPrivateWorkspaceUserphrase(userphrase)
}, [])
const handleServerOptionChange = useCallback(
(e: Event) => {
const handleServerOptionChange: ChangeEventHandler<HTMLInputElement> = useCallback(
(e) => {
if (e.target instanceof HTMLInputElement) {
setEnableServerOption(e.target.checked)
}
@@ -180,5 +185,6 @@ export const AdvancedOptions: FunctionComponent<Props> = observer(
) : null}
</>
)
},
)
}
export default observer(AdvancedOptions)

27
app/assets/javascripts/Components/AccountMenu/ConfirmPassword.tsx
View File

@@ -2,14 +2,13 @@ import { STRING_NON_MATCHING_PASSWORDS } from '@/Strings'
import { WebApplication } from '@/UIModels/Application'
import { AppState } from '@/UIModels/AppState'
import { observer } from 'mobx-react-lite'
import { FunctionComponent } from 'preact'
import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
import { FunctionComponent, KeyboardEventHandler, useCallback, useEffect, useRef, useState } from 'react'
import { AccountMenuPane } from './AccountMenuPane'
import { Button } from '@/Components/Button/Button'
import { Checkbox } from '@/Components/Checkbox/Checkbox'
import { DecoratedPasswordInput } from '@/Components/Input/DecoratedPasswordInput'
import { Icon } from '@/Components/Icon/Icon'
import { IconButton } from '@/Components/Button/IconButton'
import Button from '@/Components/Button/Button'
import Checkbox from '@/Components/Checkbox/Checkbox'
import DecoratedPasswordInput from '@/Components/Input/DecoratedPasswordInput'
import Icon from '@/Components/Icon/Icon'
import IconButton from '@/Components/Button/IconButton'
type Props = {
appState: AppState
@@ -19,8 +18,7 @@ type Props = {
password: string
}
export const ConfirmPassword: FunctionComponent<Props> = observer(
({ application, appState, setMenuPane, email, password }) => {
const ConfirmPassword: FunctionComponent<Props> = ({ application, appState, setMenuPane, email, password }) => {
const { notesAndTagsCount } = appState.accountMenu
const [confirmPassword, setConfirmPassword] = useState('')
const [isRegistering, setIsRegistering] = useState(false)
@@ -47,7 +45,7 @@ export const ConfirmPassword: FunctionComponent<Props> = observer(
}, [shouldMergeLocal])
const handleConfirmFormSubmit = useCallback(
(e: Event) => {
(e) => {
e.preventDefault()
if (!password) {
@@ -82,8 +80,8 @@ export const ConfirmPassword: FunctionComponent<Props> = observer(
[appState, application, confirmPassword, email, isEphemeral, password, shouldMergeLocal],
)
const handleKeyDown = useCallback(
(e: KeyboardEvent) => {
const handleKeyDown: KeyboardEventHandler = useCallback(
(e) => {
if (error.length) {
setError('')
}
@@ -154,5 +152,6 @@ export const ConfirmPassword: FunctionComponent<Props> = observer(
</form>
</>
)
},
)
}
export default observer(ConfirmPassword)

41
app/assets/javascripts/Components/AccountMenu/CreateAccount.tsx
View File

@@ -1,28 +1,34 @@
import { WebApplication } from '@/UIModels/Application'
import { AppState } from '@/UIModels/AppState'
import { observer } from 'mobx-react-lite'
import { FunctionComponent } from 'preact'
import { StateUpdater, useCallback, useEffect, useRef, useState } from 'preact/hooks'
import { FunctionComponent, KeyboardEventHandler, useCallback, useEffect, useRef, useState } from 'react'
import { AccountMenuPane } from './AccountMenuPane'
import { Button } from '@/Components/Button/Button'
import { DecoratedInput } from '@/Components/Input/DecoratedInput'
import { DecoratedPasswordInput } from '@/Components/Input/DecoratedPasswordInput'
import { Icon } from '@/Components/Icon/Icon'
import { IconButton } from '@/Components/Button/IconButton'
import { AdvancedOptions } from './AdvancedOptions'
import Button from '@/Components/Button/Button'
import DecoratedInput from '@/Components/Input/DecoratedInput'
import DecoratedPasswordInput from '@/Components/Input/DecoratedPasswordInput'
import Icon from '@/Components/Icon/Icon'
import IconButton from '@/Components/Button/IconButton'
import AdvancedOptions from './AdvancedOptions'
type Props = {
appState: AppState
application: WebApplication
setMenuPane: (pane: AccountMenuPane) => void
email: string
setEmail: StateUpdater<string>
setEmail: React.Dispatch<React.SetStateAction<string>>
password: string
setPassword: StateUpdater<string>
setPassword: React.Dispatch<React.SetStateAction<string>>
}
export const CreateAccount: FunctionComponent<Props> = observer(
({ appState, application, setMenuPane, email, setEmail, password, setPassword }) => {
const CreateAccount: FunctionComponent<Props> = ({
appState,
application,
setMenuPane,
email,
setEmail,
password,
setPassword,
}) => {
const emailInputRef = useRef<HTMLInputElement>(null)
const passwordInputRef = useRef<HTMLInputElement>(null)
const [isPrivateWorkspace, setIsPrivateWorkspace] = useState(false)
@@ -48,7 +54,7 @@ export const CreateAccount: FunctionComponent<Props> = observer(
)
const handleRegisterFormSubmit = useCallback(
(e: Event) => {
(e) => {
e.preventDefault()
if (!email || email.length === 0) {
@@ -68,8 +74,8 @@ export const CreateAccount: FunctionComponent<Props> = observer(
[email, password, setPassword, setMenuPane, setEmail],
)
const handleKeyDown = useCallback(
(e: KeyboardEvent) => {
const handleKeyDown: KeyboardEventHandler = useCallback(
(e) => {
if (e.key === 'Enter') {
handleRegisterFormSubmit(e)
}
@@ -136,5 +142,6 @@ export const CreateAccount: FunctionComponent<Props> = observer(
/>
</>
)
},
)
}
export default observer(CreateAccount)

33
app/assets/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx
View File

@@ -1,17 +1,18 @@
import { WebApplication } from '@/UIModels/Application'
import { AppState } from '@/UIModels/AppState'
import { observer } from 'mobx-react-lite'
import { Icon } from '@/Components/Icon/Icon'
import { formatLastSyncDate } from '@/Components/Preferences/Panes/Account/Sync'
import Icon from '@/Components/Icon/Icon'
import { SyncQueueStrategy } from '@standardnotes/snjs'
import { STRING_GENERIC_SYNC_ERROR } from '@/Strings'
import { useCallback, useMemo, useState } from 'preact/hooks'
import { useCallback, useMemo, useState, FunctionComponent } from 'react'
import { AccountMenuPane } from './AccountMenuPane'
import { FunctionComponent } from 'preact'
import { Menu } from '@/Components/Menu/Menu'
import { MenuItem, MenuItemSeparator, MenuItemType } from '@/Components/Menu/MenuItem'
import { WorkspaceSwitcherOption } from './WorkspaceSwitcher/WorkspaceSwitcherOption'
import Menu from '@/Components/Menu/Menu'
import MenuItem from '@/Components/Menu/MenuItem'
import MenuItemSeparator from '@/Components/Menu/MenuItemSeparator'
import { MenuItemType } from '@/Components/Menu/MenuItemType'
import WorkspaceSwitcherOption from './WorkspaceSwitcher/WorkspaceSwitcherOption'
import { ApplicationGroup } from '@/UIModels/ApplicationGroup'
import { formatLastSyncDate } from '@/Utils/FormatLastSyncDate'
type Props = {
appState: AppState
@@ -23,8 +24,13 @@ type Props = {
const iconClassName = 'color-neutral mr-2'
export const GeneralAccountMenu: FunctionComponent<Props> = observer(
({ application, appState, setMenuPane, closeMenu, mainApplicationGroup }) => {
const GeneralAccountMenu: FunctionComponent<Props> = ({
application,
appState,
setMenuPane,
closeMenu,
mainApplicationGroup,
}) => {
const [isSyncingInProgress, setIsSyncingInProgress] = useState(false)
const [lastSyncDate, setLastSyncDate] = useState(formatLastSyncDate(application.sync.getLastSyncDate() as Date))
@@ -105,8 +111,8 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
<div className="flex items-start">
<Icon type="check-circle" className="mr-2 success" />
<div>
<div class="font-semibold success">Last synced:</div>
<div class="color-text">{lastSyncDate}</div>
<div className="font-semibold success">Last synced:</div>
<div className="color-text">{lastSyncDate}</div>
</div>
</div>
)}
@@ -174,5 +180,6 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
</Menu>
</>
)
},
)
}
export default observer(GeneralAccountMenu)

70
app/assets/javascripts/Components/AccountMenu/MenuPaneSelector.tsx Normal file
View File

@@ -0,0 +1,70 @@
import { WebApplication } from '@/UIModels/Application'
import { ApplicationGroup } from '@/UIModels/ApplicationGroup'
import { AppState } from '@/UIModels/AppState'
import { observer } from 'mobx-react-lite'
import { FunctionComponent, useState } from 'react'
import { AccountMenuPane } from './AccountMenuPane'
import ConfirmPassword from './ConfirmPassword'
import CreateAccount from './CreateAccount'
import GeneralAccountMenu from './GeneralAccountMenu'
import SignInPane from './SignIn'
type Props = {
appState: AppState
application: WebApplication
mainApplicationGroup: ApplicationGroup
menuPane: AccountMenuPane
setMenuPane: (pane: AccountMenuPane) => void
closeMenu: () => void
}
const MenuPaneSelector: FunctionComponent<Props> = ({
application,
appState,
menuPane,
setMenuPane,
closeMenu,
mainApplicationGroup,
}) => {
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
switch (menuPane) {
case AccountMenuPane.GeneralMenu:
return (
<GeneralAccountMenu
appState={appState}
application={application}
mainApplicationGroup={mainApplicationGroup}
setMenuPane={setMenuPane}
closeMenu={closeMenu}
/>
)
case AccountMenuPane.SignIn:
return <SignInPane appState={appState} application={application} setMenuPane={setMenuPane} />
case AccountMenuPane.Register:
return (
<CreateAccount
appState={appState}
application={application}
setMenuPane={setMenuPane}
email={email}
setEmail={setEmail}
password={password}
setPassword={setPassword}
/>
)
case AccountMenuPane.ConfirmPassword:
return (
<ConfirmPassword
appState={appState}
application={application}
setMenuPane={setMenuPane}
email={email}
password={password}
/>
)
}
}
export default observer(MenuPaneSelector)

29
app/assets/javascripts/Components/AccountMenu/SignIn.tsx
View File

@@ -2,16 +2,15 @@ import { WebApplication } from '@/UIModels/Application'
import { AppState } from '@/UIModels/AppState'
import { isDev } from '@/Utils'
import { observer } from 'mobx-react-lite'
import { FunctionComponent } from 'preact'
import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
import React, { FunctionComponent, KeyboardEventHandler, useCallback, useEffect, useRef, useState } from 'react'
import { AccountMenuPane } from './AccountMenuPane'
import { Button } from '@/Components/Button/Button'
import { Checkbox } from '@/Components/Checkbox/Checkbox'
import { DecoratedInput } from '@/Components/Input/DecoratedInput'
import { DecoratedPasswordInput } from '@/Components/Input/DecoratedPasswordInput'
import { Icon } from '@/Components/Icon/Icon'
import { IconButton } from '@/Components/Button/IconButton'
import { AdvancedOptions } from './AdvancedOptions'
import Button from '@/Components/Button/Button'
import Checkbox from '@/Components/Checkbox/Checkbox'
import DecoratedInput from '@/Components/Input/DecoratedInput'
import DecoratedPasswordInput from '@/Components/Input/DecoratedPasswordInput'
import Icon from '@/Components/Icon/Icon'
import IconButton from '@/Components/Button/IconButton'
import AdvancedOptions from './AdvancedOptions'
type Props = {
appState: AppState
@@ -19,7 +18,7 @@ type Props = {
setMenuPane: (pane: AccountMenuPane) => void
}
export const SignInPane: FunctionComponent<Props> = observer(({ application, appState, setMenuPane }) => {
const SignInPane: FunctionComponent<Props> = ({ application, appState, setMenuPane }) => {
const { notesAndTagsCount } = appState.accountMenu
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
@@ -111,7 +110,7 @@ export const SignInPane: FunctionComponent<Props> = observer(({ application, app
)
const handleSignInFormSubmit = useCallback(
(e: Event) => {
(e: React.SyntheticEvent) => {
e.preventDefault()
if (!email || email.length === 0) {
@@ -129,8 +128,8 @@ export const SignInPane: FunctionComponent<Props> = observer(({ application, app
[email, password, signIn],
)
const handleKeyDown = useCallback(
(e: KeyboardEvent) => {
const handleKeyDown: KeyboardEventHandler = useCallback(
(e) => {
if (e.key === 'Enter') {
handleSignInFormSubmit(e)
}
@@ -210,4 +209,6 @@ export const SignInPane: FunctionComponent<Props> = observer(({ application, app
/>
</>
)
})
}
export default observer(SignInPane)

6
app/assets/javascripts/Components/AccountMenu/User.tsx
View File

@@ -8,7 +8,7 @@ type Props = {
application: WebApplication
}
const User = observer(({ appState, application }: Props) => {
const User = ({ appState, application }: Props) => {
const { server } = appState.accountMenu
const user = application.getUser() as UserType
@@ -39,6 +39,6 @@ const User = observer(({ appState, application }: Props) => {
<div className="sk-panel-row" />
</div>
)
})
}
export default User
export default observer(User)

38
app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx
View File

@@ -1,9 +1,17 @@
import { Icon } from '@/Components/Icon/Icon'
import { MenuItem, MenuItemType } from '@/Components/Menu/MenuItem'
import Icon from '@/Components/Icon/Icon'
import MenuItem from '@/Components/Menu/MenuItem'
import { MenuItemType } from '@/Components/Menu/MenuItemType'
import { KeyboardKey } from '@/Services/IOService'
import { ApplicationDescriptor } from '@standardnotes/snjs'
import { FunctionComponent } from 'preact'
import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
import {
FocusEventHandler,
FunctionComponent,
KeyboardEventHandler,
useCallback,
useEffect,
useRef,
useState,
} from 'react'
type Props = {
descriptor: ApplicationDescriptor
@@ -13,7 +21,7 @@ type Props = {
hideOptions: boolean
}
export const WorkspaceMenuItem: FunctionComponent<Props> = ({
const WorkspaceMenuItem: FunctionComponent<Props> = ({
descriptor,
onClick,
onDelete,
@@ -29,15 +37,15 @@ export const WorkspaceMenuItem: FunctionComponent<Props> = ({
}
}, [isRenaming])
const handleInputKeyDown = useCallback((event: KeyboardEvent) => {
const handleInputKeyDown: KeyboardEventHandler = useCallback((event) => {
if (event.key === KeyboardKey.Enter) {
inputRef.current?.blur()
}
}, [])
const handleInputBlur = useCallback(
(event: FocusEvent) => {
const name = (event.target as HTMLInputElement).value
const handleInputBlur: FocusEventHandler<HTMLInputElement> = useCallback(
(event) => {
const name = event.target.value
renameDescriptor(name)
setIsRenaming(false)
},
@@ -65,7 +73,8 @@ export const WorkspaceMenuItem: FunctionComponent<Props> = ({
)}
{descriptor.primary && !hideOptions && (
<div>
<button
<a
role="button"
className="w-5 h-5 p-0 mr-3 border-0 bg-transparent hover:bg-contrast cursor-pointer"
onClick={(e) => {
e.stopPropagation()
@@ -73,8 +82,9 @@ export const WorkspaceMenuItem: FunctionComponent<Props> = ({
}}
>
<Icon type="pencil" className="sn-icon--mid color-neutral" />
</button>
<button
</a>
<a
role="button"
className="w-5 h-5 p-0 border-0 bg-transparent hover:bg-contrast cursor-pointer"
onClick={(e) => {
e.stopPropagation()
@@ -82,10 +92,12 @@ export const WorkspaceMenuItem: FunctionComponent<Props> = ({
}}
>
<Icon type="trash" className="sn-icon--mid color-danger" />
</button>
</a>
</div>
)}
</div>
</MenuItem>
)
}
export default WorkspaceMenuItem

26
app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx
View File

@@ -2,12 +2,13 @@ import { ApplicationGroup } from '@/UIModels/ApplicationGroup'
import { AppState } from '@/UIModels/AppState'
import { ApplicationDescriptor, ApplicationGroupEvent, ButtonType } from '@standardnotes/snjs'
import { observer } from 'mobx-react-lite'
import { FunctionComponent } from 'preact'
import { useCallback, useEffect, useState } from 'preact/hooks'
import { Icon } from '@/Components/Icon/Icon'
import { Menu } from '@/Components/Menu/Menu'
import { MenuItem, MenuItemSeparator, MenuItemType } from '@/Components/Menu/MenuItem'
import { WorkspaceMenuItem } from './WorkspaceMenuItem'
import { FunctionComponent, useCallback, useEffect, useState } from 'react'
import Icon from '@/Components/Icon/Icon'
import Menu from '@/Components/Menu/Menu'
import MenuItem from '@/Components/Menu/MenuItem'
import MenuItemSeparator from '@/Components/Menu/MenuItemSeparator'
import { MenuItemType } from '@/Components/Menu/MenuItemType'
import WorkspaceMenuItem from './WorkspaceMenuItem'
type Props = {
mainApplicationGroup: ApplicationGroup
@@ -16,8 +17,12 @@ type Props = {
hideWorkspaceOptions?: boolean
}
export const WorkspaceSwitcherMenu: FunctionComponent<Props> = observer(
({ mainApplicationGroup, appState, isOpen, hideWorkspaceOptions = false }: Props) => {
const WorkspaceSwitcherMenu: FunctionComponent<Props> = ({
mainApplicationGroup,
appState,
isOpen,
hideWorkspaceOptions = false,
}: Props) => {
const [applicationDescriptors, setApplicationDescriptors] = useState<ApplicationDescriptor[]>([])
useEffect(() => {
@@ -85,5 +90,6 @@ export const WorkspaceSwitcherMenu: FunctionComponent<Props> = observer(
)}
</Menu>
)
},
)
}
export default observer(WorkspaceSwitcherMenu)

13
app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx
View File

@@ -3,17 +3,16 @@ import { ApplicationGroup } from '@/UIModels/ApplicationGroup'
import { AppState } from '@/UIModels/AppState'
import { calculateSubmenuStyle, SubmenuStyle } from '@/Utils/CalculateSubmenuStyle'
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 { WorkspaceSwitcherMenu } from './WorkspaceSwitcherMenu'
import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
import Icon from '@/Components/Icon/Icon'
import WorkspaceSwitcherMenu from './WorkspaceSwitcherMenu'
type Props = {
mainApplicationGroup: ApplicationGroup
appState: AppState
}
export const WorkspaceSwitcherOption: FunctionComponent<Props> = observer(({ mainApplicationGroup, appState }) => {
const WorkspaceSwitcherOption: FunctionComponent<Props> = ({ mainApplicationGroup, appState }) => {
const buttonRef = useRef<HTMLButtonElement>(null)
const menuRef = useRef<HTMLDivElement>(null)
const [isOpen, setIsOpen] = useState(false)
@@ -64,4 +63,6 @@ export const WorkspaceSwitcherOption: FunctionComponent<Props> = observer(({ mai
)}
</>
)
})
}
export default observer(WorkspaceSwitcherOption)

18
app/assets/javascripts/Components/ApplicationGroupView/ApplicationGroupView.tsx
View File

@@ -1,12 +1,12 @@
import { ApplicationGroup } from '@/UIModels/ApplicationGroup'
import { WebApplication } from '@/UIModels/Application'
import { Component } from 'preact'
import { ApplicationView } from '@/Components/ApplicationView/ApplicationView'
import { Component } from 'react'
import ApplicationView from '@/Components/ApplicationView/ApplicationView'
import { WebOrDesktopDevice } from '@/Device/WebOrDesktopDevice'
import { ApplicationGroupEvent, ApplicationGroupEventData, DeinitSource } from '@standardnotes/snjs'
import { unmountComponentAtNode, findDOMNode } from 'preact/compat'
import { DialogContent, DialogOverlay } from '@reach/dialog'
import { isDesktopApplication } from '@/Utils'
import DeallocateHandler from '../DeallocateHandler/DeallocateHandler'
type Props = {
server: string
@@ -23,7 +23,7 @@ type State = {
deviceDestroyed?: boolean
}
export class ApplicationGroupView extends Component<Props, State> {
class ApplicationGroupView extends Component<Props, State> {
applicationObserverRemover?: () => void
private group?: ApplicationGroup
private application?: WebApplication
@@ -74,17 +74,15 @@ export class ApplicationGroupView extends Component<Props, State> {
const onDestroy = this.props.onDestroy
const node = findDOMNode(this) as Element
unmountComponentAtNode(node)
onDestroy()
}
render() {
override render() {
const renderDialog = (message: string) => {
return (
<DialogOverlay className={'sn-component challenge-modal-overlay'}>
<DialogContent
aria-label="Switching workspace"
className={
'challenge-modal flex flex-col items-center bg-default p-8 rounded relative shadow-overlay-light border-1 border-solid border-main'
}
@@ -116,12 +114,16 @@ export class ApplicationGroupView extends Component<Props, State> {
return (
<div id={this.state.activeApplication.identifier} key={this.state.activeApplication.ephemeralIdentifier}>
<DeallocateHandler application={this.state.activeApplication}>
<ApplicationView
key={this.state.activeApplication.ephemeralIdentifier}
mainApplicationGroup={this.group}
application={this.state.activeApplication}
/>
</DeallocateHandler>
</div>
)
}
}
export default ApplicationGroupView

87
app/assets/javascripts/Components/ApplicationView/ApplicationView.tsx
View File

@@ -1,56 +1,44 @@
import { ApplicationGroup } from '@/UIModels/ApplicationGroup'
import { getPlatformString, getWindowUrlParams } from '@/Utils'
import { AppStateEvent, PanelResizedData } from '@/UIModels/AppState'
import { ApplicationEvent, Challenge, PermissionDialog, removeFromArray } from '@standardnotes/snjs'
import { ApplicationEvent, Challenge, removeFromArray } from '@standardnotes/snjs'
import { PANEL_NAME_NOTES, PANEL_NAME_NAVIGATION } from '@/Constants'
import { alertDialog } from '@/Services/AlertService'
import { WebApplication } from '@/UIModels/Application'
import { Navigation } from '@/Components/Navigation/Navigation'
import { NoteGroupView } from '@/Components/NoteGroupView/NoteGroupView'
import { Footer } from '@/Components/Footer/Footer'
import { SessionsModal } from '@/Components/SessionsModal/SessionsModal'
import { PreferencesViewWrapper } from '@/Components/Preferences/PreferencesViewWrapper'
import { ChallengeModal } from '@/Components/ChallengeModal/ChallengeModal'
import { NotesContextMenu } from '@/Components/NotesContextMenu/NotesContextMenu'
import { PurchaseFlowWrapper } from '@/Components/PurchaseFlow/PurchaseFlowWrapper'
import { render, FunctionComponent } from 'preact'
import { PermissionsModal } from '@/Components/PermissionsModal/PermissionsModal'
import { RevisionHistoryModalWrapper } from '@/Components/RevisionHistoryModal/RevisionHistoryModalWrapper'
import { PremiumModalProvider } from '@/Hooks/usePremiumModal'
import { ConfirmSignoutContainer } from '@/Components/ConfirmSignoutModal/ConfirmSignoutModal'
import { TagsContextMenu } from '@/Components/Tags/TagContextMenu'
import Navigation from '@/Components/Navigation/Navigation'
import NoteGroupView from '@/Components/NoteGroupView/NoteGroupView'
import Footer from '@/Components/Footer/Footer'
import SessionsModal from '@/Components/SessionsModal/SessionsModal'
import PreferencesViewWrapper from '@/Components/Preferences/PreferencesViewWrapper'
import ChallengeModal from '@/Components/ChallengeModal/ChallengeModal'
import NotesContextMenu from '@/Components/NotesContextMenu/NotesContextMenu'
import PurchaseFlowWrapper from '@/Components/PurchaseFlow/PurchaseFlowWrapper'
import { FunctionComponent, useCallback, useEffect, useMemo, useState } from 'react'
import RevisionHistoryModalWrapper from '@/Components/RevisionHistoryModal/RevisionHistoryModalWrapper'
import PremiumModalProvider from '@/Hooks/usePremiumModal'
import ConfirmSignoutContainer from '@/Components/ConfirmSignoutModal/ConfirmSignoutModal'
import TagsContextMenuWrapper from '@/Components/Tags/TagContextMenu'
import { ToastContainer } from '@standardnotes/stylekit'
import { FilePreviewModalWrapper } from '@/Components/Files/FilePreviewModal'
import { useCallback, useEffect, useMemo, useState } from 'preact/hooks'
import { isStateDealloced } from '@/UIModels/AppState/AbstractState'
import { ContentListView } from '@/Components/ContentListView/ContentListView'
import { FileContextMenu } from '@/Components/FileContextMenu/FileContextMenu'
import FilePreviewModalWrapper from '@/Components/Files/FilePreviewModal'
import ContentListView from '@/Components/ContentListView/ContentListView'
import FileContextMenuWrapper from '@/Components/FileContextMenu/FileContextMenu'
import PermissionsModalWrapper from '@/Components/PermissionsModal/PermissionsModalWrapper'
type Props = {
application: WebApplication
mainApplicationGroup: ApplicationGroup
}
export const ApplicationView: FunctionComponent<Props> = ({ application, mainApplicationGroup }) => {
const ApplicationView: FunctionComponent<Props> = ({ application, mainApplicationGroup }) => {
const platformString = getPlatformString()
const [appClass, setAppClass] = useState('')
const [launched, setLaunched] = useState(false)
const [needsUnlock, setNeedsUnlock] = useState(true)
const [challenges, setChallenges] = useState<Challenge[]>([])
const [dealloced, setDealloced] = useState(false)
const componentManager = application.componentManager
const appState = application.getAppState()
useEffect(() => {
setDealloced(application.dealloced)
}, [application.dealloced])
useEffect(() => {
if (dealloced) {
return
}
const desktopService = application.getDesktopService()
if (desktopService) {
@@ -70,7 +58,7 @@ export const ApplicationView: FunctionComponent<Props> = ({ application, mainApp
})
.catch(console.error)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [application, dealloced])
}, [application])
const removeChallenge = useCallback(
(challenge: Challenge) => {
@@ -81,29 +69,9 @@ export const ApplicationView: FunctionComponent<Props> = ({ application, mainApp
[challenges],
)
const presentPermissionsDialog = useCallback(
(dialog: PermissionDialog) => {
render(
<PermissionsModal
application={application}
callback={dialog.callback}
component={dialog.component}
permissionsString={dialog.permissionsString}
/>,
document.body.appendChild(document.createElement('div')),
)
},
[application],
)
const onAppStart = useCallback(() => {
setNeedsUnlock(application.hasPasscode())
componentManager.presentPermissionsDialog = presentPermissionsDialog
return () => {
;(componentManager.presentPermissionsDialog as unknown) = undefined
}
}, [application, componentManager, presentPermissionsDialog])
}, [application])
const handleDemoSignInFromParams = useCallback(() => {
const token = getWindowUrlParams().get('demo-token')
@@ -183,7 +151,7 @@ export const ApplicationView: FunctionComponent<Props> = ({ application, mainApp
<>
{challenges.map((challenge) => {
return (
<div className="sk-modal">
<div className="sk-modal" key={`${challenge.id}${application.ephemeralIdentifier}`}>
<ChallengeModal
key={`${challenge.id}${application.ephemeralIdentifier}`}
application={application}
@@ -199,10 +167,6 @@ export const ApplicationView: FunctionComponent<Props> = ({ application, mainApp
)
}, [appState, challenges, mainApplicationGroup, removeChallenge, application])
if (dealloced || isStateDealloced(appState)) {
return null
}
if (!renderAppContents) {
return renderChallenges()
}
@@ -227,8 +191,8 @@ export const ApplicationView: FunctionComponent<Props> = ({ application, mainApp
<>
<NotesContextMenu application={application} appState={appState} />
<TagsContextMenu appState={appState} />
<FileContextMenu appState={appState} />
<TagsContextMenuWrapper appState={appState} />
<FileContextMenuWrapper appState={appState} />
<PurchaseFlowWrapper application={application} appState={appState} />
<ConfirmSignoutContainer
applicationGroup={mainApplicationGroup}
@@ -237,8 +201,11 @@ export const ApplicationView: FunctionComponent<Props> = ({ application, mainApp
/>
<ToastContainer />
<FilePreviewModalWrapper application={application} appState={appState} />
<PermissionsModalWrapper application={application} />
</>
</div>
</PremiumModalProvider>
)
}
export default ApplicationView

20
app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
View File

@@ -4,20 +4,18 @@ 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 { 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'
import { ChallengeReason, ContentType, FileItem, SNNote } from '@standardnotes/snjs'
import { confirmDialog } from '@/Services/AlertService'
import { addToast, dismissToast, ToastType } from '@standardnotes/stylekit'
import { StreamingFileReader } from '@standardnotes/filepicker'
import { PopoverFileItemAction, PopoverFileItemActionType } from './PopoverFileItemAction'
import { AttachedFilesPopover } from './AttachedFilesPopover'
import AttachedFilesPopover from './AttachedFilesPopover'
import { usePremiumModal } from '@/Hooks/usePremiumModal'
import { PopoverTabs } from './PopoverTabs'
import { isHandlingFileDrag } from '@/Utils/DragTypeCheck'
import { isStateDealloced } from '@/UIModels/AppState/AbstractState'
type Props = {
application: WebApplication
@@ -25,12 +23,7 @@ type Props = {
onClickPreprocessing?: () => Promise<void>
}
export const AttachedFilesButton: FunctionComponent<Props> = observer(
({ application, appState, onClickPreprocessing }: Props) => {
if (isStateDealloced(appState)) {
return null
}
const AttachedFilesButton: FunctionComponent<Props> = ({ application, appState, onClickPreprocessing }: Props) => {
const premiumModal = usePremiumModal()
const note: SNNote | undefined = appState.notes.firstSelectedNote
@@ -417,5 +410,6 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
</Disclosure>
</div>
)
},
)
}
export default observer(AttachedFilesButton)

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

@@ -4,11 +4,10 @@ import { AppState } from '@/UIModels/AppState'
import { FileItem } from '@standardnotes/snjs'
import { FilesIllustration } from '@standardnotes/icons'
import { observer } from 'mobx-react-lite'
import { FunctionComponent } from 'preact'
import { StateUpdater, useRef, useState } from 'preact/hooks'
import { Button } from '@/Components/Button/Button'
import { Icon } from '@/Components/Icon/Icon'
import { PopoverFileItem } from './PopoverFileItem'
import { Dispatch, FunctionComponent, SetStateAction, useRef, useState } from 'react'
import Button from '@/Components/Button/Button'
import Icon from '@/Components/Icon/Icon'
import PopoverFileItem from './PopoverFileItem'
import { PopoverFileItemAction, PopoverFileItemActionType } from './PopoverFileItemAction'
import { PopoverTabs } from './PopoverTabs'
@@ -21,11 +20,10 @@ type Props = {
currentTab: PopoverTabs
handleFileAction: (action: PopoverFileItemAction) => Promise<boolean>
isDraggingFiles: boolean
setCurrentTab: StateUpdater<PopoverTabs>
setCurrentTab: Dispatch<SetStateAction<PopoverTabs>>
}
export const AttachedFilesPopover: FunctionComponent<Props> = observer(
({
const AttachedFilesPopover: FunctionComponent<Props> = ({
application,
appState,
allFiles,
@@ -35,7 +33,7 @@ export const AttachedFilesPopover: FunctionComponent<Props> = observer(
handleFileAction,
isDraggingFiles,
setCurrentTab,
}) => {
}) => {
const [searchQuery, setSearchQuery] = useState('')
const searchInputRef = useRef<HTMLInputElement>(null)
@@ -169,5 +167,6 @@ export const AttachedFilesPopover: FunctionComponent<Props> = observer(
)}
</div>
)
},
)
}
export default observer(AttachedFilesPopover)

35
app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx
View File

@@ -1,28 +1,15 @@
import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants'
import { KeyboardKey } from '@/Services/IOService'
import { formatSizeToReadableString } from '@standardnotes/filepicker'
import { IconType, FileItem } from '@standardnotes/snjs'
import { FunctionComponent } from 'preact'
import { useEffect, useRef, useState } from 'preact/hooks'
import { Icon, ICONS } from '@/Components/Icon/Icon'
import { PopoverFileItemAction, PopoverFileItemActionType } from './PopoverFileItemAction'
import { PopoverFileSubmenu } from './PopoverFileSubmenu'
import { FileItem } from '@standardnotes/snjs'
import { FormEventHandler, FunctionComponent, KeyboardEventHandler, useEffect, useRef, useState } from 'react'
import Icon from '@/Components/Icon/Icon'
import { PopoverFileItemActionType } from './PopoverFileItemAction'
import PopoverFileSubmenu from './PopoverFileSubmenu'
import { getFileIconComponent } from './getFileIconComponent'
import { PopoverFileItemProps } from './PopoverFileItemProps'
export const getFileIconComponent = (iconType: string, className: string) => {
const IconComponent = ICONS[iconType as keyof typeof ICONS]
return <IconComponent className={className} />
}
export type PopoverFileItemProps = {
file: FileItem
isAttachedToNote: boolean
handleFileAction: (action: PopoverFileItemAction) => Promise<boolean>
getIconType(type: string): IconType
closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void
}
export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
file,
isAttachedToNote,
handleFileAction,
@@ -51,11 +38,11 @@ export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
setIsRenamingFile(false)
}
const handleFileNameInput = (event: Event) => {
const handleFileNameInput: FormEventHandler<HTMLInputElement> = (event) => {
setFileName((event.target as HTMLInputElement).value)
}
const handleFileNameInputKeyDown = (event: KeyboardEvent) => {
const handleFileNameInputKeyDown: KeyboardEventHandler = (event) => {
if (event.key === KeyboardKey.Enter) {
itemRef.current?.focus()
}
@@ -115,3 +102,5 @@ export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
</div>
)
}
export default PopoverFileItem

10
app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItemProps.tsx Normal file
View File

@@ -0,0 +1,10 @@
import { IconType, FileItem } from '@standardnotes/snjs'
import { PopoverFileItemAction } from './PopoverFileItemAction'
export type PopoverFileItemProps = {
file: FileItem
isAttachedToNote: boolean
handleFileAction: (action: PopoverFileItemAction) => Promise<boolean>
getIconType(type: string): IconType
closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void
}

15
app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileSubmenu.tsx
View File

@@ -1,20 +1,19 @@
import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants'
import { calculateSubmenuStyle, SubmenuStyle } from '@/Utils/CalculateSubmenuStyle'
import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
import { FunctionComponent } from 'preact'
import { StateUpdater, useCallback, useEffect, useRef, useState } from 'preact/hooks'
import { Icon } from '@/Components/Icon/Icon'
import { Switch } from '@/Components/Switch/Switch'
import { Dispatch, FunctionComponent, SetStateAction, useCallback, useEffect, useRef, useState } from 'react'
import Icon from '@/Components/Icon/Icon'
import Switch from '@/Components/Switch/Switch'
import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
import { PopoverFileItemProps } from './PopoverFileItem'
import { PopoverFileItemProps } from './PopoverFileItemProps'
import { PopoverFileItemActionType } from './PopoverFileItemAction'
type Props = Omit<PopoverFileItemProps, 'renameFile' | 'getIconType'> & {
setIsRenamingFile: StateUpdater<boolean>
setIsRenamingFile: Dispatch<SetStateAction<boolean>>
previewHandler: () => void
}
export const PopoverFileSubmenu: FunctionComponent<Props> = ({
const PopoverFileSubmenu: FunctionComponent<Props> = ({
file,
isAttachedToNote,
handleFileAction,
@@ -197,3 +196,5 @@ export const PopoverFileSubmenu: FunctionComponent<Props> = ({
</div>
)
}
export default PopoverFileSubmenu

7
app/assets/javascripts/Components/AttachedFilesPopover/getFileIconComponent.tsx Normal file
View File

@@ -0,0 +1,7 @@
import { ICONS } from '@/Components/Icon/Icon'
export const getFileIconComponent = (iconType: string, className: string) => {
const IconComponent = ICONS[iconType as keyof typeof ICONS]
return <IconComponent className={className} />
}

6
app/assets/javascripts/Components/Bubble/Bubble.tsx
View File

@@ -1,4 +1,6 @@
interface BubbleProperties {
import { FunctionComponent } from 'react'
type Props = {
label: string
selected: boolean
onSelect: () => void
@@ -10,7 +12,7 @@ const styles = {
selected: 'border-info bg-info color-neutral-contrast',
}
const Bubble = ({ label, selected, onSelect }: BubbleProperties) => (
const Bubble: FunctionComponent<Props> = ({ label, selected, onSelect }) => (
<span
role="tab"
className={`bubble ${styles.base} ${selected ? styles.selected : styles.unselected}`}

12
app/assets/javascripts/Components/Button/Button.tsx
View File

@@ -1,6 +1,4 @@
import { JSXInternal } from 'preact/src/jsx'
import { ComponentChildren, FunctionComponent, Ref } from 'preact'
import { forwardRef } from 'preact/compat'
import { Ref, forwardRef, ReactNode, ComponentPropsWithoutRef } from 'react'
const baseClass = 'rounded px-4 py-1.75 font-bold text-sm fit-content'
@@ -32,15 +30,15 @@ const getClassName = (variant: ButtonVariant, danger: boolean, disabled: boolean
return `${baseClass} ${colors} ${borders} ${focusHoverStates} ${cursor}`
}
type ButtonProps = JSXInternal.HTMLAttributes<HTMLButtonElement> & {
children?: ComponentChildren
interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
children?: ReactNode
className?: string
variant?: ButtonVariant
dangerStyle?: boolean
label?: string
}
export const Button: FunctionComponent<ButtonProps> = forwardRef(
const Button = forwardRef(
(
{
variant = 'normal',
@@ -66,3 +64,5 @@ export const Button: FunctionComponent<ButtonProps> = forwardRef(
)
},
)
export default Button

28
app/assets/javascripts/Components/Button/IconButton.tsx
View File

@@ -1,34 +1,18 @@
import { FunctionComponent } from 'preact'
import { Icon } from '@/Components/Icon/Icon'
import { FunctionComponent, MouseEventHandler } from 'react'
import Icon from '@/Components/Icon/Icon'
import { IconType } from '@standardnotes/snjs'
interface Props {
/**
* onClick - preventDefault is handled within the component
*/
type Props = {
onClick: () => void
className?: string
icon: IconType
iconClassName?: string
/**
* Button tooltip
*/
title: string
focusable: boolean
disabled?: boolean
}
/**
* IconButton component with an icon
* preventDefault is already handled within the component
*/
export const IconButton: FunctionComponent<Props> = ({
const IconButton: FunctionComponent<Props> = ({
onClick,
className = '',
icon,
@@ -37,7 +21,7 @@ export const IconButton: FunctionComponent<Props> = ({
iconClassName = '',
disabled = false,
}) => {
const click = (e: MouseEvent) => {
const click: MouseEventHandler = (e) => {
e.preventDefault()
onClick()
}
@@ -55,3 +39,5 @@ export const IconButton: FunctionComponent<Props> = ({
</button>
)
}
export default IconButton

22
app/assets/javascripts/Components/Button/RoundIconButton.tsx
View File

@@ -1,28 +1,18 @@
import { FunctionComponent } from 'preact'
import { Icon } from '@/Components/Icon/Icon'
import { FunctionComponent, MouseEventHandler } from 'react'
import Icon from '@/Components/Icon/Icon'
import { IconType } from '@standardnotes/snjs'
type ButtonType = 'normal' | 'primary'
interface Props {
/**
* onClick - preventDefault is handled within the component
*/
type Props = {
onClick: () => void
type: ButtonType
className?: string
icon: IconType
}
/**
* IconButton component with an icon
* preventDefault is already handled within the component
*/
export const RoundIconButton: FunctionComponent<Props> = ({ onClick, type, className, icon: iconType }) => {
const click = (e: MouseEvent) => {
const RoundIconButton: FunctionComponent<Props> = ({ onClick, type, className, icon: iconType }) => {
const click: MouseEventHandler = (e) => {
e.preventDefault()
onClick()
}
@@ -33,3 +23,5 @@ export const RoundIconButton: FunctionComponent<Props> = ({ onClick, type, class
</button>
)
}
export default RoundIconButton

25
app/assets/javascripts/Components/ChallengeModal/ChallengeModal.tsx
View File

@@ -9,22 +9,14 @@ import {
removeFromArray,
} from '@standardnotes/snjs'
import { ProtectedIllustration } from '@standardnotes/icons'
import { FunctionComponent } from 'preact'
import { useCallback, useEffect, useState } from 'preact/hooks'
import { Button } from '@/Components/Button/Button'
import { Icon } from '@/Components/Icon/Icon'
import { ChallengeModalPrompt } from './ChallengePrompt'
import { LockscreenWorkspaceSwitcher } from './LockscreenWorkspaceSwitcher'
import { FunctionComponent, useCallback, useEffect, useState } from 'react'
import Button from '@/Components/Button/Button'
import Icon from '@/Components/Icon/Icon'
import ChallengeModalPrompt from './ChallengePrompt'
import LockscreenWorkspaceSwitcher from './LockscreenWorkspaceSwitcher'
import { ApplicationGroup } from '@/UIModels/ApplicationGroup'
import { AppState } from '@/UIModels/AppState'
type InputValue = {
prompt: ChallengePrompt
value: string | number | boolean
invalid: boolean
}
export type ChallengeModalValues = Record<ChallengePrompt['id'], InputValue>
import { ChallengeModalValues } from './ChallengeModalValues'
type Props = {
application: WebApplication
@@ -50,7 +42,7 @@ const validateValues = (values: ChallengeModalValues, prompts: ChallengePrompt[]
return undefined
}
export const ChallengeModal: FunctionComponent<Props> = ({
const ChallengeModal: FunctionComponent<Props> = ({
application,
appState,
mainApplicationGroup,
@@ -191,6 +183,7 @@ export const ChallengeModal: FunctionComponent<Props> = ({
key={challenge.id}
>
<DialogContent
aria-label="Challenge modal"
className={`challenge-modal flex flex-col items-center bg-default p-8 rounded relative ${
challenge.reason !== ChallengeReason.ApplicationUnlock
? 'shadow-overlay-light border-1 border-solid border-main'
@@ -268,3 +261,5 @@ export const ChallengeModal: FunctionComponent<Props> = ({
</DialogOverlay>
)
}
export default ChallengeModal

4
app/assets/javascripts/Components/ChallengeModal/ChallengeModalValues.tsx Normal file
View File

@@ -0,0 +1,4 @@
import { ChallengePrompt } from '@standardnotes/snjs'
import { InputValue } from './InputValue'
export type ChallengeModalValues = Record<ChallengePrompt['id'], InputValue>

14
app/assets/javascripts/Components/ChallengeModal/ChallengePrompt.tsx
View File

@@ -1,9 +1,8 @@
import { ChallengePrompt, ChallengeValidation, ProtectionSessionDurations } from '@standardnotes/snjs'
import { FunctionComponent } from 'preact'
import { useEffect, useRef } from 'preact/hooks'
import { DecoratedInput } from '@/Components/Input/DecoratedInput'
import { DecoratedPasswordInput } from '@/Components/Input/DecoratedPasswordInput'
import { ChallengeModalValues } from './ChallengeModal'
import { FunctionComponent, useEffect, useRef } from 'react'
import DecoratedInput from '@/Components/Input/DecoratedInput'
import DecoratedPasswordInput from '@/Components/Input/DecoratedPasswordInput'
import { ChallengeModalValues } from './ChallengeModalValues'
type Props = {
prompt: ChallengePrompt
@@ -13,7 +12,7 @@ type Props = {
isInvalid: boolean
}
export const ChallengeModalPrompt: FunctionComponent<Props> = ({ prompt, values, index, onValueChange, isInvalid }) => {
const ChallengeModalPrompt: FunctionComponent<Props> = ({ prompt, values, index, onValueChange, isInvalid }) => {
const inputRef = useRef<HTMLInputElement>(null)
useEffect(() => {
@@ -38,6 +37,7 @@ export const ChallengeModalPrompt: FunctionComponent<Props> = ({ prompt, values,
const selected = option.valueInSeconds === values[prompt.id].value
return (
<label
key={option.label}
className={`cursor-pointer px-2 py-1.5 rounded ${
selected ? 'bg-default color-foreground font-semibold' : 'color-passive-0 hover:bg-passive-3'
}`}
@@ -80,3 +80,5 @@ export const ChallengeModalPrompt: FunctionComponent<Props> = ({ prompt, values,
</div>
)
}
export default ChallengeModalPrompt

7
app/assets/javascripts/Components/ChallengeModal/InputValue.tsx Normal file
View File

@@ -0,0 +1,7 @@
import { ChallengePrompt } from '@standardnotes/snjs'
export type InputValue = {
prompt: ChallengePrompt
value: string | number | boolean
invalid: boolean
}

13
app/assets/javascripts/Components/ChallengeModal/LockscreenWorkspaceSwitcher.tsx
View File

@@ -1,11 +1,10 @@
import { ApplicationGroup } from '@/UIModels/ApplicationGroup'
import { AppState } from '@/UIModels/AppState'
import { calculateSubmenuStyle, SubmenuStyle } from '@/Utils/CalculateSubmenuStyle'
import { FunctionComponent } from 'preact'
import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
import { WorkspaceSwitcherMenu } from '@/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu'
import { Button } from '@/Components/Button/Button'
import { Icon } from '@/Components/Icon/Icon'
import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
import WorkspaceSwitcherMenu from '@/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu'
import Button from '@/Components/Button/Button'
import Icon from '@/Components/Icon/Icon'
import { useCloseOnClickOutside } from '@/Hooks/useCloseOnClickOutside'
type Props = {
@@ -13,7 +12,7 @@ type Props = {
appState: AppState
}
export const LockscreenWorkspaceSwitcher: FunctionComponent<Props> = ({ mainApplicationGroup, appState }) => {
const LockscreenWorkspaceSwitcher: FunctionComponent<Props> = ({ mainApplicationGroup, appState }) => {
const buttonRef = useRef<HTMLButtonElement>(null)
const menuRef = useRef<HTMLDivElement>(null)
const containerRef = useRef<HTMLDivElement>(null)
@@ -65,3 +64,5 @@ export const LockscreenWorkspaceSwitcher: FunctionComponent<Props> = ({ mainAppl
</div>
)
}
export default LockscreenWorkspaceSwitcher

20
app/assets/javascripts/Components/ChangeEditor/ChangeEditorButton.tsx
View File

@@ -4,12 +4,10 @@ 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/Icon'
import { ChangeEditorMenu } from './ChangeEditorMenu'
import { FunctionComponent, useRef, useState } from 'react'
import Icon from '@/Components/Icon/Icon'
import ChangeEditorMenu from './ChangeEditorMenu'
import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
import { isStateDealloced } from '@/UIModels/AppState/AbstractState'
type Props = {
application: WebApplication
@@ -17,12 +15,7 @@ type Props = {
onClickPreprocessing?: () => Promise<void>
}
export const ChangeEditorButton: FunctionComponent<Props> = observer(
({ application, appState, onClickPreprocessing }: Props) => {
if (isStateDealloced(appState)) {
return null
}
const ChangeEditorButton: FunctionComponent<Props> = ({ application, appState, onClickPreprocessing }: Props) => {
const note = appState.notes.firstSelectedNote
const [isOpen, setIsOpen] = useState(false)
const [isVisible, setIsVisible] = useState(false)
@@ -110,5 +103,6 @@ export const ChangeEditorButton: FunctionComponent<Props> = observer(
</Disclosure>
</div>
)
},
)
}
export default observer(ChangeEditorButton)

18
app/assets/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx
View File

@@ -1,6 +1,7 @@
import { Icon } from '@/Components/Icon/Icon'
import { Menu } from '@/Components/Menu/Menu'
import { MenuItem, MenuItemType } from '@/Components/Menu/MenuItem'
import Icon from '@/Components/Icon/Icon'
import Menu from '@/Components/Menu/Menu'
import MenuItem from '@/Components/Menu/MenuItem'
import { MenuItemType } from '@/Components/Menu/MenuItemType'
import { usePremiumModal } from '@/Hooks/usePremiumModal'
import { STRING_EDIT_LOCKED_ATTEMPT } from '@/Strings'
import { WebApplication } from '@/UIModels/Application'
@@ -13,9 +14,9 @@ import {
SNNote,
TransactionalMutation,
} from '@standardnotes/snjs'
import { Fragment, FunctionComponent } from 'preact'
import { useCallback, useEffect, useState } from 'preact/hooks'
import { EditorMenuItem, EditorMenuGroup } from '@/Components/NotesOptions/ChangeEditorOption'
import { Fragment, FunctionComponent, useCallback, useEffect, useState } from 'react'
import { EditorMenuGroup } from '@/Components/NotesOptions/EditorMenuGroup'
import { EditorMenuItem } from '@/Components/NotesOptions/EditorMenuItem'
import { createEditorMenuGroups } from './createEditorMenuGroups'
import { PLAIN_EDITOR_NAME } from '@/Constants'
import {
@@ -34,7 +35,7 @@ type ChangeEditorMenuProps = {
const getGroupId = (group: EditorMenuGroup) => group.title.toLowerCase().replace(/\s/, '-')
export const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
application,
closeOnBlur,
closeMenu,
@@ -189,6 +190,7 @@ export const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
}
return (
<MenuItem
key={item.name}
type={MenuItemType.RadioButton}
onClick={onClickEditorItem}
className={
@@ -214,3 +216,5 @@ export const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
</Menu>
)
}
export default ChangeEditorMenu

3
app/assets/javascripts/Components/ChangeEditor/createEditorMenuGroups.ts
View File

@@ -8,7 +8,8 @@ import {
GetFeatures,
NoteType,
} from '@standardnotes/snjs'
import { EditorMenuItem, EditorMenuGroup } from '@/Components/NotesOptions/ChangeEditorOption'
import { EditorMenuGroup } from '@/Components/NotesOptions/EditorMenuGroup'
import { EditorMenuItem } from '@/Components/NotesOptions/EditorMenuItem'
import { PLAIN_EDITOR_NAME } from '@/Constants'
type EditorGroup = NoteType | 'plain' | 'others'

8
app/assets/javascripts/Components/Checkbox/Checkbox.tsx
View File

@@ -1,14 +1,14 @@
import { FunctionComponent } from 'preact'
import { ChangeEventHandler, FunctionComponent } from 'react'
type CheckboxProps = {
name: string
checked: boolean
onChange: (e: Event) => void
onChange: ChangeEventHandler<HTMLInputElement>
disabled?: boolean
label: string
}
export const Checkbox: FunctionComponent<CheckboxProps> = ({ name, checked, onChange, disabled, label }) => {
const Checkbox: FunctionComponent<CheckboxProps> = ({ name, checked, onChange, disabled, label }) => {
return (
<label htmlFor={name} className="flex items-center fit-content mb-2">
<input
@@ -24,3 +24,5 @@ export const Checkbox: FunctionComponent<CheckboxProps> = ({ name, checked, onCh
</label>
)
}
export default Checkbox

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

@@ -8,14 +8,13 @@ import {
ComponentViewerError,
} from '@standardnotes/snjs'
import { WebApplication } from '@/UIModels/Application'
import { FunctionalComponent } from 'preact'
import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
import { observer } from 'mobx-react-lite'
import { OfflineRestricted } from '@/Components/ComponentView/OfflineRestricted'
import { UrlMissing } from '@/Components/ComponentView/UrlMissing'
import { IsDeprecated } from '@/Components/ComponentView/IsDeprecated'
import { IsExpired } from '@/Components/ComponentView/IsExpired'
import { IssueOnLoading } from '@/Components/ComponentView/IssueOnLoading'
import OfflineRestricted from '@/Components/ComponentView/OfflineRestricted'
import UrlMissing from '@/Components/ComponentView/UrlMissing'
import IsDeprecated from '@/Components/ComponentView/IsDeprecated'
import IsExpired from '@/Components/ComponentView/IsExpired'
import IssueOnLoading from '@/Components/ComponentView/IssueOnLoading'
import { AppState } from '@/UIModels/AppState'
import { openSubscriptionDashboard } from '@/Utils/ManageSubscription'
@@ -35,8 +34,7 @@ const MaxLoadThreshold = 4000
const VisibilityChangeKey = 'visibilitychange'
const MSToWaitAfterIframeLoadToAvoidFlicker = 35
export const ComponentView: FunctionalComponent<IProps> = observer(
({ application, onLoad, componentViewer, requestReload }) => {
const ComponentView: FunctionComponent<IProps> = ({ application, onLoad, componentViewer, requestReload }) => {
const iframeRef = useRef<HTMLIFrameElement>(null)
const [loadTimeout, setLoadTimeout] = useState<ReturnType<typeof setTimeout> | undefined>(undefined)
@@ -217,5 +215,6 @@ export const ComponentView: FunctionalComponent<IProps> = observer(
{isLoading && <div className={'loading-overlay'} />}
</>
)
},
)
}
export default observer(ComponentView)

8
app/assets/javascripts/Components/ComponentView/IsDeprecated.tsx
View File

@@ -1,11 +1,11 @@
import { FunctionalComponent } from 'preact'
import { FunctionComponent } from 'react'
interface IProps {
type Props = {
deprecationMessage: string | undefined
dismissDeprecationMessage: () => void
}
export const IsDeprecated: FunctionalComponent<IProps> = ({ deprecationMessage, dismissDeprecationMessage }) => {
const IsDeprecated: FunctionComponent<Props> = ({ deprecationMessage, dismissDeprecationMessage }) => {
return (
<div className={'sn-component'}>
<div className={'sk-app-bar no-edges no-top-edge dynamic-height'}>
@@ -23,3 +23,5 @@ export const IsDeprecated: FunctionalComponent<IProps> = ({ deprecationMessage,
</div>
)
}
export default IsDeprecated

13
app/assets/javascripts/Components/ComponentView/IsExpired.tsx
View File

@@ -1,7 +1,7 @@
import { FeatureStatus } from '@standardnotes/snjs'
import { FunctionalComponent } from 'preact'
import { FunctionComponent } from 'react'
interface IProps {
type Props = {
expiredDate: string
componentName: string
featureStatus: FeatureStatus
@@ -21,12 +21,7 @@ const statusString = (featureStatus: FeatureStatus, expiredDate: string, compone
}
}
export const IsExpired: FunctionalComponent<IProps> = ({
expiredDate,
featureStatus,
componentName,
manageSubscription,
}) => {
const IsExpired: FunctionComponent<Props> = ({ expiredDate, featureStatus, componentName, manageSubscription }) => {
return (
<div className={'sn-component'}>
<div className={'sk-app-bar no-edges no-top-edge dynamic-height'}>
@@ -52,3 +47,5 @@ export const IsExpired: FunctionalComponent<IProps> = ({
</div>
)
}
export default IsExpired

8
app/assets/javascripts/Components/ComponentView/IssueOnLoading.tsx
View File

@@ -1,11 +1,11 @@
import { FunctionalComponent } from 'preact'
import { FunctionComponent } from 'react'
interface IProps {
type Props = {
componentName: string
reloadIframe: () => void
}
export const IssueOnLoading: FunctionalComponent<IProps> = ({ componentName, reloadIframe }) => {
const IssueOnLoading: FunctionComponent<Props> = ({ componentName, reloadIframe }) => {
return (
<div className={'sn-component'}>
<div className={'sk-app-bar no-edges no-top-edge dynamic-height'}>
@@ -23,3 +23,5 @@ export const IssueOnLoading: FunctionalComponent<IProps> = ({ componentName, rel
</div>
)
}
export default IssueOnLoading

6
app/assets/javascripts/Components/ComponentView/OfflineRestricted.tsx
View File

@@ -1,6 +1,6 @@
import { FunctionalComponent } from 'preact'
import { FunctionComponent } from 'react'
export const OfflineRestricted: FunctionalComponent = () => {
const OfflineRestricted: FunctionComponent = () => {
return (
<div className={'sn-component'}>
<div className={'sk-panel static'}>
@@ -29,3 +29,5 @@ export const OfflineRestricted: FunctionalComponent = () => {
</div>
)
}
export default OfflineRestricted

8
app/assets/javascripts/Components/ComponentView/UrlMissing.tsx
View File

@@ -1,10 +1,10 @@
import { FunctionalComponent } from 'preact'
import { FunctionComponent } from 'react'
interface IProps {
type Props = {
componentName: string
}
export const UrlMissing: FunctionalComponent<IProps> = ({ componentName }) => {
const UrlMissing: FunctionComponent<Props> = ({ componentName }) => {
return (
<div className={'sn-component'}>
<div className={'sk-panel static'}>
@@ -20,3 +20,5 @@ export const UrlMissing: FunctionalComponent<IProps> = ({ componentName }) => {
</div>
)
}
export default UrlMissing

24
app/assets/javascripts/Components/ConfirmSignoutModal/ConfirmSignoutModal.tsx
View File

@@ -1,4 +1,4 @@
import { useEffect, useRef, useState } from 'preact/hooks'
import { FunctionComponent, useEffect, useRef, useState } from 'react'
import { AlertDialog, AlertDialogDescription, AlertDialogLabel } from '@reach/alert-dialog'
import { STRING_SIGN_OUT_CONFIRMATION } from '@/Strings'
import { WebApplication } from '@/UIModels/Application'
@@ -13,14 +13,7 @@ type Props = {
applicationGroup: ApplicationGroup
}
export const ConfirmSignoutContainer = observer((props: Props) => {
if (!props.appState.accountMenu.signingOut) {
return null
}
return <ConfirmSignoutModal {...props} />
})
export const ConfirmSignoutModal = observer(({ application, appState, applicationGroup }: Props) => {
const ConfirmSignoutModal: FunctionComponent<Props> = ({ application, appState, applicationGroup }) => {
const [deleteLocalBackups, setDeleteLocalBackups] = useState(false)
const cancelRef = useRef<HTMLButtonElement>(null)
@@ -114,4 +107,15 @@ export const ConfirmSignoutModal = observer(({ application, appState, applicatio
</div>
</AlertDialog>
)
})
}
ConfirmSignoutModal.displayName = 'ConfirmSignoutModal'
const ConfirmSignoutContainer = (props: Props) => {
if (!props.appState.accountMenu.signingOut) {
return null
}
return <ConfirmSignoutModal {...props} />
}
export default observer(ConfirmSignoutContainer)

21
app/assets/javascripts/Components/ContentListView/ContentList.tsx
View File

@@ -3,11 +3,10 @@ import { KeyboardKey } from '@/Services/IOService'
import { AppState } from '@/UIModels/AppState'
import { UuidString } from '@standardnotes/snjs'
import { observer } from 'mobx-react-lite'
import { FunctionComponent } from 'preact'
import { FunctionComponent, KeyboardEventHandler, UIEventHandler, useCallback } from 'react'
import { FOCUSABLE_BUT_NOT_TABBABLE, NOTES_LIST_SCROLL_THRESHOLD } from '@/Constants'
import { ListableContentItem } from './Types/ListableContentItem'
import { ContentListItem } from './ContentListItem'
import { useCallback } from 'preact/hooks'
import ContentListItem from './ContentListItem'
type Props = {
application: WebApplication
@@ -17,14 +16,13 @@ type Props = {
paginate: () => void
}
export const ContentList: FunctionComponent<Props> = observer(
({ application, appState, items, selectedItems, paginate }) => {
const ContentList: FunctionComponent<Props> = ({ application, appState, items, selectedItems, paginate }) => {
const { selectPreviousItem, selectNextItem } = appState.contentListView
const { hideTags, hideDate, hideNotePreview, hideEditorIcon } = appState.contentListView.webDisplayOptions
const { sortBy } = appState.contentListView.displayOptions
const onScroll = useCallback(
(e: Event) => {
const onScroll: UIEventHandler = useCallback(
(e) => {
const offset = NOTES_LIST_SCROLL_THRESHOLD
const element = e.target as HTMLElement
if (element.scrollTop + element.offsetHeight >= element.scrollHeight - offset) {
@@ -34,8 +32,8 @@ export const ContentList: FunctionComponent<Props> = observer(
[paginate],
)
const onKeyDown = useCallback(
(e: KeyboardEvent) => {
const onKeyDown: KeyboardEventHandler = useCallback(
(e) => {
if (e.key === KeyboardKey.Up) {
e.preventDefault()
selectPreviousItem()
@@ -71,5 +69,6 @@ export const ContentList: FunctionComponent<Props> = observer(
))}
</div>
)
},
)
}
export default observer(ContentList)

10
app/assets/javascripts/Components/ContentListView/ContentListItem.tsx
View File

@@ -1,10 +1,10 @@
import { ContentType, SNTag } from '@standardnotes/snjs'
import { FunctionComponent } from 'preact'
import { FileListItem } from './FileListItem'
import { NoteListItem } from './NoteListItem'
import { FunctionComponent } from 'react'
import FileListItem from './FileListItem'
import NoteListItem from './NoteListItem'
import { AbstractListItemProps } from './Types/AbstractListItemProps'
export const ContentListItem: FunctionComponent<AbstractListItemProps> = (props) => {
const ContentListItem: FunctionComponent<AbstractListItemProps> = (props) => {
const getTags = () => {
if (props.hideTags) {
return []
@@ -34,3 +34,5 @@ export const ContentListItem: FunctionComponent<AbstractListItemProps> = (props)
return null
}
}
export default ContentListItem

48
app/assets/javascripts/Components/ContentListView/ContentListView.tsx
View File

@@ -4,27 +4,29 @@ import { AppState } from '@/UIModels/AppState'
import { PANEL_NAME_NOTES } from '@/Constants'
import { PrefKey } from '@standardnotes/snjs'
import { observer } from 'mobx-react-lite'
import { FunctionComponent } from 'preact'
import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
import { ContentList } from '@/Components/ContentListView/ContentList'
import { NotesListOptionsMenu } from '@/Components/ContentListView/NotesListOptionsMenu'
import { NoAccountWarning } from '@/Components/NoAccountWarning/NoAccountWarning'
import { SearchOptions } from '@/Components/SearchOptions/SearchOptions'
import { PanelSide, ResizeFinishCallback, PanelResizer, PanelResizeType } from '@/Components/PanelResizer/PanelResizer'
import {
ChangeEventHandler,
FunctionComponent,
KeyboardEventHandler,
useCallback,
useEffect,
useRef,
useState,
} from 'react'
import ContentList from '@/Components/ContentListView/ContentList'
import NotesListOptionsMenu from '@/Components/ContentListView/NotesListOptionsMenu'
import NoAccountWarningWrapper from '@/Components/NoAccountWarning/NoAccountWarning'
import SearchOptions from '@/Components/SearchOptions/SearchOptions'
import PanelResizer, { PanelSide, ResizeFinishCallback, PanelResizeType } from '@/Components/PanelResizer/PanelResizer'
import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
import { isStateDealloced } from '@/UIModels/AppState/AbstractState'
type Props = {
application: WebApplication
appState: AppState
}
export const ContentListView: FunctionComponent<Props> = observer(({ application, appState }) => {
if (isStateDealloced(appState)) {
return null
}
const ContentListView: FunctionComponent<Props> = ({ application, appState }) => {
const itemsViewPanelRef = useRef<HTMLDivElement>(null)
const displayOptionsMenuRef = useRef<HTMLDivElement>(null)
@@ -104,9 +106,9 @@ export const ContentListView: FunctionComponent<Props> = observer(({ application
}
}, [application.io, createNewNote, searchBarElement, selectNextItem, selectPreviousItem])
const onNoteFilterTextChange = useCallback(
(e: Event) => {
setNoteFilterText((e.target as HTMLInputElement).value)
const onNoteFilterTextChange: ChangeEventHandler<HTMLInputElement> = useCallback(
(e) => {
setNoteFilterText(e.target.value)
},
[setNoteFilterText],
)
@@ -114,8 +116,8 @@ export const ContentListView: FunctionComponent<Props> = observer(({ application
const onSearchFocused = useCallback(() => setFocusedSearch(true), [])
const onSearchBlurred = useCallback(() => setFocusedSearch(false), [])
const onNoteFilterKeyUp = useCallback(
(e: KeyboardEvent) => {
const onNoteFilterKeyUp: KeyboardEventHandler = useCallback(
(e) => {
if (e.key === KeyboardKey.Enter) {
onFilterEnter()
}
@@ -176,10 +178,10 @@ export const ContentListView: FunctionComponent<Props> = observer(({ application
onKeyUp={onNoteFilterKeyUp}
onFocus={onSearchFocused}
onBlur={onSearchBlurred}
autocomplete="off"
autoComplete="off"
/>
{noteFilterText && (
<button onClick={clearFilterText} aria-role="button" id="search-clear-button">
<button onClick={clearFilterText} id="search-clear-button">
✕
</button>
)}
@@ -191,7 +193,7 @@ export const ContentListView: FunctionComponent<Props> = observer(({ application
</div>
)}
</div>
<NoAccountWarning appState={appState} />
<NoAccountWarningWrapper appState={appState} />
</div>
<div id="items-menu-bar" className="sn-component" ref={displayOptionsMenuRef}>
<div className="sk-app-bar no-edges">
@@ -253,4 +255,6 @@ export const ContentListView: FunctionComponent<Props> = observer(({ application
)}
</div>
)
})
}
export default observer(ContentListView)

44
app/assets/javascripts/Components/ContentListView/FileListItem.tsx
View File

@@ -1,16 +1,24 @@
import { FileItem } from '@standardnotes/snjs'
import { observer } from 'mobx-react-lite'
import { FunctionComponent } from 'preact'
import { useCallback } from 'preact/hooks'
import { getFileIconComponent } from '../AttachedFilesPopover/PopoverFileItem'
import { ListItemConflictIndicator } from './ListItemConflictIndicator'
import { ListItemFlagIcons } from './ListItemFlagIcons'
import { ListItemTags } from './ListItemTags'
import { ListItemMetadata } from './ListItemMetadata'
import { FunctionComponent, useCallback } from 'react'
import { getFileIconComponent } from '../AttachedFilesPopover/getFileIconComponent'
import ListItemConflictIndicator from './ListItemConflictIndicator'
import ListItemFlagIcons from './ListItemFlagIcons'
import ListItemTags from './ListItemTags'
import ListItemMetadata from './ListItemMetadata'
import { DisplayableListItemProps } from './Types/DisplayableListItemProps'
export const FileListItem: FunctionComponent<DisplayableListItemProps> = observer(
({ application, appState, hideDate, hideIcon, hideTags, item, selected, sortBy, tags }) => {
const FileListItem: FunctionComponent<DisplayableListItemProps> = ({
application,
appState,
hideDate,
hideIcon,
hideTags,
item,
selected,
sortBy,
tags,
}) => {
const openFileContextMenu = useCallback(
(posX: number, posY: number) => {
appState.files.setFileContextMenuLocation({
@@ -23,14 +31,13 @@ export const FileListItem: FunctionComponent<DisplayableListItemProps> = observe
)
const openContextMenu = useCallback(
(posX: number, posY: number) => {
void appState.contentListView.selectItemWithScrollHandling(item, {
userTriggered: true,
scrollIntoView: false,
})
async (posX: number, posY: number) => {
const { didSelect } = await appState.selectedItems.selectItem(item.uuid)
if (didSelect) {
openFileContextMenu(posX, posY)
}
},
[appState.contentListView, item, openFileContextMenu],
[appState.selectedItems, item.uuid, openFileContextMenu],
)
const onClick = useCallback(() => {
@@ -56,7 +63,7 @@ export const FileListItem: FunctionComponent<DisplayableListItemProps> = observe
onClick={onClick}
onContextMenu={(event) => {
event.preventDefault()
openContextMenu(event.clientX, event.clientY)
void openContextMenu(event.clientX, event.clientY)
}}
>
{!hideIcon ? (
@@ -77,5 +84,6 @@ export const FileListItem: FunctionComponent<DisplayableListItemProps> = observe
<ListItemFlagIcons item={item} />
</div>
)
},
)
}
export default observer(FileListItem)

10
app/assets/javascripts/Components/ContentListView/ListItemConflictIndicator.tsx
View File

@@ -1,11 +1,13 @@
import { FunctionComponent } from 'preact'
import { FunctionComponent } from 'react'
import { ListableContentItem } from './Types/ListableContentItem'
export const ListItemConflictIndicator: FunctionComponent<{
type Props = {
item: {
conflictOf?: ListableContentItem['conflictOf']
}
}> = ({ item }) => {
}
const ListItemConflictIndicator: FunctionComponent<Props> = ({ item }) => {
return item.conflictOf ? (
<div className="flex flex-wrap items-center mt-0.5">
<div className={'py-1 px-1.5 rounded mr-1 mt-2 bg-danger color-danger-contrast'}>
@@ -14,3 +16,5 @@ export const ListItemConflictIndicator: FunctionComponent<{
</div>
) : null
}
export default ListItemConflictIndicator

8
app/assets/javascripts/Components/ContentListView/ListItemFlagIcons.tsx
View File

@@ -1,5 +1,5 @@
import { FunctionComponent } from 'preact'
import { Icon } from '@/Components/Icon/Icon'
import { FunctionComponent } from 'react'
import Icon from '@/Components/Icon/Icon'
import { ListableContentItem } from './Types/ListableContentItem'
type Props = {
@@ -12,7 +12,7 @@ type Props = {
hasFiles?: boolean
}
export const ListItemFlagIcons: FunctionComponent<Props> = ({ item, hasFiles = false }) => {
const ListItemFlagIcons: FunctionComponent<Props> = ({ item, hasFiles = false }) => {
return (
<div className="flex items-start p-4 pl-0 border-0 border-b-1 border-solid border-main">
{item.locked && (
@@ -43,3 +43,5 @@ export const ListItemFlagIcons: FunctionComponent<Props> = ({ item, hasFiles = f
</div>
)
}
export default ListItemFlagIcons

6
app/assets/javascripts/Components/ContentListView/ListItemMetadata.tsx
View File

@@ -1,5 +1,5 @@
import { CollectionSort, SortableItem } from '@standardnotes/snjs'
import { FunctionComponent } from 'preact'
import { FunctionComponent } from 'react'
import { ListableContentItem } from './Types/ListableContentItem'
type Props = {
@@ -12,7 +12,7 @@ type Props = {
sortBy: keyof SortableItem | undefined
}
export const ListItemMetadata: FunctionComponent<Props> = ({ item, hideDate, sortBy }) => {
const ListItemMetadata: FunctionComponent<Props> = ({ item, hideDate, sortBy }) => {
const showModifiedDate = sortBy === CollectionSort.UpdatedAt
if (hideDate && !item.protected) {
@@ -27,3 +27,5 @@ export const ListItemMetadata: FunctionComponent<Props> = ({ item, hideDate, sor
</div>
)
}
export default ListItemMetadata

17
app/assets/javascripts/Components/ContentListView/ListItemTags.tsx
View File

@@ -1,10 +1,12 @@
import { FunctionComponent } from 'preact'
import { Icon } from '@/Components/Icon/Icon'
import { FunctionComponent } from 'react'
import Icon from '@/Components/Icon/Icon'
export const ListItemTags: FunctionComponent<{
type Props = {
hideTags: boolean
tags: string[]
}> = ({ hideTags, tags }) => {
}
const ListItemTags: FunctionComponent<Props> = ({ hideTags, tags }) => {
if (hideTags || !tags.length) {
return null
}
@@ -12,7 +14,10 @@ export const ListItemTags: FunctionComponent<{
return (
<div className="flex flex-wrap mt-1.5 text-xs gap-2">
{tags.map((tag) => (
<span className="inline-flex items-center py-1 px-1.5 bg-passive-4-opacity-variant color-foreground rounded-0.5">
<span
className="inline-flex items-center py-1 px-1.5 bg-passive-4-opacity-variant color-foreground rounded-0.5"
key={tag}
>
<Icon type="hashtag" className="sn-icon--small color-passive-1 mr-1" />
<span>{tag}</span>
</span>
@@ -20,3 +25,5 @@ export const ListItemTags: FunctionComponent<{
</div>
)
}
export default ListItemTags

39
app/assets/javascripts/Components/ContentListView/NoteListItem.tsx
View File

@@ -1,16 +1,26 @@
import { PLAIN_EDITOR_NAME } from '@/Constants'
import { sanitizeHtmlString, SNNote } from '@standardnotes/snjs'
import { observer } from 'mobx-react-lite'
import { FunctionComponent } from 'preact'
import { Icon } from '@/Components/Icon/Icon'
import { ListItemConflictIndicator } from './ListItemConflictIndicator'
import { ListItemFlagIcons } from './ListItemFlagIcons'
import { ListItemTags } from './ListItemTags'
import { ListItemMetadata } from './ListItemMetadata'
import { FunctionComponent } from 'react'
import Icon from '@/Components/Icon/Icon'
import ListItemConflictIndicator from './ListItemConflictIndicator'
import ListItemFlagIcons from './ListItemFlagIcons'
import ListItemTags from './ListItemTags'
import ListItemMetadata from './ListItemMetadata'
import { DisplayableListItemProps } from './Types/DisplayableListItemProps'
export const NoteListItem: FunctionComponent<DisplayableListItemProps> = observer(
({ application, appState, hideDate, hideIcon, hideTags, hidePreview, item, selected, sortBy, tags }) => {
const NoteListItem: FunctionComponent<DisplayableListItemProps> = ({
application,
appState,
hideDate,
hideIcon,
hideTags,
hidePreview,
item,
selected,
sortBy,
tags,
}) => {
const editorForNote = application.componentManager.editorForNote(item as SNNote)
const editorName = editorForNote?.name ?? PLAIN_EDITOR_NAME
const [icon, tint] = application.iconsController.getIconAndTintForNoteType(editorForNote?.package_info.note_type)
@@ -25,10 +35,12 @@ export const NoteListItem: FunctionComponent<DisplayableListItemProps> = observe
appState.notes.setContextMenuOpen(true)
}
const openContextMenu = (posX: number, posY: number) => {
void appState.selectedItems.selectItem(item.uuid, true)
const openContextMenu = async (posX: number, posY: number) => {
const { didSelect } = await appState.selectedItems.selectItem(item.uuid, true)
if (didSelect) {
openNoteContextMenu(posX, posY)
}
}
return (
<div
@@ -41,7 +53,7 @@ export const NoteListItem: FunctionComponent<DisplayableListItemProps> = observe
}}
onContextMenu={(event) => {
event.preventDefault()
openContextMenu(event.clientX, event.clientY)
void openContextMenu(event.clientX, event.clientY)
}}
>
{!hideIcon ? (
@@ -80,5 +92,6 @@ export const NoteListItem: FunctionComponent<DisplayableListItemProps> = observe
<ListItemFlagIcons item={item} hasFiles={hasFiles} />
</div>
)
},
)
}
export default observer(NoteListItem)

28
app/assets/javascripts/Components/ContentListView/NotesListOptionsMenu.tsx
View File

@@ -1,11 +1,12 @@
import { WebApplication } from '@/UIModels/Application'
import { CollectionSort, CollectionSortProperty, PrefKey } from '@standardnotes/snjs'
import { observer } from 'mobx-react-lite'
import { FunctionComponent } from 'preact'
import { useCallback, useState } from 'preact/hooks'
import { Icon } from '@/Components/Icon/Icon'
import { Menu } from '@/Components/Menu/Menu'
import { MenuItem, MenuItemSeparator, MenuItemType } from '@/Components/Menu/MenuItem'
import { FunctionComponent, useCallback, useState } from 'react'
import Icon from '@/Components/Icon/Icon'
import Menu from '@/Components/Menu/Menu'
import MenuItem from '@/Components/Menu/MenuItem'
import MenuItemSeparator from '@/Components/Menu/MenuItemSeparator'
import { MenuItemType } from '@/Components/Menu/MenuItemType'
type Props = {
application: WebApplication
@@ -14,8 +15,12 @@ type Props = {
isOpen: boolean
}
export const NotesListOptionsMenu: FunctionComponent<Props> = observer(
({ closeDisplayOptionsMenu, closeOnBlur, application, isOpen }) => {
const NotesListOptionsMenu: FunctionComponent<Props> = ({
closeDisplayOptionsMenu,
closeOnBlur,
application,
isOpen,
}) => {
const [sortBy, setSortBy] = useState(() => application.getPreference(PrefKey.SortNotesBy, CollectionSort.CreatedAt))
const [sortReverse, setSortReverse] = useState(() => application.getPreference(PrefKey.SortNotesReverse, false))
const [hidePreview, setHidePreview] = useState(() => application.getPreference(PrefKey.NotesHideNotePreview, false))
@@ -24,9 +29,7 @@ export const NotesListOptionsMenu: FunctionComponent<Props> = observer(
const [hidePinned, setHidePinned] = useState(() => application.getPreference(PrefKey.NotesHidePinned, false))
const [showArchived, setShowArchived] = useState(() => application.getPreference(PrefKey.NotesShowArchived, false))
const [showTrashed, setShowTrashed] = useState(() => application.getPreference(PrefKey.NotesShowTrashed, false))
const [hideProtected, setHideProtected] = useState(() =>
application.getPreference(PrefKey.NotesHideProtected, false),
)
const [hideProtected, setHideProtected] = useState(() => application.getPreference(PrefKey.NotesHideProtected, false))
const [hideEditorIcon, setHideEditorIcon] = useState(() =>
application.getPreference(PrefKey.NotesHideEditorIcon, false),
)
@@ -244,5 +247,6 @@ export const NotesListOptionsMenu: FunctionComponent<Props> = observer(
</MenuItem>
</Menu>
)
},
)
}
export default observer(NotesListOptionsMenu)

17
app/assets/javascripts/Components/DeallocateHandler/DeallocateHandler.tsx Normal file
View File

@@ -0,0 +1,17 @@
import { WebApplication } from '@/UIModels/Application'
import { observer } from 'mobx-react-lite'
import { FunctionComponent } from 'react'
type Props = {
application: WebApplication
}
const DeallocateHandler: FunctionComponent<Props> = ({ application, children }) => {
if (application.dealloced) {
return null
}
return <>{children}</>
}
export default observer(DeallocateHandler)

19
app/assets/javascripts/Components/Dropdown/Dropdown.tsx
View File

@@ -1,16 +1,8 @@
import { ListboxArrow, ListboxButton, ListboxInput, ListboxList, ListboxOption, ListboxPopover } from '@reach/listbox'
import VisuallyHidden from '@reach/visually-hidden'
import { FunctionComponent } from 'preact'
import { Icon } from '@/Components/Icon/Icon'
import { IconType } from '@standardnotes/snjs'
export type DropdownItem = {
icon?: IconType
iconClassName?: string
label: string
value: string
disabled?: boolean
}
import { FunctionComponent } from 'react'
import Icon from '@/Components/Icon/Icon'
import { DropdownItem } from './DropdownItem'
type DropdownProps = {
id: string
@@ -46,7 +38,7 @@ const CustomDropdownButton: FunctionComponent<ListboxButtonProps> = ({
</>
)
export const Dropdown: FunctionComponent<DropdownProps> = ({ id, label, items, value, onChange, disabled }) => {
const Dropdown: FunctionComponent<DropdownProps> = ({ id, label, items, value, onChange, disabled }) => {
const labelId = `${id}-label`
const handleChange = (value: string) => {
@@ -79,6 +71,7 @@ export const Dropdown: FunctionComponent<DropdownProps> = ({ id, label, items, v
<ListboxList>
{items.map((item) => (
<ListboxOption
key={item.value}
className="sn-dropdown-item"
value={item.value}
label={item.label}
@@ -99,3 +92,5 @@ export const Dropdown: FunctionComponent<DropdownProps> = ({ id, label, items, v
</>
)
}
export default Dropdown

9
app/assets/javascripts/Components/Dropdown/DropdownItem.tsx Normal file
View File

@@ -0,0 +1,9 @@
import { IconType } from '@standardnotes/snjs'
export type DropdownItem = {
icon?: IconType
iconClassName?: string
label: string
value: string
disabled?: boolean
}

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

@@ -3,18 +3,16 @@ import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
import { useCloseOnClickOutside } from '@/Hooks/useCloseOnClickOutside'
import { AppState } from '@/UIModels/AppState'
import { observer } from 'mobx-react-lite'
import { FunctionComponent } from 'preact'
import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
import React from 'react'
import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
import { PopoverFileItemAction } from '../AttachedFilesPopover/PopoverFileItemAction'
import { PopoverTabs } from '../AttachedFilesPopover/PopoverTabs'
import { FileMenuOptions } from './FileMenuOptions'
import FileMenuOptions from './FileMenuOptions'
type Props = {
appState: AppState
}
export const FileContextMenu: FunctionComponent<Props> = observer(({ appState }) => {
const FileContextMenu: FunctionComponent<Props> = observer(({ appState }) => {
const { selectedFiles, showFileContextMenu, setShowFileContextMenu, fileContextMenuLocation } = appState.files
const [contextMenuStyle, setContextMenuStyle] = useState<React.CSSProperties>({
@@ -28,9 +26,6 @@ export const FileContextMenu: FunctionComponent<Props> = observer(({ appState })
useCloseOnClickOutside(contextMenuRef, () => appState.files.setShowFileContextMenu(false))
const selectedFile = selectedFiles[0]
if (!showFileContextMenu || !selectedFile) {
return null
}
const reloadContextMenuLayout = useCallback(() => {
const { clientHeight } = document.documentElement
@@ -118,3 +113,19 @@ export const FileContextMenu: FunctionComponent<Props> = observer(({ appState })
</div>
)
})
FileContextMenu.displayName = 'FileContextMenu'
const FileContextMenuWrapper: FunctionComponent<Props> = ({ appState }) => {
const { selectedFiles, showFileContextMenu } = appState.files
const selectedFile = selectedFiles[0]
if (!showFileContextMenu || !selectedFile) {
return null
}
return <FileContextMenu appState={appState} />
}
export default observer(FileContextMenuWrapper)

10
app/assets/javascripts/Components/FileContextMenu/FileMenuOptions.tsx
View File

@@ -1,9 +1,9 @@
import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants'
import { FileItem } from '@standardnotes/snjs'
import { FunctionComponent } from 'preact'
import { FunctionComponent } from 'react'
import { PopoverFileItemAction, PopoverFileItemActionType } from '../AttachedFilesPopover/PopoverFileItemAction'
import { Icon } from '@/Components/Icon/Icon'
import { Switch } from '@/Components/Switch/Switch'
import Icon from '@/Components/Icon/Icon'
import Switch from '@/Components/Switch/Switch'
type Props = {
closeMenu: () => void
@@ -17,7 +17,7 @@ type Props = {
shouldShowAttachOption: boolean
}
export const FileMenuOptions: FunctionComponent<Props> = ({
const FileMenuOptions: FunctionComponent<Props> = ({
closeMenu,
closeOnBlur,
file,
@@ -139,3 +139,5 @@ export const FileMenuOptions: FunctionComponent<Props> = ({
</>
)
}
export default FileMenuOptions

8
app/assets/javascripts/Components/Files/FilePreviewInfoPanel.tsx
View File

@@ -1,13 +1,13 @@
import { formatSizeToReadableString } from '@standardnotes/filepicker'
import { FileItem } from '@standardnotes/snjs'
import { FunctionComponent } from 'preact'
import { Icon } from '@/Components/Icon/Icon'
import { FunctionComponent } from 'react'
import Icon from '@/Components/Icon/Icon'
type Props = {
file: FileItem
}
export const FilePreviewInfoPanel: FunctionComponent<Props> = ({ file }) => {
const FilePreviewInfoPanel: FunctionComponent<Props> = ({ file }) => {
return (
<div className="flex flex-col min-w-70 p-4 border-0 border-l-1px border-solid border-main">
<div className="flex items-center mb-4">
@@ -35,3 +35,5 @@ export const FilePreviewInfoPanel: FunctionComponent<Props> = ({ file }) => {
</div>
)
}
export default FilePreviewInfoPanel

30
app/assets/javascripts/Components/Files/FilePreviewModal.tsx
View File

@@ -3,14 +3,13 @@ import { concatenateUint8Arrays } from '@/Utils/ConcatenateUint8Arrays'
import { DialogContent, DialogOverlay } from '@reach/dialog'
import { addToast, ToastType } from '@standardnotes/stylekit'
import { NoPreviewIllustration } from '@standardnotes/icons'
import { FunctionComponent } from 'preact'
import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks'
import { getFileIconComponent } from '@/Components/AttachedFilesPopover/PopoverFileItem'
import { Button } from '@/Components/Button/Button'
import { Icon } from '@/Components/Icon/Icon'
import { FilePreviewInfoPanel } from './FilePreviewInfoPanel'
import { FunctionComponent, KeyboardEventHandler, useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { getFileIconComponent } from '@/Components/AttachedFilesPopover/getFileIconComponent'
import Button from '@/Components/Button/Button'
import Icon from '@/Components/Icon/Icon'
import FilePreviewInfoPanel from './FilePreviewInfoPanel'
import { isFileTypePreviewable } from './isFilePreviewable'
import { PreviewComponent } from './PreviewComponent'
import PreviewComponent from './PreviewComponent'
import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants'
import { KeyboardKey } from '@/Services/IOService'
import { AppState } from '@/UIModels/AppState'
@@ -21,10 +20,6 @@ type Props = {
appState: AppState
}
export const FilePreviewModalWrapper: FunctionComponent<Props> = observer(({ application, appState }) => {
return appState.filePreviewModal.isOpen ? <FilePreviewModal application={application} appState={appState} /> : null
})
const FilePreviewModal: FunctionComponent<Props> = observer(({ application, appState }) => {
const { currentFile, setCurrentFile, otherFiles, dismiss } = appState.filePreviewModal
@@ -91,8 +86,8 @@ const FilePreviewModal: FunctionComponent<Props> = observer(({ application, appS
}
}, [currentFile, getObjectUrl, objectUrl])
const keyDownHandler = useCallback(
(event: KeyboardEvent) => {
const keyDownHandler: KeyboardEventHandler = useCallback(
(event) => {
if (event.key !== KeyboardKey.Left && event.key !== KeyboardKey.Right) {
return
}
@@ -141,6 +136,7 @@ const FilePreviewModal: FunctionComponent<Props> = observer(({ application, appS
dangerouslyBypassScrollLock
>
<DialogContent
aria-label="File preview modal"
className="flex flex-col rounded shadow-overlay"
style={{
width: '90%',
@@ -256,3 +252,11 @@ const FilePreviewModal: FunctionComponent<Props> = observer(({ application, appS
</DialogOverlay>
)
})
FilePreviewModal.displayName = 'FilePreviewModal'
const FilePreviewModalWrapper: FunctionComponent<Props> = ({ application, appState }) => {
return appState.filePreviewModal.isOpen ? <FilePreviewModal application={application} appState={appState} /> : null
}
export default observer(FilePreviewModalWrapper)

13
app/assets/javascripts/Components/Files/ImagePreview.tsx
View File

@@ -1,13 +1,12 @@
import { IconType } from '@standardnotes/snjs'
import { FunctionComponent } from 'preact'
import { useRef, useState } from 'preact/hooks'
import { IconButton } from '../Button/IconButton'
import { FunctionComponent, useRef, useState } from 'react'
import IconButton from '../Button/IconButton'
type Props = {
objectUrl: string
}
export const ImagePreview: FunctionComponent<Props> = ({ objectUrl }) => {
const ImagePreview: FunctionComponent<Props> = ({ objectUrl }) => {
const initialImgHeightRef = useRef<number>()
const [imageZoomPercent, setImageZoomPercent] = useState(100)
@@ -21,8 +20,8 @@ export const ImagePreview: FunctionComponent<Props> = ({ objectUrl }) => {
height: `${imageZoomPercent}%`,
...(imageZoomPercent <= 100
? {
'min-width': '100%',
'object-fit': 'contain',
minWidth: '100%',
objectFit: 'contain',
}
: {
position: 'absolute',
@@ -69,3 +68,5 @@ export const ImagePreview: FunctionComponent<Props> = ({ objectUrl }) => {
</div>
)
}
export default ImagePreview

8
app/assets/javascripts/Components/Files/PreviewComponent.tsx
View File

@@ -1,13 +1,13 @@
import { FileItem } from '@standardnotes/snjs'
import { FunctionComponent } from 'preact'
import { ImagePreview } from './ImagePreview'
import { FunctionComponent } from 'react'
import ImagePreview from './ImagePreview'
type Props = {
file: FileItem
objectUrl: string
}
export const PreviewComponent: FunctionComponent<Props> = ({ file, objectUrl }) => {
const PreviewComponent: FunctionComponent<Props> = ({ file, objectUrl }) => {
if (file.mimeType.startsWith('image/')) {
return <ImagePreview objectUrl={objectUrl} />
}
@@ -22,3 +22,5 @@ export const PreviewComponent: FunctionComponent<Props> = ({ file, objectUrl })
return <object className="w-full h-full" data={objectUrl} />
}
export default PreviewComponent

14
app/assets/javascripts/Components/Footer/Footer.tsx
View File

@@ -11,12 +11,12 @@ import {
STRING_UPGRADE_ACCOUNT_CONFIRM_BUTTON,
} from '@/Strings'
import { alertDialog, confirmDialog } from '@/Services/AlertService'
import { AccountMenu } from '@/Components/AccountMenu/AccountMenu'
import AccountMenu from '@/Components/AccountMenu/AccountMenu'
import { AppStateEvent, EventSource } from '@/UIModels/AppState'
import { Icon } from '@/Components/Icon/Icon'
import { QuickSettingsMenu } from '@/Components/QuickSettingsMenu/QuickSettingsMenu'
import { SyncResolutionMenu } from '@/Components/SyncResolutionMenu/SyncResolutionMenu'
import { Fragment } from 'preact'
import Icon from '@/Components/Icon/Icon'
import QuickSettingsMenu from '@/Components/QuickSettingsMenu/QuickSettingsMenu'
import SyncResolutionMenu from '@/Components/SyncResolutionMenu/SyncResolutionMenu'
import { Fragment } from 'react'
import { AccountMenuPane } from '../AccountMenu/AccountMenuPane'
type Props = {
@@ -39,7 +39,7 @@ type State = {
arbitraryStatusMessage?: string
}
export class Footer extends PureComponent<Props, State> {
class Footer extends PureComponent<Props, State> {
public user?: unknown
private didCheckForOffline = false
private completedInitialSync = false
@@ -455,3 +455,5 @@ export class Footer extends PureComponent<Props, State> {
)
}
}
export default Footer

6
app/assets/javascripts/Components/Icon/Icon.tsx
View File

@@ -1,4 +1,4 @@
import { FunctionalComponent } from 'preact'
import { FunctionComponent } from 'react'
import { IconType } from '@standardnotes/snjs'
import {
@@ -187,7 +187,7 @@ type Props = {
ariaLabel?: string
}
export const Icon: FunctionalComponent<Props> = ({ type, className = '', ariaLabel }) => {
const Icon: FunctionComponent<Props> = ({ type, className = '', ariaLabel }) => {
const IconComponent = ICONS[type as keyof typeof ICONS]
if (!IconComponent) {
return null
@@ -200,3 +200,5 @@ export const Icon: FunctionalComponent<Props> = ({ type, className = '', ariaLab
/>
)
}
export default Icon

17
app/assets/javascripts/Components/Input/DecoratedInput.tsx
View File

@@ -1,5 +1,4 @@
import { FunctionalComponent, Ref } from 'preact'
import { forwardRef } from 'preact/compat'
import { forwardRef, Fragment, Ref } from 'react'
import { DecoratedInputProps } from './DecoratedInputProps'
const getClassNames = (hasLeftDecorations: boolean, hasRightDecorations: boolean) => {
@@ -17,7 +16,7 @@ const getClassNames = (hasLeftDecorations: boolean, hasRightDecorations: boolean
/**
* Input that can be decorated on the left and right side
*/
export const DecoratedInput: FunctionalComponent<DecoratedInputProps> = forwardRef(
const DecoratedInput = forwardRef(
(
{
type = 'text',
@@ -42,8 +41,8 @@ export const DecoratedInput: FunctionalComponent<DecoratedInputProps> = forwardR
<div className={`${classNames.container} ${disabled ? classNames.disabled : ''} ${className}`}>
{left && (
<div className="flex items-center px-2 py-1.5">
{left.map((leftChild) => (
<>{leftChild}</>
{left.map((leftChild, index) => (
<Fragment key={index}>{leftChild}</Fragment>
))}
</div>
)}
@@ -58,14 +57,16 @@ export const DecoratedInput: FunctionalComponent<DecoratedInputProps> = forwardR
onFocus={onFocus}
onKeyDown={onKeyDown}
data-lpignore={type !== 'password' ? true : false}
autocomplete={autocomplete ? 'on' : 'off'}
autoComplete={autocomplete ? 'on' : 'off'}
ref={ref}
/>
{right && (
<div className="flex items-center px-2 py-1.5">
{right.map((rightChild, index) => (
<div className={index > 0 ? 'ml-3' : ''}>{rightChild}</div>
<div className={index > 0 ? 'ml-3' : ''} key={index}>
{rightChild}
</div>
))}
</div>
)}
@@ -73,3 +74,5 @@ export const DecoratedInput: FunctionalComponent<DecoratedInputProps> = forwardR
)
},
)
export default DecoratedInput

10
app/assets/javascripts/Components/Input/DecoratedInputProps.ts
View File

@@ -1,15 +1,15 @@
import { ComponentChild } from 'preact'
import { FocusEventHandler, KeyboardEventHandler, ReactNode } from 'react'
export type DecoratedInputProps = {
type?: 'text' | 'email' | 'password'
className?: string
disabled?: boolean
left?: ComponentChild[]
right?: ComponentChild[]
left?: ReactNode[]
right?: ReactNode[]
value?: string
placeholder?: string
onChange?: (text: string) => void
onFocus?: (event: FocusEvent) => void
onKeyDown?: (event: KeyboardEvent) => void
onFocus?: FocusEventHandler
onKeyDown?: KeyboardEventHandler
autocomplete?: boolean
}

18
app/assets/javascripts/Components/Input/DecoratedPasswordInput.tsx
View File

@@ -1,13 +1,11 @@
import { FunctionComponent, Ref } from 'preact'
import { forwardRef } from 'preact/compat'
import { StateUpdater, useState } from 'preact/hooks'
import { DecoratedInput } from './DecoratedInput'
import { IconButton } from '@/Components/Button/IconButton'
import { Dispatch, FunctionComponent, Ref, SetStateAction, forwardRef, useState } from 'react'
import DecoratedInput from './DecoratedInput'
import IconButton from '@/Components/Button/IconButton'
import { DecoratedInputProps } from './DecoratedInputProps'
const Toggle: FunctionComponent<{
isToggled: boolean
setIsToggled: StateUpdater<boolean>
setIsToggled: Dispatch<SetStateAction<boolean>>
}> = ({ isToggled, setIsToggled }) => (
<IconButton
className="w-5 h-5 p-0 justify-center sk-circle hover:bg-passive-4 color-neutral"
@@ -22,8 +20,7 @@ const Toggle: FunctionComponent<{
/**
* Password input that has a toggle to show/hide password and can be decorated on the left and right side
*/
export const DecoratedPasswordInput: FunctionComponent<Omit<DecoratedInputProps, 'type'>> = forwardRef(
(props, ref: Ref<HTMLInputElement>) => {
const DecoratedPasswordInput = forwardRef((props: DecoratedInputProps, ref: Ref<HTMLInputElement>) => {
const [isToggled, setIsToggled] = useState(false)
const rightSideDecorations = props.right ? [...props.right] : []
@@ -36,5 +33,6 @@ export const DecoratedPasswordInput: FunctionComponent<Omit<DecoratedInputProps,
right={[...rightSideDecorations, <Toggle isToggled={isToggled} setIsToggled={setIsToggled} />]}
/>
)
},
)
})
export default DecoratedPasswordInput

11
app/assets/javascripts/Components/Input/FloatingLabelInput.tsx
View File

@@ -1,14 +1,11 @@
import { FunctionComponent, Ref } from 'preact'
import { JSXInternal } from 'preact/src/jsx'
import { forwardRef } from 'preact/compat'
import { useState } from 'preact/hooks'
import { ChangeEventHandler, Ref, forwardRef, useState } from 'react'
type Props = {
id: string
type: 'text' | 'email' | 'password'
label: string
value: string
onChange: JSXInternal.GenericEventHandler<HTMLInputElement>
onChange: ChangeEventHandler<HTMLInputElement>
disabled?: boolean
className?: string
labelClassName?: string
@@ -16,7 +13,7 @@ type Props = {
isInvalid?: boolean
}
export const FloatingLabelInput: FunctionComponent<Props> = forwardRef(
const FloatingLabelInput = forwardRef(
(
{
id,
@@ -71,3 +68,5 @@ export const FloatingLabelInput: FunctionComponent<Props> = forwardRef(
)
},
)
export default FloatingLabelInput

6
app/assets/javascripts/Components/Input/Input.tsx
View File

@@ -1,4 +1,4 @@
import { FunctionalComponent } from 'preact'
import { FunctionComponent } from 'react'
interface Props {
text?: string
@@ -6,9 +6,11 @@ interface Props {
className?: string
}
export const Input: FunctionalComponent<Props> = ({ className = '', disabled = false, text }) => {
const Input: FunctionComponent<Props> = ({ className = '', disabled = false, text }) => {
const base = 'rounded py-1.5 px-3 text-input my-1 h-8 bg-contrast'
const stateClasses = disabled ? 'no-border' : 'border-solid border-1 border-main'
const classes = `${base} ${stateClasses} ${className}`
return <input type="text" className={classes} disabled={disabled} value={text} />
}
export default Input

78
app/assets/javascripts/Components/Menu/Menu.tsx
View File

@@ -1,21 +1,26 @@
import { JSX, FunctionComponent, ComponentChildren, VNode, RefCallback, ComponentChild, toChildArray } from 'preact'
import { useCallback, useEffect, useRef } from 'preact/hooks'
import { JSXInternal } from 'preact/src/jsx'
import { MenuItem, MenuItemListElement } from './MenuItem'
import {
CSSProperties,
FunctionComponent,
KeyboardEventHandler,
ReactNode,
useCallback,
useEffect,
useRef,
} from 'react'
import { KeyboardKey } from '@/Services/IOService'
import { useListKeyboardNavigation } from '@/Hooks/useListKeyboardNavigation'
type MenuProps = {
className?: string
style?: string | JSX.CSSProperties | undefined
style?: CSSProperties | undefined
a11yLabel: string
children: ComponentChildren
children: ReactNode
closeMenu?: () => void
isOpen: boolean
initialFocus?: number
}
export const Menu: FunctionComponent<MenuProps> = ({
const Menu: FunctionComponent<MenuProps> = ({
children,
className = '',
style,
@@ -24,16 +29,10 @@ export const Menu: FunctionComponent<MenuProps> = ({
isOpen,
initialFocus,
}: MenuProps) => {
const menuItemRefs = useRef<(HTMLButtonElement | null)[]>([])
const menuElementRef = useRef<HTMLMenuElement>(null)
const handleKeyDown: JSXInternal.KeyboardEventHandler<HTMLMenuElement> = useCallback(
const handleKeyDown: KeyboardEventHandler<HTMLMenuElement> = useCallback(
(event) => {
if (!menuItemRefs.current) {
return
}
if (event.key === KeyboardKey.Escape) {
closeMenu?.()
return
@@ -45,58 +44,13 @@ export const Menu: FunctionComponent<MenuProps> = ({
useListKeyboardNavigation(menuElementRef, initialFocus)
useEffect(() => {
if (isOpen && menuItemRefs.current.length > 0) {
if (isOpen) {
setTimeout(() => {
menuElementRef.current?.focus()
})
}
}, [isOpen])
const pushRefToArray: RefCallback<HTMLLIElement> = useCallback((instance) => {
if (instance && instance.children) {
Array.from(instance.children).forEach((child) => {
if (
child.getAttribute('role')?.includes('menuitem') &&
!menuItemRefs.current.includes(child as HTMLButtonElement)
) {
menuItemRefs.current.push(child as HTMLButtonElement)
}
})
}
}, [])
const mapMenuItems = useCallback(
(child: ComponentChild, index: number, array: ComponentChild[]): ComponentChild => {
if (!child || (Array.isArray(child) && child.length < 1)) {
return
}
if (Array.isArray(child)) {
return child.map(mapMenuItems)
}
const _child = child as VNode<unknown>
const isFirstMenuItem = index === array.findIndex((child) => (child as VNode<unknown>).type === MenuItem)
const hasMultipleItems = Array.isArray(_child.props.children)
? Array.from(_child.props.children as ComponentChild[]).some(
(child) => (child as VNode<unknown>).type === MenuItem,
)
: false
const items = hasMultipleItems ? [...(_child.props.children as ComponentChild[])] : [_child]
return items.map((child) => {
return (
<MenuItemListElement isFirstMenuItem={isFirstMenuItem} ref={pushRefToArray}>
{child}
</MenuItemListElement>
)
})
},
[pushRefToArray],
)
return (
<menu
className={`m-0 p-0 list-style-none focus:shadow-none ${className}`}
@@ -105,7 +59,9 @@ export const Menu: FunctionComponent<MenuProps> = ({
style={style}
aria-label={a11yLabel}
>
{toChildArray(children).map(mapMenuItems)}
{children}
</menu>
)
}
export default Menu

55
app/assets/javascripts/Components/Menu/MenuItem.tsx
View File

@@ -1,21 +1,15 @@
import { ComponentChildren, FunctionComponent, VNode } from 'preact'
import { forwardRef, Ref } from 'preact/compat'
import { JSXInternal } from 'preact/src/jsx'
import { Icon } from '@/Components/Icon/Icon'
import { Switch, SwitchProps } from '@/Components/Switch/Switch'
import { forwardRef, MouseEventHandler, ReactNode, Ref } from 'react'
import Icon from '@/Components/Icon/Icon'
import Switch from '@/Components/Switch/Switch'
import { SwitchProps } from '@/Components/Switch/SwitchProps'
import { IconType } from '@standardnotes/snjs'
import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants'
export enum MenuItemType {
IconButton,
RadioButton,
SwitchButton,
}
import { MenuItemType } from './MenuItemType'
type MenuItemProps = {
type: MenuItemType
children: ComponentChildren
onClick?: JSXInternal.MouseEventHandler<HTMLButtonElement>
children: ReactNode
onClick?: MouseEventHandler<HTMLButtonElement>
onChange?: SwitchProps['onChange']
onBlur?: (event: { relatedTarget: EventTarget | null }) => void
className?: string
@@ -25,7 +19,7 @@ type MenuItemProps = {
tabIndex?: number
}
export const MenuItem: FunctionComponent<MenuItemProps> = forwardRef(
const MenuItem = forwardRef(
(
{
children,
@@ -42,7 +36,9 @@ export const MenuItem: FunctionComponent<MenuItemProps> = forwardRef(
ref: Ref<HTMLButtonElement>,
) => {
return type === MenuItemType.SwitchButton && typeof onChange === 'function' ? (
<li className="list-style-none" role="none">
<button
ref={ref}
className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none justify-between"
onClick={() => {
onChange(!checked)
@@ -55,7 +51,9 @@ export const MenuItem: FunctionComponent<MenuItemProps> = forwardRef(
<span className="flex flex-grow items-center">{children}</span>
<Switch className="px-0" checked={checked} />
</button>
</li>
) : (
<li className="list-style-none" role="none">
<button
ref={ref}
role={type === MenuItemType.RadioButton ? 'menuitemradio' : 'menuitem'}
@@ -71,34 +69,9 @@ export const MenuItem: FunctionComponent<MenuItemProps> = forwardRef(
) : null}
{children}
</button>
)
},
)
export const MenuItemSeparator: FunctionComponent = () => <div role="separator" className="h-1px my-2 bg-border"></div>
type ListElementProps = {
isFirstMenuItem: boolean
children: ComponentChildren
}
export const MenuItemListElement: FunctionComponent<ListElementProps> = forwardRef(
({ children, isFirstMenuItem }: ListElementProps, ref: Ref<HTMLLIElement>) => {
const child = children as VNode<unknown>
return (
<li className="list-style-none" role="none" ref={ref}>
{{
...child,
props: {
...(child.props ? { ...child.props } : {}),
...(child.type === MenuItem
? {
tabIndex: isFirstMenuItem ? 0 : -1,
}
: {}),
},
}}
</li>
)
},
)
export default MenuItem

9
app/assets/javascripts/Components/Menu/MenuItemSeparator.tsx Normal file
View File

@@ -0,0 +1,9 @@
import { FunctionComponent } from 'react'
const MenuItemSeparator: FunctionComponent = () => (
<li className="list-style-none" role="none">
<div role="separator" className="h-1px my-2 bg-border" />
</li>
)
export default MenuItemSeparator

5
app/assets/javascripts/Components/Menu/MenuItemType.ts Normal file
View File

@@ -0,0 +1,5 @@
export enum MenuItemType {
IconButton,
RadioButton,
SwitchButton,
}

14
app/assets/javascripts/Components/MultipleSelectedNotes/MultipleSelectedNotes.tsx
View File

@@ -1,18 +1,18 @@
import { AppState } from '@/UIModels/AppState'
import { IlNotesIcon } from '@standardnotes/icons'
import { observer } from 'mobx-react-lite'
import { NotesOptionsPanel } from '@/Components/NotesOptions/NotesOptionsPanel'
import NotesOptionsPanel from '@/Components/NotesOptions/NotesOptionsPanel'
import { WebApplication } from '@/UIModels/Application'
import { PinNoteButton } from '@/Components/PinNoteButton/PinNoteButton'
import { Button } from '../Button/Button'
import { useCallback } from 'preact/hooks'
import PinNoteButton from '@/Components/PinNoteButton/PinNoteButton'
import Button from '../Button/Button'
import { useCallback } from 'react'
type Props = {
application: WebApplication
appState: AppState
}
export const MultipleSelectedNotes = observer(({ application, appState }: Props) => {
const MultipleSelectedNotes = ({ application, appState }: Props) => {
const count = appState.notes.selectedNotesCount
const cancelMultipleSelection = useCallback(() => {
@@ -40,4 +40,6 @@ export const MultipleSelectedNotes = observer(({ application, appState }: Props)
</div>
</div>
)
})
}
export default observer(MultipleSelectedNotes)

15
app/assets/javascripts/Components/Navigation/Navigation.tsx
View File

@@ -1,18 +1,17 @@
import { SmartViewsSection } from '@/Components/Tags/SmartViewsSection'
import { TagsSection } from '@/Components/Tags/TagsSection'
import SmartViewsSection from '@/Components/Tags/SmartViewsSection'
import TagsSection from '@/Components/Tags/TagsSection'
import { WebApplication } from '@/UIModels/Application'
import { PANEL_NAME_NAVIGATION } from '@/Constants'
import { ApplicationEvent, PrefKey } from '@standardnotes/snjs'
import { observer } from 'mobx-react-lite'
import { FunctionComponent } from 'preact'
import { useCallback, useEffect, useMemo, useState } from 'preact/hooks'
import { PanelSide, ResizeFinishCallback, PanelResizer, PanelResizeType } from '@/Components/PanelResizer/PanelResizer'
import { FunctionComponent, useCallback, useEffect, useMemo, useState } from 'react'
import PanelResizer, { PanelSide, ResizeFinishCallback, PanelResizeType } from '@/Components/PanelResizer/PanelResizer'
type Props = {
application: WebApplication
}
export const Navigation: FunctionComponent<Props> = observer(({ application }) => {
const Navigation: FunctionComponent<Props> = ({ application }) => {
const appState = useMemo(() => application.getAppState(), [application])
const [ref, setRef] = useState<HTMLDivElement | null>()
const [panelWidth, setPanelWidth] = useState<number>(0)
@@ -79,4 +78,6 @@ export const Navigation: FunctionComponent<Props> = observer(({ application }) =
)}
</div>
)
})
}
export default observer(Navigation)

31
app/assets/javascripts/Components/NoAccountWarning/NoAccountWarning.tsx
View File

@@ -1,18 +1,13 @@
import { Icon } from '@/Components/Icon/Icon'
import Icon from '@/Components/Icon/Icon'
import { AppState } from '@/UIModels/AppState'
import { observer } from 'mobx-react-lite'
import { useCallback } from 'preact/hooks'
import { MouseEventHandler, useCallback } from 'react'
type Props = { appState: AppState }
export const NoAccountWarning = observer(({ appState }: Props) => {
const canShow = appState.noAccountWarning.show
if (!canShow) {
return null
}
const showAccountMenu = useCallback(
(event: Event) => {
const NoAccountWarning = observer(({ appState }: Props) => {
const showAccountMenu: MouseEventHandler = useCallback(
(event) => {
event.stopPropagation()
appState.accountMenu.setShow(true)
},
@@ -32,9 +27,9 @@ export const NoAccountWarning = observer(({ appState }: Props) => {
</button>
<button
onClick={hideWarning}
title="Ignore"
label="Ignore"
style="height: 20px"
title="Ignore warning"
aria-label="Ignore warning"
style={{ height: '20px' }}
className="border-0 m-0 p-0 bg-transparent cursor-pointer rounded-md col-start-2 row-start-1 color-neutral hover:color-info"
>
<Icon type="close" className="block" />
@@ -42,3 +37,13 @@ export const NoAccountWarning = observer(({ appState }: Props) => {
</div>
)
})
NoAccountWarning.displayName = 'NoAccountWarning'
const NoAccountWarningWrapper = ({ appState }: Props) => {
const canShow = appState.noAccountWarning.show
return canShow ? <NoAccountWarning appState={appState} /> : null
}
export default observer(NoAccountWarningWrapper)

8
app/assets/javascripts/Components/NoteGroupView/NoteGroupView.tsx
View File

@@ -1,8 +1,8 @@
import { NoteViewController } from '@standardnotes/snjs'
import { PureComponent } from '@/Components/Abstract/PureComponent'
import { WebApplication } from '@/UIModels/Application'
import { MultipleSelectedNotes } from '@/Components/MultipleSelectedNotes/MultipleSelectedNotes'
import { NoteView } from '@/Components/NoteView/NoteView'
import MultipleSelectedNotes from '@/Components/MultipleSelectedNotes/MultipleSelectedNotes'
import NoteView from '@/Components/NoteView/NoteView'
import { ElementIds } from '@/ElementIDs'
type State = {
@@ -14,7 +14,7 @@ type Props = {
application: WebApplication
}
export class NoteGroupView extends PureComponent<Props, State> {
class NoteGroupView extends PureComponent<Props, State> {
private removeChangeObserver!: () => void
constructor(props: Props) {
@@ -70,3 +70,5 @@ export class NoteGroupView extends PureComponent<Props, State> {
)
}
}
export default NoteGroupView

35
app/assets/javascripts/Components/NoteTags/NoteTag.tsx
View File

@@ -1,5 +1,13 @@
import { Icon } from '@/Components/Icon/Icon'
import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
import Icon from '@/Components/Icon/Icon'
import {
FocusEventHandler,
KeyboardEventHandler,
MouseEventHandler,
useCallback,
useEffect,
useRef,
useState,
} from 'react'
import { AppState } from '@/UIModels/AppState'
import { SNTag } from '@standardnotes/snjs'
import { observer } from 'mobx-react-lite'
@@ -9,7 +17,7 @@ type Props = {
tag: SNTag
}
export const NoteTag = observer(({ appState, tag }: Props) => {
const NoteTag = ({ appState, tag }: Props) => {
const noteTags = appState.noteTags
const { autocompleteInputFocused, focusedTagUuid, tags } = noteTags
@@ -29,17 +37,16 @@ export const NoteTag = observer(({ appState, tag }: Props) => {
appState.noteTags.removeTagFromActiveNote(tag).catch(console.error)
}, [appState, tag])
const onDeleteTagClick = useCallback(
(event: MouseEvent) => {
event.stopImmediatePropagation()
const onDeleteTagClick: MouseEventHandler = useCallback(
(event) => {
event.stopPropagation()
deleteTag()
},
[deleteTag],
)
const onTagClick = useCallback(
(event: MouseEvent) => {
const onTagClick: MouseEventHandler = useCallback(
(event) => {
if (tagClicked && event.target !== deleteTagRef.current) {
setTagClicked(false)
appState.tags.selected = tag
@@ -55,8 +62,8 @@ export const NoteTag = observer(({ appState, tag }: Props) => {
setShowDeleteButton(true)
}, [appState, tag])
const onBlur = useCallback(
(event: FocusEvent) => {
const onBlur: FocusEventHandler = useCallback(
(event) => {
const relatedTarget = event.relatedTarget as Node
if (relatedTarget !== deleteTagRef.current) {
appState.noteTags.setFocusedTagUuid(undefined)
@@ -76,8 +83,8 @@ export const NoteTag = observer(({ appState, tag }: Props) => {
return tags[0].uuid === tag.uuid ? 0 : -1
}, [autocompleteInputFocused, tags, tag, focusedTagUuid])
const onKeyDown = useCallback(
(event: KeyboardEvent) => {
const onKeyDown: KeyboardEventHandler = useCallback(
(event) => {
const tagIndex = appState.noteTags.getTagIndex(tag, tags)
switch (event.key) {
case 'Backspace':
@@ -136,4 +143,6 @@ export const NoteTag = observer(({ appState, tag }: Props) => {
)}
</button>
)
})
}
export default observer(NoteTag)

17
app/assets/javascripts/Components/NoteTags/NoteTagsContainer.tsx
View File

@@ -1,19 +1,14 @@
import { AppState } from '@/UIModels/AppState'
import { observer } from 'mobx-react-lite'
import { AutocompleteTagInput } from '@/Components/TagAutocomplete/AutocompleteTagInput'
import { NoteTag } from './NoteTag'
import { useEffect } from 'preact/hooks'
import { isStateDealloced } from '@/UIModels/AppState/AbstractState'
import AutocompleteTagInput from '@/Components/TagAutocomplete/AutocompleteTagInput'
import NoteTag from './NoteTag'
import { useEffect } from 'react'
type Props = {
appState: AppState
}
export const NoteTagsContainer = observer(({ appState }: Props) => {
if (isStateDealloced(appState)) {
return null
}
const NoteTagsContainer = ({ appState }: Props) => {
const { tags, tagsContainerMaxWidth } = appState.noteTags
useEffect(() => {
@@ -33,4 +28,6 @@ export const NoteTagsContainer = observer(({ appState }: Props) => {
<AutocompleteTagInput appState={appState} />
</div>
)
})
}
export default observer(NoteTagsContainer)

8
app/assets/javascripts/Components/NoteView/EditingDisabledBanner.tsx
View File

@@ -1,5 +1,5 @@
import { FunctionComponent } from 'preact'
import { Icon } from '../Icon/Icon'
import { FunctionComponent } from 'react'
import Icon from '../Icon/Icon'
type Props = {
onMouseLeave: () => void
@@ -9,7 +9,7 @@ type Props = {
lockText: string
}
export const EditingDisabledBanner: FunctionComponent<Props> = ({
const EditingDisabledBanner: FunctionComponent<Props> = ({
onMouseLeave,
onMouseOver,
onClick,
@@ -36,3 +36,5 @@ export const EditingDisabledBanner: FunctionComponent<Props> = ({
</div>
)
}
export default EditingDisabledBanner

2
app/assets/javascripts/Components/NoteView/NoteView.test.ts
View File

@@ -12,7 +12,7 @@ import {
SNNote,
} from '@standardnotes/snjs'
import { NoteView } from './NoteView'
import NoteView from './NoteView'
describe('NoteView', () => {
let noteViewController: NoteViewController

50
app/assets/javascripts/Components/NoteView/NoteView.tsx
View File

@@ -1,4 +1,4 @@
import { createRef, JSX, RefObject } from 'preact'
import { ChangeEventHandler, createRef, KeyboardEventHandler, RefObject } from 'react'
import {
ApplicationEvent,
isPayloadSourceRetrieved,
@@ -19,16 +19,16 @@ import { KeyboardModifier, KeyboardKey } from '@/Services/IOService'
import { STRING_DELETE_PLACEHOLDER_ATTEMPT, STRING_DELETE_LOCKED_ATTEMPT, StringDeleteNote } from '@/Strings'
import { confirmDialog } from '@/Services/AlertService'
import { PureComponent } from '@/Components/Abstract/PureComponent'
import { ProtectedNoteOverlay } from '@/Components/ProtectedNoteOverlay/ProtectedNoteOverlay'
import { PinNoteButton } from '@/Components/PinNoteButton/PinNoteButton'
import { NotesOptionsPanel } from '@/Components/NotesOptions/NotesOptionsPanel'
import { NoteTagsContainer } from '@/Components/NoteTags/NoteTagsContainer'
import { ComponentView } from '@/Components/ComponentView/ComponentView'
import { PanelSide, PanelResizer, PanelResizeType } from '@/Components/PanelResizer/PanelResizer'
import ProtectedNoteOverlay from '@/Components/ProtectedNoteOverlay/ProtectedNoteOverlay'
import PinNoteButton from '@/Components/PinNoteButton/PinNoteButton'
import NotesOptionsPanel from '@/Components/NotesOptions/NotesOptionsPanel'
import NoteTagsContainer from '@/Components/NoteTags/NoteTagsContainer'
import ComponentView from '@/Components/ComponentView/ComponentView'
import PanelResizer, { PanelSide, PanelResizeType } from '@/Components/PanelResizer/PanelResizer'
import { ElementIds } from '@/ElementIDs'
import { ChangeEditorButton } from '@/Components/ChangeEditor/ChangeEditorButton'
import { AttachedFilesButton } from '@/Components/AttachedFilesPopover/AttachedFilesButton'
import { EditingDisabledBanner } from './EditingDisabledBanner'
import ChangeEditorButton from '@/Components/ChangeEditor/ChangeEditorButton'
import AttachedFilesButton from '@/Components/AttachedFilesPopover/AttachedFilesButton'
import EditingDisabledBanner from './EditingDisabledBanner'
import {
transactionForAssociateComponentWithCurrentNote,
transactionForDisassociateComponentWithCurrentNote,
@@ -78,7 +78,7 @@ type State = {
rightResizerOffset: number
}
export class NoteView extends PureComponent<NoteViewProps, State> {
class NoteView extends PureComponent<NoteViewProps, State> {
readonly controller!: NoteViewController
private statusTimeout?: NodeJS.Timeout
@@ -528,7 +528,7 @@ export class NoteView extends PureComponent<NoteViewProps, State> {
}
}
onTextAreaChange = ({ currentTarget }: JSX.TargetedEvent<HTMLTextAreaElement, Event>) => {
onTextAreaChange: ChangeEventHandler<HTMLTextAreaElement> = ({ currentTarget }) => {
const text = currentTarget.value
this.setState({
editorText: text,
@@ -548,12 +548,16 @@ export class NoteView extends PureComponent<NoteViewProps, State> {
.catch(console.error)
}
onTitleEnter = ({ currentTarget }: JSX.TargetedEvent<HTMLInputElement, Event>) => {
onTitleEnter: KeyboardEventHandler<HTMLInputElement> = ({ key, currentTarget }) => {
if (key !== KeyboardKey.Enter) {
return
}
currentTarget.blur()
this.focusEditor()
}
onTitleChange = ({ currentTarget }: JSX.TargetedEvent<HTMLInputElement, Event>) => {
onTitleChange: ChangeEventHandler<HTMLInputElement> = ({ currentTarget }) => {
const title = currentTarget.value
this.setState({
editorTitle: title,
@@ -911,12 +915,12 @@ export class NoteView extends PureComponent<NoteViewProps, State> {
id={ElementIds.NoteTitleEditor}
onChange={this.onTitleChange}
onFocus={(event) => {
;(event.target as HTMLTextAreaElement).select()
event.target.select()
}}
onKeyUp={(event) => event.keyCode == 13 && this.onTitleEnter(event)}
spellcheck={false}
onKeyUp={this.onTitleEnter}
spellCheck={false}
value={this.state.editorTitle}
autocomplete="off"
autoComplete="off"
/>
</div>
</div>
@@ -996,15 +1000,15 @@ export class NoteView extends PureComponent<NoteViewProps, State> {
{this.state.editorStateDidLoad && !this.state.editorComponentViewer && !this.state.textareaUnloading && (
<textarea
autocomplete="off"
autoComplete="off"
className="editable font-editor"
dir="auto"
id={ElementIds.NoteTextEditor}
onChange={this.onTextAreaChange}
value={this.state.editorText}
readonly={this.state.noteLocked}
readOnly={this.state.noteLocked}
onFocus={this.onContentFocus}
spellcheck={this.state.spellcheck}
spellCheck={this.state.spellcheck}
ref={(ref) => ref && this.onSystemEditorLoad(ref)}
></textarea>
)}
@@ -1059,7 +1063,7 @@ export class NoteView extends PureComponent<NoteViewProps, State> {
<div className="sn-component">
{this.state.stackComponentViewers.map((viewer) => {
return (
<div className="component-view component-stack-item">
<div className="component-view component-stack-item" key={viewer.identifier}>
<ComponentView
key={viewer.identifier}
componentViewer={viewer}
@@ -1076,3 +1080,5 @@ export class NoteView extends PureComponent<NoteViewProps, State> {
)
}
}
export default NoteView

10
app/assets/javascripts/Components/NotesContextMenu/NotesContextMenu.tsx
View File

@@ -2,8 +2,8 @@ import { AppState } from '@/UIModels/AppState'
import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
import { useCloseOnClickOutside } from '@/Hooks/useCloseOnClickOutside'
import { observer } from 'mobx-react-lite'
import { NotesOptions } from '@/Components/NotesOptions/NotesOptions'
import { useCallback, useEffect, useRef } from 'preact/hooks'
import NotesOptions from '@/Components/NotesOptions/NotesOptions'
import { useCallback, useEffect, useRef } from 'react'
import { WebApplication } from '@/UIModels/Application'
type Props = {
@@ -11,7 +11,7 @@ type Props = {
appState: AppState
}
export const NotesContextMenu = observer(({ application, appState }: Props) => {
const NotesContextMenu = ({ application, appState }: Props) => {
const { contextMenuOpen, contextMenuPosition, contextMenuMaxHeight } = appState.notes
const contextMenuRef = useRef<HTMLDivElement>(null)
@@ -42,4 +42,6 @@ export const NotesContextMenu = observer(({ application, appState }: Props) => {
<NotesOptions application={application} appState={appState} closeOnBlur={closeOnBlur} />
</div>
) : null
})
}
export default observer(NotesContextMenu)

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
}

20
app/assets/javascripts/Components/OtherSessionsSignOut/OtherSessionsSignOut.tsx
View File

@@ -1,4 +1,4 @@
import { useCallback, useRef } from 'preact/hooks'
import { useCallback, useRef } from 'react'
import { AlertDialog, AlertDialogDescription, AlertDialogLabel } from '@reach/alert-dialog'
import { WebApplication } from '@/UIModels/Application'
import { AppState } from '@/UIModels/AppState'
@@ -9,13 +9,6 @@ type Props = {
appState: AppState
}
export const OtherSessionsSignOutContainer = observer((props: Props) => {
if (!props.appState.accountMenu.otherSessionsSignOut) {
return null
}
return <ConfirmOtherSessionsSignOut {...props} />
})
const ConfirmOtherSessionsSignOut = observer(({ application, appState }: Props) => {
const cancelRef = useRef<HTMLButtonElement>(null)
@@ -65,3 +58,14 @@ const ConfirmOtherSessionsSignOut = observer(({ application, appState }: Props)
</AlertDialog>
)
})
ConfirmOtherSessionsSignOut.displayName = 'ConfirmOtherSessionsSignOut'
const OtherSessionsSignOutContainer = (props: Props) => {
if (!props.appState.accountMenu.otherSessionsSignOut) {
return null
}
return <ConfirmOtherSessionsSignOut {...props} />
}
export default observer(OtherSessionsSignOutContainer)

16
app/assets/javascripts/Components/PanelResizer/PanelResizer.tsx
View File

@@ -1,4 +1,4 @@
import { Component, createRef } from 'preact'
import { Component, createRef, MouseEventHandler } from 'react'
import { debounce } from '@/Utils'
export type ResizeFinishCallback = (
@@ -38,7 +38,7 @@ type State = {
pressed: boolean
}
export class PanelResizer extends Component<Props, State> {
class PanelResizer extends Component<Props, State> {
private overlay?: HTMLDivElement
private resizerElementRef = createRef<HTMLDivElement>()
private debouncedResizeHandler: () => void
@@ -76,6 +76,10 @@ export class PanelResizer extends Component<Props, State> {
}
}
override componentDidMount() {
this.resizerElementRef.current?.addEventListener('dblclick', this.onDblClick)
}
override componentDidUpdate(prevProps: Props) {
if (this.props.width != prevProps.width) {
this.setWidth(this.props.width)
@@ -92,6 +96,7 @@ export class PanelResizer extends Component<Props, State> {
}
override componentWillUnmount() {
this.resizerElementRef.current?.removeEventListener('dblclick', this.onDblClick)
document.removeEventListener('mouseup', this.onMouseUp)
document.removeEventListener('mousemove', this.onMouseMove)
window.removeEventListener('resize', this.debouncedResizeHandler)
@@ -241,7 +246,7 @@ export class PanelResizer extends Component<Props, State> {
this.finishSettingWidth()
}
onMouseDown = (event: MouseEvent) => {
onMouseDown: MouseEventHandler = (event) => {
this.addInvisibleOverlay()
this.lastDownX = event.clientX
this.startWidth = this.props.panel.scrollWidth
@@ -299,16 +304,17 @@ export class PanelResizer extends Component<Props, State> {
}
}
render() {
override render() {
return (
<div
className={`panel-resizer ${this.props.side} ${this.props.hoverable ? 'hoverable' : ''} ${
this.props.alwaysVisible ? 'alwaysVisible' : ''
} ${this.state.pressed ? 'dragging' : ''} ${this.state.collapsed ? 'collapsed' : ''}`}
onMouseDown={this.onMouseDown}
onDblClick={this.onDblClick}
ref={this.resizerElementRef}
></div>
)
}
}
export default PanelResizer

15
app/assets/javascripts/Components/PasswordWizard/PasswordWizard.tsx
View File

@@ -1,9 +1,10 @@
import { WebApplication } from '@/UIModels/Application'
import { createRef, JSX } from 'preact'
import { ChangeEventHandler, createRef } from 'react'
import { PureComponent } from '@/Components/Abstract/PureComponent'
interface Props {
application: WebApplication
dismissModal: () => void
}
type State = {
@@ -31,7 +32,7 @@ type FormData = {
status?: string
}
export class PasswordWizard extends PureComponent<Props, State> {
class PasswordWizard extends PureComponent<Props, State> {
private currentPasswordInput = createRef<HTMLInputElement>()
constructor(props: Props) {
@@ -188,7 +189,7 @@ export class PasswordWizard extends PureComponent<Props, State> {
if (this.state.lockContinue) {
this.application.alertService.alert('Cannot close window until pending tasks are complete.').catch(console.error)
} else {
this.dismissModal()
this.props.dismissModal()
}
}
@@ -201,19 +202,19 @@ export class PasswordWizard extends PureComponent<Props, State> {
})
}
handleCurrentPasswordInputChange = ({ currentTarget }: JSX.TargetedEvent<HTMLInputElement, Event>) => {
handleCurrentPasswordInputChange: ChangeEventHandler<HTMLInputElement> = ({ currentTarget }) => {
this.setFormDataState({
currentPassword: currentTarget.value,
}).catch(console.error)
}
handleNewPasswordInputChange = ({ currentTarget }: JSX.TargetedEvent<HTMLInputElement, Event>) => {
handleNewPasswordInputChange: ChangeEventHandler<HTMLInputElement> = ({ currentTarget }) => {
this.setFormDataState({
newPassword: currentTarget.value,
}).catch(console.error)
}
handleNewPasswordConfirmationInputChange = ({ currentTarget }: JSX.TargetedEvent<HTMLInputElement, Event>) => {
handleNewPasswordConfirmationInputChange: ChangeEventHandler<HTMLInputElement> = ({ currentTarget }) => {
this.setFormDataState({
newPasswordConfirmation: currentTarget.value,
}).catch(console.error)
@@ -310,3 +311,5 @@ export class PasswordWizard extends PureComponent<Props, State> {
)
}
}
export default PasswordWizard

32
app/assets/javascripts/Components/PermissionsModal/PermissionsModal.tsx
View File

@@ -1,45 +1,27 @@
import { WebApplication } from '@/UIModels/Application'
import { SNComponent } from '@standardnotes/snjs'
import { Component } from 'preact'
import { findDOMNode, unmountComponentAtNode } from 'preact/compat'
import { Component } from 'react'
interface Props {
application: WebApplication
callback: (approved: boolean) => void
dismiss: () => void
component: SNComponent
permissionsString: string
}
export class PermissionsModal extends Component<Props> {
getElement(): Element | null {
return findDOMNode(this)
}
dismiss = () => {
const elem = this.getElement()
if (!elem) {
return
}
const parent = elem.parentElement
if (!parent) {
return
}
parent.remove()
unmountComponentAtNode(parent)
}
class PermissionsModal extends Component<Props> {
accept = () => {
this.props.callback(true)
this.dismiss()
this.props.dismiss()
}
deny = () => {
this.props.callback(false)
this.dismiss()
this.props.dismiss()
}
render() {
override render() {
return (
<div className="sk-modal">
<div onClick={this.deny} className="sk-modal-background" />
@@ -88,3 +70,5 @@ export class PermissionsModal extends Component<Props> {
)
}
}
export default PermissionsModal

56
app/assets/javascripts/Components/PermissionsModal/PermissionsModalWrapper.tsx Normal file
View File

@@ -0,0 +1,56 @@
import { WebApplication } from '@/UIModels/Application'
import { ApplicationEvent, PermissionDialog } from '@standardnotes/snjs'
import { FunctionComponent, useCallback, useEffect, useState } from 'react'
import PermissionsModal from './PermissionsModal'
type Props = {
application: WebApplication
}
const PermissionsModalWrapper: FunctionComponent<Props> = ({ application }) => {
const [dialog, setDialog] = useState<PermissionDialog>()
const presentPermissionsDialog = useCallback((permissionDialog: PermissionDialog) => {
setDialog(permissionDialog)
}, [])
const dismissPermissionsDialog = useCallback(() => {
setDialog(undefined)
}, [])
const onAppStart = useCallback(() => {
application.componentManager.presentPermissionsDialog = presentPermissionsDialog
return () => {
;(application.componentManager.presentPermissionsDialog as unknown) = undefined
}
}, [application, presentPermissionsDialog])
useEffect(() => {
if (application.isStarted()) {
onAppStart()
}
const removeAppObserver = application.addEventObserver(async (eventName) => {
if (eventName === ApplicationEvent.Started) {
onAppStart()
}
})
return () => {
removeAppObserver()
}
}, [application, onAppStart])
return dialog ? (
<PermissionsModal
application={application}
callback={dialog.callback}
dismiss={dismissPermissionsDialog}
component={dialog.component}
permissionsString={dialog.permissionsString}
/>
) : null
}
export default PermissionsModalWrapper

23
app/assets/javascripts/Components/PinNoteButton/PinNoteButton.tsx
View File

@@ -1,10 +1,8 @@
import { AppState } from '@/UIModels/AppState'
import VisuallyHidden from '@reach/visually-hidden'
import { observer } from 'mobx-react-lite'
import { FunctionComponent } from 'preact'
import { Icon } from '@/Components/Icon/Icon'
import { useCallback } from 'preact/hooks'
import { isStateDealloced } from '@/UIModels/AppState/AbstractState'
import { FunctionComponent, useCallback } from 'react'
import Icon from '@/Components/Icon/Icon'
type Props = {
appState: AppState
@@ -12,12 +10,7 @@ type Props = {
onClickPreprocessing?: () => Promise<void>
}
export const PinNoteButton: FunctionComponent<Props> = observer(
({ appState, className = '', onClickPreprocessing }: Props) => {
if (isStateDealloced(appState)) {
return null
}
const PinNoteButton: FunctionComponent<Props> = ({ appState, className = '', onClickPreprocessing }: Props) => {
const notes = appState.notes.selectedNotes
const pinned = notes.some((note) => note.pinned)
@@ -33,13 +26,11 @@ export const PinNoteButton: FunctionComponent<Props> = observer(
}, [appState, onClickPreprocessing, pinned])
return (
<button
className={`sn-icon-button border-contrast ${pinned ? 'toggled' : ''} ${className}`}
onClick={togglePinned}
>
<button className={`sn-icon-button border-contrast ${pinned ? 'toggled' : ''} ${className}`} onClick={togglePinned}>
<VisuallyHidden>Pin selected notes</VisuallyHidden>
<Icon type="pin" className="block" />
</button>
)
},
)
}
export default observer(PinNoteButton)

60
app/assets/javascripts/Components/Preferences/PaneSelector.tsx Normal file
View File

@@ -0,0 +1,60 @@
import { FunctionComponent } from 'react'
import { observer } from 'mobx-react-lite'
import { PreferencesMenu } from './PreferencesMenu'
import Backups from '@/Components/Preferences/Panes/Backups/Backups'
import Appearance from './Panes/Appearance'
import General from './Panes/General/General'
import AccountPreferences from './Panes/Account/AccountPreferences'
import Security from './Panes/Security/Security'
import Listed from './Panes/Listed/Listed'
import HelpAndFeedback from './Panes/HelpFeedback'
import { PreferencesProps } from './PreferencesProps'
const PaneSelector: FunctionComponent<PreferencesProps & { menu: PreferencesMenu }> = ({
menu,
appState,
application,
mfaProvider,
userProvider,
}) => {
switch (menu.selectedPaneId) {
case 'general':
return (
<General
appState={appState}
application={application}
extensionsLatestVersions={menu.extensionsLatestVersions}
/>
)
case 'account':
return <AccountPreferences application={application} appState={appState} />
case 'appearance':
return <Appearance application={application} />
case 'security':
return (
<Security mfaProvider={mfaProvider} userProvider={userProvider} appState={appState} application={application} />
)
case 'backups':
return <Backups application={application} appState={appState} />
case 'listed':
return <Listed application={application} />
case 'shortcuts':
return null
case 'accessibility':
return null
case 'get-free-month':
return null
case 'help-feedback':
return <HelpAndFeedback />
default:
return (
<General
appState={appState}
application={application}
extensionsLatestVersions={menu.extensionsLatestVersions}
/>
)
}
}
export default observer(PaneSelector)

20
app/assets/javascripts/Components/Preferences/Panes/Account/AccountPreferences.tsx
View File

@@ -1,20 +1,20 @@
import { PreferencesPane } from '@/Components/Preferences/PreferencesComponents'
import { observer } from 'mobx-react-lite'
import { WebApplication } from '@/UIModels/Application'
import { AppState } from '@/UIModels/AppState'
import { Authentication } from './Authentication'
import { Credentials } from './Credentials'
import { Sync } from './Sync'
import { Subscription } from './Subscription/Subscription'
import { SignOutWrapper } from './SignOutView'
import { FilesSection } from './Files'
import Authentication from './Authentication'
import Credentials from './Credentials'
import Sync from './Sync'
import Subscription from './Subscription/Subscription'
import SignOutWrapper from './SignOutView'
import FilesSection from './Files'
import PreferencesPane from '../../PreferencesComponents/PreferencesPane'
type Props = {
application: WebApplication
appState: AppState
}
export const AccountPreferences = observer(({ application, appState }: Props) => (
const AccountPreferences = ({ application, appState }: Props) => (
<PreferencesPane>
{!application.hasAccount() ? (
<Authentication application={application} appState={appState} />
@@ -28,4 +28,6 @@ export const AccountPreferences = observer(({ application, appState }: Props) =>
{application.hasAccount() && appState.features.hasFiles && <FilesSection application={application} />}
<SignOutWrapper application={application} appState={appState} />
</PreferencesPane>
))
)
export default observer(AccountPreferences)

19
app/assets/javascripts/Components/Preferences/Panes/Account/Advanced.tsx
View File

@@ -1,20 +1,21 @@
import { FunctionalComponent } from 'preact'
import { PreferencesGroup, PreferencesSegment } from '@/Components/Preferences/PreferencesComponents'
import { OfflineSubscription } from '@/Components/Preferences/Panes/Account/OfflineSubscription'
import { FunctionComponent } from 'react'
import OfflineSubscription from '@/Components/Preferences/Panes/Account/OfflineSubscription'
import { WebApplication } from '@/UIModels/Application'
import { observer } from 'mobx-react-lite'
import { AppState } from '@/UIModels/AppState'
import { Extensions } from '@/Components/Preferences/Panes/Extensions/Extensions'
import Extensions from '@/Components/Preferences/Panes/Extensions/Extensions'
import { ExtensionsLatestVersions } from '@/Components/Preferences/Panes/Extensions/ExtensionsLatestVersions'
import { AccordionItem } from '@/Components/Shared/AccordionItem'
import AccordionItem from '@/Components/Shared/AccordionItem'
import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
interface IProps {
type Props = {
application: WebApplication
appState: AppState
extensionsLatestVersions: ExtensionsLatestVersions
}
export const Advanced: FunctionalComponent<IProps> = observer(({ application, appState, extensionsLatestVersions }) => {
const Advanced: FunctionComponent<Props> = ({ application, appState, extensionsLatestVersions }) => {
return (
<PreferencesGroup>
<PreferencesSegment>
@@ -33,4 +34,6 @@ export const Advanced: FunctionalComponent<IProps> = observer(({ application, ap
</PreferencesSegment>
</PreferencesGroup>
)
})
}
export default observer(Advanced)

18
app/assets/javascripts/Components/Preferences/Panes/Account/Authentication.tsx
View File

@@ -1,16 +1,20 @@
import { Button } from '@/Components/Button/Button'
import { PreferencesGroup, PreferencesSegment, Text, Title } from '@/Components/Preferences/PreferencesComponents'
import Button from '@/Components/Button/Button'
import { Text, Title } from '@/Components/Preferences/PreferencesComponents/Content'
import { WebApplication } from '@/UIModels/Application'
import { AppState } from '@/UIModels/AppState'
import { observer } from 'mobx-react-lite'
import { FunctionComponent } from 'preact'
import { FunctionComponent } from 'react'
import { AccountIllustration } from '@standardnotes/icons'
import { AccountMenuPane } from '@/Components/AccountMenu/AccountMenuPane'
import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
export const Authentication: FunctionComponent<{
type Props = {
application: WebApplication
appState: AppState
}> = observer(({ appState }) => {
}
const Authentication: FunctionComponent<Props> = ({ appState }) => {
const clickSignIn = () => {
appState.preferences.closePreferences()
appState.accountMenu.setCurrentPane(AccountMenuPane.SignIn)
@@ -43,4 +47,6 @@ export const Authentication: FunctionComponent<{
</PreferencesSegment>
</PreferencesGroup>
)
})
}
export default observer(Authentication)

Some files were not shown because too many files have changed in this diff Show More