Skip to content

Commit

Permalink
Fixed focus trap issue
Browse files Browse the repository at this point in the history
  • Loading branch information
pkirilin committed Jul 6, 2024
1 parent 92b7f20 commit 8bc509e
Show file tree
Hide file tree
Showing 14 changed files with 495 additions and 460 deletions.
3 changes: 1 addition & 2 deletions src/frontend/src/features/note/addEdit/lib/types.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import { type productLib, type productModel } from '@/entities/product';
import { type Note } from '../model';

export interface RenderDialogProps {
opened: boolean;
export interface RenderContentProps {
submitLoading: boolean;
submitDisabled: boolean;
productAutocompleteInput: productLib.AutocompleteInput;
Expand Down
19 changes: 11 additions & 8 deletions src/frontend/src/features/note/addEdit/ui/AddNote.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ import { Button } from '@/shared/ui';
import { useAddProductIfNotExists, useRecognizeNotes } from '../lib';
import { mapToCreateNoteRequest } from '../lib/mapping';
import { type UploadedPhoto, type Note, type InputMethod } from '../model';
import { AddNoteDialog } from './AddNoteDialog';
import { AddOrEditNoteFlow } from './AddOrEditNoteFlow';
import { AddNoteDialogContent } from './AddNoteDialogContent';
import { NoteInputFlow } from './NoteInputFlow';

interface Props {
pageId: number;
Expand All @@ -24,7 +24,7 @@ export const AddNote: FC<Props> = ({ pageId, mealType }) => {
const notes = noteLib.useNotes(pageId);
const displayOrder = noteLib.useNextDisplayOrder(pageId);

const noteForm = noteLib.useFormValues({
const { clearValues: clearNoteForm, ...noteForm } = noteLib.useFormValues({
pageId,
mealType,
displayOrder,
Expand All @@ -46,20 +46,22 @@ export const AddNote: FC<Props> = ({ pageId, mealType }) => {
const handleSubmitSuccess = useCallback(() => {
reset();
setSelectedInputMethod('fromInput');
}, [reset]);
clearNoteForm();
}, [clearNoteForm, reset]);

const handleCancel = useCallback(() => {
setUploadedPhotos([]);
setSelectedInputMethod('fromInput');
}, []);
clearNoteForm();
}, [clearNoteForm]);

const handleUploadSuccess = async (photos: UploadedPhoto[]): Promise<void> => {
setUploadedPhotos(photos);
await recognizeNotes(photos[0].file);
};

return (
<AddOrEditNoteFlow
<NoteInputFlow
renderTrigger={handleAddNoteClick => (
<Button
variant="text"
Expand All @@ -71,8 +73,8 @@ export const AddNote: FC<Props> = ({ pageId, mealType }) => {
Add note
</Button>
)}
renderDialog={dialogProps => (
<AddNoteDialog
renderContent={dialogProps => (
<AddNoteDialogContent
{...dialogProps}
noteFormValues={noteForm.values}
recognizeNotesResult={recognizeNotesResult}
Expand All @@ -82,6 +84,7 @@ export const AddNote: FC<Props> = ({ pageId, mealType }) => {
onSelectedInputMethodChange={setSelectedInputMethod}
/>
)}
submitText="Add"
submitSuccess={addNoteResponse.isSuccess && notes.isChanged}
product={null}
productAutocompleteData={productAutocompleteData}
Expand Down
144 changes: 0 additions & 144 deletions src/frontend/src/features/note/addEdit/ui/AddNoteDialog.tsx

This file was deleted.

110 changes: 110 additions & 0 deletions src/frontend/src/features/note/addEdit/ui/AddNoteDialogContent.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
import KeyboardIcon from '@mui/icons-material/Keyboard';
import PhotoCameraIcon from '@mui/icons-material/PhotoCamera';
import { TabContext, TabList, TabPanel } from '@mui/lab';
import { Box, Tab } from '@mui/material';
import { type FC } from 'react';
import { type noteModel } from '@/entities/note';
import { ProductAutocomplete } from '@/entities/product';
import { type RenderContentProps, type RecognizeNotesResult } from '../lib';
import { type UploadedPhoto, type InputMethod } from '../model';
import { NoteInputForm } from './NoteInputForm';
import { NoteInputFromPhotoFlow } from './NoteInputFromPhotoFlow';

interface Props extends RenderContentProps {
noteFormValues: noteModel.FormValues;
recognizeNotesResult: RecognizeNotesResult;
uploadedPhotos: UploadedPhoto[];
selectedInputMethod: InputMethod;
onUploadSuccess: (photos: UploadedPhoto[]) => Promise<void>;
onSelectedInputMethodChange: (value: InputMethod) => void;
}

export const AddNoteDialogContent: FC<Props> = ({
submitLoading,
submitDisabled,
noteFormValues,
productFormValues,
productAutocompleteInput,
productAutocompleteData,
recognizeNotesResult,
uploadedPhotos,
selectedInputMethod,
onClose,
onSubmit,
onSubmitDisabledChange,
onProductChange,
onUploadSuccess,
onProductFormValuesChange,
onSelectedInputMethodChange,
}) => {
const handleSelectedInputMethodChange = (_: React.SyntheticEvent, value: InputMethod): void => {
onSelectedInputMethodChange(value);
};

return (
<TabContext value={selectedInputMethod}>
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<TabList
variant="scrollable"
scrollButtons="auto"
onChange={handleSelectedInputMethodChange}
>
<Tab
icon={<KeyboardIcon />}
iconPosition="start"
label="From input"
value={'fromInput' satisfies InputMethod}
/>
<Tab
icon={<PhotoCameraIcon />}
iconPosition="start"
label="From photo"
value={'fromPhoto' satisfies InputMethod}
/>
</TabList>
</Box>
<Box px={0} pb={0} component={TabPanel} value={'fromInput' satisfies InputMethod}>
<NoteInputForm
id="note-input-form"
values={noteFormValues}
productAutocompleteInput={productAutocompleteInput}
renderProductAutocomplete={productAutocompleteProps => (
<ProductAutocomplete
{...productAutocompleteProps}
autoFocus
formValues={productFormValues}
onChange={onProductChange}
options={productAutocompleteData.options}
loading={productAutocompleteData.isLoading}
/>
)}
onSubmit={onSubmit}
onSubmitDisabledChange={onSubmitDisabledChange}
/>
</Box>
<Box
px={0}
pb={recognizeNotesResult.isSuccess && recognizeNotesResult.notes.length > 0 ? 0 : undefined}
component={TabPanel}
value={'fromPhoto' satisfies InputMethod}
>
<NoteInputFromPhotoFlow
submitLoading={submitLoading}
submitDisabled={submitDisabled}
noteFormValues={noteFormValues}
productFormValues={productFormValues}
productAutocompleteData={productAutocompleteData}
productAutocompleteInput={productAutocompleteInput}
recognizeNotesResult={recognizeNotesResult}
uploadedPhotos={uploadedPhotos}
onClose={onClose}
onSubmit={onSubmit}
onSubmitDisabledChange={onSubmitDisabledChange}
onProductChange={onProductChange}
onUploadSuccess={onUploadSuccess}
onProductFormValuesChange={onProductFormValuesChange}
/>
</Box>
</TabContext>
);
};
Loading

0 comments on commit 8bc509e

Please sign in to comment.