【react-bootstrap-table2】検索バーとカラムのフィルターを1つのボタンでクリアする

[react-bootstrap-table2](https://github.com/react-bootstrap-table/react-bootstrap-table2) では以下の公式デモが公開されていますが、1つのボタンで検索バーとフィルターをクリアするものは公開されていません。

- [検索バーをクリアするデモ](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Table%20Search&selectedStory=Clear%20Search%20Button&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel)
- [カラムのフィルターをクリアするデモ](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Column%20Filter&selectedStory=Clear%20All%20Filters&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel)

ちょうど上記のようなボタンが必要だったので、上記デモを参考に作ってみました。

[こちら](https://codesandbox.io/s/confident-river-v6w8e) が CodeSandbox で公開しているデモです。

## Requirements
- React 16.8.6
- react-bootstrap-table-next 3.1.8
- react-bootstrap-table2-filter 1.1.11
- react-bootstrap-table2-toolkit 2.0.1

## 公式デモ・ソースの確認
### 1. [カラムのフィルターをクリアするデモ](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Column%20Filter&selectedStory=Clear%20All%20Filters&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel)

ボタンがクリックすされた時に、各フィルターに空文字を渡してクリアしてます。

```javascript

const handleClick = () => {
  nameFilter('');
  priceFilter('');
  stockDateFilter();
};

export default () => (
  <div>
    <button onClick={ handleClick }> Clear all filters </button>
    <BootstrapTable
      keyField="id"
      data={ products }
      columns={ columns }
      filter={ filterFactory() }
    />
  </div>
);
```
`handleClick` 内で検索バーをクリアする処理を入れてあげればできそうです。

### 2. [検索バーをクリアするデモ](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Column%20Filter&selectedStory=Clear%20All%20Filters&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel)

どうやって検索バーがクリアされてるのかさっぱり分かりません。

```javascript

import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';

const { SearchBar, ClearSearchButton } = Search;

<ToolkitProvider
  keyField="id"
  data={ products }
  columns={ columns }
  search
>
  {
    props => (
      <div>
        <SearchBar { ...props.searchProps } />
        <ClearSearchButton { ...props.searchProps } />
      </div>
    )
  }
</ToolkitProvider>
```
GitHub のソースをみてみます。

### 3. [検索バーのソース](https://github.com/react-bootstrap-table/react-bootstrap-table2/blob/master/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js)
以下をもとにソースの場所を探してみました。

```javascript

import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
```

ソースを眺めてみると、キーボード入力がされた際に実行される処理の中にそれっぽいものがありました。

```javascript

onKeyup = () => {
    const { delay, onSearch } = this.props;
    const debounceCallback = handleDebounce(() => {
      onSearch(this.input.value);
    }, delay);
    debounceCallback();
}
```
キーボード入力された値（`this.input.value`）を `onSearch` にいれています。  
ここに空文字をいれれば検索バーがクリアできそうです。


## 手順
### 1. `ClearButton` に `searchProps` と `clearAllFilter` を渡す
- カラムのフィルターをクリアする関数

```javascript

clearAllFilter() {
    nameFilter("");
    priceFilter("");
    originFilter("");
    stockFilter("");
}
```
```
<ClearButton
    {...props.searchProps}
    clearAllFilter={this.clearAllFilter}
/>
```

### 2. `ClearButton` が押された時に検索バー（`onSearch("")`）とフィルターをクリアする処理（`clearAllFilter()`）を実行させる
```javascript

const ClearButton = props => {
  const handleClick = () => {
    props.onSearch("");
    props.clearAllFilter();
  };
  return (
    <Button
      onClick={handleClick}
    >
      Clear
    </Button>
  );
};
```

## おわりに
react-bootstrap-table は廃止予定なので積極的に react-bootstrap-table2 を使いましょう。

## Reference
- [デモ](https://codesandbox.io/s/confident-river-v6w8e)
- [react-bootstrap-table2: 公式デモ](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Welcome&selectedStory=react%20bootstrap%20table%202%20&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel)