mui-rff
Version:
Set of modern wrapper components to facilitate using Material UI with React Final Form
3 lines (2 loc) • 9.08 kB
JavaScript
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),K=require("@mui/material/Autocomplete"),v=require("react-final-form"),c=require("@mui/material"),Q=require("@mui/material/TextField"),V=require("@mui/x-date-pickers");function L({showError:s,meta:t,formHelperTextProps:e,helperText:r}){return s?o.jsx(c.FormHelperText,{...e,children:t.error||t.submitError}):r?o.jsx(c.FormHelperText,{...e,children:r}):o.jsx(o.Fragment,{})}const U={subscription:{error:!0,submitError:!0,dirtySinceLastSubmit:!0,touched:!0,modified:!0}},D=s=>v.useField(s,U),w=({meta:{submitError:s,dirtySinceLastSubmit:t,error:e,touched:r,modified:n}})=>!!((s&&!t||e)&&(r||n)),X=({meta:{submitError:s,dirtySinceLastSubmit:t,error:e,touched:r}})=>!!((s&&!t||e)&&r);function Y(s){const{name:t,fieldProps:e,...r}=s;return o.jsx(v.Field,{name:t,render:n=>o.jsx(Z,{...n,...r}),...e})}function Z(s){const{input:{name:t,value:e,onChange:r,onFocus:n,onBlur:l},meta:u,options:d,label:h,required:f,multiple:a,textFieldProps:P,getOptionValue:p,showError:b=w,placeholder:x,onChange:m,...i}=s;function T(j){return p?a?j?j.map(p):null:j?p(j):null:j}const{helperText:F,...k}=i,{variant:A,onFocus:y,onBlur:C,...g}=P||{};let E;p?e&&d.forEach(j=>{const S=p(j);a?(E||(E=[]),e.forEach(I=>{I===S&&E.push(j)})):e===S&&(E=j)}):E=e;const z=(j,S,I,B)=>{const R=T(S);r(R),m&&m(j,S,I,B)},{error:J,submitError:N}=u,W=b({meta:u});return o.jsx(K,{multiple:a,onChange:z,options:d,value:E||(a?[]:null),renderInput:j=>{var S,I,B,R,O;return o.jsx(Q,{label:h,required:f,helperText:W?J||N:F,error:W,name:t,placeholder:x,variant:A,onFocus:q=>{y==null||y(q),n(q)},onBlur:q=>{C==null||C(q),l(q)},...j,...g,InputProps:{...j.InputProps,...g.InputProps,...((S=g.InputProps)==null?void 0:S.startAdornment)&&{startAdornment:o.jsxs(o.Fragment,{children:[g.InputProps.startAdornment,(I=j.InputProps)==null?void 0:I.startAdornment]})},...((B=g.InputProps)==null?void 0:B.endAdornment)&&{endAdornment:o.jsxs(o.Fragment,{children:[(R=j.InputProps)==null?void 0:R.endAdornment,(O=g.InputProps)==null?void 0:O.endAdornment]})}},fullWidth:!0})},...k})}function _(s){const{required:t,label:e,data:r,name:n,helperText:l,fieldProps:u,formControlProps:d,formGroupProps:h,formLabelProps:f,formControlLabelProps:a,formHelperTextProps:P,showError:p=w,...b}=s,x=Array.isArray(r)?r:[r],m=!Array.isArray(r),i=D(n),T=p(i);return o.jsxs(c.FormControl,{required:t,error:T,...d,children:[e?o.jsx(c.FormLabel,{...f,children:e}):o.jsx(o.Fragment,{}),o.jsx(c.FormGroup,{...h,children:x.map((F,k)=>o.jsx(c.FormControlLabel,{name:n,label:F.label,value:m?void 0:F.value,disabled:F.disabled,control:o.jsx(v.Field,{type:"checkbox",name:n,render:({input:{name:A,value:y,onChange:C,checked:g,...E}})=>o.jsx(c.Checkbox,{name:A,value:y,onChange:C,checked:g,disabled:F.disabled,inputProps:{required:t,...E},indeterminate:F.indeterminate,...b}),...u}),...a},k))}),o.jsx(L,{showError:T,meta:i.meta,formHelperTextProps:P,helperText:l})]})}function rr(s){const{name:t,data:e,label:r,required:n,helperText:l,fieldProps:u,formControlProps:d,formGroupProps:h,formLabelProps:f,formControlLabelProps:a,formHelperTextProps:P,showError:p=w,...b}=s,x=Array.isArray(e)?e:[e],m=!Array.isArray(e),i=D(t),T=p(i);return o.jsxs(c.FormControl,{required:n,error:T,...d,children:[r?o.jsx(c.FormLabel,{...f,children:r}):o.jsx(o.Fragment,{}),o.jsx(c.FormGroup,{...h,children:x.map((F,k)=>o.jsx(c.FormControlLabel,{name:t,label:F.label,value:m?void 0:F.value,disabled:F.disabled,control:o.jsx(v.Field,{type:"checkbox",name:t,render:({input:{name:A,value:y,onChange:C,checked:g,...E}})=>o.jsx(c.Switch,{name:A,value:y,onChange:C,checked:g,disabled:F.disabled,required:n,inputProps:{required:n,...E},...b}),...u}),...a},k))}),o.jsx(L,{showError:T,meta:i.meta,formHelperTextProps:P,helperText:l})]})}function er(s){const{name:t,data:e,label:r,required:n,helperText:l,formLabelProps:u,formControlLabelProps:d,fieldProps:h,formControlProps:f,radioGroupProps:a,formHelperTextProps:P,showError:p=w,...b}=s,x=D(t),m=p(x);return o.jsxs(c.FormControl,{required:n,error:m,...f,children:[!!r&&o.jsx(c.FormLabel,{...u,children:r}),o.jsx(c.RadioGroup,{...a,children:e.map((i,T)=>o.jsx(c.FormControlLabel,{name:t,label:i.label,value:i.value,disabled:i.disabled,control:o.jsx(v.Field,{name:t,type:"radio",render:({input:{name:F,value:k,onChange:A,checked:y,...C}})=>o.jsx(c.Radio,{name:F,value:k,onChange:A,checked:y,disabled:i.disabled,required:n,inputProps:{required:n,...C},...b}),...h}),...d},T))}),o.jsx(L,{showError:m,meta:x.meta,formHelperTextProps:P,helperText:l})]})}function tr(s){const{name:t,label:e,data:r,children:n,required:l,multiple:u,helperText:d,fieldProps:h,inputLabelProps:f,formControlProps:a,formHelperTextProps:P,menuItemProps:p,showError:b=w,...x}=s;if(!r&&!n)throw new Error("Please specify either children or data as an attribute.");const{variant:m}=x,i=D(t),T=b(i);return o.jsx(v.Field,{name:t,render:({input:{name:F,value:k,onChange:A,...y}})=>{const C=u&&!k?[]:k,g=`select-input-${F}`;return o.jsxs(c.FormControl,{required:l,error:T,fullWidth:!0,variant:m,...a,children:[!!e&&o.jsx(c.InputLabel,{id:g,...f,children:e}),o.jsx(c.Select,{name:F,value:C,onChange:A,multiple:u,label:e,labelId:g,inputProps:{required:l,...y},...x,children:r?r.map(E=>o.jsx(c.MenuItem,{value:E.value,disabled:E.disabled,...p,children:E.label},E.value)):n}),o.jsx(L,{showError:T,meta:i.meta,formHelperTextProps:P,helperText:d})]})},...h})}function or(s){const{name:t,fieldProps:e,...r}=s;return o.jsx(v.Field,{name:t,render:n=>o.jsx(nr,{...n,...r}),...e})}function nr(s){const{input:{name:t,onChange:e,value:r,...n},meta:l,showError:u=w,...d}=s,{error:h,submitError:f}=l,a=u({meta:l}),{helperText:P,textFieldProps:p,slotProps:b,required:x,...m}=d;return o.jsx(V.DatePicker,{onChange:e,value:r===""?null:r,...m,slotProps:{...b,textField:{...p,helperText:a?h||f:P,inputProps:{onBlur:i=>{n.onBlur(i)},onFocus:i=>{n.onFocus(i)}},error:a,fullWidth:!0,name:t,onChange:e,value:r===""?null:r,required:x}}})}function sr(s){const{name:t,fieldProps:e,...r}=s;return o.jsx(v.Field,{name:t,render:n=>o.jsx(lr,{...n,...r}),...e})}function lr(s){const{input:{name:t,onChange:e,value:r,...n},meta:l,showError:u=w,...d}=s,{error:h,submitError:f}=l,a=u({meta:l}),{helperText:P,textFieldProps:p,slotProps:b,required:x,...m}=d;return o.jsx(V.DateTimePicker,{onChange:e,value:r===""?null:r,...m,slotProps:{...b,textField:{...p,helperText:a?h||f:P,inputProps:{onBlur:i=>{n.onBlur(i)},onFocus:i=>{n.onFocus(i)}},error:a,fullWidth:!0,name:t,onChange:e,value:r===""?null:r,required:x}}})}function ir(s){const{name:t,fieldProps:e,...r}=s;return o.jsx(v.Field,{name:t,render:n=>o.jsx(ur,{...n,...r}),...e})}function ur(s){const{input:{name:t,onChange:e,value:r,...n},meta:l,showError:u=w,...d}=s,{error:h,submitError:f}=l,a=u({meta:l}),{helperText:P,textFieldProps:p,required:b,...x}=d;return o.jsx(V.TimePicker,{onChange:e,value:r===""?null:r,...x,slotProps:{textField:{...p,helperText:a?h||f:P,inputProps:{onBlur:m=>{n.onBlur(m)},onFocus:m=>{n.onFocus(m)}},error:a,fullWidth:!0,name:t,onChange:e,value:r===""?null:r,required:b}}})}function ar(s){const{name:t,type:e,fieldProps:r,...n}=s;return o.jsx(v.Field,{name:t,type:e,render:({input:l,meta:u})=>o.jsx(cr,{input:l,meta:u,name:t,type:e,...n}),...r})}function cr(s){const{input:{name:t,value:e,type:r,onChange:n,onBlur:l,onFocus:u,...d},meta:h,required:f,fullWidth:a=!0,helperText:P,showError:p=w,...b}=s,{error:x,submitError:m}=h,i=p({meta:h});return o.jsx(c.TextField,{fullWidth:a,helperText:i?x||m:P,error:i,onChange:n,onBlur:l,onFocus:u,name:t,value:e,type:r,required:f,inputProps:{required:f,...d},...b})}function G(s,t,e){const r=String.prototype.split.call(t,/[,[\].]+?/).filter(Boolean).reduce((n,l)=>n!=null?n[l]:n,s);return r===void 0||r===s?e:r}function M(s,t,e){return Object(s)!==s||(Array.isArray(t)||(t=t.toString().match(/[^.[\]]+/g)||[]),t.slice(0,-1).reduce((r,n,l)=>Object(r[n])===r[n]?r[n]:r[n]=Math.abs(t[l+1])>>0===+t[l+1]?[]:{},s)[t[t.length-1]]=e),s}function H(s,t){return s.inner.reduce((e,r)=>{const{path:n,message:l}=r,u=t?t(r):l;if(n&&G(e,n)){const d=G(e,n);d.push(u),M(e,n,d)}else M(e,n,[u]);return e},{})}function dr(s,t){return async e=>{try{return await s.validate(e,{abortEarly:!1}),{}}catch(r){return H(r,t)}}}function pr(s,t){return e=>{try{return s.validateSync(e,{abortEarly:!1}),{}}catch(r){return H(r,t)}}}function $(s){const t=s.fields;return Object.keys(t).reduce((e,r)=>(t[r].fields?e[r]=$(t[r]):e[r]=!t[r].spec.optional,e),{})}function mr(){return o.jsx(v.FormSpy,{subscription:{values:!0},children:({values:s})=>o.jsx("pre",{children:JSON.stringify(s,void 0,2)})})}exports.Autocomplete=Y;exports.Checkboxes=_;exports.DatePicker=or;exports.DateTimePicker=sr;exports.Debug=mr;exports.ErrorMessage=L;exports.Radios=er;exports.Select=tr;exports.Switches=rr;exports.TextField=ar;exports.TimePicker=ir;exports.makeRequired=$;exports.makeValidate=dr;exports.makeValidateSync=pr;exports.showErrorOnBlur=X;exports.showErrorOnChange=w;exports.useFieldForErrors=D;
//# sourceMappingURL=mui-rff.cjs.js.map