From e6d4a9641bf7bf3c5542d5ecd3fb69b0337efb84 Mon Sep 17 00:00:00 2001
From: AllenFang <ayu780129@hotmail.com>
Date: Tue, 3 Jul 2018 23:26:57 +0800
Subject: [PATCH] data, keyField and columns is necessary value for toolkits
 context

---
 .../examples/remote/remote-search.js          | 34 +++++++++++++------
 .../examples/search/custom-search-value.js    | 22 +++++++-----
 .../examples/search/default-custom-search.js  | 20 ++++++-----
 .../examples/search/fully-custom-search.js    | 21 +++++++-----
 .../examples/search/index.js                  | 20 ++++++-----
 .../examples/search/search-formatted.js       | 24 +++++++------
 .../react-bootstrap-table2-toolkit/context.js | 12 ++++++-
 .../src/contexts/index.js                     |  2 +-
 8 files changed, 100 insertions(+), 55 deletions(-)

diff --git a/packages/react-bootstrap-table2-example/examples/remote/remote-search.js b/packages/react-bootstrap-table2-example/examples/remote/remote-search.js
index 7bad91a..1056229 100644
--- a/packages/react-bootstrap-table2-example/examples/remote/remote-search.js
+++ b/packages/react-bootstrap-table2-example/examples/remote/remote-search.js
@@ -40,15 +40,27 @@ const columns = [{
 
 const RemoteFilter = props => (
   <div>
-    <BootstrapTable
-      remote={ { filter: true } }
+    <ToolkitContext.Provider
       keyField="id"
       data={ props.data }
       columns={ columns }
-      filter={ filterFactory() }
-      onTableChange={ props.onTableChange }
-    />
-    <Code>{ sourceCode }</Code>
+    >
+      <ToolkitContext.Consumer>
+        {
+          toolkitprops => [
+            <SearchBar { ...toolkitprops.searchProps } />,
+            <BootstrapTable
+              { ...toolkitprops.baseProps }
+              remote={ { search: true } }
+              onTableChange={ props.onTableChange }
+              search={ searchFactory({
+                ...toolkitprops.searchProps
+              }) }
+            />
+          ]
+        }
+      </ToolkitContext.Consumer>
+    </ToolkitContext.Provider>
   </div>
 );
 
@@ -97,16 +109,18 @@ class Container extends React.Component {
 
 const RemoteFilter = props => (
   <div>
-    <ToolkitContext.Provider>
+    <ToolkitContext.Provider
+      keyField="id"
+      data={ props.data }
+      columns={ columns }
+    >
       <ToolkitContext.Consumer>
         {
           toolkitprops => [
             <SearchBar { ...toolkitprops.searchProps } />,
             <BootstrapTable
+              { ...toolkitprops.baseProps }
               remote={ { search: true } }
-              keyField="id"
-              data={ props.data }
-              columns={ columns }
               onTableChange={ props.onTableChange }
               search={ searchFactory({
                 ...toolkitprops.searchProps
diff --git a/packages/react-bootstrap-table2-example/examples/search/custom-search-value.js b/packages/react-bootstrap-table2-example/examples/search/custom-search-value.js
index 06530a8..185d4ef 100644
--- a/packages/react-bootstrap-table2-example/examples/search/custom-search-value.js
+++ b/packages/react-bootstrap-table2-example/examples/search/custom-search-value.js
@@ -55,18 +55,20 @@ const columns = [{
   filterValue: (cell, row) => types[cell] // we will search the value after filterValue called
 }];
 
-<ToolkitContext.Provider>
+<ToolkitContext.Provider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+>
   <ToolkitContext.Consumer>
     {
       props => (
         <div>
-          <h3>Input something at below input field:</h3>
+          <h3>Try to Search Bob, Cat or Allen instead of 0, 1 or 2</h3>
           <SearchBar { ...props.searchProps } />
           <hr />
           <BootstrapTable
-            keyField="id"
-            data={ products }
-            columns={ columns }
+            { ...props.baseProps }
             search={ searchFactory({
               ...props.searchProps
             }) }
@@ -80,7 +82,11 @@ const columns = [{
 
 export default () => (
   <div>
-    <ToolkitContext.Provider>
+    <ToolkitContext.Provider
+      keyField="id"
+      data={ products }
+      columns={ columns }
+    >
       <ToolkitContext.Consumer>
         {
           props => (
@@ -89,9 +95,7 @@ export default () => (
               <SearchBar { ...props.searchProps } />
               <hr />
               <BootstrapTable
-                keyField="id"
-                data={ products }
-                columns={ columns }
+                { ...props.baseProps }
                 search={ searchFactory({
                   ...props.searchProps
                 }) }
diff --git a/packages/react-bootstrap-table2-example/examples/search/default-custom-search.js b/packages/react-bootstrap-table2-example/examples/search/default-custom-search.js
index 567110b..146a6ac 100644
--- a/packages/react-bootstrap-table2-example/examples/search/default-custom-search.js
+++ b/packages/react-bootstrap-table2-example/examples/search/default-custom-search.js
@@ -36,7 +36,11 @@ const columns = [{
   text: 'Product Price'
 }];
 
-<ToolkitContext.Provider>
+<ToolkitContext.Provider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+>
   <ToolkitContext.Consumer>
     {
       props => (
@@ -51,9 +55,7 @@ const columns = [{
           />
           <hr />
           <BootstrapTable
-            keyField="id"
-            data={ products }
-            columns={ columns }
+            { ...props.baseProps }
             search={ searchFactory({
               ...props.searchProps
             }) }
@@ -67,7 +69,11 @@ const columns = [{
 
 export default () => (
   <div>
-    <ToolkitContext.Provider>
+    <ToolkitContext.Provider
+      keyField="id"
+      data={ products }
+      columns={ columns }
+    >
       <ToolkitContext.Consumer>
         {
           props => (
@@ -82,9 +88,7 @@ export default () => (
               />
               <hr />
               <BootstrapTable
-                keyField="id"
-                data={ products }
-                columns={ columns }
+                { ...props.baseProps }
                 search={ searchFactory({
                   ...props.searchProps
                 }) }
diff --git a/packages/react-bootstrap-table2-example/examples/search/fully-custom-search.js b/packages/react-bootstrap-table2-example/examples/search/fully-custom-search.js
index eb96b47..9b5149a 100644
--- a/packages/react-bootstrap-table2-example/examples/search/fully-custom-search.js
+++ b/packages/react-bootstrap-table2-example/examples/search/fully-custom-search.js
@@ -55,20 +55,23 @@ const MySearch = (props) => {
   );
 };
 
-<ToolkitContext.Provider>
+<ToolkitContext.Provider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+>
   <ToolkitContext.Consumer>
     {
       props => (
         <div>
           <BootstrapTable
-            keyField="id"
-            data={ products }
-            columns={ columns }
+            { ...props.baseProps }
             search={ searchFactory({
               ...props.searchProps
             }) }
           />
           <MySearch { ...props.searchProps } />
+          <br />
         </div>
       )
     }
@@ -96,15 +99,17 @@ const MySearch = (props) => {
 
 export default () => (
   <div>
-    <ToolkitContext.Provider>
+    <ToolkitContext.Provider
+      keyField="id"
+      data={ products }
+      columns={ columns }
+    >
       <ToolkitContext.Consumer>
         {
           props => (
             <div>
               <BootstrapTable
-                keyField="id"
-                data={ products }
-                columns={ columns }
+                { ...props.baseProps }
                 search={ searchFactory({
                   ...props.searchProps
                 }) }
diff --git a/packages/react-bootstrap-table2-example/examples/search/index.js b/packages/react-bootstrap-table2-example/examples/search/index.js
index 17ac96b..7435905 100644
--- a/packages/react-bootstrap-table2-example/examples/search/index.js
+++ b/packages/react-bootstrap-table2-example/examples/search/index.js
@@ -36,7 +36,11 @@ const columns = [{
   text: 'Product Price'
 }];
 
-<ToolkitContext.Provider>
+<ToolkitContext.Provider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+>
   <ToolkitContext.Consumer>
     {
       props => (
@@ -45,9 +49,7 @@ const columns = [{
           <SearchBar { ...props.searchProps } />
           <hr />
           <BootstrapTable
-            keyField="id"
-            data={ products }
-            columns={ columns }
+            { ...props.baseProps }
             search={ searchFactory({
               ...props.searchProps
             }) }
@@ -61,7 +63,11 @@ const columns = [{
 
 export default () => (
   <div>
-    <ToolkitContext.Provider>
+    <ToolkitContext.Provider
+      keyField="id"
+      data={ products }
+      columns={ columns }
+    >
       <ToolkitContext.Consumer>
         {
           props => (
@@ -70,9 +76,7 @@ export default () => (
               <SearchBar { ...props.searchProps } />
               <hr />
               <BootstrapTable
-                keyField="id"
-                data={ products }
-                columns={ columns }
+                { ...props.baseProps }
                 search={ searchFactory({
                   ...props.searchProps
                 }) }
diff --git a/packages/react-bootstrap-table2-example/examples/search/search-formatted.js b/packages/react-bootstrap-table2-example/examples/search/search-formatted.js
index 97ab4af..c08f379 100644
--- a/packages/react-bootstrap-table2-example/examples/search/search-formatted.js
+++ b/packages/react-bootstrap-table2-example/examples/search/search-formatted.js
@@ -38,21 +38,23 @@ const columns = [{
   formatter: cell => \`USD \${cell}\`  // we will search the data after formatted
 }];
 
-<ToolkitContext.Provider>
+<ToolkitContext.Provider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+>
   <ToolkitContext.Consumer>
     {
       props => (
         <div>
-          <h3>Input something at below input field:</h3>
+          <h3>Try to Search USD at below input field:</h3>
           <SearchBar { ...props.searchProps } />
           <hr />
           <BootstrapTable
-            keyField="id"
-            data={ products }
-            columns={ columns }
+            { ...props.baseProps }
             search={ searchFactory({
               ...props.searchProps,
-              searchFormatted: true  // enable searchFormatted
+              searchFormatted: true
             }) }
           />
         </div>
@@ -64,7 +66,11 @@ const columns = [{
 
 export default () => (
   <div>
-    <ToolkitContext.Provider>
+    <ToolkitContext.Provider
+      keyField="id"
+      data={ products }
+      columns={ columns }
+    >
       <ToolkitContext.Consumer>
         {
           props => (
@@ -73,9 +79,7 @@ export default () => (
               <SearchBar { ...props.searchProps } />
               <hr />
               <BootstrapTable
-                keyField="id"
-                data={ products }
-                columns={ columns }
+                { ...props.baseProps }
                 search={ searchFactory({
                   ...props.searchProps,
                   searchFormatted: true
diff --git a/packages/react-bootstrap-table2-toolkit/context.js b/packages/react-bootstrap-table2-toolkit/context.js
index 31373fa..b86a4da 100644
--- a/packages/react-bootstrap-table2-toolkit/context.js
+++ b/packages/react-bootstrap-table2-toolkit/context.js
@@ -1,10 +1,18 @@
 /* eslint react/prop-types: 0 */
 /* eslint react/require-default-props: 0 */
 import React from 'react';
+import PropTypes from 'prop-types';
 
 const ToolkitContext = React.createContext();
 
 class ToolkitProvider extends React.Component {
+  static propTypes = {
+    keyField: PropTypes.string.isRequired,
+    data: PropTypes.array.isRequired,
+    columns: PropTypes.array.isRequired,
+    children: PropTypes.node.isRequired
+  }
+
   constructor(props) {
     super(props);
     this.test = false;
@@ -23,9 +31,11 @@ class ToolkitProvider extends React.Component {
   }
 
   render() {
+    const { keyField, columns, data } = this.props;
     return (
       <ToolkitContext.Provider value={ {
-        searchProps: this.searchProps
+        searchProps: this.searchProps,
+        baseProps: { keyField, columns, data }
       } }
       >
         { this.props.children }
diff --git a/packages/react-bootstrap-table2/src/contexts/index.js b/packages/react-bootstrap-table2/src/contexts/index.js
index d434478..e95ea27 100644
--- a/packages/react-bootstrap-table2/src/contexts/index.js
+++ b/packages/react-bootstrap-table2/src/contexts/index.js
@@ -13,7 +13,7 @@ const withContext = Base =>
   class BootstrapTableContainer extends remoteResolver(Component) {
     constructor(props) {
       super(props);
-      this.DataContext = createDataContext(props.data);
+      this.DataContext = createDataContext();
 
       if (props.columns.filter(col => col.sort).length > 0) {
         this.SortContext = createSortContext(