antd.less

(fix #93)

.babelrc

@@ -2,11 +2,14 @@
     "presets": [
         "react",
         "es2015",
-	"stage-0"
+	    "stage-0"
     ],
     "plugins": [
         ["transform-decorators-legacy"],
-        ["import", { libraryName: "antd", style: "css" }],
+        ["import", {
+            "libraryName": "antd",
+            "style": false
+        }],
         ["transform-es2015-modules-commonjs", {
             "allowTopLevelThis": true,
             "loose": true

README.md

@@ -33,22 +33,22 @@ For [antd v2](https://2x.ant.design/docs/react/introduce) (which has more compac
 - Export to MongoDb or SQL
 
 
-### Install
+## Getting started
 Install: `npm i react-awesome-query-builder`
 
 See `examples/demo` as example of usage and configuration.
 
 For full reordering support you need to add class `query-builder-container` for dom-element which is holding your querybuilder component AND has scrolling. If there is no such dom-element (only body) you can do nothing.
 
 
-## Use
+## Usage
 ```javascript
 import React, {Component} from 'react';
 import {Query, Builder, Utils as QbUtils} from 'react-awesome-query-builder';
 import config from './config'; //see below 'Config format'
+import 'react-awesome-query-builder/css/antd.less';
 import 'react-awesome-query-builder/css/styles.scss';
-import 'react-awesome-query-builder/css/compact_styles.scss';
-import 'react-awesome-query-builder/css/denormalize.scss';
+import 'react-awesome-query-builder/css/compact_styles.scss'; //optional, for more compact styles
 
 class DemoQueryBuilder extends Component {
     render() {                
@@ -89,7 +89,6 @@ Use can save tree as serialized Immutable object with `transit.toJSON`/`transit.
 at `examples/demo/demo.js` (using `Immutable.fromJS` with a little trick)
 
 
-
 ## Config format
 ```javascript
 import {Widgets, Operators} from 'react-awesome-query-builder';
@@ -307,7 +306,8 @@ export default {
     deleteLabel: null,
     addGroupLabel: "Add group",
     addRuleLabel: "Add rule",
-    readonlyMode: false,
+    //Not allow to add/delete rules or groups, but allow change
+    immutableGroupsMode: false,
     notLabel: "Not",
     //If you want to ask confirmation of removing non-empty rule/group, add these options
     //List of all valid properties: https://ant.design/components/modal/#API
@@ -350,6 +350,9 @@ export default {
     },
     //Activate reordering support for rules and groups of rules?
     canReorder: true,
+    //Allow move rules (or groups) in/out groups during reorder?
+    //(False - allow "safe" reorder, means only reorder at same level)
+    canRegroup: true,
     //(For comparing field with field) Function for building right list of fields to compare
     canCompareFieldWithField: (string leftField, Object leftFieldConfig, string rightField, 
       Object rightFieldConfig) => {
@@ -361,6 +364,7 @@ export default {
 
 ```
 
+
 ### Development
 To build the component locally, clone this repo then run:
 

css/antd.less

@@ -0,0 +1,35 @@
+// Doing what antd/lib/style/core/index.less does
+// but without loading "base" which overwrites global styles
+// See https://github.com/ant-design/ant-design/issues/4331#issuecomment-396875383
+
+@import '~antd/lib/style/mixins/index.less';
+@import '~antd/lib/style/core/iconfont.less';
+@import '~antd/lib/style/core/motion.less';
+
+@import "~antd/lib/grid/style/index.css";
+@import "~antd/lib/icon/style/index.css";
+@import '~antd/lib/button/style/index.less';
+@import '~antd/lib/modal/style/index.less';
+@import "~antd/lib/select/style/index.css";
+@import "~antd/lib/cascader/style/index.css";
+@import "~antd/lib/switch/style/index.css";
+@import '~antd/lib/menu/style/index.less';
+@import "~antd/lib/dropdown/style/index.css";
+@import "~antd/lib/radio/style/index.css";
+@import "~antd/lib/slider/style/index.css";
+@import "~antd/lib/tooltip/style/index.css";
+@import "~antd/lib/popover/style/index.css";
+@import "~antd/lib/time-picker/style/index.css";
+@import "~antd/lib/date-picker/style/index.css";
+@import "~antd/lib/input/style/index.css";
+@import "~antd/lib/input-number/style/index.css";
+@import '~antd/lib/checkbox/style/index.less';
+@import "~antd/lib/calendar/style/index.css";
+@import "~antd/lib/config-provider/style/index.css";
+@import "~antd/lib/locale-provider/style/index.css";
+@import "~antd/lib/auto-complete/style/index.css";
+@import "~antd/lib/empty/style/index.css";
+
+@import "~antd/lib/collapse/style/index.css";
+@import "~antd/lib/alert/style/index.css";
+@import "~antd/lib/message/style/index.css";

css/compact_styles.scss

@@ -27,8 +27,15 @@
         width: 7px;
     }
   }
+
+  & > .group-or-rule-container:first-child > .group-or-rule {
+      &::before {
+        top: -7px;
+      }
+  }
 }
 
+
 .group--conjunctions {
   @extend %force_nomargin;
   margin-left: 4px !important;
@@ -39,14 +46,6 @@
     padding-right: 5px;
 }
 
-/*
-.query-builder.qb-dragging {
-    .group-or-rule-container {
-        margin-bottom: 10px;
-    }
-}
-*/
-
 .rule--operator, .widget--widget, .widget--valuesrc, .widget--sep {
   margin-left: 5px;
 }

examples/index.js

@@ -3,15 +3,25 @@ import ReactDOM from 'react-dom';
 import Demo from './demo/demo.js';
 import { hot } from 'react-hot-loader'
 
+import '../css/antd.less';
+import '../css/styles.scss';
+//import '../css/compact_styles.scss'; //optional
+
+/*
+ * OLD styles import
+ * Requires `style: true` for antd in `.babelrc`
+ * But breaks some global styles, so need to apply `reset.scss` and `denormalize.scss`
+ * See https://github.com/ukrbublik/react-awesome-query-builder/issues/93
+ * 
 import '../css/reset.scss';
 import '../css/styles.scss';
-//import '../css/compact_styles.scss';
+//import '../css/compact_styles.scss'; //optional
 import '../css/denormalize.scss';
+*/
 
 window.React = React;
 
 
-
 class App extends Component {
     render() {
         return (
@@ -27,6 +37,6 @@ ReactDOM.render((
     <AppContainer>
         <Demo />
     </AppContainer>
-), document.body);
+), document.getElementById('root'));