116 lines
3.1 KiB
TypeScript
116 lines
3.1 KiB
TypeScript
import { FunctionComponent } from 'preact';
|
|
import { SNComponent } from '@standardnotes/snjs';
|
|
import {
|
|
PreferencesSegment,
|
|
SubtitleLight,
|
|
Title,
|
|
} from '@/components/Preferences/components';
|
|
import { Switch } from '@/components/Switch';
|
|
import { WebApplication } from '@/ui_models/application';
|
|
import { useState } from 'preact/hooks';
|
|
import { Button } from '@/components/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.uuid, (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.uuid, (m: any) => {
|
|
if (m.content == undefined) m.content = {};
|
|
m.content.name = newName;
|
|
})
|
|
.then((item) => {
|
|
const component = item as SNComponent;
|
|
setExtensionName(component.name);
|
|
});
|
|
};
|
|
|
|
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"
|
|
type="normal"
|
|
label="Uninstall"
|
|
onClick={() => uninstall(extension)}
|
|
/>
|
|
</div>
|
|
</>
|
|
</PreferencesSegment>
|
|
);
|
|
};
|