61 lines
1.7 KiB
TypeScript
61 lines
1.7 KiB
TypeScript
import { WebApplication } from '@/ui_models/application';
|
|
import { SNTheme } from '@standardnotes/snjs';
|
|
import { FunctionComponent } from 'preact';
|
|
import { JSXInternal } from 'preact/src/jsx';
|
|
import { Switch } from '../Switch';
|
|
|
|
type Props = {
|
|
theme: SNTheme;
|
|
application: WebApplication;
|
|
onBlur: (event: { relatedTarget: EventTarget | null }) => void;
|
|
};
|
|
|
|
export const ThemesMenuButton: FunctionComponent<Props> = ({
|
|
application,
|
|
theme,
|
|
onBlur,
|
|
}) => {
|
|
const toggleTheme: JSXInternal.MouseEventHandler<HTMLButtonElement> = (e) => {
|
|
e.preventDefault();
|
|
if (theme.isLayerable() || !theme.active) {
|
|
application.toggleComponent(theme);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<button
|
|
className={`sn-dropdown-item focus:bg-info-backdrop focus:shadow-none ${
|
|
theme.isLayerable() ? `justify-start` : `justify-between`
|
|
}`}
|
|
onClick={toggleTheme}
|
|
onBlur={onBlur}
|
|
>
|
|
{theme.isLayerable() ? (
|
|
<>
|
|
<Switch className="px-0 mr-2" checked={theme.active} />
|
|
{theme.package_info.name}
|
|
</>
|
|
) : (
|
|
<>
|
|
<div className="flex items-center">
|
|
<div
|
|
className={`pseudo-radio-btn ${
|
|
theme.active ? 'pseudo-radio-btn--checked' : ''
|
|
} mr-2`}
|
|
></div>
|
|
<span className={theme.active ? 'font-semibold' : undefined}>
|
|
{theme.package_info.name}
|
|
</span>
|
|
</div>
|
|
<div
|
|
className="w-5 h-5 rounded-full"
|
|
style={{
|
|
backgroundColor: theme.package_info?.dock_icon?.background_color,
|
|
}}
|
|
></div>
|
|
</>
|
|
)}
|
|
</button>
|
|
);
|
|
};
|