[Enhancement] Fixed issue #447 (Search box - Default Text) (#852)

* [Enhancement] Fixed issue #447 (Search box - Default Text)
Added searchPlaceholder option

* #447-Search box - Default Text

Deleted examples/customize-search-placeholder
Added searchPlaceholder to examples/customize-search instead

* #447-Search box - Default Text

Updated documentation Example link

README.md

@@ -166,6 +166,7 @@ The component accepts the following props:
 |**`filter`**|boolean|true|Show/hide filter icon from toolbar
 |**`search`**|boolean|true|Show/hide search icon from toolbar
 |**`searchText`**|string||Initial search text
+|**`searchPlaceholder`**|string||Search text placeholder. [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/customize-search/index.js)
 |**`print`**|boolean|true|Show/hide print	 icon from toolbar
 |**`download`**|boolean|true|Show/hide download icon from toolbar
 |**`downloadOptions`**|object|`{filename: 'tableDownload.csv', separator: ','}`|Options to change the output of the CSV file: `filename`: string, `separator`: string, `filterOptions`: object(`useDisplayedColumnsOnly`: boolean, `useDisplayedRowsOnly`: boolean)

examples/customize-search/index.js

@@ -83,6 +83,7 @@ class Example extends React.Component {
       responsive: 'stacked',
       page: 1,
       searchText: this.state.searchText,
+      searchPlaceholder: 'Your Custom Search Placeholder',
       customSearch: (searchQuery, currentRow, columns) => {
         let isFound = false;
         currentRow.forEach(col => {

src/MUIDataTable.js

@@ -152,6 +152,7 @@ class MUIDataTable extends React.Component {
       customSearch: PropTypes.func,
       search: PropTypes.bool,
       searchText: PropTypes.string,
+      searchPlaceholder: PropTypes.string,
       print: PropTypes.bool,
       viewColumns: PropTypes.bool,
       download: PropTypes.bool,

src/components/TableSearch.js

@@ -69,6 +69,7 @@ class TableSearch extends React.Component {
             onChange={this.handleTextChange}
             fullWidth={true}
             inputRef={el => (this.searchField = el)}
+            placeholder={options.searchPlaceholder}
           />
           <IconButton className={classes.clearIcon} onClick={onHide}>
             <ClearIcon />

test/MUIDataTableSearch.test.js

@@ -45,6 +45,19 @@ describe('<TableSearch />', function() {
     assert.strictEqual(actualResult.find(TextField).props().value, 'nextText');
   });
 
+  it('should render a search bar with placeholder when searchPlaceholder is set', () => {
+    const options = { textLabels, searchPlaceholder: 'TestingPlaceholder' };
+    const onSearch = () => {};
+    const onHide = () => {};
+
+    const mountWrapper = mount(
+        <TableSearch onSearch={onSearch} onHide={onHide} options={options} />,
+    );
+    const actualResult = mountWrapper.find(TextField);
+    assert.strictEqual(actualResult.length, 1);
+    assert.strictEqual(actualResult.props().placeholder, 'TestingPlaceholder');
+  });
+
   it('should trigger handleTextChange prop callback when calling method handleTextChange', () => {
     const options = { onSearchChange: () => true, textLabels };
     const onSearch = spy();

webpack.config.js

@@ -3,7 +3,7 @@ const webpack = require('webpack');
 
 module.exports = {
   entry: {
-    app: "./examples/customize-filter/index.js"
+    app: "./examples/customize-search/index.js"
   },
   stats: "verbose",
   context: __dirname,