Repository: GriddleGriddle/Griddle (JavaScript)

Issue:
Settings Toggle is broken
## Griddle version
1.11.2

## Expected Behavior
I want to see all settings like pageSize, visbile and hidden columns.

## Actual Behavior
At the top right in the corner you can see a white empty div which should show all settings. But it was always empty with me since I started working with griddle. I do not know how to show it. Please help. Have read through all the documentation and found nothing on the subject.
![griddle_settings_empty](https://user-images.githubusercontent.com/21052305/37085699-ff14fce8-21f5-11e8-8be7-399c01f9f3e8.png)

## Steps to reproduce
I am working with the fakeData.js file from griddle.

Test.jsx, so I call the component
```javascript
const columns = [
    {
      id: 'name',
      name: 'Name',
    },
    {
      id: 'state',
      name: 'Location',
    },
    {
      id: 'company',
      name: 'Organization',
    },
  ];
render() {
  <DataList data={fakeData} columns={columns} />
}
```

Layout.jsx File for the new Layout
```javascript
import React from 'react';

import styles from './Layout.scss';

const Layout = ({ Table, Pagination, Filter, SettingsWrapper, style, className }) => (
  <div className={className} style={style}>
    <div className={styles.topSection}>
      <div className={styles.griddleFilter}>
        <Filter />
      </div>
      <div>
        <SettingsWrapper />
      </div>
    </div>
    <div className={styles.griddleContainer}>
      <Table />
      <div className={styles.griddleFooter}>
        <div className={styles.griddlePage}>
          <Pagination />
        </div>
      </div>
    </div>
  </div>
);

export default Layout;
```

DataList.jsx for my "griddle"-Component
```javascript
import React from 'react';
import PropTypes from 'prop-types';
import Griddle, {plugins, RowDefinition, ColumnDefinition} from 'griddle-react';

import styles from './DataList.scss';

import CustomPageDropDown from '../Griddle/PageDropdown';
import CustomPagination from '../Griddle/Pagination';
import CustomSettingsToggle from '../Griddle/SettingsToggle';
import CustomLayout from '../Griddle/Layout';

function DataList(props) {
  const styleConfig = {
    classNames: {
      Filter: styles.griddleFilterInput,
      Table: styles.griddleTable,
      TableBody: styles.gridTableBody,
      TableHeadingCell: styles.griddleTableHeadingCell,
      NextButton: styles.griddlePageButton,
      PreviousButton: styles.griddlePageButton,
      Settings: styles.griddleSettings,
      SettingsToggle: styles.griddleSettingsToggle,
    },
  };
  const pageProperties = {
    currentPage: 1,
    pageSize: 25,
  };
  let columnList = null;
  if (props.columns) {
    columnList = props.columns.map((column) => (
      <ColumnDefinition key={column.id} id={column.id} title={column.name} />
    ));
  }

  return (
    <Griddle
      pageProperties={pageProperties}
      styleConfig={styleConfig}
      data={props.data}
      components={{
        Layout: CustomLayout,
        PageDropdown: CustomPageDropDown,
        Pagination: CustomPagination,
        SettingsToggle: CustomSettingsToggle,
      }}
      textProperties={{
        next: 'Nächste',
        previous: 'Vorige',
        settingsToggle: 'Einstellungen',
      }}
      plugins={[plugins.LocalPlugin]}>
      {columnList ?
        <RowDefinition>
          {columnList}
        </RowDefinition>
        : null
      }
    </Griddle>
  );
}

DataList.propTypes = {
  data: PropTypes.array.isRequired,
  columns: PropTypes.array,
};

DataList.defaultProps = {
  columns: null,
};

export default DataList;
```


Discussion:
Nothing jumps out at me here as obviously wrong. Can you share your `SettingsToggle`? A CodeSandbox (here's a [Griddle template](https://codesandbox.io/s/olwrx4lk5y)) could help troubleshoot.
In your example, unfortunately, the settings do not work either? So when I click on the button "Settings", I do not see anything anymore.

Here my SettingsToggle File

SettingsToggle.jsx
```javascript
import React from 'react';
import ReactTooltip from 'react-tooltip';

const SettingsToggle = ({ onClick, text, style, className }) => (
  <button
    onClick={onClick}
    type="button"
    style={style}
    className={className}
    data-tip
    data-for="config"
  >
    <i className="fa fa-cog" />
    <ReactTooltip id="config" effect="solid">
      <span>{text}</span>
    </ReactTooltip>
  </button>
);

export default SettingsToggle;
```
I am sorry, my mistake. Wrong button when commenting.
Interesting...looks like I broke it!

The regression is in 3577f8fbeaf480f316e29e0f701acfcf108637c7 from #757: my refactoring left out `settingsComponentObjects`! Downgrading to 1.10.1 fixes the issue ([sandbox](https://codesandbox.io/s/qlxkk6w2k4)), or you can assign `settingsComponentObjects` directly on your `<Griddle />` or via a plugin: https://codesandbox.io/s/wnwqnwkl5w.
Thank you very much. I'm currently sick, but will test it when I'm well again :)
This has been released with `griddle-react@1.13.0`, though not tagged as `latest` yet.



Patch:
diff --git a/src/core/index.js b/src/core/index.js
index 1b70a240..7842b145 100644
--- a/src/core/index.js
+++ b/src/core/index.js
@@ -2,10 +2,12 @@ import components from '../components';
 import * as reducer from '../reducers/dataReducer';
 import * as selectors from '../selectors/dataSelectors';
 import * as actions from '../actions';
+import settingsComponentObjects from '../settingsComponentObjects';
 import initialState from './initialState';
 
 const CorePlugin = {
   components,
+  settingsComponentObjects,
   reducer,
   selectors,
   actions,


Test patch:
diff --git a/src/core/__tests__/corePluginTests.js b/src/core/__tests__/corePluginTests.js
new file mode 100644
index 00000000..1764b153
--- /dev/null
+++ b/src/core/__tests__/corePluginTests.js
@@ -0,0 +1,15 @@
+import test from 'ava';
+
+import corePlugin from '../';
+
+test('has expected keys', test => {
+  test.truthy(corePlugin.components);
+  test.truthy(corePlugin.settingsComponentObjects);
+  test.truthy(corePlugin.reducer);
+  test.truthy(corePlugin.selectors);
+  test.truthy(corePlugin.actions);
+
+  test.truthy(corePlugin.pageProperties);
+  test.truthy(corePlugin.styleConfig);
+  test.truthy(corePlugin.textProperties);
+});