Pass additional data to Rule children (#503)

* pass ruleID down to operator

* add fieldConfig to be returned from operator's getMeta to be passed down as renderProps

* pass rule id to Field and Widget

* prop value shortcut

* bump version 4.5.2

Co-authored-by: Daniel Roytman <daniel.roytman@forescout.com>

Author: danyrojj

modules/components/item/Rule.jsx

@@ -119,6 +119,7 @@ class Rule extends PureComponent {
         setField={!immutableFieldsMode ? this.props.setField : dummyFn}
         parentField={this.props.parentField}
         readonly={immutableFieldsMode}
+        id={this.props.id}
       />;
     }
 
@@ -140,6 +141,7 @@ class Rule extends PureComponent {
         showOperatorLabel={showOperatorLabel}
         selectedFieldWidgetConfig={selectedFieldWidgetConfig}
         readonly={immutableOpsMode}
+        id={this.props.id}
       />;
     }
 
@@ -162,6 +164,7 @@ class Rule extends PureComponent {
         setValue={!immutableValuesMode ? this.props.setValue : dummyFn}
         setValueSrc={!immutableValuesMode ? this.props.setValueSrc : dummyFn}
         readonly={immutableValuesMode}
+        id={this.props.id}
       />;
 
       return (

modules/components/rule/Field.jsx

@@ -122,9 +122,10 @@ export default class Field extends PureComponent {
     }
 
     render() {
-      const {config, customProps, setField, readonly} = this.props;
+      const {config, customProps, setField, readonly,id} = this.props;
       const {renderField} = config.settings;
       const renderProps = {
+        id,
         config, 
         customProps, 
         readonly,

modules/components/rule/FieldWrapper.jsx

@@ -5,7 +5,7 @@ import {Col} from "../utils";
 
 export default class FieldWrapper extends PureComponent {
   render() {
-    const {config, selectedField, setField, parentField, classname, readonly} = this.props;
+    const {config, selectedField, setField, parentField, classname, readonly,id} = this.props;
     return (
       <Col className={classname}>
         { config.settings.showLabels
@@ -18,6 +18,7 @@ export default class FieldWrapper extends PureComponent {
           setField={setField}
           customProps={config.settings.customFieldSelectProps}
           readonly={readonly}
+          id={id}
         />
       </Col>
     );

modules/components/rule/Operator.jsx

@@ -58,7 +58,7 @@ export default class Operator extends PureComponent {
 
     return {
       placeholder, items,
-      selectedKey, selectedKeys, selectedPath, selectedLabel, selectedOpts
+      selectedKey, selectedKeys, selectedPath, selectedLabel, selectedOpts,fieldConfig
     };
   }
 
@@ -78,9 +78,10 @@ export default class Operator extends PureComponent {
   }
 
   render() {
-    const {config, customProps, setOperator, readonly} = this.props;
+    const {config, customProps, setOperator, readonly,id} = this.props;
     const {renderOperator} = config.settings;
     const renderProps = {
+      id,
       config, 
       customProps, 
       readonly,

modules/components/rule/OperatorWrapper.jsx

@@ -7,7 +7,7 @@ export default class OperatorWrapper extends PureComponent {
   render() {
     const {
       config, selectedField, selectedOperator, setOperator, 
-      selectedFieldPartsLabels, showOperator, showOperatorLabel, selectedFieldWidgetConfig, readonly
+      selectedFieldPartsLabels, showOperator, showOperatorLabel, selectedFieldWidgetConfig, readonly,id
     } = this.props;
     const operator = showOperator
             && <Col key={"operators-for-"+(selectedFieldPartsLabels || []).join("_")} className="rule--operator">
@@ -21,6 +21,7 @@ export default class OperatorWrapper extends PureComponent {
                 selectedOperator={selectedOperator}
                 setOperator={setOperator}
                 readonly={readonly}
+                id={id}
               />
             </Col>;
     const hiddenOperator = showOperatorLabel

modules/components/rule/Widget.jsx

@@ -26,6 +26,7 @@ export default class Widget extends PureComponent {
     operator: PropTypes.string,
     readonly: PropTypes.bool,
     asyncListValues: PropTypes.array,
+    id: PropTypes.string,
     //actions
     setValue: PropTypes.func,
     setValueSrc: PropTypes.func,
@@ -171,13 +172,13 @@ export default class Widget extends PureComponent {
   }
 
   renderWidget = (delta, meta, props) => {
-    const {config, isFuncArg, leftField, operator, value: values, valueError, readonly, parentField, parentFuncs} = props;
+    const {config, isFuncArg, leftField, operator, value: values, valueError, readonly, parentField, parentFuncs, id} = props;
     const {settings} = config;
     const { widgets, iValues, aField } = meta;
     const value = isFuncArg ? iValues : values;
     const field = isFuncArg ? leftField : aField;
     const {valueSrc, valueLabel} = widgets[delta];
-
+ 
     const widgetLabel = settings.showLabels
       ? <label className="rule--label">{valueLabel.label}</label>
       : null;
@@ -186,6 +187,7 @@ export default class Widget extends PureComponent {
       <div key={"widget-"+field+"-"+delta} className="widget--widget">
         {valueSrc == "func" ? null : widgetLabel}
         <WidgetFactory
+          id={id}
           valueSrc={valueSrc}
           delta={delta}
           value={value}

modules/components/rule/WidgetFactory.jsx

@@ -6,7 +6,7 @@ export default ({
   value: immValue, valueError: immValueError, asyncListValues,
   isSpecialRange, fieldDefinition,
   widget, widgetDefinition, widgetValueLabel, valueLabels, textSeparators, setValueHandler,
-  config, field, operator, readonly, parentField, parentFuncs,
+  config, field, operator, readonly, parentField, parentFuncs, id
 }) => {
   const {factory: widgetFactory, ...fieldWidgetProps} = widgetDefinition;
   const isConst = isFuncArg && fieldDefinition.valueSources && fieldDefinition.valueSources.length == 1 && fieldDefinition.valueSources[0] == "const";
@@ -45,6 +45,7 @@ export default ({
     setValue: setValueHandler,
     readonly: readonly,
     asyncListValues: asyncListValues,
+    id,
   });
 
   if (widget == "field") {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-awesome-query-builder",
-  "version": "4.5.1",
+  "version": "4.5.2",
   "description": "User-friendly query builder for React. Demo: https://ukrbublik.github.io/react-awesome-query-builder",
   "keywords": [
     "query-builder",