styled-hook-form
Version:
React form library for styled-components based on grommet and react-hook-form
93 lines (92 loc) • 4.32 kB
JavaScript
;
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.renderField = exports.renderChildren = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const types_1 = require("../types");
const editor_map_1 = require("../editor-map");
const react_1 = __importDefault(require("react"));
const editor_wrap_1 = __importDefault(require("../editors/shared/editor-wrap"));
const renderChildren = (children, methods) => (typeof children === "function" ? children(methods) : children);
exports.renderChildren = renderChildren;
const getValidateFuncWithMethods = (validateFunc, values, methods) => {
let result = validateFunc(values, methods);
if (result instanceof Promise) {
return new Promise((res, rej) => __awaiter(void 0, void 0, void 0, function* () {
result.then((v) => res(v)).catch((e) => rej(e));
}));
}
else {
return result;
}
};
const hiddenFieldTypes = [types_1.FormFieldType.Hidden];
const isHidden = (field) => {
return hiddenFieldTypes.includes(field.type);
};
const renderField = (field, methods, editorWrapComponent, shouldUnregister) => {
var _a, _b, _c;
field.methods = methods;
if (field.renderLabel === undefined) {
field.renderLabel = true;
}
let component = react_1.default.createElement(editor_map_1.EditorMap[field.type], Object.assign(Object.assign({}, field), { shouldUnregister: (_a = field.shouldUnregister) !== null && _a !== void 0 ? _a : shouldUnregister, key: field.name }));
if (field.validationRules && field.validationRules.validate) {
if (typeof field.validationRules.validate === "function") {
let userDefFunc = field.validationRules
.validate;
field.validationRules.validate = (values) => {
return getValidateFuncWithMethods(userDefFunc, values, methods);
};
}
else {
let rules = field.validationRules.validate;
field.validationRules.validate = Object.keys(field.validationRules.validate)
.map((k) => [
k,
(values) => getValidateFuncWithMethods(rules[k], values, methods),
])
.reduce((p, c) => {
p[c[0]] = c[1];
return p;
}, {});
}
}
const wrapWithComponent = (component) => (p1, p2) => {
let children, props;
if (!p2 && p1) {
props = p1;
children = null;
}
if (p2) {
props = p2;
children = p1;
}
if (!children && !props) {
return component;
}
let clone = react_1.default.cloneElement(component, props !== null && props !== void 0 ? props : {}, children);
return clone;
};
const editorBody = field.render !== undefined
? field.render(wrapWithComponent(component), methods)
: component;
const EditorView = isHidden(field)
? editorBody
: react_1.default.cloneElement(
// eslint-disable-next-line react/jsx-no-useless-fragment
(_c = (_b = field.wrapComponent) !== null && _b !== void 0 ? _b : editorWrapComponent) !== null && _c !== void 0 ? _c : jsx_runtime_1.jsx(react_1.default.Fragment, {}, void 0), {}, jsx_runtime_1.jsx(editor_wrap_1.default, Object.assign({}, field, { editorType: field.type }, { children: editorBody }), field.name));
return EditorView;
};
exports.renderField = renderField;