UNPKG

mui-rff

Version:

Set of modern wrapper components to facilitate using Material UI with React Final Form

3 lines (2 loc) 12.3 kB
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react"),t=e(r),n=require("react-final-form"),a=e(require("@material-ui/core/TextField")),o=e(require("@material-ui/lab/Autocomplete")),l=require("@material-ui/core"),i=require("@material-ui/pickers");function u(){return(u=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}function s(e,r){if(null==e)return{};var t,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r.indexOf(t=o[n])>=0||(a[t]=e[t]);return a}var c=function(e){var r=e.input,n=r.onChange,l=r.value,i=s(r,["name","onChange","value"]),u=e.meta,c=e.options,m=e.label,p=e.required,d=e.multiple,f=e.textFieldProps,b=e.getOptionValue,h=s(e,["input","meta","options","label","required","multiple","textFieldProps","getOptionValue"]),g=h.helperText,v=s(h,["helperText"]),P=(u.submitError&&!u.dirtySinceLastSubmit||u.error)&&u.touched,E=f||{},x=E.variant,O=s(E,["variant"]),j=null;return b?null!==l&&c.forEach((function(e){var r=b(e);d?(j||(j=[]),l.forEach((function(t){t===r&&j.push(e)}))):l===r&&(j=e)})):j=l,t.createElement(o,Object.assign({multiple:d,onChange:function(e,r){return n(function(e){return b?d?e?e.map(b):null:e?b(e):null:e}(r))},options:c,value:j,renderInput:function(e){return t.createElement(a,Object.assign({label:m,required:p,fullWidth:!0,error:P,helperText:P?u.error||u.submitError:g,variant:x},e,i,O))}},v))};function m(e,r){return e?t.createElement(i.MuiPickersUtilsProvider,{utils:e},r):r}function p(e){var r=e.input,n=r.name,a=r.onChange,o=r.value,l=s(r,["name","onChange","value"]),u=e.meta,c=e.dateFunsUtils,p=s(e,["input","meta","dateFunsUtils"]),d=p.helperText,f=s(p,["helperText"]),b=(u.submitError&&!u.dirtySinceLastSubmit||u.error)&&u.touched;return m(c,t.createElement(i.KeyboardDatePicker,Object.assign({disableToolbar:!0,fullWidth:!0,autoOk:!0,helperText:b?u.error||u.submitError:d,error:b,onChange:a,name:n,value:""===o?null:o,inputProps:l},f)))}function d(e){var r=e.input,n=r.name,a=r.onChange,o=r.value,l=s(r,["name","onChange","value"]),u=e.meta,c=e.dateFunsUtils,p=s(e,["input","meta","dateFunsUtils"]),d=p.helperText,f=s(p,["helperText"]),b=(u.submitError&&!u.dirtySinceLastSubmit||u.error)&&u.touched;return m(c,t.createElement(i.DatePicker,Object.assign({fullWidth:!0,autoOk:!0,helperText:b?u.error||u.submitError:d,error:b,onChange:a,name:n,value:""===o?null:o},f,{inputProps:l})))}function f(e){var r=e.input,n=r.name,a=r.onChange,o=r.value,l=s(r,["name","onChange","value"]),u=e.meta,c=e.dateFunsUtils,p=s(e,["input","meta","dateFunsUtils"]),d=p.helperText,f=s(p,["helperText"]),b=(u.submitError&&!u.dirtySinceLastSubmit||u.error)&&u.touched;return m(c,t.createElement(i.KeyboardTimePicker,Object.assign({fullWidth:!0,autoOk:!0,helperText:b?u.error||u.submitError:d,error:b,onChange:a,name:n,value:""===o?null:o},f,{inputProps:l})))}function b(e){var r=e.input,n=r.name,a=r.onChange,o=r.value,l=s(r,["name","onChange","value"]),u=e.meta,c=e.dateFunsUtils,p=s(e,["input","meta","dateFunsUtils"]),d=p.helperText,f=s(p,["helperText"]),b=(u.submitError&&!u.dirtySinceLastSubmit||u.error)&&u.touched;return m(c,t.createElement(i.TimePicker,Object.assign({fullWidth:!0,autoOk:!0,helperText:b?u.error||u.submitError:d,error:b,onChange:a,name:n,value:""===o?null:o},f,{inputProps:l})))}function h(e,r,t){return Object(e)!==e||(Array.isArray(r)||(r=r.toString().match(/[^.[\]]+/g)||[]),r.slice(0,-1).reduce((function(e,t,n){return Object(e[t])===e[t]?e[t]:e[t]=Math.abs(r[n+1])>>0==+r[n+1]?[]:{}}),e)[r[r.length-1]]=t),e}"undefined"!=typeof Symbol&&(Symbol.iterator||(Symbol.iterator=Symbol("Symbol.iterator"))),"undefined"!=typeof Symbol&&(Symbol.asyncIterator||(Symbol.asyncIterator=Symbol("Symbol.asyncIterator"))),exports.Autocomplete=function(e){var r=e.name,a=e.fieldProps,o=s(e,["name","fieldProps"]);return t.createElement(n.Field,Object.assign({name:r,render:function(e){return t.createElement(c,Object.assign({},e,o))}},a))},exports.Checkboxes=function(e){var a=e.required,o=e.label,i=e.data,c=e.name,m=e.helperText,p=e.fieldProps,d=e.formControlProps,f=e.formGroupProps,b=e.formLabelProps,h=e.formControlLabelProps,g=e.formHelperTextProps,v=s(e,["required","label","data","name","helperText","fieldProps","formControlProps","formGroupProps","formLabelProps","formControlLabelProps","formHelperTextProps"]),P=n.useFormState(),E=P.errors,x=P.submitErrors,O=P.submitFailed,j=P.modified,F=r.useState(null),y=F[0],C=F[1];r.useEffect((function(){C((E[c]||x)&&(O||j&&j[c])?E[c]||x[c]:null)}),[E,x,O,j,c]);var T=Array.isArray(i)?i:[i],S=1===T.length;return t.createElement(l.FormControl,Object.assign({required:a,error:!!y},d),o?t.createElement(l.FormLabel,Object.assign({},b),o):t.createElement(t.Fragment,null),t.createElement(l.FormGroup,Object.assign({},f),T.map((function(e,r){return t.createElement(l.FormControlLabel,Object.assign({key:r,name:c,label:e.label,value:S?void 0:e.value,disabled:e.disabled,control:t.createElement(n.Field,Object.assign({type:"checkbox",name:c},p),(function(e){var r=e.input,n=r.name,o=r.value,i=r.onChange,c=r.checked,m=s(r,["name","value","onChange","checked"]);return t.createElement(l.Checkbox,Object.assign({name:n,value:o,onChange:i,checked:c,inputProps:u({required:a},m)},v))}))},h))}))),y?t.createElement(l.FormHelperText,Object.assign({},g),y):!!m&&t.createElement(l.FormHelperText,Object.assign({},g),m))},exports.DatePicker=function(e){var r=e.name,a=e.fieldProps,o=s(e,["name","fieldProps"]);return t.createElement(n.Field,Object.assign({name:r,render:function(e){return t.createElement(d,Object.assign({},e,o))}},a))},exports.Debug=function(){return t.createElement(n.FormSpy,{subscription:{values:!0}},(function(e){return t.createElement("pre",null,JSON.stringify(e.values,void 0,2))}))},exports.KeyboardDatePicker=function(e){var r=e.name,a=e.fieldProps,o=s(e,["name","fieldProps"]);return t.createElement(n.Field,Object.assign({name:r,render:function(e){return t.createElement(p,Object.assign({},e,o))}},a))},exports.KeyboardTimePicker=function(e){var r=e.name,a=e.fieldProps,o=s(e,["name","fieldProps"]);return t.createElement(n.Field,Object.assign({name:r,render:function(e){return t.createElement(f,Object.assign({},e,o))}},a))},exports.Radios=function(e){var a=e.name,o=e.data,i=e.label,c=e.required,m=e.helperText,p=e.formLabelProps,d=e.formControlLabelProps,f=e.fieldProps,b=e.formControlProps,h=e.radioGroupProps,g=e.formHelperTextProps,v=s(e,["name","data","label","required","helperText","formLabelProps","formControlLabelProps","fieldProps","formControlProps","radioGroupProps","formHelperTextProps"]),P=n.useFormState(),E=P.errors,x=P.submitErrors,O=P.submitFailed,j=P.modified,F=r.useState(null),y=F[0],C=F[1];return r.useEffect((function(){C((E[a]||x)&&(O||j&&j[a])?E[a]||x[a]:null)}),[E,x,O,j,a]),t.createElement(l.FormControl,Object.assign({required:c,error:!!y},b),!!i&&t.createElement(l.FormLabel,Object.assign({},p),i),t.createElement(l.RadioGroup,Object.assign({},h),o.map((function(e,r){return t.createElement(l.FormControlLabel,Object.assign({key:r,name:a,label:e.label,value:e.value,disabled:e.disabled,control:t.createElement(n.Field,Object.assign({type:"radio",name:a},f),(function(e){var r=e.input,n=r.name,a=r.value,o=r.onChange,i=r.checked,m=s(r,["name","value","onChange","checked"]);return t.createElement(l.Radio,Object.assign({name:n,value:a,onChange:o,checked:i,inputProps:u({required:c},m)},v))}))},d))}))),y?t.createElement(l.FormHelperText,Object.assign({},g),y):!!m&&t.createElement(l.FormHelperText,Object.assign({},g),m))},exports.Select=function(e){var a=e.name,o=e.label,i=e.data,c=e.children,m=e.required,p=e.multiple,d=e.helperText,f=e.fieldProps,b=e.inputLabelProps,h=e.formControlProps,g=e.formHelperTextProps,v=e.menuItemProps,P=e.labelWidth,E=s(e,["name","label","data","children","required","multiple","helperText","fieldProps","inputLabelProps","formControlProps","formHelperTextProps","menuItemProps","labelWidth"]);if(!i&&!c)throw new Error("Please specify either children or data as an attribute.");var x=n.useFormState(),O=x.errors,j=x.submitErrors,F=x.submitFailed,y=x.modified,C=r.useState(null),T=C[0],S=C[1];r.useEffect((function(){S((O[a]||j)&&(F||y&&y[a])?O[a]||j[a]:null)}),[O,j,F,y,a]);var k=E.variant,q=t.useRef(null),L=t.useState(0),H=L[0],W=L[1];return t.useEffect((function(){o&&W(q.current.offsetWidth)}),[o]),t.createElement(l.FormControl,Object.assign({required:m,error:!!T,fullWidth:!0,variant:k},h),!!o&&t.createElement(l.InputLabel,Object.assign({ref:q,htmlFor:a},b),o),t.createElement(n.Field,Object.assign({name:a},f),(function(e){var r=e.input,n=r.name,a=r.value,d=r.onChange,f=s(r,["name","value","onChange"]);return t.createElement(l.Select,Object.assign({name:n,value:a,onChange:d,multiple:p,label:o,labelWidth:"outlined"===k&&o?H:P,inputProps:u({required:m},f)},E),i?i.map((function(e){return t.createElement(l.MenuItem,Object.assign({value:e.value,key:e.value,disabled:e.disabled},v),e.label)})):c)})),T?t.createElement(l.FormHelperText,Object.assign({},g),T):!!d&&t.createElement(l.FormHelperText,Object.assign({},g),d))},exports.Switches=function(e){var a=e.name,o=e.data,i=e.label,c=e.required,m=e.helperText,p=e.fieldProps,d=e.formControlProps,f=e.formGroupProps,b=e.formLabelProps,h=e.formControlLabelProps,g=e.formHelperTextProps,v=s(e,["name","data","label","required","helperText","fieldProps","formControlProps","formGroupProps","formLabelProps","formControlLabelProps","formHelperTextProps"]),P=n.useFormState(),E=P.errors,x=P.submitErrors,O=P.submitFailed,j=P.modified,F=r.useState(null),y=F[0],C=F[1];r.useEffect((function(){C((E[a]||x)&&(O||j&&j[a])?E[a]||x[a]:null)}),[E,x,O,j,a]);var T=Array.isArray(o)?o:[o],S=1===T.length;return t.createElement(l.FormControl,Object.assign({required:c,error:!!y},d),i?t.createElement(l.FormLabel,Object.assign({},b),i):t.createElement(t.Fragment,null),t.createElement(l.FormGroup,Object.assign({},f),T.map((function(e,r){return t.createElement(l.FormControlLabel,Object.assign({key:r,name:a,label:e.label,value:S?void 0:e.value,disabled:e.disabled,control:t.createElement(n.Field,Object.assign({type:"checkbox",name:a},p),(function(e){var r=e.input,n=r.name,a=r.value,o=r.onChange,i=r.checked,m=s(r,["name","value","onChange","checked"]);return t.createElement(l.Switch,Object.assign({name:n,value:a,onChange:o,checked:i,inputProps:u({required:c},m)},v))}))},h))}))),y?t.createElement(l.FormHelperText,Object.assign({},g),y):!!m&&t.createElement(l.FormHelperText,Object.assign({},g),m))},exports.TextField=function(e){var a=e.name,o=e.type,i=void 0===o?"text":o,c=e.fieldProps,m=e.helperText,p=e.fullWidth,d=void 0===p||p,f=s(e,["name","type","fieldProps","helperText","fullWidth"]),b=n.useFormState(),h=b.errors,g=b.submitErrors,v=b.submitFailed,P=b.modified,E=r.useState(null),x=E[0],O=E[1];return r.useEffect((function(){O((h[a]||g)&&(v||P&&P[a])?h[a]||g[a]:null)}),[h,g,v,P,a]),t.createElement(n.Field,Object.assign({name:a},c),(function(e){var r=e.input,n=r.name,a=r.value,o=r.onChange,c=s(r,["name","value","onChange","checked"]);return t.createElement(l.TextField,Object.assign({fullWidth:d,helperText:x||m,error:!!x,onChange:o,name:n,value:a,type:i,inputProps:u({},c)},f))}))},exports.TimePicker=function(e){var r=e.name,a=e.fieldProps,o=s(e,["name","fieldProps"]);return t.createElement(n.Field,Object.assign({name:r,render:function(e){return t.createElement(b,Object.assign({},e,o))}},a))},exports.makeRequired=function(e){var r=e.fields;return Object.keys(r).reduce((function(e,t){return e[t]=r[t]._exclusive.required,e}),{})},exports.makeValidate=function(e){return function(r){try{return Promise.resolve(function(t,n){try{var a=Promise.resolve(e.validate(r,{abortEarly:!1})).then((function(){}))}catch(e){return n(e)}return a&&a.then?a.then(void 0,n):a}(0,(function(e){return e.inner.reduce((function(e,r){var t=r.path,n=r.message;return e.hasOwnProperty(t)?h(e,t,function(e,r,t){var n=String.prototype.split.call(r,/[,[\].]+?/).filter(Boolean).reduce((function(e,r){return null!=e?e[r]:e}),e);return void 0===n||n===e?void 0:n}(e,t)+" "+n):h(e,t,n),e}),{})})))}catch(e){return Promise.reject(e)}}}; //# sourceMappingURL=mui-rff.cjs.production.min.js.map