react-hook-form-jsonschema
Advanced tools
Comparing version 0.1.2 to 0.1.3
@@ -10,2 +10,15 @@ # Changelog | ||
## [0.1.3] - 2020-01-21 | ||
### Added | ||
- Added test to make sure schema is not modified | ||
### Changed | ||
- Fixed tons of typos on README | ||
- Made README more friendly | ||
- Refactored internal API to be more easily expandable | ||
- Removed complexity from big function bodies | ||
## [0.1.2] - 2020-01-21 | ||
@@ -12,0 +25,0 @@ |
@@ -1,2 +0,3 @@ | ||
import { FormContextValues, FieldValues, Mode, OnSubmit } from 'react-hook-form'; | ||
import React from 'react'; | ||
import { FormContextValues, Mode } from 'react-hook-form'; | ||
import { JSONSchemaType } from '../../JSONSchema'; | ||
@@ -6,2 +7,3 @@ export interface FormValuesWithSchema<T> extends FormContextValues<T> { | ||
} | ||
export declare type OnSubmitType = (data: JSONSchemaType, event: React.BaseSyntheticEvent) => void | Promise<void>; | ||
export declare type FormContextProps = { | ||
@@ -11,5 +13,5 @@ mode?: Mode; | ||
submitFocusError?: boolean; | ||
onSubmit?: OnSubmit<FieldValues>; | ||
onSubmit?: OnSubmitType; | ||
noNativeValidate?: boolean; | ||
schema: JSONSchemaType; | ||
}; |
@@ -1,1 +0,1 @@ | ||
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,n=require("react-hook-form");const s=t.createContext(null);function i(){return t.useContext(s)}var a,p;(a=exports.InputTypes||(exports.InputTypes={})).generic="__input_type_generic__",a.radio="__input_type_radio__",a.select="__input_type_select__",a.input="__input_type_input__",a.textArea="__input_type_textArea__",(p=exports.UITypes||(exports.UITypes={})).default="__input_type_default__",p.radio="__input_type_radio__",p.select="__input_type_select__",p.input="__input_type_input__",p.hidden="__input_type_hidden__",p.password="__input_type_password__",p.textArea="__input_type_textArea__";const o=(e,t)=>e+"/"+t,u=e=>{const t=e.split("/");return"#"===t[0]&&t.shift(),""===t[t.length-1]&&t.pop(),t},m=e=>{const t=u(e);let r=i().schema,n=!1,s="";for(let e=0;e<t.length;e++){if(!r||!r.type||"object"!==r.type){r={};break}n=!!(r.required&&r.required.indexOf(t[e])>-1),s=t[e],r=r.properties[t[e]]}return[r,n,s]};var c;!function(e){e.required="__form_error_required__",e.maxLength="__form_error_maxLenght__",e.minLength="__form_error_minLenght__",e.maxValue="__form_error_maxValue__",e.minValue="__form_error_minValue__",e.pattern="__form_error_pattern__",e.multipleOf="__form_error_multipleOf",e.undefinedError="__form_error_undefinedError__"}(c||(c={}));const l=e=>{const t={};return e&&(t.required=c.required),t},d=(e,t)=>{const r=Math.pow(10,t||0);return String(Math.round(e*r)/r)},_=e=>{const t=void 0!==e.multipleOf?"integer"===e.type?parseInt(e.multipleOf):parseFloat(e.multipleOf):"integer"===e.type?1:"any";let r=void 0;if(e.multipleOf){const t=e.multipleOf.toString().split(".")[1];r=t?t.length:0}return[t,r]},g=e=>{const[t]=_(e);let r=void 0!==e.exlusiveMinimum?e.exlusiveMinimum:void 0!==e.minimum?e.minimum:void 0;return void 0!==r&&void 0!==e.exlusiveMinimum&&(r+=t&&"any"!=t?t:1e-4),r},h=e=>{const[t]=_(e);let r=void 0!==e.exlusiveMaximum?parseFloat(e.exlusiveMaximum):void 0!==e.maximum?parseFloat(e.maximum):void 0;return void 0!==r&&void 0!==e.exlusiveMaximum&&(r-=t&&"any"!=t?t:1e-4),r},x=(e,t)=>{const r=g(e),n=h(e),s={validate:{multipleOf:t=>"integer"!==e.type||e.multipleOf&&(parseInt(t)%parseInt(e.multipleOf)==0||c.multipleOf)}};return t&&(s.required=c.required),"integer"===e.type?s.pattern={value:/^([+-]?[1-9]\d*|0)$/,message:c.pattern}:s.pattern={value:/^([0-9]+([,.][0-9]+))?$/,message:c.pattern},(r||0===r)&&(s.min={value:r,message:c.minValue}),(n||0===n)&&(s.max={value:n,message:c.maxValue}),s},y=(e,t)=>{const r={};return t&&(r.required=c.required),e.minLength&&(r.minLength={value:e.minLength,message:c.minLength}),e.maxLength&&(r.maxLength={value:e.maxLength,message:c.maxLength}),e.pattern&&(r.pattern={value:new RegExp(e.pattern),message:c.pattern}),r},f=(e,t,r)=>{const[n,s,i]=t;let a,p,o;if("number"===n.type||"integer"===n.type){const e=_(n);o=e[0],a=g(n),p=h(n)}return{name:i,path:r,isRequired:s,formContext:e,type:exports.InputTypes.generic,getError:()=>((e,t,r,n,s,i)=>{if(e){const a={message:c.undefinedError,expected:void 0};switch(e.message){case c.required:a.message=c.required,a.expected=r;break;case c.maxLength:a.message=c.maxLength,a.expected=t.maxLength;break;case c.minLength:a.message=c.minLength,a.expected=t.minLength;break;case c.maxValue:a.message=c.maxValue,a.expected=n;break;case c.minValue:a.message=c.minValue,a.expected=s;break;case c.multipleOf:a.message=c.multipleOf,a.expected=i;break;case c.pattern:a.message=c.pattern,a.expected=t.pattern}return a}})(e.errors[r]?e.errors[r]:void 0,n,s,a,p,o),getObject:()=>n}},b=e=>{const t=i(),r=m(e);return f(t,r,e)},v=(e,t)=>e+"-"+t+"-input",O=(e,t)=>{const{register:r}=e.formContext,n=e.getObject();let s,i,a,p,o={};const u={key:""};if("string"===n.type)o=y(n,e.isRequired),u.pattern=n.pattern,u.minLength=n.minLength,u.maxLength=n.maxLength;else if("number"===n.type||"integer"===n.type){const t=_(n);a=t[0],p=t[1],s=g(n),i=h(n),o=x(n,e.isRequired),u.min=s,u.max=i,u.step="any"===a?"any":d(a,p||0)}return Object.assign(Object.assign({},e),{type:exports.InputTypes.input,getLabelProps:()=>{const r={};return r.id=((e,t)=>e+"-"+t+"-label")(e.path,t),r.htmlFor=v(e.path,t),r},getInputProps:()=>(u.name=e.path,u.ref=r(o),u.type=t,u.required=e.isRequired,u.id=v(e.path,t),u)})},q=()=>({}),L=e=>{e.isRequired=!1;const t=O(e,"hidden");return t.getLabelProps=q,t},I=e=>{let t;switch(e.getObject().format){case"date-time":t="datetime-local";break;case"email":t="email";break;case"hostname":case"uri":t="url";break;default:t="text"}return O(e,t)},j=(e,t,r)=>e+"-radio-input-"+(r[t]?r[t]:""),k=e=>{const t=e.getObject();let r,n,s,i,a={},p=[];if("string"===t.type)p=t.enum?t.enum:[],a=y(t,e.isRequired);else if("number"===t.type||"integer"===t.type){const o=_(t);if(s=o[0],i=o[1],r=g(t),n=h(t),void 0!==r&&void 0!==n&&"any"!=s){a=x(t,e.isRequired);for(let e=r;e<n;e+=s)p.push(d(e,i||0))}}else"boolean"===t.type&&(a=l(e.isRequired),p=["true","false"]);return Object.assign(Object.assign({},e),{type:exports.InputTypes.radio,getLabelProps:()=>{const r={};return r.id=e.path+"-label",r.htmlFor=void 0!==t.title?t.title:e.path,r},getItemInputProps:t=>{const r={key:""};return r.name=e.path,r.ref=e.formContext.register(a),r.type="radio",r.required=e.isRequired,r.id=j(e.path,t,p),r.value=p[t],r},getItemLabelProps:t=>{const r={};return r.id=((e,t,r)=>e+"-radio-label-"+(r[t]?r[t]:""))(e.path,t,p),r.htmlFor=j(e.path,t,p),r},getItems:()=>p})},R=e=>e+"-select",T=e=>{const t=e.getObject();let r,n,s,i,a={},p=[""];if("string"===t.type)p=p.concat(t.enum?t.enum:[]),a=y(t,e.isRequired);else if("number"===t.type||"integer"===t.type){const o=_(t);if(s=o[0],i=o[1],r=g(t),n=h(t),void 0!==r&&void 0!==n&&"any"!=s){a=x(t,e.isRequired);for(let e=r;e<n;e+=s)p.push(d(e,i||0))}}else"boolean"===t.type&&(a=l(e.isRequired),p=["true","false"]);return Object.assign(Object.assign({},e),{type:exports.InputTypes.select,getLabelProps:()=>{const t={};return t.id=e.path+"-label",t.htmlFor=R(e.path),t},getSelectProps:()=>{const t={};return t.name=e.path,t.ref=e.formContext.register(a),t.required=e.isRequired,t.id=R(e.path),t},getItemOptionProps:t=>{const r={};return r.id=((e,t,r)=>e+"-select-option-"+(r[t]?r[t]:""))(e.path,t,p),r.value=p[t],r},getItems:()=>p})},F=e=>O(e,"password"),P=e=>e+"-textarea-input",V=e=>{const t=e.getObject();let r={};const n={};return"string"===t.type?(r=y(t,e.isRequired),n.minLength=t.minLength,n.maxLength=t.maxLength):"number"!==t.type&&"integer"!==t.type||(r=x(t,e.isRequired)),Object.assign(Object.assign({},e),{type:exports.InputTypes.textArea,getLabelProps:()=>{const t={};return t.id=e.path+"-textarea-label",t.htmlFor=P(e.path),t},getTextAreaProps:()=>(n.name=e.path,n.ref=e.formContext.register(r),n.required=e.isRequired,n.id=P(e.path),n)})};function w(e){const t=e.getObject(),r=[];switch(t.type){case"string":t.enum?r.push(T(e)):r.push(I(e));break;case"integer":case"number":r.push(I(e));break;case"boolean":r.push(k(e))}return r}exports.FormContext=e=>{const{mode:t="onSubmit",revalidateMode:i="onChange",submitFocusError:a=!0}=e,p=n.useForm({mode:t,reValidateMode:i,submitFocusError:a}),o={};return e.onSubmit&&(o.onSubmit=p.handleSubmit(e.onSubmit)),e.noNativeValidate&&(o.noValidate=e.noNativeValidate),r.createElement(s.Provider,{value:Object.assign(Object.assign({},p),{schema:e.schema})},r.createElement("form",Object.assign({},o),e.children))},exports.concatFormPath=o,exports.useGenericInput=b,exports.useHidden=e=>L(b(e)),exports.useInput=e=>I(b(e)),exports.useObject=e=>function e(t,r,n,s){let i=[];const a=r[0],p=f(t,r,n);if("object"===a.type){const r=Object.keys(a.properties),p=a.required;for(const u of r){const r=!!p&&-1!==p.indexOf(u),m=[a.properties[u],r,u],c=o(n,u);let l=void 0;s&&s.properties&&(l=s.properties[u]),i=i.concat(e(t,m,c,l))}return i}if(!s)return i.concat(w(p));switch(s.type){case exports.UITypes.default:i=i.concat(w(p));break;case exports.UITypes.hidden:i.push(L(p));break;case exports.UITypes.input:i.push(I(p));break;case exports.UITypes.password:i.push(F(p));break;case exports.UITypes.radio:i.push(k(p));break;case exports.UITypes.select:i.push(T(p));break;case exports.UITypes.textArea:i.push(V(p))}return i}(i(),m(e.path),e.path,e.UISchema),exports.useObjectFromForm=e=>{const t=i().schema,r=Object.keys(e).sort(),n={};for(const s of r){const r=u(s);let i=n,a=t;if(r)for(let t=0;t<r.length&&void 0!==a;t++)a.type&&"object"===a.type?a=a.properties:!a.type&&a[r[t]]&&"object"===a[r[t]].type&&(a=a[r[t]]),t===r.length-1&&(a[r[t]]&&a[r[t]].type&&"integer"===a[r[t]].type?i[r[t]]=parseInt(e[s]):a[r[t]]&&a[r[t]].type&&"number"===a[r[t]].type?i[r[t]]=parseFloat(e[s]):i[r[t]]=e[s]),void 0===i[r[t]]&&(i[r[t]]={}),i=i[r[t]]}return n},exports.useObjectFromPath=m,exports.usePassword=e=>F(b(e)),exports.useRadio=e=>k(b(e)),exports.useSelect=e=>T(b(e)),exports.useTextArea=e=>V(b(e)); | ||
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,n=require("react-hook-form");const s=e=>{const t=e.split("/");return"#"===t[0]&&t.shift(),""===t[t.length-1]&&t.pop(),t},i=(e,t)=>{const r=Object.keys(t).sort(),n={};for(const i of r){const r=s(i);if(!r)continue;let a=n,p=e;for(let e=0;e<r.length&&void 0!==p;e++)p.type&&"object"===p.type?p=p.properties:!p.type&&p[r[e]]&&"object"===p[r[e]].type&&(p=p[r[e]]),e===r.length-1&&(p[r[e]]&&p[r[e]].type&&"integer"===p[r[e]].type?a[r[e]]=parseInt(t[i]):p[r[e]]&&p[r[e]].type&&"number"===p[r[e]].type?a[r[e]]=parseFloat(t[i]):a[r[e]]=t[i]),void 0===a[r[e]]&&(a[r[e]]={}),a=a[r[e]]}return n},a=t.createContext(null);function p(){return t.useContext(a)}var o,u;(o=exports.InputTypes||(exports.InputTypes={})).generic="__input_type_generic__",o.radio="__input_type_radio__",o.select="__input_type_select__",o.input="__input_type_input__",o.textArea="__input_type_textArea__",(u=exports.UITypes||(exports.UITypes={})).default="__input_type_default__",u.radio="__input_type_radio__",u.select="__input_type_select__",u.input="__input_type_input__",u.hidden="__input_type_hidden__",u.password="__input_type_password__",u.textArea="__input_type_textArea__";const m=(e,t)=>e+"/"+t,c=e=>{const t=s(e);let r=p().schema,n=!1,i="";for(let e=0;e<t.length;e++){if(!r||!r.type||"object"!==r.type){r={};break}n=!!(r.required&&r.required.indexOf(t[e])>-1),i=t[e],r=r.properties[t[e]]}return{JSONSchema:r,isRequired:n,objectName:i}};var l;!function(e){e.required="__form_error_required__",e.maxLength="__form_error_maxLenght__",e.minLength="__form_error_minLenght__",e.maxValue="__form_error_maxValue__",e.minValue="__form_error_minValue__",e.pattern="__form_error_pattern__",e.multipleOf="__form_error_multipleOf",e.undefinedError="__form_error_undefinedError__"}(l||(l={}));const d=e=>{const t={};return e&&(t.required=l.required),t},_=(e,t)=>{const r=Math.pow(10,t||0);return String(Math.round(e*r)/r)},g=e=>{const t=void 0!==e.multipleOf?"integer"===e.type?parseInt(e.multipleOf):parseFloat(e.multipleOf):"integer"===e.type?1:"any";let r=void 0;if(e.multipleOf){const t=e.multipleOf.toString().split(".")[1];r=t?t.length:0}return[t,r]},h=e=>{const[t]=g(e);let r=void 0!==e.exclusiveMinimum?e.exclusiveMinimum:void 0!==e.minimum?e.minimum:void 0;return void 0!==r&&void 0!==e.exclusiveMinimum&&(r+=t&&"any"!=t?t:1e-4),r},x=e=>{const[t]=g(e);let r=void 0!==e.exclusiveMaximum?parseFloat(e.exclusiveMaximum):void 0!==e.maximum?parseFloat(e.maximum):void 0;return void 0!==r&&void 0!==e.exclusiveMaximum&&(r-=t&&"any"!=t?t:1e-4),r},y=(e,t)=>{const r=h(e),n=x(e),s={validate:{multipleOf:t=>"integer"!==e.type||e.multipleOf&&(parseInt(t)%parseInt(e.multipleOf)==0||l.multipleOf)}};return t&&(s.required=l.required),"integer"===e.type?s.pattern={value:/^([+-]?[1-9]\d*|0)$/,message:l.pattern}:s.pattern={value:/^([0-9]+([,.][0-9]+))?$/,message:l.pattern},(r||0===r)&&(s.min={value:r,message:l.minValue}),(n||0===n)&&(s.max={value:n,message:l.maxValue}),s},b=(e,t)=>{const r={};return t&&(r.required=l.required),e.minLength&&(r.minLength={value:e.minLength,message:l.minLength}),e.maxLength&&(r.maxLength={value:e.maxLength,message:l.maxLength}),e.pattern&&(r.pattern={value:new RegExp(e.pattern),message:l.pattern}),r},f=(e,t,r)=>{const{JSONSchema:n,isRequired:s,objectName:i}=t;let a,p,o;if("number"===n.type||"integer"===n.type){const e=g(n);o=e[0],a=h(n),p=x(n)}return{name:i,path:r,isRequired:s,formContext:e,type:exports.InputTypes.generic,getError:()=>((e,t,r,n,s,i)=>{if(!e)return;const a={message:l.undefinedError,expected:void 0};switch(e.message){case l.required:a.message=l.required,a.expected=r;break;case l.maxLength:a.message=l.maxLength,a.expected=t.maxLength;break;case l.minLength:a.message=l.minLength,a.expected=t.minLength;break;case l.maxValue:a.message=l.maxValue,a.expected=n;break;case l.minValue:a.message=l.minValue,a.expected=s;break;case l.multipleOf:a.message=l.multipleOf,a.expected=i;break;case l.pattern:a.message=l.pattern,a.expected=t.pattern}return a})(e.errors[r]?e.errors[r]:void 0,n,s,a,p,o),getObject:()=>n}},v=e=>{const t=p(),r=c(e);return f(t,r,e)},O=(e,t)=>e+"-"+t+"-input",q=(e,t)=>{const{register:r}=e.formContext,n=e.getObject();let s,i,a,p,o={};const u={key:""};if("string"===n.type)o=b(n,e.isRequired),u.pattern=n.pattern,u.minLength=n.minLength,u.maxLength=n.maxLength;else if("number"===n.type||"integer"===n.type){const t=g(n);a=t[0],p=t[1],s=h(n),i=x(n),o=y(n,e.isRequired),u.min=s,u.max=i,u.step="any"===a?"any":_(a,p||0)}return Object.assign(Object.assign({},e),{type:exports.InputTypes.input,getLabelProps:()=>{const r={};return r.id=((e,t)=>e+"-"+t+"-label")(e.path,t),r.htmlFor=O(e.path,t),r},getInputProps:()=>(u.name=e.path,u.ref=r(o),u.type=t,u.required=e.isRequired,u.id=O(e.path,t),u)})},j=()=>({}),L=e=>Object.assign(Object.assign({},q(e,"hidden")),{isRequired:!1,getLabelProps:j}),I=e=>{let t;switch(e.getObject().format){case"date-time":t="datetime-local";break;case"email":t="email";break;case"hostname":case"uri":t="url";break;default:t="text"}return q(e,t)},k=(e,t,r)=>e+"-radio-input-"+(r[t]?r[t]:""),R=e=>{const t=e.getObject();let r,n,s,i,a={},p=[];if("string"===t.type)p=t.enum?t.enum:[],a=b(t,e.isRequired);else if("number"===t.type||"integer"===t.type){const o=g(t);if(s=o[0],i=o[1],r=h(t),n=x(t),void 0!==r&&void 0!==n&&"any"!=s){a=y(t,e.isRequired);for(let e=r;e<=n;e+=s)p.push(_(e,i||0))}}else"boolean"===t.type&&(a=d(e.isRequired),p=["true","false"]);return Object.assign(Object.assign({},e),{type:exports.InputTypes.radio,getLabelProps:()=>{const r={};return r.id=e.path+"-label",r.htmlFor=void 0!==t.title?t.title:e.path,r},getItemInputProps:t=>{const r={key:""};return r.name=e.path,r.ref=e.formContext.register(a),r.type="radio",r.required=e.isRequired,r.id=k(e.path,t,p),r.value=p[t],r},getItemLabelProps:t=>{const r={};return r.id=((e,t,r)=>e+"-radio-label-"+(r[t]?r[t]:""))(e.path,t,p),r.htmlFor=k(e.path,t,p),r},getItems:()=>p})},S=e=>e+"-select",T=e=>{const t=e.getObject();let r,n,s,i,a={},p=[""];if("string"===t.type)p=p.concat(t.enum?t.enum:[]),a=b(t,e.isRequired);else if("number"===t.type||"integer"===t.type){const o=g(t);if(s=o[0],i=o[1],r=h(t),n=x(t),void 0!==r&&void 0!==n&&"any"!=s){a=y(t,e.isRequired);for(let e=r;e<=n;e+=s)p.push(_(e,i||0))}}else"boolean"===t.type&&(a=d(e.isRequired),p=["true","false"]);return Object.assign(Object.assign({},e),{type:exports.InputTypes.select,getLabelProps:()=>{const t={};return t.id=e.path+"-label",t.htmlFor=S(e.path),t},getSelectProps:()=>{const t={};return t.name=e.path,t.ref=e.formContext.register(a),t.required=e.isRequired,t.id=S(e.path),t},getItemOptionProps:t=>{const r={};return r.id=((e,t,r)=>e+"-select-option-"+(r[t]?r[t]:""))(e.path,t,p),r.value=p[t],r},getItems:()=>p})},F=e=>q(e,"password"),P=e=>e+"-textarea-input",V=e=>{const t=e.getObject();let r={};const n={};return"string"===t.type?(r=b(t,e.isRequired),n.minLength=t.minLength,n.maxLength=t.maxLength):"number"!==t.type&&"integer"!==t.type||(r=y(t,e.isRequired)),Object.assign(Object.assign({},e),{type:exports.InputTypes.textArea,getLabelProps:()=>{const t={};return t.id=e.path+"-textarea-label",t.htmlFor=P(e.path),t},getTextAreaProps:()=>(n.name=e.path,n.ref=e.formContext.register(r),n.required=e.isRequired,n.id=P(e.path),n)})};function w(e){const t=e.getObject(),r=[];switch(t.type){case"string":t.enum?r.push(T(e)):r.push(I(e));break;case"integer":case"number":r.push(I(e));break;case"boolean":r.push(R(e))}return r}function M(e,t,r,n){let s=[];const{JSONSchema:i}=t,a=f(e,t,r);if("object"===i.type){return Object.keys(i.properties).reduce(function(e,t,r,n){const s=t.required;return(i,a)=>{const p=!!s&&-1!==s.indexOf(a),o=r&&r.properties?r.properties[a]:void 0,u=m(e,a),c={JSONSchema:t.properties[a],isRequired:p,objectName:a},l=M(n,c,u,o);return i.concat(l)}}(r,i,n,e),[])}if(!n)return s.concat(w(a));switch(n.type){case exports.UITypes.default:s=s.concat(w(a));break;case exports.UITypes.hidden:s.push(L(a));break;case exports.UITypes.input:s.push(I(a));break;case exports.UITypes.password:s.push(F(a));break;case exports.UITypes.radio:s.push(R(a));break;case exports.UITypes.select:s.push(T(a));break;case exports.UITypes.textArea:s.push(V(a))}return s}exports.FormContext=e=>{const{mode:t="onSubmit",revalidateMode:s="onChange",submitFocusError:p=!0}=e,o=n.useForm({mode:t,reValidateMode:s,submitFocusError:p}),u={};return u.onSubmit=o.handleSubmit((t,r)=>{e.onSubmit&&e.onSubmit(i(e.schema,t),r)}),e.noNativeValidate&&(u.noValidate=e.noNativeValidate),r.createElement(a.Provider,{value:Object.assign(Object.assign({},o),{schema:e.schema})},r.createElement("form",Object.assign({},u),e.children))},exports.concatFormPath=m,exports.useGenericInput=v,exports.useHidden=e=>L(v(e)),exports.useInput=e=>I(v(e)),exports.useObject=e=>M(p(),c(e.path),e.path,e.UISchema),exports.useObjectFromForm=e=>i(p().schema,e),exports.useObjectFromPath=c,exports.usePassword=e=>F(v(e)),exports.useRadio=e=>R(v(e)),exports.useSelect=e=>T(v(e)),exports.useTextArea=e=>V(v(e)); |
@@ -1,1 +0,1 @@ | ||
import e,{createContext as t,useContext as r}from"react";import{useForm as n}from"react-hook-form";const i=t(null);function a(){return r(i)}const s=t=>{const{mode:r="onSubmit",revalidateMode:a="onChange",submitFocusError:s=!0}=t,o=n({mode:r,reValidateMode:a,submitFocusError:s}),p={};return t.onSubmit&&(p.onSubmit=o.handleSubmit(t.onSubmit)),t.noNativeValidate&&(p.noValidate=t.noNativeValidate),e.createElement(i.Provider,{value:Object.assign(Object.assign({},o),{schema:t.schema})},e.createElement("form",Object.assign({},p),t.children))};var o,p;!function(e){e.generic="__input_type_generic__",e.radio="__input_type_radio__",e.select="__input_type_select__",e.input="__input_type_input__",e.textArea="__input_type_textArea__"}(o||(o={})),function(e){e.default="__input_type_default__",e.radio="__input_type_radio__",e.select="__input_type_select__",e.input="__input_type_input__",e.hidden="__input_type_hidden__",e.password="__input_type_password__",e.textArea="__input_type_textArea__"}(p||(p={}));const u=(e,t)=>e+"/"+t,m=e=>{const t=e.split("/");return"#"===t[0]&&t.shift(),""===t[t.length-1]&&t.pop(),t},c=e=>{const t=m(e);let r=a().schema,n=!1,i="";for(let e=0;e<t.length;e++){if(!r||!r.type||"object"!==r.type){r={};break}n=!!(r.required&&r.required.indexOf(t[e])>-1),i=t[e],r=r.properties[t[e]]}return[r,n,i]},l=e=>{const t=a().schema,r=Object.keys(e).sort(),n={};for(const i of r){const r=m(i);let a=n,s=t;if(r)for(let t=0;t<r.length&&void 0!==s;t++)s.type&&"object"===s.type?s=s.properties:!s.type&&s[r[t]]&&"object"===s[r[t]].type&&(s=s[r[t]]),t===r.length-1&&(s[r[t]]&&s[r[t]].type&&"integer"===s[r[t]].type?a[r[t]]=parseInt(e[i]):s[r[t]]&&s[r[t]].type&&"number"===s[r[t]].type?a[r[t]]=parseFloat(e[i]):a[r[t]]=e[i]),void 0===a[r[t]]&&(a[r[t]]={}),a=a[r[t]]}return n};var d;!function(e){e.required="__form_error_required__",e.maxLength="__form_error_maxLenght__",e.minLength="__form_error_minLenght__",e.maxValue="__form_error_maxValue__",e.minValue="__form_error_minValue__",e.pattern="__form_error_pattern__",e.multipleOf="__form_error_multipleOf",e.undefinedError="__form_error_undefinedError__"}(d||(d={}));const _=e=>{const t={};return e&&(t.required=d.required),t},g=(e,t)=>{const r=Math.pow(10,t||0);return String(Math.round(e*r)/r)},h=e=>{const t=void 0!==e.multipleOf?"integer"===e.type?parseInt(e.multipleOf):parseFloat(e.multipleOf):"integer"===e.type?1:"any";let r=void 0;if(e.multipleOf){const t=e.multipleOf.toString().split(".")[1];r=t?t.length:0}return[t,r]},f=e=>{const[t]=h(e);let r=void 0!==e.exlusiveMinimum?e.exlusiveMinimum:void 0!==e.minimum?e.minimum:void 0;return void 0!==r&&void 0!==e.exlusiveMinimum&&(r+=t&&"any"!=t?t:1e-4),r},b=e=>{const[t]=h(e);let r=void 0!==e.exlusiveMaximum?parseFloat(e.exlusiveMaximum):void 0!==e.maximum?parseFloat(e.maximum):void 0;return void 0!==r&&void 0!==e.exlusiveMaximum&&(r-=t&&"any"!=t?t:1e-4),r},y=(e,t)=>{const r=f(e),n=b(e),i={validate:{multipleOf:t=>"integer"!==e.type||e.multipleOf&&(parseInt(t)%parseInt(e.multipleOf)==0||d.multipleOf)}};return t&&(i.required=d.required),"integer"===e.type?i.pattern={value:/^([+-]?[1-9]\d*|0)$/,message:d.pattern}:i.pattern={value:/^([0-9]+([,.][0-9]+))?$/,message:d.pattern},(r||0===r)&&(i.min={value:r,message:d.minValue}),(n||0===n)&&(i.max={value:n,message:d.maxValue}),i},x=(e,t)=>{const r={};return t&&(r.required=d.required),e.minLength&&(r.minLength={value:e.minLength,message:d.minLength}),e.maxLength&&(r.maxLength={value:e.maxLength,message:d.maxLength}),e.pattern&&(r.pattern={value:new RegExp(e.pattern),message:d.pattern}),r},v=(e,t,r)=>{const[n,i,a]=t;let s,p,u;if("number"===n.type||"integer"===n.type){const e=h(n);u=e[0],s=f(n),p=b(n)}return{name:a,path:r,isRequired:i,formContext:e,type:o.generic,getError:()=>((e,t,r,n,i,a)=>{if(e){const s={message:d.undefinedError,expected:void 0};switch(e.message){case d.required:s.message=d.required,s.expected=r;break;case d.maxLength:s.message=d.maxLength,s.expected=t.maxLength;break;case d.minLength:s.message=d.minLength,s.expected=t.minLength;break;case d.maxValue:s.message=d.maxValue,s.expected=n;break;case d.minValue:s.message=d.minValue,s.expected=i;break;case d.multipleOf:s.message=d.multipleOf,s.expected=a;break;case d.pattern:s.message=d.pattern,s.expected=t.pattern}return s}})(e.errors[r]?e.errors[r]:void 0,n,i,s,p,u),getObject:()=>n}},O=e=>{const t=a(),r=c(e);return v(t,r,e)},q=(e,t)=>e+"-"+t+"-input",L=(e,t)=>{const{register:r}=e.formContext,n=e.getObject();let i,a,s,p,u={};const m={key:""};if("string"===n.type)u=x(n,e.isRequired),m.pattern=n.pattern,m.minLength=n.minLength,m.maxLength=n.maxLength;else if("number"===n.type||"integer"===n.type){const t=h(n);s=t[0],p=t[1],i=f(n),a=b(n),u=y(n,e.isRequired),m.min=i,m.max=a,m.step="any"===s?"any":g(s,p||0)}return Object.assign(Object.assign({},e),{type:o.input,getLabelProps:()=>{const r={};return r.id=((e,t)=>e+"-"+t+"-label")(e.path,t),r.htmlFor=q(e.path,t),r},getInputProps:()=>(m.name=e.path,m.ref=r(u),m.type=t,m.required=e.isRequired,m.id=q(e.path,t),m)})},j=()=>({}),k=e=>{e.isRequired=!1;const t=L(e,"hidden");return t.getLabelProps=j,t},R=e=>k(O(e)),V=e=>{let t;switch(e.getObject().format){case"date-time":t="datetime-local";break;case"email":t="email";break;case"hostname":case"uri":t="url";break;default:t="text"}return L(e,t)},I=e=>V(O(e)),P=(e,t,r)=>e+"-radio-input-"+(r[t]?r[t]:""),F=e=>{const t=e.getObject();let r,n,i,a,s={},p=[];if("string"===t.type)p=t.enum?t.enum:[],s=x(t,e.isRequired);else if("number"===t.type||"integer"===t.type){const o=h(t);if(i=o[0],a=o[1],r=f(t),n=b(t),void 0!==r&&void 0!==n&&"any"!=i){s=y(t,e.isRequired);for(let e=r;e<n;e+=i)p.push(g(e,a||0))}}else"boolean"===t.type&&(s=_(e.isRequired),p=["true","false"]);return Object.assign(Object.assign({},e),{type:o.radio,getLabelProps:()=>{const r={};return r.id=e.path+"-label",r.htmlFor=void 0!==t.title?t.title:e.path,r},getItemInputProps:t=>{const r={key:""};return r.name=e.path,r.ref=e.formContext.register(s),r.type="radio",r.required=e.isRequired,r.id=P(e.path,t,p),r.value=p[t],r},getItemLabelProps:t=>{const r={};return r.id=((e,t,r)=>e+"-radio-label-"+(r[t]?r[t]:""))(e.path,t,p),r.htmlFor=P(e.path,t,p),r},getItems:()=>p})},w=e=>F(O(e)),M=e=>e+"-select",E=e=>{const t=e.getObject();let r,n,i,a,s={},p=[""];if("string"===t.type)p=p.concat(t.enum?t.enum:[]),s=x(t,e.isRequired);else if("number"===t.type||"integer"===t.type){const o=h(t);if(i=o[0],a=o[1],r=f(t),n=b(t),void 0!==r&&void 0!==n&&"any"!=i){s=y(t,e.isRequired);for(let e=r;e<n;e+=i)p.push(g(e,a||0))}}else"boolean"===t.type&&(s=_(e.isRequired),p=["true","false"]);return Object.assign(Object.assign({},e),{type:o.select,getLabelProps:()=>{const t={};return t.id=e.path+"-label",t.htmlFor=M(e.path),t},getSelectProps:()=>{const t={};return t.name=e.path,t.ref=e.formContext.register(s),t.required=e.isRequired,t.id=M(e.path),t},getItemOptionProps:t=>{const r={};return r.id=((e,t,r)=>e+"-select-option-"+(r[t]?r[t]:""))(e.path,t,p),r.value=p[t],r},getItems:()=>p})},S=e=>E(O(e)),A=e=>L(e,"password"),C=e=>A(O(e)),N=e=>e+"-textarea-input",$=e=>{const t=e.getObject();let r={};const n={};return"string"===t.type?(r=x(t,e.isRequired),n.minLength=t.minLength,n.maxLength=t.maxLength):"number"!==t.type&&"integer"!==t.type||(r=y(t,e.isRequired)),Object.assign(Object.assign({},e),{type:o.textArea,getLabelProps:()=>{const t={};return t.id=e.path+"-textarea-label",t.htmlFor=N(e.path),t},getTextAreaProps:()=>(n.name=e.path,n.ref=e.formContext.register(r),n.required=e.isRequired,n.id=N(e.path),n)})},T=e=>$(O(e));function U(e){const t=e.getObject(),r=[];switch(t.type){case"string":t.enum?r.push(E(e)):r.push(V(e));break;case"integer":case"number":r.push(V(e));break;case"boolean":r.push(F(e))}return r}const z=e=>function e(t,r,n,i){let a=[];const s=r[0],o=v(t,r,n);if("object"===s.type){const r=Object.keys(s.properties),o=s.required;for(const p of r){const r=!!o&&-1!==o.indexOf(p),m=[s.properties[p],r,p],c=u(n,p);let l=void 0;i&&i.properties&&(l=i.properties[p]),a=a.concat(e(t,m,c,l))}return a}if(!i)return a.concat(U(o));switch(i.type){case p.default:a=a.concat(U(o));break;case p.hidden:a.push(k(o));break;case p.input:a.push(V(o));break;case p.password:a.push(A(o));break;case p.radio:a.push(F(o));break;case p.select:a.push(E(o));break;case p.textArea:a.push($(o))}return a}(a(),c(e.path),e.path,e.UISchema);export{s as FormContext,o as InputTypes,p as UITypes,u as concatFormPath,O as useGenericInput,R as useHidden,I as useInput,z as useObject,l as useObjectFromForm,c as useObjectFromPath,C as usePassword,w as useRadio,S as useSelect,T as useTextArea}; | ||
import e,{createContext as t,useContext as r}from"react";import{useForm as n}from"react-hook-form";const i=e=>{const t=e.split("/");return"#"===t[0]&&t.shift(),""===t[t.length-1]&&t.pop(),t},a=(e,t)=>{const r=Object.keys(t).sort(),n={};for(const a of r){const r=i(a);if(!r)continue;let s=n,o=e;for(let e=0;e<r.length&&void 0!==o;e++)o.type&&"object"===o.type?o=o.properties:!o.type&&o[r[e]]&&"object"===o[r[e]].type&&(o=o[r[e]]),e===r.length-1&&(o[r[e]]&&o[r[e]].type&&"integer"===o[r[e]].type?s[r[e]]=parseInt(t[a]):o[r[e]]&&o[r[e]].type&&"number"===o[r[e]].type?s[r[e]]=parseFloat(t[a]):s[r[e]]=t[a]),void 0===s[r[e]]&&(s[r[e]]={}),s=s[r[e]]}return n},s=t(null);function o(){return r(s)}const u=t=>{const{mode:r="onSubmit",revalidateMode:i="onChange",submitFocusError:o=!0}=t,u=n({mode:r,reValidateMode:i,submitFocusError:o}),p={};return p.onSubmit=u.handleSubmit((e,r)=>{t.onSubmit&&t.onSubmit(a(t.schema,e),r)}),t.noNativeValidate&&(p.noValidate=t.noNativeValidate),e.createElement(s.Provider,{value:Object.assign(Object.assign({},u),{schema:t.schema})},e.createElement("form",Object.assign({},p),t.children))};var p,m;!function(e){e.generic="__input_type_generic__",e.radio="__input_type_radio__",e.select="__input_type_select__",e.input="__input_type_input__",e.textArea="__input_type_textArea__"}(p||(p={})),function(e){e.default="__input_type_default__",e.radio="__input_type_radio__",e.select="__input_type_select__",e.input="__input_type_input__",e.hidden="__input_type_hidden__",e.password="__input_type_password__",e.textArea="__input_type_textArea__"}(m||(m={}));const c=(e,t)=>e+"/"+t,l=e=>{const t=i(e);let r=o().schema,n=!1,a="";for(let e=0;e<t.length;e++){if(!r||!r.type||"object"!==r.type){r={};break}n=!!(r.required&&r.required.indexOf(t[e])>-1),a=t[e],r=r.properties[t[e]]}return{JSONSchema:r,isRequired:n,objectName:a}},d=e=>a(o().schema,e);var _;!function(e){e.required="__form_error_required__",e.maxLength="__form_error_maxLenght__",e.minLength="__form_error_minLenght__",e.maxValue="__form_error_maxValue__",e.minValue="__form_error_minValue__",e.pattern="__form_error_pattern__",e.multipleOf="__form_error_multipleOf",e.undefinedError="__form_error_undefinedError__"}(_||(_={}));const g=e=>{const t={};return e&&(t.required=_.required),t},h=(e,t)=>{const r=Math.pow(10,t||0);return String(Math.round(e*r)/r)},b=e=>{const t=void 0!==e.multipleOf?"integer"===e.type?parseInt(e.multipleOf):parseFloat(e.multipleOf):"integer"===e.type?1:"any";let r=void 0;if(e.multipleOf){const t=e.multipleOf.toString().split(".")[1];r=t?t.length:0}return[t,r]},f=e=>{const[t]=b(e);let r=void 0!==e.exclusiveMinimum?e.exclusiveMinimum:void 0!==e.minimum?e.minimum:void 0;return void 0!==r&&void 0!==e.exclusiveMinimum&&(r+=t&&"any"!=t?t:1e-4),r},y=e=>{const[t]=b(e);let r=void 0!==e.exclusiveMaximum?parseFloat(e.exclusiveMaximum):void 0!==e.maximum?parseFloat(e.maximum):void 0;return void 0!==r&&void 0!==e.exclusiveMaximum&&(r-=t&&"any"!=t?t:1e-4),r},x=(e,t)=>{const r=f(e),n=y(e),i={validate:{multipleOf:t=>"integer"!==e.type||e.multipleOf&&(parseInt(t)%parseInt(e.multipleOf)==0||_.multipleOf)}};return t&&(i.required=_.required),"integer"===e.type?i.pattern={value:/^([+-]?[1-9]\d*|0)$/,message:_.pattern}:i.pattern={value:/^([0-9]+([,.][0-9]+))?$/,message:_.pattern},(r||0===r)&&(i.min={value:r,message:_.minValue}),(n||0===n)&&(i.max={value:n,message:_.maxValue}),i},v=(e,t)=>{const r={};return t&&(r.required=_.required),e.minLength&&(r.minLength={value:e.minLength,message:_.minLength}),e.maxLength&&(r.maxLength={value:e.maxLength,message:_.maxLength}),e.pattern&&(r.pattern={value:new RegExp(e.pattern),message:_.pattern}),r},O=(e,t,r)=>{const{JSONSchema:n,isRequired:i,objectName:a}=t;let s,o,u;if("number"===n.type||"integer"===n.type){const e=b(n);u=e[0],s=f(n),o=y(n)}return{name:a,path:r,isRequired:i,formContext:e,type:p.generic,getError:()=>((e,t,r,n,i,a)=>{if(!e)return;const s={message:_.undefinedError,expected:void 0};switch(e.message){case _.required:s.message=_.required,s.expected=r;break;case _.maxLength:s.message=_.maxLength,s.expected=t.maxLength;break;case _.minLength:s.message=_.minLength,s.expected=t.minLength;break;case _.maxValue:s.message=_.maxValue,s.expected=n;break;case _.minValue:s.message=_.minValue,s.expected=i;break;case _.multipleOf:s.message=_.multipleOf,s.expected=a;break;case _.pattern:s.message=_.pattern,s.expected=t.pattern}return s})(e.errors[r]?e.errors[r]:void 0,n,i,s,o,u),getObject:()=>n}},q=e=>{const t=o(),r=l(e);return O(t,r,e)},L=(e,t)=>e+"-"+t+"-input",j=(e,t)=>{const{register:r}=e.formContext,n=e.getObject();let i,a,s,o,u={};const m={key:""};if("string"===n.type)u=v(n,e.isRequired),m.pattern=n.pattern,m.minLength=n.minLength,m.maxLength=n.maxLength;else if("number"===n.type||"integer"===n.type){const t=b(n);s=t[0],o=t[1],i=f(n),a=y(n),u=x(n,e.isRequired),m.min=i,m.max=a,m.step="any"===s?"any":h(s,o||0)}return Object.assign(Object.assign({},e),{type:p.input,getLabelProps:()=>{const r={};return r.id=((e,t)=>e+"-"+t+"-label")(e.path,t),r.htmlFor=L(e.path,t),r},getInputProps:()=>(m.name=e.path,m.ref=r(u),m.type=t,m.required=e.isRequired,m.id=L(e.path,t),m)})},k=()=>({}),R=e=>Object.assign(Object.assign({},j(e,"hidden")),{isRequired:!1,getLabelProps:k}),S=e=>R(q(e)),V=e=>{let t;switch(e.getObject().format){case"date-time":t="datetime-local";break;case"email":t="email";break;case"hostname":case"uri":t="url";break;default:t="text"}return j(e,t)},I=e=>V(q(e)),P=(e,t,r)=>e+"-radio-input-"+(r[t]?r[t]:""),F=e=>{const t=e.getObject();let r,n,i,a,s={},o=[];if("string"===t.type)o=t.enum?t.enum:[],s=v(t,e.isRequired);else if("number"===t.type||"integer"===t.type){const u=b(t);if(i=u[0],a=u[1],r=f(t),n=y(t),void 0!==r&&void 0!==n&&"any"!=i){s=x(t,e.isRequired);for(let e=r;e<=n;e+=i)o.push(h(e,a||0))}}else"boolean"===t.type&&(s=g(e.isRequired),o=["true","false"]);return Object.assign(Object.assign({},e),{type:p.radio,getLabelProps:()=>{const r={};return r.id=e.path+"-label",r.htmlFor=void 0!==t.title?t.title:e.path,r},getItemInputProps:t=>{const r={key:""};return r.name=e.path,r.ref=e.formContext.register(s),r.type="radio",r.required=e.isRequired,r.id=P(e.path,t,o),r.value=o[t],r},getItemLabelProps:t=>{const r={};return r.id=((e,t,r)=>e+"-radio-label-"+(r[t]?r[t]:""))(e.path,t,o),r.htmlFor=P(e.path,t,o),r},getItems:()=>o})},w=e=>F(q(e)),M=e=>e+"-select",E=e=>{const t=e.getObject();let r,n,i,a,s={},o=[""];if("string"===t.type)o=o.concat(t.enum?t.enum:[]),s=v(t,e.isRequired);else if("number"===t.type||"integer"===t.type){const u=b(t);if(i=u[0],a=u[1],r=f(t),n=y(t),void 0!==r&&void 0!==n&&"any"!=i){s=x(t,e.isRequired);for(let e=r;e<=n;e+=i)o.push(h(e,a||0))}}else"boolean"===t.type&&(s=g(e.isRequired),o=["true","false"]);return Object.assign(Object.assign({},e),{type:p.select,getLabelProps:()=>{const t={};return t.id=e.path+"-label",t.htmlFor=M(e.path),t},getSelectProps:()=>{const t={};return t.name=e.path,t.ref=e.formContext.register(s),t.required=e.isRequired,t.id=M(e.path),t},getItemOptionProps:t=>{const r={};return r.id=((e,t,r)=>e+"-select-option-"+(r[t]?r[t]:""))(e.path,t,o),r.value=o[t],r},getItems:()=>o})},N=e=>E(q(e)),A=e=>j(e,"password"),C=e=>A(q(e)),J=e=>e+"-textarea-input",$=e=>{const t=e.getObject();let r={};const n={};return"string"===t.type?(r=v(t,e.isRequired),n.minLength=t.minLength,n.maxLength=t.maxLength):"number"!==t.type&&"integer"!==t.type||(r=x(t,e.isRequired)),Object.assign(Object.assign({},e),{type:p.textArea,getLabelProps:()=>{const t={};return t.id=e.path+"-textarea-label",t.htmlFor=J(e.path),t},getTextAreaProps:()=>(n.name=e.path,n.ref=e.formContext.register(r),n.required=e.isRequired,n.id=J(e.path),n)})},T=e=>$(q(e));function U(e){const t=e.getObject(),r=[];switch(t.type){case"string":t.enum?r.push(E(e)):r.push(V(e));break;case"integer":case"number":r.push(V(e));break;case"boolean":r.push(F(e))}return r}function z(e,t,r,n){let i=[];const{JSONSchema:a}=t,s=O(e,t,r);if("object"===a.type){return Object.keys(a.properties).reduce(function(e,t,r,n){const i=t.required;return(a,s)=>{const o=!!i&&-1!==i.indexOf(s),u=r&&r.properties?r.properties[s]:void 0,p=c(e,s),m={JSONSchema:t.properties[s],isRequired:o,objectName:s},l=z(n,m,p,u);return a.concat(l)}}(r,a,n,e),[])}if(!n)return i.concat(U(s));switch(n.type){case m.default:i=i.concat(U(s));break;case m.hidden:i.push(R(s));break;case m.input:i.push(V(s));break;case m.password:i.push(A(s));break;case m.radio:i.push(F(s));break;case m.select:i.push(E(s));break;case m.textArea:i.push($(s))}return i}const B=e=>z(o(),l(e.path),e.path,e.UISchema);export{u as FormContext,p as InputTypes,m as UITypes,c as concatFormPath,q as useGenericInput,S as useHidden,I as useInput,B as useObject,d as useObjectFromForm,l as useObjectFromPath,C as usePassword,w as useRadio,N as useSelect,T as useTextArea}; |
@@ -65,2 +65,6 @@ export declare type JSONSchemaType = ArrayJSONSchemaType | BasicJSONSchemaType | BooleanJSONSchemaType | NumberJSONSchemaType | ObjectJSONSchemaType | StringJSONSchemaType | NullJSONSchemaType; | ||
} | ||
export declare type JSONSchemaPathInfo = [JSONSchemaType, boolean, string]; | ||
export declare type JSONSchemaPathInfo = { | ||
JSONSchema: JSONSchemaType; | ||
isRequired: boolean; | ||
objectName: string; | ||
}; |
{ | ||
"name": "react-hook-form-jsonschema", | ||
"version": "0.1.2", | ||
"version": "0.1.3", | ||
"description": "Wrapper arround react-hook-form to create forms from a JSON schema.", | ||
@@ -38,3 +38,3 @@ "main": "output/index.cjs.js", | ||
"scripts": { | ||
"build": "rm -r output && rollup -c", | ||
"build": "rm -rf output && rollup -c", | ||
"build:watch": "rollup -cw", | ||
@@ -41,0 +41,0 @@ "test": "vtex-test-tools test", |
@@ -5,3 +5,3 @@ # react-hook-form-jsonschema | ||
react-hook-form-jsonschema is a React hooks library that manages all the stateful logic needed to make a form, based on a JSON Schema, functional. It returns a set of props that are meant to be called and their results destructured on the input field desired. | ||
`react-hook-form-jsonschema` is a React hooks library that manages all the stateful logic needed to make a functional form based on a JSON Schema. It returns a set of props that are meant to be called and their results destructured on the desired input field. | ||
@@ -43,3 +43,3 @@ ## Table of Contents | ||
And suppose you want to create a form field for the firstName field, simply use the useInput() hook for this and then render the form using react | ||
And suppose you want to create a form field for the `firstName` field, simply use the `useInput()` hook and render the form using react: | ||
@@ -79,3 +79,3 @@ ```JSX | ||
This component is the top-level component that creates the context with the schema and options all the hooks will need to be usable. So bear in mind that you **need** to define all the other components as children of this. | ||
This component is the top-level component that creates the context with the schema and options all the hooks will need to be usable. So bear in mind that you **need** to define all the other components as children of `FormContext`. | ||
@@ -91,12 +91,12 @@ #### props: | ||
- `mode`: String to indicate when to validate the input, default is `'onSubmit'`. | ||
- `'onBlur'`: Validate when an input field is blurred | ||
- `'onChange'`: Validate when an input field value changes | ||
- `'onSubmit'`: Validate when the submit is triggered | ||
- `'onBlur'`: Validate when an input field is blurred. | ||
- `'onChange'`: Validate when an input field value changes. | ||
- `'onSubmit'`: Validate when the submit is triggered. | ||
- `revalidateMode`: String to indicate when inputs with errors get re-validated, default is `'onChange'`. | ||
- `'onblur'`: Validate when an input field is blurred | ||
- `'onChange'`: Validate when an input field value changes | ||
- `'onSubmit'`: Validate when the submit is triggered | ||
- `'onblur'`: Validate when an input field is blurred. | ||
- `'onChange'`: Validate when an input field value changes. | ||
- `'onSubmit'`: Validate when the submit is triggered. | ||
- `submitFocusError`: Boolean, when `true` focus on the first field with error after submit validates, if there is any. Defaults to `true`. | ||
- `onSubmit`: Callback function that the form values are passed to when submit is triggered | ||
- `noNativeValidate`: Boolean, when `true` disables the default browser validation (notice that react-hook-form-jsonschema does NOT yet implement validation form URIs and email addresses). | ||
- `onSubmit`: Callback function that the form values are passed to when submit is triggered. | ||
- `noNativeValidate`: Boolean, when `true` disables the default browser validation (notice that `react-hook-form-jsonschema` does NOT yet implement validation for URIs and email addresses). | ||
@@ -115,4 +115,4 @@ ## Hooks API | ||
- `name`: The last object/data field name in the tree. In the case of `#/some/child/data/field/here` the name value will be `here`. | ||
- `isRequired`: indicates wether the field is required or not. | ||
- `formContext`: If you want to access internal react-hook-form context use this | ||
- `isRequired`: indicates whether the field is required or not. | ||
- `formContext`: If you want to access internal `react-hook-form` context use this | ||
- `getError()`: Returns an `ErrorMessage`, which has the following format: | ||
@@ -122,4 +122,4 @@ - `{message: ErrorTypes, expected: ErrorMessageValues}` | ||
- `required`: the field is required to be filled | ||
- `maxLength`: maximum lenght of string input was surpassed | ||
- `minLength`: minimum lenght of string input was not met | ||
- `maxLength`: maximum length of string input was surpassed | ||
- `minLength`: minimum length of string input was not met | ||
- `maxValue`: maximum value of number input was surpassed | ||
@@ -133,15 +133,15 @@ - `minValue`: minimum value of number input was not met | ||
**Please notice that in all of the examples bellow it is assumed that the components are already children of a FormContext component** | ||
**Please notice that in all of the following examples it is assumed the components are already children of a `FormContext` component** | ||
### useHidden(path) | ||
##### Description | ||
**Description** | ||
Use this hook to build a hidden field in the form, the user will not be able to change it or see it, but it will be there when submitted. | ||
##### Parameters: | ||
**Parameters:** | ||
- `path`: String which represents the path to the data field of the JSON Schema that this input will be built for. | ||
##### Return: | ||
**Return:** | ||
@@ -153,3 +153,3 @@ Returns an object with the following fields, besides the common one's: | ||
##### Example: | ||
**Example:** | ||
@@ -173,11 +173,11 @@ ```JSX | ||
##### Description | ||
**Description** | ||
Use this hook to build a generic input field in your form, with validation based on the type of input the JSON Schema requires. | ||
##### Parameters: | ||
**Parameters:** | ||
- `path`: String which represents the path to the data field of the JSON Schema that this input will be built for. | ||
##### Return: | ||
**Return:** | ||
@@ -189,3 +189,3 @@ Returns an object with the following fields, besides the common one's: | ||
##### Example: | ||
**Example:** | ||
@@ -209,7 +209,7 @@ ```JSX | ||
##### Description | ||
**Description** | ||
This hook works a little differently than the others. This hook will return an array of which each of its elements corresponds to the return type of one of the other hooks. | ||
This hook works a little differently than the others. `useObject` returns an array of which each of its elements corresponds to the return type of one of the other hooks. | ||
##### Parameters: | ||
**Parameters:** | ||
@@ -221,3 +221,4 @@ - `path`: String which represents the path to the data field of the JSON Schema that this input will be built for. | ||
const UISchema = { | ||
/* This is the type that will be used to choose what type of input will be | ||
/* | ||
* This is the type that will be used to choose what type of input will be | ||
* used to build the specified field. Please note that the type of a node | ||
@@ -247,7 +248,7 @@ * that is an object will be ignored, as there would make no sense to render | ||
##### Return: | ||
**Return:** | ||
Returns an array, with each element being the return of a different call to a hook for each child of the object that was passed in the path | ||
Returns an array, with each element being the return of a different call to a hook for each child of the object that was passed in the path. | ||
##### Example: | ||
**Example:** | ||
@@ -379,11 +380,11 @@ ```JSX | ||
##### Description | ||
**Description** | ||
Use this hook to build a password input field in your form, with validation based on the type of input the JSON Schema requires. | ||
##### Parameters: | ||
**Parameters:** | ||
- `path`: String which represents the path to the data field of the JSON Schema that this input will be built for. | ||
##### Return: | ||
**Return:** | ||
@@ -395,3 +396,3 @@ Returns an object with the following fields, besides the common one's: | ||
##### Example: | ||
**Example:** | ||
@@ -415,11 +416,11 @@ ```JSX | ||
##### Description | ||
**Description** | ||
Use this hook to build a radio field in your form. | ||
##### Parameters: | ||
**Parameters:** | ||
- `path`: String which represents the path to the data field of the JSON Schema that this input will be built for. | ||
##### Return: | ||
**Return:** | ||
@@ -432,3 +433,3 @@ Returns an object with the following fields, besides the common one's: | ||
##### Example: | ||
**Example:** | ||
@@ -457,11 +458,11 @@ ```JSX | ||
##### Description | ||
**Description** | ||
Use this hook to build a select field in your form. | ||
##### Parameters: | ||
**Parameters:** | ||
- `path`: String which represents the path to the data field of the JSON Schema that this input will be built for. | ||
##### Return: | ||
**Return:** | ||
@@ -475,3 +476,3 @@ Returns an object with the following fields, besides the common one's: | ||
##### Example: | ||
**Example:** | ||
@@ -505,11 +506,11 @@ ```JSX | ||
##### Description | ||
**Description** | ||
Use this hook to build a textarea field in the form. | ||
##### Parameters: | ||
**Parameters:** | ||
- `path`: String which represents the path to the data field of the JSON Schema that this input will be built for. | ||
##### Return: | ||
**Return:** | ||
@@ -521,3 +522,3 @@ Returns an object with the following fields, besides the common one's: | ||
##### Example: | ||
**Example:** | ||
@@ -524,0 +525,0 @@ ```JSX |
52284
30
406
518