@diginet/ra-customizable-datagrid/lib/CustomizableDatagrid.js

<div align="center"> <div style="margin-bottom: 20px">

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactAdmin = require('react-admin');

var _isEmpty = require('lodash/isEmpty');

var _isEmpty2 = _interopRequireDefault(_isEmpty);

var _filter = require('lodash/filter');

var _filter2 = _interopRequireDefault(_filter);

var _get = require('lodash/get');

var _get2 = _interopRequireDefault(_get);

var _ViewColumn = require('@material-ui/icons/ViewColumn');

var _ViewColumn2 = _interopRequireDefault(_ViewColumn);

var _Button = require('@material-ui/core/Button');

var _Button2 = _interopRequireDefault(_Button);

var _SelectionDialog = require('./SelectionDialog');

var _SelectionDialog2 = _interopRequireDefault(_SelectionDialog);

var _LocalStorage = require('./LocalStorage');

var _LocalStorage2 = _interopRequireDefault(_LocalStorage);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var arrayToSelection = function arrayToSelection(values) {
  return values.reduce(function (selection, columnName) {
    selection[columnName] = true;
    return selection;
  }, {});
};

// CustomizableDatagrid allows to show/hide columns dynamically
// the preferences are stored in local storage

var CustomizableDatagrid = function (_Component) {
  _inherits(CustomizableDatagrid, _Component);

  function CustomizableDatagrid(props) {
    _classCallCheck(this, CustomizableDatagrid);

    var _this = _possibleConstructorReturn(this, (CustomizableDatagrid.__proto__ || Object.getPrototypeOf(CustomizableDatagrid)).call(this, props));

    _this.updateStorage = function () {
      _this.props.storage.set(_this.props.resource, _this.state.selection);
    };

    _this.toggleColumn = function (columnName) {
      var previousSelection = _this.state.selection;
      var selection = _extends({}, previousSelection, _defineProperty({}, columnName, !previousSelection[columnName]));
      _this.setState({ selection: selection }, _this.updateStorage);
    };

    _this.handleOpen = function () {
      return _this.setState({ modalOpened: true });
    };

    _this.handleClose = function () {
      return _this.setState({ modalOpened: false });
    };

    _this.renderChild = function (child) {
      if (child) {
        var source = (0, _get2.default)(child, ['props', 'source']);
        var selection = _this.state.selection;

        // Show children without source, or children explicitly visible

        if (!source || selection[source]) {
          return _react2.default.cloneElement(child, {});
        }
      }
      return null;
    };

    _this.state = {
      modalOpened: false,
      selection: _this.getInitialSelection()
    };
    return _this;
  }

  _createClass(CustomizableDatagrid, [{
    key: 'getColumnNames',
    value: function getColumnNames() {
      var children = this.props.children;

      return (0, _filter2.default)(_react2.default.Children.map(children, function (field) {
        return (0, _get2.default)(field, ['props', 'source']);
      }));
    }
  }, {
    key: 'getColumnLabels',
    value: function getColumnLabels() {
      var children = this.props.children;

      return (0, _filter2.default)(_react2.default.Children.map(children, function (field) {
        return field && {
          source: (0, _get2.default)(field, ['props', 'source']),
          label: (0, _get2.default)(field, ['props', 'label'])
        };
      }), function (item) {
        return item && item.source;
      });
    }
  }, {
    key: 'getInitialSelection',
    value: function getInitialSelection() {
      var _props = this.props,
          defaultColumns = _props.defaultColumns,
          resource = _props.resource,
          children = _props.children,
          storage = _props.storage;


      var previousSelection = storage.get(resource);

      // if we have a previously stored value, let's return it
      if (!(0, _isEmpty2.default)(previousSelection)) {
        return previousSelection;
      }

      // if defaultColumns are set let's return them
      if (!(0, _isEmpty2.default)(defaultColumns)) {
        // Any ! character? (use to subtract columns from default)
        if (defaultColumns.reduce(function (sub, col) {
          return sub || col.indexOf('!') >= 0;
        }, false)) {
          var excludeColumns = defaultColumns.map(function (item) {
            return item.indexOf('!') === 0 ? item.slice(1) : item;
          });
          return arrayToSelection(this.getColumnNames().filter(function (v) {
            return excludeColumns.indexOf(v) < 0;
          }));
        } else return arrayToSelection(defaultColumns);
      }

      // otherwise we fallback on the default behaviour : display all columns
      return arrayToSelection(this.getColumnNames());
    }

    // updates the storage with the internal state value

  }, {
    key: 'render',
    value: function render() {
      var _props2 = this.props,
          children = _props2.children,
          defaultColumns = _props2.defaultColumns,
          rest = _objectWithoutProperties(_props2, ['children', 'defaultColumns']);

      var _state = this.state,
          selection = _state.selection,
          modalOpened = _state.modalOpened;


      return _react2.default.createElement(
        'div',
        null,
        _react2.default.createElement(
          'div',
          { style: { float: 'right', marginRight: '1rem' } },
          _react2.default.createElement(
            _Button2.default,
            { variant: 'outlined', 'aria-label': 'add', onClick: this.handleOpen },
            _react2.default.createElement(_ViewColumn2.default, null)
          )
        ),
        modalOpened && _react2.default.createElement(_SelectionDialog2.default, {
          selection: selection,
          columns: this.getColumnLabels(),
          onColumnClicked: this.toggleColumn,
          onClose: this.handleClose
        }),
        _react2.default.createElement(
          _reactAdmin.Datagrid,
          rest,
          _react2.default.Children.map(children, this.renderChild)
        )
      );
    }
  }]);

  return CustomizableDatagrid;
}(_react.Component);

CustomizableDatagrid.propTypes = {
  defaultColumns: _propTypes2.default.arrayOf(_propTypes2.default.string),
  storage: _propTypes2.default.shape({
    get: _propTypes2.default.func.isRequired,
    set: _propTypes2.default.func.isRequired
  })
};

CustomizableDatagrid.defaultProps = {
  defaultColumns: [],
  storage: _LocalStorage2.default
};

exports.default = CustomizableDatagrid;