'use client';
import React, { createContext, useContext, useMemo, useState } from 'react';
import type { PropsWithChildren } from 'react';
export enum FormMode {
'VIEW' = 'VIEW',
'EDIT' = 'EDIT',
'CREATE' = 'CREATE',
}
type FormModeContextType = {
mode: FormMode;
setMode: (mode: FormMode) => void;
isViewMode: boolean;
isEditMode: boolean;
isCreateMode: boolean;
};
const FormModeContext = createContext<FormModeContextType | undefined>(
undefined,
);
export const useFormMode = (): FormModeContextType => {
const context = useContext(FormModeContext);
if (!context) {
throw new Error('useFormMode must be used within a FormModeProvider');
}
return context;
};
export const FormModeProvider = ({
children,
initialFormMode,
}: PropsWithChildren<{ initialFormMode: FormMode }>) => {
const [mode, setMode] = useState<FormMode>(() => initialFormMode);
// Memoize the context value to avoid unnecessary re-renders
const value = useMemo(
() => ({
mode,
setMode,
isViewMode: mode === FormMode.VIEW,
isEditMode: mode === FormMode.EDIT,
isCreateMode: mode === FormMode.CREATE,
}),
[mode],
);
return (
<FormModeContext.Provider value={value}>
{children}
</FormModeContext.Provider>
);
};
'use client';
import React, { createContext, useContext, useMemo, useState } from 'react';
import type { PropsWithChildren } from 'react';
export enum FormMode {
'VIEW' = 'VIEW',
'EDIT' = 'EDIT',
'CREATE' = 'CREATE',
}
type FormModeContextType = {
mode: FormMode;
setMode: (mode: FormMode) => void;
isViewMode: boolean;
isEditMode: boolean;
isCreateMode: boolean;
};
const FormModeContext = createContext<FormModeContextType | undefined>(
undefined,
);
export const useFormMode = (): FormModeContextType => {
const context = useContext(FormModeContext);
if (!context) {
throw new Error('useFormMode must be used within a FormModeProvider');
}
return context;
};
export const FormModeProvider = ({
children,
initialFormMode,
}: PropsWithChildren<{ initialFormMode: FormMode }>) => {
const [mode, setMode] = useState<FormMode>(() => initialFormMode);
// Memoize the context value to avoid unnecessary re-renders
const value = useMemo(
() => ({
mode,
setMode,
isViewMode: mode === FormMode.VIEW,
isEditMode: mode === FormMode.EDIT,
isCreateMode: mode === FormMode.CREATE,
}),
[mode],
);
return (
<FormModeContext.Provider value={value}>
{children}
</FormModeContext.Provider>
);
};