├── .babelrc
├── .eslintignore
├── .eslintrc
├── .gitignore
├── .npmignore
├── .travis.yml
├── LICENSE.txt
├── README.md
├── css
    ├── compact_styles.scss
    ├── denormalize.scss
    ├── reset.scss
    └── styles.scss
├── examples
    ├── demo
    │   ├── config.js
    │   └── demo.js
    ├── index.html
    ├── index.js
    ├── webpack.config.js
    └── webpack.config.production.js
├── karma.conf.js
├── modules
    ├── actions
    │   ├── drag.js
    │   ├── group.js
    │   ├── index.js
    │   ├── rule.js
    │   └── tree.js
    ├── components
    │   ├── Builder.js
    │   ├── Field.js
    │   ├── Group.js
    │   ├── Item.js
    │   ├── Operator.js
    │   ├── OperatorOptions.js
    │   ├── Preview.js
    │   ├── Query.js
    │   ├── Rule.js
    │   ├── Widget.js
    │   ├── containers
    │   │   ├── GroupContainer.js
    │   │   ├── OperatorOptionsContainer.js
    │   │   ├── RuleContainer.js
    │   │   ├── SortableContainer.js
    │   │   └── WidgetContainer.js
    │   ├── operators
    │   │   ├── Proximity.js
    │   │   └── index.js
    │   └── widgets
    │   │   ├── Boolean.js
    │   │   ├── Date.js
    │   │   ├── DateTime.js
    │   │   ├── MultiSelect.js
    │   │   ├── Number.js
    │   │   ├── Range.js
    │   │   ├── Select.js
    │   │   ├── Slider.js
    │   │   ├── Text.js
    │   │   ├── Time.js
    │   │   ├── ValueField.js
    │   │   └── index.js
    ├── constants.js
    ├── index.js
    ├── stores
    │   └── tree.js
    └── utils
    │   ├── configUtils.js
    │   ├── defaultUtils.js
    │   ├── index.js
    │   ├── mongodbFormat.js
    │   ├── queryBuilderFormat.js
    │   ├── queryString.js
    │   ├── stuff.js
    │   ├── treeUtils.js
    │   ├── uuid.js
    │   └── validation.js
├── package.json
├── scripts
    └── gh-pages.sh
├── tests
    └── webpack.js
└── webpack.config.js


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |     "presets": [
 3 |         "react",
 4 |         "es2015",
 5 | 	"stage-0"
 6 |     ],
 7 |     "plugins": [
 8 |         ["transform-decorators-legacy"],
 9 |         ["import", { libraryName: "antd", style: "css" }],
10 |         ["transform-es2015-modules-commonjs", {
11 |             "allowTopLevelThis": true,
12 |             "loose": true
13 |         }]
14 |     ]
15 | }
16 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | build
2 | node_modules


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "eslint-config-airbnb",
 3 |   "env": {
 4 |     "browser": true,
 5 |     "mocha": true,
 6 |     "node": true
 7 |   },
 8 |   "rules": {
 9 |     "react/jsx-uses-react": 2,
10 |     "react/jsx-uses-vars": 2,
11 |     "react/react-in-jsx-scope": 2,
12 |  
13 |     //Temporarirly disabled due to a possible bug in babel-eslint (todomvc example)
14 |     "block-scoped-var": 0,
15 |     // Temporarily disabled for test/* until babel/babel-eslint#33 is resolved
16 |     "padded-blocks": 0,
17 |     // We sometimes create setter callbacks in a loop to obscure the delta of a value.
18 |     "no-loop-func": 0
19 |   },
20 |   "plugins": [
21 |     "react"
22 |   ]
23 | }
24 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | npm-debug.log
 3 | package-lock.json
 4 | .idea
 5 | yarn.lock
 6 | build
 7 | examples/*.ttf
 8 | examples/*.svg
 9 | examples/*.eot
10 | examples/*.woff
11 | examples/*.woff2
12 | examples/bundle.js
13 | examples/bundle.js.map
14 | .DS_Store
15 | 
16 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | examples
 2 | scripts
 3 | bower.json
 4 | karma.conf.js
 5 | tests.webpack.js
 6 | webpack.config.js
 7 | .babelrc
 8 | .eslintrc
 9 | .eslintignore
10 | .gitignore


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 |   - "6.10"
4 | before_install:
5 | install:
6 |   - npm install
7 |   - npm run build-examples
8 | 


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 | Copyright (c) 2016 Sebastian Siemssen
3 | 
4 | 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:
5 | 
6 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
7 | 
8 | 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.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # react-awesome-query-builder
  2 | <a href='https://www.npmjs.com/package/react-awesome-query-builder'><img src='https://img.shields.io/npm/v/react-awesome-query-builder.svg' /> <img src='https://travis-ci.org/ukrbublik/react-awesome-query-builder.svg?branch=master' /></a>
  3 | 
  4 | User-friendly React component to build queries.
  5 | 
  6 | Forked from [https://github.com/fubhy/react-query-builder](https://github.com/fubhy/react-query-builder)
  7 | 
  8 | Inspired by [jQuery QueryBuilder](http://querybuilder.js.org/)
  9 | 
 10 | Using awesome [Ant Design](https://ant.design/) for widgets
 11 | 
 12 | Master branch uses [antd v2](https://2x.ant.design/docs/react/introduce) (because of more compact style).
 13 | For [antd v3](https://ant.design/docs/react/introduce) see [branch antd-3](https://github.com/ukrbublik/react-awesome-query-builder/tree/antd-3). 
 14 | 
 15 | 
 16 | ### Features
 17 | - Highly configurable
 18 | - Fields can be of type:
 19 |   - simple (string, number, bool, date/time/datetime, list)
 20 |   - structs (will be displayed in selectbox as tree of members)
 21 |   - custom type (dev should add its own widget component for this) (it's not complex, you can add slider for example)
 22 | - Comparison operators can be:
 23 |   - binary (== != < > ..)
 24 |   - unary (is empty, is null)
 25 |   - 'between' (for numbers)
 26 |   - complex operators like 'proximity'
 27 | - Values of fields can be compared with values -or- another fields (of same type)
 28 | - Reordering support for rules and groups of rules
 29 | - Using awesome [Ant Design](https://ant.design/)
 30 | - Export to MongoDb or SQL
 31 | 
 32 | 
 33 | ### Demo
 34 | [Live Demo](https://ukrbublik.github.io/react-awesome-query-builder)
 35 | 
 36 | ![Screenshot](https://ukrbublik.github.io/react-awesome-query-builder/screenshot.png)
 37 | 
 38 | 
 39 | ### Install
 40 | Install: `npm i react-awesome-query-builder`
 41 | 
 42 | See `examples/demo` as example of usage and configuration.
 43 | 
 44 | 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.
 45 | 
 46 | 
 47 | ## Use
 48 | ```javascript
 49 | import React, {Component} from 'react';
 50 | import {Query, Builder, Utils as QbUtils} from 'react-awesome-query-builder';
 51 | import config from './config'; //see below 'Config format'
 52 | import 'react-awesome-query-builder/css/styles.scss';
 53 | import 'react-awesome-query-builder/css/compact_styles.scss';
 54 | import 'react-awesome-query-builder/css/denormalize.scss';
 55 | 
 56 | class DemoQueryBuilder extends Component {
 57 |     render() {                
 58 |         return (
 59 |             <div>
 60 |                 <Query 
 61 |                   {...config} 
 62 |                   //you can pass object here, see treeJSON at onChange
 63 |                   //value=transit.fromJSON(treeJSON)
 64 |                   get_children={this.getChildren}
 65 |                   onChange={this.onChange}
 66 |                 ></Query>
 67 |             </div>
 68 |         );
 69 |     }
 70 |     
 71 |     getChildren(props) {
 72 |         return (
 73 |             <div>
 74 |                 <div className="query-builder">
 75 |                     <Builder {...props} />
 76 |                 </div>
 77 |                 <div>Query string: {QbUtils.queryString(props.tree, props.config)}</div>
 78 |                 <div>Mongodb query: {QbUtils.mongodbFormat(props.tree, props.config)}</div>
 79 |             </div>
 80 |         )
 81 |     }
 82 |     
 83 |     onChange(tree) {
 84 |       //here you can save tree object: 
 85 |       //var treeJSON = transit.toJSON(tree)
 86 |     }
 87 | }
 88 | ```
 89 | 
 90 | Use can save tree as serialized Immutable object with `transit.toJSON`/`transit.fromJSON` 
 91 | -or- as plain JS, see `loadTree = function(serTree) {...}` 
 92 | at `examples/demo/demo.js` (using `Immutable.fromJS` with a little trick)
 93 | 
 94 | 
 95 | 
 96 | ## Config format
 97 | ```javascript
 98 | import {Widgets, Operators} from 'react-awesome-query-builder';
 99 | const {
100 |     TextWidget,
101 |     NumberWidget,
102 |     SelectWidget,
103 |     MultiSelectWidget,
104 |     DateWidget,
105 |     BooleanWidget,
106 |     TimeWidget,
107 |     DateTimeWidget,
108 |     ValueFieldWidget
109 | } = Widgets;
110 | import en_US from 'antd/lib/locale-provider/en_US';
111 | 
112 | export default {
113 |   conjunctions: {
114 |     'AND': {
115 |       label: 'And', //label for conjunctions swicther
116 |       //(for building query string) function to join rules into group
117 |       // children - list of already formatted queries (strings) to be joined with conjuction
118 |       // isForDisplay - false by default, for building query string for SQL/expression/etc., 
119 |       //  true can be used to format query string displayed on collapsed query group 
120 |       //  (not used for now, see Issue #2)
121 |       formatConj: (Immultable.List children, string conj, bool not, bool isForDisplay) => string,
122 |       reversedConj: 'OR', //'AND' reverses to 'OR'
123 |       //for building mongodb query:
124 |       mongoConj: '$and',
125 |     },
126 |     'OR': ...same as for 'AND'
127 |   },
128 |   
129 |   fields: {
130 |     //Example of atomic field:
131 |     name: {
132 |       label: 'Quantity',
133 |       type: 'number', //one of types described below in section 'types'
134 |       //Settings for widgets
135 |       // Available settings for Number widget: min, max, step
136 |       fieldSettings: {
137 |           min: 2,
138 |       },
139 |       //List of values for Select widget
140 |       listValues: {
141 |         //<key>: <label to display at list of options>,
142 |         yellow: 'Yellow',
143 |         green: 'Green',
144 |       },
145 |       //(optional) You can override here some options of config of corresponding type:
146 |       // 'operators', 'defaultOperator', 'widgets', 'valueSources' (see below at section 'types')
147 |     },
148 |     //Example of special struct field:
149 |     members: { //key of field
150 |       label: 'Members', //label to display at list of fields
151 |       type: '!struct', //special type for struct
152 |       subfields: { //only for type == '!struct'
153 |         subname: { //key of subfield
154 |           label: 'Subname', //label for list of fields
155 |           //label for field menu's toggler (for config.renderFieldAndOpAsDropdown == true)
156 |           label2: 'MemberName',
157 |           type: 'text', //one of types described below in section 'types'
158 |         },
159 |       },
160 |     },
161 |     ...other fields
162 |   },
163 |   
164 |   types: {
165 |     number: { //type key
166 |       //(optional) Values of fields can be compared with values or another fields
167 |       // (see settings.valueSourcesInfo). If you want to compare values of this type 
168 |       // only with values or other fields of this type, edit:
169 |       valueSources: ['value'],
170 |       //Available widgets for type and its configs:
171 |       widgets: {
172 |         number: { //widget key, see section 'widgets' below
173 |           //List of operators can be applied to this type (see section 'operators' below)
174 |           operators: ['greater', 'less'],
175 |           defaultOperator: 'greater', //default operator to be selected for this type
176 |           //Config for this widget (all optional):
177 |           widgetProps: {
178 |             //for example, here you can overwrire 'valueLabel', 'valuePlaceholder', 
179 |             // for date/time: 'timeFormat', 'dateFormat', 'valueFormat'
180 | 
181 |             //also you can pass props directly to widget, for example enable search for Select widget:
182 |             customProps: {
183 |                 showSearch: true
184 |             }
185 |           },
186 |           //Config for operators for this widget (all optional):
187 |           opProps: {
188 |             between: { //operator key
189 |               //for example, here you can overwrire 'valueLabels'
190 |             },
191 |             ...other ops
192 |           },
193 |         },
194 |         //Most of types can have only 1 widget, but for list there can be 2: 
195 |         // single-select widget (for op ==) and multi-select widget (for op 'in')
196 |         ...other widgets if applicable
197 |         //'field' is special widget to compare values of field of this type
198 |         // with another fields (of this type)
199 |         field: {
200 |           ...you can overwrire 'operators' for example
201 |         }
202 |       }
203 |     },
204 |     ...other types
205 |   },
206 |   
207 |   operators: {
208 |     equal: { //operator key
209 |       label: '==', //label for selectbox
210 |       labelForFormat: '==', //string used for formatting query, only if 'formatOp' is not present
211 |       reversedOp: 'not_equal', //operator opposite to current
212 |       cardinality: 1, //number of right operands (1 for binary, 2 for 'between')
213 |       isUnary: true,
214 |       //(for building query string) function to format rule
215 |       // value - string (already formatted value) for cardinality==1 
216 |       // -or- Immutable.List of strings for cardinality>1
217 |       formatOp: (string field, string op, mixed value, string valueSrc, string valueType, 
218 |         Object opDef, Object operatorOptions, bool isForDisplay) => string,
219 |       //(for building mongodb query) function to format rule
220 |       // value - mixed for cardinality==1 -or- Array for cardinality>2 
221 |       mongoFormatOp: (string field, string op, mixed value) => object,
222 |       //for cardinality==2 ('between')
223 |       valueLabels: ['Value from', {label: 'Value to', placeholder: 'Enter value to'}],
224 |       textSeparators: [null, 'and'],
225 |       ...also see examples/demo for config of 'proximity' operator
226 |     },
227 |   },
228 |   
229 |   widgets: {
230 |     text: {
231 |       type: "text", //see 'types' section
232 |       valueSrc: 'value', //'value' or 'field' (only for special 'field' widget)
233 |       factory: (props) => <TextWidget {...props} />, //React component
234 |       //(for building query string) function to format widget's value
235 |       formatValue: (mixed val, Object fieldDef, Object wgtDef, bool isForDisplay) => string,
236 |       //(for building mongodb query) function to convert widget's value
237 |       mongoFormatValue: (mixed val, Object fieldDef, Object wgtDef) => object,
238 |       //func to validate widget's value
239 |       validateValue: (mixed val, Object fieldDef) => bool,
240 |       //Options:
241 |       // common:
242 |       valueLabel: "Text",
243 |       valuePlaceholder: "Enter text",
244 |       // for date/time widgets:
245 |       timeFormat: 'HH:mm',
246 |       dateFormat: 'YYYY-MM-DD',
247 |       valueFormat: 'YYYY-MM-DD HH:mm',
248 |       // ...for your custom widgets you can add here your options
249 |       // also you can pass customProps, for example to enable search for select widget:
250 |       customProps: { showSearch: true }
251 |     },
252 |     ...other widgets (you can add your custom ones here)
253 |     ...also there should be special 'field' widget, see examples/demo
254 |   },
255 |   
256 |   settings: {
257 |     //Locale used for AntDesign widgets
258 |     locale: {
259 |         short: 'en',
260 |         full: 'en-US',
261 |         antd: en_US,
262 |     },
263 |     //To shorten long labels of fields/values (by length, i.e. number of chars)
264 |     maxLabelsLength: 50,
265 |     //Placement of antdesign's dropdown pop-up menu (default: 'bottomLeft')
266 |     dropdownPlacement: 'bottomRight',
267 |     //Don't show conjunctions switcher for only 1 rule?
268 |     hideConjForOne: true,
269 |     //Size of AntDesign components
270 |     renderSize: 'small',
271 |     //How to render conjunctions switcher? true - use RadioGroup, false - use ButtonGroup
272 |     renderConjsAsRadios: false,
273 |     //How to render fields/ops list? true - use Dropdown/Menu, false - use Select
274 |     renderFieldAndOpAsDropdown: false,
275 |     //You can pass props to Select field widget
276 |     customFieldSelectProps: {
277 |         showSearch: true
278 |     },
279 |     // You can change the position of the group actions to the following:
280 |     // oneOf [topLeft, topCenter, topRight (default), bottomLeft, bottomCenter, bottomRight]
281 |     groupActionsPosition: 'topRight', 
282 |     //Strategies for selecting operator for new field (used by order until success)
283 |     // 'default' (default if present), 'keep' (keep prev from last field), 'first', 'none'
284 |     setOpOnChangeField: ['keep', 'default'],
285 |     //Clear value on field change? false - if prev & next fields have same type (widget), keep
286 |     clearValueOnChangeField: false,
287 |     //Clear value on operator change?
288 |     clearValueOnChangeOp: false,
289 |     //?
290 |     setDefaultFieldAndOp: false,
291 |     //Max nesting for rule groups
292 |     maxNesting: 10,
293 |     //Separaor for struct fields
294 |     fieldSeparator: '.', //also used for formatting
295 |     fieldSeparatorDisplay: '->', //used for toggler's text for renderFieldAndOpAsDropdown==true
296 |     //Show labels under all ui fields?
297 |     showLabels: false,
298 |     //Show NOT together with AND/OR?
299 |     showNot: true,
300 |     //Next options are for localization:
301 |     valueLabel: "Value",
302 |     valuePlaceholder: "Value",
303 |     fieldLabel: "Field",
304 |     operatorLabel: "Operator",
305 |     fieldPlaceholder: "Select field",
306 |     operatorPlaceholder: "Select operator",
307 |     deleteLabel: null,
308 |     addGroupLabel: "Add group",
309 |     addRuleLabel: "Add rule",
310 |     readonlyMode: false,
311 |     notLabel: "Not",
312 |     delGroupLabel: null,
313 |     valueSourcesPopupTitle: "Select value source",
314 |     //Leave empty group after deletion or add 1 clean rule immediately?
315 |     canLeaveEmptyGroup: true, //after deletion
316 |     //(for building query string) function to format rule with reverse operator 
317 |     // which haven't 'formatOp'
318 |     // q - already formatted rule for opposite operator (which have 'formatOp')
319 |     // return smth like "NOT(" + q + ")"
320 |     formatReverse: (string q, string operator, string reversedOp, Object operatorDefinition, 
321 |       Object revOperatorDefinition, bool isForDisplay) => string,
322 |     //(for building query string) function to format field
323 |     // parts - for struct field
324 |     // label2 - with using of 'fieldSeparatorDisplay'
325 |     //just return field (or label2 for isForDisplay==true)
326 |     formatField: (string field, Array parts, string label2, Object fieldDefinition, Object config, 
327 |       bool isForDisplay) => string,
328 |     //Values of fields can be compared with values or another fields
329 |     //If you want to disable this feature and leave only comparing with values, remove 'field'
330 |     valueSourcesInfo: {
331 |       value: {
332 |         label: "Value"
333 |       },
334 |       field: {
335 |         label: "Field",
336 |         widget: "field",
337 |       }
338 |     },
339 |     //Activate reordering support for rules and groups of rules?
340 |     canReorder: true,
341 |     //(For comparing field with field) Function for building right list of fields to compare
342 |     canCompareFieldWithField: (string leftField, Object leftFieldConfig, string rightField, 
343 |       Object rightFieldConfig) => {
344 |         //for type == 'select'/'multiselect' you can check listValues
345 |         return true;
346 |     },
347 |   },
348 | }
349 | 
350 | ```
351 | 
352 | ### Development
353 | To build the component locally, clone this repo then run:
354 | 
355 | `npm install`
356 | `npm run examples`
357 | 
358 | Then open localhost:3001 in a browser.
359 | 
360 | Scripts:
361 | - `npm run build-npm` - Builds a npm module. Output path: `build/npm`
362 | - `npm run build-global` - Builds with webpack the self contained pack of the component. Output path: `build/global`
363 | - `npm run build-examples` - Builds with webpack the examples. Output path: `examples`
364 | - `npm run examples` - Builds with webpack the examples and runs a dev-server on localhost:3001.
365 | - `sh ./scripts/gh-pages.sh` - Update gh pages
366 | 
367 | The repo sticks in general to the [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript).
368 | 
369 | Pull Requests are always welcomed :)
370 | 
371 | ### License
372 | MIT. See also `LICENSE.txt`
373 | 
374 | 


--------------------------------------------------------------------------------
/css/compact_styles.scss:
--------------------------------------------------------------------------------
 1 | @mixin force_nomargin {
 2 |   margin: 0px !important;
 3 | }
 4 | 
 5 | %force_nomargin {
 6 |   @include force_nomargin;
 7 | }
 8 | 
 9 | .group, .rule {
10 | }
11 | 
12 | .rule {
13 |   padding: 5px;
14 | }
15 | 
16 | .group {
17 |   padding-left: 0px;
18 | }
19 | 
20 | .group--children {
21 |   @extend %force_nomargin;
22 |   padding-left: 10px !important;
23 | 
24 |   & > .group-or-rule-container > .group-or-rule {
25 |     &::before, &::after {
26 |         left: -7px;
27 |         width: 7px;
28 |     }
29 |   }
30 | }
31 | 
32 | .group--conjunctions {
33 |   @extend %force_nomargin;
34 |   margin-left: 4px !important;
35 | }
36 | 
37 | .group-or-rule-container {
38 |     margin-bottom: 5px;
39 |     padding-right: 5px;
40 | }
41 | 
42 | /*
43 | .query-builder.qb-dragging {
44 |     .group-or-rule-container {
45 |         margin-bottom: 10px;
46 |     }
47 | }
48 | */
49 | 
50 | .rule--operator, .widget--widget, .widget--valuesrc, .widget--sep {
51 |   margin-left: 5px;
52 | }
53 | .operator--options--sep {
54 |   margin-right: 5px;
55 | }
56 | .group--header {
57 |   padding: 5px;
58 |   padding-left: 0;
59 | }
60 | 
61 | 


--------------------------------------------------------------------------------
/css/denormalize.scss:
--------------------------------------------------------------------------------
 1 | html {
 2 |   line-height: normal;
 3 | }
 4 | 
 5 | body {
 6 |   font-family: sans-serif, "Helvetica Neue For Number", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
 7 |   font-size: small;
 8 |   line-height: normal;
 9 |   color: rgba(30, 30, 30, 1);
10 | }
11 | 
12 | body {
13 |   margin: auto;
14 | }
15 | 
16 | * {
17 |   box-sizing: content-box;
18 | }
19 | *:before,
20 | *:after {
21 |   box-sizing: content-box;
22 | }
23 | 
24 | 
25 | select {
26 |   -webkit-appearance: menulist;
27 | }
28 | select[multiple] {
29 |   -webkit-appearance: listbox;
30 | }
31 | button, input[type="button"], input[type="reset"], input[type="submit"] {
32 |   -webkit-appearance: button;
33 | }
34 | input[type="text"] {
35 |   -webkit-appearance: textfield;
36 | }
37 | input[type="checkbox"] {
38 |   -webkit-appearance: checkbox;
39 | }
40 | input[type="radio"] {
41 |   -webkit-appearance: radio;
42 | }
43 | textarea {
44 |   -webkit-appearance: textarea;
45 | }
46 | 


--------------------------------------------------------------------------------
/css/reset.scss:
--------------------------------------------------------------------------------
 1 | /* http://meyerweb.com/eric/tools/css/reset/ 
 2 |    v2.0 | 20110126
 3 |    License: none (public domain)
 4 | */
 5 |  
 6 | html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
 7 |   margin: 0;
 8 |   padding: 0;
 9 |   border: 0;
10 |   font-size: 100%;
11 |   font: inherit;
12 |   vertical-align: baseline; }
13 |  
14 | /* HTML5 display-role reset for older browsers */
15 |  
16 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
17 |   display: block; }
18 |  
19 | body {
20 |   line-height: 1; }
21 |  
22 | ol, ul {
23 |   list-style: none; }
24 |  
25 | blockquote, q {
26 |   quotes: none; }
27 |  
28 | blockquote {
29 |   &:before, &:after {
30 |     content: '';
31 |     content: none; } }
32 |  
33 | q {
34 |   &:before, &:after {
35 |     content: '';
36 |     content: none; } }
37 |  
38 | table {
39 |   border-collapse: collapse;
40 |   border-spacing: 0; }


--------------------------------------------------------------------------------
/css/styles.scss:
--------------------------------------------------------------------------------
  1 | @mixin flex{
  2 |   display: flex;
  3 |   align-items: center;
  4 | }
  5 | 
  6 | @mixin clearfix {
  7 |   &:after {
  8 |     content: "";
  9 |     display: table;
 10 |     clear: both;
 11 |   }
 12 | }
 13 | 
 14 | @mixin noselect {
 15 |   -webkit-user-select: none;
 16 |   -khtml-user-select: none;
 17 |   -moz-user-select: none;
 18 |   -ms-user-select: none;
 19 |   user-select: none;
 20 | }
 21 | 
 22 | %noselect {
 23 |   @include noselect;
 24 | }
 25 | 
 26 | %clearfix {
 27 |   @include clearfix;
 28 | }
 29 | 
 30 | %flex{
 31 |   @include flex;
 32 | }
 33 | 
 34 | .query-builder {
 35 |   overflow: hidden;
 36 |   *, *::before, *::after {
 37 |     box-sizing: border-box;
 38 |   }
 39 | }
 40 | 
 41 | 
 42 | /******************************************************************************/
 43 | /** COMMON ********************************************************************/
 44 | /******************************************************************************/
 45 | 
 46 | .query-builder, .query-preview {
 47 |   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 48 |   font-size: 12px;
 49 |   line-height: 1.25;
 50 |   margin: 1rem;
 51 | }
 52 | 
 53 | .query-builder.qb-dragging {
 54 |   cursor: -webkit-grabbing !important;
 55 |   cursor: grabbing !important;
 56 |   button {
 57 |     pointer-events: none;
 58 |   }
 59 | }
 60 | 
 61 | .query-preview {
 62 |   font-size: 14px;
 63 |   background: rgba(250, 240, 210, 0.5);
 64 |   border: 1px solid #DCC896;
 65 |   min-height: 1rem;
 66 |   display: block;
 67 |   padding: 1rem;
 68 | }
 69 | 
 70 | .group {
 71 |   background: rgba(250, 240, 210, 0.5);
 72 |   border: 1px solid #DCC896;
 73 | }
 74 | 
 75 | .rule {
 76 |   background-color: white;
 77 |   border: 1px solid transparent;
 78 |   padding: 10px;
 79 | }
 80 | 
 81 | .group-or-rule {
 82 |   border-radius: 5px;
 83 |   position: relative;
 84 | }
 85 | 
 86 | .qb-draggable {
 87 |   @extend %noselect;
 88 |   pointer-events: none;
 89 |   position: absolute;
 90 |   opacity: 0.7;
 91 |   z-index: 1000;
 92 | }
 93 | 
 94 | .qb-placeholder {
 95 |     border: 1px dashed gray;
 96 | }
 97 | 
 98 | .group-or-rule-container {
 99 |     margin-bottom: 10px;
100 |     padding-right: 10px;
101 | }
102 | 
103 | /* slider */
104 | .ant-tooltip-inner {
105 |   min-height: 18px;
106 | }
107 | .ant-slider {
108 |   margin-bottom: 4px;
109 |   margin-top: 4px;
110 | }
111 | .ant-slider-with-marks {
112 |   margin-bottom: 10px;
113 |   margin-top: 4px;
114 | }
115 | .ant-slider-track {
116 |   visibility: visible !important;
117 | }
118 | 
119 | /******************************************************************************/
120 | /** GROUP *********************************************************************/
121 | /******************************************************************************/
122 | .group--header,
123 | .group--footer{
124 |   @extend %flex;
125 | }
126 | 
127 | .group--children {
128 |   padding-left: 20px;
129 | 
130 |   & > .group-or-rule-container > .group-or-rule {
131 |     &:before {
132 |         top: -4px;
133 |         border-width: 0 0 2px 2px;
134 |     }
135 | 
136 |      &::after {
137 |         top: 50%;
138 |         border-width: 0 0 0 2px;    
139 |     }
140 | 
141 |     &::before, &::after {
142 |         content: '';
143 |         position: absolute;
144 |         left: -14px;
145 |         width: 14px;
146 |         height: calc(50% + 8px);
147 |         border-color: #CCC;
148 |         border-style: solid;    
149 |         -webkit-box-sizing: border-box;
150 |         -moz-box-sizing: border-box;
151 |         box-sizing: border-box;
152 |     }
153 |   }
154 | 
155 | 
156 |   & > .group-or-rule-container:first-child > .group-or-rule {
157 |       &::before {
158 |         top: -12px;
159 |         height: calc(50% + 14px);
160 |       }
161 |   }
162 | 
163 |   & > .group-or-rule-container:last-child > .group-or-rule {
164 |       &::before {
165 |         border-radius: 0 0 0 4px;
166 |       }
167 |       &::after {
168 |         display: none;
169 |       }
170 |   }
171 | 
172 | }
173 | 
174 | .group--children.hide--line {
175 |     & > .group-or-rule-container > .group-or-rule {
176 |         &::before, &::after {
177 |             border-color: rgba(128, 128, 128, 0.1);
178 |         }
179 |     }
180 | }
181 | 
182 | .qb-draggable {
183 |     &::before, &::after {
184 |         display: none;
185 |     }
186 | }
187 | 
188 | .qb-drag-handler {
189 |   @extend %noselect;
190 |   cursor: -webkit-grabbing;
191 |   cursor: grabbing;
192 | }
193 | 
194 | .group--header,
195 | .group--footer {
196 |   padding: {
197 |     top: 10px;
198 |     right: 5px;
199 |     bottom: 10px;
200 |     left: 10px;
201 |   }
202 | }
203 | 
204 | .group--conjunctions.hide--conj {
205 |     opacity: 0.3;
206 | }
207 | 
208 | .group--actions {
209 |   flex: 1;
210 |   display: flex;
211 |   &--tl,
212 |   &--bl{
213 |     justify-content: flex-start;
214 |   }
215 | 
216 |   &--tl{
217 |     margin-left: 20px;
218 |   }
219 | 
220 |   &--tc,
221 |   &--bc {
222 |     justify-content: center;
223 |   }
224 | 
225 |   &--tr,
226 |   &--br{
227 |     justify-content: flex-end;
228 |   }
229 | }
230 | 
231 | /******************************************************************************/
232 | /** RULE **********************************************************************/
233 | /******************************************************************************/
234 | 
235 | .rule--header {
236 |   @extend %clearfix;
237 |   float: right;
238 | }
239 | 
240 | /*
241 | .rule--body {
242 |   @extend %clearfix;
243 |   display: inline-block;
244 | }
245 | */
246 | 
247 | .rule--field, .rule--operator, .rule--value, .rule--operator-options, .rule--widget, 
248 | .widget--widget, .widget--valuesrc, .widget--sep, .operator--options--sep {
249 |   display: inline-block;
250 | }
251 | .rule--operator, .widget--widget, .widget--valuesrc, .widget--sep {
252 |   margin-left: 10px;
253 | }
254 | .operator--options--sep {
255 |   margin-right: 10px;
256 | }
257 | 
258 | div.tooltip-inner {
259 |   max-width: 500px;
260 | }
261 | 
262 | .rule--field, .rule--operator, .widget--widget {
263 |   label {
264 |     display: block;
265 |     font-weight: bold;
266 |   }
267 | }
268 | 
269 | /******************************************************************************/
270 | /** CONJUNCTION ***************************************************************/
271 | /******************************************************************************/
272 | 
273 | .conjunction {
274 |   display: inline-block;
275 | 
276 |   label {
277 |     display: inline-block;
278 |     border: 1px solid;
279 |     cursor: pointer;
280 |     color: white;
281 |     text-transform: uppercase;
282 |     padding: 0.2rem 0.4rem;
283 |   }
284 | 
285 |   input {
286 |     display: none;
287 |   }
288 | 
289 |   &[data-state="active"] {
290 |     label {
291 |       background-color: #3276b1;
292 |       border-color: #285e8e;
293 |     }
294 |   }
295 | 
296 |   &[data-state="inactive"] {
297 |     label {
298 |       background-color: #428bca;
299 |       border-color: #357ebd;
300 | 
301 |       &:hover {
302 |         background-color: #3276b1;
303 |         border-color: #285e8e;
304 |       }
305 |     }
306 |   }
307 | 
308 |   &:first-child {
309 |     label {
310 |       border-radius: 3px 0 0 3px;
311 |     }
312 |   }
313 | 
314 |   &:last-child {
315 |     label {
316 |       border-radius: 0 3px 3px 0;
317 |     }
318 |   }
319 | 
320 |   &:first-child:last-child {
321 |     border-radius: 3px;
322 |   }
323 | }
324 | 
325 | /******************************************************************************/
326 | /** ACTION ********************************************************************/
327 | /******************************************************************************/
328 | 
329 | /*
330 | .action {
331 |   display: inline-block;
332 |   background-color: #5cb85c;
333 |   border: 1px solid #4cae4c;
334 |   cursor: pointer;
335 |   color: white;
336 |   padding: 0.2rem 0.4rem;
337 |   text-decoration: none;
338 | 
339 |   &:first-child {
340 |     border-radius: 3px 0 0 3px;
341 |     border-left-width: 1px;
342 |   }
343 | 
344 |   &:last-child {
345 |     border-radius: 0 3px 3px 0;
346 |   }
347 | 
348 |   &:first-child:last-child {
349 |     border-radius: 3px;
350 |   }
351 | }
352 | 
353 | .action--DELETE {
354 |   background-color: #d9534f;
355 |   border-color: #d43f3a;
356 | }
357 | */
358 | 


--------------------------------------------------------------------------------
/examples/demo/demo.js:
--------------------------------------------------------------------------------
  1 | import React, {Component} from 'react';
  2 | import {Query, Builder, Preview, Utils} from 'react-awesome-query-builder';
  3 | const {queryBuilderFormat, queryString, mongodbFormat} = Utils;
  4 | import config from './config';
  5 | var stringify = require('json-stringify-safe');
  6 | import '../../css/reset.scss';
  7 | import '../../css/styles.scss';
  8 | import '../../css/compact_styles.scss';
  9 | import '../../css/denormalize.scss';
 10 | const Immutable = require('immutable');
 11 | const transit = require('transit-immutable-js');
 12 | import { fromJS } from 'immutable';
 13 | 
 14 | // https://github.com/ukrbublik/react-awesome-query-builder/issues/69
 15 | var seriazlieAsImmutable = true;
 16 | 
 17 | var serializeTree, loadTree, initValue;
 18 | if (!seriazlieAsImmutable) {
 19 |     serializeTree = function(tree) {
 20 |         return JSON.stringify(tree.toJS());
 21 |     };
 22 |     loadTree = function(serTree) {
 23 |         let tree = JSON.parse(serTree);
 24 |         return fromJS(tree, function (key, value) {
 25 |           let outValue;
 26 |           if (key == 'value' && value.get(0).toJS !== undefined)
 27 |             outValue = Immutable.List.of(value.get(0).toJS());
 28 |           else
 29 |             outValue = Immutable.Iterable.isIndexed(value) ? value.toList() : value.toOrderedMap();
 30 |           return outValue;
 31 |         });
 32 |     };
 33 |     initValue = '{"type":"group","id":"9a99988a-0123-4456-b89a-b1607f326fd8","children1":{"a98ab9b9-cdef-4012-b456-71607f326fd9":{"type":"rule","id":"a98ab9b9-cdef-4012-b456-71607f326fd9","properties":{"field":"multicolor","operator":"multiselect_equals","value":[["yellow","green"]],"valueSrc":["value"],"operatorOptions":null,"valueType":["multiselect"]},"path":["9a99988a-0123-4456-b89a-b1607f326fd8","a98ab9b9-cdef-4012-b456-71607f326fd9"]}},"properties":{"conjunction":"AND","not":false},"path":["9a99988a-0123-4456-b89a-b1607f326fd8"]}'
 34 | } else {
 35 |     serializeTree = transit.toJSON;
 36 |     loadTree = transit.fromJSON;
 37 |     initValue = '["~#iM",["type","group","id","9a99988a-0123-4456-b89a-b1607f326fd8","children1",["~#iOM",["a98ab9b9-cdef-4012-b456-71607f326fd9",["^0",["type","rule","id","a98ab9b9-cdef-4012-b456-71607f326fd9","properties",["^0",["field","multicolor","operator","multiselect_equals","value",["~#iL",[["yellow","green"]]],"valueSrc",["^2",["value"]],"operatorOptions",null,"valueType",["^2",["multiselect"]]]],"path",["^2",["9a99988a-0123-4456-b89a-b1607f326fd8","a98ab9b9-cdef-4012-b456-71607f326fd9"]]]]]],"properties",["^0",["conjunction","AND","not",false]],"path",["^2",["9a99988a-0123-4456-b89a-b1607f326fd8"]]]]'
 38 | }
 39 | 
 40 | 
 41 | /*
 42 | let ruleset = {
 43 |     "condition": "AND",
 44 |     "rules": [
 45 |         {
 46 |             "id": "name",
 47 |             "field": "name",
 48 |             "type": "string",
 49 |             "input": "text",
 50 |             "operator": "less",
 51 |             "value": "test name"
 52 |         },
 53 |         {
 54 |             "condition": "OR",
 55 |             "rules": [
 56 |                 {
 57 |                     "id": "category",
 58 |                     "field": "date",
 59 |                     "type": "date",
 60 |                     "input": "date",
 61 |                     "operator": "equal",
 62 |                     "value": "2012-01-12"
 63 |                 },
 64 |                 {
 65 |                     "id": "category",
 66 |                     "field": "name",
 67 |                     "type": "string",
 68 |                     "input": "text",
 69 |                     "operator": "equal",
 70 |                     "value": "1"
 71 |                 }
 72 |             ]
 73 |         }
 74 |     ]
 75 | }
 76 | */
 77 | 
 78 | 
 79 | export default class DemoQueryBuilder extends Component {
 80 |     getChildren(props) {
 81 |         const jsonStyle = { backgroundColor: 'darkgrey', margin: '10px', padding: '10px' } 
 82 |         return (
 83 |             <div style={{padding: '10px'}}>
 84 |                 <div className="query-builder">
 85 |                     <Builder {...props} />
 86 |                 </div>
 87 |                 <br />
 88 |                 <div>
 89 |                   stringFormat: 
 90 |                   <pre style={jsonStyle}>
 91 |                     {stringify(queryString(props.tree, props.config), undefined, 2)}
 92 |                   </pre>
 93 |                 </div>
 94 |                 <hr/>
 95 |                 <div>
 96 |                   humanStringFormat: 
 97 |                   <pre style={jsonStyle}>
 98 |                     {stringify(queryString(props.tree, props.config, true), undefined, 2)}
 99 |                   </pre>
100 |                 </div>
101 |                 <hr/>
102 |                 <div>
103 |                   mongodbFormat: 
104 |                     <pre style={jsonStyle}>
105 |                       {stringify(mongodbFormat(props.tree, props.config), undefined, 2)}
106 |                     </pre>
107 |                 </div>
108 |                 <hr/>
109 |                 <div>
110 |                   queryBuilderFormat: 
111 |                     <pre style={jsonStyle}>
112 |                       {stringify(queryBuilderFormat(props.tree, props.config), undefined, 2)}
113 |                     </pre>
114 |                 </div>
115 |                 <hr/>
116 |                 <div>
117 |                   Tree: 
118 |                   <pre style={jsonStyle}>
119 |                     {stringify(props.tree, undefined, 2)}
120 |                   </pre>
121 |                 </div>
122 |                 <hr/>
123 |                 <div>
124 |                   Serialized Tree: 
125 |                   <div style={jsonStyle}>
126 |                     {serializeTree(props.tree)}
127 |                   </div>
128 |                 </div>
129 |             </div>
130 |         )
131 |     }
132 | 
133 |     render() {
134 |         const {tree, ...config_props} = config;
135 |                 
136 |         return (
137 |             <div>
138 |                 <Query 
139 |                     value={loadTree(initValue)}
140 |                     {...config_props} 
141 |                     get_children={this.getChildren}
142 |                 > </Query>
143 |             </div>
144 |         );
145 |     }
146 | }
147 | 


--------------------------------------------------------------------------------
/examples/index.html:
--------------------------------------------------------------------------------
 1 | <html lang="ru">
 2 | <head>
 3 |   <meta charset="utf-8">
 4 |   <title>React Awesome Query Builder - Examples</title>
 5 | </head>
 6 | <body></body>
 7 | <script src="./bundle.js"></script>
 8 | </html>
 9 | 
10 | 


--------------------------------------------------------------------------------
/examples/index.js:
--------------------------------------------------------------------------------
 1 | import React, {Component} from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import Demo from './demo/demo.js';
 4 | 
 5 | window.React = React;
 6 | 
 7 | class App extends Component {
 8 |     render() {
 9 |         return (
10 |             <div>{this.props.children}</div>
11 |         );
12 |     }
13 | }
14 | 
15 | ReactDOM.render((
16 |     <App>
17 |         <Demo />
18 |     </App>
19 | ), document.body);
20 | 
21 | 
22 | 


--------------------------------------------------------------------------------
/examples/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack');
 2 | var path = require('path');
 3 | 
 4 | module.exports = {
 5 |     devtool: 'source-map',
 6 |     entry: './index',
 7 |     output: {
 8 |         path: __dirname,
 9 |         filename: 'bundle.js'
10 |     },
11 |     resolveLoader: {
12 |         modulesDirectories: ['node_modules']
13 |     },
14 |     resolve: {
15 |         extensions: ['', '.js']
16 |     },
17 |     module: {
18 |         loaders: [
19 |             {
20 |                 test: /\.js$/,
21 |                 loaders: ['react-hot-loader', 'babel-loader'],
22 |                 exclude: /node_modules/
23 |             },
24 |             {
25 |                 test: /\.css$/,
26 |                 loader: "style!css"
27 |             },
28 |             {
29 |                 test: /\.scss$/,
30 |                 loader: "style!css!sass"
31 |             },
32 |             {
33 |                 test: /\.less$/,
34 |                 loader: "style!css!less"
35 |             },
36 |             {
37 |                 test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
38 |                 loader: "url-loader?limit=10000&minetype=application/font-woff"
39 |             },
40 |             {
41 |                 test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader"
42 |             }
43 | 
44 |         ]
45 |     },
46 |     plugins: [
47 |         new webpack.NormalModuleReplacementPlugin(
48 |             /^react-awesome-query-builder/, function (data) {
49 |                 const suffix = data.request.substring('react-awesome-query-builder'.length);
50 |                 data.request = path.resolve(__dirname, '../modules/' + suffix);
51 |             }
52 |         ),
53 |     ]
54 | };
55 | 


--------------------------------------------------------------------------------
/examples/webpack.config.production.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack');
 2 | var path = require('path');
 3 | 
 4 | var webpack_config = require('./webpack.config');
 5 | 
 6 | webpack_config.plugins = [
 7 |     new webpack.NormalModuleReplacementPlugin(
 8 |         /^react-awesome-query-builder/, function (data) {
 9 |             const suffix = data.request.substring('react-awesome-query-builder'.length);
10 |             data.request = path.resolve(__dirname, '../modules/' + suffix);
11 |         }
12 |     ),
13 |     new webpack.optimize.OccurenceOrderPlugin(),
14 |     new webpack.DefinePlugin({
15 |         'process.env': {
16 |             'NODE_ENV': JSON.stringify('production')
17 |         }
18 |     }),
19 |     new webpack.optimize.UglifyJsPlugin({
20 |         output: {
21 |             comments: false
22 |         },
23 |         compressor: {
24 |             screw_ie8: true,
25 |             warnings: false
26 |         }
27 |     })
28 | ]
29 | 
30 | module.exports = webpack_config;
31 | 


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var webpack = require('webpack');
 4 | 
 5 | var webpack_config = require('./webpack.config');
 6 | 
 7 | module.exports = function (config) {
 8 |     config.set({
 9 |         browsers: [ 'Chrome' ], //run in Chrome
10 |         singleRun: false, //just run once by default
11 |         autoWatch: true,
12 |         frameworks: [ 'mocha' ], //use the mocha test framework
13 |         files: [
14 |             'tests/webpack.js' //just load this file
15 |         ],
16 |         preprocessors: {
17 |             'tests/webpack.js': [ 'webpack', 'sourcemap' ] //preprocess with webpack and our sourcemap loader
18 |         },
19 |         reporters: [ 'dots' ], //report results in this format
20 |         webpack: webpack_config,
21 |         webpackServer: {
22 |             noInfo: true //please don't spam the console when running in karma!
23 |         }
24 |     });
25 | };


--------------------------------------------------------------------------------
/modules/actions/drag.js:
--------------------------------------------------------------------------------
 1 | import * as constants from '../constants';
 2 | 
 3 | 
 4 | // /**
 5 | //  * @param {Object} dragging
 6 | //  */
 7 | // export const setDragging = (dragging) => ({
 8 | //   type: constants.SET_DRAGGING,
 9 | //   dragging: dragging,
10 | // });
11 | 
12 | // /**
13 | //  * @param {Object} mousePos
14 | //  */
15 | // export const setMousePos = (mousePos) => ({
16 | //   type: constants.SET_MOUSE_POS,
17 | //   mousePos: mousePos,
18 | // });
19 | 
20 | // /**
21 | //  * @param {Object} dragStart
22 | //  */
23 | // export const setDragStart = (dragStart) => ({
24 | //   type: constants.SET_DRAG_START,
25 | //   dragStart: dragStart,
26 | // });
27 | 
28 | 
29 | /**
30 |  * @param {Object} mousePos
31 |  * @param {Object} dragging
32 |  */
33 | export const setDragProgress = (mousePos, dragging) => ({
34 |   type: constants.SET_DRAG_PROGRESS,
35 |   mousePos: mousePos,
36 |   dragging: dragging,
37 | });
38 | 
39 | /**
40 |  * @param {Object} dragStart
41 |  * @param {Object} dragging
42 |  * @param {Object} mousePos
43 |  */
44 | export const setDragStart = (dragStart, dragging, mousePos) => ({
45 |   type: constants.SET_DRAG_START,
46 |   dragStart: dragStart,
47 |   dragging: dragging,
48 |   mousePos: mousePos,
49 | });
50 | 
51 | /**
52 |  *
53 |  */
54 | export const setDragEnd = () => ({
55 |   type: constants.SET_DRAG_END,
56 | });
57 | 


--------------------------------------------------------------------------------
/modules/actions/group.js:
--------------------------------------------------------------------------------
 1 | import * as constants from '../constants';
 2 | 
 3 | /**
 4 |  * @param {object} config
 5 |  * @param {Immutable.List} path
 6 |  * @param {string} conjunction
 7 |  */
 8 | export const setConjunction = (config, path, conjunction) => ({
 9 |   type: constants.SET_CONJUNCTION,
10 |   path: path,
11 |   conjunction: conjunction
12 | });
13 | 
14 | /**
15 |  * @param {object} config
16 |  * @param {Immutable.List} path
17 |  * @param {bool} not
18 |  */
19 | export const setNot = (config, path, not) => ({
20 |   type: constants.SET_NOT,
21 |   path: path,
22 |   not: not
23 | });


--------------------------------------------------------------------------------
/modules/actions/index.js:
--------------------------------------------------------------------------------
1 | export * as tree from './tree';
2 | export * as group from './group';
3 | export * as rule from './rule';
4 | export * as drag from './drag';
5 | 


--------------------------------------------------------------------------------
/modules/actions/rule.js:
--------------------------------------------------------------------------------
 1 | import * as constants from '../constants';
 2 | 
 3 | /**
 4 |  * @param {object} config
 5 |  * @param {Immutable.List} path
 6 |  * @param {string} field
 7 |  */
 8 | export const setField = (config, path, field) => ({
 9 |   type: constants.SET_FIELD,
10 |   path: path,
11 |   field: field,
12 |   config: config
13 | });
14 | 
15 | /**
16 |  * @param {object} config
17 |  * @param {Immutable.List} path
18 |  * @param {string} operator
19 |  */
20 | export const setOperator = (config, path, operator) => ({
21 |   type: constants.SET_OPERATOR,
22 |   path: path,
23 |   operator: operator,
24 |   config: config
25 | });
26 | 
27 | /**
28 |  * @param {object} config
29 |  * @param {Immutable.List} path
30 |  * @param {integer} delta
31 |  * @param {*} value
32 |  * @param {string} valueType
33 |  */
34 | export const setValue = (config, path, delta, value, valueType) => ({
35 |   type: constants.SET_VALUE,
36 |   path: path,
37 |   delta: delta,
38 |   value: value,
39 |   valueType: valueType,
40 |   config: config
41 | });
42 | 
43 | /**
44 |  * @param {object} config
45 |  * @param {Immutable.List} path
46 |  * @param {integer} delta
47 |  * @param {*} srcKey
48 |  */
49 | export const setValueSrc = (config, path, delta, srcKey) => ({
50 |   type: constants.SET_VALUE_SRC,
51 |   path: path,
52 |   delta: delta,
53 |   srcKey: srcKey,
54 |   config: config
55 | });
56 | 
57 | /**
58 |  * @param {object} config
59 |  * @param {Immutable.List} path
60 |  * @param {string} name
61 |  * @param {*} value
62 |  */
63 | export const setOperatorOption = (config, path, name, value) => ({
64 |   type: constants.SET_OPERATOR_OPTION,
65 |   path: path,
66 |   name: name,
67 |   value: value,
68 |   config: config
69 | });
70 | 


--------------------------------------------------------------------------------
/modules/actions/tree.js:
--------------------------------------------------------------------------------
  1 | import uuid from '../utils/uuid';
  2 | import {expandTreePath} from '../utils/treeUtils';
  3 | import {defaultRuleProperties, defaultGroupProperties} from '../utils/defaultUtils';
  4 | import * as constants from '../constants';
  5 | import Immutable from 'immutable';
  6 | 
  7 | const hasChildren = (tree, path) =>
  8 |   tree.getIn(expandTreePath(path, 'children1')).size > 0;
  9 | 
 10 | /**
 11 |  * @param {object} config
 12 |  * @param {Immutable.Map} tree
 13 |  */
 14 | export const setTree = (config, tree) => ({
 15 |   type: constants.SET_TREE,
 16 |   tree: tree
 17 | });
 18 | 
 19 | /**
 20 |  * @param {object} config
 21 |  * @param {Immutable.List} path
 22 |  * @param {object} properties
 23 |  */
 24 | export const addRule = (config, path, properties) => ({
 25 |   type: constants.ADD_RULE,
 26 |   path: path,
 27 |   id: uuid(),
 28 |   properties: defaultRuleProperties(config).merge(properties || {})
 29 | });
 30 | 
 31 | // /**
 32 | //  * @param {object} config
 33 | //  * @param {Immutable.List} path
 34 | //  */
 35 | // export const removeRuleOld = (config, path) => {
 36 | //   return (dispatch, getState) => {
 37 | //     dispatch({
 38 | //       type: constants.REMOVE_RULE,
 39 | //       path: path,
 40 | //       config: config
 41 | //     });
 42 | 
 43 | //     const { tree } = getState();
 44 | //     const parentPath = path.slice(0, -1);
 45 | //     if (!hasChildren(tree, parentPath)) {
 46 | //       dispatch(addRule(config, parentPath));
 47 | //     }
 48 | //   };
 49 | // };
 50 | 
 51 | /**
 52 |  * @param {object} config
 53 |  * @param {Immutable.List} path
 54 |  */
 55 | export const removeRule = (config, path) => ({
 56 |   type: constants.REMOVE_RULE,
 57 |   path: path,
 58 |   config: config
 59 | });
 60 | 
 61 | 
 62 | // /**
 63 | //  * @param {object} config
 64 | //  * @param {Immutable.List} path
 65 | //  * @param {object} properties
 66 | //  */
 67 | // export const addGroupOld = (config, path, properties) => {
 68 | //   return (dispatch) => {
 69 | //     const groupUuid = uuid();
 70 | 
 71 | //     dispatch({
 72 | //       type: constants.ADD_GROUP,
 73 | //       path: path,
 74 | //       id: groupUuid,
 75 | //       properties: defaultGroupProperties(config).merge(properties || {}),
 76 | //       config: config
 77 | //     });
 78 | 
 79 | //     const groupPath = path.push(groupUuid);
 80 | //     dispatch(addRule(config, groupPath));
 81 | //     dispatch(addRule(config, groupPath));
 82 | //   };
 83 | // };
 84 | 
 85 | /**
 86 |  * @param {object} config
 87 |  * @param {Immutable.List} path
 88 |  * @param {object} properties
 89 |  */
 90 | export const addGroup = (config, path, properties) => ({
 91 |     type: constants.ADD_NEW_GROUP,
 92 |     path: path,
 93 |     properties: defaultGroupProperties(config).merge(properties || {}),
 94 |     config: config
 95 | });
 96 | 
 97 | 
 98 | 
 99 | // /**
100 | //  * @param {object} config
101 | //  * @param {Immutable.List} path
102 | //  */
103 | // export const removeGroupOld = (config, path) => {
104 | //   return (dispatch, getState) => {
105 | //     dispatch({
106 | //       type: constants.REMOVE_GROUP,
107 | //       path: path,
108 | //       config: config
109 | //     });
110 | 
111 | //     const { tree } = getState();
112 | //     const parentPath = path.slice(0, -1);
113 | //     if (!hasChildren(tree, parentPath)) {
114 | //       dispatch(addRule(config, parentPath));
115 | //     }
116 | //   };
117 | // };
118 | 
119 | /**
120 |  * @param {object} config
121 |  * @param {Immutable.List} path
122 |  */
123 | export const removeGroup = (config, path) => ({
124 |     type: constants.REMOVE_GROUP,
125 |     path: path,
126 |     config: config
127 | });
128 | 
129 | 
130 | 
131 | /**
132 |  * @param {object} config
133 |  * @param {Array} fromPath
134 |  * @param {Array} toPath
135 |  * @param {String} placement, see constants PLACEMENT_*
136 |  */
137 | export const moveItem = (config, fromPath, toPath, placement) => ({
138 |   type: constants.MOVE_ITEM,
139 |   fromPath: new Immutable.List(fromPath),
140 |   toPath: new Immutable.List(toPath),
141 |   placement: placement,
142 |   config: config,
143 | });
144 | 


--------------------------------------------------------------------------------
/modules/components/Builder.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import Immutable from 'immutable';
 4 | import Item from '../components/Item';
 5 | import SortableContainer from './containers/SortableContainer';
 6 | import {getTotalNodesCountInTree} from "../utils/treeUtils";
 7 | 
 8 | 
 9 | @SortableContainer
10 | export default class Builder extends Component {
11 |   static propTypes = {
12 |     tree: PropTypes.any.isRequired, //instanceOf(Immutable.Map)
13 |     config: PropTypes.object.isRequired,
14 |     actions: PropTypes.object.isRequired,
15 |     onDragStart: PropTypes.func,
16 |   };
17 | 
18 |   constructor(props) {
19 |     super(props);
20 | 
21 |     this._updPath(props);
22 |   }
23 | 
24 |   // componentWillReceiveProps (props) {
25 |   //   let prevProps = this.props;
26 |   //   this._updPath(props);
27 |   // }
28 | 
29 |   _updPath (props) {
30 |     const id = props.tree.get('id');
31 |     this.path = Immutable.List.of(id);
32 |   }
33 | 
34 |   render() {
35 |     const treeNodesCnt = getTotalNodesCountInTree(this.props.tree);
36 |     const id = this.props.tree.get('id');
37 |     return (
38 |       <Item 
39 |         key={id}
40 |         id={id}
41 |         path={this.path}
42 |         type={this.props.tree.get('type')}
43 |         properties={this.props.tree.get('properties')}
44 |         config={this.props.config}
45 |         actions={this.props.actions}
46 |         children1={this.props.tree.get('children1')}
47 |         //tree={this.props.tree}
48 |         treeNodesCnt={treeNodesCnt}
49 |         onDragStart={this.props.onDragStart}
50 |       >
51 |       </Item>
52 |     );
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/modules/components/Field.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import PropTypes from 'prop-types';
  3 | import shallowCompare from 'react-addons-shallow-compare';
  4 | import {getFieldConfig, getFieldPath, getFieldPathLabels} from "../utils/configUtils";
  5 | import {calcTextWidth, truncateString, BUILT_IN_PLACEMENTS} from "../utils/stuff";
  6 | import { Menu, Dropdown, Icon, Tooltip, Button, Select } from 'antd';
  7 | const { Option, OptGroup } = Select;
  8 | const SubMenu = Menu.SubMenu;
  9 | const MenuItem = Menu.Item;
 10 | const DropdownButton = Dropdown.Button;
 11 | import map from 'lodash/map';
 12 | import last from 'lodash/last';
 13 | import keys from 'lodash/keys';
 14 | import PureRenderMixin from 'react-addons-pure-render-mixin';
 15 | 
 16 | 
 17 | export default class Field extends Component {
 18 |   static propTypes = {
 19 |     config: PropTypes.object.isRequired,
 20 |     selectedField: PropTypes.string,
 21 |     renderAsDropdown: PropTypes.bool,
 22 |     customProps: PropTypes.object,
 23 |     //actions
 24 |     setField: PropTypes.func.isRequired,
 25 |   };
 26 | 
 27 |   constructor(props) {
 28 |       super(props);
 29 |   }
 30 | 
 31 |   componentWillReceiveProps (nextProps) {
 32 |     //let prevProps = this.props;
 33 |   }
 34 | 
 35 |   shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
 36 | 
 37 |   curField() {
 38 |       return this.props.selectedField ? getFieldConfig(this.props.selectedField, this.props.config) : null;
 39 |   }
 40 | 
 41 |   curFieldOpts() {
 42 |       return Object.assign({}, {
 43 |           label: this.props.selectedField,
 44 |         },
 45 |         this.curField() || {}
 46 |       );
 47 |   }
 48 | 
 49 |   handleFieldMenuSelect = ({key, keyPath}) => {
 50 |     this.props.setField(key);
 51 |   }
 52 | 
 53 |   handleFieldSelect = (key) => {
 54 |     this.props.setField(key);
 55 |   }
 56 | 
 57 |   filterOption = (input, option) => {
 58 |     const isInChildren = option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 
 59 |     const isInValue    = option.props.value.toLowerCase().indexOf(input.toLowerCase()) >= 0 
 60 |     let isInGroupLabel = false 
 61 | 
 62 |     if (option.props.groupLabel) {
 63 |       isInGroupLabel = option.props.groupLabel.toLowerCase().indexOf(input.toLowerCase()) >= 0
 64 |     }
 65 | 
 66 |     return(isInChildren || isInValue || isInGroupLabel)
 67 |   }
 68 | 
 69 |   getFieldDisplayLabel(field, fieldKey) {
 70 |       let fieldSeparator = this.props.config.settings.fieldSeparator;
 71 |       let maxLabelsLength = this.props.config.settings.maxLabelsLength || 100;
 72 |       let label = field.label || last(fieldKey.split(fieldSeparator));
 73 |       label = truncateString(label, maxLabelsLength);
 74 |       return label;
 75 |   }
 76 | 
 77 |   buildMenuItems(fields, path = null) {
 78 |       let fieldSeparator = this.props.config.settings.fieldSeparator;
 79 |       if (!fields)
 80 |           return null;
 81 |       let prefix = path ? path.join(fieldSeparator) + fieldSeparator : '';
 82 | 
 83 |       return keys(fields).map(fieldKey => {
 84 |           let field = fields[fieldKey];
 85 |           let label = this.getFieldDisplayLabel(field, fieldKey);
 86 |           if (field.type == "!struct") {
 87 |               let subpath = (path ? path : []).concat(fieldKey);
 88 |               return <SubMenu
 89 |                   key={prefix+fieldKey}
 90 |                   title={<span>{label} &nbsp;&nbsp;&nbsp;&nbsp;</span>}
 91 |               >
 92 |                   {this.buildMenuItems(field.subfields, subpath)}
 93 |               </SubMenu>
 94 |           } else {
 95 |               return <MenuItem key={prefix+fieldKey}>{label}</MenuItem>;
 96 |           }
 97 |       });
 98 |   }
 99 | 
100 |   buildSelectItems(fields, path = null, optGroupLabel = null) {
101 |       let fieldSeparator = this.props.config.settings.fieldSeparator;
102 |       if (!fields)
103 |           return null;
104 |       let prefix = path ? path.join(fieldSeparator) + fieldSeparator : '';
105 | 
106 |       return keys(fields).map(fieldKey => {
107 |           let field = fields[fieldKey];
108 |           let label = this.getFieldDisplayLabel(field, fieldKey);
109 |           if (field.type == "!struct") {
110 |               let subpath = (path ? path : []).concat(fieldKey);
111 |               return <OptGroup
112 |                   key={prefix+fieldKey}
113 |                   label={label}
114 |               >
115 |                   {this.buildSelectItems(field.subfields, subpath, label)}
116 |               </OptGroup>
117 |           } else {
118 |               return <Option
119 |                 key={prefix+fieldKey}
120 |                 value={prefix+fieldKey}
121 |                 groupLabel={optGroupLabel}
122 |               >
123 |                 {label}
124 |               </Option>;
125 |           }
126 |       });
127 |   }
128 | 
129 |   buildMenuToggler(label, fullLabel, customLabel) {
130 |       let btnLabel = customLabel ? customLabel : label;
131 |       let maxLabelsLength = this.props.config.settings.maxLabelsLength || 100;
132 |       btnLabel = truncateString(btnLabel, maxLabelsLength);
133 |       var toggler =
134 |           <Button
135 |               size={this.props.config.settings.renderSize || "small"}
136 |           >
137 |               {btnLabel} <Icon type="down" />
138 |           </Button>;
139 | 
140 |       if (fullLabel && fullLabel != label) {
141 |           toggler = <Tooltip
142 |                   placement="top"
143 |                   title={fullLabel}
144 |               >
145 |               {toggler}
146 |               </Tooltip>;
147 |       }
148 | 
149 |       return toggler;
150 |   }
151 | 
152 |   render() {
153 |     if (this.props.renderAsDropdown)
154 |         return this.renderAsDropdown();
155 |     else
156 |         return this.renderAsSelect();
157 |   }
158 | 
159 |   renderAsSelect() {
160 |     let isFieldSelected = !!this.props.selectedField;
161 |     let dropdownPlacement = this.props.config.settings.dropdownPlacement;
162 |     let maxLabelsLength = this.props.config.settings.maxLabelsLength || 100;
163 |     let fieldOptions = this.props.config.fields;
164 |     let selectedFieldPartsLabels = getFieldPathLabels(this.props.selectedField, this.props.config);
165 |     let selectedFieldFullLabel = selectedFieldPartsLabels ? selectedFieldPartsLabels.join(this.props.config.settings.fieldSeparatorDisplay) : null;
166 |     let placeholder = !isFieldSelected ? this.props.config.settings.fieldPlaceholder : null;
167 |     let fieldDisplayLabel = isFieldSelected ? this.getFieldDisplayLabel(this.curField(), this.props.selectedField) : null;
168 |     let selectText = isFieldSelected ? fieldDisplayLabel : placeholder;
169 |     selectText = truncateString(selectText, maxLabelsLength);
170 |     let selectWidth = calcTextWidth(selectText, '12px');
171 |     //let tooltip = this.curFieldOpts().label2 || selectedFieldFullLabel || this.curFieldOpts().label;
172 |     let fieldSelectItems = this.buildSelectItems(fieldOptions);
173 |     let customProps = this.props.customProps || {};
174 | 
175 |     let fieldSelect = (
176 |         <Select
177 |             dropdownAlign={dropdownPlacement ? BUILT_IN_PLACEMENTS[dropdownPlacement] : undefined}
178 |             dropdownMatchSelectWidth={false}
179 |             style={{ width: isFieldSelected && !customProps.showSearch ? null : selectWidth + 36 }}
180 |             ref="field"
181 |             placeholder={placeholder}
182 |             size={this.props.config.settings.renderSize || "small"}
183 |             onChange={this.handleFieldSelect}
184 |             value={this.props.selectedField || undefined}
185 |             filterOption={this.filterOption}
186 |             {...customProps}
187 |         >{fieldSelectItems}</Select>
188 |     );
189 | 
190 |     return fieldSelect;
191 |   }
192 | 
193 |   renderAsDropdown() {
194 |     let fieldOptions = this.props.config.fields;
195 |     let selectedFieldKeys = getFieldPath(this.props.selectedField, this.props.config);
196 |     let selectedFieldPartsLabels = getFieldPathLabels(this.props.selectedField, this.props.config);
197 |     let selectedFieldFullLabel = selectedFieldPartsLabels ? selectedFieldPartsLabels.join(this.props.config.settings.fieldSeparatorDisplay) : null;
198 |     let placeholder = this.curFieldOpts().label || this.props.config.settings.fieldPlaceholder;
199 |     let customProps = this.props.customProps || {};
200 | 
201 |     let fieldMenuItems = this.buildMenuItems(fieldOptions);
202 |     let fieldMenu = (
203 |         <Menu
204 |             //size={this.props.config.settings.renderSize || "small"}
205 |             selectedKeys={selectedFieldKeys}
206 |             onClick={this.handleFieldMenuSelect}
207 |             {...customProps}
208 |         >{fieldMenuItems}</Menu>
209 |     );
210 |     let fieldToggler = this.buildMenuToggler(placeholder, selectedFieldFullLabel, this.curFieldOpts().label2);
211 | 
212 |     return (
213 |       <Dropdown
214 |           overlay={fieldMenu}
215 |           trigger={['click']}
216 |           placement={this.props.config.settings.dropdownPlacement}
217 |       >
218 |           {fieldToggler}
219 |       </Dropdown>
220 |     );
221 |   }
222 | }
223 | 


--------------------------------------------------------------------------------
/modules/components/Group.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import PropTypes from 'prop-types';
  3 | import shallowCompare from 'react-addons-shallow-compare';
  4 | import map from 'lodash/map';
  5 | import startsWith from 'lodash/startsWith'
  6 | import GroupContainer from './containers/GroupContainer';
  7 | import { Row, Col, Icon, Button, Radio } from 'antd';
  8 | const ButtonGroup = Button.Group;
  9 | const RadioButton = Radio.Button;
 10 | const RadioGroup = Radio.Group;
 11 | const classNames = require('classnames');
 12 | import Immutable from 'immutable';
 13 | import PureRenderMixin from 'react-addons-pure-render-mixin';
 14 | import { Provider, Connector, connect } from 'react-redux';
 15 | import Item from './Item';
 16 | 
 17 | 
 18 | export const groupActionsPositionList = {
 19 |   topLeft: 'group--actions--tl',
 20 |   topCenter: 'group--actions--tc',
 21 |   topRight: 'group--actions--tr',
 22 |   bottomLeft: 'group--actions--bl',
 23 |   bottomCenter: 'group--actions--bc',
 24 |   bottomRight: 'group--actions--br'
 25 | }
 26 | 
 27 | const defaultPosition = 'topRight'
 28 | 
 29 | @GroupContainer
 30 | class Group extends Component {
 31 |   static propTypes = {
 32 |     isForDrag: PropTypes.bool,
 33 |     //tree: PropTypes.instanceOf(Immutable.Map).isRequired,
 34 |     treeNodesCnt: PropTypes.number,
 35 |     conjunctionOptions: PropTypes.object.isRequired,
 36 |     allowFurtherNesting: PropTypes.bool.isRequired,
 37 |     isRoot: PropTypes.bool.isRequired,
 38 |     not: PropTypes.bool,
 39 |     selectedConjunction: PropTypes.string,
 40 |     config: PropTypes.object.isRequired,
 41 |     id: PropTypes.string.isRequired,
 42 |     path: PropTypes.any, //instanceOf(Immutable.List)
 43 |     onDragStart: PropTypes.func,
 44 |     children1: PropTypes.any, //instanceOf(Immutable.OrderedMap)
 45 |     //actions
 46 |     addRule: PropTypes.func.isRequired,
 47 |     addGroup: PropTypes.func.isRequired,
 48 |     removeSelf: PropTypes.func.isRequired,
 49 |     setConjunction: PropTypes.func.isRequired,
 50 |     setNot: PropTypes.func.isRequired,
 51 |     actions: PropTypes.object.isRequired,
 52 |     //connected:
 53 |     dragging: PropTypes.object, //{id, x, y, w, h}
 54 |   };
 55 | 
 56 |   pureShouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
 57 |   shouldComponentUpdate = this.pureShouldComponentUpdate;
 58 | 
 59 |   constructor(props) {
 60 |     super(props);
 61 | 
 62 |     this._setConjunctionHandlers = {};
 63 |   }
 64 | 
 65 |   _getSetConjunctionHandler = (itemKey = null) => {
 66 |     const k = '' + itemKey;
 67 |     let h = this._setConjunctionHandlers[k];
 68 |     if (!h) {
 69 |       h = this._setConjunction.bind(this, itemKey)
 70 |       this._setConjunctionHandlers[k] = h;
 71 |     }
 72 |     return h;
 73 |   }
 74 | 
 75 |   _setConjunction = (itemKey, e) => {
 76 |     this.props.setConjunction(e, itemKey);
 77 |   }
 78 | 
 79 |   handleDraggerMouseDown = (e) => {
 80 |     var nodeId = this.props.id;
 81 |     var dom = this.refs.group;
 82 |     if (this.props.onDragStart) {
 83 |       this.props.onDragStart(nodeId, dom, e);
 84 |     }
 85 |   }
 86 | 
 87 |   getGroupPositionClass = () => {
 88 |     const { groupActionsPosition } = this.props.config.settings
 89 |     return groupActionsPositionList[groupActionsPosition] || groupActionsPositionList[defaultPosition]
 90 |   }
 91 | 
 92 |   isGroupTopPosition = () => {
 93 |     return startsWith(this.props.config.settings.groupActionsPosition || defaultPosition, 'top')
 94 |   }
 95 | 
 96 |   getRenderType(props) {
 97 |     let renderType;
 98 |     if (props.dragging && props.dragging.id == props.id) {
 99 |       renderType = props.isForDrag ? 'dragging' : 'placeholder';
100 |     } else {
101 |       renderType = props.isForDrag ? null : 'normal';
102 |     }
103 |     return renderType;
104 |   }
105 | 
106 |   renderGroup = (position) => {
107 |     return (
108 |       <div className={`group--actions ${position}`}>
109 |         <ButtonGroup
110 |           size={this.props.config.settings.renderSize || "small"}
111 |         >{!this.props.config.settings.readonlyMode &&
112 |           <Button
113 |             icon="plus"
114 |             className="action action--ADD-RULE"
115 |             onClick={this.props.addRule}
116 |           >{this.props.config.settings.addRuleLabel || "Add rule"}</Button>
117 |           }
118 |           {!this.props.config.settings.readonlyMode && this.props.allowFurtherNesting ? (
119 |             <Button
120 |               className="action action--ADD-GROUP"
121 |               icon="plus-circle-o"
122 |               onClick={this.props.addGroup}
123 |             >{this.props.config.settings.addGroupLabel || "Add group"}</Button>
124 |           ) : null}
125 |           {!this.props.config.settings.readonlyMode && !this.props.isRoot ? (
126 |             <Button
127 |               type="danger"
128 |               icon="delete"
129 |               className="action action--ADD-DELETE"
130 |               onClick={this.props.removeSelf}
131 |             >{this.props.config.settings.delGroupLabel !== undefined ? this.props.config.settings.delGroupLabel : "Delete"}</Button>
132 |           ) : null}
133 |         </ButtonGroup>
134 |       </div>
135 |     )
136 |   }
137 | 
138 |   renderChildren = () => {
139 |     let props = this.props;
140 |     return props.children1 ? props.children1.map((item) => (
141 |       <Item
142 |         key={item.get('id')}
143 |         id={item.get('id')}
144 |         //path={props.path.push(item.get('id'))}
145 |         path={item.get('path')}
146 |         type={item.get('type')}
147 |         properties={item.get('properties')}
148 |         config={props.config}
149 |         actions={props.actions}
150 |         children1={item.get('children1')}
151 |         //tree={props.tree}
152 |         treeNodesCnt={props.treeNodesCnt}
153 |         onDragStart={props.onDragStart}
154 |       />
155 |     )).toList() : null;
156 |   }
157 | 
158 |   renderHeader = () => {
159 |     let renderConjsAsRadios = false;
160 |     return (
161 |       <div className={classNames(
162 |         "group--conjunctions",
163 |         // this.props.children1.size < 2 && this.props.config.settings.hideConjForOne ? 'hide--conj' : ''
164 |       )}>
165 |         {this.props.config.settings.renderConjsAsRadios ?
166 |           <RadioGroup
167 |             disabled={this.props.children1.size < 2}
168 |             value={this.props.selectedConjunction}
169 |             size={this.props.config.settings.renderSize || "small"}
170 |             onChange={this.props.setConjunction}
171 |           >
172 |             {map(this.props.conjunctionOptions, (item, index) => (
173 |               <RadioButton
174 |                 key={item.id}
175 |                 value={item.key}
176 |               //checked={item.checked}
177 |               >{item.label}</RadioButton>
178 |             ))}
179 |           </RadioGroup>
180 |           :
181 |           <ButtonGroup
182 |             size={this.props.config.settings.renderSize || "small"}
183 |             disabled={this.props.children1.size < 2}
184 |           >
185 |             {this.props.config.settings.showNot &&
186 |               <Button
187 |                 onClick={(ev) => this.props.setNot(ev, !this.props.not)}
188 |                 type={this.props.not ? "primary" : null}
189 |               >{this.props.config.settings.notLabel}</Button>
190 |             }
191 |             {map(this.props.conjunctionOptions, (item, index) => (
192 |               <Button
193 |                 disabled={this.props.children1.size < 2}
194 |                 key={item.id}
195 |                 type={item.checked ? "primary" : null}
196 |                 onClick={this._getSetConjunctionHandler(item.key)}
197 |               >{item.label}</Button>
198 |             ))}
199 |           </ButtonGroup>
200 |         }
201 |         {this.props.config.settings.canReorder && this.props.treeNodesCnt > 2 && !this.props.isRoot &&
202 |           <span className={"qb-drag-handler"} onMouseDown={this.handleDraggerMouseDown} > <Icon type="bars" /> </span>
203 |         }
204 |       </div>
205 |     );
206 |   }
207 | 
208 |   render() {
209 |     let renderType = this.getRenderType(this.props);
210 |     if (!renderType)
211 |       return null;
212 | 
213 |     let styles = {};
214 |     if (renderType == 'dragging') {
215 |       styles = {
216 |         top: this.props.dragging.y,
217 |         left: this.props.dragging.x,
218 |         width: this.props.dragging.w
219 |       };
220 |     }
221 | 
222 |     return (
223 |       <div
224 |         className={classNames("group", "group-or-rule",
225 |           renderType == 'placeholder' ? 'qb-placeholder' : null,
226 |           renderType == 'dragging' ? 'qb-draggable' : null,
227 |         )}
228 |         style={styles}
229 |         ref="group"
230 |         data-id={this.props.id}
231 |       >
232 |         <div className="group--header">
233 |           {this.renderHeader()}
234 |           {this.isGroupTopPosition() && this.renderGroup(this.getGroupPositionClass())}
235 |         </div>
236 |         {this.props.children1 ? (
237 |           <div className={classNames(
238 |             "group--children",
239 |             this.props.children1.size < 2 && this.props.config.settings.hideConjForOne ? 'hide--line' : ''
240 |           )}>{this.renderChildren()}</div>
241 |         ) : null}
242 |         {!this.isGroupTopPosition() && (
243 |           <div className='group--footer'>
244 |             {this.renderGroup(this.getGroupPositionClass())}
245 |           </div>
246 |         )}
247 |       </div>
248 |     );
249 |   }
250 | }
251 | 
252 | export default Group;
253 | 
254 | 


--------------------------------------------------------------------------------
/modules/components/Item.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import Immutable from 'immutable';
 4 | import shallowCompare from 'react-addons-shallow-compare';
 5 | import Rule from './Rule';
 6 | import Group from './Group';
 7 | import PureRenderMixin from 'react-addons-pure-render-mixin';
 8 | import {Provider, Connector, connect} from 'react-redux';
 9 | 
10 | 
11 | const typeMap = {
12 |   rule: (props) => (
13 |     <Rule 
14 |       {...props.properties.toObject()}
15 |       id={props.id}
16 |       path={props.path}
17 |       actions={props.actions}
18 |       treeNodesCnt={props.treeNodesCnt}
19 |       config={props.config}
20 |       onDragStart={props.onDragStart}
21 |     />
22 |   ),
23 |   group: (props) => (
24 |     <Group 
25 |       {...props.properties.toObject()}
26 |       id={props.id}
27 |       path={props.path}
28 |       actions={props.actions}
29 |       config={props.config}
30 |       //tree={props.tree}
31 |       treeNodesCnt={props.treeNodesCnt}
32 |       onDragStart={props.onDragStart}
33 |       children1={props.children1}
34 |     />
35 |   )
36 | };
37 | 
38 | 
39 | class Item extends Component {
40 |   static propTypes = {
41 |     //tree: PropTypes.instanceOf(Immutable.Map).isRequired,
42 |     config: PropTypes.object.isRequired,
43 |     id: PropTypes.string.isRequired,
44 |     type: PropTypes.oneOf(Object.keys(typeMap)).isRequired,
45 |     path: PropTypes.any.isRequired, //instanceOf(Immutable.List)
46 |     properties: PropTypes.any.isRequired, //instanceOf(Immutable.Map)
47 |     children1: PropTypes.any, //instanceOf(Immutable.OrderedMap)
48 |     actions: PropTypes.object.isRequired,
49 |     treeNodesCnt: PropTypes.number,
50 |     onDragStart: PropTypes.func,
51 |   };
52 | 
53 |   pureShouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
54 |   shouldComponentUpdate = this.pureShouldComponentUpdate;
55 | 
56 |   render() {
57 |     const { type, ...props } = this.props;
58 |     return typeMap[type](props);
59 |   }
60 | }
61 | 
62 | export default Item;
63 | 


--------------------------------------------------------------------------------
/modules/components/Operator.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import PropTypes from 'prop-types';
  3 | import shallowCompare from 'react-addons-shallow-compare';
  4 | import {getFieldConfig, getFieldPath, getFieldPathLabels} from "../utils/configUtils";
  5 | import {calcTextWidth, BUILT_IN_PLACEMENTS} from "../utils/stuff";
  6 | import { Menu, Dropdown, Icon, Tooltip, Button, Select } from 'antd';
  7 | const { Option, OptGroup } = Select;
  8 | const SubMenu = Menu.SubMenu;
  9 | const MenuItem = Menu.Item;
 10 | const DropdownButton = Dropdown.Button;
 11 | import map from 'lodash/map';
 12 | import last from 'lodash/last';
 13 | import keys from 'lodash/keys';
 14 | import pickBy from 'lodash/pickBy';
 15 | import mapValues from 'lodash/mapValues';
 16 | import PureRenderMixin from 'react-addons-pure-render-mixin';
 17 | 
 18 | 
 19 | export default class Operator extends Component {
 20 |   static propTypes = {
 21 |     config: PropTypes.object.isRequired,
 22 |     selectedField: PropTypes.string,
 23 |     selectedOperator: PropTypes.string,
 24 |     renderAsDropdown: PropTypes.bool,
 25 |     //actions
 26 |     setOperator: PropTypes.func.isRequired,
 27 |   };
 28 | 
 29 |   shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
 30 | 
 31 |   constructor(props) {
 32 |       super(props);
 33 |       this.onPropsChanged(props);
 34 |   }
 35 | 
 36 |   componentWillReceiveProps (props) {
 37 |       this.onPropsChanged(props);
 38 |   }
 39 | 
 40 |   onPropsChanged (props) {
 41 |       let fieldConfig = getFieldConfig(props.selectedField, props.config);
 42 |       this.operatorOptions = mapValues(pickBy(props.config.operators, (item, key) =>
 43 |           fieldConfig && fieldConfig.operators && fieldConfig.operators.indexOf(key) !== -1
 44 |       ));
 45 |   }
 46 | 
 47 |   curOpOpts() {
 48 |       return Object.assign({}, {label: this.props.selectedOperator}, this.operatorOptions[this.props.selectedOperator] || {});
 49 |   }
 50 | 
 51 |   handleOperatorMenuSelect = ({key, keyPath}) => {
 52 |       this.props.setOperator(key);
 53 |   }
 54 | 
 55 |   handleOperatorSelect = (key) => {
 56 |       this.props.setOperator(key);
 57 |   }
 58 | 
 59 |   buildMenuItems(fields) {
 60 |       if (!fields)
 61 |           return null;
 62 |       return keys(fields).map(fieldKey => {
 63 |           let field = fields[fieldKey];
 64 |           return <MenuItem key={fieldKey}>{field.label}</MenuItem>;
 65 |       });
 66 |   }
 67 | 
 68 |   buildMenuToggler(label) {
 69 |       var toggler =
 70 |           <Button
 71 |               size={this.props.config.settings.renderSize || "small"}
 72 |           >
 73 |               {label} <Icon type="down" />
 74 |           </Button>;
 75 | 
 76 |       return toggler;
 77 |   }
 78 | 
 79 |   buildSelectItems(fields) {
 80 |       if (!fields)
 81 |           return null;
 82 |       return keys(fields).map(fieldKey => {
 83 |           let field = fields[fieldKey];
 84 |           return <Option
 85 |             key={fieldKey}
 86 |             value={fieldKey}
 87 |           >
 88 |             {field.label}
 89 |           </Option>;
 90 |       });
 91 |   }
 92 | 
 93 |   render() {
 94 |     if (this.props.renderAsDropdown)
 95 |         return this.renderAsDropdown();
 96 |     else
 97 |         return this.renderAsSelect();
 98 |   }
 99 | 
100 |   renderAsSelect() {
101 |     let dropdownPlacement = this.props.config.settings.dropdownPlacement;
102 |     let selectedOpKey = this.props.selectedOperator;
103 |     let opMenuItems = this.buildMenuItems(this.operatorOptions);
104 |     let placeholder = this.curOpOpts().label || this.props.config.settings.operatorPlaceholder;
105 |     let placeholderWidth = calcTextWidth(placeholder, '12px');
106 |     let fieldSelectItems = this.buildSelectItems(this.operatorOptions);
107 |     let opSelect = (
108 |         <Select
109 |             dropdownAlign={dropdownPlacement ? BUILT_IN_PLACEMENTS[dropdownPlacement] : undefined}
110 |             dropdownMatchSelectWidth={false}
111 |             style={{ width: this.props.selectedOperator ? null : placeholderWidth + 36 }}
112 |             ref="field"
113 |             placeholder={placeholder}
114 |             size={this.props.config.settings.renderSize || "small"}
115 |             onChange={this.handleOperatorSelect}
116 |             value={this.props.selectedOperator || undefined}
117 |         >{fieldSelectItems}</Select>
118 |     );
119 | 
120 |     return opSelect;
121 |   }
122 | 
123 |   renderAsDropdown() {
124 |     let selectedOpKey = this.props.selectedOperator;
125 |     let placeholder = this.curOpOpts().label || this.props.config.settings.operatorPlaceholder;
126 |     let opMenuItems = this.buildMenuItems(this.operatorOptions);
127 |     let opMenu = (
128 |         <Menu
129 |             //size={this.props.config.settings.renderSize || "small"}
130 |             selectedKeys={[selectedOpKey]}
131 |             onClick={this.handleOperatorMenuSelect}
132 |         >{opMenuItems}</Menu>
133 |     );
134 |     let opToggler = this.buildMenuToggler(placeholder);
135 | 
136 |     
137 |     return (
138 |       <Dropdown
139 |           overlay={opMenu}
140 |           trigger={['click']}
141 |           placement={this.props.config.settings.dropdownPlacement}
142 |       >
143 |           {opToggler}
144 |       </Dropdown>
145 |     );
146 |   }
147 | }
148 | 


--------------------------------------------------------------------------------
/modules/components/OperatorOptions.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import shallowCompare from 'react-addons-shallow-compare';
 4 | import OperatorOptionsContainer from './containers/OperatorOptionsContainer';
 5 | 
 6 | @OperatorOptionsContainer
 7 | export default class OperatorOptions extends Component {
 8 |   static propTypes = {
 9 |     config: PropTypes.object.isRequired,
10 |     name: PropTypes.string.isRequired,
11 |     children: PropTypes.oneOfType([PropTypes.array, PropTypes.element])
12 |   };
13 | 
14 |   shouldComponentUpdate = shallowCompare;
15 | 
16 |   render() {
17 |     return (
18 |       <div className={`rule--operator rule--operator--${this.props.name.toUpperCase()}`}>
19 |         {this.props.children}
20 |       </div>
21 |     );
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/modules/components/Preview.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import shallowCompare from 'react-addons-shallow-compare';
 4 | import queryString from '../utils/queryString';
 5 | import Immutable from 'immutable';
 6 | var stringify = require('json-stringify-safe');
 7 | 
 8 | export default class Preview extends Component {
 9 |   static propTypes = {
10 |     config: PropTypes.object.isRequired,
11 |     tree: PropTypes.any.isRequired, //instanceOf(Immutable.Map)
12 |   };
13 | 
14 |   shouldComponentUpdate = shallowCompare;
15 | 
16 |   render() {
17 |     return this.props.children(queryString(this.props.tree, this.props.config));
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/modules/components/Query.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import PropTypes from 'prop-types';
  3 | import createTreeStore from '../stores/tree';
  4 | import {createStore} from 'redux';
  5 | import {Provider, Connector, connect} from 'react-redux';
  6 | import * as actions from '../actions';
  7 | import {extendConfig} from "../utils/configUtils";
  8 | import {fixPathsInTree} from '../utils/treeUtils';
  9 | import {bindActionCreators} from "../utils/stuff";
 10 | import {validateTree} from "../utils/validation";
 11 | import {queryString} from "../utils/queryString";
 12 | import {defaultRoot} from "../utils/defaultUtils";
 13 | import { LocaleProvider } from 'antd';
 14 | import Immutable from 'immutable';
 15 | 
 16 | 
 17 | class ConnectedQuery extends Component {
 18 |     static propTypes = {
 19 |         config: PropTypes.object.isRequired,
 20 |         onChange: PropTypes.func,
 21 |         get_children: PropTypes.func,
 22 |         tree: PropTypes.any, //instanceOf(Immutable.Map)
 23 |         //dispatch: PropTypes.func.isRequired,
 24 |     };
 25 | 
 26 |     constructor(props) {
 27 |         super(props);
 28 | 
 29 |         this._updateActions(props);
 30 | 
 31 |         this.validatedTree = this.validateTree(props, props.config, props.tree);
 32 |         if (props.tree !== this.validatedTree) {
 33 |             props.onChange && props.onChange(this.validatedTree);
 34 |         }
 35 |     }
 36 | 
 37 |     validateTree (props, oldConfig, oldTree) {
 38 |         let tree = validateTree(props.tree, oldTree, props.config, oldConfig, true, true);
 39 |         tree = fixPathsInTree(tree);
 40 |         return tree;
 41 |     }
 42 | 
 43 |     _updateActions (props) {
 44 |       const {config, dispatch} = props;
 45 |       this.actions = bindActionCreators({...actions.tree, ...actions.group, ...actions.rule}, config, dispatch);
 46 |     }
 47 | 
 48 |     componentWillReceiveProps(nextProps) {
 49 |         const {tree, onChange} = nextProps;
 50 |         const oldTree = this.props.tree;
 51 |         const oldConfig = this.props.config;
 52 |         const newTree = nextProps.tree;
 53 |         const newConfig = this.props.config;
 54 |         const oldValidatedTree = this.validatedTree;
 55 | 
 56 |         if (oldConfig != newConfig) {
 57 |             this._updateActions(nextProps);
 58 |         }
 59 | 
 60 |         this.validatedTree = this.validateTree(nextProps, oldConfig, oldTree);
 61 |         let validatedTreeChanged = oldValidatedTree !== this.validatedTree 
 62 |             && JSON.stringify(oldValidatedTree) != JSON.stringify(this.validatedTree);
 63 |         if (validatedTreeChanged) {
 64 |             onChange && onChange(this.validatedTree);
 65 |             this.setState({treeChanged: true})
 66 |         } else {
 67 |             this.setState({treeChanged: false})
 68 |         }
 69 |     }
 70 | 
 71 |     render() {
 72 |         const {config, tree, get_children, dispatch, ...props} = this.props;
 73 |         const validatedTree = this.validatedTree;
 74 |         return <div>
 75 |             {get_children({
 76 |                 tree: this.validatedTree,
 77 |                 actions: this.actions,
 78 |                 config: config,
 79 |                 dispatch: dispatch
 80 |             })}
 81 |         </div>
 82 |     }
 83 | }
 84 | 
 85 | const QueryContainer = connect(
 86 |     (state) => {
 87 |         return {
 88 |           tree: state.tree,
 89 |         }
 90 |     },
 91 | )(ConnectedQuery);
 92 | 
 93 | 
 94 | export default class Query extends Component {
 95 |     static propTypes = {
 96 |         //config
 97 |         conjunctions: PropTypes.object.isRequired,
 98 |         fields: PropTypes.object.isRequired,
 99 |         types: PropTypes.object.isRequired,
100 |         operators: PropTypes.object.isRequired,
101 |         widgets: PropTypes.object.isRequired,
102 |         settings: PropTypes.object.isRequired,
103 | 
104 |         onChange: PropTypes.func,
105 |         get_children: PropTypes.func,
106 |         value: PropTypes.any, //instanceOf(Immutable.Map)
107 |     };
108 | 
109 |     constructor(props, context) {
110 |         super(props, context);
111 |         const config = {
112 |             conjunctions: props.conjunctions,
113 |             fields: props.fields,
114 |             types: props.types,
115 |             operators: props.operators,
116 |             widgets: props.widgets,
117 |             settings: props.settings,
118 |             tree: props.value,
119 |         };
120 | 
121 |         const store = createTreeStore(config);
122 | 
123 |         this.state = {
124 |             store: createStore(store)
125 |         };
126 |     }
127 | 
128 |     // handle case when value property changes
129 |     componentWillReceiveProps(nextProps) {
130 |         if (this.props.dontDispatchOnNewProps)
131 |             return;
132 | 
133 |         let getQueryStringForProps = (props) => props.value != null
134 |             ? queryString(props.value, props)
135 |             : '';
136 |         let previousQueryString = getQueryStringForProps(this.props);
137 |         let nextQueryString = getQueryStringForProps(nextProps);
138 | 
139 |         // compare stringified trees
140 |         if (previousQueryString !== nextQueryString) {
141 |             let nextTree = nextProps.value || defaultRoot({ ...nextProps, tree: null });
142 |             this.state.store.dispatch(
143 |                 actions.tree.setTree(nextProps, nextTree)
144 |             );
145 |         }
146 |     }
147 | 
148 |     render() {
149 |         const {conjunctions, fields, types, operators, widgets, settings, get_children, onChange, value, tree, children, ...props} = this.props;
150 |         let config = {conjunctions, fields, types, operators, widgets, settings};
151 |         config = extendConfig(config);
152 | 
153 |         return (
154 |             <LocaleProvider locale={config.settings.locale.antd}>
155 |                 <Provider store={this.state.store}>
156 |                     <QueryContainer
157 |                       store={this.state.store}
158 |                       get_children={get_children}
159 |                       config={config}
160 |                       onChange={onChange}
161 |                     />
162 |                 </Provider>
163 |             </LocaleProvider>
164 |         )
165 |     }
166 | }
167 | 


--------------------------------------------------------------------------------
/modules/components/Rule.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import PropTypes from 'prop-types';
  3 | import ReactDOM from 'react-dom';
  4 | import shallowCompare from 'react-addons-shallow-compare';
  5 | import RuleContainer from './containers/RuleContainer';
  6 | import Field from './Field';
  7 | import Operator from './Operator';
  8 | import Widget from './Widget';
  9 | import OperatorOptions from './OperatorOptions';
 10 | import { Row, Col, Menu, Dropdown, Icon, Tooltip, Button } from 'antd';
 11 | const SubMenu = Menu.SubMenu;
 12 | const MenuItem = Menu.Item;
 13 | const DropdownButton = Dropdown.Button;
 14 | import {getFieldConfig, getFieldPath, getFieldPathLabels, getOperatorConfig, getFieldWidgetConfig} from "../utils/configUtils";
 15 | import size from 'lodash/size';
 16 | var stringify = require('json-stringify-safe');
 17 | const classNames = require('classnames');
 18 | import PureRenderMixin from 'react-addons-pure-render-mixin';
 19 | import {Provider, Connector, connect} from 'react-redux';
 20 | 
 21 | 
 22 | @RuleContainer
 23 | class Rule extends Component {
 24 |     static propTypes = {
 25 |         isForDrag: PropTypes.bool,
 26 |         selectedField: PropTypes.string,
 27 |         selectedOperator: PropTypes.string,
 28 |         operatorOptions: PropTypes.object,
 29 |         config: PropTypes.object.isRequired,
 30 |         onDragStart: PropTypes.func,
 31 |         renderType: PropTypes.string, //'dragging', 'placeholder', null
 32 |         value: PropTypes.any, //depends on widget
 33 |         valueSrc: PropTypes.any,
 34 |         //path: PropTypes.instanceOf(Immutable.List),
 35 |         //actions
 36 |         setField: PropTypes.func,
 37 |         setOperator: PropTypes.func,
 38 |         setOperatorOption: PropTypes.func,
 39 |         removeSelf: PropTypes.func,
 40 |         setValue: PropTypes.func,
 41 |         setValueSrc: PropTypes.func,
 42 |         treeNodesCnt: PropTypes.number,
 43 |         //connected:
 44 |         dragging: PropTypes.object, //{id, x, y, w, h}
 45 |     };
 46 | 
 47 |     pureShouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
 48 |     shouldComponentUpdate = this.pureShouldComponentUpdate;
 49 | 
 50 | 
 51 |     constructor(props) {
 52 |         super(props);
 53 |     }
 54 | 
 55 |     handleDraggerMouseDown = (e) => {
 56 |         var nodeId = this.props.id;
 57 |         var dom = this.refs.rule;
 58 | 
 59 |         if (this.props.onDragStart) {
 60 |           this.props.onDragStart(nodeId, dom, e);
 61 |         }
 62 |     }
 63 | 
 64 |     getRenderType (props) {
 65 |       let renderType;
 66 |       if (props.dragging && props.dragging.id == props.id) {
 67 |         renderType = props.isForDrag ? 'dragging' : 'placeholder';
 68 |       } else {
 69 |         renderType = props.isForDrag ? null : 'normal';
 70 |       }
 71 |       return renderType;
 72 |     }
 73 | 
 74 |     render () {
 75 |         let renderType = this.getRenderType(this.props);
 76 |         if (!renderType)
 77 |           return null;
 78 | 
 79 |         const selectedFieldPartsLabels = getFieldPathLabels(this.props.selectedField, this.props.config);
 80 |         const selectedFieldConfig = getFieldConfig(this.props.selectedField, this.props.config);
 81 |         const isSelectedGroup = selectedFieldConfig && selectedFieldConfig.type == '!struct';
 82 |         const isFieldAndOpSelected = this.props.selectedField && this.props.selectedOperator && !isSelectedGroup;
 83 |         const selectedOperatorConfig = getOperatorConfig(this.props.config, this.props.selectedOperator, this.props.selectedField);
 84 |         const selectedOperatorHasOptions = selectedOperatorConfig && selectedOperatorConfig.options != null;
 85 |         const selectedFieldWidgetConfig = getFieldWidgetConfig(this.props.config, this.props.selectedField, this.props.selectedOperator) || {};
 86 | 
 87 |         let styles = {};
 88 |         if (renderType == 'dragging') {
 89 |             styles = {
 90 |                 top: this.props.dragging.y,
 91 |                 left: this.props.dragging.x,
 92 |                 width: this.props.dragging.w
 93 |             };
 94 |         }
 95 | 
 96 |         return (
 97 |             <div
 98 |                 className={classNames("rule", "group-or-rule",
 99 |                     renderType == 'placeholder' ? 'qb-placeholder' : null,
100 |                     renderType == 'dragging' ? 'qb-draggable' : null,
101 |                 )}
102 |                 style={styles}
103 |                 ref="rule"
104 |                 data-id={this.props.id}
105 |             >
106 |                 <div className="rule--header">
107 |                     {!this.props.config.settings.readonlyMode &&
108 |                         <Button
109 |                             type="danger"
110 |                             icon="delete"
111 |                             onClick={this.props.removeSelf}
112 |                             size={this.props.config.settings.renderSize || "small"}
113 |                         >
114 |                             {this.props.config.settings.deleteLabel !== undefined ? this.props.config.settings.deleteLabel : "Delete"}
115 |                         </Button>
116 |                     }
117 |                 </div>
118 |                 {/*<div className="rule--body">*/}
119 |                     {/*<Row>*/}
120 |                         { this.props.config.settings.canReorder && this.props.treeNodesCnt > 2 &&
121 |                             <span className={"qb-drag-handler"} onMouseDown={this.handleDraggerMouseDown} ><Icon type="bars" /> </span>
122 |                         }
123 |                         {true ? (
124 |                             <Col key={"fields"} className="rule--field">
125 |                                 { this.props.config.settings.showLabels &&
126 |                                     <label>{this.props.config.settings.fieldLabel || "Field"}</label>
127 |                                 }
128 |                                 <Field
129 |                                     key="field"
130 |                                     config={this.props.config}
131 |                                     selectedField={this.props.selectedField}
132 |                                     setField={this.props.setField}
133 |                                     renderAsDropdown={this.props.config.settings.renderFieldAndOpAsDropdown}
134 |                                     customProps={this.props.config.settings.customFieldSelectProps}
135 |                                 />
136 |                             </Col>
137 |                         ) : null}
138 |                         {this.props.selectedField && !selectedFieldWidgetConfig.hideOperator && (
139 |                             <Col key={"operators-for-"+(selectedFieldPartsLabels || []).join("_")} className="rule--operator">
140 |                                 { this.props.config.settings.showLabels &&
141 |                                     <label>{this.props.config.settings.operatorLabel || "Operator"}</label>
142 |                                 }
143 |                                 <Operator
144 |                                     key="operator"
145 |                                     config={this.props.config}
146 |                                     selectedField={this.props.selectedField}
147 |                                     selectedOperator={this.props.selectedOperator}
148 |                                     setOperator={this.props.setOperator}
149 |                                     renderAsDropdown={this.props.config.settings.renderFieldAndOpAsDropdown}
150 |                                 />
151 |                             </Col>
152 |                         )}
153 |                         {this.props.selectedField && selectedFieldWidgetConfig.hideOperator && selectedFieldWidgetConfig.operatorInlineLabel && (
154 |                             <Col key={"operators-for-"+(selectedFieldPartsLabels || []).join("_")} className="rule--operator">
155 |                                 <div className="rule--operator">
156 |                                     {this.props.config.settings.showLabels ?
157 |                                         <label>&nbsp;</label>
158 |                                     : null}
159 |                                     <span>{selectedFieldWidgetConfig.operatorInlineLabel}</span>
160 |                                 </div>
161 |                             </Col>
162 |                         )}
163 |                         {isFieldAndOpSelected &&
164 |                             <Col key={"widget-for-"+this.props.selectedOperator} className="rule--value">
165 |                                 <Widget
166 |                                   key="values"
167 |                                   field={this.props.selectedField}
168 |                                   operator={this.props.selectedOperator}
169 |                                   value={this.props.value}
170 |                                   valueSrc={this.props.valueSrc}
171 |                                   config={this.props.config}
172 |                                   setValue={this.props.setValue}
173 |                                   setValueSrc={this.props.setValueSrc}
174 |                                 />
175 |                             </Col>
176 |                         }
177 |                         {isFieldAndOpSelected && selectedOperatorHasOptions &&
178 |                             <Col key={"op-options-for-"+this.props.selectedOperator} className="rule--operator-options">
179 |                                 <OperatorOptions
180 |                                   key="operatorOptions"
181 |                                   selectedField={this.props.selectedField}
182 |                                   selectedOperator={this.props.selectedOperator}
183 |                                   operatorOptions={this.props.operatorOptions}
184 |                                   setOperatorOption={this.props.setOperatorOption}
185 |                                   config={this.props.config}
186 |                                 />
187 |                             </Col>
188 |                         }
189 |                     {/*</Row>*/}
190 |                 {/*</div>*/}
191 |             </div>
192 |         );
193 |     }
194 | 
195 | }
196 | 
197 | export default Rule;


--------------------------------------------------------------------------------
/modules/components/Widget.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import shallowCompare from 'react-addons-shallow-compare';
 4 | import WidgetContainer from './containers/WidgetContainer';
 5 | import { Row, Col } from 'antd';
 6 | 
 7 | @WidgetContainer
 8 | export default class Widget extends Component {
 9 |   static propTypes = {
10 |     config: PropTypes.object.isRequired,
11 |     name: PropTypes.string.isRequired,
12 |     children: PropTypes.oneOfType([PropTypes.array, PropTypes.element])
13 |   };
14 | 
15 |   shouldComponentUpdate = shallowCompare;
16 | 
17 |   render() {
18 |     return (
19 |       <Col
20 |         className={`rule--widget rule--widget--${this.props.name.toUpperCase()}`}
21 |         key={"widget-col-"+this.props.name}
22 |       >
23 |         {this.props.children}
24 |       </Col>
25 |     );
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/modules/components/containers/GroupContainer.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import PropTypes from 'prop-types';
  3 | import shallowCompare from 'react-addons-shallow-compare';
  4 | import mapValues from 'lodash/mapValues';
  5 | import Immutable from 'immutable';
  6 | var stringify = require('json-stringify-safe');
  7 | import PureRenderMixin from 'react-addons-pure-render-mixin';
  8 | import {Provider, Connector, connect} from 'react-redux';
  9 | 
 10 | 
 11 | export default (Group) => {
 12 |   class GroupContainer extends Component {
 13 |     static propTypes = {
 14 |       //tree: PropTypes.instanceOf(Immutable.Map).isRequired,
 15 |       config: PropTypes.object.isRequired,
 16 |       actions: PropTypes.object.isRequired, //{setConjunction: Funciton, removeGroup, addGroup, addRule, ...}
 17 |       path: PropTypes.any.isRequired, //instanceOf(Immutable.List)
 18 |       id: PropTypes.string.isRequired,
 19 |       not: PropTypes.bool,
 20 |       conjunction: PropTypes.string,
 21 |       children1: PropTypes.any, //instanceOf(Immutable.OrderedMap)
 22 |       onDragStart: PropTypes.func,
 23 |       treeNodesCnt: PropTypes.number,
 24 |     };
 25 | 
 26 |     constructor(props) {
 27 |       super(props);
 28 | 
 29 |       this.conjunctionOptions = this._getConjunctionOptions(props);
 30 |     }
 31 | 
 32 |     pureShouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
 33 |     //shouldComponentUpdate = this.pureShouldComponentUpdate;
 34 | 
 35 |     shouldComponentUpdate(nextProps, nextState) {
 36 |         let prevProps = this.props;
 37 |         let prevState = this.state;
 38 | 
 39 |         let should = this.pureShouldComponentUpdate(nextProps, nextState);
 40 |         if (should) {
 41 |           if (prevState == nextState && prevProps != nextProps) {
 42 |             let chs = [];
 43 |             for (let k in nextProps) {
 44 |                 let changed = (nextProps[k] != prevProps[k]);
 45 |                 if (k == 'dragging' && (nextProps.dragging.id || prevProps.dragging.id) != nextProps.id) {
 46 |                   changed = false; //dragging another item -> ignore
 47 |                 }
 48 |                 if (changed) {
 49 |                   chs.push(k);
 50 |                 }
 51 |             }
 52 |             if (!chs.length)
 53 |                 should = false;
 54 |           }
 55 |         }
 56 |         
 57 |         return should;
 58 |     }
 59 | 
 60 |     componentWillReceiveProps(nextProps) {
 61 |       const {config, id, conjunction} = nextProps;
 62 |       const oldConfig = this.props.config;
 63 |       const oldConjunction = this.props.conjunction;
 64 |       if (oldConfig != config || oldConjunction != conjunction) {
 65 |         this.conjunctionOptions = this._getConjunctionOptions(nextProps);
 66 |       }
 67 |     }
 68 | 
 69 |     _getConjunctionOptions (props) {
 70 |       return mapValues(props.config.conjunctions, (item, index) => ({
 71 |         id: `conjunction-${props.id}-${index}`,
 72 |         name: `conjunction[${props.id}]`,
 73 |         key: index,
 74 |         label: item.label,
 75 |         checked: index === props.conjunction,
 76 |       }));
 77 |     }
 78 | 
 79 |     setConjunction = (e = null, conj = null) => {
 80 |       if (!conj && e) {
 81 |         //for RadioGroup
 82 |         conj = e.target.value;
 83 |       }
 84 | 
 85 |       this.props.actions.setConjunction(this.props.path, conj);
 86 |     }
 87 | 
 88 |     setNot(e = null, not = null) {
 89 |       this.props.actions.setNot(this.props.path, not);
 90 |     }
 91 | 
 92 |     dummyFn = () => {}
 93 | 
 94 |     removeSelf = (event) => {
 95 |       this.props.actions.removeGroup(this.props.path);
 96 |       event.preventDefault();
 97 |       return false;
 98 |     }
 99 | 
100 |     addGroup = (event) => {
101 |       this.props.actions.addGroup(this.props.path);
102 |       event.preventDefault();
103 |       return false;
104 |     }
105 | 
106 |     addRule = (event) => {
107 |       this.props.actions.addRule(this.props.path);
108 |       event.preventDefault();
109 |       return false;
110 |     }
111 | 
112 |     render() {
113 |       const currentNesting = this.props.path.size;
114 |       const maxNesting = this.props.config.settings.maxNesting;
115 | 
116 |       // Don't allow nesting further than the maximum configured depth and don't
117 |       // allow removal of the root group.
118 |       const allowFurtherNesting = typeof maxNesting === 'undefined' || currentNesting < maxNesting;
119 |       const isRoot = currentNesting == 1;
120 | 
121 |       return (
122 |         <div
123 |           className={'group-or-rule-container group-container'}
124 |           data-id={this.props.id}
125 |         >
126 |           {[(
127 |             <Group
128 |               key={"dragging"}
129 |               isForDrag={true}
130 |               id={this.props.id}
131 |               isRoot={isRoot}
132 |               allowFurtherNesting={allowFurtherNesting}
133 |               conjunctionOptions={this.conjunctionOptions}
134 |               not={this.props.not}
135 |               selectedConjunction={this.props.conjunction}
136 |               setConjunction={this.dummyFn}
137 |               setNot={this.dummyFn}
138 |               removeSelf={this.dummyFn}
139 |               addGroup={this.dummyFn}
140 |               addRule={this.dummyFn}
141 |               config={this.props.config}
142 |               children1={this.props.children1}
143 |               actions={this.props.actions}
144 |               //tree={this.props.tree}
145 |               treeNodesCnt={this.props.treeNodesCnt}
146 |               dragging={this.props.dragging}
147 |             />
148 |           ), (
149 |             <Group
150 |               key={this.props.id}
151 |               id={this.props.id}
152 |               isRoot={isRoot}
153 |               allowFurtherNesting={allowFurtherNesting}
154 |               conjunctionOptions={this.conjunctionOptions}
155 |               not={this.props.not}
156 |               selectedConjunction={this.props.conjunction}
157 |               setConjunction={this.setConjunction}
158 |               setNot={this.setNot.bind(this)}
159 |               removeSelf={this.removeSelf}
160 |               addGroup={this.addGroup}
161 |               addRule={this.addRule}
162 |               config={this.props.config}
163 |               children1={this.props.children1}
164 |               actions={this.props.actions}
165 |               //tree={this.props.tree}
166 |               treeNodesCnt={this.props.treeNodesCnt}
167 |               onDragStart={this.props.onDragStart}
168 |               dragging={this.props.dragging}
169 |             />
170 |           )]}
171 |         </div>
172 |       );
173 |     }
174 | 
175 |   };
176 | 
177 |   const ConnectedGroupContainer = connect(
178 |       (state) => {
179 |           return {
180 |             dragging: state.dragging,
181 |           }
182 |       }
183 |   )(GroupContainer);
184 | 
185 | 
186 |   return ConnectedGroupContainer;
187 | 
188 | };
189 | 


--------------------------------------------------------------------------------
/modules/components/containers/OperatorOptionsContainer.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import Immutable from 'immutable';
 4 | import shallowCompare from 'react-addons-shallow-compare';
 5 | import {getOperatorConfig} from "../../utils/configUtils";
 6 | 
 7 | export default (OperatorOptions) => {
 8 |   return class OperatorOptionsContainer extends Component {
 9 |     static propTypes = {
10 |       config: PropTypes.object.isRequired,
11 |       operatorOptions: PropTypes.any.isRequired, //instanceOf(Immutable.Map)
12 |       selectedField: PropTypes.string.isRequired,
13 |       selectedOperator: PropTypes.string.isRequired,
14 |       //actions
15 |       setOperatorOption: PropTypes.func.isRequired,
16 |     };
17 | 
18 |     shouldComponentUpdate = shallowCompare;
19 | 
20 |     render() {
21 |       if (!this.props.selectedOperator)
22 |         return null;
23 |       const operatorDefinitions = getOperatorConfig(this.props.config, this.props.selectedOperator, this.props.selectedField);
24 |       if (typeof operatorDefinitions.options === 'undefined') {
25 |         return null;
26 |       }
27 | 
28 |       const { factory: optionsFactory, ...optionsProps } = operatorDefinitions.options;
29 | 
30 |       return (
31 |         <OperatorOptions
32 |             name={this.props.selectedOperator}
33 |             config={this.props.config}
34 |         >
35 |           {optionsFactory(Object.assign({}, optionsProps, {
36 |             config: this.props.config,
37 |             field: this.props.selectedField,
38 |             operator: this.props.selectedOperator,
39 |             options: this.props.operatorOptions,
40 |             setOption: this.props.setOperatorOption,
41 |           }))}
42 |         </OperatorOptions>
43 |       );
44 |     }
45 |   };
46 | };
47 | 


--------------------------------------------------------------------------------
/modules/components/containers/RuleContainer.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import PropTypes from 'prop-types';
  3 | import shallowCompare from 'react-addons-shallow-compare';
  4 | import size from 'lodash/size';
  5 | import {getFieldConfig} from "../../utils/configUtils";
  6 | import Immutable from 'immutable';
  7 | import PureRenderMixin from 'react-addons-pure-render-mixin';
  8 | import {Provider, Connector, connect} from 'react-redux';
  9 | 
 10 | 
 11 | export default (Rule) => {
 12 |   class RuleContainer extends Component {
 13 |     static propTypes = {
 14 |       id: PropTypes.string.isRequired,
 15 |       config: PropTypes.object.isRequired,
 16 |       path: PropTypes.any.isRequired, //instanceOf(Immutable.List)
 17 |       operator: PropTypes.string,
 18 |       field: PropTypes.string,
 19 |       actions: PropTypes.object.isRequired, //{removeRule: Funciton, setField, setOperator, setOperatorOption, setValue, setValueSrc, ...}
 20 |       onDragStart: PropTypes.func,
 21 |       value: PropTypes.any, //depends on widget
 22 |       valueSrc: PropTypes.any,
 23 |       operatorOptions: PropTypes.object,
 24 |       treeNodesCnt: PropTypes.number,
 25 |       //connected:
 26 |       //dragging: PropTypes.object, //{id, x, y, w, h}
 27 |     };
 28 | 
 29 |     constructor(props) {
 30 |         super(props);
 31 | 
 32 |         this.componentWillReceiveProps(props);
 33 |     }
 34 | 
 35 |     componentWillReceiveProps(nextProps) {
 36 |     }
 37 | 
 38 |     dummyFn = () => {}
 39 | 
 40 |     removeSelf = () => {
 41 |       this.props.actions.removeRule(this.props.path);
 42 |     }
 43 | 
 44 |     setField = (field) => {
 45 |       this.props.actions.setField(this.props.path, field);
 46 |     }
 47 | 
 48 |     setOperator = (operator) => {
 49 |       this.props.actions.setOperator(this.props.path, operator);
 50 |     }
 51 | 
 52 |     setOperatorOption = (name, value) => {
 53 |       this.props.actions.setOperatorOption(this.props.path, name, value);
 54 |     }
 55 | 
 56 |     setValue = (delta, value, type) => {
 57 |         this.props.actions.setValue(this.props.path, delta, value, type);
 58 |     }
 59 | 
 60 |     setValueSrc = (delta, srcKey) => {
 61 |         this.props.actions.setValueSrc(this.props.path, delta, srcKey);
 62 |     }
 63 | 
 64 | 
 65 |     pureShouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
 66 |     //shouldComponentUpdate = this.pureShouldComponentUpdate;
 67 |     
 68 |     shouldComponentUpdate(nextProps, nextState) {
 69 |         let prevProps = this.props;
 70 |         let prevState = this.state;
 71 | 
 72 |         let should = this.pureShouldComponentUpdate(nextProps, nextState);
 73 |         if (should) {
 74 |           if (prevState == nextState && prevProps != nextProps) {
 75 |             let chs = [];
 76 |             for (let k in nextProps) {
 77 |                 let changed = (nextProps[k] != prevProps[k]);
 78 |                 if (k == 'dragging' && (nextProps.dragging.id || prevProps.dragging.id) != nextProps.id) {
 79 |                   changed = false; //dragging another item -> ignore
 80 |                 }
 81 |                 if (changed) {
 82 |                   chs.push(k);
 83 |                 }
 84 |             }
 85 |             if (!chs.length)
 86 |                 should = false;
 87 |           }
 88 |         }
 89 | 
 90 |         return should;
 91 |     }
 92 | 
 93 |     render() {
 94 |       const fieldConfig = getFieldConfig(this.props.field, this.props.config);
 95 |       let isGroup = fieldConfig && fieldConfig.type == '!struct';
 96 | 
 97 |       return (
 98 |         <div
 99 |           className={'group-or-rule-container rule-container'}
100 |           data-id={this.props.id}
101 |         >
102 |           {[(
103 |             <Rule
104 |               key={"dragging"}
105 |               isForDrag={true}
106 |               id={this.props.id}
107 |               setField={this.dummyFn}
108 |               setOperator={this.dummyFn}
109 |               setOperatorOption={this.dummyFn}
110 |               removeSelf={this.dummyFn}
111 |               selectedField={this.props.field || null}
112 |               selectedOperator={this.props.operator || null}
113 |               value={this.props.value || null}
114 |               valueSrc={this.props.valueSrc || null}
115 |               operatorOptions={this.props.operatorOptions}
116 |               config={this.props.config}
117 |               treeNodesCnt={this.props.treeNodesCnt}
118 |               dragging={this.props.dragging}
119 |             />
120 |           ), (
121 |             <Rule
122 |               key={this.props.id}
123 |               id={this.props.id}
124 |               removeSelf={this.removeSelf}
125 |               setField={this.setField}
126 |               setOperator={this.setOperator}
127 |               setOperatorOption={this.setOperatorOption}
128 |               setValue={this.setValue}
129 |               setValueSrc={this.setValueSrc}
130 |               selectedField={this.props.field || null}
131 |               selectedOperator={this.props.operator || null}
132 |               value={this.props.value || null}
133 |               valueSrc={this.props.valueSrc || null}
134 |               operatorOptions={this.props.operatorOptions}
135 |               config={this.props.config}
136 |               treeNodesCnt={this.props.treeNodesCnt}
137 |               onDragStart={this.props.onDragStart}
138 |               dragging={this.props.dragging}
139 |             />
140 |           )]}
141 |         </div>
142 |       );
143 |     }
144 | 
145 |   };
146 | 
147 | 
148 |   const ConnectedRuleContainer = connect(
149 |       (state) => {
150 |           return {
151 |             dragging: state.dragging,
152 |           }
153 |       }
154 |   )(RuleContainer);
155 | 
156 | 
157 |   return ConnectedRuleContainer;
158 | 
159 | };
160 | 


--------------------------------------------------------------------------------
/modules/components/containers/WidgetContainer.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import PropTypes from 'prop-types';
  3 | import Immutable from 'immutable';
  4 | import shallowCompare from 'react-addons-shallow-compare';
  5 | import range from 'lodash/range';
  6 | import map from 'lodash/map';
  7 | import {
  8 |     getFieldConfig, getValueLabel, getOperatorConfig, getValueSourcesForFieldOp,
  9 |     getWidgetForFieldOp, getFieldWidgetConfig, getWidgetsForFieldOp
 10 | } from "../../utils/configUtils";
 11 | import {defaultValue} from "../../utils/stuff";
 12 | import { Icon, Popover, Button, Radio } from 'antd';
 13 | const RadioButton = Radio.Button;
 14 | const RadioGroup = Radio.Group;
 15 | 
 16 | export default (Widget) => {
 17 |     return class WidgetContainer extends Component {
 18 |         static propTypes = {
 19 |             config: PropTypes.object.isRequired,
 20 |             value: PropTypes.any.isRequired, //instanceOf(Immutable.List)
 21 |             valueSrc: PropTypes.any.isRequired, //instanceOf(Immutable.List)
 22 |             field: PropTypes.string.isRequired,
 23 |             operator: PropTypes.string.isRequired,
 24 |             //actions
 25 |             setValue: PropTypes.func,
 26 |             setValueSrc: PropTypes.func,
 27 |         };
 28 | 
 29 |         constructor(props) {
 30 |             super(props);
 31 | 
 32 |             this._setValueHandlers = {};
 33 |             this._setValueSrcHandlers = {};
 34 |         }
 35 | 
 36 |         _getSetValueHandler = (isSpecialRange, delta, widgetType) => {
 37 |             const k = ''+widgetType+'#'+(isSpecialRange ? 'r' : delta);
 38 |             let h = this._setValueHandlers[k];
 39 |             if (!h) {
 40 |                 h = this._setValue.bind(this, isSpecialRange, delta, widgetType);
 41 |                 this._setValueHandlers[k] = h;
 42 |             }
 43 |             return h;
 44 |         }
 45 | 
 46 |         _getSetValueSrcHandler = (delta) => {
 47 |             const k = ''+delta;
 48 |             let h = this._setValueSrcHandlers[k];
 49 |             if (!h) {
 50 |                 h = this._onChangeValueSrc.bind(this, delta);
 51 |                 this._setValueSrcHandlers[k] = h;
 52 |             }
 53 |             return h;
 54 |         }
 55 | 
 56 |         _setValue = (isSpecialRange, delta, widgetType, value) => {
 57 |             if (isSpecialRange && Array.isArray(value)) {
 58 |                 const oldRange = [this.props.value.get(0), this.props.value.get(1)];
 59 |                 if (oldRange[0] != value[0])
 60 |                     this.props.setValue(0, value[0], widgetType);
 61 |                 if (oldRange[1] != value[1])
 62 |                     this.props.setValue(1, value[1], widgetType);
 63 |             } else {
 64 |                 this.props.setValue(delta, value, widgetType);
 65 |             }
 66 |         }
 67 | 
 68 |         _onChangeValueSrc = (delta, e) => {
 69 |             let srcKey = e.target.value;
 70 |             this.props.setValueSrc(delta, srcKey);
 71 |         }
 72 | 
 73 |         shouldComponentUpdate = shallowCompare;
 74 | 
 75 |         renderWidget = (isSpecialRange, delta, valueSrc, widget, operatorDefinition) => {
 76 |             const fieldDefinition = getFieldConfig(this.props.field, this.props.config);
 77 |             const widgetDefinition = getFieldWidgetConfig(this.props.config, this.props.field, this.props.operator, widget, valueSrc);
 78 |             const valueLabel = getValueLabel(this.props.config, this.props.field, this.props.operator, delta, null, isSpecialRange);
 79 |             let valueLabels = null;
 80 |             let textSeparators = null;
 81 |             if (isSpecialRange) {
 82 |                 valueLabels = [
 83 |                     getValueLabel(this.props.config, this.props.field, this.props.operator, 0),
 84 |                     getValueLabel(this.props.config, this.props.field, this.props.operator, 1)
 85 |                 ];
 86 |                 valueLabels = {
 87 |                     placeholder: [ valueLabels[0].placeholder, valueLabels[1].placeholder ],
 88 |                     label: [ valueLabels[0].label, valueLabels[1].label ],
 89 |                 };
 90 |                 textSeparators = operatorDefinition.textSeparators;
 91 |             }
 92 |             const {factory: widgetFactory, ...fieldWidgetProps} = widgetDefinition;
 93 |             const widgetType = widgetDefinition.type;
 94 | 
 95 |             if (!widgetFactory)
 96 |                 return '?';
 97 |             
 98 |             let value = isSpecialRange ? 
 99 |                 [this.props.value.get(0), this.props.value.get(1)] 
100 |                 : this.props.value.get(delta)
101 |             ;
102 |             if (isSpecialRange && value[0] === undefined && value[1] === undefined)
103 |                 value = undefined;
104 |             let widgetProps = Object.assign({}, fieldWidgetProps, {
105 |                 config: this.props.config,
106 |                 field: this.props.field,
107 |                 operator: this.props.operator,
108 |                 delta: delta,
109 |                 isSpecialRange: isSpecialRange,
110 |                 value: value,
111 |                 label: valueLabel.label,
112 |                 placeholder: valueLabel.placeholder,
113 |                 placeholders: valueLabels ? valueLabels.placeholder : null,
114 |                 textSeparators: textSeparators,
115 |                 setValue: this._getSetValueHandler(isSpecialRange, delta, widgetType),
116 |             });
117 |             
118 |             if (widget == 'field') {
119 |                 //
120 |             }
121 | 
122 |             return widgetFactory(widgetProps);
123 |         }
124 | 
125 |         renderValueSorces = (delta, valueSources, valueSrc) => {
126 |             const fieldDefinition = getFieldConfig(this.props.field, this.props.config);
127 |             const valueSourcesInfo = this.props.config.settings.valueSourcesInfo;
128 |             const valueSourcesPopupTitle = this.props.config.settings.valueSourcesPopupTitle;
129 |             //let valueSources = fieldDefinition.valueSources;
130 |             //let valueSources = getValueSourcesForFieldOp(this.props.config, this.props.field, this.props.operator);
131 | 
132 |             if (!valueSources || Object.keys(valueSources).length == 1)
133 |                 return null;
134 | 
135 |             let content = (
136 |                 <RadioGroup
137 |                     key={'valuesrc-'+delta}
138 |                     value={valueSrc || "value"}
139 |                     size={this.props.config.settings.renderSize || "small"}
140 |                     onChange={this._getSetValueSrcHandler(delta)}
141 |                 >
142 |                     {valueSources.map(srcKey => (
143 |                         <RadioButton
144 |                             key={srcKey}
145 |                             value={srcKey}
146 |                         //checked={item.checked}
147 |                         >{valueSourcesInfo[srcKey].label}</RadioButton>
148 |                     ))}
149 |                 </RadioGroup>
150 |             );
151 | 
152 |             return (
153 |                 <span>
154 |                     <Popover content={content} title={valueSourcesPopupTitle}>
155 |                         <Icon type="ellipsis" />
156 |                     </Popover>
157 |                 </span>
158 |             );
159 |         }
160 | 
161 |         render() {
162 |             const settings = this.props.config.settings;
163 |             const defaultWidget = getWidgetForFieldOp(this.props.config, this.props.field, this.props.operator);
164 |             const widgets = getWidgetsForFieldOp(this.props.config, this.props.field, this.props.operator);
165 |             const fieldDefinition = getFieldConfig(this.props.field, this.props.config);
166 |             const operatorDefinition = getOperatorConfig(this.props.config, this.props.operator, this.props.field);
167 |             if (typeof fieldDefinition === 'undefined' || typeof operatorDefinition === 'undefined') {
168 |                 return null;
169 |             }
170 |             const isSpecialRange = operatorDefinition.isSpecialRange;
171 |             const isSpecialRangeForSrcField = isSpecialRange && (this.props.valueSrc.get(0) == 'field' || this.props.valueSrc.get(1) == 'field');
172 |             const isTrueSpecialRange = isSpecialRange && !isSpecialRangeForSrcField;
173 |             const cardinality = isTrueSpecialRange ? 1 : defaultValue(operatorDefinition.cardinality, 1);
174 |             if (cardinality === 0) {
175 |                 return null;
176 |             }
177 | 
178 |             return (
179 |                 <Widget name={defaultWidget} config={this.props.config}>
180 |                     {range(0, cardinality).map(delta => {
181 |                         const valueSources = getValueSourcesForFieldOp(this.props.config, this.props.field, this.props.operator);
182 |                         let valueSrc = this.props.valueSrc.get(delta) || null;
183 |                         //if (!valueSrc && valueSources.length == 1) {
184 |                         //    this.props.setValueSrc(delta, valueSources[0]);
185 |                         //}
186 |                         let widget = getWidgetForFieldOp(this.props.config, this.props.field, this.props.operator, valueSrc);
187 |                         let widgetDefinition = getFieldWidgetConfig(this.props.config, this.props.field, this.props.operator, widget, valueSrc);
188 |                         if (isSpecialRangeForSrcField) {
189 |                             widget = widgetDefinition.singleWidget;
190 |                             widgetDefinition = getFieldWidgetConfig(this.props.config, this.props.field, this.props.operator, widget, valueSrc);
191 |                         }
192 |                         const valueLabel = getValueLabel(this.props.config, this.props.field, this.props.operator, delta, valueSrc, isTrueSpecialRange);
193 |                         let parts = [];
194 |                         if (operatorDefinition.textSeparators) {
195 |                             let sep = operatorDefinition.textSeparators[delta];
196 |                             if (sep) {
197 |                                 parts.push((
198 |                                     <div key={"widget-separators-"+delta} className="widget--sep" >
199 |                                         {settings.showLabels ?
200 |                                             <label>&nbsp;</label>
201 |                                             : null}
202 |                                         <span>{sep}</span>
203 |                                     </div>
204 |                                 ));
205 |                             }
206 |                         }
207 | 
208 |                         if (valueSources.length > 1)
209 |                             parts.push((
210 |                                 <div key={"valuesrc-"+this.props.field+"-"+delta} className="widget--valuesrc">
211 |                                     {settings.showLabels ?
212 |                                         <label>&nbsp;</label>
213 |                                         : null}
214 |                                     {this.renderValueSorces(delta, valueSources, valueSrc)}
215 |                                 </div>
216 |                             ));
217 | 
218 |                         parts.push((
219 |                             <div key={"widget-"+this.props.field+"-"+delta} className="widget--widget">
220 |                                 {settings.showLabels ?
221 |                                     <label>{valueLabel.label}</label>
222 |                                     : null}
223 |                                 {this.renderWidget(isTrueSpecialRange, delta, valueSrc, widget, operatorDefinition)}
224 |                             </div>
225 |                         ));
226 | 
227 |                         return parts;
228 |                     })}
229 |                 </Widget>
230 |             );
231 |         }
232 |     };
233 | };
234 | 


--------------------------------------------------------------------------------
/modules/components/operators/Proximity.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import shallowCompare from 'react-addons-shallow-compare';
 4 | import range from 'lodash/range';
 5 | import { Select } from 'antd';
 6 | const Option = Select.Option;
 7 | import Immutable from 'immutable';
 8 | 
 9 | export default class Proximity extends Component {
10 |   static propTypes = {
11 |     config: PropTypes.object.isRequired,
12 |     setOption: PropTypes.func.isRequired,
13 |     defaults: PropTypes.object.isRequired,
14 |     options: PropTypes.any.isRequired, //instanceOf(Immutable.Map)
15 |     minProximity: PropTypes.number,
16 |     maxProximity: PropTypes.number,
17 |     optionPlaceholder: PropTypes.string,
18 |     optionTextBefore: PropTypes.string,
19 |     optionLabel: PropTypes.string,
20 |     //children
21 |   };
22 | 
23 |   shouldComponentUpdate = shallowCompare;
24 | 
25 |   handleChange = (value) => {
26 |     this.props.setOption('proximity', value);
27 |   }
28 | 
29 |   render() {
30 |     const selectedProximity = this.props.options.get('proximity', this.props.defaults.proximity);
31 |     return (
32 |       <div className="operator--PROXIMITY">
33 |         <div className="operator--options">
34 |           { this.props.config.settings.showLabels &&
35 |             <label>{this.props.optionLabel || "Words between"}</label>
36 |           }
37 |           { !this.props.config.settings.showLabels && this.props.optionTextBefore &&
38 |             <div className="operator--options--sep">
39 |                 <span>{this.props.optionTextBefore}</span>
40 |             </div>
41 |           }
42 |           <Select
43 |             dropdownMatchSelectWidth={false}
44 |             size={this.props.config.settings.renderSize || "small"}
45 |             ref="proximity"
46 |             placeholder={this.props.optionPlaceholder || "Select words between"}
47 |             value={selectedProximity != null ? ""+selectedProximity : ""}
48 |             onChange={this.handleChange}
49 |           >
50 |             {range(this.props.minProximity || 2, (this.props.maxProximity || 10) + 1).map((item) => (
51 |               <Option key={""+item} value={""+item}>{item}</Option>
52 |             ))}
53 |           </Select>
54 |         </div>
55 |         <div className="operator--widgets">{this.props.children}</div>
56 |       </div>
57 |     );
58 |   }
59 | }
60 | 


--------------------------------------------------------------------------------
/modules/components/operators/index.js:
--------------------------------------------------------------------------------
1 | export { default as ProximityOperator } from './Proximity';
2 | 


--------------------------------------------------------------------------------
/modules/components/widgets/Boolean.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import ReactDOM from 'react-dom';
 4 | import { Switch, Icon } from 'antd';
 5 | import shallowCompare from 'react-addons-shallow-compare';
 6 | 
 7 | export default class BooleanWidget extends Component {
 8 |     static propTypes = {
 9 |         setValue: PropTypes.func.isRequired,
10 |         labelYes: PropTypes.string,
11 |         labelNo: PropTypes.string,
12 |         value: PropTypes.bool,
13 |         config: PropTypes.object.isRequired,
14 |         field: PropTypes.string.isRequired,
15 |         customProps: PropTypes.object,
16 |     }
17 | 
18 |     shouldComponentUpdate = shallowCompare;
19 | 
20 |     handleChange = (val) => {
21 |         this.props.setValue(val);
22 |     }
23 | 
24 |     constructor(props) {
25 |         super(props);
26 |     }
27 | 
28 |     static defaultProps = {
29 |         labelYes: null, //(<Icon type="check" />),
30 |         labelNo: null, //(<Icon type="cross" />),
31 |     }
32 | 
33 |     render() {
34 |         let customProps = this.props.customProps || {};
35 | 
36 |         return (
37 |             <Switch
38 |                 ref="switch"
39 |                 checkedChildren={this.props.labelYes || null}
40 |                 unCheckedChildren={this.props.labelNo || null}
41 |                 checked={this.props.value || null}
42 |                 onChange={this.handleChange}
43 |                 {...customProps}
44 |             />
45 |         );
46 |     }
47 | }
48 | 


--------------------------------------------------------------------------------
/modules/components/widgets/Date.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import { DatePicker } from 'antd';
 4 | const { MonthPicker, RangePicker } = DatePicker;
 5 | import moment from 'moment';
 6 | import shallowCompare from 'react-addons-shallow-compare';
 7 | 
 8 | 
 9 | export default class DateWidget extends Component {
10 |     static propTypes = {
11 |         setValue: PropTypes.func.isRequired,
12 |         dateFormat: PropTypes.string,
13 |         valueFormat: PropTypes.string,
14 |         value: PropTypes.string, //in valueFormat
15 |         field: PropTypes.string.isRequired,
16 |         config: PropTypes.object.isRequired,
17 |         placeholder: PropTypes.string,
18 |         customProps: PropTypes.object,
19 |     };
20 | 
21 |     shouldComponentUpdate = shallowCompare;
22 | 
23 |     constructor(props) {
24 |         super(props);
25 | 
26 |         const {valueFormat, value, setValue} = props;
27 |         let mValue = value ? moment(value, valueFormat) : null;
28 |         if (mValue && !mValue.isValid()) {
29 |             setValue(null);
30 |         }
31 | 
32 |         moment.locale(this.props.config.settings.locale.short);
33 |     }
34 | 
35 |     static defaultProps = {
36 |         dateFormat: 'YYYY-MM-DD',
37 |         valueFormat: 'YYYY-MM-DD',
38 |     };
39 | 
40 |     handleChange = (_value) => {
41 |         const {setValue, valueFormat} = this.props;
42 |         const value = _value && _value.isValid() ? _value.format(valueFormat) : null;
43 |         if (value || _value === null)
44 |             setValue(value);
45 |     }
46 | 
47 |     render() {
48 |         let customProps = this.props.customProps || {};
49 |         const {dateFormat, valueFormat, value} = this.props;
50 |         let dateValue = value ? moment(value, valueFormat) : null;
51 | 
52 |         return (
53 |             <DatePicker
54 |                 key="widget-date"
55 |                 placeholder={this.props.placeholder}
56 |                 size={this.props.config.settings.renderSize || "small"}
57 |                 format={dateFormat}
58 |                 value={dateValue}
59 |                 onChange={this.handleChange}
60 |                 ref="datetime"
61 |                 {...customProps}
62 |             />
63 |         );
64 |     }
65 | }
66 | 


--------------------------------------------------------------------------------
/modules/components/widgets/DateTime.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import { DatePicker } from 'antd';
 4 | const { MonthPicker, RangePicker } = DatePicker;
 5 | import moment from 'moment';
 6 | import shallowCompare from 'react-addons-shallow-compare';
 7 | 
 8 | 
 9 | export default class DateTimeWidget extends Component {
10 |     static propTypes = {
11 |         setValue: PropTypes.func.isRequired,
12 |         timeFormat: PropTypes.string,
13 |         dateFormat: PropTypes.string,
14 |         valueFormat: PropTypes.string,
15 |         value: PropTypes.string, //in valueFormat
16 |         config: PropTypes.object.isRequired,
17 |         field: PropTypes.string.isRequired,
18 |         placeholder: PropTypes.string,
19 |         use12Hours: PropTypes.bool,
20 |         customProps: PropTypes.object,
21 |     };
22 | 
23 |     shouldComponentUpdate = shallowCompare;
24 | 
25 |     constructor(props) {
26 |         super(props);
27 | 
28 |         const {valueFormat, value, setValue} = props;
29 |         let mValue = value ? moment(value, valueFormat) : null;
30 |         if (mValue && !mValue.isValid()) {
31 |             setValue(null);
32 |         }
33 | 
34 |         moment.locale(this.props.config.settings.locale.short);
35 |     }
36 | 
37 |     static defaultProps = {
38 |         timeFormat: 'HH:mm',
39 |         dateFormat: 'YYYY-MM-DD',
40 |         valueFormat: 'YYYY-MM-DD HH:mm:ss',
41 |         use12Hours: false,
42 |     };
43 | 
44 |     handleChange = (_value) => {
45 |         const {setValue, valueFormat} = this.props;
46 |         const value = _value && _value.isValid() ? _value.format(valueFormat) : null;
47 |         if (value || _value === null)
48 |             setValue(value);
49 |     }
50 | 
51 |     render() {
52 |         let customProps = this.props.customProps || {};
53 |         const {dateFormat, timeFormat, valueFormat, value, use12Hours} = this.props;
54 |         let dateValue = value ? moment(value, valueFormat) : null;
55 | 
56 |         return (
57 |             <DatePicker
58 |                 key="widget-datetime"
59 |                 use12Hours={use12Hours}
60 |                 showTime={{ format: timeFormat }}
61 |                 placeholder={this.props.placeholder}
62 |                 size={this.props.config.settings.renderSize || "small"}
63 |                 format={dateFormat + ' ' + timeFormat}
64 |                 value={dateValue}
65 |                 onChange={this.handleChange}
66 |                 ref="datetime"
67 |                 {...customProps}
68 |             />
69 |         );
70 |     }
71 | }
72 | 


--------------------------------------------------------------------------------
/modules/components/widgets/MultiSelect.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import ReactDOM from 'react-dom';
 4 | import map from 'lodash/map';
 5 | import { Select } from 'antd';
 6 | import {getFieldConfig} from '../../utils/configUtils';
 7 | import {calcTextWidth} from '../../utils/stuff';
 8 | const Option = Select.Option;
 9 | import shallowCompare from 'react-addons-shallow-compare';
10 | 
11 | export default class MultiSelectWidget extends Component {
12 |   static propTypes = {
13 |     setValue: PropTypes.func.isRequired,
14 |     config: PropTypes.object.isRequired,
15 |     value: PropTypes.array,
16 |     field: PropTypes.string.isRequired,
17 |     placeholder: PropTypes.string,
18 |     customProps: PropTypes.object,
19 |   };
20 | 
21 |   shouldComponentUpdate = shallowCompare;
22 | 
23 |   handleChange = (val) => {
24 |     this.props.setValue(val);
25 |   }
26 | 
27 |   constructor(props) {
28 |       super(props);
29 |       this.onPropsChanged(props);
30 |   }
31 | 
32 |   componentWillReceiveProps (props) {
33 |       this.onPropsChanged(props);
34 |   }
35 | 
36 |   onPropsChanged (props) {
37 |     let placeholder = this.props.placeholder || "Select option";
38 |     let placeholderWidth = calcTextWidth(placeholder, '12px');
39 |     const fieldDefinition = getFieldConfig(this.props.field, this.props.config);
40 |     let optionsMaxWidth = 0;
41 |     map(fieldDefinition.listValues, (label, value) => {
42 |       optionsMaxWidth = Math.max(optionsMaxWidth, calcTextWidth(label, '12px'));
43 |     });
44 | 
45 |     this.placeholder = placeholder;
46 |     this.placeholderWidth = placeholderWidth;
47 |     this.optionsMaxWidth = optionsMaxWidth;
48 |   }
49 | 
50 |   render() {
51 |     let customProps = this.props.customProps || {};
52 |     let size = this.props.config.settings.renderSize || "small";
53 |     const fieldDefinition = getFieldConfig(this.props.field, this.props.config);
54 |     const options = map(fieldDefinition.listValues, (label, value) => {
55 |       return (<Option key={value} value={value}>{label}</Option>);
56 |     });
57 |     let value = this.props.value && this.props.value.length ? this.props.value : null;
58 | 
59 |     return (
60 |         <Select
61 |             multiple
62 |             style={{
63 |               minWidth: value ? null : this.placeholderWidth + 30,
64 |               width: this.props.value ? null : this.placeholderWidth + 30,
65 |             }}
66 |             dropdownStyle={{
67 |               width: this.optionsMaxWidth + 40,
68 |             }}
69 |             key={"widget-multiselect"}
70 |             dropdownMatchSelectWidth={false}
71 |             ref="val"
72 |             placeholder={this.placeholder}
73 |             size={size}
74 |             value={value || undefined}  //note: (bug?) null forces placeholder to hide
75 |             onChange={this.handleChange}
76 |             filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
77 |             {...customProps}
78 |           >{options}
79 |         </Select>
80 |     );
81 |   }
82 | }
83 | 


--------------------------------------------------------------------------------
/modules/components/widgets/Number.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import ReactDOM from 'react-dom';
 4 | import { InputNumber, Col } from 'antd';
 5 | import 'antd/lib/date-picker/style';
 6 | import {getFieldConfig} from '../../utils/configUtils';
 7 | import shallowCompare from 'react-addons-shallow-compare';
 8 | 
 9 | export default class NumberWidget extends Component {
10 |   static propTypes = {
11 |     setValue: PropTypes.func.isRequired,
12 |     min: PropTypes.number,
13 |     max: PropTypes.number,
14 |     step: PropTypes.number,
15 |     placeholder: PropTypes.string,
16 |     config: PropTypes.object.isRequired,
17 |     field: PropTypes.string.isRequired,
18 |     value: PropTypes.number,
19 |     customProps: PropTypes.object,
20 |   };
21 | 
22 |   shouldComponentUpdate = shallowCompare;
23 | 
24 |   handleChange = (val) => {
25 |     if (val === '')
26 |       val = undefined;
27 |     this.props.setValue(val);
28 |   }
29 | 
30 |   static defaultProps = {
31 |       min: undefined,
32 |       max: undefined,
33 |       step: undefined,
34 |   };
35 | 
36 |   render() {
37 |     const fieldDefinition = getFieldConfig(this.props.field, this.props.config);
38 |     const fieldSettings = fieldDefinition.fieldSettings || {};
39 |     const min = this.props.min != null ? this.props.min : fieldSettings.min;
40 |     const max = this.props.max != null ? this.props.max : fieldSettings.max;
41 |     const step = this.props.step != null ? this.props.step : fieldSettings.step;
42 |     let customProps = this.props.customProps || {};
43 | 
44 |     return (
45 |       <Col>
46 |         <InputNumber
47 |           key="widget-number"
48 |           size={this.props.config.settings.renderSize || "small"}
49 |           ref="num"
50 |           value={this.props.value != undefined ? this.props.value : null}
51 |           min={min}
52 |           max={max}
53 |           step={step}
54 |           placeholder={this.props.placeholder}
55 |           onChange={this.handleChange}
56 |           {...customProps}
57 |         />
58 |       </Col>
59 |     );
60 |   }
61 | }
62 | 


--------------------------------------------------------------------------------
/modules/components/widgets/Range.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import PropTypes from 'prop-types';
  3 | import ReactDOM from 'react-dom';
  4 | import { Slider, InputNumber, Col, Row } from 'antd';
  5 | import 'antd/lib/date-picker/style';
  6 | import { getFieldConfig } from '../../utils/configUtils';
  7 | import shallowCompare from 'react-addons-shallow-compare';
  8 | 
  9 | export default class RangeWidget extends Component {
 10 | 
 11 |   state = {
 12 |   }
 13 | 
 14 |   static propTypes = {
 15 |     setValue: PropTypes.func.isRequired,
 16 |     min: PropTypes.number,
 17 |     max: PropTypes.number,
 18 |     step: PropTypes.number,
 19 |     placeholder: PropTypes.string,
 20 |     placeholders: PropTypes.array,
 21 |     textSeparators: PropTypes.array,
 22 |     config: PropTypes.object.isRequired,
 23 |     field: PropTypes.string.isRequired,
 24 |     value: PropTypes.array,
 25 |     customProps: PropTypes.object,
 26 |   };
 27 | 
 28 |   shouldComponentUpdate = shallowCompare;
 29 | 
 30 |   handleChange = (value) => {
 31 |     this.props.setValue(value);
 32 |   }
 33 | 
 34 |   handleChangeFrom = (valueFrom) => {
 35 |     let value = this.props.value || [undefined, undefined];
 36 |     value = [...value];
 37 |     value[0] = valueFrom;
 38 |     if (value[1] == undefined)
 39 |       value[1] = valueFrom;
 40 |     this.props.setValue(value);
 41 |   }
 42 |   
 43 |   handleChangeTo = (valueTo) => {
 44 |     let value = this.props.value || [undefined, undefined];
 45 |     value = [...value];
 46 |     value[1] = valueTo;
 47 |     if (value[0] == undefined)
 48 |       value[0] = valueTo;
 49 |     this.props.setValue(value);
 50 |   }
 51 | 
 52 |   defaultProps = {
 53 |     min: 0,
 54 |     max: 100,
 55 |     step: 10,
 56 |   };
 57 | 
 58 |   render() {
 59 |     const fieldDefinition = getFieldConfig(this.props.field, this.props.config);
 60 |     const fieldSettings = fieldDefinition.fieldSettings || {};
 61 |     const customProps = this.props.customProps || {};
 62 | 
 63 |     let value = this.props.value != undefined ? this.props.value : undefined;
 64 |     let [valueFrom, valueTo] = value || [null, null];
 65 |     const min = fieldSettings.min === null ? this.defaultProps.min : fieldSettings.min;
 66 |     const max = fieldSettings.max === null ? this.defaultProps.max : fieldSettings.max;
 67 |     const step = fieldSettings.step === undefined ? this.defaultProps.step : fieldSettings.step;
 68 |     const marks = fieldSettings.marks === undefined ? this.defaultProps.marks : fieldSettings.marks;
 69 | 
 70 |     if (value && (valueFrom == undefined || valueTo == undefined)) {
 71 |       // happens if we change value source - this leads to incomplete slider value, fix it:
 72 |       if (valueFrom == undefined)
 73 |         this.handleChangeTo(valueTo);
 74 |       if (valueTo == undefined)
 75 |         this.handleChangeFrom(valueFrom);
 76 |       return null;
 77 |     }
 78 | 
 79 |     return (
 80 |       <Col style={{display: 'inline-flex'}}>
 81 |         <Col style={{float: 'left', marginRight: '5px'}}>
 82 |           <InputNumber
 83 |             size={this.props.config.settings.renderSize || "small"}
 84 |             ref="numFrom"
 85 |             key="numFrom"
 86 |             value={valueFrom}
 87 |             min={min}
 88 |             max={max}
 89 |             step={step}
 90 |             placeholder={this.props.placeholders[0]}
 91 |             onChange={this.handleChangeFrom}
 92 |             {...customProps}
 93 |           />
 94 |         </Col>
 95 |         <Col style={{float: 'left', marginRight: '5px', lineHeight: '20px'}}>
 96 |           <span>{ this.props.textSeparators[1] }</span>
 97 |         </Col>
 98 |         <Col style={{float: 'left', marginRight: '5px'}}>
 99 |           <InputNumber
100 |             size={this.props.config.settings.renderSize || "small"}
101 |             ref="numTo"
102 |             key="numTo"
103 |             value={valueTo}
104 |             min={min}
105 |             max={max}
106 |             marks={marks}
107 |             step={step}
108 |             placeholder={this.props.placeholders[1]}
109 |             onChange={this.handleChangeTo}
110 |             {...customProps}
111 |           />
112 |         </Col>
113 |         <Col style={{float: 'left', width: customProps.width || '300px'}}>
114 |           <Slider
115 |             ref="slider"
116 |             value={value}
117 |             min={min}
118 |             max={max}
119 |             step={step}
120 |             marks={marks}
121 |             included={false}
122 |             range={true}
123 |             //placeholder={this.props.placeholder}
124 |             onChange={this.handleChange}
125 |             {...customProps}
126 |           />
127 |         </Col>
128 |         <Col style={{clear: 'both'}} />
129 |       </Col>
130 |     );
131 |   }
132 | }


--------------------------------------------------------------------------------
/modules/components/widgets/Select.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import ReactDOM from 'react-dom';
 4 | import map from 'lodash/map';
 5 | import {getFieldConfig} from '../../utils/configUtils';
 6 | import {calcTextWidth} from '../../utils/stuff';
 7 | import { Select } from 'antd';
 8 | const Option = Select.Option;
 9 | import shallowCompare from 'react-addons-shallow-compare';
10 | 
11 | export default class SelectWidget extends Component {
12 |   static propTypes = {
13 |     setValue: PropTypes.func.isRequired,
14 |     config: PropTypes.object.isRequired,
15 |     field: PropTypes.string.isRequired,
16 |     value: PropTypes.string, //key in listValues
17 |     customProps: PropTypes.object,
18 |   };
19 | 
20 |   shouldComponentUpdate = shallowCompare;
21 | 
22 |   handleChange = (val) => {
23 |     this.props.setValue(val);
24 |   }
25 | 
26 |   filterOption = (input, option) => {
27 |     return option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
28 |   }
29 | 
30 |   render() {
31 |     let size = this.props.config.settings.renderSize || "small";
32 |     let placeholder = this.props.placeholder || "Select option";
33 |     const fieldDefinition = getFieldConfig(this.props.field, this.props.config);
34 |     const options = map(fieldDefinition.listValues, (label, value) => {
35 |       return (<Option key={value} value={value}>{label}</Option>);
36 |     });
37 |     let placeholderWidth = calcTextWidth(placeholder, '12px');
38 |     let customProps = this.props.customProps || {};
39 | 
40 |     return (
41 |         <Select
42 |             style={{ width: this.props.value ? null : placeholderWidth + 36 }}
43 |             key={"widget-select"}
44 |             dropdownMatchSelectWidth={false}
45 |             ref="val"
46 |             placeholder={placeholder}
47 |             size={size}
48 |             value={this.props.value || undefined} //note: (bug?) null forces placeholder to hide
49 |             onChange={this.handleChange}
50 |             filterOption={this.filterOption}
51 |             {...customProps}
52 |           >{options}
53 |         </Select>
54 |     );
55 |   }
56 | }
57 | 


--------------------------------------------------------------------------------
/modules/components/widgets/Slider.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import ReactDOM from 'react-dom';
 4 | import { Slider, InputNumber, Col, Row } from 'antd';
 5 | import 'antd/lib/date-picker/style';
 6 | import { getFieldConfig } from '../../utils/configUtils';
 7 | import shallowCompare from 'react-addons-shallow-compare';
 8 | 
 9 | export default class SliderWidget extends Component {
10 | 
11 |   state = {
12 |   }
13 | 
14 |   static propTypes = {
15 |     setValue: PropTypes.func.isRequired,
16 |     min: PropTypes.number,
17 |     max: PropTypes.number,
18 |     step: PropTypes.number,
19 |     placeholder: PropTypes.string,
20 |     config: PropTypes.object.isRequired,
21 |     field: PropTypes.string.isRequired,
22 |     value: PropTypes.number,
23 |     customProps: PropTypes.object,
24 |   };
25 | 
26 |   shouldComponentUpdate = shallowCompare;
27 | 
28 |   handleChange = (val) => {
29 |     if (val === '')
30 |       val = undefined;
31 |     this.props.setValue(val);
32 |   }
33 | 
34 |   defaultProps = {
35 |     min: 0,
36 |     max: 100,
37 |     step: 10,
38 |   };
39 | 
40 |   render() {
41 |     const fieldDefinition = getFieldConfig(this.props.field, this.props.config);
42 |     const fieldSettings = fieldDefinition.fieldSettings || {};
43 |     const customProps = this.props.customProps || {};
44 | 
45 |     let value = this.props.value != undefined ? this.props.value : null;
46 |     const min = fieldSettings.min === null ? this.defaultProps.min : fieldSettings.min;
47 |     const max = fieldSettings.max === null ? this.defaultProps.max : fieldSettings.max;
48 |     const step = fieldSettings.step === undefined ? this.defaultProps.step : fieldSettings.step;
49 |     const marks = fieldSettings.marks === undefined ? this.defaultProps.marks : fieldSettings.marks;
50 | 
51 |     return (
52 |       <Col style={{display: 'inline-flex'}}>
53 |         <Col style={{float: 'left', marginRight: '5px'}}>
54 |           <InputNumber
55 |             size={this.props.config.settings.renderSize || "small"}
56 |             ref="num"
57 |             value={value}
58 |             min={min}
59 |             max={max}
60 |             step={step}
61 |             placeholder={this.props.placeholder}
62 |             onChange={this.handleChange}
63 |             {...customProps}
64 |           />
65 |         </Col>
66 |         <Col style={{float: 'left', width: customProps.width || '300px'}}>
67 |           <Slider
68 |             ref="slider"
69 |             value={value}
70 |             min={min}
71 |             max={max}
72 |             included={false}
73 |             step={step}
74 |             marks={marks}
75 |             onChange={this.handleChange}
76 |             {...customProps}
77 |           />
78 |         </Col>
79 |         <Col style={{clear: 'both'}} />
80 |       </Col>
81 |     );
82 |   }
83 | }


--------------------------------------------------------------------------------
/modules/components/widgets/Text.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import ReactDOM from 'react-dom';
 4 | import { Input, Col } from 'antd';
 5 | import shallowCompare from 'react-addons-shallow-compare';
 6 | 
 7 | export default class TextWidget extends Component {
 8 |   static propTypes = {
 9 |     setValue: PropTypes.func.isRequired,
10 |     placeholder: PropTypes.string,
11 |     config: PropTypes.object.isRequired,
12 |     value: PropTypes.string,
13 |     field: PropTypes.string.isRequired,
14 |     customProps: PropTypes.object,
15 |   };
16 | 
17 |   shouldComponentUpdate = shallowCompare;
18 | 
19 |   handleChange = () => {
20 |     this.props.setValue(ReactDOM.findDOMNode(this.refs.text).value);
21 |   }
22 | 
23 |   render() {
24 |     let customProps = this.props.customProps || {};
25 | 
26 |     return (
27 |       <Col>
28 |         <Input
29 |           key="widget-text"
30 |           size={this.props.config.settings.renderSize || "small"}
31 |           ref="text"
32 |           type={"text"}
33 |           value={this.props.value || null}
34 |           placeholder={this.props.placeholder}
35 |           onChange={this.handleChange}
36 |           {...customProps}
37 |         />
38 |       </Col>
39 |     );
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/modules/components/widgets/Time.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import { TimePicker } from 'antd';
 4 | import moment from 'moment';
 5 | import { LocaleProvider } from 'antd';
 6 | import shallowCompare from 'react-addons-shallow-compare';
 7 | 
 8 | 
 9 | export default class TimeWidget extends Component {
10 |     static propTypes = {
11 |         setValue: PropTypes.func.isRequired,
12 |         timeFormat: PropTypes.string,
13 |         valueFormat: PropTypes.string,
14 |         use12Hours: PropTypes.bool,
15 |         value: PropTypes.string, //in valueFormat
16 |         config: PropTypes.object.isRequired,
17 |         field: PropTypes.string.isRequired,
18 |         placeholder: PropTypes.string,
19 |         customProps: PropTypes.object,
20 |     };
21 | 
22 |     shouldComponentUpdate = shallowCompare;
23 | 
24 |     constructor(props) {
25 |         super(props);
26 | 
27 |         const {valueFormat, value, setValue} = props;
28 |         let mValue = value ? moment(value, valueFormat) : null;
29 |         if (mValue && !mValue.isValid()) {
30 |             setValue(null);
31 |         }
32 |     }
33 | 
34 |     static defaultProps = {
35 |         timeFormat: 'HH:mm',
36 |         valueFormat: 'HH:mm:ss',
37 |         use12Hours: false,
38 |     };
39 | 
40 | 
41 |     handleChange = (_value) => {
42 |         const {setValue, valueFormat} = this.props;
43 |         const value = _value && _value.isValid() ? _value.format(valueFormat) : null;
44 |         if (value || _value === null)
45 |             setValue(value);
46 |     }
47 | 
48 |     render() {
49 |         const {timeFormat, valueFormat, value, use12Hours} = this.props;
50 |         let dateValue = value ? moment(value, valueFormat) : null;
51 |         let customProps = this.props.customProps || {};
52 | 
53 |         return (
54 |             <TimePicker
55 |                 use12Hours={use12Hours}
56 |                 key="widget-time"
57 |                 size={this.props.config.settings.renderSize || "small"}
58 |                 placeholder={this.props.placeholder}
59 |                 format={timeFormat}
60 |                 value={dateValue}
61 |                 onChange={this.handleChange}
62 |                 ref="datetime"
63 |                 {...customProps}
64 |             />
65 |         );
66 |     }
67 | }
68 | 


--------------------------------------------------------------------------------
/modules/components/widgets/ValueField.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import PropTypes from 'prop-types';
  3 | import shallowCompare from 'react-addons-shallow-compare';
  4 | import {
  5 |   getFieldConfig, getFieldPath, getFieldPathLabels, getValueSourcesForFieldOp, getWidgetForFieldOp
  6 | } from "../../utils/configUtils";
  7 | import {calcTextWidth, truncateString, BUILT_IN_PLACEMENTS} from "../../utils/stuff";
  8 | import { Menu, Dropdown, Icon, Tooltip, Button, Select } from 'antd';
  9 | const { Option, OptGroup } = Select;
 10 | const SubMenu = Menu.SubMenu;
 11 | const MenuItem = Menu.Item;
 12 | const DropdownButton = Dropdown.Button;
 13 | import map from 'lodash/map';
 14 | import last from 'lodash/last';
 15 | import keys from 'lodash/keys';
 16 | import clone from 'clone';
 17 | 
 18 | //tip: this.props.value - right value, this.props.field - left value
 19 | 
 20 | export default class ValueField extends Component {
 21 |   static propTypes = {
 22 |     setValue: PropTypes.func.isRequired,
 23 |     renderAsDropdown: PropTypes.bool,
 24 |     config: PropTypes.object.isRequired,
 25 |     field: PropTypes.string.isRequired,
 26 |     value: PropTypes.string,
 27 |     operator: PropTypes.string,
 28 |     customProps: PropTypes.object,
 29 |   };
 30 | 
 31 |   shouldComponentUpdate = shallowCompare;
 32 | 
 33 |   curFieldOpts() {
 34 |       return Object.assign({}, {label: this.props.value}, getFieldConfig(this.props.value, this.props.config) || {});
 35 |   }
 36 | 
 37 |   handleFieldMenuSelect = ({key, keyPath}) => {
 38 |     this.props.setValue(key);
 39 |   }
 40 | 
 41 |   handleFieldSelect = (key) => {
 42 |     this.props.setValue(key);
 43 |   }
 44 | 
 45 |   //tip: empty groups are ok for antd
 46 |   filterFields(config, fields, leftFieldFullkey, operator) {
 47 |     fields = clone(fields);
 48 |     const fieldSeparator = config.settings.fieldSeparator;
 49 |     const leftFieldConfig = getFieldConfig(leftFieldFullkey, config);
 50 |     let expectedType;
 51 |     let widget = getWidgetForFieldOp(config, leftFieldFullkey, operator, 'value');
 52 |     if (widget) {
 53 |       let widgetConfig = config.widgets[widget];
 54 |       let widgetType = widgetConfig.type;
 55 |       //expectedType = leftFieldConfig.type;
 56 |       expectedType = widgetType;
 57 |     } else {
 58 |       expectedType = leftFieldConfig.type;
 59 |     }
 60 | 
 61 |     function _filter(list, path) {
 62 |       for (let rightFieldKey in list) {
 63 |         let subfields = list[rightFieldKey].subfields;
 64 |         let subpath = (path ? path : []).concat(rightFieldKey);
 65 |         let rightFieldFullkey = subpath.join(fieldSeparator);
 66 |         let rightFieldConfig = getFieldConfig(rightFieldFullkey, config);
 67 |         if (rightFieldConfig.type == "!struct") {
 68 |           _filter(subfields, subpath);
 69 |         } else {
 70 |           let canUse = rightFieldConfig.type == expectedType && rightFieldFullkey != leftFieldFullkey;
 71 |           let fn = config.settings.canCompareFieldWithField;
 72 |           if (fn)
 73 |             canUse = canUse && fn(leftFieldFullkey, leftFieldConfig, rightFieldFullkey, rightFieldConfig);
 74 |             if (!canUse)
 75 |             delete list[rightFieldKey];
 76 |         }
 77 |       }
 78 |     }
 79 | 
 80 |     _filter(fields, []);
 81 | 
 82 |     return fields;
 83 |   }
 84 | 
 85 |   buildMenuItems(fields, path = null) {
 86 |       let fieldSeparator = this.props.config.settings.fieldSeparator;
 87 |       let maxLabelsLength = this.props.config.settings.maxLabelsLength || 100;
 88 |       if (!fields)
 89 |           return null;
 90 |       let prefix = path ? path.join(fieldSeparator) + fieldSeparator : '';
 91 | 
 92 |       return keys(fields).map(fieldKey => {
 93 |           let field = fields[fieldKey];
 94 |           let label = field.label || last(fieldKey.split(fieldSeparator));
 95 |           label = truncateString(label, maxLabelsLength);
 96 |           if (field.type == "!struct") {
 97 |               let subpath = (path ? path : []).concat(fieldKey);
 98 |               return <SubMenu
 99 |                   key={prefix+fieldKey}
100 |                   title={<span>{label} &nbsp;&nbsp;&nbsp;&nbsp;</span>}
101 |               >
102 |                   {this.buildMenuItems(field.subfields, subpath)}
103 |               </SubMenu>
104 |           } else {
105 |               return <MenuItem key={prefix+fieldKey}>{label}</MenuItem>;
106 |           }
107 |       });
108 |   }
109 | 
110 |   buildSelectItems(fields, path = null) {
111 |       let fieldSeparator = this.props.config.settings.fieldSeparator;
112 |       let maxLabelsLength = this.props.config.settings.maxLabelsLength || 100;
113 |       if (!fields)
114 |           return null;
115 |       let prefix = path ? path.join(fieldSeparator) + fieldSeparator : '';
116 | 
117 |       return keys(fields).map(fieldKey => {
118 |           let field = fields[fieldKey];
119 |           let label = field.label || last(fieldKey.split(fieldSeparator));
120 |           label = truncateString(label, maxLabelsLength);
121 |           if (field.type == "!struct") {
122 |               let subpath = (path ? path : []).concat(fieldKey);
123 |               return <OptGroup
124 |                   key={prefix+fieldKey}
125 |                   label={label}
126 |               >
127 |                   {this.buildSelectItems(field.subfields, subpath)}
128 |               </OptGroup>
129 |           } else {
130 |               return <Option
131 |                 key={prefix+fieldKey}
132 |                 value={prefix+fieldKey}
133 |               >
134 |                 {label}
135 |               </Option>;
136 |           }
137 |       });
138 |   }
139 | 
140 |   buildMenuToggler(label, fullLabel, customLabel) {
141 |       var toggler =
142 |           <Button
143 |               size={this.props.config.settings.renderSize || "small"}
144 |           >
145 |               {customLabel ? customLabel : label} <Icon type="down" />
146 |           </Button>;
147 | 
148 |       if (fullLabel && fullLabel != label) {
149 |           toggler = <Tooltip
150 |                   placement="top"
151 |                   title={fullLabel}
152 |               >
153 |               {toggler}
154 |               </Tooltip>;
155 |       }
156 | 
157 |       return toggler;
158 |   }
159 | 
160 |   filterOption = (input, option) => {
161 |     return option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
162 |   }
163 | 
164 |   render() {
165 |     if (this.props.renderAsDropdown)
166 |         return this.renderAsDropdown();
167 |     else
168 |         return this.renderAsSelect();
169 |   }
170 | 
171 |   renderAsSelect() {
172 |     let dropdownPlacement = this.props.config.settings.dropdownPlacement;
173 |     let fieldOptions = this.filterFields(this.props.config, this.props.config.fields, this.props.field, this.props.operator);
174 |     let placeholder = this.curFieldOpts().label || this.props.config.settings.fieldPlaceholder;
175 |     let placeholderWidth = calcTextWidth(placeholder, '12px');
176 |     let fieldSelectItems = this.buildSelectItems(fieldOptions);
177 |     let customProps = this.props.customProps || {};
178 | 
179 |     let fieldSelect = (
180 |           <Select
181 |               dropdownAlign={dropdownPlacement ? BUILT_IN_PLACEMENTS[dropdownPlacement] : undefined}
182 |               dropdownMatchSelectWidth={false}
183 |               style={{ width: this.props.value ? null : placeholderWidth + 36 }}
184 |               ref="field"
185 |               placeholder={placeholder}
186 |               size={this.props.config.settings.renderSize || "small"}
187 |               onChange={this.handleFieldSelect}
188 |               value={this.props.value || undefined}
189 |               filterOption={this.filterOption}
190 |               {...customProps}
191 |           >{fieldSelectItems}</Select>
192 |     );
193 | 
194 |     return fieldSelect;
195 |   }
196 | 
197 |   renderAsDropdown() {
198 |     let fieldOptions = this.filterFields(this.props.config, this.props.config.fields, this.props.field, this.props.operator);
199 |     let selectedFieldKeys = getFieldPath(this.props.value, this.props.config);
200 |     let selectedFieldPartsLabels = getFieldPathLabels(this.props.value, this.props.config);
201 |     let selectedFieldFullLabel = selectedFieldPartsLabels ? selectedFieldPartsLabels.join(this.props.config.settings.fieldSeparatorDisplay) : null;
202 |     let placeholder = this.curFieldOpts().label || this.props.config.settings.fieldPlaceholder;
203 |     let customProps = this.props.customProps || {};
204 | 
205 |     let fieldMenuItems = this.buildMenuItems(fieldOptions);
206 |     let fieldMenu = (
207 |         <Menu
208 |             //size={this.props.config.settings.renderSize || "small"}
209 |             selectedKeys={selectedFieldKeys}
210 |             onClick={this.handleFieldMenuSelect}
211 |             {...customProps}
212 |         >{fieldMenuItems}</Menu>
213 |     );
214 |     let fieldToggler = this.buildMenuToggler(placeholder, selectedFieldFullLabel, this.curFieldOpts().label2);
215 | 
216 |     return (
217 |         <Dropdown
218 |             overlay={fieldMenu}
219 |             trigger={['click']}
220 |             placement={this.props.config.settings.dropdownPlacement}
221 |         >
222 |             {fieldToggler}
223 |         </Dropdown>
224 |     );
225 |   }
226 | }
227 | 


--------------------------------------------------------------------------------
/modules/components/widgets/index.js:
--------------------------------------------------------------------------------
 1 | export {default as DateWidget} from './Date';
 2 | export {default as DateTimeWidget} from './DateTime'
 3 | export {default as TimeWidget} from './Time'
 4 | export {default as SelectWidget} from './Select';
 5 | export {default as TextWidget} from './Text';
 6 | export {default as NumberWidget} from './Number';
 7 | export {default as SliderWidget} from './Slider';
 8 | export {default as RangeWidget} from './Range';
 9 | export {default as BooleanWidget} from './Boolean'
10 | export {default as MultiSelectWidget} from './MultiSelect';
11 | export {default as ValueFieldWidget} from './ValueField';


--------------------------------------------------------------------------------
/modules/constants.js:
--------------------------------------------------------------------------------
 1 | export const ADD_GROUP = 'ADD_GROUP';
 2 | export const REMOVE_GROUP = 'REMOVE_GROUP';
 3 | export const SET_CONJUNCTION = 'SET_CONJUNCTION';
 4 | export const SET_NOT = 'SET_NOT';
 5 | 
 6 | export const ADD_NEW_GROUP = 'ADD_NEW_GROUP';
 7 | export const ADD_RULE = 'ADD_RULE';
 8 | export const REMOVE_RULE = 'REMOVE_RULE';
 9 | export const SET_FIELD = 'SET_FIELD';
10 | export const SET_OPERATOR = 'SET_OPERATOR';
11 | export const SET_VALUE = 'SET_VALUE';
12 | export const SET_VALUE_SRC = 'SET_VALUE_SRC';
13 | export const SET_OPERATOR_OPTION = 'SET_OPERATOR_OPTION';
14 | 
15 | export const SET_TREE = 'SET_TREE';
16 | 
17 | export const MOVE_ITEM = 'MOVE_ITEM';
18 | 
19 | export const PLACEMENT_AFTER = 'after';
20 | export const PLACEMENT_BEFORE = 'before';
21 | export const PLACEMENT_APPEND = 'append';
22 | export const PLACEMENT_PREPEND = 'prepend';
23 | 
24 | // export const SET_DRAGGING = 'SET_DRAGGING';
25 | // export const SET_DRAG_START = 'SET_DRAG_START';
26 | // export const SET_MOUSE_POS = 'SET_MOUSE_POS';
27 | export const SET_DRAG_PROGRESS = 'SET_DRAG_PROGRESS';
28 | export const SET_DRAG_START = 'SET_DRAG_START';
29 | export const SET_DRAG_END = 'SET_DRAG_END';
30 | 


--------------------------------------------------------------------------------
/modules/index.js:
--------------------------------------------------------------------------------
1 | export { default as Query } from './components/Query';
2 | export { default as Builder } from './components/Builder';
3 | export { default as Preview } from './components/Preview';
4 | 
5 | export * as Widgets from './components/widgets/index.js';
6 | export * as Operators from './components/operators';
7 | export * as Utils from './utils';
8 | 
9 | 


--------------------------------------------------------------------------------
/modules/utils/configUtils.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | import last from 'lodash/last';
  3 | import pick from 'lodash/pick';
  4 | import pickBy from 'lodash/pickBy';
  5 | import merge from 'lodash/merge';
  6 | import mergeWith from 'lodash/mergeWith';
  7 | import cloneDeep from 'lodash/cloneDeep';
  8 | 
  9 | export const extendConfig = (config) => {
 10 |     //operators, defaultOperator - merge
 11 |     //widgetProps (including valueLabel, valuePlaceholder, hideOperator, operatorInlineLabel) - concrete by widget
 12 | 
 13 |     //extend 'types' path
 14 |     for (let type in config.types) {
 15 |         let typeConfig = config.types[type];
 16 |         let operators = null, defaultOperator = null;
 17 |         typeConfig.mainWidget = typeConfig.mainWidget || Object.keys(typeConfig.widgets).filter(w => w != 'field')[0];
 18 |         for (let widget in typeConfig.widgets) {
 19 |             let typeWidgetConfig = typeConfig.widgets[widget];
 20 |             if (typeWidgetConfig.operators) {
 21 |                 if (!operators)
 22 |                     operators = [];
 23 |                 operators = operators.concat(typeWidgetConfig.operators.slice());
 24 |             }
 25 |             if (typeWidgetConfig.defaultOperator)
 26 |                 defaultOperator = typeWidgetConfig.defaultOperator;
 27 |             if (widget == typeConfig.mainWidget) {
 28 |                 typeWidgetConfig = merge({}, {widgetProps: typeConfig.mainWidgetProps || {}}, typeWidgetConfig);
 29 |             }
 30 |             typeConfig.widgets[widget] = typeWidgetConfig;
 31 |         }
 32 |         if (!typeConfig.valueSources)
 33 |             typeConfig.valueSources = Object.keys(config.settings.valueSourcesInfo);
 34 |         for (let valueSrc of typeConfig.valueSources) {
 35 |             if (valueSrc != 'value' && !typeConfig.widgets[valueSrc]) {
 36 |                 typeConfig.widgets[valueSrc] = {
 37 |                 };
 38 |             }
 39 |         }
 40 |         if (!typeConfig.operators && operators)
 41 |             typeConfig.operators = Array.from(new Set(operators)); //unique
 42 |         if (!typeConfig.defaultOperator && defaultOperator)
 43 |             typeConfig.defaultOperator = defaultOperator;
 44 |         config.types[type] = typeConfig;
 45 |     }
 46 | 
 47 |     //extend 'fields' path
 48 |     function _extendFieldConfig(fieldConfig) {
 49 |         let operators = null, defaultOperator = null;
 50 |         let typeConfig = config.types[fieldConfig.type];
 51 |         if (fieldConfig.type != '!struct') {
 52 |             if (!fieldConfig.widgets)
 53 |                 fieldConfig.widgets = {};
 54 |             fieldConfig.mainWidget = fieldConfig.mainWidget || typeConfig.mainWidget;
 55 |             fieldConfig.valueSources = fieldConfig.valueSources || typeConfig.valueSources;
 56 |             for (let widget in typeConfig.widgets) {
 57 |                 let fieldWidgetConfig = fieldConfig.widgets[widget] || {};
 58 |                 if (fieldWidgetConfig.operators) {
 59 |                     if (!operators)
 60 |                         operators = [];
 61 |                     operators = operators.concat(fieldWidgetConfig.operators.slice());
 62 |                 }
 63 |                 if (fieldWidgetConfig.defaultOperator)
 64 |                     defaultOperator = fieldWidgetConfig.defaultOperator;
 65 |                 if (widget == fieldConfig.mainWidget) {
 66 |                     fieldWidgetConfig = merge({}, {widgetProps: fieldConfig.mainWidgetProps || {}}, fieldWidgetConfig);
 67 |                 }
 68 |                 fieldConfig.widgets[widget] = fieldWidgetConfig;
 69 |             }
 70 |             if (!fieldConfig.operators && operators)
 71 |                 fieldConfig.operators = Array.from(new Set(operators));
 72 |             if (!fieldConfig.defaultOperator && defaultOperator)
 73 |                 fieldConfig.defaultOperator = defaultOperator;
 74 |         }
 75 |     };
 76 |     function _extendFieldsConfig(subconfig) {
 77 |         for (let field in subconfig) {
 78 |             _extendFieldConfig(subconfig[field]);
 79 |             if (subconfig[field].subfields) {
 80 |                 _extendFieldsConfig(subconfig[field].subfields);
 81 |             }
 82 |         }
 83 |     }
 84 |     _extendFieldsConfig(config.fields);
 85 |     //console.log(config); 
 86 |     return config;
 87 | };
 88 | 
 89 | 
 90 | export const getFieldRawConfig = (field, config) => {
 91 |     if (!field || field == ':empty:')
 92 |         return null;
 93 |     const fieldSeparator = config.settings.fieldSeparator;
 94 |     const parts = field.split(fieldSeparator);
 95 |     let fields = config.fields;
 96 |     let fieldConfig = null;
 97 |     for (let i = 0 ; i < parts.length ; i++) {
 98 |         const part = parts[i];
 99 |         const tmpFieldConfig = fields[part];
100 |         if (!tmpFieldConfig)
101 |             return null;
102 |         if (i == parts.length-1) {
103 |             fieldConfig = tmpFieldConfig;
104 |         } else {
105 |             fields = tmpFieldConfig.subfields;
106 |             if (!fields)
107 |                 return null;
108 |         }
109 |     }
110 |     return fieldConfig;
111 | };
112 | 
113 | export const getFieldConfig = (field, config) => {
114 |     if (!field || field == ':empty:')
115 |         return null;
116 |     const fieldConfig = getFieldRawConfig(field, config);
117 |     if (!fieldConfig)
118 |         return null; //throw new Error("Can't find field " + field + ", please check your config");
119 | 
120 |     //merge, but don't merge operators (rewrite instead)
121 |     const typeConfig = config.types[fieldConfig.type] || {};
122 |     let ret = mergeWith({}, typeConfig, fieldConfig || {}, (objValue, srcValue, key, object, source, stack) => {
123 |         if (Array.isArray(objValue)) {
124 |             return srcValue;
125 |         }
126 |     });
127 | 
128 |     return ret;
129 | };
130 | 
131 | export const getFirstField = (config) => {
132 |   const fieldSeparator = config.settings.fieldSeparator;
133 |   let firstField = null, key = null, keysPath = [];
134 |   if (Object.keys(config.fields).length > 0) {
135 |     key = Object.keys(config.fields)[0];
136 |     firstField = config.fields[key];
137 |     keysPath.push(key);
138 |     while (firstField.type == '!struct') {
139 |         const subfields = firstField.subfields;
140 |         if (!subfields || !Object.keys(subfields).length) {
141 |             firstField = key = null;
142 |             break;
143 |         }
144 |         key = Object.keys(subfields)[0];
145 |         keysPath.push(key);
146 |         firstField = subfields[key];
147 |     }
148 |   }
149 |   return keysPath.join(fieldSeparator);
150 | };
151 | 
152 | export const getOperatorsForField = (config, field) => {
153 |   const fieldConfig = getFieldConfig(field, config);
154 |   const fieldOps = fieldConfig ? fieldConfig.operators : [];
155 |   return fieldOps;
156 | };
157 | 
158 | export const getFirstOperator = (config, field) => {
159 |   const fieldOps = getOperatorsForField(config, field);
160 |   return fieldOps ? fieldOps[0] : null;
161 | };
162 | 
163 | export const getFieldPath = (field, config) => {
164 |     if (!field || field == ':empty:')
165 |         return null;
166 |     const fieldSeparator = config.settings.fieldSeparator;
167 |     return field
168 |         .split(fieldSeparator)
169 |         .map((curr, ind, arr) => arr.slice(0, ind+1))
170 |         .map((parts) => parts.join(fieldSeparator));
171 | };
172 | 
173 | export const getFieldPathLabels = (field, config) => {
174 |     if (!field || field == ':empty:')
175 |         return null;
176 |     const fieldSeparator = config.settings.fieldSeparator;
177 |     return field
178 |         .split(fieldSeparator)
179 |         .map((curr, ind, arr) => arr.slice(0, ind+1))
180 |         .map((parts) => parts.join(fieldSeparator))
181 |         .map(part => {
182 |             const cnf = getFieldConfig(part, config);
183 |             return cnf && cnf.label || last(part.split(fieldSeparator))
184 |         });
185 | };
186 | 
187 | export const getOperatorConfig = (config, operator, field = null) => {
188 |     if (!operator)
189 |         return null;
190 |     const opConfig = config.operators[operator];
191 |     if (field) {
192 |         const fieldConfig = getFieldConfig(field, config);
193 |         const widget = getWidgetForFieldOp(config, field, operator);
194 |         const fieldWidgetConfig = (fieldConfig && fieldConfig.widgets ? fieldConfig.widgets[widget] : {}) || {};
195 |         const fieldWidgetOpProps = (fieldWidgetConfig.opProps || {})[operator];
196 |         const mergedOpConfig = merge({}, opConfig, fieldWidgetOpProps);
197 |         return mergedOpConfig;
198 |     } else {
199 |         return opConfig;
200 |     }
201 | };
202 | 
203 | export const getFieldWidgetConfig = (config, field, operator, widget = null, valueSrc = null) => {
204 |     if (!field || !(operator || widget))
205 |         return null;
206 |     const fieldConfig = getFieldConfig(field, config);
207 |     if (!widget)
208 |         widget = getWidgetForFieldOp(config, field, operator, valueSrc);
209 |     const widgetConfig = config.widgets[widget] || {};
210 |     const fieldWidgetConfig = (fieldConfig && fieldConfig.widgets ? fieldConfig.widgets[widget] : {}) || {};
211 |     const fieldWidgetProps = (fieldWidgetConfig.widgetProps || {});
212 |     const mergedConfig = merge({}, widgetConfig, fieldWidgetProps);
213 |     return mergedConfig;
214 | };
215 | 
216 | export const getValueLabel = (config, field, operator, delta, valueSrc = null, isSpecialRange = false) => {
217 |     const fieldWidgetConfig = getFieldWidgetConfig(config, field, operator, null, valueSrc) || {};
218 |     const mergedOpConfig = getOperatorConfig(config, operator, field) || {};
219 | 
220 |     const cardinality = isSpecialRange ? 1 : mergedOpConfig.cardinality;
221 |     let ret = null;
222 |     if (cardinality > 1) {
223 |         const valueLabels =  mergedOpConfig.valueLabels;
224 |         if (valueLabels)
225 |             ret = valueLabels[delta];
226 |         if (ret && typeof ret != 'object') {
227 |             ret = {label: ret, placeholder: ret};
228 |         }
229 |         if (!ret) {
230 |             ret = {
231 |                 label: (config.settings.valueLabel || "Value") + " " + (delta+1),
232 |                 placeholder: (config.settings.valuePlaceholder || "Value") + " " + (delta+1),
233 |             }
234 |         }
235 |     } else {
236 |         ret = {
237 |             label: fieldWidgetConfig.valueLabel || config.settings.valueLabel || "Value", 
238 |             placeholder: fieldWidgetConfig.valuePlaceholder || config.settings.valuePlaceholder || "Value",
239 |         };
240 |     }
241 |     return ret;
242 | };
243 | 
244 | function _getWidgetsAndSrcsForFieldOp (config, field, operator, valueSrc = null) {
245 |     let widgets = [];
246 |     let valueSrcs = [];
247 |     if (!field || !operator)
248 |         return {widgets, valueSrcs};
249 |     const fieldConfig = getFieldConfig(field, config);
250 |     //const typeConfig = config.types[fieldConfig.type] || {};
251 |     const opConfig = config.operators[operator];
252 |     if (fieldConfig && fieldConfig.widgets) {
253 |         for (let widget in fieldConfig.widgets) {
254 |             let widgetConfig = fieldConfig.widgets[widget];
255 |             let widgetValueSrc = config.widgets[widget].valueSrc;
256 |             let canAdd = widgetConfig.operators ? widgetConfig.operators.indexOf(operator) != -1 : valueSrc != 'value';
257 |             canAdd = canAdd && (!valueSrc || valueSrc == widgetValueSrc);
258 |             if (opConfig.isUnary && (widgetValueSrc != 'value'))
259 |                 canAdd = false;
260 |             if (canAdd) {
261 |                 widgets.push(widget);
262 |                 if (fieldConfig.valueSources && fieldConfig.valueSources.indexOf(widgetValueSrc) != -1 && !valueSrcs.find(v => v == widgetValueSrc))
263 |                     valueSrcs.push(widgetValueSrc);
264 |             }
265 |         }
266 |     }
267 |     widgets.sort((w1, w2) => {
268 |         let w1Main = fieldConfig.preferWidgets ? fieldConfig.preferWidgets.indexOf(w1) != -1 : w1 == fieldConfig.mainWidget;
269 |         let w2Main = fieldConfig.preferWidgets ? fieldConfig.preferWidgets.indexOf(w2) != -1 : w2 == fieldConfig.mainWidget;
270 |         if (w1 != w2) {
271 |             return w1Main ? -1 : +1;
272 |         }
273 |         return 0;
274 |     });
275 |     
276 |     return {widgets, valueSrcs};
277 | };
278 | 
279 | export const getWidgetsForFieldOp = (config, field, operator, valueSrc = null) => {
280 |     let {widgets, valueSrcs} = _getWidgetsAndSrcsForFieldOp(config, field, operator, valueSrc);
281 |     return widgets;
282 | };
283 | 
284 | export const getValueSourcesForFieldOp = (config, field, operator) => {
285 |     let {widgets, valueSrcs} = _getWidgetsAndSrcsForFieldOp(config, field, operator, null);
286 |     return valueSrcs;
287 | };
288 | 
289 | export const getWidgetForFieldOp = (config, field, operator, valueSrc = null) => {
290 |     let {widgets, valueSrcs} = _getWidgetsAndSrcsForFieldOp(config, field, operator, valueSrc);
291 |     let widget = null;
292 |     if (widgets.length)
293 |         widget = widgets[0];
294 |     return widget;
295 | };
296 | 


--------------------------------------------------------------------------------
/modules/utils/defaultUtils.js:
--------------------------------------------------------------------------------
 1 | import Immutable from 'immutable';
 2 | import map from 'lodash/map';
 3 | import range from 'lodash/range';
 4 | import uuid from './uuid';
 5 | import {getFieldConfig, getFirstField, getFirstOperator, getOperatorConfig} from './configUtils';
 6 | import {_getNewValueForFieldOp} from '../stores/tree'
 7 | 
 8 | 
 9 | export const defaultField = (config, canGetFirst = true) => {
10 |   return typeof config.settings.defaultField === 'function' ?
11 |     config.settings.defaultField() : (config.settings.defaultField || (canGetFirst ? getFirstField(config) : null));
12 | };
13 | 
14 | export const defaultOperator = (config, field, canGetFirst = true) => {
15 |   let fieldConfig = getFieldConfig(field, config);
16 |   let fieldOperators = fieldConfig && fieldConfig.operators || [];
17 |   let fieldDefaultOperator = fieldConfig && fieldConfig.defaultOperator;
18 |   if (!fieldOperators.includes(fieldDefaultOperator))
19 |     fieldDefaultOperator = null;
20 |   if (!fieldDefaultOperator && canGetFirst)
21 |     fieldDefaultOperator = getFirstOperator(config, field)
22 |   let op = typeof config.settings.defaultOperator === 'function' ?
23 |     config.settings.defaultOperator(field, fieldConfig) : fieldDefaultOperator;
24 |   return op;
25 | };
26 | 
27 | //used for complex operators like proximity
28 | export const defaultOperatorOptions = (config, operator, field) => {
29 |   let operatorConfig = operator ? getOperatorConfig(config, operator, field) : null;
30 |   if (!operatorConfig)
31 |     return null; //new Immutable.Map();
32 |   return operatorConfig.options ? new Immutable.Map(
33 |     operatorConfig.options &&
34 |     operatorConfig.options.defaults || {}
35 |   ) : null;
36 | };
37 | 
38 | export const defaultRuleProperties = (config) => {
39 |   let field = null, operator = null;
40 |   if (config.settings.setDefaultFieldAndOp) {
41 |     field = defaultField(config);
42 |     operator = defaultOperator(config, field);
43 |   }
44 |   let current = new Immutable.Map({
45 |     field: field,
46 |     operator: operator,
47 |     value: new Immutable.List(),
48 |     valueSrc: new Immutable.List(),
49 |     //used for complex operators like proximity
50 |     operatorOptions: defaultOperatorOptions(config, operator, field),
51 |   });
52 |   
53 |   if (field && operator) {
54 |     let {newValue, newValueSrc, newValueType} = _getNewValueForFieldOp (config, config, current, field, operator, 'operator');
55 |     current = current
56 |         .set('value', newValue)
57 |         .set('valueSrc', newValueSrc)
58 |         .set('valueType', newValueType);
59 |   }
60 | 
61 |   return current; 
62 | };
63 | 
64 | //------------
65 | 
66 | export const defaultConjunction = (config) =>
67 |   config.settings.defaultConjunction || Object.keys(config.conjunctions)[0];
68 | 
69 | export const defaultGroupProperties = (config) => new Immutable.Map({
70 |   conjunction: defaultConjunction(config)
71 | });
72 | 
73 | 
74 | //------------
75 | 
76 | export const getChild = (id, config) => ({
77 |   [id]: new Immutable.Map({
78 |     type: 'rule',
79 |     id: id,
80 |     properties: defaultRuleProperties(config)
81 |   })
82 | });
83 | 
84 | export const defaultRoot = (config) => {
85 |   if (config.tree) {
86 |     return new Immutable.Map(config.tree);
87 |   }
88 |   
89 |   return new Immutable.Map({
90 |     type: 'group',
91 |     id: uuid(),
92 |     children1: new Immutable.OrderedMap({ ...getChild(uuid(), config) }),
93 |     properties: defaultGroupProperties(config)
94 |   });
95 | }
96 | 


--------------------------------------------------------------------------------
/modules/utils/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | export {queryBuilderFormat} from './queryBuilderFormat'
 3 | export {mongodbFormat} from './mongodbFormat'
 4 | export {queryString} from './queryString'
 5 | export {validateTree} from './validation'
 6 | export {
 7 |   getFieldConfig, getFieldRawConfig, getFieldPath, getFieldPathLabels, getValueLabel, extendConfig, 
 8 |   getFieldWidgetConfig, getOperatorConfig, getWidgetsForFieldOp, getWidgetForFieldOp, getValueSourcesForFieldOp
 9 | } from './configUtils';
10 | 
11 | 


--------------------------------------------------------------------------------
/modules/utils/mongodbFormat.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | import Immutable from 'immutable';
  3 | import uuid from "./uuid";
  4 | import isArray from 'lodash/isArray'
  5 | import {defaultValue} from "./stuff";
  6 | import {
  7 |     getFieldConfig, getWidgetForFieldOp, getValueSourcesForFieldOp, getOperatorConfig, getFieldWidgetConfig, 
  8 |     getFieldPath, getFieldPathLabels, fieldWidgetDefinition
  9 | } from './configUtils';
 10 | import omit from 'lodash/omit';
 11 | import pick from 'lodash/pick';
 12 | 
 13 | export const mongodbFormat = (item, config, _not = false) => {
 14 |     const type = item.get('type');
 15 |     const properties = item.get('properties');
 16 |     const children = item.get('children1');
 17 |     const id = item.get('id')
 18 | 
 19 |     if (type === 'group' && children && children.size) {
 20 |         let resultQuery = {};
 21 |         let conjunction = properties.get('conjunction');
 22 |         let conjunctionDefinition = config.conjunctions[conjunction];
 23 |         const not = _not ? !(properties.get('not')) : (properties.get('not'));
 24 |         if (not) {
 25 |             conjunction = conjunctionDefinition.reversedConj;
 26 |             conjunctionDefinition = config.conjunctions[conjunction];
 27 |         }
 28 |         const mongoConj = conjunctionDefinition.mongoConj;
 29 | 
 30 |         const list = children
 31 |             .map((currentChild) => {
 32 |                 return mongodbFormat(currentChild, config, not)
 33 |             })
 34 |             .filter((currentChild) => typeof currentChild !== 'undefined')
 35 |         if (!list.size)
 36 |             return undefined;
 37 | 
 38 |         if (list.size == 1) {
 39 |             resultQuery = list.first();
 40 |         } else {
 41 |             resultQuery[mongoConj] = list.toList();
 42 |         }
 43 | 
 44 |         return resultQuery;
 45 |     } else if (type === 'rule') {
 46 |         let operator = properties.get('operator');
 47 |         let options = properties.get('operatorOptions');
 48 |         let field = properties.get('field');
 49 |         let value = properties.get('value');
 50 |         let valueSrc = properties.get('valueSrc');
 51 |         let valueType = properties.get('valueType');
 52 | 
 53 |         if (field == null || operator == null)
 54 |             return undefined;
 55 | 
 56 |         const fieldDefinition = getFieldConfig(field, config) || {};
 57 |         let operatorDefinition = getOperatorConfig(config, operator, field) || {};
 58 |         let reversedOp = operatorDefinition.reversedOp;
 59 |         let revOperatorDefinition = getOperatorConfig(config, reversedOp, field) || {};
 60 |         const fieldType = fieldDefinition.type;
 61 |         const cardinality = defaultValue(operatorDefinition.cardinality, 1);
 62 |         const widget = getWidgetForFieldOp(config, field, operator);
 63 |         const fieldWidgetDefinition = omit(getFieldWidgetConfig(config, field, operator, widget), ['factory']);
 64 |         const typeConfig = config.types[fieldDefinition.type] || {};
 65 |         // let operatorOptions = options ? options.toJS() : null;
 66 |         // if (operatorOptions && !Object.keys(operatorOptions).length)
 67 |         //     operatorOptions = null;
 68 | 
 69 |         if (_not) {
 70 |             [operator, reversedOp] = [reversedOp, operator];
 71 |             [operatorDefinition, revOperatorDefinition] = [revOperatorDefinition, operatorDefinition];
 72 |         }
 73 | 
 74 |         //format field
 75 |         if (fieldDefinition.tableName) {
 76 |           const regex = new RegExp(field.split(config.settings.fieldSeparator)[0])
 77 |           field = field.replace(regex, fieldDefinition.tableName)
 78 |         }
 79 | 
 80 |         //format value
 81 |         //let valueTypes = [];
 82 |         let hasUndefinedValues = false;
 83 |         value = value.map((currentValue, ind) => {
 84 |             if (currentValue === undefined) {
 85 |                 hasUndefinedValues = true;
 86 |                 return undefined;
 87 |             }
 88 |             const valueSrc = properties.get('valueSrc') ? properties.get('valueSrc').get(ind) : null;
 89 |             const valueType = properties.get('valueType') ? properties.get('valueType').get(ind) : null;
 90 |             const widget = getWidgetForFieldOp(config, field, operator, valueSrc);
 91 |             const fieldWidgetDefinition = omit(getFieldWidgetConfig(config, field, operator, widget, valueSrc), ['factory']);
 92 |             if (valueSrc == 'field') {
 93 |                 console.error("Field as right-hand operand is not supported for mongodb export");
 94 |                 return undefined;
 95 |             } else {
 96 |                 if (typeof fieldWidgetDefinition.mongoFormatValue === 'function') {
 97 |                     let fn = fieldWidgetDefinition.mongoFormatValue;
 98 |                     let args = [
 99 |                         currentValue,
100 |                         pick(fieldDefinition, ['fieldSettings', 'listValues']),
101 |                         omit(fieldWidgetDefinition, ['formatValue', 'mongoFormatValue']), //useful options: valueFormat for date/time
102 |                     ];
103 |                     return fn(...args);
104 |                 }
105 |                 return currentValue;
106 |             }
107 |             //valueTypes.push(valueType);
108 |         });
109 |         if (value.size < cardinality || hasUndefinedValues)
110 |             return undefined;
111 |         let formattedValue = cardinality > 1 ? value.toArray() : (cardinality == 1 ? value.first() : null);
112 |         
113 |         //build rule
114 |         let fn = operatorDefinition.mongoFormatOp;
115 |         let args = [
116 |             field,
117 |             operator,
118 |             formattedValue,
119 |             // omit(operatorDefinition, ['formatOp', 'mongoFormatOp']),
120 |             // operatorOptions,
121 |         ];
122 |         let ruleQuery = fn(...args);
123 | 
124 |         return ruleQuery;
125 |     }
126 |     return undefined;
127 | };
128 | 
129 | 


--------------------------------------------------------------------------------
/modules/utils/queryBuilderFormat.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | import Immutable from 'immutable';
  3 | import uuid from "./uuid";
  4 | import isArray from 'lodash/isArray'
  5 | import {defaultValue} from "./stuff";
  6 | import {
  7 |     getFieldConfig, getWidgetForFieldOp, getValueSourcesForFieldOp, getOperatorConfig, getFieldWidgetConfig, 
  8 |     getFieldPath, getFieldPathLabels, fieldWidgetDefinition
  9 | } from './configUtils';
 10 | import omit from 'lodash/omit';
 11 | import pick from 'lodash/pick';
 12 | 
 13 | /*
 14 |  Build tree to http://querybuilder.js.org/ like format
 15 | 
 16 |  Example:
 17 |  {
 18 |  "condition": "AND",
 19 |  "rules": [
 20 |  {
 21 |  "id": "price",
 22 |  "field": "price",
 23 |  "type": "double",
 24 |  "input": "text",
 25 |  "operator": "less",
 26 |  "value": "10.25"
 27 |  },
 28 |  {
 29 |  "condition": "OR",
 30 |  "rules": [
 31 |  {
 32 |  "id": "category",
 33 |  "field": "category",
 34 |  "type": "integer",
 35 |  "input": "select",
 36 |  "operator": "equal",
 37 |  "value": "2"
 38 |  },
 39 |  {
 40 |  "id": "category",
 41 |  "field": "category",
 42 |  "type": "integer",
 43 |  "input": "select",
 44 |  "operator": "equal",
 45 |  "value": "1"
 46 |  }
 47 |  ]}
 48 |  ]
 49 |  }
 50 |  */
 51 | export const queryBuilderFormat = (item, config, rootQuery = null) => {
 52 |     const type = item.get('type');
 53 |     const properties = item.get('properties');
 54 |     const children = item.get('children1');
 55 |     const id = item.get('id')
 56 | 
 57 |     var resultQuery = {};
 58 |     var isRoot = (rootQuery === null);
 59 |     if (isRoot) {
 60 |         rootQuery = resultQuery;
 61 |         rootQuery.usedFields = [];
 62 |     }
 63 | 
 64 |     if (type === 'group' && children && children.size) {
 65 |         const conjunction = properties.get('conjunction');
 66 |         const not = properties.get('not');
 67 |         const conjunctionDefinition = config.conjunctions[conjunction];
 68 | 
 69 |         const list = children
 70 |             .map((currentChild) => {
 71 |                 return queryBuilderFormat(currentChild, config, rootQuery)
 72 |             })
 73 |             .filter((currentChild) => typeof currentChild !== 'undefined')
 74 |         if (!list.size)
 75 |             return undefined;
 76 |         resultQuery['rules'] = list.toList();
 77 |         resultQuery['condition'] = conjunction.toUpperCase();
 78 |         resultQuery['not'] = not;
 79 | 
 80 |         return resultQuery;
 81 |     } else if (type === 'rule') {
 82 |         const operator = properties.get('operator');
 83 |         const options = properties.get('operatorOptions');
 84 |         let field = properties.get('field');
 85 |         let value = properties.get('value');
 86 |         let valueSrc = properties.get('valueSrc');
 87 |         let valueType = properties.get('valueType');
 88 | 
 89 |         let hasUndefinedValues = false;
 90 |         value.map((currentValue, ind) => {
 91 |             if (currentValue === undefined) {
 92 |                 hasUndefinedValues = true;
 93 |                 return undefined;
 94 |             }
 95 |         });
 96 | 
 97 |         if (field == null || operator == null || hasUndefinedValues)
 98 |             return undefined;
 99 | 
100 |         const fieldDefinition = getFieldConfig(field, config) || {};
101 |         const operatorDefinition = getOperatorConfig(config, operator, field) || {};
102 |         //const reversedOp = operatorDefinition.reversedOp;
103 |         //const revOperatorDefinition = getOperatorConfig(config, reversedOp, field) || {};
104 |         const fieldType = fieldDefinition.type || "undefined";
105 |         const cardinality = defaultValue(operatorDefinition.cardinality, 1);
106 |         const widget = getWidgetForFieldOp(config, field, operator);
107 |         const fieldWidgetDefinition = omit(getFieldWidgetConfig(config, field, operator, widget), ['factory']);
108 |         const typeConfig = config.types[fieldDefinition.type] || {};
109 | 
110 |         //format field
111 |         if (fieldDefinition.tableName) {
112 |           const regex = new RegExp(field.split(config.settings.fieldSeparator)[0])
113 |           field = field.replace(regex, fieldDefinition.tableName)
114 |         }
115 | 
116 |         if (value.size < cardinality)
117 |             return undefined;
118 | 
119 |         if (rootQuery.usedFields.indexOf(field) == -1)
120 |             rootQuery.usedFields.push(field);
121 |         value = value.toArray();
122 |         valueSrc = valueSrc.toArray();
123 |         valueType = valueType.toArray();
124 |         let values = [];
125 |         for (let i = 0 ; i < value.length ; i++) {
126 |             let val = {
127 |                 type: valueType[i],
128 |                 value: value[i],
129 |             };
130 |             values.push(val);
131 |             if (valueSrc[i] == 'field') {
132 |                 let secondField = value[i];
133 |                 if (rootQuery.usedFields.indexOf(secondField) == -1)
134 |                     rootQuery.usedFields.push(secondField);
135 |             }
136 |         }
137 |         let operatorOptions = options ? options.toJS() : null;
138 |         if (operatorOptions && !Object.keys(operatorOptions).length)
139 |             operatorOptions = null;
140 |         
141 |         var ruleQuery = {
142 |             id,
143 |             field,
144 |             type: fieldType,
145 |             input: typeConfig.mainWidget,
146 |             operator,
147 |         };
148 |         if (operatorOptions)
149 |             ruleQuery.operatorOptions = operatorOptions;
150 |         ruleQuery.values = values;
151 |         return ruleQuery
152 |     }
153 |     return undefined;
154 | };
155 | 
156 | 


--------------------------------------------------------------------------------
/modules/utils/queryString.js:
--------------------------------------------------------------------------------
  1 | import {getFieldConfig, getWidgetForFieldOp, getOperatorConfig, getFieldWidgetConfig, getFieldPath, getFieldPathLabels} from './configUtils';
  2 | import omit from 'lodash/omit';
  3 | import pick from 'lodash/pick';
  4 | import {defaultValue} from "./stuff";
  5 | 
  6 | export const queryString = (item, config, isForDisplay = false) => {
  7 |     const type = item.get('type');
  8 |     const properties = item.get('properties');
  9 |     const children = item.get('children1');
 10 |     const id = item.get('id');
 11 | 
 12 |     if (type === 'group' && children && children.size) {
 13 |         const conjunction = properties.get('conjunction');
 14 |         const not = properties.get('not');
 15 |         const conjunctionDefinition = config.conjunctions[conjunction];
 16 | 
 17 |         const list = children
 18 |             .map((currentChild) => queryString(currentChild, config, isForDisplay))
 19 |             .filter((currentChild) => typeof currentChild !== 'undefined');
 20 |         if (!list.size)
 21 |             return undefined;
 22 | 
 23 |         return conjunctionDefinition.formatConj(list, conjunction, not, isForDisplay);
 24 |     } else if (type === 'rule') {
 25 |         let field = properties.get('field');
 26 |         const operator = properties.get('operator');
 27 |         const operatorOptions = properties.get('operatorOptions');
 28 |         if (field == null || operator == null)
 29 |             return undefined;
 30 | 
 31 |         const fieldDefinition = getFieldConfig(field, config) || {};
 32 |         const operatorDefinition = getOperatorConfig(config, operator, field) || {};
 33 |         const reversedOp = operatorDefinition.reversedOp;
 34 |         const revOperatorDefinition = getOperatorConfig(config, reversedOp, field) || {};
 35 |         const cardinality = defaultValue(operatorDefinition.cardinality, 1);
 36 |         const typeConfig = config.types[fieldDefinition.type] || {};
 37 |         const fieldSeparator = config.settings.fieldSeparator;
 38 | 
 39 |         //format value
 40 |         let valueSrcs = [];
 41 |         let valueTypes = [];
 42 |         let hasUndefinedValues = false;
 43 |         let value = properties.get('value').map((currentValue, ind) => {
 44 |             if (currentValue === undefined) {
 45 |                 hasUndefinedValues = true;
 46 |                 return undefined;
 47 |             }
 48 |             const valueSrc = properties.get('valueSrc') ? properties.get('valueSrc').get(ind) : null;
 49 |             const valueType = properties.get('valueType') ? properties.get('valueType').get(ind) : null;
 50 |             const widget = getWidgetForFieldOp(config, field, operator, valueSrc);
 51 |             const fieldWidgetDefinition = omit(getFieldWidgetConfig(config, field, operator, widget, valueSrc), ['factory']);
 52 |             if (valueSrc == 'field') {
 53 |                 //format field
 54 |                 const rightField = currentValue;
 55 |                 let formattedField = null;
 56 |                 if (rightField) {
 57 |                     const rightFieldDefinition = getFieldConfig(rightField, config) || {};
 58 |                     const fieldParts = rightField.split(fieldSeparator);
 59 |                     //let fieldKeys = getFieldPath(rightField, config);
 60 |                     let fieldPartsLabels = getFieldPathLabels(rightField, config);
 61 |                     let fieldFullLabel = fieldPartsLabels ? fieldPartsLabels.join(config.settings.fieldSeparatorDisplay) : null;
 62 |                     let fieldLabel2 = rightFieldDefinition.label2 || fieldFullLabel;
 63 |                     formattedField = config.settings.formatField(rightField, fieldParts, fieldLabel2, rightFieldDefinition, config, isForDisplay);
 64 |                 }
 65 |                 return formattedField;
 66 |             } else {
 67 |                 if (typeof fieldWidgetDefinition.formatValue === 'function') {
 68 |                     let fn = fieldWidgetDefinition.formatValue;
 69 |                     let args = [
 70 |                         currentValue,
 71 |                         pick(fieldDefinition, ['fieldSettings', 'listValues']),
 72 |                         omit(fieldWidgetDefinition, ['formatValue', 'mongoFormatValue']), //useful options: valueFormat for date/time
 73 |                         isForDisplay
 74 |                     ];
 75 |                     if (valueSrc == 'field') {
 76 |                         let valFieldDefinition = getFieldConfig(currentValue, config) || {}; 
 77 |                         args.push(valFieldDefinition);
 78 |                     }
 79 |                     return fn(...args);
 80 |                 }
 81 |                 return currentValue;
 82 |             }
 83 |             valueSrcs.push(valueSrc);
 84 |             valueTypes.push(valueType);
 85 |         });
 86 |         if (hasUndefinedValues || value.size < cardinality)
 87 |             return undefined;
 88 |         let formattedValue = (cardinality == 1 ? value.first() : value);
 89 | 
 90 |         //find fn to format expr
 91 |         let isRev = false;
 92 |         let fn = operatorDefinition.formatOp;
 93 |         if (!fn && reversedOp) {
 94 |             fn = revOperatorDefinition.formatOp;
 95 |             if (fn) {
 96 |                 isRev = true;
 97 |             }
 98 |         }
 99 |         if (!fn && cardinality == 1) {
100 |             let _operator = operatorDefinition.labelForFormat || operator;
101 |             fn = (field, op, values, valueSrc, opDef, operatorOptions, isForDisplay) => {
102 |                 return `${field} ${_operator} ${values}`;
103 |             };
104 |         }
105 |         if (!fn)
106 |             return undefined;
107 |         
108 |         //format field
109 |         if (fieldDefinition.tableName) {
110 |           const regex = new RegExp(field.split(fieldSeparator)[0])
111 |           field = field.replace(regex, fieldDefinition.tableName)
112 |         }
113 |         let fieldParts = field.split(fieldSeparator);
114 |         //let fieldKeys = getFieldPath(field, config);
115 |         let fieldPartsLabels = getFieldPathLabels(field, config);
116 |         let fieldFullLabel = fieldPartsLabels ? fieldPartsLabels.join(config.settings.fieldSeparatorDisplay) : null;
117 |         let fieldLabel2 = fieldDefinition.label2 || fieldFullLabel;
118 |         let formattedField = config.settings.formatField(field, fieldParts, fieldLabel2, fieldDefinition, config, isForDisplay);
119 |         
120 |         //format expr
121 |         let args = [
122 |             formattedField,
123 |             operator,
124 |             formattedValue,
125 |             (valueSrcs.length > 1 ? valueSrcs : valueSrcs[0]),
126 |             (valueTypes.length > 1 ? valueTypes : valueTypes[0]),
127 |             omit(operatorDefinition, ['formatOp', 'mongoFormatOp']),
128 |             operatorOptions,
129 |             isForDisplay
130 |         ];
131 |         let ret = fn(...args);
132 |         if (isRev) {
133 |             ret = config.settings.formatReverse(ret, operator, reversedOp, operatorDefinition, revOperatorDefinition, isForDisplay);
134 |         }
135 |         return ret;
136 |     }
137 | 
138 |     return undefined;
139 | };
140 | 
141 | 
142 | 


--------------------------------------------------------------------------------
/modules/utils/stuff.js:
--------------------------------------------------------------------------------
 1 | import mapValues from 'lodash/mapValues';
 2 | 
 3 | 
 4 | // RegExp.quote = function (str) {
 5 | //     return str.replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1");
 6 | // };
 7 | 
 8 | 
 9 | export const defaultValue = (value, _default) => {
10 |     return (typeof value === "undefined") ? _default || undefined : value
11 | }
12 | 
13 | 
14 | export const bindActionCreators = (actionCreators, config, dispatch) =>
15 |   mapValues(actionCreators, (actionCreator) =>
16 |     (...args) => dispatch(actionCreator(config, ...args))
17 |   );
18 | 
19 | 
20 | export const calcTextWidth = function(str, font) {
21 |   var f = font || '12px';
22 |   var div = document.createElement("div");
23 |   div.innerHTML = str;
24 |   var css = {
25 |     'position': 'absolute', 'float': 'left', 'white-space': 'nowrap', 'visibility': 'hidden', 'font': f
26 |   };
27 |   for (let k in css) {
28 |     div.style[k] = css[k];
29 |   }
30 |   div = document.body.appendChild(div);
31 |   var w = div.offsetWidth;
32 |   document.body.removeChild(div);
33 |   return w;
34 | }
35 | 
36 | export const truncateString = (str, n, useWordBoundary) => {
37 |     if (str.length <= n) { return str; }
38 |     var subString = str.substr(0, n-1);
39 |     return (useWordBoundary 
40 |        ? subString.substr(0, subString.lastIndexOf(' ')) 
41 |        : subString) + "...";
42 | }
43 | 
44 | export const BUILT_IN_PLACEMENTS = {
45 |   bottomLeft: {
46 |     points: ['tl', 'bl'],
47 |     offset: [0, 4],
48 |     overflow: {
49 |       adjustX: 0,
50 |       adjustY: 1,
51 |     },
52 |   },
53 |   bottomRight: {
54 |     points: ['tr', 'br'],
55 |     offset: [0, 4],
56 |     overflow: {
57 |       adjustX: 1,
58 |       adjustY: 1,
59 |     },
60 |   },
61 |   topLeft: {
62 |     points: ['bl', 'tl'],
63 |     offset: [0, -4],
64 |     overflow: {
65 |       adjustX: 0,
66 |       adjustY: 1,
67 |     },
68 |   },
69 |   topRight: {
70 |     points: ['br', 'tr'],
71 |     offset: [0, -4],
72 |     overflow: {
73 |       adjustX: 1,
74 |       adjustY: 1,
75 |     },
76 |   },
77 | };
78 | 
79 | //Do sets have same values?
80 | export const eqSet = function (as, bs) {
81 |     if (as.size !== bs.size) return false;
82 |     for (var a of as) if (!bs.has(a)) return false;
83 |     return true;
84 | };
85 | 
86 | 
87 | //Do arrays have same values?
88 | export const eqArrSet = function (arr1, arr2) {
89 |     return eqSet(new Set(arr1), new Set(arr2));
90 | };
91 | 
92 | 


--------------------------------------------------------------------------------
/modules/utils/treeUtils.js:
--------------------------------------------------------------------------------
  1 | import Immutable from 'immutable';
  2 | import clone from 'clone';
  3 | 
  4 | 
  5 | /**
  6 |  * @param {Immutable.List} path
  7 |  * @param {...string} suffix
  8 |  */
  9 | export const expandTreePath = (path, ...suffix) =>
 10 |   path.interpose('children1').withMutations((list) => {
 11 |     list.skip(1);
 12 |     list.push.apply(list, suffix);
 13 |     return list;
 14 |   });
 15 | 
 16 | 
 17 | /**
 18 |  * @param {Immutable.List} path
 19 |  * @param {...string} suffix
 20 |  */
 21 | export const expandTreeSubpath = (path, ...suffix) =>
 22 |   path.interpose('children1').withMutations((list) => {
 23 |     list.push.apply(list, suffix);
 24 |     return list;
 25 |   });
 26 | 
 27 | 
 28 | /**
 29 |  * @param {Immutable.Map} path
 30 |  * @param {Immutable.List} path
 31 |  */
 32 | export const getItemByPath = (tree, path) => {
 33 |     let children = new Immutable.OrderedMap({ [tree.get('id')] : tree });
 34 |     let res = tree;
 35 |     path.forEach((id) => {
 36 |         res = children.get(id);
 37 |         children = res.get('children1');
 38 |     });
 39 |     return res;
 40 | };
 41 | 
 42 | 
 43 | /**
 44 |  * Set correct `path` in every item
 45 |  * @param {Immutable.Map} tree
 46 |  * @return {Immutable.Map} tree
 47 |  */
 48 | export const fixPathsInTree = (tree) => {
 49 |     let newTree = tree;
 50 | 
 51 |     function _processNode (item, path, lev) {
 52 |         const id = item.get('id');
 53 |         const itemPath = path.push(item.get('id'));
 54 |         const currItemPath = item.get('path');
 55 |         if (!currItemPath || !currItemPath.equals(itemPath)) {
 56 |           newTree = newTree.setIn(expandTreePath(itemPath, 'path'), itemPath)
 57 |         }
 58 | 
 59 |         const children = item.get('children1');
 60 |         if (children) {
 61 |             children.map((child, childId) => {
 62 |                 _processNode(child, itemPath, lev + 1);
 63 |             });
 64 |         }
 65 |     };
 66 | 
 67 |     _processNode(tree, new Immutable.List(), 0);
 68 | 
 69 | 
 70 |     return newTree;
 71 | };
 72 | 
 73 | 
 74 | /**
 75 |  * @param {Immutable.Map} tree
 76 |  * @return {Object} {flat, items}
 77 |  */
 78 | export const getFlatTree = (tree) => {
 79 |     let flat = [];
 80 |     let items = {};
 81 |     let realHeight = 0;
 82 | 
 83 |     function _flatizeTree (item, path, insideCollapsed, lev, info) {
 84 |         const type = item.get('type');
 85 |         const collapsed = item.get('collapsed');
 86 |         const id = item.get('id');
 87 |         const children = item.get('children1');
 88 |         const childrenIds = children ? children.map((child, childId) => childId) : null;
 89 | 
 90 |         let itemsBefore = flat.length;
 91 |         let top = realHeight;
 92 |         flat.push(id);
 93 |         if (!insideCollapsed)
 94 |             realHeight += 1;
 95 |         info.height = (info.height || 0) + 1;
 96 |         if (children) {
 97 |             let subinfo = {};
 98 |             children.map((child, childId) => {
 99 |                 _flatizeTree(child, path.concat(id), insideCollapsed || collapsed, lev + 1, subinfo);
100 |             });
101 |             if (!collapsed) {
102 |                 info.height = (info.height || 0) + (subinfo.height || 0);
103 |             }
104 |         }
105 |         let itemsAfter = flat.length;
106 |         let bottom = realHeight;
107 |         let height = info.height;
108 | 
109 |         items[id] = {
110 |             type: type,
111 |             parent: path.length ? path[path.length-1] : null,
112 |             path: path.concat(id),
113 |             lev: lev,
114 |             leaf: !children,
115 |             index: itemsBefore,
116 |             id: id,
117 |             children: childrenIds,
118 |             _top: itemsBefore,
119 |             _height: (itemsAfter - itemsBefore),
120 |             top: (insideCollapsed ? null : top),
121 |             height: height,
122 |             bottom: (insideCollapsed ? null : top) + height,
123 |             collapsed: collapsed,
124 |             node: item,
125 |         };
126 |     }
127 | 
128 |     _flatizeTree(tree, [], false, 0, {});
129 | 
130 |     for (let i = 0 ; i < flat.length ; i++) {
131 |         let prevId = i > 0 ? flat[i-1] : null;
132 |         let nextId = i < (flat.length-1) ? flat[i+1] : null;
133 |         let item = items[flat[i]];
134 |         item.prev = prevId;
135 |         item.next = nextId;
136 |     }
137 | 
138 |     return {flat, items};
139 | };
140 | 
141 | 
142 | export const getTotalNodesCountInTree = (tree) => {
143 |     if (!tree)
144 |         return -1;
145 |     let cnt = 0;
146 | 
147 |     function _processNode (item, path, lev) {
148 |         const id = item.get('id');
149 |         const children = item.get('children1');
150 |         cnt++;
151 |         if (children) {
152 |             children.map((child, childId) => {
153 |                 _processNode(child, path.concat(id), lev + 1);
154 |             });
155 |         }
156 |     };
157 | 
158 |     _processNode(tree, [], 0);
159 | 
160 |     return cnt;
161 | };
162 | 


--------------------------------------------------------------------------------
/modules/utils/uuid.js:
--------------------------------------------------------------------------------
 1 | // Had to make uuid use a constant seed so it would generate same sequence across runs. This was needed
 2 | // so server side rendering and client side rendering yield same results (e.g. the uuid is used when rendering
 3 | // the concunctions with their name and id)
 4 | var query_builder_seed = 0;
 5 | export default () => {
 6 |     // Generate a random GUID http://stackoverflow.com/a/2117523.
 7 |     const timePart = (new Date().getTime().toString(16)+'FF').substr(0,11);
 8 |     const s = 'ssssssss-xxxx-4xxx-yxxx-x'.replace(/[xys]/g, (c) => {
 9 | //    const r = ;
10 |         const r = c === 's' ? Math.floor(Math.random() * 16) : (query_builder_seed++) & 0xf;
11 |         const v = c === 'x' ? r : (r & 0x3 | 0x8);
12 |         return v.toString(16);
13 |     })+timePart;
14 |     return s;
15 | }
16 | 


--------------------------------------------------------------------------------
/modules/utils/validation.js:
--------------------------------------------------------------------------------
  1 | import {
  2 | 	getFieldConfig, getFieldRawConfig, getWidgetForFieldOp, getOperatorsForField, 
  3 | 	getOperatorConfig, getFieldWidgetConfig, getFieldPath, getFieldPathLabels
  4 | } from './configUtils';
  5 | import {defaultValue} from "../utils/stuff";
  6 | import {defaultRuleProperties, defaultGroupProperties, defaultOperator, defaultOperatorOptions, defaultRoot} from '../utils/defaultUtils';
  7 | import omit from 'lodash/omit';
  8 | import pick from 'lodash/pick';
  9 | import pickBy from 'lodash/pickBy';
 10 | import mapValues from 'lodash/mapValues';
 11 | import Immutable from 'immutable';
 12 | import {_getNewValueForFieldOp} from "../stores/tree";
 13 | 
 14 | 
 15 | export const validateTree = (tree, oldTree, config, oldConfig, removeEmptyGroups = false, removeInvalidRules = false) => {
 16 |     let treeSanitized = false;
 17 | 
 18 | 	let _validateItem = (item, path = []) => {
 19 | 	    const type = item.get('type');
 20 | 	    const id = item.get('id');
 21 | 	    let properties = item.get('properties');
 22 | 	    let children = item.get('children1');
 23 | 	    let oldChildren = children;
 24 | 
 25 | 	    if (type === 'group' && children && children.size) {
 26 | 	        let conjunction = properties.get('conjunction');
 27 | 	        let conjunctionDefinition = config.conjunctions[conjunction];
 28 | 
 29 | 	        //validate children
 30 | 	        let sanitized = false;
 31 | 	        children = children
 32 | 	            .map((currentChild) => _validateItem(currentChild, path.concat(id)));
 33 | 	        if (removeEmptyGroups)
 34 | 	        	children = children.filter((currentChild) => (currentChild != undefined));
 35 | 	        if (oldChildren.size != children.size)
 36 | 	        	sanitized = treeSanitized = true;
 37 | 	        if (!children.size) {
 38 | 	        	if (removeEmptyGroups && path.length) {
 39 | 	        		sanitized = treeSanitized = true;
 40 | 	        		return undefined;
 41 | 	        	}
 42 | 	        }
 43 | 	        if (treeSanitized)
 44 | 	        	item = item.set('children1', children);
 45 | 	        return item;
 46 | 	    } else if (type === 'rule') {
 47 | 	        let field = properties.get('field');
 48 | 	        let operator = properties.get('operator');
 49 | 	        let operatorOptions = properties.get('operatorOptions');
 50 | 	        let valueSrc = properties.get('valueSrc');
 51 | 	        let value = properties.get('value');
 52 | 	        let oldSerialized = {
 53 | 	        	field,
 54 | 	        	operator,
 55 | 	        	operatorOptions: operatorOptions ? operatorOptions.toJS() : {},
 56 | 	        	valueSrc: valueSrc ? valueSrc.toJS() : null,
 57 | 	        	value: value ? value.toJS() : null,
 58 | 	        };
 59 | 	    	let wasValid = field && operator && value && !value.find((v, ind) => (v === undefined));
 60 | 
 61 | 	    	//validate field
 62 | 	        const fieldDefinition = field ? getFieldConfig(field, config) : null;
 63 | 	        if (!fieldDefinition)
 64 | 	        	field = null;
 65 | 	        if (field == null) {
 66 | 	        	properties = ['operator', 'operatorOptions', 'valueSrc', 'value'].reduce((map, key) => map.delete(key), properties);
 67 | 	    		operator = null;
 68 | 	        }
 69 | 	        const typeConfig = fieldDefinition ? config.types[fieldDefinition.type] : null;
 70 | 
 71 | 	    	//validate operator
 72 | 	        operator = properties.get('operator');
 73 | 	        const operatorDefinition = operator ? getOperatorConfig(config, operator, field) : null;
 74 | 	        if (!operatorDefinition)
 75 | 	        	operator = null;
 76 | 	        const availOps = field ? getOperatorsForField(config, field) : [];
 77 | 	        if (availOps.indexOf(operator) == -1)
 78 | 	        	operator = null;
 79 | 	        if (operator == null) {
 80 | 	        	properties = properties.delete('operatorOptions');
 81 | 	        	properties = properties.delete('valueSrc');
 82 | 	        	properties = properties.delete('value');
 83 | 	        }
 84 | 
 85 | 	  		//validate operator options
 86 | 	        operatorOptions = properties.get('operatorOptions');
 87 | 	    	let operatorCardinality = operator ? defaultValue(operatorDefinition.cardinality, 1) : null;
 88 | 	        if (!operator || operatorOptions && !operatorDefinition.options) {
 89 | 	        	operatorOptions = null;
 90 | 	        	properties = properties.delete('operatorOptions');
 91 | 	        } else if (operator && !operatorOptions && operatorDefinition.options) {
 92 | 	        	operatorOptions = defaultOperatorOptions(config, operator, field)
 93 | 	       		properties = properties.set('operatorOptions', operatorOptions);
 94 | 	        }
 95 | 
 96 | 	        //validate values
 97 | 	        valueSrc = properties.get('valueSrc');
 98 | 	        value = properties.get('value');
 99 | 	        let {canReuseValue, newValue, newValueSrc, newValueType} = 
100 |                 _getNewValueForFieldOp(config, oldConfig, properties, field, operator, null);
101 | 	        value = newValue;
102 | 	        valueSrc = newValueSrc;
103 | 	        properties = properties.set('value', value);
104 | 	        properties = properties.set('valueSrc', valueSrc);
105 | 
106 | 	        let newSerialized = {
107 | 	        	field,
108 | 	        	operator,
109 | 	        	operatorOptions: operatorOptions ? operatorOptions.toJS() : {},
110 | 	        	valueSrc: valueSrc ? valueSrc.toJS() : null,
111 | 	        	value: value ? value.toJS() : null,
112 | 	        };
113 | 	        let sanitized = JSON.stringify(oldSerialized) != JSON.stringify(newSerialized);
114 | 	        if (sanitized)
115 | 	        	treeSanitized = true;
116 | 	        let isValid = field && operator && value && !value.find((v, ind) => (v === undefined));
117 | 
118 | 	        if (sanitized && !isValid && removeInvalidRules)
119 | 	        	return undefined;
120 | 
121 | 	        if (sanitized)
122 | 	        	item = item.set('properties', properties);
123 | 	        return item;
124 | 	    } else {
125 | 	    	return item;
126 | 	    }
127 | 	};
128 | 
129 | 	let validatedTree = _validateItem(tree, []);
130 | 	return validatedTree;
131 | 
132 | };
133 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "react-awesome-query-builder",
  3 |   "version": "0.1.48",
  4 |   "main1": "modules",
  5 |   "main": "build/npm/lib",
  6 |   "main2": "build/global/ReactAwesomeQueryBuilder.js",
  7 |   "browserify1": {
  8 |     "transform": [
  9 |       "babelify"
 10 |     ]
 11 |   },
 12 |   "scripts": {
 13 |     "build-global": "rm -rf build/global && NODE_ENV=production webpack modules/index.js build/global/ReactAwesomeQueryBuilder.js && NODE_ENV=production COMPRESS=1 webpack modules/index.js build/global/ReactAwesomeQueryBuilder.min.js && echo \"gzipped, the global build is `gzip -c build/global/ReactAwesomeQueryBuilder.min.js | wc -c` bytes\"",
 14 |     "build-npm": "rm -rf build/npm && babel -d build/npm/lib ./modules && cp README.md build/npm && find build/npm/lib -type d -name __tests__ | xargs rm -rf && node -p 'p=require(\"./package\");p.main=\"lib\";p.scripts=p.devDependencies=undefined;JSON.stringify(p,null,2)' > build/npm/package.json",
 15 |     "prepublish": "npm run build-npm",
 16 |     "build-examples": "cd examples && webpack --config webpack.config.js",
 17 |     "examples": "cd examples && webpack-dev-server --config webpack.config.js -d --hot --inline --display-error-details --colors --history-api-fallback --no-info --port 3001"
 18 |   },
 19 |   "readme": "README.md",
 20 |   "repository": {
 21 |     "type": "git",
 22 |     "url": "https://github.com/ukrbublik/react-awesome-query-builder.git"
 23 |   },
 24 |   "author": "Sebastian Siemssen <fubhy@fubhy.com> (https://github.com/fubhy)",
 25 |   "contributors": [
 26 |     "ukrbubik"
 27 |   ],
 28 |   "license": "MIT",
 29 |   "bugs": {
 30 |     "url": "https://github.com/ukrbublik/react-awesome-query-builder/issues"
 31 |   },
 32 |   "homepage": "https://github.com/ukrbublik/react-awesome-query-builder",
 33 |   "dependencies": {
 34 |     "antd": "^2.12.2",
 35 |     "classnames": "^2.2.5",
 36 |     "clone": "^2.1.1",
 37 |     "immutable": "^3.7.6",
 38 |     "json-stringify-safe": "^5.0.1",
 39 |     "lodash": "^4.6",
 40 |     "moment": "^2.12.0",
 41 |     "prop-types": "^15.6.0",
 42 |     "react-addons-css-transition-group": "^15.0.0",
 43 |     "react-addons-pure-render-mixin": "^15.0.0",
 44 |     "react-addons-shallow-compare": "^15.0.0",
 45 |     "react-redux": "^5.0.0",
 46 |     "redux": "^3.7.2",
 47 |     "transit-immutable-js": "^0.7.0",
 48 |     "transit-js": "^0.8.846",
 49 |     "rc-align": "2.3.5"
 50 |   },
 51 |   "peerDependencies": {
 52 |     "react": "^0.14.6 || ^15.0.0",
 53 |     "react-addons-css-transition-group": "^0.14.6 || ^15.0.0",
 54 |     "react-addons-pure-render-mixin": "^0.14.6 || ^15.0.0",
 55 |     "react-addons-shallow-compare": "^0.14.7 || ^15.0.0",
 56 |     "react-dom": "^0.14.6 || ^15.0.0",
 57 |     "react-redux": "^4.0.6 || ^5.0.0",
 58 |     "redux": "^3.0.5"
 59 |   },
 60 |   "devDependencies": {
 61 |     "babel": "^6.3.26",
 62 |     "babel-cli": "^6.4.0",
 63 |     "babel-core": "^6.3.26",
 64 |     "babel-eslint": "^5.0.0-beta6",
 65 |     "babel-loader": "^6.2.1",
 66 |     "babel-plugin-import": "^1.2.1",
 67 |     "babel-plugin-transform-decorators-legacy": "^1.3.4",
 68 |     "babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
 69 |     "babel-preset-es2015": "^6.3.13",
 70 |     "babel-preset-react": "^6.3.13",
 71 |     "babel-preset-stage-0": "^6.3.13",
 72 |     "babel-runtime": "^6.3.13",
 73 |     "css-loader": "^0.15.1",
 74 |     "eslint": "^0.24.0",
 75 |     "eslint-config-airbnb": "0.0.6",
 76 |     "eslint-plugin-react": "^2.6.2",
 77 |     "expect": "^1.15.2",
 78 |     "file-loader": "^0.8.5",
 79 |     "history": "^1.13",
 80 |     "karma": "^0.13.22",
 81 |     "karma-chrome-launcher": "^0.2.2",
 82 |     "karma-cli": "^0.1.2",
 83 |     "karma-mocha": "^0.2.2",
 84 |     "karma-sourcemap-loader": "^0.3.7",
 85 |     "karma-webpack": "^1.7.0",
 86 |     "less": "^2.6",
 87 |     "less-loader": "^2.2",
 88 |     "mocha": "^2.2.5",
 89 |     "node-sass": "^4.5.3",
 90 |     "react": "^15.0.0",
 91 |     "react-dom": "^15.0.0",
 92 |     "react-hot-loader": "^1.3.1",
 93 |     "rf-changelog": "^0.4.0",
 94 |     "sass-loader": "^4.1.1",
 95 |     "sourcemap": "^0.1.0",
 96 |     "style-loader": "^0.12.3",
 97 |     "url-loader": "^0.5.7",
 98 |     "webpack": "^1.12.13",
 99 |     "webpack-dev-server": "^1.14"
100 |   }
101 | }
102 | 


--------------------------------------------------------------------------------
/scripts/gh-pages.sh:
--------------------------------------------------------------------------------
 1 | npm run build-global
 2 | npm run build-examples
 3 | rm -rf /tmp/react-awesome-query-builder
 4 | mkdir /tmp/react-awesome-query-builder
 5 | mkdir /tmp/react-awesome-query-builder/gh-pages
 6 | cp ./examples/bundle.js ./examples/bundle.js.map /tmp/react-awesome-query-builder/gh-pages
 7 | git checkout gh-pages
 8 | cp -R /tmp/react-awesome-query-builder/gh-pages/* .
 9 | git add ./bundle.js
10 | git add ./bundle.js.map
11 | git commit -m "update"
12 | git checkout master
13 | 
14 | 


--------------------------------------------------------------------------------
/tests/webpack.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 
3 | var context = require.context('./', true, /-test\.js$/); //make sure you have your directory and regex test set correctly!
4 | context.keys().forEach(context);
5 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack');
 2 | 
 3 | var plugins = [
 4 |     new webpack.optimize.OccurenceOrderPlugin(),
 5 |     new webpack.DefinePlugin({
 6 |         'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
 7 |     })
 8 | ];
 9 | 
10 | if (process.env.COMPRESS) {
11 |     plugins.push(
12 |         new webpack.optimize.UglifyJsPlugin({
13 |             output: {
14 |                 comments: false
15 |             },
16 |             compressor: {
17 |                 screw_ie8: true,
18 |                 warnings: false
19 |             }
20 |         })
21 |     );
22 | }
23 | 
24 | module.exports = {
25 |     output: {
26 |         library: 'ReactQueryBuilder',
27 |         libraryTarget: 'umd'
28 |     },
29 |     _externals: [{
30 |         react: {
31 |             root: 'React',
32 |             commonjs2: 'react',
33 |             commonjs: 'react',
34 |             amd: 'react'
35 |         },
36 |         immutable: {
37 |             root: 'Immutable',
38 |             commonjs2: 'immutable',
39 |             commonjs: 'immutable',
40 |             amd: 'immutable'
41 |         }
42 |     }],
43 |     module: {
44 |         loaders: [
45 |             {
46 |                 test: /\.jsx?$/,
47 |                 loaders: ['babel-loader'],
48 |                 exclude: /node_modules/
49 |             },
50 |             {
51 |                 test: /\.css$/,
52 |                 loader: "style!css"
53 |             },
54 |             {
55 |                 test: /\.scss$/,
56 |                 loader: "style!css!sass"
57 |             },
58 |             {
59 |                 test: /\.less$/,
60 |                 loader: "style!css!less"
61 |             }
62 |         ],
63 |     },
64 |     resolve: {
65 |         extensions: ['', '.js'],
66 |         modulesDirectories: [
67 |             'node_modules',
68 |             __dirname,
69 |             __dirname + '/node_modules',
70 |         ],
71 |         alias: {
72 |             'ReactQueryBuilder': __dirname + 'modules/',
73 |             'immutable': 'immutable'
74 |         }
75 |     },
76 |     node: {
77 |         Buffer: false
78 |     },
79 |     plugins: plugins
80 | };
81 | 


--------------------------------------------------------------------------------