@react-querybuilder/antd 4.0.0-beta.8 → 4.1.2

package/dist/index.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var s=require("react"),d=require("antd"),b=require("@ant-design/icons");function w(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var n=w(s);const p=({className:e,handleOnClick:a,label:t,title:c,disabled:r})=>n.default.createElement(d.Button,{type:"primary",className:e,title:c,onClick:u=>a(u),disabled:r},t);p.displayName="AntDActionElement";const g=s.forwardRef(({className:e,title:a},t)=>n.default.createElement("span",{ref:t,className:e,title:a},n.default.createElement(b.HolderOutlined,null)));g.displayName="AntDDragHandle";const A=({className:e,handleOnChange:a,label:t,checked:c,title:r,disabled:u})=>n.default.createElement(d.Switch,{title:r,className:e,onChange:o=>a(o),checked:!!c,disabled:u,checkedChildren:t,unCheckedChildren:"="});A.displayName="AntDNotToggle";const{Option:C}=d.Select,y=({fieldData:e,operator:a,value:t,handleOnChange:c,title:r,className:u,type:o,inputType:m,values:i,disabled:f})=>{var E;if(s.useEffect(()=>{m==="number"&&!["between","notBetween","in","notIn"].includes(a)&&typeof t=="string"&&t.includes(",")&&c("")},[m,a,t,c]),a==="null"||a==="notNull")return null;const k=(E=e==null?void 0:e.placeholder)!=null?E:"",h=["between","notBetween","in","notIn"].includes(a)?"text":m||"text";switch(o){case"select":return n.default.createElement("span",{title:r,className:u},n.default.createElement(d.Select,{onChange:l=>c(l),value:t,disabled:f},i.map(l=>n.default.createElement(C,{key:l.name,value:l.name},l.label))));case"checkbox":return n.default.createElement("span",{title:r},n.default.createElement(d.Checkbox,{type:"checkbox",className:u,disabled:f,onChange:l=>c(l.target.checked),checked:!!t}));case"radio":return n.default.createElement("span",{className:u,title:r},i.map(l=>n.default.createElement(d.Radio,{key:l.name,value:l.name,checked:t===l.name,disabled:f,onChange:S=>c(S.target.value)},l.label)));default:return n.default.createElement(d.Input,{type:h,value:t,title:r,className:u,disabled:f,placeholder:k,onChange:l=>c(l.target.value)})}};y.displayName="AntDValueEditor";const{Option:x}=d.Select,D=({className:e,handleOnChange:a,options:t,value:c,title:r,disabled:u})=>n.default.createElement("span",{title:r,className:e},n.default.createElement(d.Select,{disabled:u,value:c,onChange:o=>a(o)},t.map(o=>{var i;const m=`key-${(i=o.id)!=null?i:o.name}`;return n.default.createElement(x,{key:m,value:o.name},o.label)})));D.displayName="AntDValueSelector";exports.AntDActionElement=p;exports.AntDDragHandle=g;exports.AntDNotToggle=A;exports.AntDValueEditor=y;exports.AntDValueSelector=D;
+"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,5 +1,36 @@
+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, disabled }) => /* @__PURE__ */ React.createElement(Button, {
   type: "primary",
@@ -32,20 +63,59 @@ const AntDNotToggle = ({
   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,
   disabled
-}) => {
-  var _a;
+}) => /* @__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", "in", "notIn"].includes(operator) && typeof value === "string" && value.includes(",")) {
       handleOnChange("");
@@ -54,21 +124,18 @@ const AntDValueEditor = ({
   if (operator === "null" || operator === "notNull") {
     return null;
   }
-  const placeHolderText = (_a = fieldData == null ? void 0 : fieldData.placeholder) != null ? _a : "";
+  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("span", {
-        title,
-        className
-      }, /* @__PURE__ */ React.createElement(Select, {
-        onChange: (v) => handleOnChange(v),
+      return /* @__PURE__ */ React.createElement(AntDValueSelector, __spreadProps(__spreadValues({}, props), {
+        className,
+        handleOnChange,
+        options: values,
         value,
+        title,
         disabled
-      }, values.map((v) => /* @__PURE__ */ React.createElement(Option$1, {
-        key: v.name,
-        value: v.name
-      }, v.label))));
+      }));
     case "checkbox":
       return /* @__PURE__ */ React.createElement("span", {
         title
@@ -103,28 +170,4 @@ const AntDValueEditor = ({
   }
 };
 AntDValueEditor.displayName = "AntDValueEditor";
-const { Option } = Select;
-const AntDValueSelector = ({
-  className,
-  handleOnChange,
-  options,
-  value,
-  title,
-  disabled
-}) => /* @__PURE__ */ React.createElement("span", {
-  title,
-  className
-}, /* @__PURE__ */ React.createElement(Select, {
-  disabled,
-  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/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, disabled, }: 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/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.8",
+  "version": "4.1.2",
   "publishConfig": {
     "access": "public"
   },
@@ -22,11 +22,11 @@
   },
   "devDependencies": {
     "@ant-design/icons": "^4.7.0",
-    "@react-querybuilder/compat": "^4.0.0-beta.8",
+    "@react-querybuilder/compat": "^4.1.2",
     "@types/react": "^17.0.0",
-    "antd": "^4.10.3",
+    "antd": "4.17.3",
     "react": "^17.0.1",
-    "react-querybuilder": "^4.0.0-beta.8",
+    "react-querybuilder": "^4.1.2",
     "typescript": "^4.5.0"
   },
   "peerDependencies": {
@@ -35,5 +35,5 @@
     "react": ">=16.8.0",
     "react-querybuilder": ">=4"
   },
-  "gitHead": "79d0e66c09b058779e90dd5320f386e0e9fdfcd5"
+  "gitHead": "f630509a79b242d519efdc23fc5711b9f50384a7"
 }