react-browser-form
Version:
<div align="center"> <a href="https://deniskabana.github.io/react-browser-form/introduction" title="React Browser Form - Form management in React made simple for browsers."> <img src="https://raw.githubusercontent.com/deniskabana/react-browser-form/
57 lines (53 loc) • 1.99 kB
text/typescript
import {
EventSource,
EventType,
FormEventHandler,
FormEventHandlers,
HandleDataFlow,
UserEventHandler,
} from "../types";
export function useFormEventHandlers<Schema>(handleDataFlow: HandleDataFlow<Schema>): FormEventHandlers<Schema> {
// USER EVENTS
// --------------------------------------------------------------------------------
const handleUserSetValues: UserEventHandler<Schema> = value => {
handleDataFlow({ source: EventSource.User, type: EventType.Change, value });
};
const handleUserSubmit: UserEventHandler<Schema> = () => {
handleDataFlow({ source: EventSource.User, type: EventType.Submit });
};
const handleUserReset: UserEventHandler<Schema> = value => {
handleDataFlow({ source: EventSource.User, type: EventType.Reset, value });
};
// DOM FORM EVENTS
// --------------------------------------------------------------------------------
const handleFormChange: FormEventHandler = event => {
handleDataFlow({ source: EventSource.Form, type: EventType.Change, nativeEvent: event });
};
const handleFormSubmit: FormEventHandler = event => {
event.preventDefault();
handleDataFlow({ source: EventSource.Form, type: EventType.Submit, nativeEvent: event });
};
const handleFormBlur: FormEventHandler = event => {
handleDataFlow({ source: EventSource.Form, type: EventType.Blur, nativeEvent: event });
};
const handleFormReset: FormEventHandler = event => {
// A deliberately unsupported event! Stop exeuction.
event.preventDefault();
handleDataFlow({ source: EventSource.Form, type: EventType.Reset, nativeEvent: event });
};
return {
// Exposed methods
[EventSource.User]: {
setValues: handleUserSetValues,
submit: handleUserSubmit,
reset: handleUserReset,
},
// Form handlers
[EventSource.Form]: {
onChange: handleFormChange,
onSubmit: handleFormSubmit,
onBlur: handleFormBlur,
onReset: handleFormReset,
},
};
}