apollo-form
Version:
Form state manager
103 lines (102 loc) • 4.17 kB
JavaScript
;
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const FormManager_1 = __importDefault(require("../form/FormManager"));
const react_1 = __importDefault(require("react"));
const client_1 = require("@apollo/client");
const isEqual_1 = __importDefault(require("lodash/isEqual"));
const ApolloManager_1 = __importDefault(require("../managers/ApolloManager"));
const FormManagerContext_1 = __importDefault(require("../form/FormManagerContext"));
function useForm(_a) {
var { resetOnUnmount, saveOnUnmount, enableReinitialize, initialState, name } = _a, props = __rest(_a, ["resetOnUnmount", "saveOnUnmount", "enableReinitialize", "initialState", "name"]);
const apolloClient = client_1.useApolloClient();
const formManagerCreator = react_1.default.useContext(FormManagerContext_1.default);
const formManager = react_1.default.useMemo(() => (formManagerCreator ? formManagerCreator(name) : new ApolloManager_1.default(name, apolloClient)), [formManagerCreator, name, apolloClient]);
const mountedRef = react_1.default.useRef(false);
const form = react_1.default.useMemo(() => {
if (typeof window !== 'undefined') {
// @ts-ignore
if (!window['__FORMS__']) {
// @ts-ignore
window['__FORMS__'] = {};
}
// @ts-ignore
if (window['__FORMS__'][name]) {
// @ts-ignore
return window['__FORMS__'][name];
}
}
const f = new FormManager_1.default(Object.assign(Object.assign({}, props), { name, manager: formManager, initialState }));
if (typeof window !== 'undefined') {
// @ts-ignore
if (typeof window['__FORMS__'] !== 'undefined') {
// @ts-ignore
window['__FORMS__'][name] = f;
}
}
return f;
}, []);
if (enableReinitialize && typeof window === 'undefined') {
if (!isEqual_1.default(form.get().values, initialState)) {
form.reset(initialState);
}
}
react_1.default.useEffect(() => {
if (enableReinitialize && mountedRef.current) {
const state = form.get();
if (state) {
if (!isEqual_1.default(form.getInitialState(), initialState)) {
form.reset(initialState);
}
}
}
mountedRef.current = true;
}, [initialState, mountedRef, enableReinitialize]);
react_1.default.useEffect(() => {
return () => {
if (!saveOnUnmount) {
formManager.remove();
if (typeof window !== 'undefined') {
// @ts-ignore
if (window['__FORMS__']) {
// @ts-ignore
delete window['__FORMS__'][name];
}
}
}
else {
if (resetOnUnmount) {
if (form.exists()) {
form.reset();
}
}
}
};
}, [resetOnUnmount, saveOnUnmount, form]);
react_1.default.useEffect(() => {
form.renewOnChange(props.onChange);
}, [props.onChange]);
react_1.default.useEffect(() => {
form.renewOnSubmit(props.onSubmit);
}, [props.onSubmit]);
react_1.default.useEffect(() => {
return () => {
form.stopTimeouts();
};
}, [form]);
return form;
}
exports.default = useForm;