feat(Former): add useFormerState hook for managing form state
This commit is contained in:
@@ -4,3 +4,4 @@ export { FormerButtonArea } from './FormerButtonArea';
|
|||||||
export { FormerResolveSpecAPI } from './FormerResolveSpecAPI';
|
export { FormerResolveSpecAPI } from './FormerResolveSpecAPI';
|
||||||
export { FormerRestHeadSpecAPI } from './FormerRestHeadSpecAPI';
|
export { FormerRestHeadSpecAPI } from './FormerRestHeadSpecAPI';
|
||||||
export { FormerDialog, FormerModel, FormerPopover } from './FormerWrappers';
|
export { FormerDialog, FormerModel, FormerPopover } from './FormerWrappers';
|
||||||
|
export { useFormerState } from './use-former-state';
|
||||||
|
|||||||
38
src/Former/use-former-state.tsx
Normal file
38
src/Former/use-former-state.tsx
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
import type { FieldValues } from 'react-hook-form';
|
||||||
|
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
import type { FormerProps } from './Former.types';
|
||||||
|
|
||||||
|
export type UseFormerStateProps<T extends FieldValues = FieldValues> = Pick<
|
||||||
|
FormerProps<T>,
|
||||||
|
'onChange' | 'onClose' | 'opened' | 'primeData' | 'request' | 'values'
|
||||||
|
>;
|
||||||
|
|
||||||
|
export const useFormerState = <T extends FieldValues = FieldValues>(
|
||||||
|
options?: Partial<UseFormerStateProps<T>>
|
||||||
|
) => {
|
||||||
|
const [state, setState] = useState<Partial<UseFormerStateProps<T>>>({
|
||||||
|
onChange: options?.onChange,
|
||||||
|
onClose: options?.onClose ?? (() => setState((cv) => ({ ...cv, opened: false }))),
|
||||||
|
opened: options?.opened ?? false,
|
||||||
|
primeData: options?.primeData ?? options?.values,
|
||||||
|
request: options?.request ?? 'insert',
|
||||||
|
values: options?.values,
|
||||||
|
});
|
||||||
|
|
||||||
|
const updateState = (updates: Partial<UseFormerStateProps<T>>) => {
|
||||||
|
setState((prev) => ({ ...prev, ...updates }));
|
||||||
|
};
|
||||||
|
|
||||||
|
const { onChange, onClose, opened, ...formerProps } = state;
|
||||||
|
|
||||||
|
return {
|
||||||
|
former: { ...formerProps, onChange, onClose, opened },
|
||||||
|
formerWrapper: { onClose, opened },
|
||||||
|
open: (request: UseFormerStateProps<T>['request'], data: UseFormerStateProps<T>['values']) => {
|
||||||
|
setState((cv) => ({ ...cv, opened: true, primeData: data, request, values: data }));
|
||||||
|
},
|
||||||
|
updateState,
|
||||||
|
};
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user