54 lines
1 KiB
TypeScript
54 lines
1 KiB
TypeScript
import React from "react";
|
|
|
|
import FormComponent, { FormProps } from "./Form";
|
|
|
|
interface IFormContext {
|
|
hasChanged: boolean;
|
|
toggle: () => void;
|
|
}
|
|
|
|
export const FormContext = React.createContext<IFormContext>(undefined);
|
|
|
|
interface FormProviderState {
|
|
hasChanged: boolean;
|
|
}
|
|
|
|
export class FormProvider extends React.Component<{}, FormProviderState> {
|
|
state: FormProviderState = {
|
|
hasChanged: false
|
|
};
|
|
|
|
toggle = () =>
|
|
this.setState(prevState => ({
|
|
hasChanged: !prevState.hasChanged
|
|
}));
|
|
|
|
render() {
|
|
return (
|
|
<FormContext.Provider
|
|
value={{
|
|
hasChanged: this.state.hasChanged,
|
|
toggle: this.toggle
|
|
}}
|
|
>
|
|
{this.props.children}
|
|
</FormContext.Provider>
|
|
);
|
|
}
|
|
}
|
|
|
|
export function Form<T>(props: FormProps<T>) {
|
|
return (
|
|
<FormContext.Consumer>
|
|
{({ hasChanged, toggle }) => (
|
|
<FormComponent
|
|
{...props}
|
|
toggleFormChangeState={toggle}
|
|
hasChanged={hasChanged}
|
|
/>
|
|
)}
|
|
</FormContext.Consumer>
|
|
);
|
|
}
|
|
|
|
export default Form;
|