@elliemae/ds-query-builder 2.3.0-alpha.9 → 2.3.0-next.11

package/cjs/components/QueryBuilderImpl.js

@@ -0,0 +1,309 @@
+'use strict';
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var React = require('react');
+var Nestable = require('./Nestable/Nestable.js');
+var QueryBuilderContext = require('./QueryBuilderContext/QueryBuilderContext.js');
+var types = require('./helpers/types.js');
+var store = require('./helpers/store.js');
+var AndOrController = require('./AndOrController/AndOrController.js');
+var QueryBuilderItem = require('./QueryBuilderItem/QueryBuilderItem.js');
+var DisplayOutput = require('./DisplayOutput/DisplayOutput.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+const _excluded = ["format"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+class QueryBuilderImpl extends React.Component {
+  constructor(props) {
+    super(props);
+    this.isDraggableItem = true;
+
+    this.onOrderDragAndDrop = (items, item) => {
+      const newFilters = this.store.onOrderDragAndDrop(items, item);
+      this.sendCall('reOrderOnDragAndDrop', {
+        items
+      });
+      this.sendChange(newFilters);
+    };
+
+    this.onAddFilterToGroup = idGroup => {
+      const newFilters = this.store.addFilter(idGroup);
+      this.sendCall('onAddFilterToGroup', {
+        idGroup
+      });
+      this.sendChange(newFilters);
+    };
+
+    this.onAddFilter = (idGroup, idFilter) => {
+      const {
+        addFilterMethod
+      } = this.props;
+      const newFilters = addFilterMethod === types.QB_ADD_FILTER_METHOD_TYPES.IN_PLACE ? this.store.addFilterNextToFilterId(idGroup, idFilter) : this.onAddFilterToGroup(idGroup);
+      this.sendCall('onAddFilter', {
+        idGroup,
+        idFilter
+      });
+      this.sendChange(newFilters);
+    };
+
+    this.onAddRuleContainer = (idGroup, idFilter) => {
+      const {
+        groupFilterMethod
+      } = this.props;
+      const newFilters = groupFilterMethod === types.QB_GROUP_FILTER_METHOD_TYPES.IN_PLACE ? this.store.addRuleContainerInPlace(idGroup, idFilter) : this.store.addRuleContainer(idGroup, idFilter);
+      this.sendCall('onAddRuleContainer', {
+        idGroup,
+        idFilter
+      });
+      this.sendChange(newFilters);
+    };
+
+    this.onRemoveFilter = idFilter => {
+      const newFilters = this.store.onRemoveFilter(idFilter);
+      this.sendCall('onRemoveFilter', {
+        idFilter
+      });
+      this.sendChange(newFilters);
+    };
+
+    this.handleFieldChange = data => {
+      const {
+        fieldsSharedActions
+      } = this.props;
+      const newFilters = this.store.changeFilter(_objectSpread(_objectSpread({}, data), {}, {
+        fieldsSharedActions
+      }));
+      this.sendCall('handleFieldChange', {
+        data
+      });
+      this.sendChange(newFilters);
+    };
+
+    this.handleRuleContainerOperator = (idGroup, value) => {
+      const newFilters = this.store.changeGroupOperator(idGroup, value);
+      this.sendCall('handleRuleContainerOperator', {
+        idGroup,
+        value
+      });
+      this.sendChange(newFilters);
+    };
+
+    this.handleRuleContainerUnGroup = idGroup => {
+      const newFilters = this.store.unGroup(idGroup);
+      this.sendCall('handleRuleContainerUnGroup', {
+        idGroup
+      });
+      this.sendChange(newFilters);
+    };
+
+    this.handleDropFilter = (filter, dragTo) => {
+      const {
+        position: oldPosition,
+        idGroup,
+        idFilter
+      } = filter;
+      const {
+        position: newPosition,
+        targetIdGroup
+      } = dragTo;
+      const newFilters = this.store.reOrderFilter(idFilter, idGroup, oldPosition, newPosition, targetIdGroup);
+      this.sendCall('handleDropFilter', {
+        filter,
+        dragTo
+      });
+      this.sendChange(newFilters);
+    };
+
+    this.handleDropGroup = (group, dragTo) => {
+      const {
+        position: oldPosition,
+        idFilter,
+        idGroup
+      } = group;
+      const {
+        position: newPosition,
+        targetIdGroup
+      } = dragTo;
+      const newFilters = this.store.reOrderFilter(idFilter, idGroup, oldPosition, newPosition, targetIdGroup);
+      this.sendCall('handleDropGroup', {
+        group,
+        dragTo
+      });
+      this.sendChange(newFilters);
+    };
+
+    this.handleDrop = (dragElement, dragTo) => {
+      const {
+        type
+      } = dragElement;
+      if (type === types.QB_DRAG_TYPES.FILTER) return this.handleDropFilter(dragElement, dragTo);
+      return this.handleDropGroup(dragElement, dragTo);
+    };
+
+    this.sendChange = _ref => {
+      let {
+        format
+      } = _ref,
+          newFilters = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+      this.setState(_objectSpread({
+        format
+      }, newFilters));
+      const {
+        onChange
+      } = this.props;
+      onChange(format, newFilters);
+    };
+
+    this.sendCall = (action, data) => {
+      const {
+        [action]: callback
+      } = this.props;
+      if (callback) callback(data);
+    };
+
+    this.setDraggableItems = drag => {
+      this.isDraggableItem = true;
+
+      try {
+        const ua = window.navigator.userAgent;
+        const msie = ua.indexOf('MSIE '); // eslint-disable-next-line no-useless-escape
+
+        if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
+          const {
+            isDraggableItem
+          } = this.state;
+
+          if (drag !== isDraggableItem) {
+            this.setState({
+              isDraggableItem: drag
+            });
+          }
+
+          this.isDraggableItem = drag;
+        }
+      } catch (error) {
+        this.isDraggableItem = true;
+      }
+    };
+
+    this.store = new store(props.init, props.format);
+    this.state = this.store.getInitialState();
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    if (props.init && props.init.step !== undefined && Number.isInteger(props.init.step) && props.init.step !== state.step) {
+      const store$1 = new store(props.init, props.format);
+      QueryBuilderImpl.recalculateStore = store$1;
+      return store$1.getInitialState();
+    }
+
+    return null;
+  }
+
+  componentDidUpdate() {
+    if (QueryBuilderImpl.recalculateStore) {
+      this.store = QueryBuilderImpl.recalculateStore;
+      QueryBuilderImpl.recalculateStore = null;
+    }
+  }
+
+  render() {
+    const {
+      mapGroups,
+      main,
+      mapFilters,
+      step,
+      items,
+      format
+    } = this.state;
+    const {
+      containerProps,
+      ruleContainerClassName,
+      fields,
+      displayFixedOutput,
+      displayOutput,
+      displayOutputLabel,
+      singleRow,
+      toolTipZIndex
+    } = this.props; // const { children } = items[0]
+
+    const {
+      condition
+    } = mapGroups[main];
+    return /*#__PURE__*/_jsx__default["default"](QueryBuilderContext.QueryBuilderContext.Provider, {
+      value: {
+        toolTipZIndex,
+        fields,
+        handleDrop: this.handleDrop,
+        handleFieldChange: this.handleFieldChange,
+        handleRuleContainerOperator: this.handleRuleContainerOperator,
+        handleRuleContainerUnGroup: this.handleRuleContainerUnGroup,
+        mapFilters,
+        mapGroups,
+        onAddFilter: this.onAddFilter,
+        onAddFilterToGroup: this.onAddFilterToGroup,
+        onAddRuleContainer: this.onAddRuleContainer,
+        onRemoveFilter: this.onRemoveFilter,
+        ruleContainerClassName,
+        showDragController: false,
+        format,
+        step,
+        items,
+        isDraggableItem: this.isDraggableItem,
+        setDraggableItems: this.setDraggableItems,
+        singleRow
+      }
+    }, void 0, /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({}, containerProps), {}, {
+      className: "nested-main-group ".concat(condition !== true ? 'is-or-group' : 'is-and-groupL', " ").concat(singleRow ? 'query-main-single-row' : 'query-main-multiple-row'),
+      children: [/*#__PURE__*/_jsx__default["default"](Nestable, {
+        isAndItem: condition === true,
+        isDraggableItem: this.isDraggableItem,
+        isOrItem: condition !== true,
+        items: items,
+        onChange: this.onOrderDragAndDrop,
+        renderItem: QueryBuilderItem,
+        setDraggableItems: this.setDraggableItems,
+        step: step,
+        singleRow: singleRow
+      }), !singleRow && /*#__PURE__*/_jsx__default["default"]("div", {
+        className: "rule-container-options"
+      }, void 0, /*#__PURE__*/_jsx__default["default"](AndOrController, {
+        allowUnGroup: false,
+        condition: condition,
+        handleRuleContainerOperator: value => this.handleRuleContainerOperator(main, value),
+        handleRuleContainerUnGroup: () => this.handleRuleContainerUnGroup(main),
+        isMain: true,
+        onAddFilter: () => this.onAddFilterToGroup(main),
+        showDragController: false,
+        step: step,
+        toolTipZIndex: toolTipZIndex
+      }))]
+    })), (displayOutput || displayFixedOutput) && /*#__PURE__*/_jsx__default["default"](DisplayOutput, {
+      displayFixedOutput: displayFixedOutput,
+      hideLabel: displayOutputLabel.hide,
+      showLabel: displayOutputLabel.show,
+      show: displayOutputLabel.open
+    }));
+  }
+
+}
+
+module.exports = QueryBuilderImpl;

package/cjs/components/QueryBuilderItem/QueryBuilderItem.js

@@ -0,0 +1,90 @@
+'use strict';
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('react');
+var QueryBuilderContext = require('../QueryBuilderContext/QueryBuilderContext.js');
+var types = require('../helpers/types.js');
+var AndOrController = require('../AndOrController/AndOrController.js');
+var QueryBuilderRow = require('../QueryBuilderRow/QueryBuilderRow.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const QueryBuilderItem = _ref => {
+  let {
+    item
+  } = _ref;
+  const {
+    element
+  } = item;
+  const {
+    type,
+    idFilter,
+    idGroup,
+    condition
+  } = element;
+  return /*#__PURE__*/_jsx__default["default"](QueryBuilderContext.QueryBuilderContext.Consumer, {}, void 0, _ref2 => {
+    let {
+      fields,
+      handleFieldChange,
+      onAddFilter,
+      onAddFilterToGroup,
+      onAddRuleContainer,
+      onRemoveFilter,
+      showDragController,
+      handleRuleContainerOperator,
+      handleRuleContainerUnGroup,
+      step,
+      items,
+      isDraggableItem,
+      setDraggableItems,
+      singleRow,
+      toolTipZIndex
+    } = _ref2;
+
+    if (type === types.QB_DRAG_TYPES.FILTER) {
+      return /*#__PURE__*/jsxRuntime.jsx(QueryBuilderRow, _objectSpread(_objectSpread({}, element), {}, {
+        fields: fields,
+        handleFieldChange: handleFieldChange,
+        isDraggableItem: isDraggableItem,
+        items: items,
+        onAddFilter: () => onAddFilter(idGroup, idFilter),
+        onAddRuleContainer: () => onAddRuleContainer(idGroup, idFilter),
+        onRemoveFilter: () => onRemoveFilter(idFilter),
+        setDraggableItems: setDraggableItems,
+        showDragController: showDragController,
+        step: step,
+        singleRow: singleRow,
+        toolTipZIndex: toolTipZIndex
+      }));
+    }
+
+    if (singleRow) return null;
+    return /*#__PURE__*/_jsx__default["default"](AndOrController, {
+      allowUnGroup: true,
+      condition: condition,
+      handleRuleContainerOperator: value => handleRuleContainerOperator(idGroup, value),
+      handleRuleContainerUnGroup: () => handleRuleContainerUnGroup(idGroup),
+      multipleSize: false,
+      onAddFilter: () => onAddFilterToGroup(idGroup),
+      showDragController: true,
+      step: step,
+      toolTipZIndex: toolTipZIndex
+    });
+  });
+};
+
+module.exports = QueryBuilderItem;

package/cjs/components/QueryBuilderRow/QueryBuilderRow.js

@@ -0,0 +1,276 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var React = require('react');
+var dsIcons = require('@elliemae/ds-icons');
+var DSTooltip = require('@elliemae/ds-tooltip');
+var dsClassnames = require('@elliemae/ds-classnames');
+var dependencies = require('../helpers/dependencies.js');
+var ConditionController = require('../ConditionController/ConditionController.js');
+var DragControllerRow = require('../DragControllerRow/DragControllerRow.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const RenderField = _ref => {
+  let {
+    target,
+    component,
+    valueProp,
+    additionalInfo,
+    handleMouseEnterInput,
+    handleMouseLeaveInput,
+    onChangeHandler,
+    hasError
+  } = _ref;
+  const ref = React__default["default"].useRef();
+  const id = React__default["default"].useMemo(() => "el_".concat(String.fromCharCode(65 + Math.floor(Math.random() * 26))), []);
+  return /*#__PURE__*/_jsx__default["default"]("div", {
+    className: "em-ds-query-builder-row-input child-type-".concat(target, " ").concat(hasError && hasError.error ? 'row-input-error' : ''),
+    onMouseDownCapture: () => {
+      var _ref$current;
+
+      // eslint-disable-next-line no-underscore-dangle
+      const _refInput = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector("#".concat(id));
+
+      if (_refInput && _refInput.focus) setTimeout(_refInput.focus());
+      handleMouseEnterInput();
+    },
+    onMouseEnter: () => handleMouseEnterInput(),
+    onMouseLeave: () => handleMouseLeaveInput()
+  }, void 0, /*#__PURE__*/jsxRuntime.jsx("div", {
+    ref: ref,
+    className: "em-ds-query-builder-row__input-controller",
+    children: /*#__PURE__*/React__default["default"].cloneElement(component, {
+      id,
+      onChange: (e, extraData) => onChangeHandler(e, target, extraData),
+      value: valueProp != null ? valueProp : '',
+      checked: valueProp === true,
+      additionalInfo: additionalInfo ? additionalInfo[target] : additionalInfo || {},
+      'aria-invalid': Boolean(hasError)
+    })
+  }), hasError && hasError.errorMessage ? /*#__PURE__*/_jsx__default["default"]("div", {
+    style: {
+      width: '40px'
+    }
+  }, void 0, /*#__PURE__*/_jsx__default["default"](DSTooltip.DSTooltipV3, {
+    text: hasError.errorMessage
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
+    tabIndex: 0,
+    className: "row-icon-alert",
+    "data-testid": "qb-error-state-icon",
+    role: "alert"
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsIcons.AlertsDetail, {
+    width: 20,
+    height: 20,
+    color: ['danger', 900],
+    title: hasError.errorMessage
+  })))) : null); // return React.useMemo(
+  //   () => (
+  //     <div
+  //       className={`em-ds-query-builder-row-input child-type-${target}`}
+  //       onMouseDownCapture={() => {
+  //         // eslint-disable-next-line no-underscore-dangle
+  //         const _refInput = ref.current.querySelector(`#${id}`);
+  //         if (_refInput && _refInput.focus) setTimeout(_refInput.focus());
+  //         handleMouseEnterInput();
+  //       }}
+  //       onMouseEnter={() => handleMouseEnterInput()}
+  //       onMouseLeave={() => handleMouseLeaveInput()}
+  //     >
+  //       <div ref={ref} className="em-ds-query-builder-row__input-controller">
+  //         {React.cloneElement(component, {
+  //           id,
+  //           onChange: (e, extraData) => onChangeHandler(e, target, extraData),
+  //           value: valueProp != null ? valueProp : '',
+  //           checked: valueProp === true,
+  //           additionalInfo: additionalInfo ? additionalInfo[target] : {},
+  //         })}
+  //       </div>
+  //     </div>
+  //   ),
+  //   [target, component, valueProp, additionalInfo],
+  // );
+};
+
+class QueryBuilderRow extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.handleMouseEnterRow = () => {};
+
+    this.handleMouseLeaveRow = () => {
+      this.handleTooltipRow(false);
+    };
+
+    this.handleMouseEnterInput = () => {
+      const {
+        setDraggableItems
+      } = this.props;
+      setDraggableItems(false);
+    };
+
+    this.handleMouseLeaveInput = () => {
+      const {
+        setDraggableItems
+      } = this.props;
+      setDraggableItems(true);
+    };
+
+    this.handleTooltipRow = isOpen => {
+      this.setState({
+        isOpen
+      });
+    };
+
+    this.state = {
+      isOpen: false
+    };
+  }
+
+  onChangeHandler(e, target, extraData, hasError) {
+    const {
+      handleFieldChange,
+      idFilter,
+      idGroup,
+      additionalInfo,
+      field,
+      operator,
+      value
+    } = this.props;
+    let eventValue = e;
+
+    if (e && e.target) {
+      const {
+        value,
+        checked
+      } = e.target;
+      if (value || value === '' || typeof value === 'boolean') eventValue = value;else eventValue = checked || e;
+    }
+
+    handleFieldChange({
+      [target]: eventValue,
+      idFilter,
+      idGroup,
+      additionalInfo: _objectSpread(_objectSpread({}, additionalInfo), {}, {
+        [target]: extraData,
+        ["".concat(target, "_error")]: hasError,
+        ["".concat(target, "_touched")]: true
+      }),
+      target
+    });
+  }
+
+  render() {
+    const {
+      isOpen
+    } = this.state;
+    const {
+      fields,
+      onAddFilter,
+      onRemoveFilter,
+      onAddRuleContainer,
+      field,
+      operator,
+      value,
+      additionalInfo,
+      items,
+      singleRow,
+      toolTipZIndex,
+      error
+    } = this.props;
+    const {
+      cssClassName,
+      classNameBlock,
+      classNameElement
+    } = dsClassnames.convertPropToCssClassName('query-builder-row', isOpen ? 'has-open-tooltip' : 'has-close-tooltip', singleRow ? 'is-single-row' : 'is-multiple-row');
+    const test = dependencies.resolveDependencies({
+      field,
+      operator,
+      value,
+      additionalInfo
+    }, fields);
+    const gridTemplateColumns = ['24px', ...test.map(r => {
+      if (r.handleWidth) {
+        return r.handleWidth(this.props[r.target], {
+          field,
+          operator,
+          value,
+          additionalInfo
+        });
+      }
+
+      return 'minmax(0, 1fr)';
+    }), '30px'].join(' ');
+    return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: /*#__PURE__*/_jsx__default["default"]("div", {
+        className: cssClassName,
+        onMouseEnter: this.handleMouseEnterRow,
+        onMouseLeave: this.handleMouseLeaveRow,
+        style: {
+          gridTemplateColumns
+        }
+      }, void 0, !singleRow && /*#__PURE__*/_jsx__default["default"](DragControllerRow, {
+        className: classNameElement('drag-controller'),
+        onMouseDownCapture: () => this.handleMouseLeaveInput()
+      }), test.map(renderField => {
+        const {
+          target,
+          component
+        } = renderField;
+        const {
+          [target]: valueProp
+        } = this.props;
+        const isTouched = additionalInfo && additionalInfo["".concat(target, "_touched")];
+        const hasError = renderField && renderField.validation ? renderField.validation(valueProp, {
+          field,
+          operator,
+          value,
+          additionalInfo
+        }) : false;
+        return /*#__PURE__*/_jsx__default["default"](RenderField, {
+          component: component,
+          target: target,
+          valueProp: valueProp,
+          onChangeHandler: (e, target, extraData) => {
+            this.onChangeHandler(e, target, extraData, hasError);
+          },
+          handleMouseEnterInput: this.handleMouseEnterInput,
+          handleMouseLeaveInput: this.handleMouseLeaveInput,
+          additionalInfo: additionalInfo,
+          hasError: isTouched && hasError
+        });
+      }), !singleRow && /*#__PURE__*/_jsx__default["default"]("div", {
+        className: classNameBlock('controller')
+      }, void 0, /*#__PURE__*/_jsx__default["default"](ConditionController, {
+        handleTooltipRow: this.handleTooltipRow,
+        isOpen: isOpen,
+        items: items,
+        onAddFilter: onAddFilter,
+        onAddRuleContainer: onAddRuleContainer,
+        onRemoveFilter: onRemoveFilter,
+        toolTipZIndex: toolTipZIndex
+      })))
+    });
+  }
+
+}
+
+module.exports = QueryBuilderRow;