react-hook-form-generator/dist/react-hook-form-generator.cjs.production.min.js

A [React](https://reactjs.org/) component to quickly and easily generate forms from object schema. Built with [React Hook Form](https://react-hook-form.com/) and [Chakra UI](https://chakra-ui.com/).

"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),r=e(t),n=require("@chakra-ui/core"),a=require("react-hook-form"),l=e(require("lodash.merge"));function o(){return(o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}var s=t.createContext({}),i=function(e,r){var n=t.useContext(s);return t.useMemo((function(){return r?o({},n[e],r):n[e]}),[e,n,r])},c=function(e,r){var n=a.useFormContext().errors;return t.useMemo((function(){var t=n[e];if(t){var a=t.message;return a?a.replace(e,r||e):"Field validation failed"}}),[n,e,r])},u=function(e){var l=e.id,o=e.name,s=e.field,u=e.defaultValue,m=s.label,d=s.placeholder,b=s.htmlInputType,p=s.helperText,g=s.isRequired,f=s.leftInputAddon,E=s.rightInputAddon,h=s.shouldDisplay,x=s.styles,j=i("textField",void 0===x?{}:x),O=a.useFormContext(),F=O.register,v=O.watch,y=c(o,m),k=v(o);return t.useMemo((function(){return!h||h(k)}),[k,h])?r.createElement(n.FormControl,Object.assign({isRequired:g,isInvalid:!!y},j.control),!!m&&r.createElement(n.FormLabel,Object.assign({htmlFor:o},j.label),m),f||E?r.createElement(n.InputGroup,Object.assign({},j.inputGroup),!!f&&r.createElement(n.InputLeftAddon,Object.assign({},f)),r.createElement(n.Input,Object.assign({"data-testid":l,type:b||"text",name:o,"aria-label":o,ref:F(),placeholder:d,defaultValue:u||""},j.input)),!!E&&r.createElement(n.InputRightAddon,Object.assign({},E))):r.createElement(n.Input,Object.assign({"data-testid":l,type:b||"text",name:o,"aria-label":o,ref:F(),placeholder:d,defaultValue:u||""},j.input)),!!p&&r.createElement(n.FormHelperText,Object.assign({},j.helperText),p),r.createElement(n.FormErrorMessage,Object.assign({},j.errorMessage),y)):null},m=function(e){var l=e.id,o=e.name,s=e.field,u=e.defaultValue,m=s.label,d=s.placeholder,b=s.helperText,p=s.isRequired,g=s.shouldDisplay,f=s.styles,E=i("textAreaField",void 0===f?{}:f),h=a.useFormContext(),x=h.register,j=h.watch,O=c(o,m),F=j(o);return t.useMemo((function(){return!g||g(F)}),[F,g])?r.createElement(n.FormControl,Object.assign({isRequired:p,isInvalid:!!O},E.control),!!m&&r.createElement(n.FormLabel,Object.assign({htmlFor:o},E.label),m),r.createElement(n.Textarea,Object.assign({"data-testid":l,name:o,placeholder:d,ref:x(),defaultValue:u||""},E.input)),!!b&&r.createElement(n.FormHelperText,Object.assign({},E.helperText),b),r.createElement(n.FormErrorMessage,Object.assign({},E.errorMessage),O)):null},d=function(e){var l=e.id,o=e.name,s=e.field,u=e.defaultValue,m=s.label,d=s.placeholder,b=s.helperText,p=s.isRequired,g=s.shouldDisplay,f=s.styles,E=i("numberField",void 0===f?{}:f),h=a.useFormContext(),x=h.control,j=(0,h.watch)(o),O=c(o,m);return t.useMemo((function(){return!g||g(j)}),[j,g])?r.createElement(n.FormControl,Object.assign({key:o+"-control",isRequired:p,isInvalid:!!O},E.control),!!m&&r.createElement(n.FormLabel,Object.assign({htmlFor:o},E.errorMessage),m),r.createElement(a.Controller,{name:o,control:x,defaultValue:u||0,as:r.createElement(n.NumberInput,null,r.createElement(n.NumberInputField,Object.assign({id:l,"data-testid":l,placeholder:d},E.input)),r.createElement(n.NumberInputStepper,null,r.createElement(n.NumberIncrementStepper,null),r.createElement(n.NumberDecrementStepper,null)))}),!!b&&r.createElement(n.FormHelperText,Object.assign({},E.helperText),b),r.createElement(n.FormErrorMessage,Object.assign({},E.errorMessage),O)):null},b=function(e){var l=e.id,o=e.name,s=e.field,u=s.label,m=s.helperText,d=s.isRequired,b=s.shouldDisplay,p=s.styles,g=void 0===p?{}:p,f=a.useFormContext(),E=f.register,h=(0,f.watch)(o),x=i("switchField",g),j=c(o,u);return t.useMemo((function(){return!b||b(h)}),[h,b])?r.createElement(n.FormControl,Object.assign({key:o+"-control",isRequired:d,isInvalid:!!j},x.control),!!u&&r.createElement(n.FormLabel,Object.assign({htmlFor:o},x.label),u),r.createElement(n.Switch,Object.assign({name:o,"data-testid":l,ref:E},x.switch)),!!m&&r.createElement(n.FormHelperText,Object.assign({},x.helperText),m),r.createElement(n.FormErrorMessage,Object.assign({},x.errorMessage),j)):null},p=function(e){var l=e.id,o=e.name,s=e.field,u=s.label,m=s.helperText,d=s.isRequired,b=s.shouldDisplay,p=s.styles,g=void 0===p?{}:p,f=a.useFormContext(),E=f.register,h=(0,f.watch)(o),x=i("checkboxField",g),j=c(o,u);return t.useMemo((function(){return!b||b(h)}),[h,b])?r.createElement(n.FormControl,Object.assign({key:o+"-control",isRequired:d,isInvalid:!!j},x.control),!!u&&r.createElement(n.FormLabel,Object.assign({htmlFor:o},x.label),u),r.createElement(n.Stack,Object.assign({},x.checkboxGroup),s.checkboxes.map((function(e){return r.createElement(n.Checkbox,{key:e.name,name:e.name,ref:E,"data-testid":l+"-"+e.name},e.label||e.name)}))),!!m&&r.createElement(n.FormHelperText,Object.assign({},x.helperText),m),r.createElement(n.FormErrorMessage,Object.assign({},x.errorMessage),j)):null},g=function(e){var l=e.id,o=e.name,s=e.field,u=e.defaultValue,m=s.label,d=s.helperText,b=s.isRequired,p=s.shouldDisplay,g=s.styles,f=void 0===g?{}:g,E=a.useFormContext(),h=E.register,x=(0,E.watch)(o),j=i("selectField",f),O=c(o,m);return t.useMemo((function(){return!p||p(x)}),[x,p])?r.createElement(n.FormControl,Object.assign({key:o+"-control",isRequired:b,isInvalid:!!O},j.control),!!m&&r.createElement(n.FormLabel,Object.assign({htmlFor:o},j.label),m),r.createElement(n.Select,Object.assign({name:o,"data-testid":l,ref:h(),defaultValue:u||s.options[0].value},j.select),s.options.map((function(e){return r.createElement("option",{key:e.value,value:e.value},e.label||e.value)}))),!!d&&r.createElement(n.FormHelperText,Object.assign({},j.helperText),d),r.createElement(n.FormErrorMessage,Object.assign({},j.errorMessage),O)):null},f=function(e,t,a){var l=e[0],o=e[1],s=null;switch(o.type){case"text":s=u;break;case"textArea":s=m;break;case"number":s=d;break;case"array":s=E;break;case"object":s=h;break;case"switch":s=b;break;case"checkbox":s=p;break;case"select":s=g;break;case"custom":return r.createElement(n.Box,null,r.createElement(s=o.component,Object.assign({id:t,"data-testid":t,name:l,field:o,defaultValue:a},o.props)))}return r.createElement(n.Box,null,r.createElement(s,{id:t,"data-testid":t,name:l,field:o,defaultValue:a}))},E=function(e){var l=e.name,o=e.field,s=o.label,u=o.isRequired,m=o.isCollapsable,d=o.itemField,b=o.helperText,p=o.shouldDisplay,g=o.styles,E=void 0===g?{}:g,h=a.useFormContext(),x=h.control,j=(0,h.watch)(l),O=a.useFieldArray({name:l,control:x}),F=O.fields,v=O.append,y=O.remove,k=n.useDisclosure(!0),C=k.isOpen,T=k.onOpen,B=k.onToggle,I=i("arrayField",E),M=c(l,s);return t.useMemo((function(){return!p||p(j)}),[j,p])?r.createElement(n.FormControl,Object.assign({isRequired:u,isInvalid:!!M},I.control),r.createElement(n.Flex,Object.assign({},I.toolbar),!!s&&r.createElement(n.FormLabel,Object.assign({htmlFor:l},I.label),s," ",r.createElement(n.PseudoBox,Object.assign({},I.countText),"(",F.length,")")),r.createElement(n.ButtonGroup,Object.assign({},I.buttonGroup),r.createElement(n.IconButton,Object.assign({icon:"add","aria-label":"Add item",onClick:function(){v({}),T()}},I.addButton)),r.createElement(n.IconButton,Object.assign({icon:"delete","aria-label":"Clear items",onClick:function(){return y()}},I.clearButton)),m&&r.createElement(n.IconButton,Object.assign({icon:C?"view-off":"view","aria-label":C?"Hide items":"Show items",onClick:B},I.collapseButton)))),r.createElement(n.Collapse,{isOpen:C},r.createElement(n.Stack,Object.assign({},I.arrayContainer),F.map((function(e,t){return r.createElement(n.Box,Object.assign({key:(null==e?void 0:e.id)||l+"["+t+"].value"},I.itemContainer),f([l+"["+t+"].value",d],e.id,e.value),r.createElement(n.Box,Object.assign({},I.deleteItemContainer),r.createElement(n.IconButton,Object.assign({icon:"delete","aria-label":"Delete item",onClick:function(){return y(t)}},I.deleteButton))))})))),!!b&&r.createElement(n.FormHelperText,Object.assign({},I.helperText),b),r.createElement(n.FormErrorMessage,Object.assign({},I.errorMessage),M)):null},h=function(e){var l=e.name,o=e.field,s=e.id,u=e.defaultValue,m=o.label,d=o.isCollapsable,b=o.isRequired,p=o.helperText,g=o.shouldDisplay,E=o.styles,h=void 0===E?{}:E,x=(0,a.useFormContext().watch)(l),j=n.useDisclosure(!0),O=j.isOpen,F=j.onToggle,v=i("objectField",h),y=c(l,o.label);return t.useMemo((function(){return!g||g(x)}),[x,g])?r.createElement(n.FormControl,Object.assign({isRequired:!!b,isInvalid:!!y},v.control),r.createElement(n.Flex,Object.assign({},v.toolbar),!!m&&r.createElement(n.FormLabel,Object.assign({htmlFor:l},v.label),m),d&&r.createElement(n.IconButton,Object.assign({icon:O?"view-off":"view","aria-label":O?"Hide items":"Show items",onClick:F},v.collapseButton))),r.createElement(n.Collapse,{isOpen:O},r.createElement(n.Stack,Object.assign({},v.objectContainer),Object.entries(o.properties).map((function(e,t){var a=e[0],o=e[1];return r.createElement(n.Box,Object.assign({key:t},v.propertyContainer),f([l+"."+a,o],s,null==u?void 0:u[a]))})))),!!p&&r.createElement(n.FormHelperText,Object.assign({},v.helperText),p),r.createElement(n.FormErrorMessage,Object.assign({},v.errorMessage),y)):null},x={form:{container:{padding:4},title:{size:"lg",marginBottom:4},fieldSpacing:6,buttonGroup:{marginTop:4},submitButton:{size:"sm"},resetButton:{size:"sm"}},arrayField:{arrayContainer:{spacing:4,marginTop:2},label:{padding:0,display:"flex"},countText:{fontWeight:400,marginLeft:1},toolbar:{alignItems:"center"},buttonGroup:{marginLeft:"auto"},addButton:{size:"xs"},deleteButton:{size:"xs",margin:"auto"},clearButton:{size:"xs"},collapseButton:{size:"xs"},itemContainer:{display:"grid",gridTemplateColumns:"1fr 2.5rem",paddingLeft:2,paddingBottom:2,paddingTop:1,border:"1px solid",borderRadius:4,borderColor:"gray.200",backgroundColor:"gray.50"},deleteItemContainer:{display:"flex"}},objectField:{objectContainer:{spacing:4,borderWidth:1,borderColor:"gray.200",padding:2,borderRadius:4,marginTop:2,backgroundColor:"gray.50"},label:{padding:0},toolbar:{alignItems:"center"},collapseButton:{size:"xs",marginLeft:"auto"}},checkboxField:{checkboxGroup:{isInline:!0,spacing:4}}},j=function(e){var t=e[0],a=e[1],l=null;switch(a.type){case"text":l=u;break;case"textArea":l=m;break;case"number":l=d;break;case"array":l=E;break;case"object":l=h;break;case"switch":l=b;break;case"checkbox":l=p;break;case"select":l=g;break;case"custom":return r.createElement(n.Box,{key:t+"-container"},r.createElement(l=a.component,Object.assign({name:t,field:a},a.props)))}return r.createElement(n.Box,{key:t+"-container"},r.createElement(l,{name:t,field:a}))};exports.Form=function(e){var o,i,c,u,m,d,b,p,g,f=e.title,E=e.schema,h=e.handleSubmit,O=e.overwriteDefaultStyles,F=e.buttons,v=e.styles,y=void 0===v?{}:v,k=a.useForm(e.formOptions),C=t.useMemo((function(){return O?y:l(x,y)}),[y,O]);return r.createElement(s.Provider,{value:C},r.createElement(a.FormProvider,Object.assign({},k),r.createElement(n.Box,Object.assign({as:"form",onSubmit:k.handleSubmit(h)},null==(o=C.form)?void 0:o.container),!!f&&r.createElement(n.Heading,Object.assign({},null==(i=C.form)?void 0:i.title),f),r.createElement(n.Stack,{spacing:null==(c=C.form)?void 0:c.fieldSpacing},Object.entries(E).map(j)),r.createElement(n.ButtonGroup,Object.assign({},null==(u=C.form)?void 0:u.buttonGroup),null!=F&&null!=(m=F.reset)&&m.hidden?null:r.createElement(n.Button,Object.assign({type:"reset"},null==(d=C.form)?void 0:d.resetButton),(null==F||null==(b=F.reset)?void 0:b.text)||"Reset"),r.createElement(n.Button,Object.assign({type:"submit"},null==(p=C.form)?void 0:p.submitButton),(null==F||null==(g=F.submit)?void 0:g.text)||"Submit")))))},exports.useErrorMessage=c,exports.useStyles=i;
//# sourceMappingURL=react-hook-form-generator.cjs.production.min.js.map