Merge pull request #2 from fizix-io/extract-storage

[RFR] Extract dialog and storage from CustomizableDatagrid

Author: AkselsLedins

README.md

@@ -1,12 +1,17 @@
-<p align="center">
-  <a href="https://fizix.io/" rel="noopener" target="_blank"><img width="200" src="https://s3.eu-central-1.amazonaws.com/fizix-assets/images/logos/fizix-logo-black.png" alt="Fizix logo"></a></p>
-</p>
+
+<div align="center">
+  <div style="margin-bottom: 20px">
+    [![npm](https://img.shields.io/npm/v/ra-customizable-datagrid.svg)](ra-customizable-datagrid)
+  </div>
+
+  <a href="https://fizix.io" rel="noopener" target="_blank"><img width="70" src="https://s3.eu-central-1.amazonaws.com/fizix-assets/images/logos/fizix-logo-black.png" alt="Fizix logo"></a>
+</div>
 
 <h1 align="center">ra-customizable-datagrid for <a rel="noopener" target="_blank" href="https://github.com/marmelab/react-admin/">React Admin</a></h1>
 
 <div align="center">
 
-[React Admin](https://github.com/marmelab/react-admin/) plugin that allows to hide / show columns dynamically. Preferences are stored in local storage.
+[React Admin](https://github.com/marmelab/react-admin/) plugin that allows to hide / show columns dynamically.
 
 </div>
 
@@ -19,15 +24,18 @@
   <img width="800" src="./demo/demo.gif" alt="Demo">
 </p>
 
-## How to run the demo locally
 
-```
-$> npm run demo-install
-$> npm run demo
-```
+## Features
+
+* Users can show/hide columns, obviously
+* Users preferences are stored by resource
+* The storage mechanism can be replaced
+* Developers can choose the default visible columns
+
 ## Installation
 
 ra-customizable-datagrid is available from npm. You can install it (and its required dependencies) using:
+
 ```
 $> npm install --save ra-customizable-datagrid
 ```
@@ -36,9 +44,7 @@ or
 $> yarn add ra-customizable-datagrid
 ```
 
-## At a glance
-
-Just replace `Datagrid`
+Then replace React Admin `Datagrid` by `CustomizableDatagrid`
 
 ```jsx
 import CustomizableDatagrid from 'ra-customizable-datagrid';
@@ -53,9 +59,32 @@ const PostList = props => (
 );
 ```
 
-## Features
-* preferences are stored in local storage
-* `defaultColumns` prop is used to set which column is displayed at the first visit of the user
+## Configuration
+
+### Storage
+
+By default LocalStorage is used to store user preferences.
+
+If you need to store them somewhere else, use the `storage` props like this :
+
+```jsx
+<CustomizableDatagrid storage={CustomStorage}>
+```
+
+where CustomStorage is an object with the `set` and `get` methods :
+
+```js
+const CustomStorage = {
+  get: (resourceName) => /* your own logic here */,
+  set: (resourceName, selectedColumns) => /* your own logic here */,
+};
+```
+
+### Default columns
+
+All the columns are visible by default.
+
+This behavior can be changed with the `defaultColumns` prop. Just pass an array containing the name of the columns you want to be visible.
 
 ```jsx
 import CustomizableDatagrid from 'ra-customizable-datagrid';
@@ -70,5 +99,13 @@ const PostList = props => (
 );
 ```
 
+## How to run the demo locally
+
+```
+$> npm run demo-install
+$> npm run demo
+```
+
 ## License
+
 `ra-customizable-datagrid` is licensed under the MIT License, sponsored and supported by <a href="https://fizix.io/" rel="noopener" target="_blank">Fizix</a>.

demo/demo.gif

@@ -4,11 +4,11 @@
   "description": "",
   "main": "lib/index.js",
   "scripts": {
-    "build": "/node_modules/.bin/babel ./src/ -d lib",
+    "build": "babel ./src/ -d lib",
     "demo": "npm run start --prefix ./demo",
     "demo-install": "yarn install --cwd ./demo && yarn install && npm run install:peers",
     "install:peers": "yarn add -P $(jq -r '.peerDependencies | to_entries | map(\"\\(.key)@\\(.value | tostring)\") | join(\" \")' package.json)",
-    "prettier-js": "./node_modules/.bin/prettier --write '{src,demo}/**/*.js'"
+    "prettier-js": "prettier --write '{src,demo}/**/*.js'"
   },
   "repository": {
     "type": "git",

package.json

@@ -3,178 +3,137 @@ import T from 'prop-types';
 
 import { Datagrid } from 'react-admin';
 
-/* utils */
 import isEmpty from 'lodash/isEmpty';
+import filter from 'lodash/filter';
+import get from 'lodash/get';
 
-/* icons */
-import Icon from '@material-ui/icons/ViewColumn';
-import IconClose from '@material-ui/icons/Close';
-
-/* material-ui */
+import ColumnIcon from '@material-ui/icons/ViewColumn';
 import Button from '@material-ui/core/Button';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogActions from '@material-ui/core/DialogActions';
-import Dialog from '@material-ui/core/Dialog';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import FormGroup from '@material-ui/core/FormGroup';
-import Checkbox from '@material-ui/core/Checkbox';
 
-const LS = 'raColumnsConfig';
+import SelectionDialog from './SelectionDialog';
+import LocalStorage from './LocalStorage';
+
+const arrayToSelection = values =>
+  values.reduce((selection, columnName) => {
+    selection[columnName] = true;
+    return selection;
+  }, {});
 
 // CustomizableDatagrid allows to show/hide columns dynamically
 // the preferences are stored in local storage
 class CustomizableDatagrid extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      open: false,
-      selection: {},
+      modalOpened: false,
+      selection: this.getInitialSelection(),
     };
+  }
+
+  getColumnNames() {
+    const { children } = this.props;
+    return filter(React.Children.map(children, field => get(field, ['props', 'source'])));
+  }
 
-    const { defaultColumns, resource, children } = props;
+  getColumnLabels() {
+    const { children } = this.props;
+    return filter(
+      React.Children.map(
+        children,
+        field =>
+          field && {
+            source: get(field, ['props', 'source']),
+            label: get(field, ['props', 'label']),
+          },
+      ),
+      item => item && item.source,
+    );
+  }
 
-    let localStorageValue = null;
-    let localStorageValueForResource = null;
+  getInitialSelection() {
+    const { defaultColumns, resource, children, storage } = this.props;
 
-    // we try to retrieve the local storage value for this resource
-    try {
-      localStorageValue = JSON.parse(
-        isEmpty(window.localStorage.getItem(LS)) ? '{}' : window.localStorage.getItem(LS),
-      );
-      localStorageValueForResource = localStorageValue[resource] || {};
-    } catch (e) {} // ignore - window.localStorage is unreliable
+    const previousSelection = storage.get(resource);
 
-    // if this is the first time the user come to the application / view
-    if (!isEmpty(defaultColumns) && isEmpty(localStorageValueForResource)) {
-      defaultColumns.forEach(defaultValue => {
-        this.state.selection[defaultValue] = true;
-      });
-    }
-    // we try to apply the local storage state to our internal state
-    else if (!isEmpty(localStorageValueForResource)) {
-      Object.keys(localStorageValueForResource).forEach(key => {
-        this.state.selection[key] = localStorageValueForResource[key];
-      });
+    // if we have a previously stored value, let's return it
+    if (!isEmpty(previousSelection)) {
+      return previousSelection;
     }
-    // otherwise we fallback on the default behaviour
-    //  -> display all columns
-    else {
-      React.Children.forEach(children, field => {
-        this.state.selection[field.props.source] = true;
-      });
+
+    // if defaultColumns are set let's return them
+    if (!isEmpty(defaultColumns)) {
+      return arrayToSelection(defaultColumns);
     }
 
-    this.updateLocalStorage();
+    // otherwise we fallback on the default behaviour : display all columns
+    return arrayToSelection(this.getColumnNames());
   }
 
-  // updates the local storage with the internal state value
-  updateLocalStorage = () => {
-    const { resource } = this.props;
-    const { selection } = this.state;
+  // updates the storage with the internal state value
+  updateStorage = () => {
+    this.props.storage.set(this.props.resource, this.state.selection);
+  };
 
-    // maybe there isnt an old value
-    let oldValue = {};
-    try {
-      oldValue = JSON.parse(window.localStorage.getItem(LS));
-    } catch (e) {}
+  toggleColumn = columnName => {
+    const previousSelection = this.state.selection;
+    const selection = {
+      ...previousSelection,
+      [columnName]: !previousSelection[columnName],
+    };
+    this.setState({ selection }, this.updateStorage);
+  };
 
-    const value = JSON.stringify({
-      ...oldValue,
-      [resource]: selection,
-    });
+  handleOpen = () => this.setState({ modalOpened: true });
+  handleClose = () => this.setState({ modalOpened: false });
 
-    try {
-      window.localStorage.setItem(LS, value);
-    } catch (e) {}
-  };
+  renderChild = child => {
+    const source = get(child, ['props', 'source']);
+    const { selection } = this.state;
 
-  toggleColumn = event => {
-    this.setState(
-      {
-        selection: {
-          ...this.state.selection,
-          [event.target.value]: !this.state.selection[event.target.value],
-        },
-      },
-      this.updateLocalStorage,
-    );
-  };
+    // Show children without source, or children explicitly visible
+    if (!source || selection[source]) {
+      return React.cloneElement(child, {});
+    }
 
-  handleOpen = () => this.setState({ open: true });
-  handleClose = () => this.setState({ open: false });
+    return null;
+  };
 
   render() {
     const { children, defaultColumns, ...rest } = this.props;
-
-    const columns = React.Children.map(children, field => field.props.source);
+    const { selection, modalOpened } = this.state;
 
     return (
       <div>
         <div style={{ float: 'right', marginRight: '1rem' }}>
-          <Button
-            variant="outlined"
-            mini
-            color="secondary"
-            aria-label="add"
-            onClick={this.handleOpen}
-          >
-            <Icon />
+          <Button variant="outlined" mini aria-label="add" onClick={this.handleOpen}>
+            <ColumnIcon />
           </Button>
-          {this.state.open && (
-            <Dialog
-              maxWidth="xs"
-              aria-labelledby="confirmation-dialog-title"
-              open={this.state.open}
-              onEscapeKeyDown={this.handleClose}
-              onBackdropClick={this.handleClose}
-            >
-              <DialogTitle id="confirmation-dialog-title">Configuration</DialogTitle>
-              <DialogContent>
-                <FormGroup>
-                  {columns.map(column => (
-                    <FormControlLabel
-                      key={column}
-                      control={
-                        <Checkbox
-                          checked={!!this.state.selection[column]}
-                          onChange={this.toggleColumn}
-                          value={column}
-                        />
-                      }
-                      label={column}
-                    />
-                  ))}
-                </FormGroup>
-              </DialogContent>
-              <DialogActions>
-                <Button onClick={this.handleClose} color="primary">
-                  <IconClose />
-                </Button>
-              </DialogActions>
-            </Dialog>
-          )}
         </div>
-        <Datagrid {...rest}>
-          {React.Children.map(
-            children,
-            child =>
-              child && !!this.state.selection[child.props.source]
-                ? React.cloneElement(child, {})
-                : null,
-          )}
-        </Datagrid>
+        {modalOpened && (
+          <SelectionDialog
+            selection={selection}
+            columns={this.getColumnLabels()}
+            onColumnClicked={this.toggleColumn}
+            onClose={this.handleClose}
+          />
+        )}
+        <Datagrid {...rest}>{React.Children.map(children, this.renderChild)}</Datagrid>
       </div>
     );
   }
 }
 
 CustomizableDatagrid.propTypes = {
   defaultColumns: T.arrayOf(T.string),
+  storage: T.shape({
+    get: T.func.isRequired,
+    set: T.func.isRequired,
+  }),
 };
 
 CustomizableDatagrid.defaultProps = {
   defaultColumns: [],
+  storage: LocalStorage,
 };
 
 export default CustomizableDatagrid;