56 lines
1.5 KiB
TypeScript
Executable File
56 lines
1.5 KiB
TypeScript
Executable File
import {AppearanceButton} from '@common/admin/appearance/appearance-button';
|
|
import {DialogTrigger} from '@common/ui/overlays/dialog/dialog-trigger';
|
|
import {Trans} from '@common/i18n/trans';
|
|
import {useFormContext} from 'react-hook-form';
|
|
import {
|
|
appearanceState,
|
|
AppearanceValues,
|
|
} from '@common/admin/appearance/appearance-store';
|
|
import {AceDialog} from '@common/ace-editor/ace-dialog';
|
|
import {Fragment} from 'react';
|
|
|
|
export function CustomCodeSection() {
|
|
return (
|
|
<Fragment>
|
|
<CustomCodeDialogTrigger mode="css" />
|
|
<CustomCodeDialogTrigger mode="html" />
|
|
</Fragment>
|
|
);
|
|
}
|
|
|
|
interface CustomCodeDialogTriggerProps {
|
|
mode: 'html' | 'css';
|
|
}
|
|
function CustomCodeDialogTrigger({mode}: CustomCodeDialogTriggerProps) {
|
|
const {getValues} = useFormContext<AppearanceValues>();
|
|
const {setValue} = useFormContext<AppearanceValues>();
|
|
|
|
const title =
|
|
mode === 'html' ? (
|
|
<Trans message="Custom HTML & JavaScript" />
|
|
) : (
|
|
<Trans message="Custom CSS" />
|
|
);
|
|
|
|
return (
|
|
<DialogTrigger
|
|
type="modal"
|
|
onClose={newValue => {
|
|
if (newValue != null) {
|
|
setValue(`appearance.custom_code.${mode}`, newValue, {
|
|
shouldDirty: true,
|
|
});
|
|
appearanceState().preview.setCustomCode(mode, newValue);
|
|
}
|
|
}}
|
|
>
|
|
<AppearanceButton>{title}</AppearanceButton>
|
|
<AceDialog
|
|
title={title}
|
|
defaultValue={getValues(`appearance.custom_code.${mode}`) || ''}
|
|
mode={mode}
|
|
/>
|
|
</DialogTrigger>
|
|
);
|
|
}
|