UNPKG

@react-querybuilder/tremor

Version:

Custom Tremor components for react-querybuilder

2 lines 4.99 kB
import{ValueEditor as e,getCompatContextProvider as t,isOptionGroupArray as n,toArray as r,useValueEditor as i,useValueSelector as a}from"react-querybuilder";import{Button as o,DatePicker as s,DateRangePicker as c,MultiSelect as l,MultiSelectItem as u,NumberInput as d,Select as f,SelectItem as p,Switch as m,TextInput as h,Textarea as g}from"@tremor/react";import*as _ from"react";import v from"dayjs";const y=({className:e,handleOnClick:t,label:n,title:r,disabled:i,disabledTranslation:a,testID:s,rules:c,ruleOrGroup:l,path:u,level:d,context:f,validation:p,schema:m,...h})=>_.createElement(o,{...h,"data-testid":s,type:`button`,variant:`primary`,className:e,title:a&&i?a.title:r,onClick:e=>t(e),disabled:i&&!a},a&&i?a.label:n),b=({className:e,handleOnChange:t,label:n,checked:r,title:i,disabled:a,testID:o,path:s,level:c,context:l,validation:u,schema:d,ruleGroup:f,...p})=>{let h=_.useId();return _.createElement(`div`,{className:e,"data-testid":o},_.createElement(m,{...p,id:h,name:h,title:i,disabled:a,checked:r,onChange:t}),_.createElement(`label`,{htmlFor:h,title:i},n))},x=({shiftUp:e,shiftDown:t,shiftUpDisabled:n,shiftDownDisabled:r,disabled:i,className:a,labels:s,titles:c,testID:l})=>_.createElement(`div`,{"data-testid":l,className:a},_.createElement(o,{type:`button`,variant:`light`,disabled:i||n,onClick:e,title:c?.shiftUp},s?.shiftUp),_.createElement(o,{type:`button`,variant:`light`,disabled:i||r,onClick:t,title:c?.shiftDown},s?.shiftDown)),S=(e,t)=>{let r=n(e)?e.flatMap(e=>e.options):e;return Array.isArray(r)?r.map(e=>t?_.createElement(u,{key:e.name,value:e.name,"aria-disabled":!!e.disabled},e.label):_.createElement(p,{key:e.name,value:e.name,"aria-disabled":!!e.disabled},e.label)):null},C=({className:e,handleOnChange:t,options:n,value:i,title:o,disabled:s,multiple:c,listsAsArrays:u,testID:d,placeholder:p,fieldData:m,path:h,level:g,context:v,validation:y,schema:b,rule:x,ruleGroup:C,rules:w,...T})=>{let{onChange:E,val:D}=a({handleOnChange:t,listsAsArrays:u,multiple:c,value:i}),O=_.useMemo(()=>S(n,c),[c,n]),{enableClear:k,...A}=T;return c?_.createElement(l,{...A,"data-testid":d,title:o,className:e,disabled:s,value:r(D),placeholder:p,onValueChange:E},O):_.createElement(f,{enableClear:!1,...T,"data-testid":d,title:o,className:e,value:i,disabled:s,onValueChange:E},O)},w=`YYYY-MM-DD`,T=e=>_.createElement(C,{...e,enableClear:!0}),E=t=>{let{fieldData:n,operator:r,value:a,handleOnChange:o,title:l,className:u,type:f,inputType:p,values:y,listsAsArrays:b,parseNumbers:x,separator:S,valueSource:C,disabled:E,testID:D,selectorComponent:O=T,validation:k,extraProps:A}=t,{valueAsArray:j,multiValueHandler:M,bigIntValueHandler:N,valueListItemClassName:P,inputTypeCoerced:F}=i(t);if(r===`null`||r===`notNull`)return null;let I=n?.placeholder??``;if((r===`between`||r===`notBetween`)&&(f===`select`||f===`text`)&&F!==`date`){if(f===`text`){let e=[`from`,`to`].map((e,t)=>_.createElement(h,{key:e,type:F,placeholder:I,value:j[t]??``,className:`${P} input`,disabled:E,onValueChange:e=>M(e,t),...A}));return _.createElement(`span`,{"data-testid":D,className:u,title:l},e[0],S,e[1])}return _.createElement(e,{...t,skipHook:!0,selectorComponent:O})}switch(f){case`select`:case`multiselect`:return _.createElement(e,{...t,skipHook:!0,selectorComponent:O});case`textarea`:return _.createElement(g,{className:u,value:a,title:l,placeholder:I,disabled:E,onValueChange:o,...A});case`switch`:return _.createElement(m,{className:u,title:l,checked:a,disabled:E,onChange:o,...A});case`checkbox`:case`radio`:return _.createElement(e,{...t,skipHook:!0})}if(F===`date`){if(r===`between`||r===`notBetween`){let e=[null,null].map((e,t)=>{if(!j[t])return e;let n=v(j[t]);return n.isValid()||(n=v(`${v().format(`YYYY-MM-DD`)}`)),n.toDate()});return _.createElement(c,{"data-testid":D,value:{from:e[0],to:e[1]},className:u,disabled:E,placeholder:I,enableSelect:!1,enableClear:!0,onValueChange:e=>{let t=[e.from,e.to].map(e=>e?v(e).format(w):``);o(b?t:t.join(`,`))},...A})}return _.createElement(s,{"data-testid":D,title:l,className:u,placeholder:I,disabled:E,enableClear:!0,value:a&&v(a).isValid()?v(a).toDate():void 0,onValueChange:e=>o(e?v(e).format(w):``),...A})}return F===`number`?_.createElement(d,{"data-testid":D,title:l,className:u,placeholder:I,disabled:E,value:a,onValueChange:o,...A}):p===`bigint`?_.createElement(h,{"data-testid":D,type:F,placeholder:I,value:`${a}`,title:l,className:u,disabled:E,onChange:e=>N(e.target.value),...A}):_.createElement(h,{"data-testid":D,title:l,className:u,placeholder:I,type:F,disabled:E,value:a,onValueChange:o,...A})},D={actionElement:y,notToggle:b,shiftActions:x,valueEditor:E,valueSelector:C},O={notToggle:`flex flex-row gap-1`},k=t({controlClassnames:O,controlElements:D});export{k as QueryBuilderTremor,y as TremorActionElement,b as TremorNotToggle,x as TremorShiftActions,E as TremorValueEditor,C as TremorValueSelector,O as tremorControlClassnames,D as tremorControlElements}; //# sourceMappingURL=react-querybuilder_tremor.production.mjs.map