vitess.io/vitess@v0.16.2/web/vtadmin/src/components/dataTable/DataFilter.tsx (about)

     1  /**
     2   * Copyright 2021 The Vitess Authors.
     3   *
     4   * Licensed under the Apache License, Version 2.0 (the "License");
     5   * you may not use this file except in compliance with the License.
     6   * You may obtain a copy of the License at
     7   *
     8   *     http://www.apache.org/licenses/LICENSE-2.0
     9   *
    10   * Unless required by applicable law or agreed to in writing, software
    11   * distributed under the License is distributed on an "AS IS" BASIS,
    12   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    13   * See the License for the specific language governing permissions and
    14   * limitations under the License.
    15   */
    16  import React from 'react';
    17  
    18  import { Icons } from '../Icon';
    19  import { TextInput } from '../TextInput';
    20  import style from './DataFilter.module.scss';
    21  
    22  interface Props {
    23      autoFocus?: boolean;
    24      onChange?: React.ChangeEventHandler<HTMLInputElement>;
    25      onClear?: React.MouseEventHandler<HTMLButtonElement>;
    26      placeholder?: string;
    27      value?: string | null | undefined;
    28  }
    29  
    30  export const DataFilter = ({ autoFocus, onChange, onClear, placeholder, value }: Props) => {
    31      return (
    32          <div className={style.controls}>
    33              <TextInput
    34                  autoFocus={autoFocus}
    35                  iconLeft={Icons.search}
    36                  onChange={onChange}
    37                  placeholder={placeholder}
    38                  value={value || ''}
    39              />
    40              <button className="btn btn-secondary" disabled={!value} onClick={onClear} type="button">
    41                  Clear filters
    42              </button>
    43          </div>
    44      );
    45  };