Custom numeric filter cell with filter operator DropDownList

 
import { NumericTextBox, NumericTextBoxChangeEvent } from"@progress/kendo-react-inputs";
import { GridFilterCellProps } from"@progress/kendo-react-grid";
import { Button } from"@progress/kendo-react-buttons";
importReact, { useState } from"react";
import { DropDownList } from"@progress/kendo-react-dropdowns/dist/npm/DropDownList/DropDownList";
import { DropDownListChangeEvent } from"@progress/kendo-react-dropdowns";
import { KendoReactNumericFilterFormat } from"./KendoReactNumericFilterFormat";

exporttypeCustomNumericFilterCellProps = {
  gridFilterCellProps: GridFilterCellProps;
  format: KendoReactNumericFilterFormat;
};

typeNumericFilterOperatorType = {
  text: string;
  operator: string;
};

constnumericFilterOperators: NumericFilterOperatorType[] = [
  { text: "Is equal to", operator: "eq" },
  { text: "Is not equal to", operator: "neq" },
  { text: "Is greater than or equal", operator: "gte" },
  { text: "Is greater than", operator: "gt" },
  { text: "Is less than or equal", operator: "lte" },
  { text: "Is less than", operator: "lt" },
  { text: "Is null", operator: "isnull" },
  { text: "Is not null", operator: "isnotnull" },
];

exportconstCustomNumericFilterCell = ({
  gridFilterCellProps,
  format,
}: CustomNumericFilterCellProps) => {
  const { onChange: filterCellPropsOnChange } = gridFilterCellProps;

  const [filterCellValue, setFilterCellValue] = useState<number | null>(null);
  const [isFilterActive, setIsFilterActive] = useState<boolean>(false);
  const [selectedOperator, setSelectedOperator] = useState<NumericFilterOperatorType>(
    numericFilterOperators[0]
  );

  constnumericTextBoxOnChange = (event: NumericTextBoxChangeEvent) => {
    const { value: filterValue } = event.target;
    setFilterCellValue(filterValue);
    setIsFilterActive(true);

    filterCellPropsOnChange({
      value: filterValue,
      operator: filterValue ? selectedOperator.operator : "",
      syntheticEvent: event.syntheticEvent,
    });
  };

  constonButtonClearClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    event.preventDefault();
    setFilterCellValue(null);
    setIsFilterActive(false);
    setSelectedOperator(numericFilterOperators[0]);

    filterCellPropsOnChange({
      value: "",
      operator: "",
      syntheticEvent: event,
    });
  };

  constdropdownlistOnChange = (event: DropDownListChangeEvent) => {
    const operator = event.valueasNumericFilterOperatorType;
    setSelectedOperator(operator);
    setIsFilterActive(true);
  };

  return (
    <div className="k-filtercell">
      <NumericTextBox
        style={{ marginRight: "4px" }}
        onChange={numericTextBoxOnChange}
        format={format}
        value={filterCellValue}
      />

      <DropDownList
        data={numericFilterOperators}
        textField="text"
        dataItemKey="operator"
        onChange={dropdownlistOnChange}
        value={numericFilterOperators.find((item) => item.operator === selectedOperator.operator)}
        popupSettings={{ width: "180px" }}
        className="k-dropdownlist k-picker k-dropdown-operator k-picker-md k-rounded-md k-picker-solid"
        iconClassName="k-icon k-i-filter k-button-icon"
        style={{ marginRight: "4px" }}
      />

      <Button
        title="Clear"
        className="k-button-md"
        onClick={onButtonClearClick}
        disabled={!isFilterActive}
      >
        <span
          className={`k-icon k-i-filter-clear k-button-icon ${
            !isFilterActive ? "k-disabled" : "k-clear-button-visible"
          }`}
        />
      </Button>
    </div>
  );
};