dtable-statistic 4.0.2-test-2

package/es/components/dtable-select.js

@@ -0,0 +1,104 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import Select, { components } from 'react-select';
+import { MenuSelectStyle } from '../constants';
+var DropdownIndicator = function DropdownIndicator(props) {
+  return components.DropdownIndicator && /*#__PURE__*/React.createElement(components.DropdownIndicator, props, /*#__PURE__*/React.createElement("span", {
+    className: "dtable-font dtable-icon-drop-down",
+    style: {
+      fontSize: '12px'
+    }
+  }));
+};
+var MenuList = function MenuList(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    onClick: function onClick(e) {
+      return e.nativeEvent.stopImmediatePropagation();
+    },
+    onMouseDown: function onMouseDown(e) {
+      return e.nativeEvent.stopImmediatePropagation();
+    }
+  }, /*#__PURE__*/React.createElement(components.MenuList, props, props.children));
+};
+var Option = function Option(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    style: props.data.style
+  }, /*#__PURE__*/React.createElement(components.Option, props));
+};
+var DTableSelect = /*#__PURE__*/function (_React$Component) {
+  _inherits(DTableSelect, _React$Component);
+  var _super = _createSuper(DTableSelect);
+  function DTableSelect() {
+    var _this;
+    _classCallCheck(this, DTableSelect);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _this.getMenuPortalTarget = function () {
+      var menuPortalTarget = _this.props.menuPortalTarget;
+      return document.querySelector(menuPortalTarget);
+    };
+    return _this;
+  }
+  _createClass(DTableSelect, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        options = _this$props.options,
+        onChange = _this$props.onChange,
+        value = _this$props.value,
+        isSearchable = _this$props.isSearchable,
+        placeholder = _this$props.placeholder,
+        isMulti = _this$props.isMulti,
+        menuPosition = _this$props.menuPosition,
+        isClearable = _this$props.isClearable,
+        noOptionsMessage = _this$props.noOptionsMessage,
+        classNamePrefix = _this$props.classNamePrefix,
+        innerRef = _this$props.innerRef,
+        isDisabled = _this$props.isDisabled;
+      return /*#__PURE__*/React.createElement(Select, {
+        value: value,
+        isDisabled: isDisabled,
+        ref: innerRef,
+        onChange: onChange,
+        options: options,
+        isMulti: isMulti,
+        classNamePrefix: classNamePrefix,
+        styles: MenuSelectStyle,
+        components: {
+          Option: Option,
+          DropdownIndicator: DropdownIndicator,
+          MenuList: MenuList
+        },
+        placeholder: placeholder,
+        isSearchable: isSearchable,
+        isClearable: isClearable,
+        menuPosition: menuPosition || 'fixed' // when use default menuPosition(absolute), menuPortalTarget is unnecessary.
+        ,
+        menuShouldScrollIntoView: true,
+        menuPortalTarget: this.getMenuPortalTarget(),
+        captureMenuScroll: false,
+        noOptionsMessage: noOptionsMessage
+      });
+    }
+  }]);
+  return DTableSelect;
+}(React.Component);
+DTableSelect.defaultProps = {
+  options: [],
+  value: {},
+  isDisabled: false,
+  isSearchable: false,
+  isClearable: false,
+  placeholder: '',
+  isMulti: false,
+  menuPortalTarget: '.modal',
+  noOptionsMessage: function noOptionsMessage() {
+    return null;
+  }
+};
+export default DTableSelect;

package/es/components/index.js

@@ -0,0 +1,11 @@
+import CommonAddTool from './common-add-tool';
+import DTablePopover from './dtable-popover';
+import DtableSearchInput from './dtable-search-input';
+import DTableSelect from './dtable-select';
+import Loading from './loading';
+import ModalPortal from './modal-portal';
+import NewTableDialog from './dialog/new-table-dialog';
+import SeaTableRadio from './seatable-radio';
+import Select from './select';
+import toaster from './toast';
+export { toaster, CommonAddTool, DTablePopover, DtableSearchInput, DTableSelect, Loading, ModalPortal, NewTableDialog, SeaTableRadio, Select };

package/es/components/loading.js

@@ -0,0 +1,8 @@
+import React from 'react';
+function Loading() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return /*#__PURE__*/React.createElement("span", Object.assign({}, props, {
+    className: "loading-icon loading-tip"
+  }));
+}
+export default Loading;

package/es/components/modal-portal.js

@@ -0,0 +1,36 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import ReactDOM from 'react-dom';
+var modalRoot = document.getElementById('modal-wrapper');
+var ModalPortal = /*#__PURE__*/function (_React$Component) {
+  _inherits(ModalPortal, _React$Component);
+  var _super = _createSuper(ModalPortal);
+  function ModalPortal(props) {
+    var _this;
+    _classCallCheck(this, ModalPortal);
+    _this = _super.call(this, props);
+    _this.el = document.createElement('div');
+    return _this;
+  }
+  _createClass(ModalPortal, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      modalRoot.appendChild(this.el);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      modalRoot.removeChild(this.el);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return ReactDOM.createPortal(this.props.children, this.el);
+    }
+  }]);
+  return ModalPortal;
+}(React.Component);
+export default ModalPortal;

package/es/components/popover/color-rules/color-rule.js

@@ -0,0 +1,179 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Component } from 'react';
+import classnames from 'classnames';
+import intl from 'react-intl-universal';
+import RuleFilters from './rule-filters';
+import ColorSelectorPopover from '../color-selector-popover';
+import { CommonAddTool } from '../../index';
+var ColorRule = /*#__PURE__*/function (_Component) {
+  _inherits(ColorRule, _Component);
+  var _super = _createSuper(ColorRule);
+  function ColorRule(props) {
+    var _this;
+    _classCallCheck(this, ColorRule);
+    _this = _super.call(this, props);
+    _this.onColorPopoverToggle = function (event) {
+      event.stopPropagation();
+      event.nativeEvent.stopImmediatePropagation();
+      _this.setState({
+        isColorPopoverShow: !_this.state.isColorPopoverShow
+      });
+    };
+    _this.hideColorPopover = function () {
+      _this.setState({
+        isColorPopoverShow: false
+      });
+    };
+    _this.onSelectColor = function (color) {
+      var _this$props = _this.props,
+        rule = _this$props.rule,
+        ruleIndex = _this$props.ruleIndex;
+      var updatedRule = Object.assign({}, rule, {
+        color: color
+      });
+      _this.props.updateRule(ruleIndex, updatedRule);
+    };
+    _this.deleteRule = function (e) {
+      e.nativeEvent.stopImmediatePropagation();
+      e.stopPropagation();
+      var ruleIndex = _this.props.ruleIndex;
+      _this.props.deleteRule(ruleIndex);
+    };
+    _this.addFilter = function () {
+      var _this$props2 = _this.props,
+        colorRuleTypes = _this$props2.colorRuleTypes,
+        rule = _this$props2.rule;
+      var filters = rule.filters;
+      var defaultFilter = _this.props.generateDefaultFilter(colorRuleTypes[0]);
+      if (!defaultFilter || filters.length >= 8) return;
+      var updatedFilters = _toConsumableArray(filters);
+      updatedFilters.push(defaultFilter);
+      _this.updateFilters(updatedFilters);
+    };
+    _this.updateFilter = function (filterIndex, updatedFilter) {
+      var rule = _this.props.rule;
+      var filters = rule.filters;
+      var updatedFilters = _toConsumableArray(filters);
+      updatedFilters[filterIndex] = updatedFilter;
+      _this.updateFilters(updatedFilters);
+    };
+    _this.modifyFilterConjunction = function (filterConjunction) {
+      var _this$props3 = _this.props,
+        rule = _this$props3.rule,
+        ruleIndex = _this$props3.ruleIndex;
+      var updatedRule = Object.assign({}, rule, {
+        filter_conjunction: filterConjunction
+      });
+      _this.props.updateRule(ruleIndex, updatedRule);
+    };
+    _this.updateFilters = function (filters) {
+      var _this$props4 = _this.props,
+        rule = _this$props4.rule,
+        ruleIndex = _this$props4.ruleIndex;
+      if (filters.length === 0) {
+        _this.props.deleteRule(ruleIndex);
+      } else {
+        var updatedRule = Object.assign({}, rule, {
+          filters: filters
+        });
+        _this.props.updateRule(ruleIndex, updatedRule);
+      }
+    };
+    _this.onMouseDown = function (e) {
+      e.stopPropagation();
+      e.nativeEvent.stopImmediatePropagation();
+    };
+    _this.state = {
+      isColorPopoverShow: false
+    };
+    return _this;
+  }
+  _createClass(ColorRule, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props5 = this.props,
+        labelColorConfigs = _this$props5.labelColorConfigs,
+        colorRuleTypes = _this$props5.colorRuleTypes,
+        rule = _this$props5.rule,
+        isEditing = _this$props5.isEditing,
+        ruleIndex = _this$props5.ruleIndex,
+        ruleName = _this$props5.ruleName;
+      var color = rule.color,
+        filter_conjunction = rule.filter_conjunction,
+        filters = rule.filters;
+      var target = "row-color-rule-".concat(ruleIndex);
+      var selectedColorConfig = this.props.getColorConfigByColor(color);
+      var ruleTitle = ruleName || intl.get('Define_rule');
+      var canAddFilter = filters.length < 8;
+      return /*#__PURE__*/React.createElement("div", {
+        className: classnames('statistic-color-rule-item', {
+          'editing': isEditing
+        })
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "d-flex justify-content-between pr-4"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "statistic-color-rule-title",
+        onClick: function onClick() {
+          return _this2.props.setEditingRuleIndex(ruleIndex);
+        }
+      }, /*#__PURE__*/React.createElement("span", {
+        ref: function ref(_ref) {
+          return _this2.rowColorRule = _ref;
+        },
+        className: "statistic-color-rule-dropdown",
+        style: {
+          backgroundColor: color
+        },
+        onMouseDown: this.onMouseDown,
+        onClick: this.onColorPopoverToggle,
+        id: target
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "dtable-font dtable-icon-drop-down",
+        style: {
+          color: selectedColorConfig.text_color
+        }
+      }), this.state.isColorPopoverShow && /*#__PURE__*/React.createElement(ColorSelectorPopover, {
+        placement: "bottom-start",
+        hideArrow: false,
+        target: target,
+        selectedColor: color,
+        colorConfigs: labelColorConfigs,
+        toggle: this.hideColorPopover,
+        onSelectColor: this.onSelectColor
+      })), /*#__PURE__*/React.createElement("div", {
+        className: classnames('statistic-color-rule-name text-truncate', {
+          'invalid': !!ruleName
+        }),
+        title: ruleTitle
+      }, ruleTitle)), /*#__PURE__*/React.createElement("span", {
+        className: "statistic-delete-color-rule"
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "dtable-font dtable-icon-delete",
+        onClick: this.deleteRule
+      }))), isEditing && /*#__PURE__*/React.createElement("div", {
+        className: "statistic-color-rule-filters-wrapper"
+      }, /*#__PURE__*/React.createElement(RuleFilters, {
+        filterTypes: colorRuleTypes,
+        filters: rule.filters,
+        filterConjunction: filter_conjunction,
+        getFilterConfigByType: this.props.getFilterConfigByType,
+        modifyConjunction: this.modifyFilterConjunction,
+        updateFilters: this.updateFilters
+      }), /*#__PURE__*/React.createElement(CommonAddTool, {
+        className: classnames('statistic-btn-add-color-rule-filter', {
+          'disabled': !canAddFilter
+        }),
+        callBack: this.addFilter,
+        footerName: intl.get('Add_condition'),
+        addIconClassName: "popover-add-icon"
+      })));
+    }
+  }]);
+  return ColorRule;
+}(Component);
+export default ColorRule;

package/es/components/popover/color-rules/index.js

@@ -0,0 +1,87 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Component } from 'react';
+import ColorRule from './color-rule';
+var ColorRules = /*#__PURE__*/function (_Component) {
+  _inherits(ColorRules, _Component);
+  var _super = _createSuper(ColorRules);
+  function ColorRules(props) {
+    var _this;
+    _classCallCheck(this, ColorRules);
+    _this = _super.call(this, props);
+    _this.setEditingRuleIndex = function (editingRuleIndex) {
+      if (_this.state.editingRuleIndex === editingRuleIndex) {
+        _this.setState({
+          editingRuleIndex: -1
+        });
+        return;
+      }
+      _this.setState({
+        editingRuleIndex: editingRuleIndex
+      }, function () {
+        _this.props.resetPopoverPosition();
+      });
+    };
+    _this.updateRule = function (ruleIndex, updatedRule) {
+      var rules = _this.props.rules;
+      var isAddingFilter = updatedRule.filters.length > rules[ruleIndex].filters.length;
+      var updatedRules = _toConsumableArray(rules);
+      updatedRules[ruleIndex] = updatedRule;
+      _this.props.updateRules({
+        colorRules: updatedRules,
+        callback: function callback() {
+          isAddingFilter && _this.props.resetPopoverPosition();
+        }
+      });
+    };
+    _this.deleteRule = function (ruleIndex) {
+      var rules = _this.props.rules;
+      var updatedRules = _toConsumableArray(rules);
+      updatedRules.splice(ruleIndex, 1);
+      _this.props.updateRules({
+        colorRules: updatedRules
+      });
+    };
+    _this.state = {
+      editingRuleIndex: -1
+    };
+    return _this;
+  }
+  _createClass(ColorRules, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props = this.props,
+        rules = _this$props.rules,
+        labelColorConfigs = _this$props.labelColorConfigs,
+        colorRuleTypes = _this$props.colorRuleTypes,
+        rulesName = _this$props.rulesName;
+      var editingRuleIndex = this.state.editingRuleIndex;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statistic-color-rules"
+      }, rules.map(function (rule, ruleIndex) {
+        var isEditing = editingRuleIndex === ruleIndex;
+        return /*#__PURE__*/React.createElement(ColorRule, {
+          key: "statistic-color-rule-".concat(ruleIndex),
+          ruleIndex: ruleIndex,
+          rule: rule,
+          labelColorConfigs: labelColorConfigs,
+          colorRuleTypes: colorRuleTypes,
+          isEditing: isEditing,
+          ruleName: rulesName[ruleIndex],
+          setEditingRuleIndex: _this2.setEditingRuleIndex,
+          getColorConfigByColor: _this2.props.getColorConfigByColor,
+          getFilterConfigByType: _this2.props.getFilterConfigByType,
+          generateDefaultFilter: _this2.props.generateDefaultFilter,
+          updateRule: _this2.updateRule,
+          deleteRule: _this2.deleteRule
+        });
+      }));
+    }
+  }]);
+  return ColorRules;
+}(Component);
+export default ColorRules;

package/es/components/popover/color-rules/rule-filters/filter.js

@@ -0,0 +1,214 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Select } from '../../../index';
+import NumberInput from './number-input';
+import { COLOR_RULE_FILTER_TYPE_MAP, EMPTY_PREDICATE } from '../../../../constants/color-rules';
+var INPUT_CMP_TYPE_MAP = {
+  NUMBER: 'number'
+};
+var Filter = /*#__PURE__*/function (_React$Component) {
+  _inherits(Filter, _React$Component);
+  var _super = _createSuper(Filter);
+  function Filter(_props) {
+    var _this;
+    _classCallCheck(this, Filter);
+    _this = _super.call(this, _props);
+    _this.initSelectOptions = function (props) {
+      var filter = props.filter;
+      var _this$props$getFilter = _this.props.getFilterConfigByType(filter.filter_type),
+        filterPredicateList = _this$props$getFilter.filterPredicateList;
+      _this.predicateOptions = filterPredicateList ? filterPredicateList.map(function (predicate) {
+        if (EMPTY_PREDICATE.includes(predicate)) {
+          return null;
+        }
+        return {
+          value: predicate,
+          label: /*#__PURE__*/React.createElement("span", {
+            className: "select-option-name"
+          }, intl.get(predicate))
+        };
+      }).filter(Boolean) : [];
+    };
+    _this.onDeleteFilter = function (event) {
+      event.nativeEvent.stopImmediatePropagation();
+      var index = _this.props.index;
+      _this.props.deleteFilter(index);
+    };
+    _this.onSelectConjunction = function (filterConjunction) {
+      if (filterConjunction === _this.props.filterConjunction) {
+        return;
+      }
+      _this.props.modifyConjunction(filterConjunction);
+    };
+    _this.onSelectFilterBy = function (filterType) {
+      var _this$props = _this.props,
+        index = _this$props.index,
+        filter = _this$props.filter;
+      if (filter.filter_type === filterType) return;
+      var _this$props$getFilter2 = _this.props.getFilterConfigByType(filter.filter_type),
+        filterPredicateList = _this$props$getFilter2.filterPredicateList;
+      if (!filterPredicateList) return;
+      var updatedFilter = Object.assign({}, filter, {
+        filter_type: filterType,
+        filter_predicate: filterPredicateList[0]
+      });
+      _this.props.updateFilter(index, updatedFilter);
+    };
+    _this.onSelectPredicate = function (predicate) {
+      var _this$props2 = _this.props,
+        index = _this$props2.index,
+        filter = _this$props2.filter;
+      if (filter.filter_predicate === predicate) {
+        return;
+      }
+      var updatedFilter = Object.assign({}, filter, {
+        filter_predicate: predicate
+      });
+      _this.props.updateFilter(index, updatedFilter);
+    };
+    _this.onNumberFilterTermChanged = function (newFilterTerm) {
+      var _this$props3 = _this.props,
+        index = _this$props3.index,
+        filter = _this$props3.filter;
+      if (newFilterTerm === filter.filter_term) return;
+      var newFilter = Object.assign({}, filter, {
+        filter_term: newFilterTerm
+      });
+      _this.props.updateFilter(index, newFilter);
+    };
+    _this.getInputComponent = function (type) {
+      var filter = _this.props.filter;
+      var filter_term = filter.filter_term;
+      switch (type) {
+        case INPUT_CMP_TYPE_MAP.NUMBER:
+          {
+            var number = filter_term || filter_term == 0 ? filter_term : '';
+            return /*#__PURE__*/React.createElement(NumberInput, {
+              value: number,
+              onChange: _this.onNumberFilterTermChanged
+            });
+          }
+        default:
+          {
+            return null;
+          }
+      }
+    };
+    _this.renderConjunction = function () {
+      var _this$props4 = _this.props,
+        index = _this$props4.index,
+        filterConjunction = _this$props4.filterConjunction,
+        conjunctionOptions = _this$props4.conjunctionOptions;
+      switch (index) {
+        case 0:
+          {
+            return null;
+          }
+        case 1:
+          {
+            var selectedConjunction = conjunctionOptions.find(function (option) {
+              return option.value === filterConjunction;
+            });
+            return /*#__PURE__*/React.createElement(Select, {
+              value: selectedConjunction,
+              options: conjunctionOptions,
+              onSelectOption: _this.onSelectConjunction
+            });
+          }
+        default:
+          {
+            return /*#__PURE__*/React.createElement("span", {
+              className: "selected-conjunction-show"
+            }, intl.get(filterConjunction));
+          }
+      }
+    };
+    _this.renderFilterTerm = function () {
+      var filter = _this.props.filter;
+      var filter_type = filter.filter_type,
+        filter_predicate = filter.filter_predicate;
+
+      // predicate is empty or not empty
+      if (EMPTY_PREDICATE.includes(filter_predicate)) {
+        return null;
+      }
+      switch (filter_type) {
+        case COLOR_RULE_FILTER_TYPE_MAP.NUMERIC_VALUE:
+          {
+            return _this.getInputComponent(INPUT_CMP_TYPE_MAP.NUMBER);
+          }
+        default:
+          {
+            return null;
+          }
+      }
+    };
+    _this.initSelectOptions(_props);
+    return _this;
+  }
+  _createClass(Filter, [{
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      var filter = this.props.filter;
+      if (nextProps.filter !== filter) {
+        this.initSelectOptions(nextProps);
+      }
+    }
+  }, {
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(nextProps) {
+      var currentProps = this.props;
+      var shouldUpdated = nextProps.index !== currentProps.index || nextProps.filter !== currentProps.filter || nextProps.filterConjunction !== currentProps.filterConjunction;
+      return shouldUpdated;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props5 = this.props,
+        filterTypeOptions = _this$props5.filterTypeOptions,
+        filter = _this$props5.filter;
+      var filter_type = filter.filter_type,
+        filter_predicate = filter.filter_predicate;
+      var selectedFilterType = filterTypeOptions.find(function (option) {
+        return option.value === filter_type;
+      });
+      var selectedPredicate = this.predicateOptions.find(function (option) {
+        return option.value === filter_predicate;
+      });
+      return /*#__PURE__*/React.createElement("div", {
+        className: "filter-item"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "delete-filter",
+        onClick: this.onDeleteFilter
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "dtable-font dtable-icon-fork-number"
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "condition"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "filter-conjunction"
+      }, this.renderConjunction()), /*#__PURE__*/React.createElement("div", {
+        className: "filter-container"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "filter-column"
+      }, /*#__PURE__*/React.createElement(Select, {
+        value: selectedFilterType,
+        options: filterTypeOptions,
+        onSelectOption: this.onSelectFilterBy
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "filter-predicate ml-2"
+      }, /*#__PURE__*/React.createElement(Select, {
+        value: selectedPredicate,
+        options: this.predicateOptions,
+        onSelectOption: this.onSelectPredicate
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "filter-term ml-2"
+      }, this.renderFilterTerm()))));
+    }
+  }]);
+  return Filter;
+}(React.Component);
+export default Filter;