From 09f21e81303e37ae1f1a12aeacaae237ee3fac2c Mon Sep 17 00:00:00 2001
From: AllenFang <ayu780129@hotmail.com>
Date: Sun, 24 Feb 2019 16:11:38 +0800
Subject: [PATCH] allow to custom className on clear search and export csv
 button

---
 .../examples/bootstrap4/toolkits.js           | 90 +++++++++++++++++++
 .../stories/index.js                          |  4 +-
 .../src/csv/button.js                         |  4 +-
 .../src/search/clear-button.js                |  9 +-
 4 files changed, 102 insertions(+), 5 deletions(-)
 create mode 100644 packages/react-bootstrap-table2-example/examples/bootstrap4/toolkits.js

diff --git a/packages/react-bootstrap-table2-example/examples/bootstrap4/toolkits.js b/packages/react-bootstrap-table2-example/examples/bootstrap4/toolkits.js
new file mode 100644
index 0000000..4313cf0
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/bootstrap4/toolkits.js
@@ -0,0 +1,90 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { Search, CSVExport } from 'react-bootstrap-table2-toolkit';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const { SearchBar, ClearSearchButton } = Search;
+const { ExportCSVButton } = CSVExport;
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { Search, CSVExport } from 'react-bootstrap-table2-toolkit';
+
+const { SearchBar, ClearSearchButton } = Search;
+const { ExportCSVButton } = CSVExport;
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  search
+>
+  {
+    props => (
+      <div>
+        <h3>Input something at below input field:</h3>
+        <SearchBar { ...props.searchProps } />
+        <ClearSearchButton { ...props.searchProps } />
+        <hr />
+        <BootstrapTable
+          { ...props.baseProps }
+        />
+        <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
+      </div>
+    )
+  }
+</ToolkitProvider>
+`;
+
+export default () => (
+  <div>
+    <ToolkitProvider
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      search
+    >
+      {
+        props => (
+          <div>
+            <h3>Input something at below input field:</h3>
+            <SearchBar { ...props.searchProps } />
+            <ClearSearchButton { ...props.searchProps } />
+            <hr />
+            <BootstrapTable
+              { ...props.baseProps }
+            />
+            <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    <Code>{ sourceCode }</Code>
+  </div>
+);
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index 4265375..39be4b7 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -21,6 +21,7 @@ import Bootstrap4DefaultSortTable from 'examples/bootstrap4/sort';
 import Bootstrap4RowSelectionTable from 'examples/bootstrap4/row-selection';
 import Bootstrap4PaginationTable from 'examples/bootstrap4/pagination';
 import Bootstrap4ColumnToggleTable from 'examples/bootstrap4/column-toggle';
+import ToolkitsTable from 'examples/bootstrap4/toolkits';
 
 // work on columns
 import NestedDataTable from 'examples/columns/nested-data-table';
@@ -249,7 +250,8 @@ storiesOf('Bootstrap 4', module)
   .add('Sort table with bootstrap 4', () => <Bootstrap4DefaultSortTable />)
   .add('Row selection table with bootstrap 4', () => <Bootstrap4RowSelectionTable />)
   .add('Pagination table with bootstrap 4', () => <Bootstrap4PaginationTable />)
-  .add('Column Toggle with bootstrap 4', () => <Bootstrap4ColumnToggleTable />);
+  .add('Column Toggle with bootstrap 4', () => <Bootstrap4ColumnToggleTable />)
+  .add('toolkits Table bootstrap 4', () => <ToolkitsTable />);
 
 storiesOf('Work on Columns', module)
   .addDecorator(bootstrapStyle())
diff --git a/packages/react-bootstrap-table2-toolkit/src/csv/button.js b/packages/react-bootstrap-table2-toolkit/src/csv/button.js
index e85d7ee..18faf48 100644
--- a/packages/react-bootstrap-table2-toolkit/src/csv/button.js
+++ b/packages/react-bootstrap-table2-toolkit/src/csv/button.js
@@ -5,12 +5,14 @@ const ExportCSVButton = (props) => {
   const {
     onExport,
     children,
+    className,
     ...rest
   } = props;
 
   return (
     <button
       type="button"
+      className={ `react-bs-table-csv-btn btn btn-default ${className}` }
       onClick={ () => onExport() }
       { ...rest }
     >
@@ -26,7 +28,7 @@ ExportCSVButton.propTypes = {
   style: PropTypes.object
 };
 ExportCSVButton.defaultProps = {
-  className: 'react-bs-table-csv-btn btn btn-default',
+  className: '',
   style: {}
 };
 
diff --git a/packages/react-bootstrap-table2-toolkit/src/search/clear-button.js b/packages/react-bootstrap-table2-toolkit/src/search/clear-button.js
index 291f900..f01adaf 100644
--- a/packages/react-bootstrap-table2-toolkit/src/search/clear-button.js
+++ b/packages/react-bootstrap-table2-toolkit/src/search/clear-button.js
@@ -3,18 +3,21 @@ import PropTypes from 'prop-types';
 
 const ClearButton = ({
   onClear,
-  text
+  text,
+  className
 }) => (
-  <button className="btn btn-default" onClick={ onClear }>{ text }</button>
+  <button className={ `btn btn-default ${className}` } onClick={ onClear }>{ text }</button>
 );
 
 ClearButton.propTypes = {
   onClear: PropTypes.func.isRequired,
+  className: PropTypes.string,
   text: PropTypes.string
 };
 
 ClearButton.defaultProps = {
-  text: 'Clear'
+  text: 'Clear',
+  className: ''
 };
 
 export default ClearButton;