saleor-dashboard/src/components/Form/Form.tsx

45 lines
996 B
TypeScript
Raw Normal View History

import useForm, { SubmitPromise, UseFormResult } from "@saleor/hooks/useForm";
import React from "react";
2019-08-09 11:14:35 +00:00
2021-11-23 09:03:07 +00:00
export interface FormProps<T>
extends Omit<React.HTMLProps<HTMLFormElement>, "onSubmit"> {
2019-08-09 11:14:35 +00:00
children: (props: UseFormResult<T>) => React.ReactNode;
confirmLeave?: boolean;
2019-06-19 14:40:52 +00:00
initial?: T;
resetOnSubmit?: boolean;
onSubmit?: (data: T) => SubmitPromise | void;
2019-06-19 14:40:52 +00:00
}
2019-08-09 11:14:35 +00:00
function Form<T>(props: FormProps<T>) {
2021-11-23 09:03:07 +00:00
const { children, initial, resetOnSubmit, onSubmit, ...rest } = props;
2020-02-24 14:14:48 +00:00
const renderProps = useForm(initial, onSubmit);
2019-06-19 14:40:52 +00:00
2019-08-09 11:14:35 +00:00
function handleSubmit(event?: React.FormEvent<any>, cb?: () => void) {
const { reset, submit } = renderProps;
2019-06-19 14:40:52 +00:00
if (event) {
event.stopPropagation();
event.preventDefault();
}
2019-08-09 11:14:35 +00:00
2019-06-19 14:40:52 +00:00
if (cb) {
cb();
}
2019-08-09 11:14:35 +00:00
2019-06-19 14:40:52 +00:00
if (resetOnSubmit) {
2019-08-09 11:14:35 +00:00
reset();
2019-06-19 14:40:52 +00:00
}
2019-08-09 11:14:35 +00:00
submit();
2019-06-19 14:40:52 +00:00
}
2019-08-09 11:14:35 +00:00
2021-11-23 09:03:07 +00:00
return (
<form {...rest} onSubmit={handleSubmit}>
{children(renderProps)}
</form>
);
2019-06-19 14:40:52 +00:00
}
2019-08-09 11:14:35 +00:00
Form.displayName = "Form";
export default Form;