Skip to content

Commit d7725f8

Browse files
AkselsLedinsAkselsLedins
committed
(lib) v1.0
1 parent adba616 commit d7725f8

File tree

2 files changed

+246
-0
lines changed

2 files changed

+246
-0
lines changed

‎lib/CustomizableDatagrid.js

Lines changed: 233 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,233 @@
1+
'use strict';
2+
3+
Object.defineProperty(exports, "__esModule", {
4+
value: true
5+
});
6+
7+
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; };
8+
9+
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; }; }();
10+
11+
var _react = require('react');
12+
13+
var _react2 = _interopRequireDefault(_react);
14+
15+
var _reactAdmin = require('react-admin');
16+
17+
var _isEmpty = require('lodash/isEmpty');
18+
19+
var _isEmpty2 = _interopRequireDefault(_isEmpty);
20+
21+
var _ViewColumn = require('@material-ui/icons/ViewColumn');
22+
23+
var _ViewColumn2 = _interopRequireDefault(_ViewColumn);
24+
25+
var _Close = require('@material-ui/icons/Close');
26+
27+
var _Close2 = _interopRequireDefault(_Close);
28+
29+
var _Button = require('@material-ui/core/Button');
30+
31+
var _Button2 = _interopRequireDefault(_Button);
32+
33+
var _DialogTitle = require('@material-ui/core/DialogTitle');
34+
35+
var _DialogTitle2 = _interopRequireDefault(_DialogTitle);
36+
37+
var _DialogContent = require('@material-ui/core/DialogContent');
38+
39+
var _DialogContent2 = _interopRequireDefault(_DialogContent);
40+
41+
var _DialogActions = require('@material-ui/core/DialogActions');
42+
43+
var _DialogActions2 = _interopRequireDefault(_DialogActions);
44+
45+
var _Dialog = require('@material-ui/core/Dialog');
46+
47+
var _Dialog2 = _interopRequireDefault(_Dialog);
48+
49+
var _FormControlLabel = require('@material-ui/core/FormControlLabel');
50+
51+
var _FormControlLabel2 = _interopRequireDefault(_FormControlLabel);
52+
53+
var _FormGroup = require('@material-ui/core/FormGroup');
54+
55+
var _FormGroup2 = _interopRequireDefault(_FormGroup);
56+
57+
var _Checkbox = require('@material-ui/core/Checkbox');
58+
59+
var _Checkbox2 = _interopRequireDefault(_Checkbox);
60+
61+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
62+
63+
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; }
64+
65+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
66+
67+
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; }
68+
69+
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; }
70+
71+
/* utils */
72+
73+
74+
/* icons */
75+
76+
77+
/* material-ui */
78+
79+
80+
var LS = 'raColumnsConfig';
81+
82+
// CustomizableDatagrid allows to show/hide columns dynamically
83+
// the preferences are stored in local storage
84+
85+
var CustomizableDatagrid = function (_Component) {
86+
_inherits(CustomizableDatagrid, _Component);
87+
88+
function CustomizableDatagrid(props) {
89+
_classCallCheck(this, CustomizableDatagrid);
90+
91+
var _this = _possibleConstructorReturn(this, (CustomizableDatagrid.__proto__ || Object.getPrototypeOf(CustomizableDatagrid)).call(this, props));
92+
93+
_this.updateLocalStorage = function () {
94+
var resource = _this.props.resource;
95+
var selection = _this.state.selection;
96+
97+
// maybe there isnt an old value
98+
99+
var oldValue = {};
100+
try {
101+
oldValue = JSON.parse(window.localStorage.getItem(LS));
102+
} catch (e) {};
103+
104+
var value = JSON.stringify(_extends({}, oldValue, _defineProperty({}, resource, selection)));
105+
106+
try {
107+
window.localStorage.setItem(LS, value);
108+
} catch (e) {};
109+
};
110+
111+
_this.toggleColumn = function (event) {
112+
_this.setState({
113+
selection: _extends({}, _this.state.selection, _defineProperty({}, event.target.value, !_this.state.selection[event.target.value]))
114+
}, _this.updateLocalStorage);
115+
};
116+
117+
_this.handleOpen = function () {
118+
return _this.setState({ open: true });
119+
};
120+
121+
_this.handleClose = function () {
122+
return _this.setState({ open: false });
123+
};
124+
125+
_this.state = {
126+
open: false,
127+
selection: {}
128+
};
129+
130+
// default behaviour: display all columns
131+
_react2.default.Children.forEach(props.children, function (field) {
132+
_this.state.selection[field.props.source] = true;
133+
});
134+
135+
// we try to apply the local storage state to our internal state
136+
try {
137+
var localStorageValue = JSON.parse((0, _isEmpty2.default)(window.localStorage.getItem(LS)) ? '{}' : window.localStorage.getItem(LS));
138+
var localStorageValueForResource = localStorageValue[props.resource] || {};
139+
140+
Object.keys(localStorageValueForResource).forEach(function (key) {
141+
_this.state.selection[key] = localStorageValueForResource[key];
142+
});
143+
} catch (e) {} // ignore - window.localStorage is unreliable
144+
145+
_this.updateLocalStorage();
146+
return _this;
147+
}
148+
149+
// updates the local storage with the internal state value
150+
151+
152+
_createClass(CustomizableDatagrid, [{
153+
key: 'render',
154+
value: function render() {
155+
var _this2 = this;
156+
157+
var children = this.props.children;
158+
159+
160+
var columns = _react2.default.Children.map(children, function (field) {
161+
return field.props.source;
162+
});
163+
164+
return _react2.default.createElement(
165+
'div',
166+
null,
167+
_react2.default.createElement(
168+
'div',
169+
{ style: { float: 'right', marginRight: '1rem' } },
170+
_react2.default.createElement(
171+
_Button2.default,
172+
{ variant: 'outlined', mini: true, color: 'secondary', 'aria-label': 'add', onClick: this.handleOpen },
173+
_react2.default.createElement(_ViewColumn2.default, null)
174+
),
175+
this.state.open && _react2.default.createElement(
176+
_Dialog2.default,
177+
{
178+
maxWidth: 'xs',
179+
'aria-labelledby': 'confirmation-dialog-title',
180+
open: this.state.open,
181+
onEscapeKeyDown: this.handleClose,
182+
onBackdropClick: this.handleClose
183+
},
184+
_react2.default.createElement(
185+
_DialogTitle2.default,
186+
{ id: 'confirmation-dialog-title' },
187+
'Configuration'
188+
),
189+
_react2.default.createElement(
190+
_DialogContent2.default,
191+
null,
192+
_react2.default.createElement(
193+
_FormGroup2.default,
194+
null,
195+
columns.map(function (column) {
196+
return _react2.default.createElement(_FormControlLabel2.default, {
197+
key: column,
198+
control: _react2.default.createElement(_Checkbox2.default, {
199+
checked: !!_this2.state.selection[column],
200+
onChange: _this2.toggleColumn,
201+
value: column
202+
}),
203+
label: column
204+
});
205+
})
206+
)
207+
),
208+
_react2.default.createElement(
209+
_DialogActions2.default,
210+
null,
211+
_react2.default.createElement(
212+
_Button2.default,
213+
{ onClick: this.handleClose, color: 'primary' },
214+
_react2.default.createElement(_Close2.default, null)
215+
)
216+
)
217+
)
218+
),
219+
_react2.default.createElement(
220+
_reactAdmin.Datagrid,
221+
this.props,
222+
_react2.default.Children.map(children, function (child) {
223+
return child && !!_this2.state.selection[child.props.source] ? _react2.default.cloneElement(child, {}) : null;
224+
})
225+
)
226+
);
227+
}
228+
}]);
229+
230+
return CustomizableDatagrid;
231+
}(_react.Component);
232+
233+
exports.default = CustomizableDatagrid;

‎lib/index.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
'use strict';
2+
3+
Object.defineProperty(exports, "__esModule", {
4+
value: true
5+
});
6+
7+
var _CustomizableDatagrid = require('./CustomizableDatagrid');
8+
9+
var _CustomizableDatagrid2 = _interopRequireDefault(_CustomizableDatagrid);
10+
11+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
12+
13+
exports.default = _CustomizableDatagrid2.default;

0 commit comments

Comments
 (0)