@react-querybuilder/material
Version:
Custom MUI (Material Design) components for react-querybuilder
2 lines • 9.34 kB
JavaScript
import*as e from"react";import{createContext as t,forwardRef as n,useContext as r,useMemo as i}from"react";import{ActionElement as a,DragHandle as o,NotToggle as s,ShiftActions as c,ValueEditor as l,ValueSelector as u,defaultTranslations as d,getCompatContextProvider as f,getFirstOption as p,isOptionGroupArray as m,parseNumber as h,useValueEditor as g,useValueSelector as _}from"react-querybuilder";import{Close as v,ContentCopy as y,DragIndicator as b,KeyboardArrowDown as x,KeyboardArrowUp as S,Lock as C,LockOpen as w}from"@mui/icons-material";import{Button as T,Checkbox as E,FormControl as D,FormControlLabel as O,InputLabel as k,ListSubheader as A,MenuItem as j,Radio as M,RadioGroup as N,Select as P,Switch as F,TextField as I,TextareaAutosize as L}from"@mui/material";const R=t(null),z=({className:t,handleOnClick:n,label:i,title:o,disabled:s,disabledTranslation:c,testID:l,path:u,level:d,rules:f,context:p,validation:m,ruleOrGroup:h,schema:g,muiComponents:_,...v})=>{let y=r(R)??_,b=y?`mui`:`no-mui`;if(!y){let r=a;return e.createElement(r,{key:b,className:t,handleOnClick:n,label:i,title:o,disabled:s,disabledTranslation:c,testID:l,path:u,level:d,rules:f,context:p,validation:m,ruleOrGroup:h,schema:g})}let{Button:x}=y;return e.createElement(x,{key:b,variant:`contained`,color:`secondary`,className:t,title:c&&s?c.title:o,size:`small`,disabled:s&&!c,onClick:e=>n(e),...v},c&&s?c.label:i)},B=n(({className:t,title:n,path:i,level:a,testID:s,label:c,disabled:l,context:u,validation:d,schema:f,ruleOrGroup:p,muiComponents:m,...h},g)=>{let _=r(R)??m,v=_?`mui`:`no-mui`;if(!_)return e.createElement(o,{key:v,path:i,level:a,className:t,title:n,testID:s,label:c,disabled:l,context:u,validation:d,schema:f,ruleOrGroup:p});let{DragIndicator:y}=_;return e.createElement(`span`,{key:v,ref:g,className:t,title:n},e.createElement(y,h))}),V=({className:t,handleOnChange:n,label:a,checked:o,title:c,disabled:l,level:u,path:d,context:f,validation:p,testID:m,schema:h,ruleGroup:g,muiComponents:_,...v})=>{let y=r(R)??_,{FormControlLabel:b,Switch:x}=y??{},S=i(()=>x&&e.createElement(x,{checked:!!o,onChange:e=>n(e.target.checked),...v}),[o,n,v,x]),C=y?`mui`:`no-mui`;return y?e.createElement(b,{key:C,className:t,title:c,disabled:l,control:S,label:a??``}):e.createElement(s,{key:C,className:t,handleOnChange:n,label:a,checked:o,title:c,disabled:l,path:d,level:u,context:f,validation:p,testID:m,schema:h,ruleGroup:g})},H=({path:t,shiftUp:n,shiftDown:r,shiftUpDisabled:i,shiftDownDisabled:a,disabled:o,className:s,labels:l,titles:u,testID:d,muiComponents:f,...p})=>{let m=e.useContext(R)??f,h=m?`mui`:`no-mui`;if(!m)return e.createElement(c,{key:h,path:t,disabled:o,className:s,labels:l,titles:u,testID:d,shiftUp:n,shiftDown:r,shiftUpDisabled:i,shiftDownDisabled:a,...p});let{Button:g}=m;return e.createElement(`div`,{key:h,"data-testid":d,className:s},e.createElement(g,{sx:{boxShadow:`none`},variant:`contained`,color:`secondary`,className:s,title:u?.shiftUp,size:`small`,disabled:o||i,onClick:n},l?.shiftUp),e.createElement(g,{sx:{boxShadow:`none`},variant:`contained`,color:`secondary`,className:s,title:u?.shiftDown,size:`small`,disabled:o||a,onClick:r},l?.shiftDown))},U=t=>{let{muiComponents:n,...a}=t,{field:o,fieldData:s,operator:c,value:u,handleOnChange:d,title:f,className:m,type:_,inputType:v,path:y,level:b,values:x=[],listsAsArrays:S,separator:C,valueSource:w,disabled:T,testID:E,selectorComponent:D=t.schema.controls.valueSelector,showInputLabels:O,extraProps:k,parseNumbers:A,...j}=a,M=r(R)??n,{valueAsArray:N,multiValueHandler:P,bigIntValueHandler:F,parseNumberMethod:I,valueListItemClassName:L,inputTypeCoerced:z}=g(a),B=M?`mui`:`no-mui`,{Checkbox:V,FormControl:H,FormControlLabel:U,Radio:W,RadioGroup:G,Switch:K,TextareaAutosize:q,TextField:J,showInputLabels:Y}=i(()=>M??{},[M]);if(!M)return e.createElement(l,{skipHook:!0,key:B,...a});if(c===`null`||c===`notNull`)return null;let X=s?.placeholder??``,Z=O||Y;if((c===`between`||c===`notBetween`)&&(_===`select`||_===`text`)){let t=[`From`,`To`].map((t,n)=>_===`text`?e.createElement(J,{key:t,variant:`standard`,type:z,className:L,placeholder:X,value:N[n]??``,disabled:T,label:Z?t:void 0,onChange:e=>P(e.target.value,n),...k}):e.createElement(D,{key:t,...j,title:Z?t:void 0,path:y,level:b,className:L,handleOnChange:e=>P(e,n),muiComponents:M,disabled:T,value:N[n]??p(x),options:x,listsAsArrays:S}));return e.createElement(H,{key:B,"data-testid":E,className:m,title:f,disabled:T},t[0],C,t[1])}switch(_){case`select`:case`multiselect`:return e.createElement(D,{key:B,...j,muiComponents:M,path:y,level:b,className:m,handleOnChange:d,options:x,value:u,disabled:T,title:f,multiple:_===`multiselect`,listsAsArrays:S});case`textarea`:return e.createElement(q,{key:B,value:u,title:f,disabled:T,className:m,placeholder:X,onChange:e=>d(e.target.value),...k});case`switch`:return e.createElement(K,{key:B,checked:!!u,title:f,disabled:T,className:m,onChange:e=>d(e.target.checked),...k});case`checkbox`:return e.createElement(V,{key:B,className:m,title:f,onChange:e=>d(e.target.checked),checked:!!u,disabled:T,...k});case`radio`:return e.createElement(H,{key:B,className:m,title:f,component:`fieldset`,disabled:T,...k},e.createElement(G,{value:u,onChange:e=>d(e.target.value)},x.map(t=>e.createElement(U,{key:t.name,disabled:T,value:t.name,control:e.createElement(W,null),name:t.name,label:t.label}))))}return v===`bigint`?e.createElement(J,{key:B,variant:`standard`,"data-testid":E,type:z,placeholder:X,value:`${u}`,title:f,className:m,disabled:T,label:Z?f:void 0,onChange:e=>F(e.target.value),...k}):e.createElement(J,{key:B,variant:`standard`,type:z,value:u,title:f,disabled:T,className:m,placeholder:X,label:Z?f:void 0,onChange:e=>d(h(e.target.value,{parseNumbers:I})),...k})},W={ListSubheader:()=>null,MenuItem:()=>e.createElement(e.Fragment,null)},G=(t=[],{ListSubheader:n,MenuItem:r}=W)=>{if(m(t)){let i=[];for(let a of t)i.push(e.createElement(n,{key:a.label},a.label),...a.options.map(t=>e.createElement(r,{key:t.name,value:t.name},t.label)));return i}return Array.isArray(t)?t.map(t=>e.createElement(r,{key:t.name,value:t.name},t.label)):null},K=({className:t,handleOnChange:n,options:i,value:a,disabled:o,title:s,multiple:c,listsAsArrays:l,testID:d,rule:f,ruleGroup:p,rules:m,level:h,path:g,context:v,validation:y,operator:b,field:x,fieldData:S,schema:C,muiComponents:w,showInputLabels:T,defaultValue:E,...D})=>{let O=r(R)??w,{onChange:k,val:A}=_({handleOnChange:n,listsAsArrays:l,multiple:c,value:a}),j=e.useCallback(({target:{value:e}})=>{k(e)},[k]),M=O?`mui`:`no-mui`;if(!O){let r=u;return e.createElement(r,{key:M,className:t,handleOnChange:n,options:i,value:a,disabled:o,title:s,multiple:c,listsAsArrays:l,testID:d,rule:f,ruleGroup:p,rules:m,level:h,path:g,context:v,validation:y,operator:b,field:x,fieldData:S,schema:C})}let{FormControl:N,InputLabel:P,ListSubheader:F,MenuItem:I,Select:L,showInputLabels:z}=O,B=T||z;return e.createElement(N,{key:M,variant:`standard`,className:t,title:s,disabled:o},B&&e.createElement(P,null,s),e.createElement(L,{value:A,onChange:j,multiple:c,disabled:o,label:B?s:void 0,...D},G(i,{ListSubheader:F,MenuItem:I})))},q=()=>{let t=e.useContext(R);if(!t)return d.removeRule.label;let{CloseIcon:n}=t;return e.createElement(n,null)},J=()=>{let t=e.useContext(R);if(!t)return d.cloneRule.label;let{ContentCopyIcon:n}=t;return e.createElement(n,null)},Y=()=>{let t=e.useContext(R);if(!t)return d.lockRuleDisabled.label;let{LockIcon:n}=t;return e.createElement(n,null)},X=()=>{let t=e.useContext(R);if(!t)return d.lockRule.label;let{LockOpenIcon:n}=t;return e.createElement(n,null)},Z={removeGroup:{label:e.createElement(q,null)},removeRule:{label:e.createElement(q,null)},cloneRule:{label:e.createElement(J,null)},cloneRuleGroup:{label:e.createElement(J,null)},lockGroup:{label:e.createElement(X,null)},lockRule:{label:e.createElement(X,null)},lockGroupDisabled:{label:e.createElement(Y,null)},lockRuleDisabled:{label:e.createElement(Y,null)},shiftActionDown:{label:e.createElement(()=>{let t=e.useContext(R);if(!t)return d.shiftActionDown.label;let{KeyboardArrowDownIcon:n}=t;return e.createElement(n,null)},null)},shiftActionUp:{label:e.createElement(()=>{let t=e.useContext(R);if(!t)return d.shiftActionUp.label;let{KeyboardArrowUpIcon:n}=t;return e.createElement(n,null)},null)}},Q={DragIndicator:b,Button:T,Checkbox:E,CloseIcon:v,ContentCopyIcon:y,FormControl:D,FormControlLabel:O,InputLabel:k,KeyboardArrowDownIcon:x,KeyboardArrowUpIcon:S,ListSubheader:A,LockIcon:C,LockOpenIcon:w,MenuItem:j,Radio:M,RadioGroup:N,Select:P,Switch:F,TextareaAutosize:L,TextField:I},$=e=>{let t=r(R);return i(()=>e&&t?{...Q,...t,...e}:e?{...Q,...e}:t?{...Q,...t}:Q,[t,e])},ee={actionElement:z,dragHandle:B,notToggle:V,shiftActions:H,valueEditor:U,valueSelector:K},te=f({controlElements:ee,translations:Z}),ne=({muiComponents:t,showInputLabels:n,...r})=>{let a=$(t),o=i(()=>({...a,...t,showInputLabels:n}),[a,t,n]);return e.createElement(R.Provider,{value:o},e.createElement(te,r))};export{z as MaterialActionElement,B as MaterialDragHandle,V as MaterialNotToggle,H as MaterialShiftActions,U as MaterialValueEditor,K as MaterialValueSelector,ne as QueryBuilderMaterial,R as RQBMaterialContext,Q as defaultMuiComponents,ee as materialControlElements,Z as materialTranslations,$ as useMuiComponents};
//# sourceMappingURL=react-querybuilder_material.production.mjs.map