95 lines
3.0 KiB
TypeScript
95 lines
3.0 KiB
TypeScript
import { FunctionComponent } from 'preact'
|
|
import { SNComponent } from '@standardnotes/snjs'
|
|
import { PreferencesSegment, SubtitleLight, Title } from '@/Components/Preferences/PreferencesComponents'
|
|
import { Switch } from '@/Components/Switch'
|
|
import { WebApplication } from '@/UIModels/Application'
|
|
import { useState } from 'preact/hooks'
|
|
import { Button } from '@/Components/Button/Button'
|
|
import { RenameExtension } from './RenameExtension'
|
|
|
|
const UseHosted: FunctionComponent<{
|
|
offlineOnly: boolean
|
|
toggleOfllineOnly: () => void
|
|
}> = ({ offlineOnly, toggleOfllineOnly }) => (
|
|
<div className="flex flex-row">
|
|
<SubtitleLight className="flex-grow">Use hosted when local is unavailable</SubtitleLight>
|
|
<Switch onChange={toggleOfllineOnly} checked={!offlineOnly} />
|
|
</div>
|
|
)
|
|
|
|
export interface ExtensionItemProps {
|
|
application: WebApplication
|
|
extension: SNComponent
|
|
first: boolean
|
|
latestVersion: string | undefined
|
|
uninstall: (extension: SNComponent) => void
|
|
toggleActivate?: (extension: SNComponent) => void
|
|
}
|
|
|
|
export const ExtensionItem: FunctionComponent<ExtensionItemProps> = ({ application, extension, first, uninstall }) => {
|
|
const [offlineOnly, setOfflineOnly] = useState(extension.offlineOnly ?? false)
|
|
const [extensionName, setExtensionName] = useState(extension.name)
|
|
|
|
const toggleOffllineOnly = () => {
|
|
const newOfflineOnly = !offlineOnly
|
|
setOfflineOnly(newOfflineOnly)
|
|
application.mutator
|
|
.changeAndSaveItem(extension, (m: any) => {
|
|
if (m.content == undefined) {
|
|
m.content = {}
|
|
}
|
|
m.content.offlineOnly = newOfflineOnly
|
|
})
|
|
.then((item) => {
|
|
const component = item as SNComponent
|
|
setOfflineOnly(component.offlineOnly)
|
|
})
|
|
.catch((e) => {
|
|
console.error(e)
|
|
})
|
|
}
|
|
|
|
const changeExtensionName = (newName: string) => {
|
|
setExtensionName(newName)
|
|
application.mutator
|
|
.changeAndSaveItem(extension, (m: any) => {
|
|
if (m.content == undefined) {
|
|
m.content = {}
|
|
}
|
|
m.content.name = newName
|
|
})
|
|
.then((item) => {
|
|
const component = item as SNComponent
|
|
setExtensionName(component.name)
|
|
})
|
|
.catch(console.error)
|
|
}
|
|
|
|
const localInstallable = extension.package_info.download_url
|
|
const isThirParty = application.features.isThirdPartyFeature(extension.identifier)
|
|
|
|
return (
|
|
<PreferencesSegment classes={'mb-5'}>
|
|
{first && (
|
|
<>
|
|
<Title>Extensions</Title>
|
|
</>
|
|
)}
|
|
|
|
<RenameExtension extensionName={extensionName} changeName={changeExtensionName} />
|
|
<div className="min-h-2" />
|
|
|
|
{isThirParty && localInstallable && (
|
|
<UseHosted offlineOnly={offlineOnly} toggleOfllineOnly={toggleOffllineOnly} />
|
|
)}
|
|
|
|
<>
|
|
<div className="min-h-2" />
|
|
<div className="flex flex-row">
|
|
<Button className="min-w-20" variant="normal" label="Uninstall" onClick={() => uninstall(extension)} />
|
|
</div>
|
|
</>
|
|
</PreferencesSegment>
|
|
)
|
|
}
|