@react-querybuilder/material
Version:
Custom MUI (Material Design) components for react-querybuilder
2 lines • 8.97 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,ListSubheader as k,MenuItem as A,Radio as j,RadioGroup as M,Select as N,Switch as P,TextField as F,TextareaAutosize as I}from"@mui/material";const L=t(null),R=({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(L)??_,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)},z=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(L)??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))}),B=({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(L)??_,{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})},V=({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(L)??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))},H=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,extraProps:O,parseNumbers:k,...A}=a,j=r(L)??n,{valueAsArray:M,multiValueHandler:N,bigIntValueHandler:P,parseNumberMethod:F,valueListItemClassName:I,inputTypeCoerced:R}=g(a),z=j?`mui`:`no-mui`,{Checkbox:B,FormControl:V,FormControlLabel:H,Radio:U,RadioGroup:W,Switch:G,TextareaAutosize:K,TextField:q}=i(()=>j??{},[j]);if(!j)return e.createElement(l,{skipHook:!0,key:z,...a});if(c===`null`||c===`notNull`)return null;let J=s?.placeholder??``;if((c===`between`||c===`notBetween`)&&(_===`select`||_===`text`)){let t=[`from`,`to`].map((t,n)=>_===`text`?e.createElement(q,{key:t,variant:`standard`,type:R,className:I,placeholder:J,value:M[n]??``,disabled:T,onChange:e=>N(e.target.value,n),...O}):e.createElement(D,{key:t,...A,path:y,level:b,className:I,handleOnChange:e=>N(e,n),muiComponents:j,disabled:T,value:M[n]??p(x),options:x,listsAsArrays:S}));return e.createElement(V,{key:z,"data-testid":E,className:m,title:f,disabled:T},t[0],C,t[1])}switch(_){case`select`:case`multiselect`:return e.createElement(D,{key:z,...A,muiComponents:j,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(K,{key:z,value:u,title:f,disabled:T,className:m,placeholder:J,onChange:e=>d(e.target.value),...O});case`switch`:return e.createElement(G,{key:z,checked:!!u,title:f,disabled:T,className:m,onChange:e=>d(e.target.checked),...O});case`checkbox`:return e.createElement(B,{key:z,className:m,title:f,onChange:e=>d(e.target.checked),checked:!!u,disabled:T,...O});case`radio`:return e.createElement(V,{key:z,className:m,title:f,component:`fieldset`,disabled:T,...O},e.createElement(W,{value:u,onChange:e=>d(e.target.value)},x.map(t=>e.createElement(H,{key:t.name,disabled:T,value:t.name,control:e.createElement(U,null),name:t.name,label:t.label}))))}return v===`bigint`?e.createElement(q,{"data-testid":E,type:R,placeholder:J,value:`${u}`,title:f,className:m,disabled:T,onChange:e=>P(e.target.value),...O}):e.createElement(q,{variant:`standard`,key:z,type:R,value:u,title:f,disabled:T,className:m,placeholder:J,onChange:e=>d(h(e.target.value,{parseNumbers:F})),...O})},U=(t,{ListSubheader:n,MenuItem:r})=>{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},W=({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,defaultValue:T,...E})=>{let D=r(L)??w,{onChange:O,val:k}=_({handleOnChange:n,listsAsArrays:l,multiple:c,value:a}),A=e.useCallback(({target:{value:e}})=>{O(e)},[O]),j=D?`mui`:`no-mui`;if(!D){let r=u;return e.createElement(r,{key:j,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:M,Select:N,ListSubheader:P,MenuItem:F}=D;return e.createElement(M,{key:j,variant:`standard`,className:t,title:s,disabled:o},e.createElement(N,{value:k,onChange:A,multiple:c,disabled:o,...E},U(i??[],{ListSubheader:P,MenuItem:F})))},G=()=>{let t=e.useContext(L);if(!t)return d.removeRule.label;let{CloseIcon:n}=t;return e.createElement(n,null)},K=()=>{let t=e.useContext(L);if(!t)return d.cloneRule.label;let{ContentCopyIcon:n}=t;return e.createElement(n,null)},q=()=>{let t=e.useContext(L);if(!t)return d.lockRuleDisabled.label;let{LockIcon:n}=t;return e.createElement(n,null)},J=()=>{let t=e.useContext(L);if(!t)return d.lockRule.label;let{LockOpenIcon:n}=t;return e.createElement(n,null)},Y=()=>{let t=e.useContext(L);if(!t)return d.shiftActionDown.label;let{KeyboardArrowDownIcon:n}=t;return e.createElement(n,null)},ee=()=>{let t=e.useContext(L);if(!t)return d.shiftActionUp.label;let{KeyboardArrowUpIcon:n}=t;return e.createElement(n,null)},X={removeGroup:{label:e.createElement(G,null)},removeRule:{label:e.createElement(G,null)},cloneRule:{label:e.createElement(K,null)},cloneRuleGroup:{label:e.createElement(K,null)},lockGroup:{label:e.createElement(J,null)},lockRule:{label:e.createElement(J,null)},lockGroupDisabled:{label:e.createElement(q,null)},lockRuleDisabled:{label:e.createElement(q,null)},shiftActionDown:{label:e.createElement(Y,null)},shiftActionUp:{label:e.createElement(ee,null)}},Z={DragIndicator:b,Button:T,Checkbox:E,CloseIcon:v,ContentCopyIcon:y,FormControl:D,FormControlLabel:O,KeyboardArrowDownIcon:x,KeyboardArrowUpIcon:S,ListSubheader:k,LockIcon:C,LockOpenIcon:w,MenuItem:A,Radio:j,RadioGroup:M,Select:N,Switch:P,TextareaAutosize:I,TextField:F},Q=e=>{let t=r(L),n=i(()=>e&&t?{...Z,...t,...e}:e?{...Z,...e}:t?{...Z,...t}:Z,[t,e]);return n},$={actionElement:R,dragHandle:z,notToggle:B,shiftActions:V,valueEditor:H,valueSelector:W},te=f({controlElements:$,translations:X}),ne=({muiComponents:t,...n})=>{let r=Q(t),a=i(()=>({...r,...t}),[r,t]);return e.createElement(L.Provider,{value:a},e.createElement(te,n))};export{R as MaterialActionElement,z as MaterialDragHandle,B as MaterialNotToggle,V as MaterialShiftActions,H as MaterialValueEditor,W as MaterialValueSelector,ne as QueryBuilderMaterial,L as RQBMaterialContext,Z as defaultMuiComponents,$ as materialControlElements,X as materialTranslations,Q as useMuiComponents};
//# sourceMappingURL=react-querybuilder_material.production.mjs.map