@seafile/sdoc-editor 2.0.82 → 2.0.83

package/dist/plugin-module/plugins/seatable-tables/seatable-settings/filter-setter/filter-popover-widgets/filter-item.js

@@ -1,704 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _DTableCustomizeSelect2 = _interopRequireDefault(require("dtable-ui-component/lib/DTableCustomizeSelect"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
-var _react = _interopRequireWildcard(require("react"));
-var _reactI18next = require("react-i18next");
-var _reactstrap = require("reactstrap");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _dtableUtils = require("dtable-utils");
-var _dtableSearchInput = _interopRequireDefault(require("../../dtable-search-input"));
-var _utils = require("../../utils/utils");
-var _filtersUtils = require("../filters-utils");
-var _calendarFilter = _interopRequireDefault(require("./calendar-filter"));
-var _collaboratorFilter = _interopRequireDefault(require("./collaborator-filter"));
-var _departmentFilter = require("./department-filter");
-var _filterItemUtils = _interopRequireDefault(require("./filter-item-utils"));
-var _numberEditor = _interopRequireDefault(require("./number-editor"));
-var _rateItem = _interopRequireDefault(require("./rate-item"));
-const EMPTY_PREDICATE = [_dtableUtils.FILTER_PREDICATE_TYPE.EMPTY, _dtableUtils.FILTER_PREDICATE_TYPE.NOT_EMPTY];
-class FilterItem extends _react.default.Component {
-  constructor(_props) {
-    var _this;
-    super(_props);
-    _this = this;
-    (0, _defineProperty2.default)(this, "initSelectOptions", props => {
-      const {
-        filter,
-        filterColumn,
-        value,
-        t
-      } = props;
-      let {
-        filterPredicateList,
-        filterTermModifierList
-      } = (0, _filtersUtils.getColumnOptions)(filterColumn, value);
-      // The value of the calculation formula column does not exist in the shared view
-      this.filterPredicateOptions = filterPredicateList ? filterPredicateList.map(predicate => {
-        return _filterItemUtils.default.generatorPredicateOption(predicate, t);
-      }).filter(item => item) : [];
-      const {
-        filter_predicate
-      } = filter;
-      if ((0, _dtableUtils.isDateColumn)(filterColumn)) {
-        if (filter_predicate === _dtableUtils.FILTER_PREDICATE_TYPE.IS_WITHIN) {
-          filterTermModifierList = _dtableUtils.filterTermModifierIsWithin;
-        }
-        this.filterTermModifierOptions = filterTermModifierList.map(termModifier => {
-          return _filterItemUtils.default.generatorTermModifierOption(termModifier, t);
-        });
-      }
-    });
-    (0, _defineProperty2.default)(this, "onDeleteFilter", event => {
-      event.nativeEvent.stopImmediatePropagation();
-      const {
-        index
-      } = this.props;
-      this.props.deleteFilter(index);
-    });
-    (0, _defineProperty2.default)(this, "resetState", filter => {
-      this.setState({
-        filterTerm: filter.filter_term
-      });
-    });
-    (0, _defineProperty2.default)(this, "onSelectConjunction", value => {
-      const {
-        filterConjunction
-      } = this.props;
-      if (filterConjunction === value.filterConjunction) {
-        return;
-      }
-      this.props.updateConjunction(value.filterConjunction);
-    });
-    (0, _defineProperty2.default)(this, "onSelectColumn", value => {
-      const {
-        index,
-        filter
-      } = this.props;
-      const {
-        column
-      } = value;
-      if (column.key === filter.column_key) return;
-      let newFilter = (0, _filtersUtils.getFilterByColumn)(column, filter);
-      if (!newFilter) return;
-      this.resetState(newFilter);
-      this.props.updateFilter(index, newFilter);
-    });
-    (0, _defineProperty2.default)(this, "onSelectPredicate", value => {
-      const {
-        index,
-        filter,
-        filterColumn
-      } = this.props;
-      const {
-        filterPredicate
-      } = value;
-      if (filter.filter_predicate === filterPredicate) {
-        return;
-      }
-      let newFilter = (0, _filtersUtils.getUpdatedFilterByPredicate)(filter, filterColumn, filterPredicate);
-      this.resetState(newFilter);
-      this.props.updateFilter(index, newFilter);
-    });
-    (0, _defineProperty2.default)(this, "onSelectTermModifier", value => {
-      const {
-        index,
-        filter
-      } = this.props;
-      const {
-        filterTermModifier
-      } = value;
-      const inputRangeLabel = [_dtableUtils.FILTER_TERM_MODIFIER_TYPE.EXACT_DATE, _dtableUtils.FILTER_TERM_MODIFIER_TYPE.NUMBER_OF_DAYS_AGO, _dtableUtils.FILTER_TERM_MODIFIER_TYPE.NUMBER_OF_DAYS_FROM_NOW, _dtableUtils.FILTER_TERM_MODIFIER_TYPE.THE_NEXT_NUMBERS_OF_DAYS, _dtableUtils.FILTER_TERM_MODIFIER_TYPE.THE_PAST_NUMBERS_OF_DAYS];
-      if (filter.filter_term_modifier === filterTermModifier) {
-        return;
-      }
-      let filter_term = filter.filter_term;
-      if (inputRangeLabel.indexOf(filter.filter_term_modifier) > -1) {
-        filter_term = '';
-      }
-      let newFilter = Object.assign({}, filter, {
-        filter_term_modifier: filterTermModifier,
-        filter_term
-      });
-      this.resetState(newFilter);
-      this.props.updateFilter(index, newFilter);
-    });
-    (0, _defineProperty2.default)(this, "onSelectSingle", value => {
-      const {
-        index,
-        filter
-      } = this.props;
-      const {
-        columnOption: option
-      } = value;
-      if (filter.filter_term === option.id) {
-        return;
-      }
-      let newFilter = (0, _filtersUtils.getUpdatedFilterBySelectSingle)(filter, option);
-      this.resetState(newFilter);
-      this.props.updateFilter(index, newFilter);
-    });
-    (0, _defineProperty2.default)(this, "onSelectMultiple", value => {
-      const {
-        index,
-        filter
-      } = this.props;
-      const {
-        columnOption: option
-      } = value;
-      let newFilter = (0, _filtersUtils.getUpdatedFilterBySelectMultiple)(filter, option);
-      this.resetState(newFilter);
-      this.props.updateFilter(index, newFilter);
-    });
-    (0, _defineProperty2.default)(this, "onSelectCollaborator", value => {
-      const {
-        index,
-        filter
-      } = this.props;
-      const {
-        columnOption: collaborator
-      } = value;
-      let newFilter = (0, _filtersUtils.getUpdatedFilterByCollaborator)(filter, collaborator);
-      this.resetState(newFilter);
-      this.props.updateFilter(index, newFilter);
-    });
-    (0, _defineProperty2.default)(this, "onSelectCreator", value => {
-      const {
-        index,
-        filter
-      } = this.props;
-      const {
-        columnOption: collaborator
-      } = value;
-      let newFilter = (0, _filtersUtils.getUpdatedFilterByCreator)(filter, collaborator);
-      // the predicate is 'is' or 'is not'
-      if (!newFilter) {
-        return;
-      }
-      this.resetState(newFilter);
-      this.props.updateFilter(index, newFilter);
-    });
-    (0, _defineProperty2.default)(this, "onFilterTermCheckboxChanged", e => {
-      this.onFilterTermChanged(e.target.checked);
-    });
-    (0, _defineProperty2.default)(this, "onFilterTermTextChanged", value => {
-      this.onFilterTermChanged(value);
-    });
-    (0, _defineProperty2.default)(this, "onFilterTermNumberChanged", () => {
-      const value = this.numberEditor.getValue();
-      this.onFilterTermChanged(Object.values(value)[0]);
-    });
-    (0, _defineProperty2.default)(this, "onFilterTermChanged", newFilterTerm => {
-      const {
-        index,
-        filter
-      } = this.props;
-      const {
-        filterTerm
-      } = this.state;
-      if (newFilterTerm !== filterTerm) {
-        this.setState({
-          filterTerm: newFilterTerm
-        });
-        let newFilter = Object.assign({}, filter, {
-          filter_term: newFilterTerm
-        });
-        this.props.updateFilter(index, newFilter);
-      }
-    });
-    (0, _defineProperty2.default)(this, "onMouseEnterRateItem", index => {
-      this.setState({
-        enterRateItemIndex: index
-      });
-    });
-    (0, _defineProperty2.default)(this, "onMouseLeaveRateItem", () => {
-      this.setState({
-        enterRateItemIndex: 0
-      });
-    });
-    (0, _defineProperty2.default)(this, "onChangeRateNumber", index => {
-      this.onFilterTermChanged(index);
-    });
-    (0, _defineProperty2.default)(this, "getInputComponent", type => {
-      const {
-        filterColumn
-      } = this.props;
-      const {
-        filterTerm
-      } = this.state;
-      if (type === 'text') {
-        return /*#__PURE__*/_react.default.createElement(_dtableSearchInput.default, {
-          value: filterTerm,
-          onChange: this.onFilterTermTextChanged,
-          autoFocus: false,
-          className: (0, _classnames.default)('text-truncate')
-        });
-      } else if (type === 'checkbox') {
-        return /*#__PURE__*/_react.default.createElement("input", {
-          type: "checkbox",
-          checked: filterTerm,
-          onChange: this.onFilterTermCheckboxChanged
-        });
-      } else if (type === 'number') {
-        return /*#__PURE__*/_react.default.createElement(_numberEditor.default, {
-          ref: ref => this.numberEditor = ref,
-          column: filterColumn,
-          value: filterTerm,
-          onCommit: this.onFilterTermNumberChanged
-        });
-      }
-    });
-    (0, _defineProperty2.default)(this, "renderConjunction", () => {
-      const {
-        index,
-        filterConjunction,
-        conjunctionOptions,
-        t
-      } = this.props;
-      switch (index) {
-        case 0:
-          {
-            return null;
-          }
-        case 1:
-          {
-            const activeConjunction = _filterItemUtils.default.getActiveConjunctionOption(filterConjunction, t);
-            return /*#__PURE__*/_react.default.createElement(_DTableCustomizeSelect2.default, {
-              value: activeConjunction,
-              options: conjunctionOptions,
-              onSelectOption: this.onSelectConjunction
-            });
-          }
-        default:
-          {
-            return /*#__PURE__*/_react.default.createElement("span", {
-              className: "selected-conjunction-show"
-            }, t(filterConjunction));
-          }
-      }
-    });
-    (0, _defineProperty2.default)(this, "renderMultipleSelectOption", function () {
-      let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-      let filterTerm = arguments.length > 1 ? arguments[1] : undefined;
-      const {
-        filter,
-        t
-      } = _this.props;
-      const {
-        filter_predicate
-      } = filter;
-      let isSupportMultipleSelect = false;
-      // The first two options are used for single selection, and the last four options are used for multiple selection
-      const supportMultipleSelectOptions = [_dtableUtils.FILTER_PREDICATE_TYPE.IS_ANY_OF, _dtableUtils.FILTER_PREDICATE_TYPE.IS_NONE_OF, _dtableUtils.FILTER_PREDICATE_TYPE.HAS_ANY_OF, _dtableUtils.FILTER_PREDICATE_TYPE.HAS_ALL_OF, _dtableUtils.FILTER_PREDICATE_TYPE.HAS_NONE_OF, _dtableUtils.FILTER_PREDICATE_TYPE.IS_EXACTLY];
-      if (supportMultipleSelectOptions.includes(filter_predicate)) {
-        isSupportMultipleSelect = true;
-      }
-      const className = 'select-option-name multiple-select-option';
-      let labelArray = [];
-      if (Array.isArray(options) && Array.isArray(filterTerm)) {
-        filterTerm.forEach(item => {
-          let inOption = options.find(option => option.id === item);
-          if (inOption) {
-            let optionStyle = {
-              margin: '0 10px 0 0',
-              background: inOption.color,
-              color: inOption.textColor || null
-            };
-            labelArray.push( /*#__PURE__*/_react.default.createElement("span", {
-              className: className,
-              style: optionStyle,
-              key: 'option_' + item,
-              title: inOption.name,
-              "aria-label": inOption.name
-            }, inOption.name));
-          }
-        });
-      }
-      const selectedOptionNames = labelArray.length > 0 ? {
-        label: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, labelArray)
-      } : {};
-      const dataOptions = options.map(option => {
-        return _filterItemUtils.default.generatorMultipleSelectOption(option, filterTerm);
-      });
-      return /*#__PURE__*/_react.default.createElement(_DTableCustomizeSelect2.default, {
-        className: "selector-multiple-select",
-        value: selectedOptionNames,
-        options: dataOptions,
-        onSelectOption: _this.onSelectMultiple,
-        placeholder: t('Select_option(s)'),
-        searchable: true,
-        searchPlaceholder: t('Search_option'),
-        noOptionsPlaceholder: t('No_options_available'),
-        supportMultipleSelect: isSupportMultipleSelect
-      });
-    });
-    (0, _defineProperty2.default)(this, "renderFilterTerm", filterColumn => {
-      const {
-        index,
-        filter,
-        collaborators,
-        t
-      } = this.props;
-      const {
-        type
-      } = filterColumn;
-      const {
-        filter_term,
-        filter_predicate,
-        filter_term_modifier
-      } = filter;
-      // predicate is empty or not empty
-      if (EMPTY_PREDICATE.includes(filter_predicate)) {
-        return null;
-      }
-
-      // the cell value will be date
-      // 1. DATE
-      // 2. CTIME: create-time
-      // 3. MTIME: modify-time
-      // 4. FORMULA: result_type is date
-      if ((0, _dtableUtils.isDateColumn)(filterColumn)) {
-        const inputRangeLabel = [_dtableUtils.FILTER_TERM_MODIFIER_TYPE.EXACT_DATE, _dtableUtils.FILTER_TERM_MODIFIER_TYPE.NUMBER_OF_DAYS_AGO, _dtableUtils.FILTER_TERM_MODIFIER_TYPE.NUMBER_OF_DAYS_FROM_NOW, _dtableUtils.FILTER_TERM_MODIFIER_TYPE.THE_NEXT_NUMBERS_OF_DAYS, _dtableUtils.FILTER_TERM_MODIFIER_TYPE.THE_PAST_NUMBERS_OF_DAYS];
-        if (inputRangeLabel.indexOf(filter_term_modifier) > -1) {
-          if (filter_term_modifier === 'exact_date') {
-            return /*#__PURE__*/_react.default.createElement(_calendarFilter.default, {
-              onChange: this.onFilterTermTextChanged,
-              value: this.state.filterTerm,
-              filterColumn: filterColumn
-            });
-          }
-          return this.getInputComponent('text');
-        }
-        return null;
-      }
-      switch (type) {
-        case _dtableUtils.CellType.TEXT:
-        case _dtableUtils.CellType.LONG_TEXT:
-        case _dtableUtils.CellType.GEOLOCATION:
-        case _dtableUtils.CellType.AUTO_NUMBER:
-        case _dtableUtils.CellType.DURATION:
-        case _dtableUtils.CellType.EMAIL:
-        case _dtableUtils.CellType.URL:
-          {
-            // The data in the formula column is a date type that has been excluded
-            if (filter_predicate === _dtableUtils.FILTER_PREDICATE_TYPE.IS_CURRENT_USER_ID) {
-              return null;
-            }
-            return this.getInputComponent('text');
-          }
-        case _dtableUtils.CellType.NUMBER:
-          {
-            return this.getInputComponent('number');
-          }
-        case _dtableUtils.CellType.CHECKBOX:
-          {
-            return this.getInputComponent('checkbox');
-          }
-        case _dtableUtils.CellType.SINGLE_SELECT:
-          {
-            // get options
-            let {
-              options = []
-            } = filterColumn.data || {};
-            if ([_dtableUtils.FILTER_PREDICATE_TYPE.IS_ANY_OF, _dtableUtils.FILTER_PREDICATE_TYPE.IS_NONE_OF].includes(filter_predicate)) {
-              return this.renderMultipleSelectOption(options, filter_term);
-            }
-            let selectedOption = options.find(option => option.id === filter_term);
-            let selectedOptionName = {};
-            if (selectedOption) {
-              const className = 'select-option-name single-select-option';
-              const style = {
-                background: selectedOption.color,
-                color: selectedOption.textColor || null
-              };
-              selectedOptionName = {
-                label: /*#__PURE__*/_react.default.createElement("span", {
-                  className: className,
-                  style: style,
-                  title: selectedOption.name,
-                  "aria-label": selectedOption.name
-                }, selectedOption.name)
-              };
-            }
-            let dataOptions = options.map(option => {
-              return _filterItemUtils.default.generatorSingleSelectOption(option);
-            });
-            return /*#__PURE__*/_react.default.createElement(_DTableCustomizeSelect2.default, {
-              className: "selector-single-select",
-              value: selectedOptionName,
-              options: dataOptions,
-              onSelectOption: this.onSelectSingle,
-              placeholder: t('Select_an_option'),
-              searchable: true,
-              searchPlaceholder: t('Search_option'),
-              noOptionsPlaceholder: t('No_options_available')
-            });
-          }
-        case _dtableUtils.CellType.MULTIPLE_SELECT:
-          {
-            let {
-              options = []
-            } = filterColumn.data || {};
-            return this.renderMultipleSelectOption(options, filter_term);
-          }
-        case _dtableUtils.CellType.DEPARTMENT_SINGLE_SELECT:
-          {
-            if ([_dtableUtils.FILTER_PREDICATE_TYPE.IS_ANY_OF, _dtableUtils.FILTER_PREDICATE_TYPE.IS_NONE_OF].includes(filter_predicate)) {
-              return /*#__PURE__*/_react.default.createElement(_departmentFilter.DepartmentMultipleSelectFilter, {
-                column: filterColumn,
-                value: filter_term || [],
-                onCommit: this.onSelectMultiple
-              });
-            }
-            return /*#__PURE__*/_react.default.createElement(_departmentFilter.DepartmentSingleSelectFilter, {
-              column: filterColumn,
-              value: filter_term || '',
-              onCommit: this.onSelectSingle
-            });
-          }
-        case _dtableUtils.CellType.COLLABORATOR:
-          {
-            if (filter_predicate === _dtableUtils.FILTER_PREDICATE_TYPE.INCLUDE_ME) {
-              return null;
-            }
-            return /*#__PURE__*/_react.default.createElement(_collaboratorFilter.default, {
-              filterIndex: index,
-              filterTerm: filter_term || [],
-              filter_predicate: filter_predicate,
-              collaborators: collaborators,
-              onSelectCollaborator: this.onSelectCollaborator,
-              placeholder: t('Add_collaborator')
-            });
-          }
-        case _dtableUtils.CellType.CREATOR:
-        case _dtableUtils.CellType.LAST_MODIFIER:
-          {
-            if (filter_predicate === _dtableUtils.FILTER_PREDICATE_TYPE.INCLUDE_ME) {
-              return null;
-            }
-            const creators = collaborators;
-            return /*#__PURE__*/_react.default.createElement(_collaboratorFilter.default, {
-              filterIndex: index,
-              filterTerm: filter_term || [],
-              collaborators: creators,
-              onSelectCollaborator: this.onSelectCreator,
-              placeholder: type === _dtableUtils.CellType.CREATOR ? t('Add_a_creator') : t('Add_a_last_modifier')
-            });
-          }
-        case _dtableUtils.CellType.RATE:
-          {
-            let {
-              rate_max_number
-            } = filterColumn.data || {};
-            let rateList = [];
-            for (let i = 0; i < rate_max_number; i++) {
-              let rateItem = /*#__PURE__*/_react.default.createElement(_rateItem.default, {
-                key: i,
-                enterRateItemIndex: this.state.enterRateItemIndex,
-                rateItemIndex: i + 1,
-                onMouseEnterRateItem: this.onMouseEnterRateItem,
-                onMouseLeaveRateItem: this.onMouseLeaveRateItem,
-                value: Number(filter_term) || rate_max_number,
-                column: filterColumn,
-                isShowRateItem: true,
-                onChangeRateNumber: this.onChangeRateNumber,
-                editable: true
-              });
-              rateList.push(rateItem);
-            }
-            return /*#__PURE__*/_react.default.createElement("div", {
-              className: "filter-rate-list"
-            }, rateList);
-          }
-        case _dtableUtils.CellType.FORMULA:
-        case _dtableUtils.CellType.LINK_FORMULA:
-          {
-            return this.renderFormulaFilterTerm(filter_predicate, filter_term, index, filterColumn);
-          }
-        case _dtableUtils.CellType.LINK:
-          {
-            return this.renderLinkFilterTerm(filter_predicate, filter_term, index, filterColumn);
-          }
-        default:
-          {
-            return null;
-          }
-      }
-    });
-    (0, _defineProperty2.default)(this, "renderFormulaFilterTerm", (filterPredicate, filterTerm, index, filterColumn) => {
-      const {
-        data
-      } = filterColumn || {};
-      const {
-        result_type
-      } = data || {};
-      if (filterPredicate === _dtableUtils.FILTER_PREDICATE_TYPE.IS_CURRENT_USER_ID) {
-        return null;
-      }
-      if (result_type === _dtableUtils.FORMULA_RESULT_TYPE.ARRAY) {
-        return this.renderFilterTermByArrayType(filterPredicate, filterTerm, index, filterColumn);
-      }
-      return this.getInputComponent('text');
-    });
-    (0, _defineProperty2.default)(this, "renderLinkFilterTerm", (filterPredicate, filterTerm, index, filterColumn) => {
-      if (filterPredicate === _dtableUtils.FILTER_PREDICATE_TYPE.IS_CURRENT_USER_ID) {
-        return null;
-      }
-      return this.renderFilterTermByArrayType(filterPredicate, filterTerm, index, filterColumn);
-    });
-    (0, _defineProperty2.default)(this, "renderFilterTermByArrayType", (filterPredicate, filterTerm, index, filterColumn) => {
-      const {
-        collaborators,
-        t
-      } = this.props;
-      const {
-        data
-      } = filterColumn || {};
-      const {
-        array_type,
-        array_data
-      } = data || {};
-      if (!array_type) {
-        return null;
-      }
-      const linkedColumn = {
-        type: array_type,
-        data: array_data
-      };
-      if (array_type === _dtableUtils.CellType.SINGLE_SELECT || array_type === _dtableUtils.CellType.MULTIPLE_SELECT) {
-        let {
-          options = []
-        } = array_data || {};
-        return this.renderMultipleSelectOption(options, filterTerm);
-      }
-      if (_dtableUtils.DATE_COLUMN_OPTIONS.includes(array_type) || array_type === _dtableUtils.CellType.RATE || array_type === _dtableUtils.CellType.CHECKBOX) {
-        return this.renderFilterTerm(linkedColumn);
-      }
-      if (_dtableUtils.COLLABORATOR_COLUMN_TYPES.includes(array_type)) {
-        if (filterPredicate === _dtableUtils.FILTER_PREDICATE_TYPE.INCLUDE_ME) {
-          return null;
-        }
-        return /*#__PURE__*/_react.default.createElement(_collaboratorFilter.default, {
-          filterIndex: index,
-          filterTerm: filterTerm || [],
-          collaborators: collaborators,
-          onSelectCollaborator: this.onSelectCollaborator,
-          placeholder: t('Add_collaborator')
-        });
-      }
-      return this.getInputComponent('text');
-    });
-    (0, _defineProperty2.default)(this, "renderErrorMessage", () => {
-      const {
-        t
-      } = this.props;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: "ml-2"
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        ref: this.invalidFilterTip,
-        className: "dtable-font dtable-icon-exclamation-triangle invalid-filter"
-      }), /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledTooltip, {
-        target: this.invalidFilterTip,
-        placement: "bottom",
-        fade: false
-      }, t('Invalid_filter')));
-    });
-    this.state = {
-      filterTerm: _props.filter.filter_term,
-      enterRateItemIndex: 0
-    };
-    this.filterPredicateOptions = null;
-    this.filterTermModifierOptions = null;
-    this.invalidFilterTip = /*#__PURE__*/_react.default.createRef();
-    this.initSelectOptions(_props);
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const {
-      filter
-    } = this.props;
-    if (nextProps.filter !== filter) {
-      this.initSelectOptions(nextProps);
-      this.setState({
-        filterTerm: nextProps.filter.filter_term
-      });
-    }
-  }
-  shouldComponentUpdate(nextProps) {
-    const currentProps = this.props;
-    const shouldUpdated = nextProps.index !== currentProps.index || nextProps.filter !== currentProps.filter || nextProps.filterColumn !== currentProps.filterColumn || nextProps.filterConjunction !== currentProps.filterConjunction || nextProps.conjunctionOptions !== currentProps.conjunctionOptions || nextProps.filterColumnOptions !== currentProps.filterColumnOptions;
-    return shouldUpdated;
-  }
-  render() {
-    const {
-      filterPredicateOptions,
-      filterTermModifierOptions
-    } = this;
-    const {
-      filter,
-      filterColumn,
-      filterColumnOptions,
-      errMsg,
-      t
-    } = this.props;
-    const {
-      filter_predicate,
-      filter_term_modifier
-    } = filter;
-    const activeColumn = _filterItemUtils.default.generatorColumnOption(filterColumn);
-    const activePredicate = _filterItemUtils.default.generatorPredicateOption(filter_predicate, t);
-    let activeTermModifier = null;
-    let _isCheckboxColumn = false;
-    if ((0, _dtableUtils.isDateColumn)(filterColumn)) {
-      activeTermModifier = _filterItemUtils.default.generatorTermModifierOption(filter_term_modifier, t);
-    } else if ((0, _utils.isCheckboxColumn)(filterColumn)) {
-      _isCheckboxColumn = true;
-    }
-
-    // current predicate is not empty
-    const isNeedShowTermModifier = !EMPTY_PREDICATE.includes(filter_predicate);
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "filter-item"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "delete-filter",
-      onClick: this.onDeleteFilter
-    }, /*#__PURE__*/_react.default.createElement("i", {
-      className: "dtable-font dtable-icon-fork-number"
-    })), /*#__PURE__*/_react.default.createElement("div", {
-      className: "condition"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "filter-conjunction"
-    }, this.renderConjunction()), /*#__PURE__*/_react.default.createElement("div", {
-      className: "filter-container"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "filter-column"
-    }, /*#__PURE__*/_react.default.createElement(_DTableCustomizeSelect2.default, {
-      value: activeColumn,
-      options: filterColumnOptions,
-      onSelectOption: this.onSelectColumn,
-      searchable: true,
-      searchPlaceholder: t('Search_column'),
-      noOptionsPlaceholder: t('No_results')
-    })), /*#__PURE__*/_react.default.createElement("div", {
-      className: `filter-predicate ml-2 ${_isCheckboxColumn ? 'filter-checkbox-predicate' : ''}`
-    }, /*#__PURE__*/_react.default.createElement(_DTableCustomizeSelect2.default, {
-      value: activePredicate,
-      options: filterPredicateOptions,
-      onSelectOption: this.onSelectPredicate
-    })), (0, _dtableUtils.isDateColumn)(filterColumn) && isNeedShowTermModifier && /*#__PURE__*/_react.default.createElement("div", {
-      className: "filter-term-modifier ml-2"
-    }, /*#__PURE__*/_react.default.createElement(_DTableCustomizeSelect2.default, {
-      value: activeTermModifier,
-      options: filterTermModifierOptions,
-      onSelectOption: this.onSelectTermModifier
-    })), /*#__PURE__*/_react.default.createElement("div", {
-      className: "filter-term ml-2"
-    }, this.renderFilterTerm(filterColumn)), errMsg && this.renderErrorMessage())));
-  }
-}
-var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(FilterItem);