styled-hook-form
Version:
React form library for styled-components based on grommet and react-hook-form
248 lines (247 loc) • 11.3 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
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 });
exports.HttpForm = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const axios_hooks_1 = __importDefault(require("axios-hooks"));
const form_builder_1 = require("../form-builder");
const react_1 = __importStar(require("react"));
const grommet_1 = require("grommet");
const context_1 = require("../../context");
const axios_1 = __importDefault(require("axios"));
const axios_mock_adapter_1 = __importDefault(require("axios-mock-adapter"));
const types_1 = require("../utils/types");
const http_1 = require("../utils/http");
const successCodes = [200, 201, 202];
const extractCallbackFunc = (obj) => {
return Array.isArray(obj) ? obj[0] : obj;
};
const extractCallbackDeps = (obj) => {
return !obj || !Array.isArray(obj) ? [] : obj[1];
};
const HttpForm = react_1.default.forwardRef((props, ref) => {
let { onSaveRequest, onSaveResponse, onLoadRequest, onLoadResponse, fields: fieldsProp, saveRequest: saveReqProp, loadRequest: loadRequestProp, onSaveSuccess, onLoadSuccess, onSaveError, onLoadError, model, loadingIndicator, submitButton, resetButton, mockResponse, formMethods, encodingMode = "AUTO", children } = props, rest = __rest(props, ["onSaveRequest", "onSaveResponse", "onLoadRequest", "onLoadResponse", "fields", "saveRequest", "loadRequest", "onSaveSuccess", "onLoadSuccess", "onSaveError", "onLoadError", "model", "loadingIndicator", "submitButton", "resetButton", "mockResponse", "formMethods", "encodingMode", "children"]);
const fields = fieldsProp !== null && fieldsProp !== void 0 ? fieldsProp : [];
let { translate: T } = context_1.useFormBuilderContext();
let methodsRef = react_1.useRef();
const requestRef = react_1.useRef();
const fallBackRef = (instance) => {
methodsRef.current = instance.methods;
};
const proxyRef = (origRef) => {
return (instance) => {
fallBackRef(instance);
if (origRef) {
if (typeof origRef === "function") {
origRef(instance);
}
else {
origRef.current = instance;
}
}
};
};
const formRef = proxyRef(ref);
let saveRequest = react_1.useMemo(() => {
return typeof saveReqProp === "string"
? {
url: saveReqProp,
}
: saveReqProp;
}, [saveReqProp]);
let loadRequest = react_1.useMemo(() => {
return typeof loadRequestProp === "string"
? {
url: loadRequestProp,
}
: loadRequestProp;
}, [loadRequestProp]);
const [{ loading, data, error: saveError, response: saveResponse }, submitToServer,] = axios_hooks_1.default(Object.assign(Object.assign({}, saveRequest), { transformResponse: react_1.useCallback((data, headers) => {
if (!data) {
return data;
}
if (typeof data === "string") {
data = JSON.parse(data);
}
if (onSaveResponse) {
data = extractCallbackFunc(onSaveResponse)(data, headers);
}
return data;
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [...extractCallbackDeps(onSaveResponse)]), transformRequest: react_1.useCallback((data, headers) => {
if (onSaveRequest) {
data = extractCallbackFunc(onSaveRequest)(data, headers);
}
if (["JSON", "AUTO"].includes(encodingMode) &&
!(data instanceof FormData)) {
data = types_1.isPrimitive(data) ? data : JSON.stringify(data);
}
return data;
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [...extractCallbackDeps(onSaveRequest)]) }), {
manual: true,
});
const loadRequestOptions = {
transformResponse: react_1.useCallback((data, headers) => {
if (!data) {
return data;
}
if (typeof data === "string") {
data = JSON.parse(data);
}
try {
if (onLoadResponse) {
data = extractCallbackFunc(onLoadResponse)(data, headers);
}
}
catch (e) {
console.error(e);
}
if (methodsRef === null || methodsRef === void 0 ? void 0 : methodsRef.current) {
//@ts-ignore
methodsRef.current.control._avoidNotify = true;
methodsRef.current.reset(data);
}
return data;
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [...extractCallbackDeps(onLoadResponse)]),
transformRequest: react_1.useCallback((data, headers) => {
if (onLoadRequest) {
try {
data = extractCallbackFunc(onLoadRequest)(data, headers);
}
catch (e) {
console.log(e);
}
}
return data;
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [...extractCallbackDeps(onLoadRequest)]),
};
const [{ loading: loadLoading, data: serverData, response: loadResponse, error: loadError, }, getServerData,] = axios_hooks_1.default("", {
manual: true,
});
react_1.useEffect(() => {
if (saveResponse &&
(saveResponse === null || saveResponse === void 0 ? void 0 : saveResponse.status) &&
successCodes.indexOf(saveResponse === null || saveResponse === void 0 ? void 0 : saveResponse.status) !== -1) {
onSaveSuccess && onSaveSuccess(data);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [data]);
react_1.useEffect(() => {
onSaveError && saveError && onSaveError(saveError);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [saveError]);
react_1.useEffect(() => {
if (loadResponse &&
(loadResponse === null || loadResponse === void 0 ? void 0 : loadResponse.status) &&
successCodes.indexOf(loadResponse === null || loadResponse === void 0 ? void 0 : loadResponse.status) !== -1) {
onLoadSuccess && onLoadSuccess(data);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [data, loadResponse, serverData]);
react_1.useEffect(() => {
onSaveError && loadError && onSaveError(loadError);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [loadError]);
const handleSubmit = (data) => {
if (mockResponse) {
let mockAdapter = new axios_mock_adapter_1.default(axios_1.default);
mockResponse(mockAdapter);
}
let hasFile = fields.some((f) => f.type === form_builder_1.FormFieldType.File);
if (["MUTIPART", "AUTO"].includes(encodingMode) && hasFile) {
let formData = new FormData();
for (let fieldName in data) {
let field = data[fieldName];
if (field instanceof FileList) {
for (let [i, file] of Object.entries(field)) {
formData.append(`${fieldName}[${i}]`, file);
}
}
else {
formData.append(fieldName, field);
}
}
data = formData;
}
submitToServer({
data,
});
};
react_1.useEffect(() => {
var _a;
const aggConfig = loadRequest
? Object.assign(Object.assign({}, loadRequest), { transformRequest: loadRequestOptions.transformRequest, transformResponse: loadRequestOptions.transformResponse }) : undefined;
const request = aggConfig || ((_a = requestRef === null || requestRef === void 0 ? void 0 : requestRef.current) === null || _a === void 0 ? void 0 : _a.config);
if (request &&
((requestRef.current &&
(!requestRef.current.completed ||
JSON.stringify(requestRef.current.config) !==
JSON.stringify(loadRequest))) ||
!requestRef.current)) {
requestRef.current = {
config: request,
completed: false,
};
getServerData(request)
.then(() => {
if (requestRef.current) {
requestRef.current.completed = true;
}
})
.catch((e) => {
if (requestRef.current && !http_1.isAxiosCancel(e)) {
requestRef.current.completed = true;
}
});
}
}, [
getServerData,
loadRequest,
loadRequestOptions.transformRequest,
loadRequestOptions.transformResponse,
]);
return (jsx_runtime_1.jsxs(form_builder_1.FormBuilder, Object.assign({}, rest, { ref: formRef, fields: fields, onSubmit: handleSubmit, formMethods: formMethods, model: model }, { children: [children, (loading || loadLoading) && loadingIndicator, submitButton && (jsx_runtime_1.jsx(grommet_1.Button, { type: "submit", primary: true, icon: (loading || loadLoading) && !loadingIndicator ? (jsx_runtime_1.jsx(grommet_1.Spinner, {}, void 0)) : undefined, label: jsx_runtime_1.jsx(grommet_1.Box, { children: typeof submitButton === "boolean"
? T("form-submit-label")
: submitButton }, void 0) }, void 0))] }), void 0));
});
exports.HttpForm = HttpForm;
HttpForm.displayName = "HttpForm";
HttpForm.defaultProps = {
submitButton: true,
resetButton: false,
};