122 lines
3.8 KiB
TypeScript
122 lines
3.8 KiB
TypeScript
import { ContentType, SNComponent } from '@standardnotes/snjs';
|
|
import { Button } from '@/components/Button';
|
|
import { DecoratedInput } from '@/components/DecoratedInput';
|
|
import { WebApplication } from '@/ui_models/application';
|
|
import { FunctionComponent } from 'preact';
|
|
import {
|
|
Title,
|
|
PreferencesSegment,
|
|
} from '../components';
|
|
import { ConfirmCustomExtension, ExtensionItem, ExtensionsLatestVersions } from './extensions-segments';
|
|
import { useEffect, useRef, useState } from 'preact/hooks';
|
|
import { observer } from 'mobx-react-lite';
|
|
|
|
const loadExtensions = (application: WebApplication) => application.getItems([
|
|
ContentType.ActionsExtension,
|
|
ContentType.Component,
|
|
ContentType.Theme,
|
|
], true) as SNComponent[];
|
|
|
|
export const Extensions: FunctionComponent<{
|
|
application: WebApplication
|
|
extensionsLatestVersions: ExtensionsLatestVersions,
|
|
}> = observer(({ application, extensionsLatestVersions }) => {
|
|
|
|
const [customUrl, setCustomUrl] = useState('');
|
|
const [confirmableExtension, setConfirmableExtension] = useState<SNComponent | undefined>(undefined);
|
|
const [extensions, setExtensions] = useState(loadExtensions(application));
|
|
|
|
const confirmableEnd = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (confirmableExtension) {
|
|
confirmableEnd.current!.scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
}, [confirmableExtension, confirmableEnd]);
|
|
|
|
const uninstallExtension = async (extension: SNComponent) => {
|
|
await application.deleteItem(extension);
|
|
setExtensions(loadExtensions(application));
|
|
};
|
|
|
|
const submitExtensionUrl = async (url: string) => {
|
|
const component = await application.downloadExternalFeature(url);
|
|
if (component) {
|
|
setConfirmableExtension(component);
|
|
}
|
|
};
|
|
|
|
const handleConfirmExtensionSubmit = async (confirm: boolean) => {
|
|
if (confirm) {
|
|
confirmExtension();
|
|
}
|
|
setConfirmableExtension(undefined);
|
|
setCustomUrl('');
|
|
};
|
|
|
|
const confirmExtension = async () => {
|
|
await application.insertItem(confirmableExtension as SNComponent);
|
|
setExtensions(loadExtensions(application));
|
|
};
|
|
|
|
const toggleActivateExtension = (extension: SNComponent) => {
|
|
application.toggleComponent(extension);
|
|
setExtensions(loadExtensions(application));
|
|
};
|
|
|
|
const visibleExtensions = extensions
|
|
.filter(extension => !['modal', 'rooms'].includes(extension.area));
|
|
|
|
return (
|
|
<div>
|
|
{visibleExtensions.length > 0 &&
|
|
<div>
|
|
{
|
|
visibleExtensions
|
|
.sort((e1, e2) => e1.name.toLowerCase().localeCompare(e2.name.toLowerCase()))
|
|
.map((extension, i) => (
|
|
<ExtensionItem
|
|
application={application}
|
|
extension={extension}
|
|
latestVersion={extensionsLatestVersions.getVersion(extension)}
|
|
first={i === 0}
|
|
uninstall={uninstallExtension}
|
|
toggleActivate={toggleActivateExtension} />
|
|
))
|
|
}
|
|
</div>
|
|
}
|
|
|
|
<div>
|
|
{!confirmableExtension &&
|
|
<PreferencesSegment>
|
|
<Title>Install Custom Extension</Title>
|
|
<div className="min-h-2" />
|
|
<DecoratedInput
|
|
placeholder={'Enter Extension URL'}
|
|
text={customUrl}
|
|
onChange={(value) => { setCustomUrl(value); }}
|
|
/>
|
|
<div className="min-h-2" />
|
|
<Button
|
|
className="min-w-20"
|
|
type="normal"
|
|
label="Install"
|
|
onClick={() => submitExtensionUrl(customUrl)}
|
|
/>
|
|
</PreferencesSegment>
|
|
}
|
|
{confirmableExtension &&
|
|
<PreferencesSegment>
|
|
<ConfirmCustomExtension
|
|
component={confirmableExtension}
|
|
callback={handleConfirmExtensionSubmit}
|
|
/>
|
|
<div ref={confirmableEnd} />
|
|
</PreferencesSegment>
|
|
}
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|