@react-querybuilder/bootstrap 4.0.0-beta.6

package/LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Sapient Global Markets
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+## @react-querybuilder/bootstrap
+
+Custom [Bootstrap](https://getbootstrap.com/) components for [react-querybuilder](https://npmjs.com/package/react-querybuilder).

package/dist/index.cjs.js

@@ -0,0 +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 i=({className:a,handleOnChange:l,title:c,label:r,checked:o})=>{const[n]=u.useState(`notToggle-${Math.random()}`);return t.default.createElement("div",{className:`form-check-inline form-switch ${a}`},t.default.createElement("input",{id:n,className:"form-check-input",type:"checkbox",onChange:s=>l(s.target.checked),checked:!!o}),t.default.createElement("label",{title:c,htmlFor:n,className:"form-check-label"},r))};i.displayName="BootstrapNotToggle";const p=({fieldData:a,operator:l,value:c,handleOnChange:r,title:o,className:n,type:s,inputType:m,values:d})=>{var f;if(u.useEffect(()=>{m==="number"&&!["between","notBetween"].includes(l)&&typeof c=="string"&&c.includes(",")&&r("")},[m,l,c,r]),l==="null"||l==="notNull")return null;const g=(f=a==null?void 0:a.placeholder)!=null?f:"",h=["between","notBetween"].includes(l)?"text":m||"text";switch(s){case"select":return t.default.createElement("select",{className:`${n} form-select form-select-sm`,title:o,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 ${n}`,title:o,onChange:e=>r(e.target.checked),checked:!!c});case"radio":return t.default.createElement("span",{title:o},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:o,className:n,placeholder:g,onChange:e=>r(e.target.value)})}};p.displayName="ValueEditor";exports.BootstrapDragHandle=E;exports.BootstrapNotToggle=i;exports.BootstrapValueEditor=p;

package/dist/index.es.js

@@ -0,0 +1,104 @@
+import React, { forwardRef, useState, useEffect } from "react";
+var BootstrapDragHandle = forwardRef(function BootstrapDragHandle2({ className, title }, dragRef) {
+  return /* @__PURE__ */ React.createElement("span", {
+    ref: dragRef,
+    className,
+    title
+  }, /* @__PURE__ */ React.createElement("i", {
+    className: "bi bi-grip-vertical"
+  }));
+});
+const BootstrapNotToggle = ({
+  className,
+  handleOnChange,
+  title,
+  label,
+  checked
+}) => {
+  const [id] = useState(`notToggle-${Math.random()}`);
+  return /* @__PURE__ */ React.createElement("div", {
+    className: `form-check-inline form-switch ${className}`
+  }, /* @__PURE__ */ React.createElement("input", {
+    id,
+    className: "form-check-input",
+    type: "checkbox",
+    onChange: (e) => handleOnChange(e.target.checked),
+    checked: !!checked
+  }), /* @__PURE__ */ React.createElement("label", {
+    title,
+    htmlFor: id,
+    className: "form-check-label"
+  }, label));
+};
+BootstrapNotToggle.displayName = "BootstrapNotToggle";
+const BootstrapValueEditor = ({
+  fieldData,
+  operator,
+  value,
+  handleOnChange,
+  title,
+  className,
+  type,
+  inputType,
+  values
+}) => {
+  var _a;
+  useEffect(() => {
+    if (inputType === "number" && !["between", "notBetween"].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";
+  switch (type) {
+    case "select":
+      return /* @__PURE__ */ React.createElement("select", {
+        className: `${className} form-select form-select-sm`,
+        title,
+        onChange: (e) => handleOnChange(e.target.value),
+        value
+      }, values.map((v) => /* @__PURE__ */ React.createElement("option", {
+        key: v.name,
+        value: v.name
+      }, v.label)));
+    case "checkbox":
+      return /* @__PURE__ */ React.createElement("input", {
+        type: "checkbox",
+        className: `form-check-input ${className}`,
+        title,
+        onChange: (e) => handleOnChange(e.target.checked),
+        checked: !!value
+      });
+    case "radio":
+      return /* @__PURE__ */ React.createElement("span", {
+        title
+      }, values.map((v) => /* @__PURE__ */ React.createElement("div", {
+        key: v.name,
+        className: "form-check form-check-inline"
+      }, /* @__PURE__ */ React.createElement("input", {
+        className: "form-check-input",
+        type: "radio",
+        id: v.name,
+        value: v.name,
+        checked: value === v.name,
+        onChange: (e) => handleOnChange(e.target.value)
+      }), /* @__PURE__ */ React.createElement("label", {
+        className: "form-check-label",
+        htmlFor: v.name
+      }, v.label))));
+    default:
+      return /* @__PURE__ */ React.createElement("input", {
+        type: inputTypeCoerced,
+        value,
+        title,
+        className,
+        placeholder: placeHolderText,
+        onChange: (e) => handleOnChange(e.target.value)
+      });
+  }
+};
+BootstrapValueEditor.displayName = "ValueEditor";
+export { BootstrapDragHandle, BootstrapNotToggle, BootstrapValueEditor };

package/dist/types/BootstrapDragHandle.d.ts

@@ -0,0 +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;

package/dist/types/BootstrapNotToggle.d.ts

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

package/dist/types/BootstrapValueEditor.d.ts

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

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+export { default as BootstrapDragHandle } from './BootstrapDragHandle';
+export { default as BootstrapNotToggle } from './BootstrapNotToggle';
+export { default as BootstrapValueEditor } from './BootstrapValueEditor';

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@react-querybuilder/bootstrap",
+  "description": "Custom Bootstrap components for react-querybuilder",
+  "version": "4.0.0-beta.6",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.es.js",
+  "types": "dist/types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/react-querybuilder/react-querybuilder"
+  },
+  "license": "MIT",
+  "homepage": "https://react-querybuilder.js.org/",
+  "scripts": {
+    "build": "vite build && tsc --emitDeclarationOnly"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.0",
+    "bootstrap-icons": "^1.7.0",
+    "react": "^17.0.1",
+    "react-querybuilder": "^4.0.0-beta.6",
+    "typescript": "^4.5.0"
+  },
+  "peerDependencies": {
+    "bootstrap-icons": ">=1.7.0",
+    "react": ">=16.8.0",
+    "react-querybuilder": "4.0.0-beta.5"
+  },
+  "gitHead": "484708b1405f14cafef165248e258e4ff679da6b"
+}