@react-querybuilder/bootstrap 4.1.2 → 4.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/README.md +7 -23
  2. package/dist/index.cjs.js +2 -1
  3. package/dist/index.cjs.js.map +1 -0
  4. package/dist/index.es.js +117 -41
  5. package/dist/index.es.js.map +1 -0
  6. package/dist/types/Bootstrap.test.d.ts +1 -0
  7. package/dist/types/BootstrapDragHandle.d.ts +1 -2
  8. package/dist/types/BootstrapValueEditor.d.ts +2 -2
  9. package/dist/types/index.d.ts +7 -3
  10. package/package.json +8 -6
  11. package/dist/types/utils.d.ts +0 -4
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  ## @react-querybuilder/bootstrap
2
2
 
3
- Official [Bootstrap](https://getbootstrap.com/) components for [react-querybuilder](https://npmjs.com/package/react-querybuilder).
3
+ Official [react-querybuilder](https://npmjs.com/package/react-querybuilder) components for [Bootstrap](https://getbootstrap.com/).
4
4
 
5
5
  To see them in action, check out the [`react-querybuilder` demo](https://react-querybuilder.js.org/react-querybuilder/) and choose "Bootstrap" from the Style drop-down.
6
6
 
@@ -17,14 +17,13 @@ yarn add react-querybuilder @react-querybuilder/bootstrap bootstrap bootstrap-ic
17
17
  ```tsx
18
18
  import QueryBuilder, { RuleGroupType } from 'react-querybuilder';
19
19
  import {
20
- BootstrapDragHandle,
21
- BootstrapNotToggle,
22
- BootstrapValueEditor
20
+ bootstrapControlClassnames,
21
+ bootstrapControlElements,
23
22
  } from '@react-querybuilder/bootstrap';
24
23
 
25
24
  const fields = [
26
25
  { name: 'firstName', label: 'First Name' },
27
- { name: 'lastName', label: 'Last Name' }
26
+ { name: 'lastName', label: 'Last Name' },
28
27
  ];
29
28
 
30
29
  const App = () => {
@@ -34,24 +33,9 @@ const App = () => {
34
33
  <QueryBuilder
35
34
  fields={fields}
36
35
  query={query}
37
- onQueryChange={(q) => setQuery(q)}
38
- controlClassnames={{
39
- addGroup: 'btn btn-secondary btn-sm',
40
- addRule: 'btn btn-primary btn-sm',
41
- cloneGroup: 'btn btn-secondary btn-sm',
42
- cloneRule: 'btn btn-secondary btn-sm',
43
- removeGroup: 'btn btn-danger btn-sm',
44
- removeRule: 'btn btn-danger btn-sm',
45
- combinators: 'form-select form-select-sm',
46
- fields: 'form-select form-select-sm',
47
- operators: 'form-select form-select-sm',
48
- value: 'form-control form-control-sm'
49
- }}
50
- controlElements={{
51
- dragHandle: BootstrapDragHandle,
52
- notToggle: BootstrapNotToggle,
53
- valueEditor: BootstrapValueEditor
54
- }}
36
+ onQueryChange={q => setQuery(q)}
37
+ controlClassnames={bootstrapControlClassnames}
38
+ controlElements={bootstrapControlElements}
55
39
  />
56
40
  );
57
41
  };
package/dist/index.cjs.js CHANGED
@@ -1 +1,2 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var i=require("react");function b(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var c=b(i);const p=i.forwardRef(({className:e,title:t},a)=>c.default.createElement("span",{ref:a,className:e,title:t},c.default.createElement("i",{className:"bi bi-grip-vertical"})));p.displayName="BootstrapDragHandle";const g=({className:e,handleOnChange:t,title:a,label:n,checked:r,disabled:o})=>{const u=i.useRef(`notToggle-${Math.random()}`);return c.default.createElement("div",{className:`form-check-inline form-switch ${e}`},c.default.createElement("input",{id:u.current,className:"form-check-input",type:"checkbox",onChange:s=>t(s.target.checked),checked:!!r,disabled:o}),c.default.createElement("label",{title:a,htmlFor:u.current,className:"form-check-label"},n))};g.displayName="BootstrapNotToggle";const N=e=>Array.isArray(e)&&e.length>0&&"options"in e[0],B=e=>N(e)?e.map(t=>c.default.createElement("optgroup",{key:t.label,label:t.label},t.options.map(a=>c.default.createElement("option",{key:a.name,value:a.name},a.label)))):Array.isArray(e)?e.map(t=>c.default.createElement("option",{key:t.name,value:t.name},t.label)):null,k=({fieldData:e,operator:t,value:a,handleOnChange:n,title:r,className:o,type:u,inputType:s,values:f,disabled:m})=>{var d;if(i.useEffect(()=>{s==="number"&&!["between","notBetween","in","notIn"].includes(t)&&typeof a=="string"&&a.includes(",")&&n("")},[s,t,a,n]),t==="null"||t==="notNull")return null;const y=(d=e==null?void 0:e.placeholder)!=null?d:"",h=["between","notBetween","in","notIn"].includes(t)?"text":s||"text";switch(u){case"select":return c.default.createElement("select",{className:`${o} form-select form-select-sm`,title:r,onChange:l=>n(l.target.value),value:a,disabled:m},B(f));case"checkbox":return c.default.createElement("input",{type:"checkbox",className:`form-check-input ${o}`,title:r,disabled:m,onChange:l=>n(l.target.checked),checked:!!a});case"radio":return c.default.createElement("span",{title:r},f.map(l=>c.default.createElement("div",{key:l.name,className:"form-check form-check-inline"},c.default.createElement("input",{className:"form-check-input",type:"radio",id:l.name,value:l.name,checked:a===l.name,disabled:m,onChange:E=>n(E.target.value)}),c.default.createElement("label",{className:"form-check-label",htmlFor:l.name},l.label))));default:return c.default.createElement("input",{type:h,value:a,title:r,className:o,disabled:m,placeholder:y,onChange:l=>n(l.target.value)})}};k.displayName="ValueEditor";exports.BootstrapDragHandle=p;exports.BootstrapNotToggle=g;exports.BootstrapValueEditor=k;
1
+ "use strict";var _=Object.defineProperty,$=Object.defineProperties;var G=Object.getOwnPropertyDescriptors;var d=Object.getOwnPropertySymbols;var y=Object.prototype.hasOwnProperty,N=Object.prototype.propertyIsEnumerable;var B=(e,r,t)=>r in e?_(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,w=(e,r)=>{for(var t in r||(r={}))y.call(r,t)&&B(e,t,r[t]);if(d)for(var t of d(r))N.call(r,t)&&B(e,t,r[t]);return e},x=(e,r)=>$(e,G(r));var R=(e,r)=>{var t={};for(var o in e)y.call(e,o)&&r.indexOf(o)<0&&(t[o]=e[o]);if(e!=null&&d)for(var o of d(e))r.indexOf(o)<0&&N.call(e,o)&&(t[o]=e[o]);return t};Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var f=require("react"),S=require("react-querybuilder");function V(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var c=V(f);const i=f.forwardRef(({className:e,title:r},t)=>c.default.createElement("span",{ref:t,className:e,title:r},c.default.createElement("i",{className:"bi bi-grip-vertical"})));i.displayName="BootstrapDragHandle";const p=({className:e,handleOnChange:r,title:t,label:o,checked:a,disabled:l})=>{const m=f.useRef(`notToggle-${Math.random()}`);return c.default.createElement("div",{className:`form-check-inline form-switch ${e}`},c.default.createElement("input",{id:m.current,className:"form-check-input",type:"checkbox",onChange:u=>r(u.target.checked),checked:!!a,disabled:l}),c.default.createElement("label",{title:t,htmlFor:m.current,className:"form-check-label"},o))};p.displayName="BootstrapNotToggle";const b=j=>{var k=j,{fieldData:e,operator:r,value:t,handleOnChange:o,title:a,className:l,type:m,inputType:u,values:g,disabled:s}=k,C=R(k,["fieldData","operator","value","handleOnChange","title","className","type","inputType","values","disabled"]);var E;if(f.useEffect(()=>{u==="number"&&!["between","notBetween","in","notIn"].includes(r)&&typeof t=="string"&&t.includes(",")&&o("")},[u,r,t,o]),r==="null"||r==="notNull")return null;const h=(E=e==null?void 0:e.placeholder)!=null?E:"",T=["between","notBetween","in","notIn"].includes(r)?"text":u||"text";switch(m){case"select":case"multiselect":return c.default.createElement(S.ValueSelector,x(w({},C),{className:`${l} form-select form-select-sm`,title:a,handleOnChange:o,value:t,disabled:s,multiple:m==="multiselect",options:g}));case"textarea":return c.default.createElement("textarea",{value:t,title:a,className:l,disabled:s,placeholder:h,onChange:n=>o(n.target.value)});case"switch":return c.default.createElement("span",{className:`custom-control custom-switch ${l}`},c.default.createElement("input",{type:"checkbox",className:"form-check-input custom-control-input",title:a,disabled:s,onChange:n=>o(n.target.checked),checked:!!t}));case"checkbox":return c.default.createElement("input",{type:"checkbox",className:`form-check-input ${l}`,title:a,disabled:s,onChange:n=>o(n.target.checked),checked:!!t});case"radio":return c.default.createElement("span",{title:a},g.map(n=>c.default.createElement("div",{key:n.name,className:"form-check form-check-inline"},c.default.createElement("input",{className:"form-check-input",type:"radio",id:n.name,value:n.name,checked:t===n.name,disabled:s,onChange:H=>o(H.target.value)}),c.default.createElement("label",{className:"form-check-label",htmlFor:n.name},n.label))))}return c.default.createElement("input",{type:T,value:t,title:a,className:l,disabled:s,placeholder:h,onChange:n=>o(n.target.value)})};b.displayName="BootstrapValueEditor";const q={dragHandle:i,notToggle:p,valueEditor:b},M={addGroup:"btn btn-secondary btn-sm",addRule:"btn btn-primary btn-sm",cloneGroup:"btn btn-secondary btn-sm",cloneRule:"btn btn-secondary btn-sm",lockGroup:"btn btn-secondary btn-sm",lockRule:"btn btn-secondary btn-sm",removeGroup:"btn btn-danger btn-sm",removeRule:"btn btn-danger btn-sm",combinators:"form-select form-select-sm",fields:"form-select form-select-sm",operators:"form-select form-select-sm",value:"form-control form-control-sm",valueSource:"form-select form-select-sm"};exports.BootstrapDragHandle=i;exports.BootstrapNotToggle=p;exports.BootstrapValueEditor=b;exports.bootstrapControlClassnames=M;exports.bootstrapControlElements=q;
2
+ //# sourceMappingURL=index.cjs.js.map
package/dist/index.cjs.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.cjs.js","sources":["../src/BootstrapDragHandle.tsx","../src/BootstrapNotToggle.tsx","../src/BootstrapValueEditor.tsx","../src/index.ts"],"sourcesContent":["import { forwardRef } from 'react';\nimport type { DragHandleProps } from 'react-querybuilder';\n\nexport const BootstrapDragHandle = forwardRef<HTMLSpanElement, DragHandleProps>(\n ({ className, title }, dragRef) => (\n <span ref={dragRef} className={className} title={title}>\n <i className=\"bi bi-grip-vertical\"></i>\n </span>\n )\n);\n\nBootstrapDragHandle.displayName = 'BootstrapDragHandle';\n","import { useRef } from 'react';\nimport type { NotToggleProps } from 'react-querybuilder';\n\nexport const BootstrapNotToggle = ({\n className,\n handleOnChange,\n title,\n label,\n checked,\n disabled,\n}: NotToggleProps) => {\n const id = useRef(`notToggle-${Math.random()}`);\n\n return (\n <div className={`form-check-inline form-switch ${className}`}>\n <input\n id={id.current}\n className=\"form-check-input\"\n type=\"checkbox\"\n onChange={e => handleOnChange(e.target.checked)}\n checked={!!checked}\n disabled={disabled}\n />\n <label title={title} htmlFor={id.current} className=\"form-check-label\">\n {label}\n </label>\n </div>\n );\n};\n\nBootstrapNotToggle.displayName = 'BootstrapNotToggle';\n","import { useEffect } from 'react';\nimport { ValueEditorProps, ValueSelector } from 'react-querybuilder';\n\nexport const BootstrapValueEditor = ({\n fieldData,\n operator,\n value,\n handleOnChange,\n title,\n className,\n type,\n inputType,\n values,\n disabled,\n ...props\n}: ValueEditorProps) => {\n useEffect(() => {\n if (\n inputType === 'number' &&\n !['between', 'notBetween', 'in', 'notIn'].includes(operator) &&\n typeof value === 'string' &&\n value.includes(',')\n ) {\n handleOnChange('');\n }\n }, [inputType, operator, value, handleOnChange]);\n\n if (operator === 'null' || operator === 'notNull') {\n return null;\n }\n\n const placeHolderText = fieldData?.placeholder ?? '';\n const inputTypeCoerced = ['between', 'notBetween', 'in', 'notIn'].includes(operator)\n ? 'text'\n : inputType || 'text';\n\n switch (type) {\n case 'select':\n case 'multiselect':\n return (\n <ValueSelector\n {...props}\n className={`${className} form-select form-select-sm`}\n title={title}\n handleOnChange={handleOnChange}\n value={value}\n disabled={disabled}\n multiple={type === 'multiselect'}\n options={values!}\n />\n );\n\n case 'textarea':\n return (\n <textarea\n value={value}\n title={title}\n className={className}\n disabled={disabled}\n placeholder={placeHolderText}\n onChange={e => handleOnChange(e.target.value)}\n />\n );\n\n case 'switch':\n return (\n <span className={`custom-control custom-switch ${className}`}>\n <input\n type=\"checkbox\"\n className={`form-check-input custom-control-input`}\n title={title}\n disabled={disabled}\n onChange={e => handleOnChange(e.target.checked)}\n checked={!!value}\n />\n </span>\n );\n\n case 'checkbox':\n return (\n <input\n type=\"checkbox\"\n className={`form-check-input ${className}`}\n title={title}\n disabled={disabled}\n onChange={e => handleOnChange(e.target.checked)}\n checked={!!value}\n />\n );\n\n case 'radio':\n return (\n <span title={title}>\n {values!.map(v => (\n <div key={v.name} className=\"form-check form-check-inline\">\n <input\n className=\"form-check-input\"\n type=\"radio\"\n id={v.name}\n value={v.name}\n checked={value === v.name}\n disabled={disabled}\n onChange={e => handleOnChange(e.target.value)}\n />\n <label className=\"form-check-label\" htmlFor={v.name}>\n {v.label}\n </label>\n </div>\n ))}\n </span>\n );\n }\n\n return (\n <input\n type={inputTypeCoerced}\n value={value}\n title={title}\n className={className}\n disabled={disabled}\n placeholder={placeHolderText}\n onChange={e => handleOnChange(e.target.value)}\n />\n );\n};\n\nBootstrapValueEditor.displayName = 'BootstrapValueEditor';\n","import type { Classnames, Controls } from 'react-querybuilder';\nimport { BootstrapDragHandle } from './BootstrapDragHandle';\nimport { BootstrapNotToggle } from './BootstrapNotToggle';\nimport { BootstrapValueEditor } from './BootstrapValueEditor';\n\nexport const bootstrapControlElements: Partial<Controls> = {\n dragHandle: BootstrapDragHandle,\n notToggle: BootstrapNotToggle,\n valueEditor: BootstrapValueEditor,\n};\n\nexport const bootstrapControlClassnames: Partial<Classnames> = {\n addGroup: 'btn btn-secondary btn-sm',\n addRule: 'btn btn-primary btn-sm',\n cloneGroup: 'btn btn-secondary btn-sm',\n cloneRule: 'btn btn-secondary btn-sm',\n lockGroup: 'btn btn-secondary btn-sm',\n lockRule: 'btn btn-secondary btn-sm',\n removeGroup: 'btn btn-danger btn-sm',\n removeRule: 'btn btn-danger btn-sm',\n combinators: 'form-select form-select-sm',\n fields: 'form-select form-select-sm',\n operators: 'form-select form-select-sm',\n value: 'form-control form-control-sm',\n valueSource: 'form-select form-select-sm',\n};\n\nexport { BootstrapDragHandle, BootstrapNotToggle, BootstrapValueEditor };\n"],"names":["forwardRef","useRef","ValueSelector"],"mappings":"u0BAGa,GAAsBA,aACjC,CAAC,CAAE,YAAW,SAAS,4BACpB,OAAD,CAAM,IAAK,EAAS,YAAsB,iCACvC,IAAD,CAAG,UAAU,0BAKnB,EAAoB,YAAc,2BCRrB,GAAqB,CAAC,CACjC,YACA,iBACA,QACA,QACA,UACA,cACoB,MACd,GAAKC,SAAO,aAAa,KAAK,2CAGjC,MAAD,CAAK,UAAW,iCAAiC,6BAC9C,QAAD,CACE,GAAI,EAAG,QACP,UAAU,mBACV,KAAK,WACL,SAAU,GAAK,EAAe,EAAE,OAAO,SACvC,QAAS,CAAC,CAAC,EACX,qCAED,QAAD,CAAO,QAAc,QAAS,EAAG,QAAS,UAAU,oBACjD,KAMT,EAAmB,YAAc,0BC3BpB,GAAuB,AAAC,GAYb,CAZa,QACnC,aACA,WACA,QACA,iBACA,QACA,YACA,OACA,YACA,SACA,YAVmC,EAWhC,IAXgC,EAWhC,CAVH,YACA,WACA,QACA,iBACA,QACA,YACA,OACA,YACA,SACA,kCAGU,IAAM,CAEZ,IAAc,UACd,CAAC,CAAC,UAAW,aAAc,KAAM,SAAS,SAAS,IACnD,MAAO,IAAU,UACjB,EAAM,SAAS,QAEA,KAEhB,CAAC,EAAW,EAAU,EAAO,IAE5B,IAAa,QAAU,IAAa,gBAC/B,WAGH,GAAkB,oBAAW,cAAX,OAA0B,GAC5C,EAAmB,CAAC,UAAW,aAAc,KAAM,SAAS,SAAS,GACvE,OACA,GAAa,cAET,OACD,aACA,6CAEAC,gBAAD,OACM,GADN,CAEE,UAAW,GAAG,+BACd,QACA,iBACA,QACA,WACA,SAAU,IAAS,cACnB,QAAS,SAIV,0CAEA,WAAD,CACE,QACA,QACA,YACA,WACA,YAAa,EACb,SAAU,GAAK,EAAe,EAAE,OAAO,aAIxC,wCAEA,OAAD,CAAM,UAAW,gCAAgC,6BAC9C,QAAD,CACE,KAAK,WACL,UAAW,wCACX,QACA,WACA,SAAU,GAAK,EAAe,EAAE,OAAO,SACvC,QAAS,CAAC,CAAC,SAKd,0CAEA,QAAD,CACE,KAAK,WACL,UAAW,oBAAoB,IAC/B,QACA,WACA,SAAU,GAAK,EAAe,EAAE,OAAO,SACvC,QAAS,CAAC,CAAC,QAIZ,uCAEA,OAAD,CAAM,SACH,EAAQ,IAAI,2BACV,MAAD,CAAK,IAAK,EAAE,KAAM,UAAU,wDACzB,QAAD,CACE,UAAU,mBACV,KAAK,QACL,GAAI,EAAE,KACN,MAAO,EAAE,KACT,QAAS,IAAU,EAAE,KACrB,WACA,SAAU,GAAK,EAAe,EAAE,OAAO,iCAExC,QAAD,CAAO,UAAU,mBAAmB,QAAS,EAAE,MAC5C,EAAE,yCASd,QAAD,CACE,KAAM,EACN,QACA,QACA,YACA,WACA,YAAa,EACb,SAAU,GAAK,EAAe,EAAE,OAAO,UAK7C,EAAqB,YAAc,4BCzHtB,GAA8C,CACzD,WAAY,EACZ,UAAW,EACX,YAAa,GAGF,EAAkD,CAC7D,SAAU,2BACV,QAAS,yBACT,WAAY,2BACZ,UAAW,2BACX,UAAW,2BACX,SAAU,2BACV,YAAa,wBACb,WAAY,wBACZ,YAAa,6BACb,OAAQ,6BACR,UAAW,6BACX,MAAO,+BACP,YAAa"}
package/dist/index.es.js CHANGED
@@ -1,4 +1,36 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __defProps = Object.defineProperties;
3
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
7
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
+ var __spreadValues = (a, b) => {
9
+ for (var prop in b || (b = {}))
10
+ if (__hasOwnProp.call(b, prop))
11
+ __defNormalProp(a, prop, b[prop]);
12
+ if (__getOwnPropSymbols)
13
+ for (var prop of __getOwnPropSymbols(b)) {
14
+ if (__propIsEnum.call(b, prop))
15
+ __defNormalProp(a, prop, b[prop]);
16
+ }
17
+ return a;
18
+ };
19
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
+ var __objRest = (source, exclude) => {
21
+ var target = {};
22
+ for (var prop in source)
23
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
24
+ target[prop] = source[prop];
25
+ if (source != null && __getOwnPropSymbols)
26
+ for (var prop of __getOwnPropSymbols(source)) {
27
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
28
+ target[prop] = source[prop];
29
+ }
30
+ return target;
31
+ };
1
32
  import React, { forwardRef, useRef, useEffect } from "react";
33
+ import { ValueSelector } from "react-querybuilder";
2
34
  const BootstrapDragHandle = forwardRef(({ className, title }, dragRef) => /* @__PURE__ */ React.createElement("span", {
3
35
  ref: dragRef,
4
36
  className,
@@ -32,30 +64,31 @@ const BootstrapNotToggle = ({
32
64
  }, label));
33
65
  };
34
66
  BootstrapNotToggle.displayName = "BootstrapNotToggle";
35
- const isOptionGroupArray = (arr) => Array.isArray(arr) && arr.length > 0 && "options" in arr[0];
36
- const toOptions = (arr) => isOptionGroupArray(arr) ? arr.map((og) => /* @__PURE__ */ React.createElement("optgroup", {
37
- key: og.label,
38
- label: og.label
39
- }, og.options.map((opt) => /* @__PURE__ */ React.createElement("option", {
40
- key: opt.name,
41
- value: opt.name
42
- }, opt.label)))) : Array.isArray(arr) ? arr.map((opt) => /* @__PURE__ */ React.createElement("option", {
43
- key: opt.name,
44
- value: opt.name
45
- }, opt.label)) : null;
46
- const BootstrapValueEditor = ({
47
- fieldData,
48
- operator,
49
- value,
50
- handleOnChange,
51
- title,
52
- className,
53
- type,
54
- inputType,
55
- values,
56
- disabled
57
- }) => {
58
- var _a;
67
+ const BootstrapValueEditor = (_a) => {
68
+ var _b = _a, {
69
+ fieldData,
70
+ operator,
71
+ value,
72
+ handleOnChange,
73
+ title,
74
+ className,
75
+ type,
76
+ inputType,
77
+ values,
78
+ disabled
79
+ } = _b, props = __objRest(_b, [
80
+ "fieldData",
81
+ "operator",
82
+ "value",
83
+ "handleOnChange",
84
+ "title",
85
+ "className",
86
+ "type",
87
+ "inputType",
88
+ "values",
89
+ "disabled"
90
+ ]);
91
+ var _a2;
59
92
  useEffect(() => {
60
93
  if (inputType === "number" && !["between", "notBetween", "in", "notIn"].includes(operator) && typeof value === "string" && value.includes(",")) {
61
94
  handleOnChange("");
@@ -64,17 +97,40 @@ const BootstrapValueEditor = ({
64
97
  if (operator === "null" || operator === "notNull") {
65
98
  return null;
66
99
  }
67
- const placeHolderText = (_a = fieldData == null ? void 0 : fieldData.placeholder) != null ? _a : "";
100
+ const placeHolderText = (_a2 = fieldData == null ? void 0 : fieldData.placeholder) != null ? _a2 : "";
68
101
  const inputTypeCoerced = ["between", "notBetween", "in", "notIn"].includes(operator) ? "text" : inputType || "text";
69
102
  switch (type) {
70
103
  case "select":
71
- return /* @__PURE__ */ React.createElement("select", {
104
+ case "multiselect":
105
+ return /* @__PURE__ */ React.createElement(ValueSelector, __spreadProps(__spreadValues({}, props), {
72
106
  className: `${className} form-select form-select-sm`,
73
107
  title,
74
- onChange: (e) => handleOnChange(e.target.value),
108
+ handleOnChange,
109
+ value,
110
+ disabled,
111
+ multiple: type === "multiselect",
112
+ options: values
113
+ }));
114
+ case "textarea":
115
+ return /* @__PURE__ */ React.createElement("textarea", {
75
116
  value,
76
- disabled
77
- }, toOptions(values));
117
+ title,
118
+ className,
119
+ disabled,
120
+ placeholder: placeHolderText,
121
+ onChange: (e) => handleOnChange(e.target.value)
122
+ });
123
+ case "switch":
124
+ return /* @__PURE__ */ React.createElement("span", {
125
+ className: `custom-control custom-switch ${className}`
126
+ }, /* @__PURE__ */ React.createElement("input", {
127
+ type: "checkbox",
128
+ className: `form-check-input custom-control-input`,
129
+ title,
130
+ disabled,
131
+ onChange: (e) => handleOnChange(e.target.checked),
132
+ checked: !!value
133
+ }));
78
134
  case "checkbox":
79
135
  return /* @__PURE__ */ React.createElement("input", {
80
136
  type: "checkbox",
@@ -102,17 +158,37 @@ const BootstrapValueEditor = ({
102
158
  className: "form-check-label",
103
159
  htmlFor: v.name
104
160
  }, v.label))));
105
- default:
106
- return /* @__PURE__ */ React.createElement("input", {
107
- type: inputTypeCoerced,
108
- value,
109
- title,
110
- className,
111
- disabled,
112
- placeholder: placeHolderText,
113
- onChange: (e) => handleOnChange(e.target.value)
114
- });
115
161
  }
162
+ return /* @__PURE__ */ React.createElement("input", {
163
+ type: inputTypeCoerced,
164
+ value,
165
+ title,
166
+ className,
167
+ disabled,
168
+ placeholder: placeHolderText,
169
+ onChange: (e) => handleOnChange(e.target.value)
170
+ });
171
+ };
172
+ BootstrapValueEditor.displayName = "BootstrapValueEditor";
173
+ const bootstrapControlElements = {
174
+ dragHandle: BootstrapDragHandle,
175
+ notToggle: BootstrapNotToggle,
176
+ valueEditor: BootstrapValueEditor
177
+ };
178
+ const bootstrapControlClassnames = {
179
+ addGroup: "btn btn-secondary btn-sm",
180
+ addRule: "btn btn-primary btn-sm",
181
+ cloneGroup: "btn btn-secondary btn-sm",
182
+ cloneRule: "btn btn-secondary btn-sm",
183
+ lockGroup: "btn btn-secondary btn-sm",
184
+ lockRule: "btn btn-secondary btn-sm",
185
+ removeGroup: "btn btn-danger btn-sm",
186
+ removeRule: "btn btn-danger btn-sm",
187
+ combinators: "form-select form-select-sm",
188
+ fields: "form-select form-select-sm",
189
+ operators: "form-select form-select-sm",
190
+ value: "form-control form-control-sm",
191
+ valueSource: "form-select form-select-sm"
116
192
  };
117
- BootstrapValueEditor.displayName = "ValueEditor";
118
- export { BootstrapDragHandle, BootstrapNotToggle, BootstrapValueEditor };
193
+ export { BootstrapDragHandle, BootstrapNotToggle, BootstrapValueEditor, bootstrapControlClassnames, bootstrapControlElements };
194
+ //# sourceMappingURL=index.es.js.map
package/dist/index.es.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.es.js","sources":["../src/BootstrapDragHandle.tsx","../src/BootstrapNotToggle.tsx","../src/BootstrapValueEditor.tsx","../src/index.ts"],"sourcesContent":["import { forwardRef } from 'react';\nimport type { DragHandleProps } from 'react-querybuilder';\n\nexport const BootstrapDragHandle = forwardRef<HTMLSpanElement, DragHandleProps>(\n ({ className, title }, dragRef) => (\n <span ref={dragRef} className={className} title={title}>\n <i className=\"bi bi-grip-vertical\"></i>\n </span>\n )\n);\n\nBootstrapDragHandle.displayName = 'BootstrapDragHandle';\n","import { useRef } from 'react';\nimport type { NotToggleProps } from 'react-querybuilder';\n\nexport const BootstrapNotToggle = ({\n className,\n handleOnChange,\n title,\n label,\n checked,\n disabled,\n}: NotToggleProps) => {\n const id = useRef(`notToggle-${Math.random()}`);\n\n return (\n <div className={`form-check-inline form-switch ${className}`}>\n <input\n id={id.current}\n className=\"form-check-input\"\n type=\"checkbox\"\n onChange={e => handleOnChange(e.target.checked)}\n checked={!!checked}\n disabled={disabled}\n />\n <label title={title} htmlFor={id.current} className=\"form-check-label\">\n {label}\n </label>\n </div>\n );\n};\n\nBootstrapNotToggle.displayName = 'BootstrapNotToggle';\n","import { useEffect } from 'react';\nimport { ValueEditorProps, ValueSelector } from 'react-querybuilder';\n\nexport const BootstrapValueEditor = ({\n fieldData,\n operator,\n value,\n handleOnChange,\n title,\n className,\n type,\n inputType,\n values,\n disabled,\n ...props\n}: ValueEditorProps) => {\n useEffect(() => {\n if (\n inputType === 'number' &&\n !['between', 'notBetween', 'in', 'notIn'].includes(operator) &&\n typeof value === 'string' &&\n value.includes(',')\n ) {\n handleOnChange('');\n }\n }, [inputType, operator, value, handleOnChange]);\n\n if (operator === 'null' || operator === 'notNull') {\n return null;\n }\n\n const placeHolderText = fieldData?.placeholder ?? '';\n const inputTypeCoerced = ['between', 'notBetween', 'in', 'notIn'].includes(operator)\n ? 'text'\n : inputType || 'text';\n\n switch (type) {\n case 'select':\n case 'multiselect':\n return (\n <ValueSelector\n {...props}\n className={`${className} form-select form-select-sm`}\n title={title}\n handleOnChange={handleOnChange}\n value={value}\n disabled={disabled}\n multiple={type === 'multiselect'}\n options={values!}\n />\n );\n\n case 'textarea':\n return (\n <textarea\n value={value}\n title={title}\n className={className}\n disabled={disabled}\n placeholder={placeHolderText}\n onChange={e => handleOnChange(e.target.value)}\n />\n );\n\n case 'switch':\n return (\n <span className={`custom-control custom-switch ${className}`}>\n <input\n type=\"checkbox\"\n className={`form-check-input custom-control-input`}\n title={title}\n disabled={disabled}\n onChange={e => handleOnChange(e.target.checked)}\n checked={!!value}\n />\n </span>\n );\n\n case 'checkbox':\n return (\n <input\n type=\"checkbox\"\n className={`form-check-input ${className}`}\n title={title}\n disabled={disabled}\n onChange={e => handleOnChange(e.target.checked)}\n checked={!!value}\n />\n );\n\n case 'radio':\n return (\n <span title={title}>\n {values!.map(v => (\n <div key={v.name} className=\"form-check form-check-inline\">\n <input\n className=\"form-check-input\"\n type=\"radio\"\n id={v.name}\n value={v.name}\n checked={value === v.name}\n disabled={disabled}\n onChange={e => handleOnChange(e.target.value)}\n />\n <label className=\"form-check-label\" htmlFor={v.name}>\n {v.label}\n </label>\n </div>\n ))}\n </span>\n );\n }\n\n return (\n <input\n type={inputTypeCoerced}\n value={value}\n title={title}\n className={className}\n disabled={disabled}\n placeholder={placeHolderText}\n onChange={e => handleOnChange(e.target.value)}\n />\n );\n};\n\nBootstrapValueEditor.displayName = 'BootstrapValueEditor';\n","import type { Classnames, Controls } from 'react-querybuilder';\nimport { BootstrapDragHandle } from './BootstrapDragHandle';\nimport { BootstrapNotToggle } from './BootstrapNotToggle';\nimport { BootstrapValueEditor } from './BootstrapValueEditor';\n\nexport const bootstrapControlElements: Partial<Controls> = {\n dragHandle: BootstrapDragHandle,\n notToggle: BootstrapNotToggle,\n valueEditor: BootstrapValueEditor,\n};\n\nexport const bootstrapControlClassnames: Partial<Classnames> = {\n addGroup: 'btn btn-secondary btn-sm',\n addRule: 'btn btn-primary btn-sm',\n cloneGroup: 'btn btn-secondary btn-sm',\n cloneRule: 'btn btn-secondary btn-sm',\n lockGroup: 'btn btn-secondary btn-sm',\n lockRule: 'btn btn-secondary btn-sm',\n removeGroup: 'btn btn-danger btn-sm',\n removeRule: 'btn btn-danger btn-sm',\n combinators: 'form-select form-select-sm',\n fields: 'form-select form-select-sm',\n operators: 'form-select form-select-sm',\n value: 'form-control form-control-sm',\n valueSource: 'form-select form-select-sm',\n};\n\nexport { BootstrapDragHandle, BootstrapNotToggle, BootstrapValueEditor };\n"],"names":[],"mappings":"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"}
package/dist/types/Bootstrap.test.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/types/BootstrapDragHandle.d.ts CHANGED
@@ -1,4 +1,3 @@
1
1
  /// <reference types="react" />
2
2
  import type { DragHandleProps } from 'react-querybuilder';
3
- declare const BootstrapDragHandle: import("react").ForwardRefExoticComponent<DragHandleProps & import("react").RefAttributes<HTMLSpanElement>>;
4
- export default BootstrapDragHandle;
3
+ export declare const BootstrapDragHandle: import("react").ForwardRefExoticComponent<DragHandleProps & import("react").RefAttributes<HTMLSpanElement>>;
package/dist/types/BootstrapValueEditor.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
- import type { ValueEditorProps } from 'react-querybuilder';
2
+ import { ValueEditorProps } from 'react-querybuilder';
3
3
  export declare const BootstrapValueEditor: {
4
- ({ fieldData, operator, value, handleOnChange, title, className, type, inputType, values, disabled, }: ValueEditorProps): JSX.Element | null;
4
+ ({ fieldData, operator, value, handleOnChange, title, className, type, inputType, values, disabled, ...props }: ValueEditorProps): JSX.Element | null;
5
5
  displayName: string;
6
6
  };
package/dist/types/index.d.ts CHANGED
@@ -1,3 +1,7 @@
1
- export { default as BootstrapDragHandle } from './BootstrapDragHandle';
2
- export { BootstrapNotToggle } from './BootstrapNotToggle';
3
- export { BootstrapValueEditor } from './BootstrapValueEditor';
1
+ import type { Classnames, Controls } from 'react-querybuilder';
2
+ import { BootstrapDragHandle } from './BootstrapDragHandle';
3
+ import { BootstrapNotToggle } from './BootstrapNotToggle';
4
+ import { BootstrapValueEditor } from './BootstrapValueEditor';
5
+ export declare const bootstrapControlElements: Partial<Controls>;
6
+ export declare const bootstrapControlClassnames: Partial<Classnames>;
7
+ export { BootstrapDragHandle, BootstrapNotToggle, BootstrapValueEditor };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@react-querybuilder/bootstrap",
3
3
  "description": "Custom Bootstrap components for react-querybuilder",
4
- "version": "4.1.2",
4
+ "version": "4.2.1",
5
5
  "publishConfig": {
6
6
  "access": "public"
7
7
  },
@@ -13,19 +13,21 @@
13
13
  ],
14
14
  "repository": {
15
15
  "type": "git",
16
- "url": "https://github.com/react-querybuilder/react-querybuilder"
16
+ "url": "https://github.com/react-querybuilder/react-querybuilder.git",
17
+ "directory": "packages/bootstrap"
17
18
  },
18
19
  "license": "MIT",
19
20
  "homepage": "https://react-querybuilder.js.org/",
20
21
  "scripts": {
21
- "build": "vite build && tsc --emitDeclarationOnly"
22
+ "build": "vite build && tsc --emitDeclarationOnly",
23
+ "type-check": "tsc --noEmit",
24
+ "type-check:watch": "yarn type-check --watch"
22
25
  },
23
26
  "devDependencies": {
24
- "@react-querybuilder/compat": "^4.1.2",
25
27
  "@types/react": "^17.0.0",
26
28
  "bootstrap-icons": "^1.7.0",
27
29
  "react": "^17.0.1",
28
- "react-querybuilder": "^4.1.2",
30
+ "react-querybuilder": "^4.2.1",
29
31
  "typescript": "^4.5.0"
30
32
  },
31
33
  "peerDependencies": {
@@ -34,5 +36,5 @@
34
36
  "react": ">=16.8.0",
35
37
  "react-querybuilder": ">=4"
36
38
  },
37
- "gitHead": "f630509a79b242d519efdc23fc5711b9f50384a7"
39
+ "gitHead": "8edd44bc8303898b2b5dd7a51088af832c026bd4"
38
40
  }
package/dist/types/utils.d.ts DELETED
@@ -1,4 +0,0 @@
1
- /// <reference types="react" />
2
- import type { Field, NameLabelPair, OptionGroup } from 'react-querybuilder';
3
- export declare const isOptionGroupArray: (arr: Field['values']) => arr is OptionGroup<NameLabelPair>[];
4
- export declare const toOptions: (arr?: NameLabelPair[] | OptionGroup<NameLabelPair>[] | undefined) => JSX.Element[] | null;