add simple toolkit context wrapper for user

packages/react-bootstrap-table2-example/examples/remote/remote-search.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import BootstrapTable from 'react-bootstrap-table-next';
-import ToolkitContext, { Search } from 'react-bootstrap-table2-toolkit';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
@@ -23,6 +23,7 @@ const columns = [{
 
 const sourceCode = `\
 import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
 import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
 
 const columns = [{
@@ -40,27 +41,25 @@ const columns = [{
 
 const RemoteFilter = props => (
   <div>
-    <ToolkitContext.Provider
+    <ToolkitProvider
       keyField="id"
       data={ props.data }
       columns={ columns }
     >
-      <ToolkitContext.Consumer>
-        {
-          toolkitprops => [
-            <SearchBar { ...toolkitprops.searchProps } />,
-            <BootstrapTable
-              { ...toolkitprops.baseProps }
-              remote={ { search: true } }
-              onTableChange={ props.onTableChange }
-              search={ searchFactory({
-                ...toolkitprops.searchProps
-              }) }
-            />
-          ]
-        }
-      </ToolkitContext.Consumer>
-    </ToolkitContext.Provider>
+      {
+        toolkitprops => [
+          <SearchBar { ...toolkitprops.searchProps } />,
+          <BootstrapTable
+            { ...toolkitprops.baseProps }
+            remote={ { search: true } }
+            onTableChange={ props.onTableChange }
+            search={ searchFactory({
+              ...toolkitprops.searchProps
+            }) }
+          />
+        ]
+      }
+    </ToolkitProvider>
   </div>
 );
 
@@ -109,27 +108,25 @@ class Container extends React.Component {
 
 const RemoteFilter = props => (
   <div>
-    <ToolkitContext.Provider
+    <ToolkitProvider
       keyField="id"
       data={ props.data }
       columns={ columns }
     >
-      <ToolkitContext.Consumer>
-        {
-          toolkitprops => [
-            <SearchBar { ...toolkitprops.searchProps } />,
-            <BootstrapTable
-              { ...toolkitprops.baseProps }
-              remote={ { search: true } }
-              onTableChange={ props.onTableChange }
-              search={ searchFactory({
-                ...toolkitprops.searchProps
-              }) }
-            />
-          ]
-        }
-      </ToolkitContext.Consumer>
-    </ToolkitContext.Provider>
+      {
+        toolkitprops => [
+          <SearchBar { ...toolkitprops.searchProps } />,
+          <BootstrapTable
+            { ...toolkitprops.baseProps }
+            remote={ { search: true } }
+            onTableChange={ props.onTableChange }
+            search={ searchFactory({
+              ...toolkitprops.searchProps
+            }) }
+          />
+        ]
+      }
+    </ToolkitProvider>
     <Code>{ sourceCode }</Code>
   </div>
 );

packages/react-bootstrap-table2-example/examples/search/custom-search-value.js

@@ -3,7 +3,7 @@
 import React from 'react';
 
 import BootstrapTable from 'react-bootstrap-table-next';
-import ToolkitContext, { Search } from 'react-bootstrap-table2-toolkit';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
 import Code from 'components/common/code-block';
 import { jobsGenerator1 } from 'utils/common';
 
@@ -32,7 +32,7 @@ const columns = [{
 
 const sourceCode = `\
 import BootstrapTable from 'react-bootstrap-table-next';
-import ToolkitContext, { Search } from 'react-bootstrap-table2-toolkit';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
 
 const { SearchBar, searchFactory } = Search;
 const owners = ['Allen', 'Bob', 'Cat'];
@@ -55,56 +55,52 @@ const columns = [{
   filterValue: (cell, row) => types[cell] // we will search the value after filterValue called
 }];
 
-<ToolkitContext.Provider
+<ToolkitProvider
   keyField="id"
   data={ products }
   columns={ columns }
 >
-  <ToolkitContext.Consumer>
-    {
-      props => (
-        <div>
-          <h3>Try to Search Bob, Cat or Allen instead of 0, 1 or 2</h3>
-          <SearchBar { ...props.searchProps } />
-          <hr />
-          <BootstrapTable
-            { ...props.baseProps }
-            search={ searchFactory({
-              ...props.searchProps
-            }) }
-          />
-        </div>
-      )
-    }
-  </ToolkitContext.Consumer>
-</ToolkitContext.Provider>
+  {
+    props => (
+      <div>
+        <h3>Try to Search Bob, Cat or Allen instead of 0, 1 or 2</h3>
+        <SearchBar { ...props.searchProps } />
+        <hr />
+        <BootstrapTable
+          { ...props.baseProps }
+          search={ searchFactory({
+            ...props.searchProps
+          }) }
+        />
+      </div>
+    )
+  }
+</ToolkitProvider>
 `;
 
 export default () => (
   <div>
-    <ToolkitContext.Provider
+    <ToolkitProvider
       keyField="id"
       data={ products }
       columns={ columns }
     >
-      <ToolkitContext.Consumer>
-        {
-          props => (
-            <div>
-              <h3>Try to Search Bob, Cat or Allen instead of 0, 1 or 2</h3>
-              <SearchBar { ...props.searchProps } />
-              <hr />
-              <BootstrapTable
-                { ...props.baseProps }
-                search={ searchFactory({
-                  ...props.searchProps
-                }) }
-              />
-            </div>
-          )
-        }
-      </ToolkitContext.Consumer>
-    </ToolkitContext.Provider>
+      {
+        props => (
+          <div>
+            <h3>Try to Search Bob, Cat or Allen instead of 0, 1 or 2</h3>
+            <SearchBar { ...props.searchProps } />
+            <hr />
+            <BootstrapTable
+              { ...props.baseProps }
+              search={ searchFactory({
+                ...props.searchProps
+              }) }
+            />
+          </div>
+        )
+      }
+    </ToolkitProvider>
     <Code>{ sourceCode }</Code>
   </div>
 );

packages/react-bootstrap-table2-example/examples/search/default-custom-search.js

@@ -2,7 +2,7 @@
 import React from 'react';
 
 import BootstrapTable from 'react-bootstrap-table-next';
-import ToolkitContext, { Search } from 'react-bootstrap-table2-toolkit';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
@@ -22,7 +22,7 @@ const columns = [{
 
 const sourceCode = `\
 import BootstrapTable from 'react-bootstrap-table-next';
-import ToolkitContext, { Search } from 'react-bootstrap-table2-toolkit';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
 
 const { SearchBar, searchFactory } = Search;
 const columns = [{
@@ -36,68 +36,64 @@ const columns = [{
   text: 'Product Price'
 }];
 
-<ToolkitContext.Provider
+<ToolkitProvider
   keyField="id"
   data={ products }
   columns={ columns }
 >
-  <ToolkitContext.Consumer>
-    {
-      props => (
-        <div>
-          <h3>Input something at below input field:</h3>
-          <SearchBar
-            { ...props.searchProps }
-            className="custome-search-field"
-            style={ { color: 'white' } }
-            delay={ 1000 }
-            placeholder="Search Something!!!"
-          />
-          <hr />
-          <BootstrapTable
-            { ...props.baseProps }
-            search={ searchFactory({
-              ...props.searchProps
-            }) }
-          />
-        </div>
-      )
-    }
-  </ToolkitContext.Consumer>
-</ToolkitContext.Provider>
+  {
+    props => (
+      <div>
+        <h3>Input something at below input field:</h3>
+        <SearchBar
+          { ...props.searchProps }
+          className="custome-search-field"
+          style={ { color: 'white' } }
+          delay={ 1000 }
+          placeholder="Search Something!!!"
+        />
+        <hr />
+        <BootstrapTable
+          { ...props.baseProps }
+          search={ searchFactory({
+            ...props.searchProps
+          }) }
+        />
+      </div>
+    )
+  }
+</ToolkitProvider>
 `;
 
 export default () => (
   <div>
-    <ToolkitContext.Provider
+    <ToolkitProvider
       keyField="id"
       data={ products }
       columns={ columns }
     >
-      <ToolkitContext.Consumer>
-        {
-          props => (
-            <div>
-              <h3>Input something at below input field:</h3>
-              <SearchBar
-                { ...props.searchProps }
-                className="custome-search-field"
-                style={ { color: 'white' } }
-                delay={ 1000 }
-                placeholder="Search Something!!!"
-              />
-              <hr />
-              <BootstrapTable
-                { ...props.baseProps }
-                search={ searchFactory({
-                  ...props.searchProps
-                }) }
-              />
-            </div>
-          )
-        }
-      </ToolkitContext.Consumer>
-    </ToolkitContext.Provider>
+      {
+        props => (
+          <div>
+            <h3>Input something at below input field:</h3>
+            <SearchBar
+              { ...props.searchProps }
+              className="custome-search-field"
+              style={ { color: 'white' } }
+              delay={ 1000 }
+              placeholder="Search Something!!!"
+            />
+            <hr />
+            <BootstrapTable
+              { ...props.baseProps }
+              search={ searchFactory({
+                ...props.searchProps
+              }) }
+            />
+          </div>
+        )
+      }
+    </ToolkitProvider>
     <Code>{ sourceCode }</Code>
   </div>
 );

packages/react-bootstrap-table2-example/examples/search/fully-custom-search.js

@@ -3,7 +3,7 @@
 import React from 'react';
 
 import BootstrapTable from 'react-bootstrap-table-next';
-import ToolkitContext, { Search } from 'react-bootstrap-table2-toolkit';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
@@ -23,7 +23,7 @@ const columns = [{
 
 const sourceCode = `\
 import BootstrapTable from 'react-bootstrap-table-next';
-import ToolkitContext, { Search } from 'react-bootstrap-table2-toolkit';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
 
 const { searchFactory } = Search;
 const columns = [{
@@ -55,28 +55,26 @@ const MySearch = (props) => {
   );
 };
 
-<ToolkitContext.Provider
+<ToolkitProvider
   keyField="id"
   data={ products }
   columns={ columns }
 >
-  <ToolkitContext.Consumer>
-    {
-      props => (
-        <div>
-          <BootstrapTable
-            { ...props.baseProps }
-            search={ searchFactory({
-              ...props.searchProps
-            }) }
-          />
-          <MySearch { ...props.searchProps } />
-          <br />
-        </div>
-      )
-    }
-  </ToolkitContext.Consumer>
-</ToolkitContext.Provider>
+  {
+    props => (
+      <div>
+        <BootstrapTable
+          { ...props.baseProps }
+          search={ searchFactory({
+            ...props.searchProps
+          }) }
+        />
+        <MySearch { ...props.searchProps } />
+        <br />
+      </div>
+    )
+  }
+</ToolkitProvider>
 `;
 
 const MySearch = (props) => {
@@ -99,28 +97,26 @@ const MySearch = (props) => {
 
 export default () => (
   <div>
-    <ToolkitContext.Provider
+    <ToolkitProvider
       keyField="id"
       data={ products }
       columns={ columns }
     >
-      <ToolkitContext.Consumer>
-        {
-          props => (
-            <div>
-              <BootstrapTable
-                { ...props.baseProps }
-                search={ searchFactory({
-                  ...props.searchProps
-                }) }
-              />
-              <MySearch { ...props.searchProps } />
-              <br />
-            </div>
-          )
-        }
-      </ToolkitContext.Consumer>
-    </ToolkitContext.Provider>
+      {
+        props => (
+          <div>
+            <BootstrapTable
+              { ...props.baseProps }
+              search={ searchFactory({
+                ...props.searchProps
+              }) }
+            />
+            <MySearch { ...props.searchProps } />
+            <br />
+          </div>
+        )
+      }
+    </ToolkitProvider>
     <Code>{ sourceCode }</Code>
   </div>
 );

packages/react-bootstrap-table2-example/examples/search/index.js

@@ -2,7 +2,7 @@
 import React from 'react';
 
 import BootstrapTable from 'react-bootstrap-table-next';
-import ToolkitContext, { Search } from 'react-bootstrap-table2-toolkit';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
@@ -22,7 +22,7 @@ const columns = [{
 
 const sourceCode = `\
 import BootstrapTable from 'react-bootstrap-table-next';
-import ToolkitContext, { Search } from 'react-bootstrap-table2-toolkit';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
 
 const { SearchBar, searchFactory } = Search;
 const columns = [{
@@ -36,56 +36,52 @@ const columns = [{
   text: 'Product Price'
 }];
 
-<ToolkitContext.Provider
+<ToolkitProvider
   keyField="id"
   data={ products }
   columns={ columns }
 >
-  <ToolkitContext.Consumer>
-    {
-      props => (
-        <div>
-          <h3>Input something at below input field:</h3>
-          <SearchBar { ...props.searchProps } />
-          <hr />
-          <BootstrapTable
-            { ...props.baseProps }
-            search={ searchFactory({
-              ...props.searchProps
-            }) }
-          />
-        </div>
-      )
-    }
-  </ToolkitContext.Consumer>
-</ToolkitContext.Provider>
+  {
+    props => (
+      <div>
+        <h3>Input something at below input field:</h3>
+        <SearchBar { ...props.searchProps } />
+        <hr />
+        <BootstrapTable
+          { ...props.baseProps }
+          search={ searchFactory({
+            ...props.searchProps
+          }) }
+        />
+      </div>
+    )
+  }
+</ToolkitProvider>
 `;
 
 export default () => (
   <div>
-    <ToolkitContext.Provider
+    <ToolkitProvider
       keyField="id"
       data={ products }
       columns={ columns }
     >
-      <ToolkitContext.Consumer>
-        {
-          props => (
-            <div>
-              <h3>Input something at below input field:</h3>
-              <SearchBar { ...props.searchProps } />
-              <hr />
-              <BootstrapTable
-                { ...props.baseProps }
-                search={ searchFactory({
-                  ...props.searchProps
-                }) }
-              />
-            </div>
-          )
-        }
-      </ToolkitContext.Consumer>
-    </ToolkitContext.Provider>
+      {
+        props => (
+          <div>
+            <h3>Input something at below input field:</h3>
+            <SearchBar { ...props.searchProps } />
+            <hr />
+            <BootstrapTable
+              { ...props.baseProps }
+              search={ searchFactory({
+                ...props.searchProps
+              }) }
+            />
+          </div>
+        )
+      }
+    </ToolkitProvider>
     <Code>{ sourceCode }</Code>
   </div>
 );

packages/react-bootstrap-table2-example/examples/search/search-formatted.js

@@ -2,7 +2,7 @@
 import React from 'react';
 
 import BootstrapTable from 'react-bootstrap-table-next';
-import ToolkitContext, { Search } from 'react-bootstrap-table2-toolkit';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
@@ -23,7 +23,7 @@ const columns = [{
 
 const sourceCode = `\
 import BootstrapTable from 'react-bootstrap-table-next';
-import ToolkitContext, { Search } from 'react-bootstrap-table2-toolkit';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
 
 const { SearchBar, searchFactory } = Search;
 const columns = [{
@@ -38,58 +38,54 @@ const columns = [{
   formatter: cell => \`USD \${cell}\`  // we will search the data after formatted
 }];
 
-<ToolkitContext.Provider
+<ToolkitProvider
   keyField="id"
   data={ products }
   columns={ columns }
 >
-  <ToolkitContext.Consumer>
-    {
-      props => (
-        <div>
-          <h3>Try to Search USD at below input field:</h3>
-          <SearchBar { ...props.searchProps } />
-          <hr />
-          <BootstrapTable
-            { ...props.baseProps }
-            search={ searchFactory({
-              ...props.searchProps,
-              searchFormatted: true
-            }) }
-          />
-        </div>
-      )
-    }
-  </ToolkitContext.Consumer>
-</ToolkitContext.Provider>
+  {
+    props => (
+      <div>
+        <h3>Try to Search USD at below input field:</h3>
+        <SearchBar { ...props.searchProps } />
+        <hr />
+        <BootstrapTable
+          { ...props.baseProps }
+          search={ searchFactory({
+            ...props.searchProps,
+            searchFormatted: true
+          }) }
+        />
+      </div>
+    )
+  }
+</ToolkitProvider>
 `;
 
 export default () => (
   <div>
-    <ToolkitContext.Provider
+    <ToolkitProvider
       keyField="id"
       data={ products }
       columns={ columns }
     >
-      <ToolkitContext.Consumer>
-        {
-          props => (
-            <div>
-              <h3>Try to Search USD at below input field:</h3>
-              <SearchBar { ...props.searchProps } />
-              <hr />
-              <BootstrapTable
-                { ...props.baseProps }
-                search={ searchFactory({
-                  ...props.searchProps,
-                  searchFormatted: true
-                }) }
-              />
-            </div>
-          )
-        }
-      </ToolkitContext.Consumer>
-    </ToolkitContext.Provider>
+      {
+        props => (
+          <div>
+            <h3>Try to Search USD at below input field:</h3>
+            <SearchBar { ...props.searchProps } />
+            <hr />
+            <BootstrapTable
+              { ...props.baseProps }
+              search={ searchFactory({
+                ...props.searchProps,
+                searchFormatted: true
+              }) }
+            />
+          </div>
+        )
+      }
+    </ToolkitProvider>
     <Code>{ sourceCode }</Code>
   </div>
 );