80 lines
2.6 KiB
TypeScript
80 lines
2.6 KiB
TypeScript
import {
|
|
PreferencesGroup,
|
|
PreferencesSegment,
|
|
} from '@/components/Preferences/components';
|
|
import { WebApplication } from '@/ui_models/application';
|
|
import { ComponentViewer, SNComponent } from '@standardnotes/snjs';
|
|
import { FeatureIdentifier } from '@standardnotes/features';
|
|
import { observer } from 'mobx-react-lite';
|
|
import { FunctionComponent } from 'preact';
|
|
import { ExtensionItem } from './extensions-segments';
|
|
import { ComponentView } from '@/components/ComponentView';
|
|
import { AppState } from '@/ui_models/app_state';
|
|
import { PreferencesMenu } from '@/components/Preferences/PreferencesMenu';
|
|
import { useEffect, useState } from 'preact/hooks';
|
|
|
|
interface IProps {
|
|
application: WebApplication;
|
|
appState: AppState;
|
|
extension: SNComponent;
|
|
preferencesMenu: PreferencesMenu;
|
|
}
|
|
|
|
const urlOverrideForExtension = (extension: SNComponent) => {
|
|
if (extension.identifier === FeatureIdentifier.CloudLink) {
|
|
return 'https://extensions.standardnotes.org/components/cloudlink';
|
|
} else {
|
|
return undefined;
|
|
}
|
|
};
|
|
|
|
export const ExtensionPane: FunctionComponent<IProps> = observer(
|
|
({ extension, application, appState, preferencesMenu }) => {
|
|
const [componentViewer] = useState<ComponentViewer>(
|
|
application.componentManager.createComponentViewer(
|
|
extension,
|
|
undefined,
|
|
undefined,
|
|
urlOverrideForExtension(extension)
|
|
)
|
|
);
|
|
const latestVersion =
|
|
preferencesMenu.extensionsLatestVersions.getVersion(extension);
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
application.componentManager.destroyComponentViewer(componentViewer);
|
|
};
|
|
}, [application, componentViewer]);
|
|
|
|
return (
|
|
<div className="preferences-extension-pane color-foreground flex-grow flex flex-row overflow-y-auto min-h-0">
|
|
<div className="flex-grow flex flex-col py-6 items-center">
|
|
<div className="w-200 max-w-200 flex flex-col">
|
|
<PreferencesGroup>
|
|
<ExtensionItem
|
|
application={application}
|
|
extension={extension}
|
|
first={false}
|
|
uninstall={() =>
|
|
application.mutator
|
|
.deleteItem(extension)
|
|
.then(() => preferencesMenu.loadExtensionsPanes())
|
|
}
|
|
latestVersion={latestVersion}
|
|
/>
|
|
<PreferencesSegment>
|
|
<ComponentView
|
|
application={application}
|
|
appState={appState}
|
|
componentViewer={componentViewer}
|
|
/>
|
|
</PreferencesSegment>
|
|
</PreferencesGroup>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
);
|