67 lines
1.9 KiB
TypeScript
67 lines
1.9 KiB
TypeScript
import { WebApplication } from '@/ui_models/application';
|
|
import { FeatureIdentifier } from '@standardnotes/features';
|
|
import { FeatureStatus } from '@standardnotes/snjs';
|
|
import { FunctionComponent } from 'preact';
|
|
import { useState } from 'preact/hooks';
|
|
import { JSXInternal } from 'preact/src/jsx';
|
|
import { Icon } from '../Icon';
|
|
import { PremiumFeaturesModal } from '../PremiumFeaturesModal';
|
|
import { Switch } from '../Switch';
|
|
|
|
type Props = {
|
|
application: WebApplication;
|
|
closeQuickSettingsMenu: () => void;
|
|
focusModeEnabled: boolean;
|
|
setFocusModeEnabled: (enabled: boolean) => void;
|
|
};
|
|
|
|
export const FocusModeSwitch: FunctionComponent<Props> = ({
|
|
application,
|
|
closeQuickSettingsMenu,
|
|
focusModeEnabled,
|
|
setFocusModeEnabled,
|
|
}) => {
|
|
const [showUpgradeModal, setShowUpgradeModal] = useState(false);
|
|
const isEntitledToFocusMode =
|
|
application.getFeatureStatus(FeatureIdentifier.FocusMode) ===
|
|
FeatureStatus.Entitled;
|
|
|
|
const toggleFocusMode = (
|
|
e: JSXInternal.TargetedMouseEvent<HTMLButtonElement>
|
|
) => {
|
|
e.preventDefault();
|
|
if (isEntitledToFocusMode) {
|
|
setFocusModeEnabled(!focusModeEnabled);
|
|
closeQuickSettingsMenu();
|
|
} else {
|
|
setShowUpgradeModal(true);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<button
|
|
className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none justify-between"
|
|
onClick={toggleFocusMode}
|
|
>
|
|
<div className="flex items-center">
|
|
<Icon type="menu-close" className="color-neutral mr-2" />
|
|
Focused Writing
|
|
</div>
|
|
{isEntitledToFocusMode ? (
|
|
<Switch className="px-0" checked={focusModeEnabled} />
|
|
) : (
|
|
<div title="Premium feature">
|
|
<Icon type="premium-feature" />
|
|
</div>
|
|
)}
|
|
</button>
|
|
<PremiumFeaturesModal
|
|
showModal={showUpgradeModal}
|
|
featureName="Focus Mode"
|
|
onClose={() => setShowUpgradeModal(false)}
|
|
/>
|
|
</>
|
|
);
|
|
};
|