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

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";var q=Object.defineProperty,B=Object.defineProperties;var I=Object.getOwnPropertyDescriptors;var m=Object.getOwnPropertySymbols;var g=Object.prototype.hasOwnProperty,D=Object.prototype.propertyIsEnumerable;var k=(e,t,n)=>t in e?q(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,b=(e,t)=>{for(var n in t||(t={}))g.call(t,n)&&k(e,n,t[n]);if(m)for(var n of m(t))D.call(t,n)&&k(e,n,t[n]);return e},h=(e,t)=>B(e,I(t));var S=(e,t)=>{var n={};for(var l in e)g.call(e,l)&&t.indexOf(l)<0&&(n[l]=e[l]);if(e!=null&&m)for(var l of m(e))t.indexOf(l)<0&&D.call(e,l)&&(n[l]=e[l]);return n};Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var f=require("react"),u=require("antd"),j=require("@ant-design/icons");function G(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var a=G(f);const w=({className:e,handleOnClick:t,label:n,title:l,disabled:c})=>a.default.createElement(u.Button,{type:"primary",className:e,title:l,onClick:r=>t(r),disabled:c},n);w.displayName="AntDActionElement";const x=f.forwardRef(({className:e,title:t},n)=>a.default.createElement("span",{ref:n,className:e,title:t},a.default.createElement(j.HolderOutlined,null)));x.displayName="AntDDragHandle";const C=({className:e,handleOnChange:t,label:n,checked:l,title:c,disabled:r})=>a.default.createElement(u.Switch,{title:c,className:e,onChange:d=>t(d),checked:!!l,disabled:r,checkedChildren:n,unCheckedChildren:"="});C.displayName="AntDNotToggle";const{OptGroup:M,Option:N}=u.Select,L=e=>Array.isArray(e)&&e.length>0&&"options"in e[0],O=e=>L(e)?e.map(t=>a.default.createElement(M,{key:t.label,label:t.label},t.options.map(n=>a.default.createElement(N,{key:n.name,value:n.name},n.label)))):Array.isArray(e)?e.map(t=>a.default.createElement(N,{key:t.name,value:t.name},t.label)):null,p=({className:e,handleOnChange:t,options:n,value:l,title:c,disabled:r})=>a.default.createElement("span",{title:c,className:e},a.default.createElement(u.Select,{disabled:r,value:l,onChange:d=>t(d)},O(n)));p.displayName="AntDValueSelector";const V=P=>{var y=P,{fieldData:e,operator:t,value:n,handleOnChange:l,title:c,className:r,type:d,inputType:s,values:A,disabled:i}=y,H=S(y,["fieldData","operator","value","handleOnChange","title","className","type","inputType","values","disabled"]);var E;if(f.useEffect(()=>{s==="number"&&!["between","notBetween","in","notIn"].includes(t)&&typeof n=="string"&&n.includes(",")&&l("")},[s,t,n,l]),t==="null"||t==="notNull")return null;const _=(E=e==null?void 0:e.placeholder)!=null?E:"",R=["between","notBetween","in","notIn"].includes(t)?"text":s||"text";switch(d){case"select":return a.default.createElement(p,h(b({},H),{className:r,handleOnChange:l,options:A,value:n,title:c,disabled:i}));case"checkbox":return a.default.createElement("span",{title:c},a.default.createElement(u.Checkbox,{type:"checkbox",className:r,disabled:i,onChange:o=>l(o.target.checked),checked:!!n}));case"radio":return a.default.createElement("span",{className:r,title:c},A.map(o=>a.default.createElement(u.Radio,{key:o.name,value:o.name,checked:n===o.name,disabled:i,onChange:T=>l(T.target.value)},o.label)));default:return a.default.createElement(u.Input,{type:R,value:n,title:c,className:r,disabled:i,placeholder:_,onChange:o=>l(o.target.value)})}};V.displayName="AntDValueEditor";exports.AntDActionElement=w;exports.AntDDragHandle=x;exports.AntDNotToggle=C;exports.AntDValueEditor=V;exports.AntDValueSelector=p;

package/dist/index.es.js

@@ -1,69 +1,151 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 import React, { forwardRef, useEffect } from "react";
-import { Button, Switch, Input, Radio, Checkbox, Select } from "antd";
+import { Button, Switch, Select, Input, Radio, Checkbox } from "antd";
 import { HolderOutlined } from "@ant-design/icons";
-const AntDActionElement = ({ className, handleOnClick, label, title }) => /* @__PURE__ */ React.createElement(Button, {
+const AntDActionElement = ({ className, handleOnClick, label, title, disabled }) => /* @__PURE__ */ React.createElement(Button, {
   type: "primary",
   className,
   title,
-  onClick: (e) => handleOnClick(e)
+  onClick: (e) => handleOnClick(e),
+  disabled
 }, label);
 AntDActionElement.displayName = "AntDActionElement";
-var AntDDragHandle = forwardRef(function AntDDragHandle2({ className, title }, dragRef) {
-  return /* @__PURE__ */ React.createElement("span", {
-    ref: dragRef,
-    className,
-    title
-  }, /* @__PURE__ */ React.createElement(HolderOutlined, null));
-});
-const AntDNotToggle = ({ className, handleOnChange, label, checked, title }) => /* @__PURE__ */ React.createElement(Switch, {
+const AntDDragHandle = forwardRef(({ className, title }, dragRef) => /* @__PURE__ */ React.createElement("span", {
+  ref: dragRef,
+  className,
+  title
+}, /* @__PURE__ */ React.createElement(HolderOutlined, null)));
+AntDDragHandle.displayName = "AntDDragHandle";
+const AntDNotToggle = ({
+  className,
+  handleOnChange,
+  label,
+  checked,
+  title,
+  disabled
+}) => /* @__PURE__ */ React.createElement(Switch, {
   title,
   className,
-  onChange: (checked2) => handleOnChange(checked2),
+  onChange: (v) => handleOnChange(v),
   checked: !!checked,
+  disabled,
   checkedChildren: label,
   unCheckedChildren: "="
 });
 AntDNotToggle.displayName = "AntDNotToggle";
-const { Option: Option$1 } = Select;
-const AntDValueEditor = ({
-  fieldData,
-  operator,
-  value,
+const { OptGroup, Option } = Select;
+const isOptionGroupArray = (arr) => Array.isArray(arr) && arr.length > 0 && "options" in arr[0];
+const toOptions = (arr) => isOptionGroupArray(arr) ? arr.map((og) => /* @__PURE__ */ React.createElement(OptGroup, {
+  key: og.label,
+  label: og.label
+}, og.options.map((opt) => /* @__PURE__ */ React.createElement(Option, {
+  key: opt.name,
+  value: opt.name
+}, opt.label)))) : Array.isArray(arr) ? arr.map((opt) => /* @__PURE__ */ React.createElement(Option, {
+  key: opt.name,
+  value: opt.name
+}, opt.label)) : null;
+const AntDValueSelector = ({
+  className,
   handleOnChange,
+  options,
+  value,
   title,
-  className,
-  type,
-  inputType,
-  values
-}) => {
-  var _a;
+  disabled
+}) => /* @__PURE__ */ React.createElement("span", {
+  title,
+  className
+}, /* @__PURE__ */ React.createElement(Select, {
+  disabled,
+  value,
+  onChange: (v) => handleOnChange(v)
+}, toOptions(options)));
+AntDValueSelector.displayName = "AntDValueSelector";
+const AntDValueEditor = (_a) => {
+  var _b = _a, {
+    fieldData,
+    operator,
+    value,
+    handleOnChange,
+    title,
+    className,
+    type,
+    inputType,
+    values,
+    disabled
+  } = _b, props = __objRest(_b, [
+    "fieldData",
+    "operator",
+    "value",
+    "handleOnChange",
+    "title",
+    "className",
+    "type",
+    "inputType",
+    "values",
+    "disabled"
+  ]);
+  var _a2;
   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]);
   if (operator === "null" || operator === "notNull") {
     return null;
   }
-  const placeHolderText = (_a = fieldData == null ? void 0 : fieldData.placeholder) != null ? _a : "";
-  const inputTypeCoerced = ["between", "notBetween"].includes(operator) ? "text" : inputType || "text";
+  const placeHolderText = (_a2 = fieldData == null ? void 0 : fieldData.placeholder) != null ? _a2 : "";
+  const inputTypeCoerced = ["between", "notBetween", "in", "notIn"].includes(operator) ? "text" : inputType || "text";
   switch (type) {
     case "select":
-      return /* @__PURE__ */ React.createElement(Select, {
+      return /* @__PURE__ */ React.createElement(AntDValueSelector, __spreadProps(__spreadValues({}, props), {
         className,
-        onChange: (v) => handleOnChange(v),
-        value
-      }, values.map((v) => /* @__PURE__ */ React.createElement(Option$1, {
-        key: v.name,
-        value: v.name
-      }, v.label)));
+        handleOnChange,
+        options: values,
+        value,
+        title,
+        disabled
+      }));
     case "checkbox":
-      return /* @__PURE__ */ React.createElement(Checkbox, {
+      return /* @__PURE__ */ React.createElement("span", {
+        title
+      }, /* @__PURE__ */ React.createElement(Checkbox, {
         type: "checkbox",
         className,
+        disabled,
         onChange: (e) => handleOnChange(e.target.checked),
         checked: !!value
-      });
+      }));
     case "radio":
       return /* @__PURE__ */ React.createElement("span", {
         className,
@@ -72,6 +154,7 @@ const AntDValueEditor = ({
         key: v.name,
         value: v.name,
         checked: value === v.name,
+        disabled,
         onChange: (e) => handleOnChange(e.target.value)
       }, v.label)));
     default:
@@ -80,24 +163,11 @@ const AntDValueEditor = ({
         value,
         title,
         className,
+        disabled,
         placeholder: placeHolderText,
         onChange: (e) => handleOnChange(e.target.value)
       });
   }
 };
 AntDValueEditor.displayName = "AntDValueEditor";
-const { Option } = Select;
-const AntDValueSelector = ({ className, handleOnChange, options, value }) => /* @__PURE__ */ React.createElement(Select, {
-  className,
-  value,
-  onChange: (v) => handleOnChange(v)
-}, options.map((option) => {
-  var _a;
-  const key = `key-${(_a = option.id) != null ? _a : option.name}`;
-  return /* @__PURE__ */ React.createElement(Option, {
-    key,
-    value: option.name
-  }, option.label);
-}));
-AntDValueSelector.displayName = "AntDValueSelector";
 export { AntDActionElement, AntDDragHandle, AntDNotToggle, AntDValueEditor, AntDValueSelector };

package/dist/types/AntDActionElement.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { ActionProps } from 'react-querybuilder';
 declare const AntDActionElement: {
-    ({ className, handleOnClick, label, title }: ActionProps): JSX.Element;
+    ({ className, handleOnClick, label, title, disabled }: ActionProps): JSX.Element;
     displayName: string;
 };
 export default AntDActionElement;

package/dist/types/AntDDragHandle.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import type { DragHandleProps } from 'react-querybuilder';
-declare const _default: import("react").ForwardRefExoticComponent<DragHandleProps & import("react").RefAttributes<HTMLSpanElement>>;
-export default _default;
+declare const AntDDragHandle: import("react").ForwardRefExoticComponent<DragHandleProps & import("react").RefAttributes<HTMLSpanElement>>;
+export default AntDDragHandle;

package/dist/types/AntDNotToggle.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { NotToggleProps } from 'react-querybuilder';
 declare const AntDNotToggle: {
-    ({ className, handleOnChange, label, checked, title }: NotToggleProps): JSX.Element;
+    ({ className, handleOnChange, label, checked, title, disabled, }: NotToggleProps): JSX.Element;
     displayName: string;
 };
 export default AntDNotToggle;

package/dist/types/AntDValueEditor.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { ValueEditorProps } from 'react-querybuilder';
 declare const AntDValueEditor: {
-    ({ fieldData, operator, value, handleOnChange, title, className, type, inputType, values }: ValueEditorProps): JSX.Element | null;
+    ({ fieldData, operator, value, handleOnChange, title, className, type, inputType, values, disabled, ...props }: ValueEditorProps): JSX.Element | null;
     displayName: string;
 };
 export default AntDValueEditor;

package/dist/types/AntDValueSelector.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { ValueSelectorProps } from 'react-querybuilder';
 declare const AntDValueSelector: {
-    ({ className, handleOnChange, options, value }: ValueSelectorProps): JSX.Element;
+    ({ className, handleOnChange, options, value, title, disabled, }: ValueSelectorProps): JSX.Element;
     displayName: string;
 };
 export default AntDValueSelector;

package/dist/types/utils.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { Field, NameLabelPair, OptionGroup } from 'react-querybuilder';
+export declare const isOptionGroupArray: (arr: Field['values']) => arr is OptionGroup<NameLabelPair>[];
+export declare const toOptions: (arr?: NameLabelPair[] | OptionGroup<NameLabelPair>[] | undefined) => JSX.Element[] | null;

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.1.0",
   "publishConfig": {
     "access": "public"
   },
@@ -22,17 +22,18 @@
   },
   "devDependencies": {
     "@ant-design/icons": "^4.7.0",
+    "@react-querybuilder/compat": "^4.1.0",
     "@types/react": "^17.0.0",
     "antd": "^4.10.3",
     "react": "^17.0.1",
-    "react-querybuilder": "^4.0.0-beta.6",
+    "react-querybuilder": "^4.1.0",
     "typescript": "^4.5.0"
   },
   "peerDependencies": {
     "@ant-design/icons": ">=4.7.0",
     "antd": ">=4.10.0",
     "react": ">=16.8.0",
-    "react-querybuilder": "4.0.0-beta.5"
+    "react-querybuilder": ">=4"
   },
-  "gitHead": "484708b1405f14cafef165248e258e4ff679da6b"
+  "gitHead": "b73987bada7b64b5df892f92ceb8691a488d096c"
 }