Spaces:
Running
Running
File size: 2,819 Bytes
3b6afc0 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
import exportFromJSON from 'export-from-json';
import { useEffect, useState } from 'react';
import { useRecoilValue } from 'recoil';
import { Dialog, DialogButton, DialogTemplate } from '~/components';
import SaveAsPresetDialog from './SaveAsPresetDialog';
import cleanupPreset from '~/utils/cleanupPreset';
import { alternateName } from '~/utils';
import Settings from './Settings';
import store from '~/store';
import { localize } from '~/localization/Translation';
// A preset dialog to show readonly preset values.
const EndpointOptionsDialog = ({ open, onOpenChange, preset: _preset, title }) => {
const [preset, setPreset] = useState(_preset);
const [saveAsDialogShow, setSaveAsDialogShow] = useState(false);
const endpointsConfig = useRecoilValue(store.endpointsConfig);
const endpointName = alternateName[preset?.endpoint] ?? 'Endpoint';
const lang = useRecoilValue(store.lang);
const setOption = (param) => (newValue) => {
let update = {};
update[param] = newValue;
setPreset((prevState) => ({
...prevState,
...update,
}));
};
const saveAsPreset = () => {
setSaveAsDialogShow(true);
};
const exportPreset = () => {
exportFromJSON({
data: cleanupPreset({ preset, endpointsConfig }),
fileName: `${preset?.title}.json`,
exportType: exportFromJSON.types.json,
});
};
useEffect(() => {
setPreset(_preset);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [open]);
return (
<>
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogTemplate
title={`${title || localize(lang, 'com_endpoint_view_options')} - ${endpointName}`}
className="max-w-full sm:max-w-4xl"
main={
<div className="flex w-full flex-col items-center gap-2">
<div className="w-full p-0">
<Settings preset={preset} readonly={true} setOption={setOption} />
</div>
</div>
}
buttons={
<>
<DialogButton
onClick={saveAsPreset}
className="dark:hover:gray-400 border-gray-700 bg-green-600 text-white hover:bg-green-700 dark:hover:bg-green-800"
>
{localize(lang, 'com_endpoint_save_as_preset')}
</DialogButton>
</>
}
leftButtons={
<>
<DialogButton onClick={exportPreset} className="dark:hover:gray-400 border-gray-700">
{localize(lang, 'com_endpoint_export')}
</DialogButton>
</>
}
/>
</Dialog>
<SaveAsPresetDialog
open={saveAsDialogShow}
onOpenChange={setSaveAsDialogShow}
preset={preset}
/>
</>
);
};
export default EndpointOptionsDialog;
|