@react-querybuilder/bootstrap 4.0.0-beta.6 → 4.0.0-beta.7
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.
- package/README.md +75 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.es.js +2 -2
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,3 +1,77 @@
|
|
|
1
1
|
## @react-querybuilder/bootstrap
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Official [Bootstrap](https://getbootstrap.com/) components for [react-querybuilder](https://npmjs.com/package/react-querybuilder).
|
|
4
|
+
|
|
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
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm i --save react-querybuilder @react-querybuilder/bootstrap bootstrap bootstrap-icons
|
|
11
|
+
# OR
|
|
12
|
+
yarn add react-querybuilder @react-querybuilder/bootstrap bootstrap bootstrap-icons
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Usage
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import QueryBuilder, { RuleGroupType } from 'react-querybuilder';
|
|
19
|
+
import {
|
|
20
|
+
BootstrapDragHandle,
|
|
21
|
+
BootstrapNotToggle,
|
|
22
|
+
BootstrapValueEditor
|
|
23
|
+
} from '@react-querybuilder/bootstrap';
|
|
24
|
+
|
|
25
|
+
const fields = [
|
|
26
|
+
{ name: 'firstName', label: 'First Name' },
|
|
27
|
+
{ name: 'lastName', label: 'Last Name' }
|
|
28
|
+
];
|
|
29
|
+
|
|
30
|
+
const App = () => {
|
|
31
|
+
const [query, setQuery] = useState<RuleGroupType>({ combinator: 'and', rules: [] });
|
|
32
|
+
|
|
33
|
+
return (
|
|
34
|
+
<QueryBuilder
|
|
35
|
+
fields={fields}
|
|
36
|
+
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
|
+
}}
|
|
55
|
+
/>
|
|
56
|
+
);
|
|
57
|
+
};
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
To apply the Bootstrap styles, you can add the following SCSS to your app:
|
|
61
|
+
|
|
62
|
+
```scss
|
|
63
|
+
@import 'bootstrap/scss/functions';
|
|
64
|
+
@import 'bootstrap/scss/variables';
|
|
65
|
+
@import 'bootstrap/scss/mixins';
|
|
66
|
+
@import 'bootstrap/scss/reboot';
|
|
67
|
+
@import 'bootstrap/scss/type';
|
|
68
|
+
@import 'bootstrap/scss/forms';
|
|
69
|
+
@import 'bootstrap/scss/buttons';
|
|
70
|
+
@import 'bootstrap/scss/dropdown';
|
|
71
|
+
|
|
72
|
+
.form-control,
|
|
73
|
+
.form-select {
|
|
74
|
+
display: inline-block;
|
|
75
|
+
width: auto;
|
|
76
|
+
}
|
|
77
|
+
```
|
package/dist/index.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var u=require("react");function b(a){return a&&typeof a=="object"&&"default"in a?a:{default:a}}var t=b(u),E=u.forwardRef(function({className:l,title:c},r){return t.default.createElement("span",{ref:r,className:l,title:c},t.default.createElement("i",{className:"bi bi-grip-vertical"}))});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var u=require("react");function b(a){return a&&typeof a=="object"&&"default"in a?a:{default:a}}var t=b(u),E=u.forwardRef(function({className:l,title:c},r){return t.default.createElement("span",{ref:r,className:l,title:c},t.default.createElement("i",{className:"bi bi-grip-vertical"}))});const f=({className:a,handleOnChange:l,title:c,label:r,checked:n})=>{const[o]=u.useState(`notToggle-${Math.random()}`);return t.default.createElement("div",{className:`form-check-inline form-switch ${a}`},t.default.createElement("input",{id:o,className:"form-check-input",type:"checkbox",onChange:s=>l(s.target.checked),checked:!!n}),t.default.createElement("label",{title:c,htmlFor:o,className:"form-check-label"},r))};f.displayName="BootstrapNotToggle";const p=({fieldData:a,operator:l,value:c,handleOnChange:r,title:n,className:o,type:s,inputType:m,values:d})=>{var i;if(u.useEffect(()=>{m==="number"&&!["between","notBetween","in","notIn"].includes(l)&&typeof c=="string"&&c.includes(",")&&r("")},[m,l,c,r]),l==="null"||l==="notNull")return null;const g=(i=a==null?void 0:a.placeholder)!=null?i:"",h=["between","notBetween","in","notIn"].includes(l)?"text":m||"text";switch(s){case"select":return t.default.createElement("select",{className:`${o} form-select form-select-sm`,title:n,onChange:e=>r(e.target.value),value:c},d.map(e=>t.default.createElement("option",{key:e.name,value:e.name},e.label)));case"checkbox":return t.default.createElement("input",{type:"checkbox",className:`form-check-input ${o}`,title:n,onChange:e=>r(e.target.checked),checked:!!c});case"radio":return t.default.createElement("span",{title:n},d.map(e=>t.default.createElement("div",{key:e.name,className:"form-check form-check-inline"},t.default.createElement("input",{className:"form-check-input",type:"radio",id:e.name,value:e.name,checked:c===e.name,onChange:k=>r(k.target.value)}),t.default.createElement("label",{className:"form-check-label",htmlFor:e.name},e.label))));default:return t.default.createElement("input",{type:h,value:c,title:n,className:o,placeholder:g,onChange:e=>r(e.target.value)})}};p.displayName="ValueEditor";exports.BootstrapDragHandle=E;exports.BootstrapNotToggle=f;exports.BootstrapValueEditor=p;
|
package/dist/index.es.js
CHANGED
|
@@ -44,7 +44,7 @@ const BootstrapValueEditor = ({
|
|
|
44
44
|
}) => {
|
|
45
45
|
var _a;
|
|
46
46
|
useEffect(() => {
|
|
47
|
-
if (inputType === "number" && !["between", "notBetween"].includes(operator) && typeof value === "string" && value.includes(",")) {
|
|
47
|
+
if (inputType === "number" && !["between", "notBetween", "in", "notIn"].includes(operator) && typeof value === "string" && value.includes(",")) {
|
|
48
48
|
handleOnChange("");
|
|
49
49
|
}
|
|
50
50
|
}, [inputType, operator, value, handleOnChange]);
|
|
@@ -52,7 +52,7 @@ const BootstrapValueEditor = ({
|
|
|
52
52
|
return null;
|
|
53
53
|
}
|
|
54
54
|
const placeHolderText = (_a = fieldData == null ? void 0 : fieldData.placeholder) != null ? _a : "";
|
|
55
|
-
const inputTypeCoerced = ["between", "notBetween"].includes(operator) ? "text" : inputType || "text";
|
|
55
|
+
const inputTypeCoerced = ["between", "notBetween", "in", "notIn"].includes(operator) ? "text" : inputType || "text";
|
|
56
56
|
switch (type) {
|
|
57
57
|
case "select":
|
|
58
58
|
return /* @__PURE__ */ React.createElement("select", {
|
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.0.0-beta.
|
|
4
|
+
"version": "4.0.0-beta.7",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
7
7
|
},
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"@types/react": "^17.0.0",
|
|
25
25
|
"bootstrap-icons": "^1.7.0",
|
|
26
26
|
"react": "^17.0.1",
|
|
27
|
-
"react-querybuilder": "^4.0.0-beta.
|
|
27
|
+
"react-querybuilder": "^4.0.0-beta.7",
|
|
28
28
|
"typescript": "^4.5.0"
|
|
29
29
|
},
|
|
30
30
|
"peerDependencies": {
|
|
@@ -32,5 +32,5 @@
|
|
|
32
32
|
"react": ">=16.8.0",
|
|
33
33
|
"react-querybuilder": "4.0.0-beta.5"
|
|
34
34
|
},
|
|
35
|
-
"gitHead": "
|
|
35
|
+
"gitHead": "f79e9f52a332794898b342af701ce81f1eebef14"
|
|
36
36
|
}
|