react-intl#WrappedComponentProps TypeScript Examples

constructor(props: DataTableCustomFilterProps & WrappedComponentProps) {
    super(props);

    makeObservable(this, {
      nestedEntityOptions: computed,
      propertyCaption: computed,
      propertyInfoNN: computed,
      handleFinish: action,
      resetFilter: action,
      changeOperator: action,
      onTextInputChange: action,
      onNumberInputChange: action,
      onTemporalPickerChange: action,
      onYesNoSelectChange: action,
      onSelectChange: action,
      operatorTypeOptions: computed,
      simpleFilterEditor: computed,
      complexFilterEditor: computed,
      conditionInput: computed,
      textInputField: computed,
      charInputField: computed,
      uuidInputField: computed,
      selectField: computed,
      selectFieldOptions: computed,
      yesNoSelectField: computed,
      listEditor: computed,
      intervalEditor: computed,
      datePickerField: computed,
      timePickerField: computed,
      dateTimePickerField: computed
    });

    this.initValue();
  }

constructor(props: DataTableIntervalEditorProps & WrappedComponentProps) {
    super(props);

    makeObservable(this, {
      mode: observable,
      option: observable,
      numberOfUnits: observable,
      timeUnit: observable,
      includeCurrent: observable,
      interval: computed,
      onModeChanged: action,
      onPredefinedIntervalOptionChanged: action,
      onIntervalNumberChanged: action,
      onIntervalUnitChanged: action,
      onIncludeCurrentChanged: action,
      modeSelect: computed,
      predefinedIntervals: computed,
      intervalInput: computed
    });
  }

class DataTableCustomFilterComponent extends React.Component<DataTableCustomFilterProps & WrappedComponentProps> {

  get nestedEntityOptions(): CaptionValuePair[] {
    const {relationOptions = []} = this.props;

    return relationOptions.map(instance => ({
      caption: instance._instanceName ?? toIdString(instance.id),
      value: toIdString(instance.id)
    }));
  }

  formInstance: FormInstance | undefined | null;

  set operator(operator: ComparisonType) {
    const oldOperator: ComparisonType = this.operator;
    this.props.onOperatorChange(operator, this.props.entityProperty);
    this.checkOperatorGroup(operator, oldOperator);
  }

  get operator(): ComparisonType {
    return this.props.operator || this.getDefaultOperator();
  }

  set value(value: CustomFilterInputValue) {
    this.props.onValueChange(value, this.props.entityProperty);
  }

  get value(): CustomFilterInputValue {
    return this.props.value;
  }

  constructor(props: DataTableCustomFilterProps & WrappedComponentProps) {
    super(props);

    makeObservable(this, {
      nestedEntityOptions: computed,
      propertyCaption: computed,
      propertyInfoNN: computed,
      handleFinish: action,
      resetFilter: action,
      changeOperator: action,
      onTextInputChange: action,
      onNumberInputChange: action,
      onTemporalPickerChange: action,
      onYesNoSelectChange: action,
      onSelectChange: action,
      operatorTypeOptions: computed,
      simpleFilterEditor: computed,
      complexFilterEditor: computed,
      conditionInput: computed,
      textInputField: computed,
      charInputField: computed,
      uuidInputField: computed,
      selectField: computed,
      selectFieldOptions: computed,
      yesNoSelectField: computed,
      listEditor: computed,
      intervalEditor: computed,
      datePickerField: computed,
      timePickerField: computed,
      dateTimePickerField: computed
    });

    this.initValue();
  }

  get errorContext(): string {
    return `[DataTableCustomFilter, entity: ${this.props.entityName}, property: ${this.props.entityProperty}]`;
  }

  get propertyCaption(): string {
    return this.props.mainStore!.messages![this.props.entityName + '.' + this.props.entityProperty];
  }

  get propertyInfoNN(): MetaPropertyInfo {
    const propertyInfo: MetaPropertyInfo | null = getPropertyInfo(
      this.props.metadata.entities,
      this.props.entityName,
      this.props.entityProperty);

    if (!propertyInfo) {
      throw new Error(`${this.errorContext} Cannot find MetaPropertyInfo`);
    }

    return propertyInfo;
  }

  handleFinish = (): void => {
    if (this.value != null) {
      const {filterProps} = this.props;

      filterProps.setSelectedKeys!(
        [
          JSON.stringify({
            operator: this.operator,
            value: this.value
          })
        ]
      );
      filterProps.confirm!();
    }
  };

  setFormRef = (formInstance: FormInstance | null) => {
    const {customFilterRef} = this.props;
    if ((customFilterRef != null) && (formInstance != null)) {
      customFilterRef(formInstance);
    }
    this.formInstance = formInstance;
  };

  resetFormFields = (newOperator: ComparisonType) => {
    if (this.formInstance != null) {
      const fieldsToReset: string[] = [];
      if (!isComplexOperator(newOperator)) {
        fieldsToReset.push(`${this.props.entityProperty}_input`);
      } else if (newOperator === '__inInterval') {
        fieldsToReset.push(
          `${this.props.entityProperty}_predefined`,
          `${this.props.entityProperty}_number`,
        );
      }
      if (fieldsToReset.length > 0) {
        this.formInstance.resetFields(fieldsToReset);
      }
    }
  };

  initValue = (operator: ComparisonType = this.operator): void => {
    if (operator === '_isNull') {
      this.value = false;
    } else if ((this.propertyInfoNN.type as PropertyType) === 'Boolean') {
      this.value = true;
    } else if (operator === '_in' || operator === '_notIn') {
      this.value = [];
    } else {
      this.value = undefined;
    }
  };

  resetFilter = (): void => {
    const {filterProps} = this.props;

    this.formInstance?.resetFields();
    this.operator = this.getDefaultOperator();

    filterProps.clearFilters!();
  };

  changeOperator = (newOperator: ComparisonType): void => {
    this.operator = newOperator;
  };

  checkOperatorGroup = (newOperator: ComparisonType, oldOperator: ComparisonType): void => {
    const oldOperatorGroup: OperatorGroup = determineOperatorGroup(oldOperator);
    const newOperatorGroup: OperatorGroup = determineOperatorGroup(newOperator);

    if (oldOperatorGroup !== newOperatorGroup) {
      this.resetFormFields(newOperator);
      this.initValue(newOperator);
    }
  };

  onTextInputChange = (event: any): void => {
    this.value = event.target.value;
  };

  onNumberInputChange = (value: string | number | null | undefined): void => {
    this.value = value;
  };

  onTemporalPickerChange = (value: Dayjs | null) => {
    if (value != null) {
      this.value = applyDataTransferFormat(value.millisecond(0), this.propertyInfoNN.type as TemporalPropertyType);
    }
  }

  onYesNoSelectChange = (value: string | number | LabeledValue): void => {
    this.value = (value === 'true');
  };

  onSelectChange = (value: string | number | LabeledValue): void => {
    this.value = value as string;
  };

  render() {
    return (
      <Form layout='inline' onFinish={this.handleFinish} ref={this.setFormRef}>
        <div className={styles.tableFilter}>
          <div className={styles.settings}>
            <div className={styles.controlsLayout}>
              <Form.Item className={classNames(
                styles.filterControl, 
                styles.propertyCaption)
              }>
                {this.propertyCaption}
              </Form.Item>
              <Form.Item className={styles.filterControl}
                         initialValue={this.getDefaultOperator()}
                         name={`${this.props.entityProperty}_operatorsDropdown`}
              >
                <Select
                  dropdownClassName={`cuba-operator-dropdown-${this.props.entityProperty}`}
                  dropdownMatchSelectWidth={false}
                  onChange={(operator: ComparisonType) => this.changeOperator(operator)}
                >
                    {this.operatorTypeOptions}
                </Select>
              </Form.Item>
              {this.simpleFilterEditor}
            </div>
            {this.complexFilterEditor}
          </div>
          <Divider className={styles.divider} />
          <div className={styles.footer}>
            <Button htmlType='submit'
                    type='link'>
              <FormattedMessage id='jmix.dataTable.ok'/>
            </Button>
            <Button
              htmlType='button'
              type='link'
              onClick={this.resetFilter}>
              <FormattedMessage id='jmix.dataTable.reset'/>
            </Button>
          </div>
        </div>
      </Form>
    );
  }

  getDefaultOperator(): ComparisonType {
    const propertyInfo: MetaPropertyInfo = this.propertyInfoNN;

    switch (propertyInfo.attributeType) {
      case 'ENUM':
      case 'ASSOCIATION':
      case 'COMPOSITION':
        return '_eq';
    }

    switch (propertyInfo.type as PropertyType) {
      case 'Boolean':
        return '_eq';
      case 'Date':
      case 'Time':
      case 'DateTime':
      case 'LocalDate':
      case 'LocalTime':
      case 'LocalDateTime':
      case 'OffsetDateTime':
      case 'OffsetTime':
        return '_eq';
      case 'Integer':
      case 'Double':
      case 'BigDecimal':
      case 'Long':
      case 'Character':
        return '_eq';
      case 'String':
        return '_contains';
      case 'UUID':
        return '_eq';
      default:
        throw new Error(`${this.errorContext} Unexpected property type ${propertyInfo.type} when trying to get the default condition operator`)
    }
  }

  get operatorTypeOptions(): ReactNode {
    const propertyInfo: MetaPropertyInfo = this.propertyInfoNN;

    const availableOperators: ComparisonType[] = getAvailableOperators(propertyInfo);

    return availableOperators.map((operator: ComparisonType) => {
      return <Select.Option key={`${this.props.entityProperty}.${operator}`}
                            className={operatorToOptionClassName(operator)}
                            value={operator}>
        {this.getOperatorCaption(operator)}
      </Select.Option>;
    });
  }

  getOperatorCaption = (operator: ComparisonType): string => {
    switch (operator) {
      // case '_doesNotContain':
      case '_eq':
      case '_neq':
      case '_gt':
      case '_gte':
      case '_lt':
      case '_lte':
      case '_startsWith':
      case '_endsWith':
      case '_contains':
      case '_in':
      case '_notIn':
      case '_isNull':
      case '__inInterval':
        return this.props.intl.formatMessage({ id: 'jmix.dataTable.operator.' + operator });
      default:
        throw new Error(`${this.errorContext} Unexpected condition operator ${operator} when trying to get operator caption`);
    }
  };

  get simpleFilterEditor(): ReactNode {
    return isComplexOperator(this.operator) ? null : this.conditionInput;
  }

  get complexFilterEditor(): ReactNode {
    return isComplexOperator(this.operator) ? this.conditionInput : null;
  }

  cannotDetermineConditionInput(propertyType: string): string {
    return `${this.errorContext} Unexpected combination of property type ${propertyType} and condition operator ${this.operator} when trying to determine the condition input field type`;
  }

  get conditionInput(): ReactNode {
    const propertyInfo: MetaPropertyInfo = this.propertyInfoNN;

    switch (propertyInfo.attributeType) {
      // In case of enum generic filter will not be rendered, enum filter will be rendered instead
      case 'ASSOCIATION':
      case 'COMPOSITION':
        switch (this.operator) {
          case '_eq':
          case '_neq':
            return this.selectField;
          case '_in':
          case '_notIn':
            return this.listEditor;
          case '_isNull':
            return this.yesNoSelectField;
        }
    }

    switch (propertyInfo.type as PropertyType) {
      case 'Boolean':
        return this.yesNoSelectField;

      case 'DateTime':
      case 'LocalDateTime':
      case 'OffsetDateTime':
        switch (this.operator as TemporalComparisonType) {
          case '_eq':
          case '_neq':
          case '_gt':
          case '_gte':
          case '_lt':
          case '_lte':
            return this.dateTimePickerField;
          case '_in':
          case '_notIn':
            return this.listEditor;
          case '_isNull':
            return this.yesNoSelectField;
          case '__inInterval':
            return this.intervalEditor;
        }
        throw new Error(this.cannotDetermineConditionInput(propertyInfo.type));

      case 'Date':
      case 'LocalDate':
        switch (this.operator as TemporalComparisonType) {
          case '_eq':
          case '_neq':
          case '_gt':
          case '_gte':
          case '_lt':
          case '_lte':
            return this.datePickerField;
          case '_in':
          case '_notIn':
            return this.listEditor;
          case '_isNull':
            return this.yesNoSelectField;
          case '__inInterval':
            return this.intervalEditor;
        }
        throw new Error(this.cannotDetermineConditionInput(propertyInfo.type));

      case 'Time':
      case 'LocalTime':
      case 'OffsetTime':
        switch (this.operator as TemporalComparisonType) {
          case '_eq':
          case '_neq':
          case '_gt':
          case '_gte':
          case '_lt':
          case '_lte':
            return this.timePickerField;
          case '_in':
          case '_notIn':
            return this.listEditor;
          case '_isNull':
            return this.yesNoSelectField;
        }
        throw new Error(this.cannotDetermineConditionInput(propertyInfo.type));

      case 'Integer':
      case 'Double':
      case 'BigDecimal':
      case 'Long':
        switch (this.operator as NumberComparisonType) {
          case '_eq':
          case '_neq':
          case '_gt':
          case '_gte':
          case '_lt':
          case '_lte':
            return this.numberInputField(propertyInfo.type as NumericPropertyType);
          case '_in':
          case '_notIn':
            return this.listEditor;
          case '_isNull':
            return this.yesNoSelectField;
        }
        throw new Error(this.cannotDetermineConditionInput(propertyInfo.type));

      case 'String':
        switch (this.operator as TextComparisonType) {
          // case '_doesNotContain':
          case '_contains':
          case '_eq':
          case '_neq':
          case '_startsWith':
          case '_endsWith':
            return this.textInputField;
          case '_in':
          case '_notIn':
            return this.listEditor;
          case '_isNull':
            return this.yesNoSelectField;
        }
        throw new Error(this.cannotDetermineConditionInput(propertyInfo.type));

      case 'UUID':
        switch (this.operator as UuidComparisonType) {
          case '_eq':
          case '_neq':
            return this.uuidInputField;
          case '_in':
          case '_notIn':
            return this.listEditor;
          case '_isNull':
            return this.yesNoSelectField;
        }
        throw new Error(this.cannotDetermineConditionInput(propertyInfo.type));

      case 'Character':
        switch (this.operator) {
          case '_eq':
          case '_neq':
            return this.charInputField;
          case '_in':
          case '_notIn':
            return this.listEditor;
          case '_isNull':
            return this.yesNoSelectField;
        }
        throw new Error(this.cannotDetermineConditionInput(propertyInfo.type));

      default:
        throw new Error(this.cannotDetermineConditionInput(propertyInfo.type));
    }
  }

  get textInputField(): ReactNode {
    return this.createFilterInput(<Input onChange={this.onTextInputChange}/>, true);
  }

  get charInputField(): ReactNode {
    return this.createFilterInput(<CharInput onChange={this.onTextInputChange}/>, true);
  }

  get uuidInputField(): ReactNode {
    const {entityProperty} = this.props;

    const options = getDefaultFilterFormItemProps(this.props.intl, entityProperty);

    if (!options.rules) {
      options.rules = [];
    }

    options.rules.push({
      pattern: uuidPattern,
      message: this.props.intl.formatMessage({id: 'jmix.dataTable.validation.uuid'})
    });

    return this.createFilterInput(<UuidInput onChange={this.onTextInputChange}/>, true, options);
  }

  numberInputField(propertyType: NumericPropertyType): ReactNode {
    switch (propertyType) {
      case 'Integer':
        return this.createFilterInput(<IntegerInput onChange={this.onNumberInputChange}/>, true);
      case 'Double':
        return this.createFilterInput(<DoubleInput onChange={this.onNumberInputChange}/>, true);
      case 'Long':
        return this.createFilterInput(<LongInput onChange={this.onNumberInputChange}/>, true);
      case 'BigDecimal':
        return this.createFilterInput(<BigDecimalInput onChange={this.onNumberInputChange}/>, true);
      default:
        return assertNever('property type', propertyType);
    }
  }

  get selectField(): ReactNode {
    return this.createFilterInput(
      <Select dropdownMatchSelectWidth={false}
              dropdownClassName={`cuba-value-dropdown-${this.props.entityProperty}`}
              className={styles.filterSelect}
              onSelect={this.onSelectChange}>
        {this.selectFieldOptions}
      </Select>
    );
  }

  get selectFieldOptions(): ReactNodeArray {
    return this.nestedEntityOptions
      .filter(option => option.value != null)
      .map((option) => {
        return (
          <Select.Option title={option.caption}
                         value={option.value!} // Nullish values are expected to be filtered out by now
                         key={option.value}
                         className={`cuba-filter-value-${option.value}`}
          >
            {option.caption}
          </Select.Option>
        );
      })
  }

  get yesNoSelectField(): ReactNode {
    const {entityProperty} = this.props;

    const component = (
      <Select dropdownMatchSelectWidth={false}
              dropdownClassName={`cuba-value-dropdown-${this.props.entityProperty}`}
              className={styles.filterSelect}
              onSelect={this.onYesNoSelectChange}>
        <Select.Option value='true'
                       className='cuba-filter-value-true'
        >
          <FormattedMessage id='jmix.dataTable.yes'/>
        </Select.Option>
        <Select.Option value='false'
                       className='cuba-filter-value-false'
        >
          <FormattedMessage id='jmix.dataTable.no'/>
        </Select.Option>
      </Select>
    );

    return this.createFilterInput(component, false, {
      name: `${entityProperty}_yesNoSelect`,
      initialValue: 'true',
      rules: [{required: true}]
    });
  }

  get listEditor(): ReactNode {
    return (
      <Form.Item className={classNames(
        styles.filterControl,
        styles.complexEditor
      )}>
        <DataTableListEditor onChange={(value: string[] | number[]) => this.value = value}
                               id={this.props.entityProperty}
                               propertyInfo={this.propertyInfoNN}
                               nestedEntityOptions={this.nestedEntityOptions}
        />
      </Form.Item>
    );
  }

  get intervalEditor(): ReactNode {
    return (
      <Form.Item className={classNames(
        styles.filterControl,
        styles.complexEditor
      )}>
        <DataTableIntervalEditor onChange={(value: TemporalInterval) => this.value = value}
                                   id={this.props.entityProperty}
                                   propertyType={this.propertyInfoNN.type as PropertyType}
        />
      </Form.Item>
    );
  }

  get datePickerField(): ReactNode {
    const component = (
      <DatePicker onChange={this.onTemporalPickerChange}/>
    );
    return this.createFilterInput(component, true);
  }

  get timePickerField(): ReactNode {
    const component = (
      <TimePicker onChange={this.onTemporalPickerChange}/>
    );
    return this.createFilterInput(component, true);
  }

  get dateTimePickerField(): ReactNode {
    const component = (
      <DatePicker showTime={true}
                  onChange={this.onTemporalPickerChange}
      />
    );
    return this.createFilterInput(component, true);
  }

  createFilterInput(
    component: ReactNode, hasFeedback: boolean = false, formItemProps?: FormItemProps, additionalClassName?: string
  ): ReactNode {
    const {intl, entityProperty} = this.props;

    const name = `${entityProperty}_input`;

    if (formItemProps == null) {
      formItemProps = getDefaultFilterFormItemProps(intl, name);
    } else if (formItemProps.name == null) {
      formItemProps.name = name;
    }

    return wrapInFormItem(component, hasFeedback, formItemProps, additionalClassName);
  }

}

class DataTableIntervalEditorComponent extends React.Component<DataTableIntervalEditorProps & WrappedComponentProps> {
  mode: DataTableIntervalEditorMode = 'last';
  option: PredefinedIntervalOption = 'today';
  numberOfUnits: number = 5;
  timeUnit: TimeUnit = 'days';
  includeCurrent: boolean = false;

  constructor(props: DataTableIntervalEditorProps & WrappedComponentProps) {
    super(props);

    makeObservable(this, {
      mode: observable,
      option: observable,
      numberOfUnits: observable,
      timeUnit: observable,
      includeCurrent: observable,
      interval: computed,
      onModeChanged: action,
      onPredefinedIntervalOptionChanged: action,
      onIntervalNumberChanged: action,
      onIntervalUnitChanged: action,
      onIncludeCurrentChanged: action,
      modeSelect: computed,
      predefinedIntervals: computed,
      intervalInput: computed
    });
  }

  componentDidMount(): void {
    this.props.onChange(this.interval);
  }

  get interval(): TemporalInterval {
    return (this.mode === 'predefined')
      ? determinePredefinedInterval(this.option, this.props.propertyType as TemporalPropertyType)
      : determineLastNextXInterval(this.mode, this.numberOfUnits, this.timeUnit, this.includeCurrent, this.props.propertyType as TemporalPropertyType);
  }

  onModeChanged = (e: RadioChangeEvent) => {
    this.mode = e.target.value;
    this.props.onChange(this.interval);
  };

  onPredefinedIntervalOptionChanged = (option: PredefinedIntervalOption) => {
    this.option = option;
    this.props.onChange(this.interval);
  };

  onIntervalNumberChanged = (value: string | number | null | undefined) => {
    if (value != null && typeof value === 'number' && isFinite(value)) {
      this.numberOfUnits = value;
      this.props.onChange(this.interval);
    }
  };

  onIntervalUnitChanged = (unit: TimeUnit) => {
    this.timeUnit = unit;
    this.props.onChange(this.interval);
  };

  onIncludeCurrentChanged = (includeCurrent: CheckboxChangeEvent) => {
    this.includeCurrent = includeCurrent.target.checked;
    this.props.onChange(this.interval);
  };

  render() {
    return (
      <div className={classNames(
        filterStyles.controlsLayout,
        filterStyles.filterInterval)
      }>
        {this.modeSelect}
        {(this.mode === 'predefined') ? this.predefinedIntervals : this.intervalInput}
      </div>
    );
  }

  get modeSelect(): ReactNode {
    return (
      <Radio.Group
          className={intervalStyles.intervalModeSelect}
          onChange={this.onModeChanged}
          value={this.mode}>
        <Radio value={'last'}>
          <FormattedMessage id='jmix.dataTable.intervalEditor.last'/>
        </Radio>
        <Radio value={'next'}>
          <FormattedMessage id='jmix.dataTable.intervalEditor.next'/>
        </Radio>
        <Radio value={'predefined'}>
          <FormattedMessage id='jmix.dataTable.intervalEditor.predefined'/>
        </Radio>
      </Radio.Group>
    );
  }

  get predefinedIntervals(): ReactNode {
    return (
      <Form.Item className={filterStyles.filterControl}
                 name={`${this.props.id}_predefined`}
                 initialValue={this.option}
                 rules={[{
                   required: true,
                   message: this.props.intl.formatMessage({id: 'jmix.dataTable.validation.requiredField'})
                 }]}
      >
        <Select onChange={this.onPredefinedIntervalOptionChanged}
                dropdownMatchSelectWidth={false}
                className={intervalStyles.intervalPredefinedSelect}
        >
          <Select.Option value={'today'}>
            <FormattedMessage id='jmix.dataTable.intervalEditor.today' />
          </Select.Option>
          <Select.Option value={'yesterday'}>
            <FormattedMessage id='jmix.dataTable.intervalEditor.yesterday' />
          </Select.Option>
          <Select.Option value={'tomorrow'}>
            <FormattedMessage id='jmix.dataTable.intervalEditor.tomorrow' />
          </Select.Option>
          <Select.Option value={'lastMonth'}>
            <FormattedMessage id='jmix.dataTable.intervalEditor.lastMonth' />
          </Select.Option>
          <Select.Option value={'thisMonth'}>
            <FormattedMessage id='jmix.dataTable.intervalEditor.thisMonth' />
          </Select.Option>
          <Select.Option value={'nextMonth'}>
            <FormattedMessage id='jmix.dataTable.intervalEditor.nextMonth' />
          </Select.Option>
        </Select>
      </Form.Item>
    );
  }

  get intervalInput(): ReactNode {
    return (
      <div className={filterStyles.controlsLayout}>
        <Form.Item key={`${this.props.id}.wrap.number`}
                   className={filterStyles.filterControl}
                   name={`${this.props.id}_number`}
                   initialValue={this.numberOfUnits}
                   rules={[{
                     required: true,
                     message: this.props.intl.formatMessage({id: 'jmix.dataTable.validation.requiredField'})
                   }]}
        >
          <InputNumber onChange={this.onIntervalNumberChanged}/>
        </Form.Item>
        <Form.Item key={`${this.props.id}.wrap.unit`} className={filterStyles.filterControl}>
          <Select defaultValue={this.timeUnit}
                  onChange={this.onIntervalUnitChanged}
                  dropdownMatchSelectWidth={false}>
            <Select.Option value={'days'}>
              <FormattedMessage id='jmix.dataTable.intervalEditor.days' />
            </Select.Option>
            <Select.Option value={'hours'}>
              <FormattedMessage id='jmix.dataTable.intervalEditor.hours' />
            </Select.Option>
            <Select.Option value={'minutes'}>
              <FormattedMessage id='jmix.dataTable.intervalEditor.minutes' />
            </Select.Option>
            <Select.Option value={'months'}>
              <FormattedMessage id='jmix.dataTable.intervalEditor.months' />
            </Select.Option>
          </Select>
        </Form.Item>
        <Form.Item key={`${this.props.id}.wrap.includeCurrent`} className={filterStyles.filterControl}>
          <Checkbox onChange={this.onIncludeCurrentChanged}
                    className={intervalStyles.intervalIncludeCurrent}
                    defaultChecked={this.includeCurrent}>
            <FormattedMessage id='jmix.dataTable.intervalEditor.includingCurrent' />
          </Checkbox>
        </Form.Item>
      </div>
    );
  }

}