@react-querybuilder/antd 4.0.0-beta.6 → 4.0.0-beta.7

package/README.md

@@ -1,3 +1,65 @@
 ## @react-querybuilder/antd
 
-Custom [Ant Design](https://ant.design/) components for [react-querybuilder](https://npmjs.com/package/react-querybuilder).
+Official [Ant Design](https://ant.design/) components for [react-querybuilder](https://npmjs.com/package/react-querybuilder).
+
+To see them in action, check out the [`react-querybuilder` demo](https://react-querybuilder.js.org/react-querybuilder/) and choose "Ant Design" from the Style drop-down.
+
+## Installation
+
+```bash
+npm i --save react-querybuilder @react-querybuilder/antd @ant-design/icons antd
+# OR
+yarn add react-querybuilder @react-querybuilder/antd @ant-design/icons antd
+```
+
+## Usage
+
+```tsx
+import QueryBuilder, { RuleGroupType } from 'react-querybuilder';
+import {
+  AntDActionElement,
+  AntDDragHandle,
+  AntDNotToggle,
+  AntDValueEditor,
+  AntDValueSelector
+} from '@react-querybuilder/antd';
+
+const fields = [
+  { name: 'firstName', label: 'First Name' },
+  { name: 'lastName', label: 'Last Name' }
+];
+
+const App = () => {
+  const [query, setQuery] = useState<RuleGroupType>({ combinator: 'and', rules: [] });
+
+  return (
+    <QueryBuilder
+      fields={fields}
+      query={query}
+      onQueryChange={(q) => setQuery(q)}
+      controlElements={{
+        addGroupAction: AntDActionElement,
+        addRuleAction: AntDActionElement,
+        cloneGroupAction: AntDActionElement,
+        cloneRuleAction: AntDActionElement,
+        combinatorSelector: AntDValueSelector,
+        fieldSelector: AntDValueSelector,
+        notToggle: AntDNotToggle,
+        operatorSelector: AntDValueSelector,
+        removeGroupAction: AntDActionElement,
+        removeRuleAction: AntDActionElement,
+        valueEditor: AntDValueEditor,
+        dragHandle: AntDDragHandle
+      }}
+    />
+  );
+};
+```
+
+You may also want to reduce the width of the value editor component, which is 100% by default, with the following CSS rule:
+
+```css
+.ant-input {
+  width: auto;
+}
+```

package/dist/index.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var m=require("react"),u=require("antd"),b=require("@ant-design/icons");function h(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var r=h(m);const E=({className:e,handleOnClick:c,label:t,title:n})=>r.default.createElement(u.Button,{type:"primary",className:e,title:n,onClick:a=>c(a)},t);E.displayName="AntDActionElement";var S=m.forwardRef(function({className:c,title:t},n){return r.default.createElement("span",{ref:n,className:c,title:t},r.default.createElement(b.HolderOutlined,null))});const g=({className:e,handleOnChange:c,label:t,checked:n,title:a})=>r.default.createElement(u.Switch,{title:a,className:e,onChange:o=>c(o),checked:!!n,checkedChildren:t,unCheckedChildren:"="});g.displayName="AntDNotToggle";const{Option:w}=u.Select,A=({fieldData:e,operator:c,value:t,handleOnChange:n,title:a,className:o,type:d,inputType:i,values:f})=>{var s;if(m.useEffect(()=>{i==="number"&&!["between","notBetween"].includes(c)&&typeof t=="string"&&t.includes(",")&&n("")},[i,c,t,n]),c==="null"||c==="notNull")return null;const p=(s=e==null?void 0:e.placeholder)!=null?s:"",D=["between","notBetween"].includes(c)?"text":i||"text";switch(d){case"select":return r.default.createElement(u.Select,{className:o,onChange:l=>n(l),value:t},f.map(l=>r.default.createElement(w,{key:l.name,value:l.name},l.label)));case"checkbox":return r.default.createElement(u.Checkbox,{type:"checkbox",className:o,onChange:l=>n(l.target.checked),checked:!!t});case"radio":return r.default.createElement("span",{className:o,title:a},f.map(l=>r.default.createElement(u.Radio,{key:l.name,value:l.name,checked:t===l.name,onChange:k=>n(k.target.value)},l.label)));default:return r.default.createElement(u.Input,{type:D,value:t,title:a,className:o,placeholder:p,onChange:l=>n(l.target.value)})}};A.displayName="AntDValueEditor";const{Option:C}=u.Select,y=({className:e,handleOnChange:c,options:t,value:n})=>r.default.createElement(u.Select,{className:e,value:n,onChange:a=>c(a)},t.map(a=>{var d;const o=`key-${(d=a.id)!=null?d:a.name}`;return r.default.createElement(C,{key:o,value:a.name},a.label)}));y.displayName="AntDValueSelector";exports.AntDActionElement=E;exports.AntDDragHandle=S;exports.AntDNotToggle=g;exports.AntDValueEditor=A;exports.AntDValueSelector=y;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var m=require("react"),u=require("antd"),b=require("@ant-design/icons");function h(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var r=h(m);const E=({className:e,handleOnClick:c,label:t,title:n})=>r.default.createElement(u.Button,{type:"primary",className:e,title:n,onClick:a=>c(a)},t);E.displayName="AntDActionElement";var S=m.forwardRef(function({className:c,title:t},n){return r.default.createElement("span",{ref:n,className:c,title:t},r.default.createElement(b.HolderOutlined,null))});const g=({className:e,handleOnChange:c,label:t,checked:n,title:a})=>r.default.createElement(u.Switch,{title:a,className:e,onChange:o=>c(o),checked:!!n,checkedChildren:t,unCheckedChildren:"="});g.displayName="AntDNotToggle";const{Option:w}=u.Select,A=({fieldData:e,operator:c,value:t,handleOnChange:n,title:a,className:o,type:d,inputType:i,values:f})=>{var s;if(m.useEffect(()=>{i==="number"&&!["between","notBetween","in","notIn"].includes(c)&&typeof t=="string"&&t.includes(",")&&n("")},[i,c,t,n]),c==="null"||c==="notNull")return null;const p=(s=e==null?void 0:e.placeholder)!=null?s:"",D=["between","notBetween","in","notIn"].includes(c)?"text":i||"text";switch(d){case"select":return r.default.createElement(u.Select,{className:o,onChange:l=>n(l),value:t},f.map(l=>r.default.createElement(w,{key:l.name,value:l.name},l.label)));case"checkbox":return r.default.createElement(u.Checkbox,{type:"checkbox",className:o,onChange:l=>n(l.target.checked),checked:!!t});case"radio":return r.default.createElement("span",{className:o,title:a},f.map(l=>r.default.createElement(u.Radio,{key:l.name,value:l.name,checked:t===l.name,onChange:k=>n(k.target.value)},l.label)));default:return r.default.createElement(u.Input,{type:D,value:t,title:a,className:o,placeholder:p,onChange:l=>n(l.target.value)})}};A.displayName="AntDValueEditor";const{Option:C}=u.Select,y=({className:e,handleOnChange:c,options:t,value:n})=>r.default.createElement(u.Select,{className:e,value:n,onChange:a=>c(a)},t.map(a=>{var d;const o=`key-${(d=a.id)!=null?d:a.name}`;return r.default.createElement(C,{key:o,value:a.name},a.label)}));y.displayName="AntDValueSelector";exports.AntDActionElement=E;exports.AntDDragHandle=S;exports.AntDNotToggle=g;exports.AntDValueEditor=A;exports.AntDValueSelector=y;

package/dist/index.es.js

@@ -38,7 +38,7 @@ const AntDValueEditor = ({
 }) => {
   var _a;
   useEffect(() => {
-    if (inputType === "number" && !["between", "notBetween"].includes(operator) && typeof value === "string" && value.includes(",")) {
+    if (inputType === "number" && !["between", "notBetween", "in", "notIn"].includes(operator) && typeof value === "string" && value.includes(",")) {
       handleOnChange("");
     }
   }, [inputType, operator, value, handleOnChange]);
@@ -46,7 +46,7 @@ const AntDValueEditor = ({
     return null;
   }
   const placeHolderText = (_a = fieldData == null ? void 0 : fieldData.placeholder) != null ? _a : "";
-  const inputTypeCoerced = ["between", "notBetween"].includes(operator) ? "text" : inputType || "text";
+  const inputTypeCoerced = ["between", "notBetween", "in", "notIn"].includes(operator) ? "text" : inputType || "text";
   switch (type) {
     case "select":
       return /* @__PURE__ */ React.createElement(Select, {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-querybuilder/antd",
   "description": "Custom Ant Design components for react-querybuilder",
-  "version": "4.0.0-beta.6",
+  "version": "4.0.0-beta.7",
   "publishConfig": {
     "access": "public"
   },
@@ -25,7 +25,7 @@
     "@types/react": "^17.0.0",
     "antd": "^4.10.3",
     "react": "^17.0.1",
-    "react-querybuilder": "^4.0.0-beta.6",
+    "react-querybuilder": "^4.0.0-beta.7",
     "typescript": "^4.5.0"
   },
   "peerDependencies": {
@@ -34,5 +34,5 @@
     "react": ">=16.8.0",
     "react-querybuilder": "4.0.0-beta.5"
   },
-  "gitHead": "484708b1405f14cafef165248e258e4ff679da6b"
+  "gitHead": "f79e9f52a332794898b342af701ce81f1eebef14"
 }