Bootstrap (#604)

* Bootstrap widget kickoff (#537)

* bootstrap widget - initial configs and structure

* Implementing button for bootstrap widget

* removing unnecessary code

* minor fix to bootstrap index.js

* removing use confirm from bootstrap widget

* removing use confirm from index.js

* moving bootstrap and fontawesome dependencies to peer dependencies and dev dependencies

* adding reactstrap button group, correcting size of button and removing rangeslider from bootstrap feature

* Applying Reactstrap input select (#570)

* applying reactstrap input select

* minor adjustment to multiselect

* Bootstrap - Implementing conjs and boolean (#585)

* implementing conjs and boolean

* adapting the other components with reactstrap Input

* implementing dropdown to obtain options with bootstrap styles

* stretching dropdown options - bootstrap

* adding bootstrap style to multiselect and its options

* implementing bootstrap field select

* adding margin to group items

* minor adjustment to item group spacing and adding key to fix warning

* fixing indentation and warning (#606)

* improve

* cool vs

* readme

* lint fix

* 4.10.0

Co-authored-by: Pedro Coelho <pedrocoelhoprojetos@gmail.com>

Author: ukrbublik

CHANGELOG.md

@@ -1,5 +1,6 @@
 # Changelog
-
+- 4.10.0
+  - Support Bootstrap (via `reactstrap`) (PR #604)
 - 4.9.0
   - Added `is_null` and `is_not_null` operators (issue #494) (PR #522)
   - ! Breaking change for operators `is_empty` and `is_not_empty`. Left for text type only, for other types will be auto converted to `is_null`/`is_not_null`. Changed meaning of `is_empty` - now it's just strict comparing with empty string. Before change meaning was similar to `is_null` (and export to SQL was wrong because of non-existent operator `IS EMPTY`). (issue #494) (PR #573)

CONFIG.adoc

@@ -42,12 +42,14 @@ TIP: Example: https://github.com/ukrbublik/react-awesome-query-builder/tree/mast
 - Use `BasicConfig` for simple vanilla UI
 - Use `AntdConfig` for more advanced UI with https://ant.design/[AntDesign] widgets
 - Use `MaterialConfig` for https://material-ui.com/[Material-UI] widgets
+- Use `BootstrapConfig` for https://reactstrap.github.io/[Bootstrap] widgets
 [source,javascript]
 ----
 import {BasicConfig} from 'react-awesome-query-builder';
 import AntdConfig from 'react-awesome-query-builder/lib/config/antd';
 import MaterialConfig from 'react-awesome-query-builder/lib/config/material';
-const InitialConfig = BasicConfig; // or AntdConfig or MaterialConfig
+import BootstrapConfig from "react-awesome-query-builder/lib/config/bootstrap";
+const InitialConfig = BasicConfig; // or AntdConfig or BootstrapConfig or MaterialConfig
 
 const myConfig = {
   ...InitialConfig, // reuse basic config
@@ -100,11 +102,11 @@ const {
       textarea,
       number,
       slider,
-      rangeslider, // missing in `BasicConfig`
+      rangeslider, // missing in `BasicConfig`, `BootstrapConfig`
       select,
       multiselect,
-      treeselect, // missing in `BasicConfig` and in `MaterialConfig`
-      treemultiselect, // missing in `BasicConfig` and in `MaterialConfig`
+      treeselect, // missing in `BasicConfig`, `MaterialConfig`, `BootstrapConfig`
+      treemultiselect, // missing in `BasicConfig`, `MaterialConfig`, `BootstrapConfig`
       date,
       time,
       datetime,
@@ -527,6 +529,7 @@ See https://github.com/ukrbublik/react-awesome-query-builder/tree/master/example
 import {Widgets} from 'react-awesome-query-builder';
 import AntdWidgets from 'react-awesome-query-builder/lib/components/widgets/antd';
 import MaterialWidgets from 'react-awesome-query-builder/lib/components/widgets/material';
+import BootstrapWidgets from 'react-awesome-query-builder/lib/components/widgets/bootstrap';
 const {
     TextWidget,
     NumberWidget,
@@ -542,6 +545,11 @@ const {
     MaterialNumberWidget,
     ...
 } = MaterialWidgets;
+const {
+    BootstrapTextWidget,
+    BootstrapNumberWidget,
+    ...
+} = BootstrapWidgets;
 ----
 
 [source,javascript]

README.md

@@ -12,7 +12,8 @@
 [![travis](https://travis-ci.org/ukrbublik/react-awesome-query-builder.svg?branch=master)](https://travis-ci.com/github/ukrbublik/react-awesome-query-builder) 
 [![codecov](https://codecov.io/gh/ukrbublik/react-awesome-query-builder/branch/master/graph/badge.svg?date=20201002)](https://codecov.io/gh/ukrbublik/react-awesome-query-builder)
 [![antd](https://img.shields.io/badge/skin-Ant%20Design-blue?logo=Ant%20Design)](https://ant.design)
-[![mui](https://img.shields.io/badge/skin-Material%20UI-blue?logo=Material%20UI)](https://material-ui.com)
+[![mui](https://img.shields.io/badge/skin-Material%20UI-blue?logo=MUI)](https://material-ui.com)
+[![bootstrap](https://img.shields.io/badge/skin-Bootstrap-blue?logo=Bootstrap)](https://reactstrap.github.io/)
 [![demo](https://img.shields.io/badge/demo-blue)](https://ukrbublik.github.io/react-awesome-query-builder/)
 [![sandbox TS](https://img.shields.io/badge/sandbox-TS-blue)](https://codesandbox.io/s/github/ukrbublik/react-awesome-query-builder/tree/master/sandbox?file=/src/demo/config_simple.tsx)
 [![sandbox JS](https://img.shields.io/badge/sandbox-JS-blue)](https://codesandbox.io/s/github/ukrbublik/react-awesome-query-builder/tree/master/sandbox_simple?file=/src/demo/config_simple.js)
@@ -61,8 +62,11 @@ See [live demo](https://ukrbublik.github.io/react-awesome-query-builder)
   - another fields (of same type)
   - function (arguments also can be values/fields/funcs)
 - Reordering (drag-n-drop) support for rules and groups of rules
-- Using awesome [Ant Design](https://ant.design/) as UI framework with rich features.  
-  Now [Material-UI](https://material-ui.com/) is also supported!  
+- Themes:
+  - [Ant Design](https://ant.design/)
+  - [Material-UI](https://material-ui.com/)
+  - [Bootstrap](https://reactstrap.github.io/)
+  - vanilla
   (Using another UI framework and custom widgets is possible, see below)
 - Export to MongoDb, SQL, [JsonLogic](http://jsonlogic.com), ElasticSearch or your custom format
 - Import from [JsonLogic](http://jsonlogic.com)
@@ -85,6 +89,11 @@ For Material-UI widgets only:
 npm i @material-ui/core @material-ui/lab @material-ui/icons @material-ui/pickers material-ui-confirm --save
 ```
 
+For Bootstrap widgets only:
+```
+npm i bootstrap reactstrap @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome --save
+```
+
 See [basic usage](#usage) for minimum code example. 
 
 See [API](#api) and [config](#config-format) for documentation. 
@@ -108,12 +117,14 @@ import AntdConfig from 'react-awesome-query-builder/lib/config/antd';
 import 'antd/dist/antd.css'; // or import "react-awesome-query-builder/css/antd.less";
 // For Material-UI widgets only:
 import MaterialConfig from 'react-awesome-query-builder/lib/config/material';
+// For Bootstrap widgets only:
+import BootstrapConfig from "react-awesome-query-builder/lib/config/bootstrap";
 
 import 'react-awesome-query-builder/lib/css/styles.css';
 import 'react-awesome-query-builder/lib/css/compact_styles.css'; //optional, for more compact styles
 
 // Choose your skin (ant/material/vanilla):
-const InitialConfig = AntdConfig; // or MaterialConfig or BasicConfig
+const InitialConfig = AntdConfig; // or MaterialConfig or BootstrapConfig or BasicConfig
 
 // You need to provide your own config. See below 'Config format'
 const config = {
@@ -227,12 +238,14 @@ import AntdConfig from "react-awesome-query-builder/lib/config/antd";
 import "antd/dist/antd.css"; // or import "react-awesome-query-builder/css/antd.less";
 // For Material-UI widgets only:
 //import MaterialConfig from "react-awesome-query-builder/lib/config/material";
+// For Bootstrap widgets only:
+//import BootstrapConfig from "react-awesome-query-builder/lib/config/bootstrap";
 
 import "react-awesome-query-builder/lib/css/styles.css";
 import "react-awesome-query-builder/lib/css/compact_styles.css"; //optional, for more compact styles
 
 // Choose your skin (ant/material/vanilla):
-const InitialConfig = AntdConfig; // or MaterialConfig or BasicConfig
+const InitialConfig = AntdConfig; // or MaterialConfig or BootstrapConfig or BasicConfig
 
 // You need to provide your own config. See below 'Config format'
 const config: Config = {

css/styles.scss

@@ -644,3 +644,11 @@ $rule_actions: ".widget--valuesrc", ".rule--drag-handler", ".rule--header";
     }
   }
 }
+
+/******************************************************************************/
+/** Bootstrap ***********************************************************/
+/******************************************************************************/
+
+.svg-inline--fa {
+  pointer-events: none;
+}

examples/demo/config.tsx

@@ -13,6 +13,7 @@ import { ruRU } from "@material-ui/core/locale";
 import AntdConfig from "react-awesome-query-builder/config/antd";
 import AntdWidgets from "react-awesome-query-builder/components/widgets/antd";
 import MaterialConfig from "react-awesome-query-builder/config/material";
+import BootstrapConfig from "react-awesome-query-builder/config/bootstrap";
 const {
   FieldSelect,
   FieldDropdown,
@@ -25,6 +26,7 @@ const skinToConfig: Record<string, Config> = {
   vanilla: BasicConfig,
   antd: AntdConfig,
   material: MaterialConfig,
+  bootstrap: BootstrapConfig
 };
 
 export default (skin: string) => {

examples/demo/demo.tsx

@@ -79,6 +79,7 @@ export default class DemoQueryBuilder extends Component<{}, DemoQueryBuilderStat
             <option key="vanilla">vanilla</option>
             <option key="antd">antd</option>
             <option key="material">material</option>
+            <option key="bootstrap">bootstrap</option>
           </select>
           <button onClick={this.resetValue}>reset</button>
           <button onClick={this.clearValue}>clear</button>

modules/components/widgets/bootstrap/core/BootstrapButton.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { Button } from "reactstrap";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPlus, faTrashAlt } from "@fortawesome/free-solid-svg-icons";
+
+export default ({ type, label, onClick, config }) => {
+  const typeToOnlyIcon = {
+    delGroup: faTrashAlt,
+    delRuleGroup: faTrashAlt,
+    delRule: faTrashAlt,
+    addRuleGroup: faPlus,
+    addRuleGroupExt: faPlus,
+  };
+  const typeToIcon = {
+    addRule: faPlus,
+    addGroup: faPlus,
+  };
+  const typeToColor = {
+    addRule: "primary",
+    addGroup: "primary",
+    delGroup: "danger",
+    delRuleGroup: "danger",
+    delRule: "danger",
+  };
+
+  let isOnlyIcon = typeToOnlyIcon[type];
+
+  return (
+    <Button size="sm" color={typeToColor[type]} onClick={onClick}>
+      <FontAwesomeIcon icon={isOnlyIcon ? typeToOnlyIcon[type] : typeToIcon[type]} /> {!isOnlyIcon && label}
+    </Button>
+  );
+};

modules/components/widgets/bootstrap/core/BootstrapButtonGroup.jsx

@@ -0,0 +1,6 @@
+import React from "react";
+import { ButtonGroup } from "reactstrap";
+
+export default ({children, config}) => {
+  return <ButtonGroup>{children}</ButtonGroup>;
+};

modules/components/widgets/bootstrap/core/BootstrapConfirm.jsx

@@ -0,0 +1,5 @@
+export default ({onOk, okText, cancelText, title}) => {
+  if (confirm(title)) {
+    onOk();
+  }
+};

modules/components/widgets/bootstrap/core/BootstrapConjs.jsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { Button, ButtonGroup } from "reactstrap";
+
+export default ({
+  id,
+  not,
+  setNot,
+  conjunctionOptions,
+  setConjunction,
+  disabled,
+  readonly,
+  config,
+  showNot,
+  notLabel,
+}) => {
+  
+  const conjsCount = Object.keys(conjunctionOptions).length;
+  const lessThenTwo = disabled;
+  const { forceShowConj } = config.settings;
+  const showConj = forceShowConj || (conjsCount > 1 && !lessThenTwo);
+
+  const renderOptions = () =>
+    Object.keys(conjunctionOptions).map((key) => {
+      const { id, name, label, checked } = conjunctionOptions[key];
+      let postfix = setConjunction.isDummyFn ? "__dummy" : "";
+      if ((readonly || disabled) && !checked) return null;
+      return (
+        <Button
+          key={id + postfix}
+          id={id + postfix}
+          size="sm"
+          color={checked ? "primary" : "secondary"}
+          value={key}
+          onClick={onClick.bind(null, key)}
+          disabled={readonly || disabled}
+        >
+          {label}
+        </Button>
+      );
+    });
+
+  const renderNot = () => {
+    if (readonly && !not) return null;
+    return (
+      <Button
+        key={id}
+        id={id + "__not"}
+        size="sm"
+        color={not ? "danger" : "secondary"}
+        onClick={onNotClick.bind(null, !not)}
+        disabled={readonly}
+      >
+        {notLabel || "NOT"}
+      </Button>
+    );
+  };
+
+  const onClick = (value) => setConjunction(value);
+  const onNotClick = (checked) => setNot(checked);
+
+  return (
+    <ButtonGroup size="sm" disabled={readonly}>
+      {showNot && renderNot()}
+      {showConj && renderOptions()}
+    </ButtonGroup>
+  );
+};