116 lines
3.5 KiB
TypeScript
116 lines
3.5 KiB
TypeScript
import { Switch } from '@/components/Switch';
|
|
import {
|
|
PreferencesGroup,
|
|
PreferencesSegment,
|
|
Subtitle,
|
|
Text,
|
|
Title,
|
|
} from '@/components/Preferences/components';
|
|
import { WebApplication } from '@/ui_models/application';
|
|
import {
|
|
FeatureIdentifier,
|
|
FeatureStatus,
|
|
FindNativeFeature,
|
|
} from '@standardnotes/snjs';
|
|
import { FunctionComponent } from 'preact';
|
|
import { useCallback, useEffect, useState } from 'preact/hooks';
|
|
import { usePremiumModal } from '@/components/Premium';
|
|
import { HorizontalSeparator } from '@/components/Shared/HorizontalSeparator';
|
|
|
|
type ExperimentalFeatureItem = {
|
|
identifier: FeatureIdentifier;
|
|
name: string;
|
|
description: string;
|
|
isEnabled: boolean;
|
|
isEntitled: boolean;
|
|
};
|
|
|
|
type Props = {
|
|
application: WebApplication;
|
|
};
|
|
|
|
export const LabsPane: FunctionComponent<Props> = ({ application }) => {
|
|
const [experimentalFeatures, setExperimentalFeatures] = useState<
|
|
ExperimentalFeatureItem[]
|
|
>([]);
|
|
|
|
const reloadExperimentalFeatures = useCallback(() => {
|
|
const experimentalFeatures = application.features
|
|
.getExperimentalFeatures()
|
|
.map((featureIdentifier) => {
|
|
const feature = FindNativeFeature(featureIdentifier);
|
|
return {
|
|
identifier: featureIdentifier,
|
|
name: feature?.name ?? featureIdentifier,
|
|
description: feature?.description ?? '',
|
|
isEnabled:
|
|
application.features.isExperimentalFeatureEnabled(
|
|
featureIdentifier
|
|
),
|
|
isEntitled:
|
|
application.features.getFeatureStatus(featureIdentifier) ===
|
|
FeatureStatus.Entitled,
|
|
};
|
|
});
|
|
setExperimentalFeatures(experimentalFeatures);
|
|
}, [application.features]);
|
|
|
|
useEffect(() => {
|
|
reloadExperimentalFeatures();
|
|
}, [reloadExperimentalFeatures]);
|
|
|
|
const premiumModal = usePremiumModal();
|
|
|
|
return (
|
|
<PreferencesGroup>
|
|
<PreferencesSegment>
|
|
<Title>Labs</Title>
|
|
<div>
|
|
{experimentalFeatures.map(
|
|
(
|
|
{ identifier, name, description, isEnabled, isEntitled },
|
|
index: number
|
|
) => {
|
|
const toggleFeature = () => {
|
|
if (!isEntitled) {
|
|
premiumModal.activate(name);
|
|
return;
|
|
}
|
|
|
|
application.features.toggleExperimentalFeature(identifier);
|
|
reloadExperimentalFeatures();
|
|
};
|
|
|
|
const showHorizontalSeparator =
|
|
experimentalFeatures.length > 1 &&
|
|
index !== experimentalFeatures.length - 1;
|
|
|
|
return (
|
|
<>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex flex-col">
|
|
<Subtitle>{name}</Subtitle>
|
|
<Text>{description}</Text>
|
|
</div>
|
|
<Switch onChange={toggleFeature} checked={isEnabled} />
|
|
</div>
|
|
{showHorizontalSeparator && (
|
|
<HorizontalSeparator classes="mt-5 mb-3" />
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
)}
|
|
{experimentalFeatures.length === 0 && (
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex flex-col">
|
|
<Text>No experimental features available.</Text>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</PreferencesSegment>
|
|
</PreferencesGroup>
|
|
);
|
|
};
|