@synerise/ds-column-manager 0.8.94 → 0.9.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +32 -0
- package/dist/ColumnManager.js +169 -200
- package/dist/ColumnManager.types.js +1 -0
- package/dist/ColumnManagerActions/ColumnManagerActions.js +71 -91
- package/dist/ColumnManagerGroupSettings/ColumnManagerGroupSettings.js +33 -58
- package/dist/ColumnManagerGroupSettings/RangesForm/RangeInput.js +5 -5
- package/dist/ColumnManagerGroupSettings/RangesForm/RangeRow.js +12 -27
- package/dist/ColumnManagerGroupSettings/RangesForm/RangesForm.js +2 -2
- package/dist/ColumnManagerItem/ColumManagerItem.types.js +1 -0
- package/dist/ColumnManagerItem/ColumnManagerItem.js +40 -41
- package/dist/ColumnManagerItem/ColumnManagerItem.styles.d.ts +1 -1
- package/dist/ColumnManagerItem/ColumnManagerItem.styles.js +1 -2
- package/dist/ColumnManagerList/ColumnManagerList.js +5 -5
- package/dist/ColumnManagerList/ColumnManagerList.types.js +1 -0
- package/dist/ColumnManagerSearchResults/ColumManagerResults.types.js +1 -0
- package/dist/ColumnManagerSearchResults/ColumnManagerSearchResults.js +3 -3
- package/package.json +13 -13
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,38 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [0.9.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-column-manager@0.9.2...@synerise/ds-column-manager@0.9.3) (2021-11-22)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-column-manager
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [0.9.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-column-manager@0.9.1...@synerise/ds-column-manager@0.9.2) (2021-11-16)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @synerise/ds-column-manager
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
## [0.9.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-column-manager@0.8.94...@synerise/ds-column-manager@0.9.1) (2021-11-09)
|
|
23
|
+
|
|
24
|
+
**Note:** Version bump only for package @synerise/ds-column-manager
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
# [0.9.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-column-manager@0.8.94...@synerise/ds-column-manager@0.9.0) (2021-11-09)
|
|
31
|
+
|
|
32
|
+
**Note:** Version bump only for package @synerise/ds-column-manager
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
6
38
|
## [0.8.94](https://github.com/Synerise/synerise-design/compare/@synerise/ds-column-manager@0.8.93...@synerise/ds-column-manager@0.8.94) (2021-11-05)
|
|
7
39
|
|
|
8
40
|
**Note:** Version bump only for package @synerise/ds-column-manager
|
package/dist/ColumnManager.js
CHANGED
|
@@ -1,53 +1,26 @@
|
|
|
1
|
-
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
2
|
-
|
|
3
1
|
function _extends() { _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; }; return _extends.apply(this, arguments); }
|
|
4
2
|
|
|
5
|
-
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
6
|
-
|
|
7
|
-
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
8
|
-
|
|
9
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
10
|
-
|
|
11
|
-
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
|
|
12
|
-
|
|
13
|
-
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
14
|
-
|
|
15
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
16
|
-
|
|
17
3
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
|
18
4
|
|
|
19
5
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
20
6
|
|
|
21
|
-
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; }
|
|
22
|
-
|
|
23
|
-
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
24
|
-
|
|
25
7
|
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); } }
|
|
26
8
|
|
|
27
9
|
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
|
|
28
10
|
|
|
29
|
-
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
|
30
|
-
|
|
31
|
-
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
32
|
-
|
|
33
|
-
function _createSuper(Derived) { return function () { var Super = _getPrototypeOf(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
34
|
-
|
|
35
|
-
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
|
|
36
|
-
|
|
37
11
|
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
38
12
|
|
|
39
|
-
function
|
|
13
|
+
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
|
|
40
14
|
|
|
41
|
-
function
|
|
15
|
+
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; }
|
|
42
16
|
|
|
43
17
|
import * as React from 'react';
|
|
44
18
|
import { injectIntl } from 'react-intl';
|
|
45
19
|
import Typography from 'antd/lib/typography';
|
|
46
20
|
import Drawer from '@synerise/ds-drawer';
|
|
47
21
|
import Button from '@synerise/ds-button';
|
|
48
|
-
import Icon from '@synerise/ds-icon';
|
|
22
|
+
import Icon, { CloseM, FolderM, SearchM } from '@synerise/ds-icon';
|
|
49
23
|
import ItemFilter from '@synerise/ds-item-filter';
|
|
50
|
-
import { CloseM, FolderM, SearchM } from '@synerise/ds-icon/dist/icons';
|
|
51
24
|
import Scrollbar from '@synerise/ds-scrollbar';
|
|
52
25
|
import SearchBar from '@synerise/ds-search-bar';
|
|
53
26
|
import theme from '@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme';
|
|
@@ -67,18 +40,14 @@ var DEFAULT_STATE = {
|
|
|
67
40
|
};
|
|
68
41
|
|
|
69
42
|
var ColumnManager = /*#__PURE__*/function (_React$Component) {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
var _super = _createSuper(ColumnManager);
|
|
43
|
+
_inheritsLoose(ColumnManager, _React$Component);
|
|
73
44
|
|
|
74
45
|
function ColumnManager(props) {
|
|
75
46
|
var _this;
|
|
76
47
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
_this = _super.call(this, props); // eslint-disable-next-line react/state-in-constructor
|
|
48
|
+
_this = _React$Component.call(this, props) || this; // eslint-disable-next-line react/state-in-constructor
|
|
80
49
|
|
|
81
|
-
_this
|
|
50
|
+
_defineProperty(_assertThisInitialized(_this), "updateVisibleColumns", function (newVisibleList) {
|
|
82
51
|
_this.setState({
|
|
83
52
|
visibleList: newVisibleList.map(function (column) {
|
|
84
53
|
return _objectSpread({}, column, {
|
|
@@ -86,9 +55,9 @@ var ColumnManager = /*#__PURE__*/function (_React$Component) {
|
|
|
86
55
|
});
|
|
87
56
|
})
|
|
88
57
|
});
|
|
89
|
-
};
|
|
58
|
+
});
|
|
90
59
|
|
|
91
|
-
_this
|
|
60
|
+
_defineProperty(_assertThisInitialized(_this), "updateHiddenColumns", function (newHiddenList) {
|
|
92
61
|
_this.setState({
|
|
93
62
|
hiddenList: newHiddenList.map(function (column) {
|
|
94
63
|
return _objectSpread({}, column, {
|
|
@@ -96,9 +65,9 @@ var ColumnManager = /*#__PURE__*/function (_React$Component) {
|
|
|
96
65
|
});
|
|
97
66
|
})
|
|
98
67
|
});
|
|
99
|
-
};
|
|
68
|
+
});
|
|
100
69
|
|
|
101
|
-
_this
|
|
70
|
+
_defineProperty(_assertThisInitialized(_this), "hideColumn", function (id) {
|
|
102
71
|
var _this$state = _this.state,
|
|
103
72
|
visibleList = _this$state.visibleList,
|
|
104
73
|
hiddenList = _this$state.hiddenList;
|
|
@@ -109,13 +78,13 @@ var ColumnManager = /*#__PURE__*/function (_React$Component) {
|
|
|
109
78
|
visibleList: visibleList.filter(function (visibleColumn) {
|
|
110
79
|
return visibleColumn.id !== column.id;
|
|
111
80
|
}),
|
|
112
|
-
hiddenList: [].concat(
|
|
81
|
+
hiddenList: [].concat(hiddenList, [_objectSpread({}, column, {
|
|
113
82
|
visible: false
|
|
114
83
|
})])
|
|
115
84
|
});
|
|
116
|
-
};
|
|
85
|
+
});
|
|
117
86
|
|
|
118
|
-
_this
|
|
87
|
+
_defineProperty(_assertThisInitialized(_this), "showColumn", function (id) {
|
|
119
88
|
var _this$state2 = _this.state,
|
|
120
89
|
visibleList = _this$state2.visibleList,
|
|
121
90
|
hiddenList = _this$state2.hiddenList;
|
|
@@ -126,21 +95,21 @@ var ColumnManager = /*#__PURE__*/function (_React$Component) {
|
|
|
126
95
|
hiddenList: hiddenList.filter(function (hiddenColumn) {
|
|
127
96
|
return hiddenColumn.id !== column.id;
|
|
128
97
|
}),
|
|
129
|
-
visibleList: [].concat(
|
|
98
|
+
visibleList: [].concat(visibleList, [_objectSpread({}, column, {
|
|
130
99
|
visible: true
|
|
131
100
|
})])
|
|
132
101
|
});
|
|
133
|
-
};
|
|
102
|
+
});
|
|
134
103
|
|
|
135
|
-
_this
|
|
104
|
+
_defineProperty(_assertThisInitialized(_this), "toggleColumn", function (id, columnVisible) {
|
|
136
105
|
if (columnVisible) {
|
|
137
106
|
_this.hideColumn(id);
|
|
138
107
|
} else {
|
|
139
108
|
_this.showColumn(id);
|
|
140
109
|
}
|
|
141
|
-
};
|
|
110
|
+
});
|
|
142
111
|
|
|
143
|
-
_this
|
|
112
|
+
_defineProperty(_assertThisInitialized(_this), "setFixed", function (id, fixed) {
|
|
144
113
|
var visibleList = _this.state.visibleList;
|
|
145
114
|
|
|
146
115
|
_this.setState({
|
|
@@ -156,36 +125,36 @@ var ColumnManager = /*#__PURE__*/function (_React$Component) {
|
|
|
156
125
|
return visibleColumn;
|
|
157
126
|
})
|
|
158
127
|
});
|
|
159
|
-
};
|
|
128
|
+
});
|
|
160
129
|
|
|
161
|
-
_this
|
|
130
|
+
_defineProperty(_assertThisInitialized(_this), "showGroupSettings", function (column) {
|
|
162
131
|
_this.setState({
|
|
163
132
|
activeColumn: column
|
|
164
133
|
});
|
|
165
|
-
};
|
|
134
|
+
});
|
|
166
135
|
|
|
167
|
-
_this
|
|
136
|
+
_defineProperty(_assertThisInitialized(_this), "hideItemFilter", function () {
|
|
168
137
|
var hideSavedViews = _this.props.hideSavedViews;
|
|
169
138
|
hideSavedViews && hideSavedViews();
|
|
170
139
|
|
|
171
140
|
_this.setState({
|
|
172
141
|
itemFilterVisible: false
|
|
173
142
|
});
|
|
174
|
-
};
|
|
143
|
+
});
|
|
175
144
|
|
|
176
|
-
_this
|
|
145
|
+
_defineProperty(_assertThisInitialized(_this), "handleShowItemFilter", function () {
|
|
177
146
|
_this.setState({
|
|
178
147
|
itemFilterVisible: true
|
|
179
148
|
});
|
|
180
|
-
};
|
|
149
|
+
});
|
|
181
150
|
|
|
182
|
-
_this
|
|
151
|
+
_defineProperty(_assertThisInitialized(_this), "handleSearchChange", function (query) {
|
|
183
152
|
_this.setState({
|
|
184
153
|
searchQuery: query
|
|
185
154
|
});
|
|
186
|
-
};
|
|
155
|
+
});
|
|
187
156
|
|
|
188
|
-
_this
|
|
157
|
+
_defineProperty(_assertThisInitialized(_this), "handleSave", function (viewMeta) {
|
|
189
158
|
var onSave = _this.props.onSave;
|
|
190
159
|
var _this$state3 = _this.state,
|
|
191
160
|
visibleList = _this$state3.visibleList,
|
|
@@ -194,18 +163,18 @@ var ColumnManager = /*#__PURE__*/function (_React$Component) {
|
|
|
194
163
|
onSave({
|
|
195
164
|
meta: viewMeta,
|
|
196
165
|
groupSettings: groupSettings,
|
|
197
|
-
columns: [].concat(
|
|
166
|
+
columns: [].concat(visibleList, hiddenList)
|
|
198
167
|
});
|
|
199
|
-
};
|
|
168
|
+
});
|
|
200
169
|
|
|
201
|
-
_this
|
|
170
|
+
_defineProperty(_assertThisInitialized(_this), "handleApply", function () {
|
|
202
171
|
var onApply = _this.props.onApply;
|
|
203
172
|
var _this$state4 = _this.state,
|
|
204
173
|
visibleList = _this$state4.visibleList,
|
|
205
174
|
hiddenList = _this$state4.hiddenList,
|
|
206
175
|
groupSettings = _this$state4.groupSettings;
|
|
207
|
-
onApply([].concat(
|
|
208
|
-
};
|
|
176
|
+
onApply([].concat(visibleList, hiddenList), groupSettings);
|
|
177
|
+
});
|
|
209
178
|
|
|
210
179
|
_this.state = _objectSpread({}, DEFAULT_STATE, {
|
|
211
180
|
groupSettings: props.groupSettings || undefined,
|
|
@@ -220,125 +189,145 @@ var ColumnManager = /*#__PURE__*/function (_React$Component) {
|
|
|
220
189
|
return _this;
|
|
221
190
|
}
|
|
222
191
|
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
_groupSettings$column2;
|
|
228
|
-
|
|
229
|
-
var _this$props = this.props,
|
|
230
|
-
visible = _this$props.visible,
|
|
231
|
-
hide = _this$props.hide,
|
|
232
|
-
itemFilterConfig = _this$props.itemFilterConfig,
|
|
233
|
-
savedViewsVisible = _this$props.savedViewsVisible;
|
|
234
|
-
var _this$state5 = this.state,
|
|
235
|
-
visibleList = _this$state5.visibleList,
|
|
236
|
-
hiddenList = _this$state5.hiddenList,
|
|
237
|
-
searchQuery = _this$state5.searchQuery,
|
|
238
|
-
itemFilterVisible = _this$state5.itemFilterVisible,
|
|
239
|
-
activeColumn = _this$state5.activeColumn,
|
|
240
|
-
groupSettings = _this$state5.groupSettings;
|
|
241
|
-
var searchResults = [].concat(_toConsumableArray(visibleList), _toConsumableArray(hiddenList)).filter(function (column) {
|
|
242
|
-
return column.name.toLowerCase().includes(searchQuery.toLowerCase());
|
|
192
|
+
ColumnManager.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
|
|
193
|
+
if (props.itemFilterConfig && props.itemFilterConfig.selectedItemId !== state.selectedFilterId) {
|
|
194
|
+
var visible = props.columns.filter(function (column) {
|
|
195
|
+
return column.visible;
|
|
243
196
|
});
|
|
244
|
-
var
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
if (column.id === (groupSettings === null || groupSettings === void 0 ? void 0 : (_groupSettings$column = groupSettings.column) === null || _groupSettings$column === void 0 ? void 0 : _groupSettings$column.id)) {
|
|
248
|
-
return _objectSpread({}, column, {
|
|
249
|
-
group: true
|
|
250
|
-
});
|
|
251
|
-
}
|
|
252
|
-
|
|
253
|
-
return column;
|
|
197
|
+
var hidden = props.columns.filter(function (column) {
|
|
198
|
+
return !column.visible;
|
|
254
199
|
});
|
|
255
|
-
return
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
flex: 1,
|
|
262
|
-
margin: 0
|
|
263
|
-
},
|
|
264
|
-
level: 4
|
|
265
|
-
}, this.texts.title), React.createElement(Tooltip, {
|
|
266
|
-
title: this.texts.savedViews,
|
|
267
|
-
placement: "bottom"
|
|
268
|
-
}, React.createElement(Button, {
|
|
269
|
-
"data-testid": "ds-column-manager-show-filters",
|
|
270
|
-
type: "ghost",
|
|
271
|
-
mode: "single-icon",
|
|
272
|
-
onClick: this.handleShowItemFilter
|
|
273
|
-
}, React.createElement(Icon, {
|
|
274
|
-
component: React.createElement(FolderM, null)
|
|
275
|
-
}))), React.createElement(Button, {
|
|
276
|
-
"data-testid": "ds-column-manager-close",
|
|
277
|
-
style: {
|
|
278
|
-
marginLeft: '8px'
|
|
279
|
-
},
|
|
280
|
-
mode: "single-icon",
|
|
281
|
-
type: "ghost",
|
|
282
|
-
onClick: hide
|
|
283
|
-
}, React.createElement(Icon, {
|
|
284
|
-
component: React.createElement(CloseM, null)
|
|
285
|
-
})))), React.createElement(SearchBar, {
|
|
286
|
-
onSearchChange: this.handleSearchChange,
|
|
287
|
-
placeholder: this.texts.searchPlaceholder,
|
|
288
|
-
value: searchQuery,
|
|
289
|
-
onClearInput: function onClearInput() {
|
|
290
|
-
return _this2.handleSearchChange('');
|
|
291
|
-
},
|
|
292
|
-
iconLeft: React.createElement(Icon, {
|
|
293
|
-
component: React.createElement(SearchM, null),
|
|
294
|
-
color: theme.palette['grey-600']
|
|
295
|
-
}),
|
|
296
|
-
clearTooltip: this.texts.searchClearTooltip || ''
|
|
297
|
-
}), React.createElement(Scrollbar, {
|
|
298
|
-
absolute: true
|
|
299
|
-
}, React.createElement(Drawer.DrawerContent, {
|
|
300
|
-
style: {
|
|
301
|
-
padding: '0 0 80px'
|
|
302
|
-
}
|
|
303
|
-
}, React.createElement(ColumnManagerList, {
|
|
304
|
-
texts: this.texts,
|
|
305
|
-
searchQuery: searchQuery,
|
|
306
|
-
searchResults: searchResults,
|
|
307
|
-
visibleList: visibleListWithGroup,
|
|
308
|
-
hiddenList: hiddenList,
|
|
309
|
-
setFixed: this.setFixed,
|
|
310
|
-
showGroupSettings: this.showGroupSettings,
|
|
311
|
-
groupSettings: groupSettings,
|
|
312
|
-
toggleColumn: this.toggleColumn,
|
|
313
|
-
updateVisibleList: this.updateVisibleColumns,
|
|
314
|
-
updateHiddenList: this.updateHiddenColumns
|
|
315
|
-
}))), React.createElement(ColumnManagerActions, {
|
|
316
|
-
onSave: this.handleSave,
|
|
317
|
-
onApply: this.handleApply,
|
|
318
|
-
onCancel: hide,
|
|
319
|
-
texts: this.texts
|
|
320
|
-
}), itemFilterConfig && React.createElement(ItemFilter, _extends({}, itemFilterConfig, {
|
|
321
|
-
visible: itemFilterVisible || Boolean(savedViewsVisible),
|
|
322
|
-
hide: this.hideItemFilter
|
|
323
|
-
}))), React.createElement(ColumnManagerGroupSettings, {
|
|
324
|
-
texts: this.texts,
|
|
325
|
-
hide: function hide() {
|
|
326
|
-
_this2.setState({
|
|
327
|
-
activeColumn: undefined
|
|
328
|
-
});
|
|
329
|
-
},
|
|
330
|
-
visible: activeColumn !== undefined,
|
|
331
|
-
column: activeColumn,
|
|
332
|
-
settings: (activeColumn === null || activeColumn === void 0 ? void 0 : activeColumn.key) === (groupSettings === null || groupSettings === void 0 ? void 0 : (_groupSettings$column2 = groupSettings.column) === null || _groupSettings$column2 === void 0 ? void 0 : _groupSettings$column2.key) ? groupSettings : undefined,
|
|
333
|
-
onOk: function onOk(settings) {
|
|
334
|
-
_this2.setState({
|
|
335
|
-
groupSettings: settings,
|
|
336
|
-
activeColumn: undefined
|
|
337
|
-
});
|
|
338
|
-
}
|
|
339
|
-
}));
|
|
200
|
+
return {
|
|
201
|
+
visibleList: visible,
|
|
202
|
+
hiddenList: hidden,
|
|
203
|
+
selectedFilterId: props.itemFilterConfig && props.itemFilterConfig.selectedItemId || undefined,
|
|
204
|
+
groupSettings: props.groupSettings
|
|
205
|
+
};
|
|
340
206
|
}
|
|
341
|
-
|
|
207
|
+
|
|
208
|
+
return null;
|
|
209
|
+
};
|
|
210
|
+
|
|
211
|
+
var _proto = ColumnManager.prototype;
|
|
212
|
+
|
|
213
|
+
_proto.render = function render() {
|
|
214
|
+
var _this2 = this,
|
|
215
|
+
_groupSettings$column2;
|
|
216
|
+
|
|
217
|
+
var _this$props = this.props,
|
|
218
|
+
visible = _this$props.visible,
|
|
219
|
+
hide = _this$props.hide,
|
|
220
|
+
itemFilterConfig = _this$props.itemFilterConfig,
|
|
221
|
+
savedViewsVisible = _this$props.savedViewsVisible;
|
|
222
|
+
var _this$state5 = this.state,
|
|
223
|
+
visibleList = _this$state5.visibleList,
|
|
224
|
+
hiddenList = _this$state5.hiddenList,
|
|
225
|
+
searchQuery = _this$state5.searchQuery,
|
|
226
|
+
itemFilterVisible = _this$state5.itemFilterVisible,
|
|
227
|
+
activeColumn = _this$state5.activeColumn,
|
|
228
|
+
groupSettings = _this$state5.groupSettings;
|
|
229
|
+
var searchResults = [].concat(visibleList, hiddenList).filter(function (column) {
|
|
230
|
+
return column.name.toLowerCase().includes(searchQuery.toLowerCase());
|
|
231
|
+
});
|
|
232
|
+
var visibleListWithGroup = visibleList.map(function (column) {
|
|
233
|
+
var _groupSettings$column;
|
|
234
|
+
|
|
235
|
+
if (column.id === (groupSettings == null ? void 0 : (_groupSettings$column = groupSettings.column) == null ? void 0 : _groupSettings$column.id)) {
|
|
236
|
+
return _objectSpread({}, column, {
|
|
237
|
+
group: true
|
|
238
|
+
});
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
return column;
|
|
242
|
+
});
|
|
243
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.ColumnManager, {
|
|
244
|
+
visible: visible || savedViewsVisible,
|
|
245
|
+
width: 338,
|
|
246
|
+
onClose: hide
|
|
247
|
+
}, /*#__PURE__*/React.createElement(Drawer.DrawerHeader, null, /*#__PURE__*/React.createElement(Drawer.DrawerHeaderBar, null, /*#__PURE__*/React.createElement(Typography.Title, {
|
|
248
|
+
style: {
|
|
249
|
+
flex: 1,
|
|
250
|
+
margin: 0
|
|
251
|
+
},
|
|
252
|
+
level: 4
|
|
253
|
+
}, this.texts.title), /*#__PURE__*/React.createElement(Tooltip, {
|
|
254
|
+
title: this.texts.savedViews,
|
|
255
|
+
placement: "bottom"
|
|
256
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
257
|
+
"data-testid": "ds-column-manager-show-filters",
|
|
258
|
+
type: "ghost",
|
|
259
|
+
mode: "single-icon",
|
|
260
|
+
onClick: this.handleShowItemFilter
|
|
261
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
262
|
+
component: /*#__PURE__*/React.createElement(FolderM, null)
|
|
263
|
+
}))), /*#__PURE__*/React.createElement(Button, {
|
|
264
|
+
"data-testid": "ds-column-manager-close",
|
|
265
|
+
style: {
|
|
266
|
+
marginLeft: '8px'
|
|
267
|
+
},
|
|
268
|
+
mode: "single-icon",
|
|
269
|
+
type: "ghost",
|
|
270
|
+
onClick: hide
|
|
271
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
272
|
+
component: /*#__PURE__*/React.createElement(CloseM, null)
|
|
273
|
+
})))), /*#__PURE__*/React.createElement(SearchBar, {
|
|
274
|
+
onSearchChange: this.handleSearchChange,
|
|
275
|
+
placeholder: this.texts.searchPlaceholder,
|
|
276
|
+
value: searchQuery,
|
|
277
|
+
onClearInput: function onClearInput() {
|
|
278
|
+
return _this2.handleSearchChange('');
|
|
279
|
+
},
|
|
280
|
+
iconLeft: /*#__PURE__*/React.createElement(Icon, {
|
|
281
|
+
component: /*#__PURE__*/React.createElement(SearchM, null),
|
|
282
|
+
color: theme.palette['grey-600']
|
|
283
|
+
}),
|
|
284
|
+
clearTooltip: this.texts.searchClearTooltip || ''
|
|
285
|
+
}), /*#__PURE__*/React.createElement(Scrollbar, {
|
|
286
|
+
absolute: true
|
|
287
|
+
}, /*#__PURE__*/React.createElement(Drawer.DrawerContent, {
|
|
288
|
+
style: {
|
|
289
|
+
padding: '0 0 80px'
|
|
290
|
+
}
|
|
291
|
+
}, /*#__PURE__*/React.createElement(ColumnManagerList, {
|
|
292
|
+
texts: this.texts,
|
|
293
|
+
searchQuery: searchQuery,
|
|
294
|
+
searchResults: searchResults,
|
|
295
|
+
visibleList: visibleListWithGroup,
|
|
296
|
+
hiddenList: hiddenList,
|
|
297
|
+
setFixed: this.setFixed,
|
|
298
|
+
showGroupSettings: this.showGroupSettings,
|
|
299
|
+
groupSettings: groupSettings,
|
|
300
|
+
toggleColumn: this.toggleColumn,
|
|
301
|
+
updateVisibleList: this.updateVisibleColumns,
|
|
302
|
+
updateHiddenList: this.updateHiddenColumns
|
|
303
|
+
}))), /*#__PURE__*/React.createElement(ColumnManagerActions, {
|
|
304
|
+
onSave: this.handleSave,
|
|
305
|
+
onApply: this.handleApply,
|
|
306
|
+
onCancel: hide,
|
|
307
|
+
texts: this.texts
|
|
308
|
+
}), itemFilterConfig && /*#__PURE__*/React.createElement(ItemFilter, _extends({}, itemFilterConfig, {
|
|
309
|
+
visible: itemFilterVisible || Boolean(savedViewsVisible),
|
|
310
|
+
hide: this.hideItemFilter
|
|
311
|
+
}))), /*#__PURE__*/React.createElement(ColumnManagerGroupSettings, {
|
|
312
|
+
texts: this.texts,
|
|
313
|
+
hide: function hide() {
|
|
314
|
+
_this2.setState({
|
|
315
|
+
activeColumn: undefined
|
|
316
|
+
});
|
|
317
|
+
},
|
|
318
|
+
visible: activeColumn !== undefined,
|
|
319
|
+
column: activeColumn,
|
|
320
|
+
settings: (activeColumn == null ? void 0 : activeColumn.key) === (groupSettings == null ? void 0 : (_groupSettings$column2 = groupSettings.column) == null ? void 0 : _groupSettings$column2.key) ? groupSettings : undefined,
|
|
321
|
+
onOk: function onOk(settings) {
|
|
322
|
+
_this2.setState({
|
|
323
|
+
groupSettings: settings,
|
|
324
|
+
activeColumn: undefined
|
|
325
|
+
});
|
|
326
|
+
}
|
|
327
|
+
}));
|
|
328
|
+
};
|
|
329
|
+
|
|
330
|
+
_createClass(ColumnManager, [{
|
|
342
331
|
key: "texts",
|
|
343
332
|
get: function get() {
|
|
344
333
|
var _this$props2 = this.props,
|
|
@@ -471,26 +460,6 @@ var ColumnManager = /*#__PURE__*/function (_React$Component) {
|
|
|
471
460
|
})
|
|
472
461
|
}, texts);
|
|
473
462
|
}
|
|
474
|
-
}], [{
|
|
475
|
-
key: "getDerivedStateFromProps",
|
|
476
|
-
value: function getDerivedStateFromProps(props, state) {
|
|
477
|
-
if (props.itemFilterConfig && props.itemFilterConfig.selectedItemId !== state.selectedFilterId) {
|
|
478
|
-
var visible = props.columns.filter(function (column) {
|
|
479
|
-
return column.visible;
|
|
480
|
-
});
|
|
481
|
-
var hidden = props.columns.filter(function (column) {
|
|
482
|
-
return !column.visible;
|
|
483
|
-
});
|
|
484
|
-
return {
|
|
485
|
-
visibleList: visible,
|
|
486
|
-
hiddenList: hidden,
|
|
487
|
-
selectedFilterId: props.itemFilterConfig && props.itemFilterConfig.selectedItemId || undefined,
|
|
488
|
-
groupSettings: props.groupSettings
|
|
489
|
-
};
|
|
490
|
-
}
|
|
491
|
-
|
|
492
|
-
return null;
|
|
493
|
-
}
|
|
494
463
|
}]);
|
|
495
464
|
|
|
496
465
|
return ColumnManager;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|