100 lines
3.4 KiB
TypeScript
100 lines
3.4 KiB
TypeScript
import { type Dispatch, type SetStateAction } from 'react';
|
|
|
|
import { PlatformActionButton } from '../common/PlatformActionButton';
|
|
import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
|
|
import { PlatformTextField } from '../common/PlatformTextField';
|
|
import { UnifiedModal } from '../common/UnifiedModal';
|
|
import type { GenerateDialogState } from './ImageCanvasEditorTypes';
|
|
|
|
type ImageCanvasEditGenerationModalViewProps = {
|
|
dialog: GenerateDialogState | null;
|
|
setGenerateDialog: Dispatch<SetStateAction<GenerateDialogState | null>>;
|
|
onSubmit: (dialog: GenerateDialogState) => void;
|
|
};
|
|
|
|
export function ImageCanvasEditGenerationModalView({
|
|
dialog,
|
|
setGenerateDialog,
|
|
onSubmit,
|
|
}: ImageCanvasEditGenerationModalViewProps) {
|
|
const isOpen = dialog?.mode === 'edit' && dialog.status !== 'generating';
|
|
|
|
return (
|
|
<UnifiedModal
|
|
open={isOpen}
|
|
title={dialog?.mode === 'edit' ? '修改图片' : '生成图片'}
|
|
size="sm"
|
|
closeLabel={dialog?.mode === 'edit' ? '关闭修改图片' : '关闭生成图片'}
|
|
closeDisabled={dialog?.status === 'generating'}
|
|
onClose={() => setGenerateDialog(null)}
|
|
panelClassName="image-canvas-editor__generate-dialog"
|
|
bodyClassName="image-canvas-editor__generate-dialog-body"
|
|
>
|
|
{dialog?.mode === 'edit' ? (
|
|
<form
|
|
className="image-canvas-editor__generate-form"
|
|
onSubmit={(event) => {
|
|
event.preventDefault();
|
|
if (dialog.status !== 'generating') {
|
|
onSubmit(dialog);
|
|
}
|
|
}}
|
|
>
|
|
<div className="image-canvas-editor__generate-body">
|
|
<PlatformTextField
|
|
variant="textarea"
|
|
aria-label="生成提示词"
|
|
value={dialog.prompt}
|
|
disabled={dialog.status === 'generating'}
|
|
size="sm"
|
|
density="roomy"
|
|
className="image-canvas-editor__generate-prompt"
|
|
placeholder="描述你想如何修改这张图片"
|
|
onChange={(event) =>
|
|
setGenerateDialog((currentDialog) =>
|
|
currentDialog
|
|
? {
|
|
...currentDialog,
|
|
prompt: event.target.value,
|
|
}
|
|
: currentDialog,
|
|
)
|
|
}
|
|
/>
|
|
{dialog.status === 'generating' ? (
|
|
<PlatformStatusMessage
|
|
tone="info"
|
|
surface="platform"
|
|
size="xs"
|
|
className="image-canvas-editor__generate-status"
|
|
role="status"
|
|
>
|
|
修改中
|
|
</PlatformStatusMessage>
|
|
) : null}
|
|
{dialog.status === 'failed' ? (
|
|
<PlatformStatusMessage
|
|
tone="error"
|
|
surface="platform"
|
|
size="xs"
|
|
className="image-canvas-editor__generate-status"
|
|
role="alert"
|
|
>
|
|
{dialog.errorMessage}
|
|
</PlatformStatusMessage>
|
|
) : null}
|
|
<PlatformActionButton
|
|
type="submit"
|
|
size="sm"
|
|
className="image-canvas-editor__generate-submit"
|
|
disabled={dialog.status === 'generating'}
|
|
>
|
|
{dialog.status === 'generating' ? '修改中' : '修改'}
|
|
</PlatformActionButton>
|
|
</div>
|
|
</form>
|
|
) : null}
|
|
</UnifiedModal>
|
|
);
|
|
}
|