aio-table 7.0.2 → 7.0.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.
Files changed (3) hide show
  1. package/index.css +516 -195
  2. package/index.js +3675 -1096
  3. package/package.json +1 -1
package/index.js CHANGED
@@ -3,23 +3,15 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.default = void 0;
6
+ exports.default = exports.AIOTableFilterPopup = void 0;
7
7
 
8
8
  var _react = _interopRequireWildcard(require("react"));
9
9
 
10
- var _react2 = require("@mdi/react");
11
-
12
- var _js = require("@mdi/js");
13
-
14
- var _rRangeSlider = _interopRequireDefault(require("r-range-slider"));
15
-
16
10
  var _aioButton = _interopRequireDefault(require("aio-button"));
17
11
 
18
- var _aioValidation = _interopRequireDefault(require("aio-validation"));
12
+ var _jquery = _interopRequireDefault(require("jquery"));
19
13
 
20
- var _aioTable = _interopRequireDefault(require("./aio-table/aio-table"));
21
-
22
- var _reactVirtualDom = _interopRequireDefault(require("react-virtual-dom"));
14
+ var _rRangeSlider = _interopRequireDefault(require("r-range-slider"));
23
15
 
24
16
  require("./index.css");
25
17
 
@@ -29,1274 +21,3861 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
29
21
 
30
22
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
31
23
 
24
+ 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; }
25
+
32
26
  function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
33
27
 
34
- class AIOForm extends _react.Component {
28
+ var AioTableContext = /*#__PURE__*/(0, _react.createContext)();
29
+
30
+ class AIOTable extends _react.Component {
35
31
  constructor(props) {
36
32
  super(props);
37
- let {
38
- model,
39
- theme = {}
33
+ this.fn = new ATFN({
34
+ getProps: () => this.props,
35
+ getState: () => this.state,
36
+ setState: (obj, caller) => this.SetState(obj, caller),
37
+ getContext: () => this.context
38
+ });
39
+ let touch = ('ontouchstart' in document.documentElement);
40
+ this.dom = /*#__PURE__*/(0, _react.createRef)();
41
+ var {
42
+ freezeSize,
43
+ paging,
44
+ columns,
45
+ groups = []
40
46
  } = this.props;
47
+ let cardRowCount = this.fn.getCardRowCount();
48
+ let openDictionary = this.fn.getOpenDictionary();
49
+ let copiedColumns = [...columns];
41
50
  this.state = {
42
- initialModel: JSON.stringify(model),
43
- model,
44
- theme
51
+ touch,
52
+ openDictionary,
53
+ cardRowCount,
54
+ groups,
55
+ groupsOpen: {},
56
+ searchText: '',
57
+ freezeSize,
58
+ startIndex: 0,
59
+ //make imutable to prevent change of props.paging because that will compaire with next input props.paging
60
+ paging: paging ? { ...paging
61
+ } : false,
62
+ prevPaging: JSON.stringify(paging),
63
+ columns: copiedColumns,
64
+ prevColumns: JSON.stringify(copiedColumns),
65
+ focused: false,
66
+ toggleAllState: true
45
67
  };
46
68
  }
47
69
 
48
- getModel() {
49
- return this.props.onSubmit ? this.state.model : this.props.model;
70
+ resizeDown(e) {
71
+ var {
72
+ touch
73
+ } = this.state;
74
+ (0, _jquery.default)(window).bind(touch ? 'touchmove' : 'mousemove', _jquery.default.proxy(this.resizeMove, this));
75
+ (0, _jquery.default)(window).bind(touch ? 'touchend' : 'mouseup', _jquery.default.proxy(this.resizeUp, this));
76
+ this.resizeDetails = {
77
+ client: this.fn.getClient(e),
78
+ width: this.state.freezeSize
79
+ };
50
80
  }
51
81
 
52
- getValue(field, def, props = this.props) {
53
- let model = this.getModel(),
54
- {
55
- data = {}
56
- } = this.props,
57
- a;
58
-
59
- if (typeof field === 'string' && field.indexOf('calc ') === 0) {
60
- try {
61
- a = eval(field.slice(5, field.length));
62
- } catch {
63
- a = def;
64
- }
65
- } else {
66
- a = field;
82
+ resizeMove(e) {
83
+ var {
84
+ rtl
85
+ } = this.props;
86
+ var Client = this.fn.getClient(e);
87
+ var {
88
+ client,
89
+ width
90
+ } = this.resizeDetails;
91
+ var offset = Client[0] - client[0];
92
+ let newWidth = width + offset * (rtl ? -1 : 1);
93
+
94
+ if (newWidth < 10) {
95
+ newWidth = 10;
67
96
  }
68
97
 
69
- return a;
98
+ this.resizeDetails.newWidth = newWidth;
99
+ (0, _jquery.default)('#aio-table-first-split').css({
100
+ width: newWidth
101
+ });
70
102
  }
71
103
 
72
- setValue(field, value, model = this.getModel()) {
73
- eval(`model.${field} = value`);
74
- return model;
104
+ resizeUp() {
105
+ var {
106
+ touch
107
+ } = this.state;
108
+ (0, _jquery.default)(window).unbind(touch ? 'touchmove' : 'mousemove', this.resizeMove);
109
+ (0, _jquery.default)(window).unbind(touch ? 'touchend' : 'mouseup', this.resizeUp);
110
+ this.setState({
111
+ freezeSize: this.resizeDetails.newWidth
112
+ });
75
113
  }
76
114
 
77
- onChange(input, value) {
115
+ getTable({
116
+ sorts,
117
+ freezeColumns,
118
+ unFreezeColumns,
119
+ columns
120
+ }) {
78
121
  let {
79
- onChange,
80
- onSubmit
122
+ freezeSize
123
+ } = this.state;
124
+ let {
125
+ cardTemplate
81
126
  } = this.props;
82
-
83
- if (onSubmit) {
84
- this.setState({
85
- model: this.setValue(input.field, value)
86
- });
87
- } else {
88
- if (input.onChange) {
89
- return input.onChange(value);
127
+ let freezeMode = freezeColumns.length !== 0 && unFreezeColumns.length !== 0;
128
+ let rows = this.getRows(sorts, freezeMode);
129
+ this.rows = rows;
130
+ return /*#__PURE__*/_react.default.createElement("div", {
131
+ className: 'aio-table-body'
132
+ }, !freezeMode && columns.length !== 0 && /*#__PURE__*/_react.default.createElement(AIOTableUnit, {
133
+ rows: rows,
134
+ columns: columns,
135
+ type: "cells"
136
+ }), freezeMode && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(AIOTableUnit, {
137
+ key: 0,
138
+ id: "aio-table-first-split",
139
+ rows: rows,
140
+ columns: freezeColumns,
141
+ tableIndex: 0,
142
+ type: "freezeCells",
143
+ style: {
144
+ width: freezeSize
90
145
  }
146
+ }), /*#__PURE__*/_react.default.createElement("div", {
147
+ className: "aio-table-splitter",
148
+ onMouseDown: e => this.resizeDown(e),
149
+ onTouchStart: e => this.resizeDown(e)
150
+ }), /*#__PURE__*/_react.default.createElement(AIOTableUnit, {
151
+ key: 1,
152
+ id: "aio-table-second-split",
153
+ rows: rows,
154
+ columns: unFreezeColumns,
155
+ tableIndex: 1,
156
+ type: "unFreezeCells"
157
+ })), cardTemplate && /*#__PURE__*/_react.default.createElement(AIOTableUnit, {
158
+ rows: rows
159
+ }));
160
+ }
161
+
162
+ getRows(sorts, freezeMode) {
163
+ var {
164
+ model
165
+ } = this.props;
91
166
 
92
- onChange(this.setValue(input.field, value));
167
+ if (!model) {
168
+ return false;
93
169
  }
94
- }
95
170
 
96
- getInputTheme(input) {
97
171
  let {
98
- theme: stateTheme = {}
172
+ groups
99
173
  } = this.state;
100
- let {
101
- theme: inputTheme = {}
102
- } = input;
103
- return { ...stateTheme,
104
- ...inputTheme
105
- };
106
- }
107
-
108
- getInput_text({
109
- className,
110
- value,
111
- onChange,
112
- options,
113
- disabled,
114
- style,
115
- placeholder
116
- }, input) {
117
- let props = { ...input.attrs,
118
- autoHeight: input.autoHeight,
119
- type: input.type,
120
- value,
121
- className,
122
- onChange,
123
- options,
124
- disabled,
125
- style,
126
- placeholder,
127
- options
174
+ this.index = {
175
+ render: 0,
176
+ real: 0
128
177
  };
129
- return /*#__PURE__*/_react.default.createElement(Text, props);
178
+ let rows;
179
+ rows = this.fn.getRowsNested([...model], '_childs');
180
+ rows = this.fn.getRowsBySort(rows, sorts.filter(({
181
+ active = true
182
+ }) => active));
183
+ rows = this.fn.getRows(rows, freezeMode);
184
+ rows = this.fn.getRootsByPaging(rows, this.index);
185
+ rows = this.fn.getRootsByGroup(rows, groups.filter(({
186
+ active = true
187
+ }) => active));
188
+ return this.fn.getRowsByRoots(rows);
130
189
  }
131
190
 
132
- getInput_number(obj, input) {
133
- return this.getInput_text(obj, input);
134
- }
191
+ handleIncomingProps() {
192
+ let {
193
+ paging
194
+ } = this.props;
195
+ let {
196
+ prevPaging
197
+ } = this.state;
198
+ let p = JSON.stringify(paging);
135
199
 
136
- getInput_password(obj, input) {
137
- return this.getInput_text(obj, input);
200
+ if (p !== prevPaging) {
201
+ setTimeout(() => this.setState({
202
+ paging: { ...paging
203
+ },
204
+ prevPaging: p
205
+ }), 0);
206
+ }
138
207
  }
139
208
 
140
- getInput_textarea(obj, input) {
141
- return this.getInput_text(obj, input);
209
+ getCellAttrs(row, column) {
210
+ let {
211
+ cellAttrs = {}
212
+ } = column;
213
+ return (typeof cellAttrs === 'function' ? cellAttrs(row) : cellAttrs) || {};
142
214
  }
143
215
 
144
- getInput_checkbox({
145
- className,
146
- onChange,
147
- value,
148
- disabled,
149
- style,
150
- text,
151
- subtext,
152
- theme
153
- }, input) {
154
- let props = {
155
- disabled,
156
- style,
157
- value,
158
- subtext: input.subText,
159
- text,
160
- subtext,
161
- onChange: value => onChange(!value),
162
- className,
163
- iconSize: theme.checkIconSize,
164
- iconColor: theme.checkIconColor
165
- };
166
- return /*#__PURE__*/_react.default.createElement(_aioButton.default, _extends({}, props, {
167
- type: "checkbox"
168
- }));
216
+ SetState(obj, caller) {
217
+ this.setState(obj);
169
218
  }
170
219
 
171
- getInput_checklist({
172
- className,
173
- options: Options,
174
- disabled,
175
- style,
176
- theme
177
- }, input) {
178
- let options = Options.map(o => {
179
- let model = this.getModel(),
180
- value = this.getValue('calc model.' + o.field),
181
- text = o.text;
182
- return {
183
- text,
184
- value,
185
- onChange: (val, obj) => {
186
- this.onChange({
187
- field: o.field,
188
- onChange: o.onChange
189
- }, !val);
190
- },
191
- ...o
192
- };
193
- });
194
- let {
195
- input: inputTheme = {}
196
- } = theme;
197
- let props = {
198
- options,
199
- disabled,
200
- style,
201
- optionSubtext: input.optionSubtext,
220
+ render() {
221
+ this.handleIncomingProps();
222
+ var {
223
+ rowHeight,
224
+ headerHeight,
225
+ toolbarHeight,
226
+ rowGap,
202
227
  className,
203
- options,
204
- optionClassName: '"aio-form-input"',
205
- optionStyle: () => {
206
- return {
207
- width: input.optionWidth || 'fit-content',
208
- height: inputTheme.height,
209
- padding: inputTheme.padding,
210
- background: 'none'
211
- };
212
- },
213
- optionIconSize: theme.checkIconSize,
214
- optionIconColor: theme.checkIconColor
215
- };
216
- return /*#__PURE__*/_react.default.createElement(_aioButton.default, _extends({}, props, {
217
- type: "checklist"
218
- }));
219
- }
220
-
221
- getInput_radio({
222
- value,
223
- onChange,
224
- options,
225
- disabled,
226
- style,
227
- className,
228
- theme
229
- }, input) {
230
- let {
231
- input: inputTheme = {}
232
- } = theme;
233
- let props = {
234
- options,
235
- value,
236
- onChange,
237
- disabled,
228
+ columnGap,
229
+ rtl,
238
230
  style,
239
- optionSubtext: input.optionSubtext,
240
- optionText: input.optionText,
241
- optionValue: input.optionValue,
242
- className,
243
- optionClassName: '"aio-form-input"',
244
- optionStyle: () => {
245
- return {
246
- width: input.optionWidth || 'fit-content',
247
- height: inputTheme.height,
248
- padding: inputTheme.padding,
249
- background: 'none'
250
- };
251
- },
252
- optionIconSize: theme.checkIconSize,
253
- optionIconColor: theme.checkIconColor
254
- };
255
- return /*#__PURE__*/_react.default.createElement(_aioButton.default, _extends({}, props, {
256
- type: "radio"
257
- }));
258
- }
231
+ attrs = {},
232
+ cardTemplate,
233
+ onSwap,
234
+ translate
235
+ } = this.props;
236
+ var {
237
+ paging
238
+ } = this.state;
239
+ this.rh = rowHeight;
240
+ this.hh = headerHeight;
241
+ this.th = toolbarHeight;
242
+ this.rg = rowGap;
243
+ this.cg = columnGap;
244
+ let details = this.fn.getDetails();
245
+ var context = { ...this.props,
246
+ ...this.state,
247
+ details,
248
+ onDrag: obj => this.dragStart = obj,
249
+ onDrop: obj => {
250
+ if (!this.dragStart) {
251
+ return;
252
+ }
259
253
 
260
- getInput_slider({
261
- className,
262
- value,
263
- onChange,
264
- disabled,
265
- style,
266
- start,
267
- end
268
- }, input) {
269
- let editValue;
254
+ if (this.dragStart._level !== obj._level) {
255
+ return;
256
+ }
270
257
 
271
- if (typeof input.editValue === 'string') {
272
- let str = input.editValue;
258
+ if (this.dragStart._level === 0) {
259
+ onSwap(this.dragStart, obj);
260
+ } else {
261
+ let startParents = this.dragStart._getParents().map(o => o._index).toString();
273
262
 
274
- if (str.indexOf('calc ') === 0) {
275
- str = str.slice(5, str.length);
276
- }
263
+ let endParents = obj._getParents().map(o => o._index).toString();
277
264
 
278
- editValue = value => {
279
- let res;
265
+ if (startParents !== endParents) {
266
+ return;
267
+ }
280
268
 
281
- try {
282
- eval(`res = ${str}`);
283
- } catch {
284
- res = value;
269
+ onSwap(this.dragStart, obj);
285
270
  }
286
-
287
- return res;
288
- };
289
- } else {
290
- editValue = input.editValue;
291
- }
292
-
293
- let props = {
294
- className,
295
- value,
296
- onChange,
297
- start,
298
- end,
299
- step: input.step,
300
- disabled,
301
- style,
302
- editValue
303
- };
304
- return /*#__PURE__*/_react.default.createElement(AIOFormSlider, props);
305
- }
306
-
307
- getInput_select({
308
- className,
309
- value,
310
- onChange,
311
- options,
312
- disabled,
313
- style
314
- }, input) {
315
- let props = {
316
- options,
317
- value,
318
- onChange,
319
- className,
320
- search: input.search,
321
- disabled,
322
- style,
323
- optionText: input.optionText,
324
- optionValue: input.optionValue,
325
- optionBefore: input.optionBefore,
326
- optionAfter: input.optionAfter,
327
- text: input.text,
328
- before: input.before,
329
- optionSubtext: input.optionSubtext
271
+ },
272
+ SetState: this.SetState.bind(this),
273
+ onScroll: index => this.fn.onScroll(this.dom, index),
274
+ getCellAttrs: this.getCellAttrs.bind(this),
275
+ fn: this.fn,
276
+ rows: this.rows
330
277
  };
331
- return /*#__PURE__*/_react.default.createElement(_aioButton.default, _extends({}, props, {
332
- type: "select",
333
- popupWidth: "fit",
334
- popupAttrs: {
335
- style: {
336
- maxHeight: 400
337
- }
278
+ this.context = context;
279
+ let table = this.getTable(details);
280
+ return /*#__PURE__*/_react.default.createElement(AioTableContext.Provider, {
281
+ value: context
282
+ }, /*#__PURE__*/_react.default.createElement("div", _extends({
283
+ className: 'aio-table' + (className ? ' ' + className : '') + (rtl ? ' rtl' : ''),
284
+ tabIndex: 0,
285
+ ref: this.dom,
286
+ style: { ...style
338
287
  }
339
- }));
340
- }
341
-
342
- getInput_multiselect({
343
- className,
344
- value,
345
- onChange,
346
- options,
347
- disabled,
348
- style,
349
- text,
350
- subtext,
351
- theme
352
- }, input) {
353
- let props = {
354
- className,
355
- value,
356
- onChange,
357
- options,
358
- text,
359
- subtext,
360
- disabled,
361
- search: input.search,
362
- style,
363
- popupWidth: 'fit',
364
- optionText: input.optionText,
365
- optionValue: input.optionValue,
366
- optionBefore: input.optionBefore,
367
- optionAfter: input.optionAfter,
368
- text: input.text,
369
- before: input.before,
370
- optionSubtext: input.optionSubtext,
371
- optionIconSize: theme.checkIconSize,
372
- optionIconColor: theme.checkIconColor
373
- };
374
- return /*#__PURE__*/_react.default.createElement(_aioButton.default, _extends({}, props, {
375
- type: "multiselect",
376
- popupAttrs: {
377
- style: {
378
- maxHeight: 400
288
+ }, attrs), /*#__PURE__*/_react.default.createElement(AIOTableToolbar, details), table, paging && /*#__PURE__*/_react.default.createElement(AIOTablePaging, {
289
+ rtl: rtl,
290
+ translate: translate,
291
+ paging: paging,
292
+ onChange: obj => {
293
+ this.setState({
294
+ paging: obj
295
+ });
296
+
297
+ if (paging.onChange) {
298
+ paging.onChange(obj);
379
299
  }
380
300
  }
381
- }));
301
+ }), this.fn.getLoading(true)));
382
302
  }
383
303
 
384
- getInput_table({
385
- className,
386
- value,
387
- onChange,
388
- disabled,
389
- style
390
- }, input) {
391
- let props = {
392
- attrs: input.attrs,
393
- className,
394
- value,
395
- onChange,
396
- columns: input.columns,
397
- addable: input.addable,
398
- rowNumber: input.rowNumber,
399
- disabled,
400
- style
401
- };
402
- return /*#__PURE__*/_react.default.createElement(AIOFormTable, _extends({}, props, {
403
- getValue: this.getValue.bind(this)
404
- }));
304
+ }
305
+
306
+ exports.default = AIOTable;
307
+ AIOTable.defaultProps = {
308
+ columns: [],
309
+ toolbarHeight: 36,
310
+ rowGap: 6,
311
+ indent: 16,
312
+ translate: text => text,
313
+ freezeSize: 300,
314
+ groups: []
315
+ };
316
+
317
+ class AIOTableToolbar extends _react.Component {
318
+ constructor(...args) {
319
+ super(...args);
320
+
321
+ _defineProperty(this, "state", {
322
+ searchText: ''
323
+ });
405
324
  }
406
325
 
407
- getInput_splitter(obj, input) {
408
- return /*#__PURE__*/_react.default.createElement("div", {
409
- style: {
410
- height: 48,
411
- width: '100%',
412
- display: 'flex',
413
- alignItems: 'center'
414
- }
415
- }, /*#__PURE__*/_react.default.createElement("div", {
416
- style: {
417
- height: 0,
418
- flex: 1,
419
- borderBottom: '1px solid #bbb'
420
- }
421
- }), /*#__PURE__*/_react.default.createElement("div", {
422
- style: {
423
- padding: '0 6px',
424
- color: '#aaa'
425
- }
426
- }, "msf"), /*#__PURE__*/_react.default.createElement("div", {
427
- style: {
428
- height: 0,
429
- flex: 1,
430
- borderBottom: '1px solid #bbb'
431
- }
432
- }));
326
+ changeSearch(value, time = 1000) {
327
+ clearTimeout(this.searchTimeout);
328
+ this.setState({
329
+ searchText: value
330
+ });
331
+ this.searchTimeout = setTimeout(() => this.context.SetState({
332
+ searchText: value
333
+ }), time);
433
334
  }
434
335
 
435
- sortByRows(inputs) {
436
- let res = {};
437
- let result = [];
336
+ getSearch() {
337
+ let {
338
+ translate
339
+ } = this.context;
340
+ let {
341
+ search
342
+ } = this.props;
343
+ let {
344
+ searchText
345
+ } = this.state;
438
346
 
439
- for (let i = 0; i < inputs.length; i++) {
440
- let {
441
- type,
442
- show
443
- } = inputs[i];
347
+ if (!search) {
348
+ return /*#__PURE__*/_react.default.createElement("div", {
349
+ style: {
350
+ flex: 1
351
+ },
352
+ key: "search"
353
+ });
354
+ }
444
355
 
445
- if (!type) {
446
- continue;
447
- }
356
+ return /*#__PURE__*/_react.default.createElement("div", {
357
+ className: "aio-table-search",
358
+ key: "search"
359
+ }, /*#__PURE__*/_react.default.createElement("input", {
360
+ className: "aio-table-search-input",
361
+ type: "text",
362
+ value: searchText,
363
+ placeholder: translate('Search'),
364
+ onChange: e => this.changeSearch(e.target.value)
365
+ }), aioTableGetSvg(searchText ? 'close' : 'magnify', {
366
+ onClick: () => {
367
+ if (!searchText) {
368
+ return;
369
+ }
448
370
 
449
- if (this.getValue(show, true) === false) {
450
- continue;
371
+ this.changeSearch('', 0);
451
372
  }
373
+ }));
374
+ }
452
375
 
453
- inputs[i]._index = i;
454
-
455
- if (type === 'group') {
456
- let a = 'a' + Math.random();
457
- res[a] = [inputs[i]];
458
- result.push(res[a]);
459
- continue;
376
+ render() {
377
+ let {
378
+ fn,
379
+ rows,
380
+ translate,
381
+ rtl,
382
+ toggleAllState,
383
+ toolbarItems = [],
384
+ SetState,
385
+ toolbarAttrs = {},
386
+ toggleAll,
387
+ groups
388
+ } = this.context;
389
+ let {
390
+ toggleOptions,
391
+ freezeOptions,
392
+ groupOptions,
393
+ excelColumns,
394
+ sortOptions
395
+ } = this.props;
396
+ let buttonProps = {
397
+ type: 'select',
398
+ rtl,
399
+ caret: false,
400
+ className: 'aio-table-toolbar-button',
401
+ animate: true,
402
+ popupAttrs: {
403
+ style: {
404
+ maxHeight: 500
405
+ }
460
406
  }
407
+ };
408
+ let Sort, Toggle, Group, Freeze, Excel, ToggleAll;
409
+
410
+ if (sortOptions.length) {
411
+ let title = translate('Sort');
412
+ let props = { ...buttonProps,
413
+ options: sortOptions,
414
+ title,
415
+ key: 'sort',
416
+ text: aioTableGetSvg('sort'),
417
+ popupHeader: /*#__PURE__*/_react.default.createElement("div", {
418
+ className: "aio-table-popup-header"
419
+ }, title)
420
+ };
421
+ Sort = /*#__PURE__*/_react.default.createElement(_aioButton.default, props);
422
+ }
461
423
 
462
- let {
463
- rowKey
464
- } = inputs[i];
424
+ if (toggleOptions.length) {
425
+ let title = translate('Show Columns');
426
+ let props = { ...buttonProps,
427
+ options: toggleOptions,
428
+ title,
429
+ key: 'toggle',
430
+ text: aioTableGetSvg('eye'),
431
+ popupHeader: /*#__PURE__*/_react.default.createElement("div", {
432
+ className: "aio-table-popup-header"
433
+ }, title)
434
+ };
435
+ Toggle = /*#__PURE__*/_react.default.createElement(_aioButton.default, props);
436
+ }
465
437
 
466
- if (!rowKey) {
467
- rowKey = 'a' + Math.random();
468
- }
438
+ if (groupOptions.length) {
439
+ let title = translate('Group By');
440
+ let props = { ...buttonProps,
441
+ options: groupOptions,
442
+ title,
443
+ key: 'group',
444
+ text: aioTableGetSvg('group', {
445
+ flip: rtl === true
446
+ }),
447
+ popupHeader: /*#__PURE__*/_react.default.createElement("div", {
448
+ className: "aio-table-popup-header"
449
+ }, title),
450
+ onSwap: (start, end, swap) => SetState({
451
+ groups: swap(groups, start, end)
452
+ })
453
+ };
454
+ Group = /*#__PURE__*/_react.default.createElement(_aioButton.default, props);
455
+ }
469
456
 
470
- if (!res[rowKey]) {
471
- res[rowKey] = [];
472
- result.push(res[rowKey]);
473
- }
457
+ if (freezeOptions.length) {
458
+ let title = translate('Freeze');
459
+ let props = { ...buttonProps,
460
+ options: freezeOptions,
461
+ title,
462
+ key: 'freeze',
463
+ text: aioTableGetSvg('freeze'),
464
+ popupHeader: /*#__PURE__*/_react.default.createElement("div", {
465
+ className: "aio-table-popup-header"
466
+ }, title)
467
+ };
468
+ Freeze = /*#__PURE__*/_react.default.createElement(_aioButton.default, props);
469
+ }
474
470
 
475
- res[rowKey].push(inputs[i]);
471
+ if (toggleAll) {
472
+ let title = translate('Toggle All');
473
+ let props = { ...buttonProps,
474
+ title,
475
+ key: 'toggleAll',
476
+ type: 'button',
477
+ text: !toggleAllState ? aioTableGetSvg('toggleAllMinus') : aioTableGetSvg('toggleAllPlus'),
478
+ onclick: () => SetState(fn.getStateByToggleAll(rows))
479
+ };
480
+ ToggleAll = /*#__PURE__*/_react.default.createElement(_aioButton.default, props);
476
481
  }
477
482
 
478
- return result;
479
- }
483
+ if (excelColumns.length) {
484
+ let title = translate('Export To Excel');
485
+ let props = { ...buttonProps,
486
+ title,
487
+ key: 'excel',
488
+ type: 'button',
489
+ text: aioTableGetSvg('excel'),
490
+ onClick: () => fn.exportToExcel(excelColumns, rows)
491
+ };
492
+ Excel = /*#__PURE__*/_react.default.createElement(_aioButton.default, props);
493
+ }
480
494
 
481
- getFix(input, rtl, type) {
482
- let fix_props = this.props[type + 'Attrs'] || {};
483
- let fix_input = input[type + 'Attrs'] || {};
484
- let attrs = { ...fix_props,
485
- ...fix_input
486
- };
487
- let {
488
- onClick = () => {}
489
- } = attrs;
490
- return /*#__PURE__*/_react.default.createElement("div", _extends({}, attrs, {
491
- onClick: () => onClick(input),
492
- className: `aio-form-${type}` + (rtl ? ' rtl' : '') + (attrs.className ? ' ' + attrs.className : '')
493
- }), input[type]);
495
+ return /*#__PURE__*/_react.default.createElement("div", {
496
+ className: 'aio-table-toolbar' + (toolbarAttrs.className ? ' ' + toolbarAttrs.className : ''),
497
+ style: { ...toolbarAttrs.style
498
+ }
499
+ }, ToggleAll, Excel, toolbarItems.map((o, i) => /*#__PURE__*/_react.default.createElement(_aioButton.default, _extends({
500
+ type: "button",
501
+ rtl: rtl,
502
+ className: "aio-table-toolbar-button",
503
+ animate: true
504
+ }, o, {
505
+ key: 'ti' + i
506
+ }))), this.getSearch(), Group, Sort, Toggle, Freeze);
494
507
  }
495
508
 
496
- getInput(input) {
497
- let {
498
- rtl
499
- } = this.props;
500
- let {
501
- label,
502
- affix,
503
- prefix,
504
- prefixAttrs = {}
505
- } = input;
506
- let theme = this.getInputTheme(input);
507
- let value = this.getValue('calc model.' + input.field);
508
- let options = this.getValue(input.options, []);
509
- let disabled = this.getValue(input.disabled, false);
510
- let text = this.getValue(input.text);
511
- let start = this.getValue(input.start, 0);
512
- let end = this.getValue(input.end, 100);
513
- let subtext = this.getValue(input.subtext);
514
- let placeholder = this.getValue(input.placeholder, false);
515
-
516
- let onChange = value => this.onChange(input, value);
517
-
518
- let style = theme.input;
519
- let className = `aio-form-input aio-form-input-${input.type}` + (disabled ? ' disabled' : '') + (input.className ? ' ' + input.className : '') + (affix ? ' has-affix' : '') + (prefix ? ' has-prefix' : '') + (rtl ? ' rtl' : ' ltr');
520
- let error = this.getError(input, value, options);
521
- let props = {
522
- value,
523
- options,
524
- disabled,
525
- onChange,
526
- className,
527
- style,
528
- placeholder,
529
- text,
530
- subtext,
531
- start,
532
- end,
533
- theme
534
- };
535
- let {
536
- label: themeLabel = {}
537
- } = theme;
509
+ }
538
510
 
539
- if (themeLabel.inline) {
540
- return {
541
- className: 'aio-form-item',
542
- style: {
543
- overflow: 'visible',
544
- marginBottom: theme.rowGap
545
- },
546
- row: [{
547
- align: 'v',
548
- size: themeLabel.width,
549
- show: label !== undefined,
550
- html: label,
551
- style: { ...themeLabel,
552
- width: 'fit-content'
553
- }
554
- }, {
555
- size: 6
556
- }, {
557
- flex: 1,
558
- style: {
559
- overflow: 'visible'
560
- },
561
- column: [{
562
- row: [{
563
- show: !!input.prefix,
564
- html: () => this.getFix(input, rtl, 'prefix')
565
- }, {
566
- flex: 1,
567
- html: () => this['getInput_' + input.type](props, input)
568
- }, {
569
- show: !!input.affix,
570
- html: () => this.getFix(input, rtl, 'affix')
571
- }]
572
- }, {
573
- align: 'v',
574
- show: error !== '',
575
- html: error,
576
- className: 'aio-form-error'
577
- }]
578
- }]
579
- };
580
- } else {
581
- return {
582
- className: 'aio-form-item',
583
- style: {
584
- overflow: 'visible',
585
- marginBottom: theme.rowGap
586
- },
587
- column: [{
588
- size: themeLabel.height || 24,
589
- show: label !== undefined,
590
- align: 'v',
591
- html: label,
592
- style: { ...themeLabel,
593
- width: 'fit-content',
594
- height: 'fit-content'
595
- }
596
- }, {
597
- row: [{
598
- show: !!input.prefix,
599
- html: () => this.getFix(input, rtl, 'prefix')
600
- }, {
601
- flex: 1,
602
- html: () => this['getInput_' + input.type](props, input)
603
- }, {
604
- show: !!input.affix,
605
- html: () => this.getFix(input, rtl, 'affix')
606
- }]
607
- }, {
608
- size: 24,
609
- show: error !== '',
610
- html: error,
611
- className: 'aio-form-error'
612
- }]
613
- };
614
- }
615
- }
511
+ _defineProperty(AIOTableToolbar, "contextType", AioTableContext);
616
512
 
617
- getInputs(inputs) {
513
+ class AIOTablePaging extends _react.Component {
514
+ getPageNumber(type) {
618
515
  let {
619
- onSwap
516
+ paging
620
517
  } = this.props;
621
518
  let {
622
- theme
623
- } = this.state;
624
- return this.sortByRows(inputs).map((input, i) => {
625
- return {
626
- swapId: onSwap ? input._index.toString() : undefined,
627
- swapHandleClassName: 'aio-form-label',
628
- gap: theme.columnGap || 12,
629
- row: input.map(o => {
630
- return { ...this.getInput(o),
631
- flex: o.rowWidth ? undefined : 1,
632
- size: o.rowWidth,
633
- align: 'v'
634
- };
635
- })
636
- };
637
- });
638
- }
639
-
640
- getError(o, value, options) {
641
- let {
642
- validations = []
643
- } = o;
644
- let lang = 'en';
645
-
646
- if (!validations.length) {
647
- return '';
519
+ pages = 1,
520
+ number
521
+ } = paging;
522
+ let newNumber;
523
+
524
+ if (type === 'prev') {
525
+ newNumber = number - 1;
526
+ } else if (type === 'next') {
527
+ newNumber = number + 1;
528
+ } else if (type === 'first') {
529
+ newNumber = 1;
530
+ } else if (type === 'last') {
531
+ newNumber = pages;
648
532
  }
649
533
 
650
- let a = {
651
- value,
652
- title: o.label,
653
- lang,
654
- validations: validations.map(a => {
655
- return [a[0], this.getValue(a[1], ''), a[2]];
656
- })
657
- };
658
- let error = (0, _aioValidation.default)(a);
534
+ if (newNumber < 1) {
535
+ newNumber = 1;
536
+ }
659
537
 
660
- if (!this.isThereError && error) {
661
- this.isThereError = true;
538
+ if (newNumber > pages) {
539
+ newNumber = pages;
662
540
  }
663
541
 
664
- return error;
542
+ return newNumber;
665
543
  }
666
544
 
667
- async reset() {
545
+ changePage(type) {
668
546
  let {
669
- onSubmit,
547
+ paging,
670
548
  onChange
671
549
  } = this.props;
672
550
  let {
673
- initialModel
674
- } = this.state;
551
+ number
552
+ } = paging;
553
+ let newNumber = this.getPageNumber(type);
675
554
 
676
- if (onSubmit) {
677
- this.setState({
678
- model: JSON.parse(initialModel)
679
- });
680
- } else if (onChange) {
681
- await onChange(JSON.parse(initialModel));
555
+ if (newNumber === number) {
556
+ return;
682
557
  }
558
+
559
+ onChange({ ...paging,
560
+ number: newNumber
561
+ });
683
562
  }
684
563
 
685
564
  render() {
686
- let {
687
- inputs,
688
- header,
565
+ var {
566
+ paging,
567
+ onChange,
689
568
  rtl,
690
- onSubmit,
691
- submitText = 'Submit',
692
- closeText = 'Close',
693
- resetText = 'Reset',
694
- onClose,
695
- footerAttrs,
696
- reset
569
+ translate = str => str
697
570
  } = this.props;
698
- this.isThereError = false;
699
- let column = this.getInputs(inputs);
700
- return /*#__PURE__*/_react.default.createElement(_reactVirtualDom.default, {
701
- layout: {
702
- className: 'aio-form',
703
- column: [{
704
- show: header !== undefined,
705
- html: /*#__PURE__*/_react.default.createElement(AIOFormHeader, _extends({}, header, {
706
- rtl: rtl
707
- }))
708
- }, {
709
- className: 'aio-form-body',
710
- scroll: 'v',
711
- flex: 1,
712
- column
713
- }, {
714
- show: onSubmit !== undefined || reset === true || onClose !== undefined,
715
- html: () => /*#__PURE__*/_react.default.createElement(AIOFormFooter, {
716
- isThereError: this.isThereError,
717
- onClose: onClose,
718
- onSubmit: onSubmit ? () => onSubmit({ ...this.state.model
719
- }) : undefined,
720
- closeText: closeText,
721
- submitText: submitText,
722
- resetText: resetText,
723
- footerAttrs: footerAttrs,
724
- onReset: reset ? () => this.reset() : undefined
725
- })
726
- }]
571
+ var {
572
+ number,
573
+ sizes = [1, 5, 10, 20, 30, 40, 50, 60, 70, 80],
574
+ size,
575
+ pages = 1
576
+ } = paging;
577
+ return /*#__PURE__*/_react.default.createElement("div", {
578
+ className: "aio-table-paging",
579
+ style: {
580
+ direction: 'ltr'
727
581
  }
728
- });
582
+ }, /*#__PURE__*/_react.default.createElement("div", {
583
+ className: "aio-table-paging-button",
584
+ onClick: () => this.changePage(rtl ? 'last' : 'first'),
585
+ title: translate(rtl ? 'Last Page' : 'First Page')
586
+ }, aioTableGetSvg('doubleChevronRight', {
587
+ flip: true
588
+ })), /*#__PURE__*/_react.default.createElement("div", {
589
+ className: "aio-table-paging-button",
590
+ onClick: () => this.changePage(rtl ? 'next' : 'prev'),
591
+ title: translate(rtl ? 'Next Page' : 'Previous Page')
592
+ }, aioTableGetSvg('chevronRight', {
593
+ flip: true
594
+ })), /*#__PURE__*/_react.default.createElement("div", {
595
+ className: "aio-table-paging-number"
596
+ }, rtl ? pages + ' / ' + number : number + ' / ' + pages), /*#__PURE__*/_react.default.createElement("div", {
597
+ className: "aio-table-paging-button",
598
+ onClick: () => this.changePage(rtl ? 'prev' : 'next'),
599
+ title: translate(rtl ? 'Previous Page' : 'Next Page')
600
+ }, aioTableGetSvg('chevronRight')), /*#__PURE__*/_react.default.createElement("div", {
601
+ className: "aio-table-paging-button",
602
+ onClick: () => this.changePage(rtl ? 'first' : 'last'),
603
+ title: translate(rtl ? 'First Page' : 'Last Page')
604
+ }, aioTableGetSvg('doubleChevronRight')), /*#__PURE__*/_react.default.createElement("select", {
605
+ className: "aio-table-paging-button",
606
+ value: size,
607
+ onChange: e => onChange({ ...paging,
608
+ size: parseInt(e.target.value)
609
+ }),
610
+ title: translate('Rows Count Per Page')
611
+ }, sizes.map((s, i) => /*#__PURE__*/_react.default.createElement("option", {
612
+ key: i,
613
+ value: s
614
+ }, s))));
729
615
  }
730
616
 
731
617
  }
732
618
 
733
- exports.default = AIOForm;
734
-
735
- class AIOFormHeader extends _react.Component {
736
- render() {
737
- let {
738
- title,
739
- subtitle,
740
- onClose,
741
- attrs = {},
742
- print,
743
- onBack,
744
- justify,
745
- onForward,
746
- rtl
747
- } = this.props;
748
- return /*#__PURE__*/_react.default.createElement(_reactVirtualDom.default, {
749
- layout: {
750
- className: 'aio-form-header' + (attrs.className ? ' ' + attrs.className : ''),
751
- style: attrs.style,
752
- align: 'v',
753
- row: [{
754
- show: onBack !== undefined,
755
- html: /*#__PURE__*/_react.default.createElement(_react2.Icon, {
756
- path: rtl ? _js.mdiChevronRight : _js.mdiChevronLeft,
757
- size: 0.9
758
- }),
759
- align: 'vh',
760
- size: 36,
761
- attrs: {
762
- onClick: onBack
763
- }
764
- }, {
765
- show: justify === true,
766
- flex: 1
767
- }, {
768
- column: [{
769
- html: title,
770
- className: 'aio-form-title',
771
- align: 'v'
772
- }, {
773
- show: subtitle !== undefined,
774
- html: subtitle,
775
- className: 'aio-form-subtitle',
776
- align: 'v'
777
- }]
778
- }, {
779
- flex: 1
780
- }, {
781
- show: onForward !== undefined,
782
- html: /*#__PURE__*/_react.default.createElement(_react2.Icon, {
783
- path: rtl ? _js.mdiChevronLeft : _js.mdiChevronRight,
784
- size: 0.9
785
- }),
786
- align: 'vh',
787
- size: 36,
788
- attrs: {
789
- onClick: onForward
790
- }
791
- }, {
792
- show: print !== undefined,
793
- html: /*#__PURE__*/_react.default.createElement(_react2.Icon, {
794
- path: _js.mdiPrinter,
795
- size: 0.9
796
- }),
797
- align: 'vh',
798
- size: 36
799
- }, {
800
- show: onClose !== undefined,
801
- html: /*#__PURE__*/_react.default.createElement(_react2.Icon, {
802
- path: _js.mdiClose,
803
- size: 0.8
804
- }),
805
- align: 'vh',
806
- size: 36,
807
- attrs: {
808
- onClick: onClose
809
- }
810
- }]
811
- }
812
- });
619
+ class AIOTableUnit extends _react.Component {
620
+ constructor(props) {
621
+ super(props);
622
+ this.dom = /*#__PURE__*/(0, _react.createRef)();
813
623
  }
814
624
 
815
- }
816
-
817
- class AIOFormFooter extends _react.Component {
818
- render() {
625
+ getCardStyle() {
819
626
  let {
820
- onClose,
821
- onSubmit,
822
- closeText,
823
- submitText,
824
- footerAttrs = {},
825
- onReset,
826
- resetText,
827
- isThereError
828
- } = this.props;
829
- return /*#__PURE__*/_react.default.createElement(_reactVirtualDom.default, {
830
- layout: {
831
- align: 'v',
832
- className: 'aio-form-footer',
833
- row: [{
834
- show: onClose !== undefined,
835
- html: () => /*#__PURE__*/_react.default.createElement("button", {
836
- className: "aio-form-footer-button aio-form-close-button",
837
- onClick: () => onClose()
838
- }, closeText)
839
- }, {
840
- size: 12,
841
- show: onSubmit !== undefined
842
- }, {
843
- show: onSubmit !== undefined,
844
- html: () => /*#__PURE__*/_react.default.createElement("button", {
845
- className: "aio-form-footer-button aio-form-submit-button",
846
- disabled: isThereError,
847
- onClick: () => onSubmit()
848
- }, submitText)
849
- }, {
850
- size: 12,
851
- show: onSubmit !== undefined
852
- }, {
853
- show: onReset !== undefined,
854
- html: () => /*#__PURE__*/_react.default.createElement("button", {
855
- className: "aio-form-footer-button aio-form-reset-button",
856
- onClick: () => onReset()
857
- }, resetText)
858
- }]
859
- }
860
- });
627
+ columnGap,
628
+ rowGap
629
+ } = this.context;
630
+ return {
631
+ gridColumnGap: columnGap,
632
+ gridRowGap: rowGap
633
+ };
861
634
  }
862
635
 
863
- }
864
-
865
- function Text(obj) {
866
- let [value, setValue] = (0, _react.useState)(obj.value),
867
- [prevValue, setPrevValue] = (0, _react.useState)(obj.value),
868
- [timer, setTimer] = (0, _react.useState)();
869
- let [error, setError] = (0, _react.useState)(false);
870
- let dom = (0, _react.useRef)(null);
636
+ getStyle() {
637
+ if (this.context.cardTemplate) {
638
+ return this.getCardStyle();
639
+ }
871
640
 
872
- if (obj.value !== prevValue) {
873
- setTimeout(() => {
874
- setValue(obj.value);
875
- setPrevValue(obj.value);
876
- }, 0);
641
+ return this.getGridStyle();
877
642
  }
878
643
 
879
- function onChange(e) {
880
- let value = e.target.value;
644
+ getGridStyle() {
645
+ var {
646
+ rowGap,
647
+ columnGap
648
+ } = this.context;
649
+ var {
650
+ columns,
651
+ style
652
+ } = this.props;
653
+ var gridTemplateColumns = '';
654
+ this.gridTemplateColumns = [];
655
+
656
+ for (let i = 0; i < columns.length; i++) {
657
+ let {
658
+ width = 'auto'
659
+ } = columns[i];
660
+ width = width.toString();
881
661
 
882
- if (obj.type === 'number') {
883
- if (value) {
884
- value = +value;
662
+ if (width !== 'auto' && width.indexOf('px') === -1) {
663
+ width += 'px';
885
664
  }
665
+
666
+ this.gridTemplateColumns.push(width);
667
+ gridTemplateColumns += width + (i < columns.length - 1 ? ' ' : '');
886
668
  }
887
669
 
888
- setValue(value);
889
- clearTimeout(timer);
890
- setTimer(setTimeout(() => {
891
- obj.onChange(value);
892
- }, 800));
670
+ return {
671
+ gridTemplateColumns,
672
+ gridRowGap: rowGap,
673
+ gridColumnGap: columnGap,
674
+ ...style
675
+ };
893
676
  }
894
677
 
895
- (0, _react.useEffect)(() => {
896
- if (obj.type === 'textarea' && obj.autoHeight) {
897
- let scrollHeight = dom.current.scrollHeight + 'px';
898
- dom.current.style.height = scrollHeight;
899
- dom.current.style.overflow = 'hidden';
900
- dom.current.style.resize = 'none';
901
- }
902
- });
903
- let props = { ...obj,
904
- value,
905
- onChange: e => onChange(e),
906
- ref: dom
907
- };
908
- let uid = 'a' + Math.random();
909
-
910
- if (error !== false) {
911
- return /*#__PURE__*/_react.default.createElement("div", {
912
- className: "aio-form-inline-error aio-form-input",
913
- onClick: () => setError(false)
914
- }, error);
915
- }
916
-
917
- return obj.type === 'textarea' ? /*#__PURE__*/_react.default.createElement("textarea", props) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", _extends({}, props, {
918
- list: uid
919
- })), Array.isArray(obj.options) && obj.options.length !== 0 && /*#__PURE__*/_react.default.createElement("datalist", {
920
- id: uid
921
- }, obj.options.map((o, i) => /*#__PURE__*/_react.default.createElement("option", {
922
- key: i,
923
- value: o.text
924
- }))));
925
- }
678
+ setStyle(gridTemplateColumns) {
679
+ (0, _jquery.default)(this.dom.current).css({
680
+ gridTemplateColumns: gridTemplateColumns.join(' ')
681
+ });
682
+ }
926
683
 
927
- class AIOFormSlider extends _react.Component {
928
- render() {
929
- let {
930
- className,
931
- start,
932
- end,
933
- step,
934
- value,
935
- onChange,
936
- disabled,
937
- style,
938
- editValue
684
+ getTitles() {
685
+ var {
686
+ columns
939
687
  } = this.props;
940
-
941
- if (!Array.isArray(value)) {
942
- value = [value];
943
- }
944
-
945
- let props = {
946
- attrs: {
947
- className,
948
- style
949
- },
950
- start,
951
- end,
952
- step,
953
- points: value,
954
- onChange: disabled ? undefined : points => points.length === 1 ? onChange(points[0]) : onChange([points[0], points[1]]),
955
- showValue: true,
956
- editValue,
957
- fillStyle: index => {
958
- if (value.length === 1) {
959
- if (index === 1) {
960
- return {
961
- background: 'none'
962
- };
688
+ return columns.map((column, i) => {
689
+ return /*#__PURE__*/_react.default.createElement(AIOTableTitle, {
690
+ isLast: i === columns.length - 1,
691
+ key: 'title' + i,
692
+ column: column,
693
+ gridTemplateColumns: this.gridTemplateColumns,
694
+ setStyle: this.setStyle.bind(this),
695
+ onDragStart: index => this.startColumnSwap = index,
696
+ onDragOver: (e, index) => {
697
+ e.preventDefault();
698
+ this.endColumnSwap = index;
699
+ },
700
+ onDrop: column => {
701
+ let {
702
+ SetState,
703
+ columns
704
+ } = this.context;
705
+
706
+ if (column.movable === false) {
707
+ return;
963
708
  }
964
- } else {
965
- if (index === 0 || index === value.length) {
966
- return {
967
- background: 'none'
968
- };
709
+
710
+ if (this.startColumnSwap === undefined || this.startColumnSwap === this.endColumnSwap) {
711
+ return;
969
712
  }
970
- }
971
713
 
972
- return {
973
- background: 'dodgerblue'
974
- };
975
- },
976
- valueStyle: () => {
977
- return {
978
- height: 20,
979
- display: 'flex',
980
- minWidth: 12,
981
- padding: '0 3px',
982
- justifyContent: 'center',
983
- alignItems: 'center',
984
- top: 'calc(50% - 10px)'
985
- };
986
- },
987
- pointStyle: () => {
988
- return {
989
- display: 'none'
990
- };
991
- }
992
- };
993
- return /*#__PURE__*/_react.default.createElement(_rRangeSlider.default, props);
994
- }
714
+ let startColumn = columns[this.startColumnSwap];
715
+ let endColumn = columns[this.endColumnSwap];
716
+ let newColumns = columns.map((c, j) => {
717
+ if (j === this.startColumnSwap) {
718
+ return endColumn;
719
+ }
995
720
 
996
- }
721
+ if (j === this.endColumnSwap) {
722
+ return startColumn;
723
+ }
997
724
 
998
- class AIOFormTable extends _react.Component {
999
- setValueByField(obj, field, value) {
1000
- field = field.replaceAll('[', '.');
1001
- field = field.replaceAll(']', '');
1002
- var fields = field.split('.');
1003
- var node = obj;
1004
-
1005
- for (let i = 0; i < fields.length - 1; i++) {
1006
- if (node[fields[i]] === undefined) {
1007
- if (isNaN(parseFloat(fields[i + 1]))) {
1008
- node[fields[i]] = {};
1009
- } else {
1010
- node[fields[i]] = [];
725
+ return c;
726
+ });
727
+ SetState({
728
+ columns: newColumns
729
+ });
1011
730
  }
731
+ });
732
+ });
733
+ }
1012
734
 
1013
- node = node[fields[i]];
1014
- } else {
1015
- node = node[fields[i]];
1016
- }
735
+ keyDown(e) {
736
+ var {
737
+ SetState
738
+ } = this.context;
739
+
740
+ if (e.keyCode === 27) {
741
+ (0, _jquery.default)('.aio-table-input').blur();
742
+ SetState({
743
+ focused: false
744
+ }, 'keyDown');
745
+ } else if ([37, 38, 39, 40].indexOf(e.keyCode) !== -1) {
746
+ this.arrow(e);
1017
747
  }
1018
-
1019
- node[fields[fields.length - 1]] = value;
1020
- return obj;
1021
748
  }
1022
749
 
1023
- add() {
1024
- let {
1025
- columns = [],
1026
- onChange,
1027
- value = []
750
+ arrow(e) {
751
+ var container = (0, _jquery.default)(this.dom.current);
752
+ var {
753
+ rtl,
754
+ focused,
755
+ SetState
756
+ } = this.context;
757
+ var {
758
+ columns
1028
759
  } = this.props;
760
+ let inputs = container.find('.aio-table-input');
1029
761
 
1030
- if (!columns.length) {
762
+ if (inputs.length === 0) {
1031
763
  return;
1032
764
  }
1033
765
 
1034
- let obj = {};
766
+ let focusedInput = inputs.filter(':focus');
1035
767
 
1036
- for (let i = 0; i < columns.length; i++) {
1037
- let {
1038
- field,
1039
- type
1040
- } = columns[i];
768
+ if (focused === false) {
769
+ let inputCells = (0, _jquery.default)('.aio-table-cell-input');
1041
770
 
1042
- if (!field) {
1043
- continue;
771
+ if (inputCells.length) {
772
+ let cell = inputCells.eq(0);
773
+ SetState({
774
+ focused: cell.attr('data-cell-id')
775
+ });
776
+ setTimeout(() => {
777
+ cell.find('.aio-table-input').focus().select();
778
+ }, 10);
1044
779
  }
1045
780
 
1046
- if (typeof field === 'string' && field.indexOf('calc ') === 0) {
1047
- continue;
1048
- }
781
+ return;
782
+ }
1049
783
 
1050
- let val;
784
+ let [rowIndex, colIndex] = this.getCellIndex(focusedInput.parents('.aio-table-cell'));
785
+ console.log(rowIndex, colIndex);
1051
786
 
1052
- if (type === 'text') {
1053
- val = '';
1054
- } else if (type === 'number') {
1055
- val = 0;
1056
- } else if (type === 'select') {
1057
- let options = this.getColumnOptions(columns[i]);
787
+ if (e.keyCode === 40 || e.keyCode === 38) {
788
+ let sign = e.keyCode === 40 ? 1 : -1;
789
+ e.preventDefault();
790
+ rowIndex += sign;
791
+ let next = inputs.filter(`[data-row-index=${rowIndex}][data-col-index=${colIndex}]`);
1058
792
 
1059
- try {
1060
- val = options[0].value;
1061
- } catch {
1062
- val = '';
1063
- }
1064
- } else if (type === 'checkbox') {
1065
- val = false;
793
+ while (rowIndex < this.renderIndex && rowIndex > 0 && next.length === 0) {
794
+ rowIndex += sign;
795
+ next = inputs.filter(`[data-row-index=${rowIndex}][data-col-index=${colIndex}]`);
1066
796
  }
1067
797
 
1068
- this.setValueByField(obj, field, val);
798
+ if (next.length) {
799
+ next.focus();
800
+ setTimeout(() => next.select(), 5);
801
+ }
802
+ } else if (e.keyCode === 39 || e.keyCode === 37) {
803
+ e.preventDefault();
804
+ let sign = (e.keyCode === 37 ? -1 : 1) * (rtl ? -1 : 1);
805
+ colIndex += sign;
806
+ let next = inputs.filter(`[data-row-index=${rowIndex}][data-col-index=${colIndex}]`);
807
+
808
+ while (colIndex > 0 && colIndex < columns.length && next.length === 0) {
809
+ colIndex += sign;
810
+ next = inputs.filter(`[data-row-index=${rowIndex}][data-col-index=${colIndex}]`);
811
+ }
812
+
813
+ if (next.length) {
814
+ next.focus();
815
+ setTimeout(() => next.select(), 5);
816
+ }
1069
817
  }
818
+ }
1070
819
 
1071
- value.push(obj);
1072
- onChange(value);
820
+ getCellIndex(cell) {
821
+ return [parseInt(cell.attr('data-row-index')), parseInt(cell.attr('data-col-index'))];
1073
822
  }
1074
823
 
1075
- getToolbarItems() {
1076
- let {
1077
- item,
1078
- addable = true,
1079
- disabled
824
+ card(props) {
825
+ var {
826
+ rowHeight,
827
+ fn,
828
+ cardTemplate,
829
+ cardRowCount,
830
+ search,
831
+ searchText,
832
+ indent
833
+ } = this.context;
834
+ var {
835
+ tableIndex,
836
+ columns
1080
837
  } = this.props;
838
+ var groupStyle = {
839
+ gridColumnStart: 1,
840
+ gridColumnEnd: cardRowCount + 1,
841
+ height: rowHeight
842
+ };
1081
843
 
1082
- if (disabled) {
1083
- return;
844
+ if (cardRowCount === 'auto') {
845
+ groupStyle.gridColumnStart = undefined;
846
+ groupStyle.gridColumnEnd = undefined;
1084
847
  }
1085
848
 
1086
- let toolbarItems = [];
849
+ let rows;
1087
850
 
1088
- if (addable) {
1089
- toolbarItems.push({
1090
- text: '+',
1091
- type: 'button',
1092
- onClick: () => this.add(),
1093
- className: 'aio-form-input aio-form-input-table-add',
1094
- style: {
1095
- background: 'none',
1096
- color: 'inherit',
1097
- padding: 0,
1098
- width: '100%'
851
+ if (search) {
852
+ rows = this.props.rows.filter(o => {
853
+ if (searchText === '') {
854
+ return true;
855
+ }
856
+
857
+ try {
858
+ return search(o.row, searchText);
859
+ } catch {
860
+ return false;
1099
861
  }
1100
862
  });
863
+ } else {
864
+ rows = this.props.rows;
1101
865
  }
1102
866
 
1103
- return toolbarItems;
867
+ return /*#__PURE__*/_react.default.createElement("div", _extends({}, props, {
868
+ style: { ...props.style,
869
+ gridTemplateColumns: cardRowCount === 'auto' ? undefined : `repeat(${cardRowCount},auto)`
870
+ }
871
+ }), rows && rows.length !== 0 && rows.map((row, rowIndex) => {
872
+ if (row._groupId) {
873
+ return /*#__PURE__*/_react.default.createElement(AIOTableGroup, {
874
+ row,
875
+ rowIndex,
876
+ tableIndex
877
+ });
878
+ }
879
+
880
+ return /*#__PURE__*/_react.default.createElement("div", {
881
+ key: rowIndex + '-' + tableIndex,
882
+ className: "aio-table-card"
883
+ }, row.row._level !== 0 && /*#__PURE__*/_react.default.createElement("div", {
884
+ style: {
885
+ width: row.row._level * indent,
886
+ border: '1px solid',
887
+ height: '100%',
888
+ position: 'relative'
889
+ }
890
+ }, /*#__PURE__*/_react.default.createElement("svg", {
891
+ style: {
892
+ background: 'yellow',
893
+ width: '100%',
894
+ positon: 'absolute',
895
+ height: '100%'
896
+ }
897
+ })), cardTemplate(row.row, () => fn.toggleRow(row.row)));
898
+ }), rows && rows.length === 0 && fn.getNoData(columns), !rows && fn.getLoading());
1104
899
  }
1105
900
 
1106
- getColumnOptions(column) {
1107
- let {
1108
- getValue
1109
- } = this.props;
1110
- return getValue(column.options, []);
901
+ getPropValue(row, column, prop) {
902
+ return typeof prop === 'function' ? prop(row, column) : prop;
1111
903
  }
1112
904
 
1113
- getColumns() {
1114
- let {
1115
- onChange,
1116
- addable = true,
1117
- disabled,
1118
- columns,
1119
- value,
1120
- rowNumber
905
+ render() {
906
+ var {
907
+ onScroll,
908
+ onSwap,
909
+ onDrop,
910
+ onDrag,
911
+ fn,
912
+ focused,
913
+ SetState,
914
+ striped,
915
+ getCellAttrs
916
+ } = this.context;
917
+ var {
918
+ rows,
919
+ id,
920
+ tableIndex,
921
+ type,
922
+ columns
1121
923
  } = this.props;
1122
- let result = columns.map(column => {
1123
- let a = { ...column,
1124
- cellAttrs: {
1125
- className: 'aio-form-input'
1126
- },
1127
- titleAttrs: {
1128
- className: 'aio-form-input'
1129
- },
1130
- getValue: column.field.indexOf('calc ') === 0 ? row => {
1131
- let a;
1132
- column.disabled = true;
1133
-
1134
- try {
1135
- a = eval(column.field.slice(5, column.field.length));
1136
- } catch {
1137
- a = '';
1138
- }
1139
-
1140
- return a;
1141
- } : column.field
1142
- };
1143
-
1144
- if (column.type === 'select') {
1145
- let options = this.getColumnOptions(column);
1146
-
1147
- a.template = (row, column, value) => {
1148
- let option = options.filter(o => o.value === value)[0];
1149
- return option ? option.text : '';
1150
- };
1151
- }
924
+ let props = {
925
+ id,
926
+ tabIndex: 0,
927
+ className: 'aio-table-unit',
928
+ style: this.getStyle(),
929
+ ref: this.dom,
930
+ onKeyDown: this.keyDown.bind(this),
931
+ onScroll: e => onScroll(tableIndex)
932
+ };
1152
933
 
1153
- if (column.type === 'checkbox') {
1154
- let options = this.getColumnOptions(column) || [{
1155
- text: 'True',
1156
- value: true
1157
- }, {
1158
- text: 'False',
1159
- value: false
1160
- }];
934
+ if (this.context.cardTemplate) {
935
+ return this.card(props);
936
+ }
1161
937
 
1162
- a.template = (row, column, value) => {
1163
- let option = options.filter(o => o.value === value)[0];
1164
- return option ? option.text : '';
1165
- };
938
+ this.renderIndex = -1;
939
+ return /*#__PURE__*/_react.default.createElement("div", props, this.getTitles(), rows && rows.length !== 0 && rows.map((o, i) => {
940
+ if (o._groupId) {
941
+ return /*#__PURE__*/_react.default.createElement(AIOTableGroup, {
942
+ tableIndex,
943
+ row: o,
944
+ columns: columns,
945
+ key: 'group' + i + '-' + tableIndex
946
+ });
1166
947
  }
1167
948
 
1168
- if (['text', 'number', 'select', 'checkbox'].indexOf(column.type) !== -1 && !disabled) {
1169
- a.inlineEdit = {
1170
- type: column.type,
1171
- disabled: column.disabled,
1172
- onChange: (row, val) => {
1173
- if (!value[row._index]) {
1174
- value[row._index] = {};
949
+ this.renderIndex++;
950
+ return o[type].map(({
951
+ value,
952
+ column
953
+ }, j) => {
954
+ let row = o.row;
955
+ let cellId = i + '-' + j + '-' + tableIndex;
956
+ let inlineEdit = this.getPropValue(row, column, column.inlineEdit);
957
+ let attrs = getCellAttrs(row, column);
958
+ return /*#__PURE__*/_react.default.createElement(AIOTableCell, {
959
+ key: cellId,
960
+ attrs: {
961
+ 'data-row-index': this.renderIndex,
962
+ 'data-col-index': column.renderIndex,
963
+ 'data-real-row-index': row._index,
964
+ 'data-real-col-index': column.realIndex,
965
+ 'data-child-index': row._childIndex,
966
+ 'data-childs-length': row._childsLength,
967
+ 'data-lavel': row._level,
968
+ 'data-cell-id': cellId,
969
+ tabIndex: 0,
970
+ draggable: typeof onSwap === 'function' && column.swap,
971
+ onDrop: () => onDrop(row),
972
+ onDragOver: e => e.preventDefault(),
973
+ onDragStart: () => onDrag(row),
974
+ onClick: () => {
975
+ var {
976
+ focused,
977
+ SetState
978
+ } = this.context;
979
+
980
+ if (attrs.onClick) {
981
+ attrs.onClick(row);
982
+ }
983
+
984
+ if (!inlineEdit || focused === cellId) {
985
+ return;
986
+ }
987
+
988
+ if (focused === false) {
989
+ setTimeout(() => fn.handleOutsideClick(), 5);
990
+ }
991
+
992
+ SetState({
993
+ focused: cellId
994
+ }, 'cellonClick');
995
+ setTimeout(() => {
996
+ let dom = (0, _jquery.default)(`[data-cell-id = ${cellId}]`).find('.aio-table-input');
997
+ dom.focus().select();
998
+ }, 10);
1175
999
  }
1176
-
1177
- this.setValueByField(value[row._index], column.field, val);
1178
- onChange(value);
1179
1000
  },
1180
- disabled: () => disabled
1181
- };
1001
+ striped: this.renderIndex % 2 === 0 && striped,
1002
+ value: value,
1003
+ column: column,
1004
+ row: row,
1005
+ inlineEdit: inlineEdit,
1006
+ before: this.getPropValue(row, column, column.before),
1007
+ after: this.getPropValue(row, column, column.after),
1008
+ justify: column.justify !== false && !column.treeMode
1009
+ });
1010
+ });
1011
+ }), rows && rows.length === 0 && fn.getNoData(columns), !rows && fn.getLoading());
1012
+ }
1182
1013
 
1183
- if (column.type === 'select') {
1184
- a.inlineEdit.options = this.getColumnOptions(column);
1185
- }
1014
+ }
1186
1015
 
1187
- a.inlineEdit.disabled = row => {
1188
- if (column.disabled) {
1189
- return true;
1190
- }
1016
+ _defineProperty(AIOTableUnit, "contextType", AioTableContext);
1191
1017
 
1192
- return false;
1193
- };
1194
- }
1018
+ class AIOTableTitle extends _react.Component {
1019
+ constructor(props) {
1020
+ super(props);
1021
+ this.dom = /*#__PURE__*/(0, _react.createRef)();
1022
+ }
1195
1023
 
1196
- return a;
1197
- });
1024
+ getStyle(style) {
1025
+ let {
1026
+ headerHeight,
1027
+ columnGap
1028
+ } = this.context;
1029
+ return {
1030
+ height: headerHeight,
1031
+ top: 0,
1032
+ borderLeft: columnGap ? 'none' : undefined,
1033
+ borderRight: columnGap ? 'none' : undefined,
1034
+ ...style
1035
+ };
1036
+ }
1198
1037
 
1199
- if (rowNumber) {
1200
- result.splice(0, 0, {
1201
- title: '#',
1202
- width: 48,
1203
- getValue: ({
1204
- _index
1205
- }) => _index + 1,
1206
- cellAttrs: {
1207
- className: 'aio-form-input'
1208
- },
1209
- titleAttrs: {
1210
- className: 'aio-form-input'
1211
- }
1212
- });
1038
+ mouseDown(e, column) {
1039
+ if (!column.resizable) {
1040
+ return;
1213
1041
  }
1214
1042
 
1215
- if (addable && !disabled) {
1216
- result.push({
1217
- title: '',
1218
- width: 36,
1219
- cellAttrs: {
1220
- className: 'aio-form-input'
1221
- },
1222
- titleAttrs: {
1223
- className: 'aio-form-input'
1224
- },
1225
- template: row => {
1226
- return /*#__PURE__*/_react.default.createElement("div", {
1227
- onClick: () => {
1228
- let {
1229
- value
1230
- } = this.props;
1231
- value.splice(row._index, 1);
1232
- onChange(value);
1233
- }
1234
- }, "X");
1235
- }
1236
- });
1043
+ this.resizeDown(e, column);
1044
+ }
1045
+
1046
+ resizeDown(e, column) {
1047
+ var {
1048
+ touch,
1049
+ fn
1050
+ } = this.context;
1051
+ var {
1052
+ gridTemplateColumns
1053
+ } = this.props;
1054
+ this.resized = false;
1055
+ (0, _jquery.default)(window).bind(touch ? 'touchmove' : 'mousemove', _jquery.default.proxy(this.resizeMove, this));
1056
+ (0, _jquery.default)(window).bind(touch ? 'touchend' : 'mouseup', _jquery.default.proxy(this.resizeUp, this));
1057
+ this.resizeDetails = {
1058
+ client: fn.getClient(e),
1059
+ width: parseInt(gridTemplateColumns[column.renderIndex]),
1060
+ column
1061
+ };
1062
+ }
1063
+
1064
+ resizeMove(e) {
1065
+ this.resized = true;
1066
+ var {
1067
+ rtl,
1068
+ fn
1069
+ } = this.context;
1070
+ var {
1071
+ setStyle,
1072
+ gridTemplateColumns
1073
+ } = this.props;
1074
+ var Client = fn.getClient(e);
1075
+ var {
1076
+ client,
1077
+ width,
1078
+ column
1079
+ } = this.resizeDetails;
1080
+ var offset = Client[0] - client[0];
1081
+ let newWidth = width + offset * (rtl ? -1 : 1);
1082
+
1083
+ if (newWidth < parseInt(column.minWidth || 36)) {
1084
+ newWidth = parseInt(column.minWidth || 36);
1237
1085
  }
1238
1086
 
1239
- return result;
1087
+ this.resizeDetails.newWidth = newWidth + 'px';
1088
+ gridTemplateColumns[column.renderIndex] = this.resizeDetails.newWidth;
1089
+ setStyle(gridTemplateColumns);
1240
1090
  }
1241
1091
 
1242
- render() {
1092
+ resizeUp() {
1093
+ (0, _jquery.default)(window).unbind(touch ? 'touchmove' : 'mousemove', this.resizeMove);
1094
+ (0, _jquery.default)(window).unbind(touch ? 'touchend' : 'mouseup', this.resizeUp);
1095
+
1096
+ if (!this.resized) {
1097
+ return;
1098
+ }
1099
+
1100
+ var {
1101
+ touch,
1102
+ columns,
1103
+ SetState
1104
+ } = this.context;
1105
+ var {
1106
+ newWidth
1107
+ } = this.resizeDetails;
1243
1108
  let {
1244
- value = [],
1245
- disabled,
1246
- className,
1247
- style,
1248
- attrs
1109
+ column
1249
1110
  } = this.props;
1250
- let model;
1251
- let input = {
1252
- height: 28
1111
+ column = { ...column,
1112
+ width: newWidth
1253
1113
  };
1254
1114
 
1255
- try {
1256
- model = JSON.parse(JSON.stringify(value));
1257
- } catch {
1258
- model = [];
1115
+ if (column.storageKey) {
1116
+ column = { ...column,
1117
+ _storageObj: { ...column._storageObj,
1118
+ width: newWidth
1119
+ }
1120
+ };
1121
+ localStorage.setItem('aio-table-column-storage-' + column.storageKey, JSON.stringify(column._storageObj));
1259
1122
  }
1260
1123
 
1261
- if (!model.length) {
1262
- if (disabled) {
1263
- return null;
1124
+ columns = columns.map((c, i) => i === column.realIndex ? column : c);
1125
+ SetState({
1126
+ columns
1127
+ });
1128
+ }
1129
+
1130
+ getGanttTitle(column) {
1131
+ var {
1132
+ headerHeight,
1133
+ columnGap
1134
+ } = this.context;
1135
+ var {
1136
+ template
1137
+ } = column;
1138
+ let {
1139
+ padding = 36
1140
+ } = template;
1141
+ var keys = template.getKeys();
1142
+ return /*#__PURE__*/_react.default.createElement("div", {
1143
+ className: "aio-table-title aio-table-title-gantt",
1144
+ style: {
1145
+ padding: `0 ${+padding}px`,
1146
+ height: headerHeight,
1147
+ top: 0,
1148
+ borderLeft: columnGap ? 'none' : undefined,
1149
+ borderRight: columnGap ? 'none' : undefined
1150
+ },
1151
+ key: column.realIndex + 'title'
1152
+ }, /*#__PURE__*/_react.default.createElement(_rRangeSlider.default, {
1153
+ start: 0,
1154
+ end: keys.length - 1,
1155
+ labelStep: 1,
1156
+ editLabel: value => keys[value],
1157
+ labelStyle: () => {
1158
+ return {
1159
+ top: 0
1160
+ };
1161
+ },
1162
+ pointStyle: () => {
1163
+ return {
1164
+ display: 'none'
1165
+ };
1166
+ },
1167
+ lineStyle: () => {
1168
+ return {
1169
+ display: 'none'
1170
+ };
1264
1171
  }
1172
+ }));
1173
+ }
1265
1174
 
1266
- return /*#__PURE__*/_react.default.createElement("div", {
1267
- className: "aio-form-table-add aio-form-input",
1268
- onClick: () => this.add()
1269
- }, "+");
1175
+ render() {
1176
+ let {
1177
+ column,
1178
+ onDragStart,
1179
+ onDragOver,
1180
+ onDrop,
1181
+ isLast
1182
+ } = this.props;
1183
+ let {
1184
+ rtl
1185
+ } = this.context;
1186
+
1187
+ if (column.template && column.template.type === 'gantt') {
1188
+ return this.getGanttTitle(column);
1270
1189
  }
1271
1190
 
1272
- let columns = this.getColumns();
1273
- let props = {
1274
- getCellStyle: () => {
1275
- return style;
1276
- },
1277
- titleStyle: style,
1278
- disabled,
1279
- className,
1280
- columns,
1281
- toolbarItems: this.getToolbarItems(),
1282
- columns,
1283
- model: value,
1284
- style: attrs ? attrs.style : undefined
1191
+ let title = typeof column.title === 'function' ? column.title() : column.title;
1192
+ let attrs = { ...this.context.titleAttrs,
1193
+ ...column.titleAttrs
1285
1194
  };
1286
- return /*#__PURE__*/_react.default.createElement(_aioTable.default, {
1287
- columns: props.columns,
1288
- model: props.model,
1289
- rowGap: 0,
1290
- toolbarItems: props.toolbarItems,
1291
- toolbarAttrs: {
1292
- className: 'aio-form-input',
1293
- style: {
1294
- border: 'none',
1295
- display: disabled ? 'none' : undefined
1296
- }
1195
+ let dataUniqId = 'aiotabletitle' + Math.round(Math.random() * 10000000);
1196
+ return /*#__PURE__*/_react.default.createElement("div", {
1197
+ ref: this.dom,
1198
+ "data-uniq-id": dataUniqId,
1199
+ style: this.getStyle(attrs.style),
1200
+ draggable: false,
1201
+ className: 'aio-table-title' + (attrs.className ? ' ' + attrs.className : '') + (isLast ? ' last-child' : '') + (rtl ? ' rtl' : ' ltr')
1202
+ }, /*#__PURE__*/_react.default.createElement(AIOTableFilter, {
1203
+ column: column,
1204
+ dataUniqId: dataUniqId
1205
+ }), /*#__PURE__*/_react.default.createElement("div", {
1206
+ className: "aio-table-title-text",
1207
+ style: {
1208
+ justifyContent: column.titleJustify !== false ? 'center' : undefined,
1209
+ cursor: column.movable === false ? undefined : 'move'
1297
1210
  },
1298
- style: props.style
1299
- });
1211
+ draggable: column.movable !== false,
1212
+ onDragStart: () => onDragStart(column.realIndex),
1213
+ onDragOver: e => onDragOver(e, column.realIndex),
1214
+ onDrop: () => onDrop(column)
1215
+ }, title), column.width !== 'auto' && /*#__PURE__*/_react.default.createElement("div", {
1216
+ className: "aio-table-resize",
1217
+ style: {
1218
+ cursor: column.resizable ? 'col-resize' : 'default'
1219
+ },
1220
+ draggable: false,
1221
+ onTouchStart: e => this.mouseDown(e, column),
1222
+ onMouseDown: e => this.mouseDown(e, column)
1223
+ }));
1300
1224
  }
1301
1225
 
1226
+ }
1227
+
1228
+ _defineProperty(AIOTableTitle, "contextType", AioTableContext);
1229
+
1230
+ class AIOTableGroup extends _react.Component {
1231
+ getStyle() {
1232
+ let {
1233
+ rowHeight,
1234
+ fn
1235
+ } = this.context;
1236
+ let {
1237
+ columns
1238
+ } = this.props;
1239
+ return { ...fn.getFullCellStyle(columns),
1240
+ height: rowHeight
1241
+ };
1242
+ }
1243
+
1244
+ getIcon(row) {
1245
+ let {
1246
+ rtl
1247
+ } = this.context;
1248
+
1249
+ if (row._opened) {
1250
+ return aioTableGetSvg('chevronDown', {
1251
+ box: '2 1 20 20'
1252
+ });
1253
+ }
1254
+
1255
+ return aioTableGetSvg('chevronRight', {
1256
+ flip: rtl === true
1257
+ });
1258
+ }
1259
+
1260
+ click(row) {
1261
+ let {
1262
+ SetState,
1263
+ groupsOpen
1264
+ } = this.context;
1265
+ var {
1266
+ _groupId
1267
+ } = row;
1268
+ groupsOpen[_groupId] = !groupsOpen[_groupId];
1269
+ SetState({
1270
+ groupsOpen
1271
+ });
1272
+ }
1273
+
1274
+ render() {
1275
+ let {
1276
+ indent
1277
+ } = this.context;
1278
+ let {
1279
+ row,
1280
+ tableIndex
1281
+ } = this.props;
1282
+ return /*#__PURE__*/_react.default.createElement("div", {
1283
+ className: "aio-table-group",
1284
+ style: this.getStyle()
1285
+ }, tableIndex !== 1 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
1286
+ style: {
1287
+ width: indent * row._level,
1288
+ flexShrink: 0
1289
+ }
1290
+ }), /*#__PURE__*/_react.default.createElement("div", {
1291
+ className: "aio-table-toggle",
1292
+ onClick: () => this.click(row)
1293
+ }, this.getIcon(row)), /*#__PURE__*/_react.default.createElement("div", {
1294
+ className: "aio-table-cell-gap"
1295
+ }), /*#__PURE__*/_react.default.createElement("div", {
1296
+ className: "aio-table-group-text"
1297
+ }, row._groupValue)));
1298
+ }
1299
+
1300
+ }
1301
+
1302
+ _defineProperty(AIOTableGroup, "contextType", AioTableContext);
1303
+
1304
+ class AIOTableCell extends _react.Component {
1305
+ constructor(props) {
1306
+ super(props);
1307
+ this.dom = /*#__PURE__*/(0, _react.createRef)();
1308
+ var {
1309
+ value
1310
+ } = this.props;
1311
+ this.state = {
1312
+ value,
1313
+ error: false,
1314
+ prevValue: value
1315
+ };
1316
+ }
1317
+
1318
+ getStyle(column, row) {
1319
+ var {
1320
+ template,
1321
+ minWidth = '30px'
1322
+ } = column;
1323
+ var {
1324
+ rowHeight,
1325
+ getCellAttrs
1326
+ } = this.context;
1327
+ let {
1328
+ striped
1329
+ } = this.props;
1330
+ var style = {
1331
+ height: rowHeight,
1332
+ overflow: template ? undefined : 'hidden',
1333
+ minWidth
1334
+ };
1335
+
1336
+ if (column.template && column.template.type === 'gantt') {
1337
+ style.padding = 0;
1338
+ }
1339
+
1340
+ if (typeof striped === 'string') {
1341
+ style.background = striped;
1342
+ } else if (Array.isArray(striped)) {
1343
+ style.background = striped[0];
1344
+ style.color = striped[1];
1345
+ }
1346
+
1347
+ let attrs = getCellAttrs(row, column);
1348
+ return { ...style,
1349
+ ...attrs.style
1350
+ };
1351
+ }
1352
+
1353
+ getClassName(row, column) {
1354
+ let {
1355
+ getCellAttrs
1356
+ } = this.context;
1357
+ var className = 'aio-table-cell';
1358
+ let {
1359
+ striped
1360
+ } = this.props;
1361
+ let attrs = getCellAttrs(row, column);
1362
+
1363
+ if (striped === true) {
1364
+ className += ' striped';
1365
+ }
1366
+
1367
+ if (column.selectable !== false) {
1368
+ className += ' aio-table-cell-selectable';
1369
+ }
1370
+
1371
+ if (column.template && column.template.type === 'gantt') {
1372
+ className += ' aio-table-cell-gantt';
1373
+ }
1374
+
1375
+ if (attrs.className) {
1376
+ className += ' ' + attrs.className;
1377
+ }
1378
+
1379
+ if (column.inlineEdit) {
1380
+ className += ' aio-table-cell-input';
1381
+ }
1382
+
1383
+ if (row._show === 'relativeFilter') {
1384
+ className += ' aio-table-relative-filter';
1385
+ }
1386
+
1387
+ if (row._show === false) {
1388
+ className += ' aio-table-cell-hidden';
1389
+ }
1390
+
1391
+ if (row._isFirstChild) {
1392
+ className += ' first-child';
1393
+ }
1394
+
1395
+ if (row._isLastChild) {
1396
+ className += ' last-child';
1397
+ }
1398
+
1399
+ return className;
1400
+ }
1401
+
1402
+ getToggleIcon(row) {
1403
+ let {
1404
+ rtl,
1405
+ fn
1406
+ } = this.context;
1407
+ let icon;
1408
+
1409
+ if (row._opened) {
1410
+ icon = aioTableGetSvg('chevronDown');
1411
+ } else {
1412
+ icon = aioTableGetSvg('chevronRight', {
1413
+ flip: rtl === true
1414
+ });
1415
+ }
1416
+
1417
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
1418
+ className: "aio-table-toggle",
1419
+ onClick: () => fn.toggleRow(row),
1420
+ style: {
1421
+ opacity: row._childsLength ? 1 : 0
1422
+ }
1423
+ }, icon), /*#__PURE__*/_react.default.createElement("div", {
1424
+ className: "aio-table-cell-gap"
1425
+ }));
1426
+ }
1427
+
1428
+ splitNumber(num) {
1429
+ if (!num) {
1430
+ return num;
1431
+ }
1432
+
1433
+ let str = num.toString();
1434
+ let dotIndex = str.indexOf('.');
1435
+
1436
+ if (dotIndex !== -1) {
1437
+ str = str.slice(0, dotIndex);
1438
+ }
1439
+
1440
+ let res = '';
1441
+ let index = 0;
1442
+
1443
+ for (let i = str.length - 1; i >= 0; i--) {
1444
+ res = str[i] + res;
1445
+
1446
+ if (index === 2) {
1447
+ index = 0;
1448
+
1449
+ if (i > 0) {
1450
+ res = ',' + res;
1451
+ }
1452
+ } else {
1453
+ index++;
1454
+ }
1455
+ }
1456
+
1457
+ return res;
1458
+ }
1459
+
1460
+ getContentByTemplate(row, column, value) {
1461
+ let {
1462
+ fn
1463
+ } = this.context;
1464
+ let template = typeof column.template === 'function' ? column.template(row, column, value) : column.template;
1465
+
1466
+ if (!template) {
1467
+ return value;
1468
+ }
1469
+
1470
+ if (template.type === 'slider') {
1471
+ return fn.getSliderCell(template, value);
1472
+ }
1473
+
1474
+ if (template.type === 'checkbox') {
1475
+ return fn.getCheckboxCell(template, value, row);
1476
+ }
1477
+
1478
+ if (template.type === 'options') {
1479
+ return fn.getOptionsCell(template, row);
1480
+ }
1481
+
1482
+ if (template.type === 'split') {
1483
+ let newValue = this.splitNumber(value);
1484
+
1485
+ if (template.editValue) {
1486
+ newValue = template.editValue(newValue);
1487
+ }
1488
+
1489
+ return newValue;
1490
+ }
1491
+
1492
+ if (template.type === 'gantt') {
1493
+ return fn.getGanttCell(row, template);
1494
+ }
1495
+
1496
+ return template;
1497
+ }
1498
+
1499
+ getContent(row, column, value) {
1500
+ let {
1501
+ focused
1502
+ } = this.context;
1503
+ let {
1504
+ inlineEdit
1505
+ } = this.props;
1506
+ let template = this.getContentByTemplate(row, column, value);
1507
+ var content = '';
1508
+
1509
+ if (inlineEdit && focused) {
1510
+ content = this.getInput(row, column);
1511
+ } else {
1512
+ content = template;
1513
+ }
1514
+
1515
+ if (column.subText) {
1516
+ let subText;
1517
+
1518
+ try {
1519
+ subText = column.subText(row);
1520
+ } catch {
1521
+ subText = '';
1522
+ }
1523
+
1524
+ return /*#__PURE__*/_react.default.createElement("div", {
1525
+ className: "aio-table-cell-has-subtext"
1526
+ }, /*#__PURE__*/_react.default.createElement("div", {
1527
+ style: {
1528
+ flex: 1
1529
+ }
1530
+ }), /*#__PURE__*/_react.default.createElement("div", {
1531
+ className: "aio-table-cell-uptext"
1532
+ }, content), /*#__PURE__*/_react.default.createElement("div", {
1533
+ className: "aio-table-cell-subtext"
1534
+ }, subText), /*#__PURE__*/_react.default.createElement("div", {
1535
+ style: {
1536
+ flex: 1
1537
+ }
1538
+ }));
1539
+ }
1540
+
1541
+ return content;
1542
+ }
1543
+
1544
+ async changeCell(value) {
1545
+ let {
1546
+ row,
1547
+ column,
1548
+ inlineEdit
1549
+ } = this.props;
1550
+ let {
1551
+ fn
1552
+ } = this.context;
1553
+ let res;
1554
+ this.setState({
1555
+ loading: true
1556
+ });
1557
+
1558
+ if (inlineEdit.onChange) {
1559
+ res = await inlineEdit.onChange(row, value);
1560
+ } else if (typeof column.getValue === 'string') {
1561
+ res = await this.context.onChange(fn.setCellValue(row, column.getValue, value));
1562
+ }
1563
+
1564
+ this.setState({
1565
+ loading: false
1566
+ });
1567
+ return res;
1568
+ }
1569
+
1570
+ getInput(row, column) {
1571
+ let {
1572
+ fn
1573
+ } = this.context;
1574
+ let {
1575
+ attrs,
1576
+ inlineEdit
1577
+ } = this.props;
1578
+ let {
1579
+ type,
1580
+ getValue,
1581
+ disabled = () => false,
1582
+ options
1583
+ } = inlineEdit;
1584
+ let {
1585
+ value
1586
+ } = this.state;
1587
+
1588
+ if (getValue) {
1589
+ value = fn.getCellValue(row, getValue);
1590
+ }
1591
+
1592
+ if (disabled(row)) {
1593
+ if (typeof value === 'boolean') {
1594
+ return JSON.stringify(value);
1595
+ }
1596
+
1597
+ return value;
1598
+ }
1599
+
1600
+ let props = { ...inlineEdit,
1601
+ className: 'aio-table-input',
1602
+ 'data-row-index': attrs['data-row-index'],
1603
+ 'data-col-index': attrs['data-col-index'],
1604
+ value: value === null || value === undefined ? '' : value
1605
+ };
1606
+
1607
+ if (type === 'text' || type === 'number') {
1608
+ return /*#__PURE__*/_react.default.createElement("div", {
1609
+ className: 'aio-table-input-container'
1610
+ }, /*#__PURE__*/_react.default.createElement("input", _extends({}, props, {
1611
+ style: {
1612
+ textAlign: column.justify || type === 'number' ? 'center' : undefined
1613
+ },
1614
+ onChange: e => this.setState({
1615
+ value: e.target.value
1616
+ }),
1617
+ onBlur: async e => {
1618
+ let {
1619
+ value
1620
+ } = this.state;
1621
+
1622
+ if (value === this.props.value) {
1623
+ return;
1624
+ }
1625
+
1626
+ let newValue = value;
1627
+
1628
+ if (type === 'number') {
1629
+ newValue = parseFloat(newValue);
1630
+
1631
+ if (isNaN(newValue)) {
1632
+ newValue = 0;
1633
+ }
1634
+ }
1635
+
1636
+ let res = await this.changeCell(newValue);
1637
+
1638
+ if (typeof res === 'string') {
1639
+ this.setState({
1640
+ error: res
1641
+ });
1642
+ } else {
1643
+ this.setState({
1644
+ value: this.props.value
1645
+ });
1646
+ }
1647
+ }
1648
+ })), /*#__PURE__*/_react.default.createElement("div", {
1649
+ className: "aio-table-input-border"
1650
+ }));
1651
+ }
1652
+
1653
+ if (type === 'select') {
1654
+ if (!options) {
1655
+ console.error('aio table => missing options property of column inlineEdit with type="select"');
1656
+ return '';
1657
+ }
1658
+
1659
+ if (!Array.isArray(options)) {
1660
+ console.error('aio table => options property of column inlineEdit with type="select" must be an array of objects . each object must have text and value property!!!');
1661
+ return '';
1662
+ }
1663
+
1664
+ return /*#__PURE__*/_react.default.createElement("div", {
1665
+ className: "aio-table-input-container"
1666
+ }, /*#__PURE__*/_react.default.createElement("select", _extends({}, props, {
1667
+ onFocus: () => this.focus = true,
1668
+ onBlur: () => this.focus = false,
1669
+ onChange: async e => {
1670
+ let value = e.target.value;
1671
+
1672
+ if (value === 'true') {
1673
+ value = true;
1674
+ }
1675
+
1676
+ if (value === 'false') {
1677
+ value = false;
1678
+ }
1679
+
1680
+ this.setState({
1681
+ value
1682
+ });
1683
+ let res = await this.changeCell(value);
1684
+
1685
+ if (typeof res === 'string') {
1686
+ this.setState({
1687
+ error: res
1688
+ });
1689
+ } else if (res === false) {
1690
+ this.setState({
1691
+ value: this.props.value
1692
+ });
1693
+ }
1694
+ }
1695
+ }), options.map((o, i) => /*#__PURE__*/_react.default.createElement("option", {
1696
+ key: i,
1697
+ value: o.value
1698
+ }, o.text))), /*#__PURE__*/_react.default.createElement("div", {
1699
+ className: "aio-table-input-border"
1700
+ }));
1701
+ }
1702
+
1703
+ if (type === 'checkbox') {
1704
+ return /*#__PURE__*/_react.default.createElement("div", {
1705
+ className: 'aio-table-input-container',
1706
+ tabIndex: 0,
1707
+ onKeyDown: async e => {
1708
+ if (e.keyCode === 13) {
1709
+ value = value === true ? true : false;
1710
+ await this.changeCell(!value);
1711
+ }
1712
+ }
1713
+ }, /*#__PURE__*/_react.default.createElement("input", _extends({}, props, {
1714
+ onFocus: () => this.focus = true,
1715
+ onBlur: () => this.focus = false,
1716
+ checked: value === true ? true : false,
1717
+ onChange: async e => {
1718
+ let value = e.target.checked;
1719
+ this.setState({
1720
+ loading: true
1721
+ });
1722
+ await this.changeCell(value);
1723
+ this.setState({
1724
+ loading: false
1725
+ });
1726
+ }
1727
+ })), /*#__PURE__*/_react.default.createElement("div", {
1728
+ className: "aio-table-input-border"
1729
+ }));
1730
+ }
1731
+
1732
+ console.error('aio table => missing type property of column input');
1733
+ return '';
1734
+ }
1735
+
1736
+ componentDidUpdate() {
1737
+ let {
1738
+ inlineEdit
1739
+ } = this.props;
1740
+
1741
+ if (inlineEdit && this.focus) {
1742
+ if (inlineEdit.type === 'select' || inlineEdit.type === 'checkbox') {
1743
+ (0, _jquery.default)(this.dom.current).find('.aio-table-input').focus();
1744
+ }
1745
+ }
1746
+ }
1747
+
1748
+ getProps(row, column, content) {
1749
+ let attrs = this.context.getCellAttrs(row, column);
1750
+ let title = typeof content === 'string' ? content : undefined;
1751
+ return {
1752
+ ref: this.dom,
1753
+ title,
1754
+ ...attrs,
1755
+ style: this.getStyle(column, row),
1756
+ className: this.getClassName(row, column)
1757
+ };
1758
+ }
1759
+
1760
+ render() {
1761
+ let {
1762
+ indent,
1763
+ fn
1764
+ } = this.context;
1765
+ let {
1766
+ row,
1767
+ column,
1768
+ value,
1769
+ before,
1770
+ after,
1771
+ justify,
1772
+ attrs
1773
+ } = this.props;
1774
+
1775
+ if (this.state.prevValue !== value) {
1776
+ setTimeout(() => this.setState({
1777
+ value,
1778
+ prevValue: value
1779
+ }), 0);
1780
+ }
1781
+
1782
+ let {
1783
+ error,
1784
+ loading
1785
+ } = this.state;
1786
+ let content = this.getContent(row, column, value);
1787
+
1788
+ if (column.affix) {
1789
+ content = content + ' ' + column.affix;
1790
+ }
1791
+
1792
+ let cell;
1793
+
1794
+ if (loading) {
1795
+ return fn.cubes2();
1796
+ }
1797
+
1798
+ if (error) {
1799
+ cell = /*#__PURE__*/_react.default.createElement("div", {
1800
+ className: "aio-table-error",
1801
+ onClick: () => {
1802
+ this.setState({
1803
+ value: this.props.value,
1804
+ error: false
1805
+ });
1806
+ }
1807
+ }, error);
1808
+ } else {
1809
+ cell = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, column.treeMode && /*#__PURE__*/_react.default.createElement("div", {
1810
+ style: {
1811
+ width: row._level * indent,
1812
+ flexShrink: 0
1813
+ }
1814
+ }), column.treeMode && this.getToggleIcon(row), before !== undefined && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
1815
+ className: "aio-table-icon"
1816
+ }, before), /*#__PURE__*/_react.default.createElement("div", {
1817
+ className: "aio-table-cell-gap"
1818
+ })), content !== undefined && /*#__PURE__*/_react.default.createElement("div", {
1819
+ className: "aio-table-cell-content",
1820
+ style: {
1821
+ justifyContent: justify ? 'center' : undefined
1822
+ }
1823
+ }, content), after !== undefined && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
1824
+ style: {
1825
+ flex: 1
1826
+ }
1827
+ }), /*#__PURE__*/_react.default.createElement("div", {
1828
+ className: "aio-table-icon"
1829
+ }, after)));
1830
+ }
1831
+
1832
+ return /*#__PURE__*/_react.default.createElement("div", _extends({}, attrs, this.getProps(row, column, content)), cell);
1833
+ }
1834
+
1835
+ }
1836
+
1837
+ _defineProperty(AIOTableCell, "contextType", AioTableContext);
1838
+
1839
+ class AIOTableFilter extends _react.Component {
1840
+ constructor(...args) {
1841
+ super(...args);
1842
+
1843
+ _defineProperty(this, "dom", /*#__PURE__*/(0, _react.createRef)());
1844
+ }
1845
+
1846
+ async change(obj) {
1847
+ let {
1848
+ SetState,
1849
+ columns
1850
+ } = this.context;
1851
+ let {
1852
+ column
1853
+ } = this.props;
1854
+ column = { ...column,
1855
+ filter: { ...column.filter,
1856
+ ...obj
1857
+ }
1858
+ };
1859
+ let approve = true;
1860
+
1861
+ if (column.filter.onChange) {
1862
+ let loading = (0, _jquery.default)(this.dom.current).parents('.aio-table').find('.aio-table-main-loading');
1863
+ loading.css({
1864
+ display: 'flex'
1865
+ });
1866
+ approve = await newFilter.onChange(column.filter);
1867
+ loading.css({
1868
+ display: 'none'
1869
+ });
1870
+ }
1871
+
1872
+ if (approve !== false) {
1873
+ SetState({
1874
+ columns: columns.map(o => o.realIndex === column.realIndex ? column : o)
1875
+ });
1876
+ }
1877
+ }
1878
+
1879
+ render() {
1880
+ var {
1881
+ rtl,
1882
+ translate
1883
+ } = this.context;
1884
+ var {
1885
+ column
1886
+ } = this.props;
1887
+
1888
+ if (!column.filter || column.search) {
1889
+ return null;
1890
+ }
1891
+
1892
+ let {
1893
+ items = [],
1894
+ booleanType = 'or',
1895
+ type = 'text'
1896
+ } = column.filter;
1897
+ let icon = items.length ? aioTableGetSvg('filterActive', {
1898
+ className: 'has-filter'
1899
+ }) : aioTableGetSvg('filter');
1900
+ return /*#__PURE__*/_react.default.createElement("div", {
1901
+ className: "aio-table-filter-icon",
1902
+ ref: this.dom,
1903
+ onClick: () => {
1904
+ (0, _jquery.default)('.aio-table-title').css({
1905
+ zIndex: 100
1906
+ });
1907
+ (0, _jquery.default)(`[data-uniq-id = ${this.props.dataUniqId}]`).css({
1908
+ zIndex: 1000
1909
+ });
1910
+ }
1911
+ }, /*#__PURE__*/_react.default.createElement(_aioButton.default, {
1912
+ type: "button",
1913
+ rtl: rtl,
1914
+ caret: false,
1915
+ openRelatedTo: ".aio-table",
1916
+ text: icon,
1917
+ popOver: () => {
1918
+ return /*#__PURE__*/_react.default.createElement(AIOTableFilterPopup, {
1919
+ translate,
1920
+ type,
1921
+ items,
1922
+ booleanType,
1923
+ onChange: obj => this.change(obj)
1924
+ });
1925
+ }
1926
+ }));
1927
+ }
1928
+
1929
+ }
1930
+
1931
+ _defineProperty(AIOTableFilter, "contextType", AioTableContext);
1932
+
1933
+ class AIOTableFilterPopup extends _react.Component {
1934
+ render() {
1935
+ var {
1936
+ type,
1937
+ items,
1938
+ booleanType,
1939
+ onChange,
1940
+ translate = str => str
1941
+ } = this.props;
1942
+ var filterItems = items.map((item, i) => {
1943
+ return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
1944
+ key: i
1945
+ }, /*#__PURE__*/_react.default.createElement(AIOTableFilterItem, {
1946
+ item: item,
1947
+ type: type,
1948
+ onChange: (key, value) => onChange({
1949
+ items: items.map((o, index) => {
1950
+ if (i === index) {
1951
+ return { ...o,
1952
+ [key]: value
1953
+ };
1954
+ }
1955
+
1956
+ return o;
1957
+ })
1958
+ }),
1959
+ onRemove: () => onChange({
1960
+ items: items.filter((o, index) => index !== i)
1961
+ }),
1962
+ translate: translate
1963
+ }), i < items.length - 1 && /*#__PURE__*/_react.default.createElement("div", {
1964
+ className: "aio-table-boolean",
1965
+ onClick: () => onChange({
1966
+ booleanType: booleanType === 'or' ? 'and' : 'or'
1967
+ })
1968
+ }, translate(booleanType)));
1969
+ });
1970
+ return /*#__PURE__*/_react.default.createElement("div", {
1971
+ className: "aio-table-filter-popup",
1972
+ style: {
1973
+ minWidth: 250
1974
+ }
1975
+ }, filterItems, /*#__PURE__*/_react.default.createElement("div", {
1976
+ className: "aio-table-filter-footer"
1977
+ }, /*#__PURE__*/_react.default.createElement("button", {
1978
+ className: "aio-table-filter-add",
1979
+ onClick: () => onChange({
1980
+ items: items.concat({
1981
+ operator: 'contain',
1982
+ value: '',
1983
+ type
1984
+ })
1985
+ })
1986
+ }, translate('Add'))));
1987
+ }
1988
+
1989
+ }
1990
+
1991
+ exports.AIOTableFilterPopup = AIOTableFilterPopup;
1992
+
1993
+ class AIOTableFilterItem extends _react.Component {
1994
+ constructor(props) {
1995
+ super(props);
1996
+ var {
1997
+ item
1998
+ } = this.props;
1999
+ this.state = {
2000
+ value: item.value,
2001
+ prevValue: item.value
2002
+ };
2003
+ }
2004
+
2005
+ changeValue(value) {
2006
+ clearTimeout(this.timeout);
2007
+ this.setState({
2008
+ value
2009
+ });
2010
+ this.timeout = setTimeout(() => {
2011
+ var {
2012
+ onChange
2013
+ } = this.props;
2014
+ onChange('value', value);
2015
+ }, 1000);
2016
+ }
2017
+
2018
+ getOptions(type, translate) {
2019
+ let options = [];
2020
+
2021
+ if (type !== 'number' && type !== 'date') {
2022
+ options.push( /*#__PURE__*/_react.default.createElement("option", {
2023
+ key: "contain",
2024
+ value: "contain"
2025
+ }, translate('Contain')));
2026
+ options.push( /*#__PURE__*/_react.default.createElement("option", {
2027
+ key: "notContain",
2028
+ value: "notContain"
2029
+ }, translate('Not Contain')));
2030
+ }
2031
+
2032
+ options.push( /*#__PURE__*/_react.default.createElement("option", {
2033
+ key: "equal",
2034
+ value: "equal"
2035
+ }, translate('Equal')));
2036
+ options.push( /*#__PURE__*/_react.default.createElement("option", {
2037
+ key: "notEqual",
2038
+ value: "notEqual"
2039
+ }, translate('Not Equal')));
2040
+
2041
+ if (type !== 'text') {
2042
+ options.push( /*#__PURE__*/_react.default.createElement("option", {
2043
+ key: "greater",
2044
+ value: "greater"
2045
+ }, translate('Greater')));
2046
+ options.push( /*#__PURE__*/_react.default.createElement("option", {
2047
+ key: "less",
2048
+ value: "less"
2049
+ }, translate('Less')));
2050
+ }
2051
+
2052
+ return options;
2053
+ }
2054
+
2055
+ render() {
2056
+ var {
2057
+ item,
2058
+ type,
2059
+ onChange,
2060
+ onRemove,
2061
+ translate
2062
+ } = this.props;
2063
+
2064
+ if (this.state.prevValue !== item.value) {
2065
+ setTimeout(() => this.setState({
2066
+ value: item.value,
2067
+ prevValue: item.value
2068
+ }), 0);
2069
+ }
2070
+
2071
+ var {
2072
+ value
2073
+ } = this.state;
2074
+ return /*#__PURE__*/_react.default.createElement("div", {
2075
+ className: "aio-table-filter-item"
2076
+ }, /*#__PURE__*/_react.default.createElement("select", {
2077
+ value: item.operator,
2078
+ onChange: e => onChange('operator', e.target.value)
2079
+ }, this.getOptions(type, translate)), /*#__PURE__*/_react.default.createElement("div", {
2080
+ style: {
2081
+ width: '6px'
2082
+ }
2083
+ }), /*#__PURE__*/_react.default.createElement("input", {
2084
+ type: type === 'date' ? 'text' : type,
2085
+ value: value,
2086
+ onChange: e => this.changeValue(e.target.value)
2087
+ }), /*#__PURE__*/_react.default.createElement("div", {
2088
+ style: {
2089
+ width: '6px'
2090
+ }
2091
+ }), /*#__PURE__*/_react.default.createElement("div", {
2092
+ className: "aio-table-filter-remove",
2093
+ onClick: () => onRemove()
2094
+ }, aioTableGetSvg('close')));
2095
+ }
2096
+
2097
+ }
2098
+
2099
+ function ATFN({
2100
+ getProps,
2101
+ getState,
2102
+ setState,
2103
+ getContext
2104
+ }) {
2105
+ let $$ = {
2106
+ fixPersianAndArabicNumbers(str) {
2107
+ var persianNumbers = [/۰/g, /۱/g, /۲/g, /۳/g, /۴/g, /۵/g, /۶/g, /۷/g, /۸/g, /۹/g],
2108
+ arabicNumbers = [/٠/g, /١/g, /٢/g, /٣/g, /٤/g, /٥/g, /٦/g, /٧/g, /٨/g, /٩/g];
2109
+
2110
+ if (typeof str === 'string') {
2111
+ for (var i = 0; i < 10; i++) {
2112
+ str = str.replace(persianNumbers[i], i).replace(arabicNumbers[i], i);
2113
+ }
2114
+ }
2115
+
2116
+ return str;
2117
+ },
2118
+
2119
+ getJSON(columns, rows) {
2120
+ let result = [];
2121
+
2122
+ for (let i = 0; i < rows.length; i++) {
2123
+ if (!rows[i].row) {
2124
+ continue;
2125
+ }
2126
+
2127
+ let row = rows[i].row;
2128
+ let obj = {};
2129
+
2130
+ for (let j = 0; j < columns.length; j++) {
2131
+ let {
2132
+ title,
2133
+ realIndex
2134
+ } = columns[j];
2135
+ let res = row._values[realIndex];
2136
+ obj[title] = res !== undefined ? $$.fixPersianAndArabicNumbers(res) : "";
2137
+ }
2138
+
2139
+ result.push(obj);
2140
+ }
2141
+
2142
+ return result;
2143
+ },
2144
+
2145
+ exportToExcel(columns, rows) {
2146
+ let {
2147
+ translate
2148
+ } = getProps();
2149
+ let name = window.prompt(translate('Inter Excel File Name')); // if (name === false || name === undefined || name === null) { return; }
2150
+
2151
+ if (!name || name === null || !name.length) return;
2152
+ var data = $$.getJSON(columns, rows);
2153
+ var arrData = typeof data != "object" ? JSON.parse(data) : data;
2154
+ var CSV = ""; // CSV += 'title';
2155
+
2156
+ CSV += '\r\n\n';
2157
+
2158
+ if (true) {
2159
+ let row = "";
2160
+
2161
+ for (let index in arrData[0]) {
2162
+ row += index + ",";
2163
+ }
2164
+
2165
+ row = row.slice(0, -1);
2166
+ CSV += row + "\r\n";
2167
+ }
2168
+
2169
+ for (var i = 0; i < arrData.length; i++) {
2170
+ let row = "";
2171
+
2172
+ for (let index in arrData[i]) {
2173
+ row += '"' + arrData[i][index] + '",';
2174
+ }
2175
+
2176
+ row.slice(0, row.length - 1);
2177
+ CSV += row + "\r\n";
2178
+ }
2179
+
2180
+ if (CSV === "") {
2181
+ alert("Invalid data");
2182
+ return;
2183
+ }
2184
+
2185
+ var fileName = name.replace(/ /g, "_");
2186
+ var universalBOM = "\uFEFF";
2187
+ var uri = "data:text/csv;charset=utf-8," + encodeURIComponent(universalBOM + CSV);
2188
+ var link = document.createElement("a");
2189
+ link.href = uri;
2190
+ link.style = "visibility:hidden";
2191
+ link.download = fileName + ".csv";
2192
+ document.body.appendChild(link);
2193
+ link.click();
2194
+ document.body.removeChild(link);
2195
+ },
2196
+
2197
+ getSliderCell(template, val) {
2198
+ let {
2199
+ colors = ['#eee', 'dodgerblue'],
2200
+ start = 0,
2201
+ end = 100,
2202
+ value = val,
2203
+ editValue = value => value
2204
+ } = template;
2205
+ let {
2206
+ rowHeight,
2207
+ rtl
2208
+ } = getProps();
2209
+ let [clr1 = '#eee', clr2 = 'dodgerblue'] = colors;
2210
+ let points = Array.isArray(value) ? value : [value];
2211
+
2212
+ if (points.length > 2) {
2213
+ points = [points[0], points[1]];
2214
+ }
2215
+
2216
+ return /*#__PURE__*/_react.default.createElement("div", {
2217
+ className: "aio-table-slider"
2218
+ }, points.length === 2 && /*#__PURE__*/_react.default.createElement("div", {
2219
+ style: {
2220
+ display: 'flex',
2221
+ alignItems: 'center',
2222
+ padding: '0 3px'
2223
+ }
2224
+ }, editValue(points[0])), /*#__PURE__*/_react.default.createElement(_rRangeSlider.default, {
2225
+ style: {
2226
+ height: rowHeight
2227
+ },
2228
+ direction: rtl ? 'left' : 'right',
2229
+ start: start,
2230
+ end: end,
2231
+ step: 0.1,
2232
+ pointStyle: () => {
2233
+ return {
2234
+ display: 'none'
2235
+ };
2236
+ },
2237
+ lineStyle: () => {
2238
+ return {
2239
+ height: 5,
2240
+ borderRadius: 6,
2241
+ background: clr1
2242
+ };
2243
+ },
2244
+ fillStyle: (index, obj) => {
2245
+ if (index === (points.length === 2 ? 1 : 0)) {
2246
+ return {
2247
+ height: 5,
2248
+ background: clr2,
2249
+ borderRadius: 6
2250
+ };
2251
+ }
2252
+ },
2253
+ points: points
2254
+ }), /*#__PURE__*/_react.default.createElement("div", {
2255
+ style: {
2256
+ display: 'flex',
2257
+ alignItems: 'center',
2258
+ padding: '0 3px'
2259
+ }
2260
+ }, editValue(points[points.length - 1])));
2261
+ },
2262
+
2263
+ getOptionsCell({
2264
+ options
2265
+ }, row) {
2266
+ return /*#__PURE__*/_react.default.createElement(_aioButton.default, {
2267
+ type: "select",
2268
+ caret: false,
2269
+ className: "aio-table-options",
2270
+ text: aioTableGetSvg('dots'),
2271
+ options: options.map(({
2272
+ text,
2273
+ icon,
2274
+ onClick
2275
+ }) => {
2276
+ return {
2277
+ text,
2278
+ before: icon,
2279
+ onClick: () => onClick(row)
2280
+ };
2281
+ })
2282
+ });
2283
+ },
2284
+
2285
+ getCheckboxCell(template, value, row) {
2286
+ let {
2287
+ color,
2288
+ onChange,
2289
+ size = 24
2290
+ } = template;
2291
+ let style = {
2292
+ width: size,
2293
+ height: size
2294
+ };
2295
+
2296
+ if (!!value) {
2297
+ return /*#__PURE__*/_react.default.createElement("svg", {
2298
+ style: style,
2299
+ viewBox: `0,0,24,24`,
2300
+ className: "aio-table-checkbox checked",
2301
+ onClick: () => onChange(row, false)
2302
+ }, /*#__PURE__*/_react.default.createElement("path", {
2303
+ fill: color,
2304
+ d: "M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z"
2305
+ }));
2306
+ } else {
2307
+ return /*#__PURE__*/_react.default.createElement("svg", {
2308
+ style: style,
2309
+ viewBox: `0,0,24,24`,
2310
+ className: "aio-table-checkbox",
2311
+ onClick: () => onChange(row, true)
2312
+ }, /*#__PURE__*/_react.default.createElement("path", {
2313
+ fill: color,
2314
+ "ng-attr-fill": "{{icon.color}}",
2315
+ "ng-attr-d": "{{icon.data}}",
2316
+ d: "M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z"
2317
+ }));
2318
+ }
2319
+ },
2320
+
2321
+ getGanttCell(row, template) {
2322
+ let {
2323
+ rtl
2324
+ } = getProps();
2325
+ let {
2326
+ getKeys,
2327
+ getColor = () => '#fff',
2328
+ getBackgroundColor = () => '#69bedb',
2329
+ getFlags = () => [],
2330
+ getProgress = () => false,
2331
+ getText = () => false,
2332
+ getStart,
2333
+ getEnd,
2334
+ padding = 36
2335
+ } = template;
2336
+ let keys = getKeys();
2337
+
2338
+ if (!Array.isArray(keys)) {
2339
+ console.error('aio table => gantt column => column getKeys property must return an array of strings');
2340
+ return '';
2341
+ }
2342
+
2343
+ let color = $$.getCellValue(row, getColor);
2344
+ let backgroundColor = $$.getCellValue(row, getBackgroundColor);
2345
+ let progress = $$.getCellValue(row, getProgress);
2346
+ let text = $$.getCellValue(row, getText);
2347
+ let startIndex = keys.indexOf($$.getCellValue(row, getStart));
2348
+ let endIndex = keys.indexOf($$.getCellValue(row, getEnd));
2349
+ let background = progress === false ? color : `linear-gradient(to ${rtl ? 'left' : 'right'},rgba(0,0,0,.2) 0%,rgba(0,0,0,.2) ${progress}% ,transparent ${progress}%,transparent 100%)`;
2350
+ let flags = getFlags();
2351
+ return /*#__PURE__*/_react.default.createElement(_rRangeSlider.default, {
2352
+ attrs: {
2353
+ style: {
2354
+ padding: `0 ${+padding}px`
2355
+ }
2356
+ },
2357
+ start: 0,
2358
+ editValue: value => keys[value],
2359
+ end: keys.length - 1,
2360
+ points: [startIndex, endIndex],
2361
+ fillStyle: index => {
2362
+ if (index === 1) {
2363
+ return {
2364
+ background: backgroundColor,
2365
+ backgroundImage: background
2366
+ };
2367
+ }
2368
+ },
2369
+ getText: index => {
2370
+ if (index === 1 && text) {
2371
+ return text;
2372
+ }
2373
+ },
2374
+ textStyle: () => {
2375
+ return {
2376
+ color
2377
+ };
2378
+ },
2379
+ scaleStep: 1,
2380
+ scaleStyle: value => {
2381
+ let flag = flags.filter(o => keys.indexOf(o.value) === value)[0];
2382
+
2383
+ if (flag) {
2384
+ return {
2385
+ background: flag.color,
2386
+ height: '100%',
2387
+ top: 0,
2388
+ zIndex: 100
2389
+ };
2390
+ }
2391
+
2392
+ return {
2393
+ height: '100%',
2394
+ top: 0,
2395
+ opacity: .4
2396
+ };
2397
+ },
2398
+ lineStyle: () => {
2399
+ return {
2400
+ opacity: .4
2401
+ };
2402
+ }
2403
+ });
2404
+ },
2405
+
2406
+ handleOutsideClick() {
2407
+ (0, _jquery.default)(window).unbind('click', $$.outSideClick);
2408
+ (0, _jquery.default)(window).bind('click', $$.outSideClick);
2409
+ },
2410
+
2411
+ outSideClick(e) {
2412
+ let {
2413
+ focused
2414
+ } = getState();
2415
+
2416
+ if (focused === false) {
2417
+ return;
2418
+ }
2419
+
2420
+ let target = (0, _jquery.default)(e.target);
2421
+
2422
+ if (target.hasClass('aio-table-cell')) {
2423
+ return;
2424
+ }
2425
+
2426
+ if (target.parents('.aio-table-input-container').length) {
2427
+ return;
2428
+ }
2429
+
2430
+ if (target.parents('.aio-table-cell-content').length) {
2431
+ return;
2432
+ }
2433
+
2434
+ if (target.parents('.aio-table-cell').length) {
2435
+ return;
2436
+ }
2437
+
2438
+ (0, _jquery.default)(window).unbind('click', $$.outSideClick);
2439
+ setState({
2440
+ focused: false
2441
+ }, 'outsideClick');
2442
+ },
2443
+
2444
+ getCardRowCount() {
2445
+ var {
2446
+ cardRowCount = 1
2447
+ } = getProps();
2448
+
2449
+ if (typeof cardRowCount !== 'object') {
2450
+ return cardRowCount;
2451
+ }
2452
+
2453
+ let result,
2454
+ matched = false;
2455
+
2456
+ for (let prop in cardRowCount) {
2457
+ let count = cardRowCount[prop];
2458
+ let a = window.matchMedia(`(max-width: ${prop}px)`);
2459
+
2460
+ if (a.matches && !matched) {
2461
+ matched = true;
2462
+ result = count;
2463
+ }
2464
+
2465
+ a.addListener(() => setState({
2466
+ cardRowCount: count
2467
+ }));
2468
+ }
2469
+
2470
+ return result;
2471
+ },
2472
+
2473
+ async onScroll(dom, index) {
2474
+ let {
2475
+ onScrollEnd
2476
+ } = getProps();
2477
+
2478
+ if (onScrollEnd) {
2479
+ if (index === undefined || index === 0) {
2480
+ let table = (0, _jquery.default)(dom.current).find('.aio-table-unit');
2481
+ let scrollTop = table.scrollTop();
2482
+ let scrollHeight = table[0].scrollHeight;
2483
+ let height = table.height();
2484
+
2485
+ if (scrollTop + height === scrollHeight) {
2486
+ let {
2487
+ startIndex
2488
+ } = getState();
2489
+ let {
2490
+ scrollLoadLength,
2491
+ scrollTotalLength
2492
+ } = getProps();
2493
+ let from = startIndex + scrollLoadLength;
2494
+
2495
+ if (from > scrollTotalLength) {
2496
+ return;
2497
+ }
2498
+
2499
+ let to = from + scrollLoadLength;
2500
+
2501
+ if (to > scrollTotalLength) {
2502
+ to = scrollTotalLength;
2503
+ }
2504
+
2505
+ let a = (0, _jquery.default)(dom.current).find('.aio-table-main-loading');
2506
+ a.css({
2507
+ display: 'flex'
2508
+ });
2509
+ let res = await onScrollEnd(from, to);
2510
+ a.css({
2511
+ display: 'none'
2512
+ });
2513
+
2514
+ if (res !== false) {
2515
+ setState({
2516
+ startIndex: from
2517
+ });
2518
+ }
2519
+ }
2520
+ }
2521
+ }
2522
+
2523
+ if (index === undefined) {
2524
+ return;
2525
+ }
2526
+
2527
+ if (!$$['scroll' + index]) {
2528
+ let otherIndex = Number(!index);
2529
+ $$['scroll' + otherIndex] = true;
2530
+ let c = (0, _jquery.default)(dom.current);
2531
+ var units = [c.find('#aio-table-first-split'), c.find('#aio-table-second-split')];
2532
+ var scrollTop = units[index].scrollTop();
2533
+ units[otherIndex].scrollTop(scrollTop);
2534
+ }
2535
+
2536
+ $$['scroll' + index] = false;
2537
+ },
2538
+
2539
+ getOpenDictionary() {
2540
+ let {
2541
+ id
2542
+ } = getProps();
2543
+
2544
+ if (id === undefined) {
2545
+ return {};
2546
+ }
2547
+
2548
+ let openDictionary = localStorage.getItem('aio table ' + id);
2549
+
2550
+ if (openDictionary === null || openDictionary === undefined) {
2551
+ localStorage.setItem('aio table ' + id, '{}');
2552
+ return {};
2553
+ } else {
2554
+ return JSON.parse(openDictionary);
2555
+ }
2556
+ },
2557
+
2558
+ getDateNumber(value) {
2559
+ let splitter;
2560
+
2561
+ for (let i = 0; i < value.length; i++) {
2562
+ if (isNaN(parseInt(value[i]))) {
2563
+ splitter = value[i];
2564
+ break;
2565
+ }
2566
+ }
2567
+
2568
+ let [year, month = '01', day = '01'] = value.split(splitter);
2569
+ let list = [year, month, day];
2570
+ return parseInt(list.map(o => o.length === 1 ? '0' + o : o).join(''));
2571
+ },
2572
+
2573
+ setCellValue: (row, getValue, value) => {
2574
+ //row is used in eval
2575
+ let {
2576
+ model
2577
+ } = getProps();
2578
+ let evalText;
2579
+
2580
+ if (typeof value === 'string') {
2581
+ evalText = `row.${getValue} = "${value}"`;
2582
+ } else {
2583
+ evalText = 'row.' + getValue + ' = ' + JSON.stringify(value);
2584
+ }
2585
+
2586
+ eval(evalText);
2587
+ return model;
2588
+ },
2589
+ getCellValue: (row, getValue) => {
2590
+ try {
2591
+ if (typeof getValue === 'function') {
2592
+ return getValue(row);
2593
+ }
2594
+
2595
+ if (typeof getValue === 'string') {
2596
+ let result;
2597
+ eval('result = row.' + getValue);
2598
+ return result;
2599
+ }
2600
+
2601
+ return;
2602
+ } catch {
2603
+ return;
2604
+ }
2605
+ },
2606
+
2607
+ async onChangeSort(obj, colIndex) {
2608
+ let {
2609
+ columns
2610
+ } = getState();
2611
+ columns = [...columns];
2612
+ let column = { ...columns[colIndex]
2613
+ };
2614
+ column.sort = { ...column.sort,
2615
+ ...obj
2616
+ };
2617
+ let newColumns = columns.map((o, i) => i === colIndex ? column : o);
2618
+ let approve = true;
2619
+
2620
+ if (column.sort.onChange) {
2621
+ let {
2622
+ active = true,
2623
+ dir = 'inc'
2624
+ } = column.sort;
2625
+ approve = await column.sort.onChange({
2626
+ active,
2627
+ dir
2628
+ });
2629
+ }
2630
+
2631
+ if (approve !== false) {
2632
+ setState({
2633
+ columns: newColumns
2634
+ });
2635
+ }
2636
+ },
2637
+
2638
+ getSorts({
2639
+ column,
2640
+ sorts,
2641
+ sortOptions,
2642
+ columnTitle,
2643
+ colIndex
2644
+ }) {
2645
+ let {
2646
+ sort
2647
+ } = column;
2648
+ let {
2649
+ title = columnTitle || '',
2650
+ getValue = column.getValue,
2651
+ type,
2652
+ active = true,
2653
+ toggle = true,
2654
+ dir = 'inc',
2655
+ onChange
2656
+ } = sort;
2657
+
2658
+ if (type === 'date') {
2659
+ getValue = row => {
2660
+ let {
2661
+ sort
2662
+ } = column;
2663
+ let {
2664
+ getValue = column.getValue
2665
+ } = sort;
2666
+ let value = $$.getCellValue(row, getValue);
2667
+
2668
+ if (typeof value !== 'string') {
2669
+ return 0;
2670
+ }
2671
+
2672
+ return $$.getDateNumber(value);
2673
+ };
2674
+ }
2675
+
2676
+ sorts.push({
2677
+ title,
2678
+ dir,
2679
+ active,
2680
+ toggle,
2681
+ getValue,
2682
+ type,
2683
+ onChange
2684
+ });
2685
+
2686
+ if (toggle) {
2687
+ sortOptions.push({
2688
+ text: title,
2689
+ checked: !!active,
2690
+ onClick: () => $$.onChangeSort({
2691
+ active: !active
2692
+ }, colIndex),
2693
+ after: /*#__PURE__*/_react.default.createElement("div", {
2694
+ style: {
2695
+ width: '30px',
2696
+ display: 'flex',
2697
+ justifyContent: 'flex-end'
2698
+ }
2699
+ }, aioTableGetSvg(dir === 'dec' ? 'arrowDown' : 'arrowUp', {
2700
+ onClick: e => {
2701
+ e.stopPropagation();
2702
+ $$.onChangeSort({
2703
+ dir: dir === 'dec' ? 'inc' : 'dec'
2704
+ }, colIndex);
2705
+ }
2706
+ }))
2707
+ });
2708
+ }
2709
+ },
2710
+
2711
+ getToggles(obj) {
2712
+ let {
2713
+ column,
2714
+ toggleOptions,
2715
+ colIndex,
2716
+ columnTitle
2717
+ } = obj;
2718
+ let {
2719
+ columns
2720
+ } = getState();
2721
+ toggleOptions.push({
2722
+ text: columnTitle,
2723
+ checked: column.show !== false,
2724
+ onClick: () => {
2725
+ //change columns imutable(prevent change columns directly)
2726
+ let column = { ...obj.column,
2727
+ show: !obj.column.show
2728
+ };
2729
+
2730
+ if (column.storageKey) {
2731
+ column = { ...column,
2732
+ _storageObj: { ...column._storageObj,
2733
+ show: column.show
2734
+ }
2735
+ };
2736
+ localStorage.setItem('aio-table-column-storage-' + column.storageKey, JSON.stringify(column._storageObj));
2737
+ }
2738
+
2739
+ setState({
2740
+ columns: columns.map((o, i) => i === column.realIndex ? column : o)
2741
+ });
2742
+ }
2743
+ });
2744
+ },
2745
+
2746
+ getFreezes({
2747
+ column,
2748
+ colIndex,
2749
+ columnTitle,
2750
+ freezeOptions,
2751
+ freezeColumns,
2752
+ unFreezeColumns
2753
+ }) {
2754
+ (column.freeze ? freezeColumns : unFreezeColumns).push(column);
2755
+
2756
+ if (!column.toggleFreeze) {
2757
+ return;
2758
+ }
2759
+
2760
+ freezeOptions.push({
2761
+ text: columnTitle,
2762
+ checked: column.freeze === true,
2763
+ onClick: () => {
2764
+ let {
2765
+ columns
2766
+ } = getState();
2767
+ columns = [...columns];
2768
+ let column = { ...columns[colIndex]
2769
+ };
2770
+ column.freeze = !column.freeze;
2771
+ setState({
2772
+ columns: columns.map((o, i) => i === colIndex ? column : o)
2773
+ });
2774
+ }
2775
+ });
2776
+ },
2777
+
2778
+ updateColumnByStorage(column) {
2779
+ let {
2780
+ storageKey,
2781
+ _readStorage
2782
+ } = column;
2783
+
2784
+ if (storageKey && !_readStorage) {
2785
+ column._readStorage = true;
2786
+ let storageStr = localStorage.getItem('aio-table-column-storage-' + column.storageKey);
2787
+ let storageObj;
2788
+
2789
+ if (!storageStr || storageStr === null) {
2790
+ storageObj = {};
2791
+ localStorage.setItem('aio-table-column-storage-' + column.storageKey, '{}');
2792
+ } else {
2793
+ storageObj = JSON.parse(storageStr);
2794
+ }
2795
+
2796
+ if (storageObj.show !== undefined) {
2797
+ column.show = storageObj.show;
2798
+ }
2799
+
2800
+ if (storageObj.width !== undefined) {
2801
+ column.width = storageObj.width;
2802
+ }
2803
+
2804
+ column._storageObj = storageObj;
2805
+ }
2806
+ },
2807
+
2808
+ getDetails() {
2809
+ let {
2810
+ columns,
2811
+ groups
2812
+ } = getState();
2813
+ columns = [...columns];
2814
+ let sorts = [];
2815
+ let freezeColumns = [],
2816
+ unFreezeColumns = [],
2817
+ freezeOptions = [],
2818
+ sortOptions = [],
2819
+ toggleOptions = [],
2820
+ groupOptions = [];
2821
+ let excelColumns = [],
2822
+ visibleColumns = [],
2823
+ search = false;
2824
+ let groupTitles = groups.map(o => o.title);
2825
+ let renderIndex = 0;
2826
+
2827
+ for (let i = 0; i < columns.length; i++) {
2828
+ columns[i].realIndex = i;
2829
+
2830
+ if (columns[i].sort === true) {
2831
+ columns[i].sort = {};
2832
+ }
2833
+
2834
+ if (columns[i].filter === true) {
2835
+ columns[i].filter = {
2836
+ items: [],
2837
+ booleanType: 'or',
2838
+ type: 'text'
2839
+ };
2840
+ }
2841
+
2842
+ if (columns[i].group === true) {
2843
+ columns[i].group = {};
2844
+ }
2845
+
2846
+ columns[i].width = columns[i].width || 'auto';
2847
+ let column = { ...columns[i]
2848
+ };
2849
+ column.realIndex = i;
2850
+ $$.updateColumnByStorage(column);
2851
+ let {
2852
+ title: columnTitle,
2853
+ show = true,
2854
+ sort,
2855
+ toggleShow,
2856
+ excel
2857
+ } = column;
2858
+ columnTitle = typeof columnTitle === 'function' ? columnTitle() : columnTitle;
2859
+ column.show = typeof show === 'function' ? show() : show;
2860
+
2861
+ if (column.search) {
2862
+ search = true;
2863
+ }
2864
+
2865
+ if (column.group && groupTitles.indexOf(columnTitle) === -1) {
2866
+ let {
2867
+ title = columnTitle,
2868
+ active = true,
2869
+ toggle = true,
2870
+ storageKey = column.storageKey,
2871
+ getValue = column.getValue
2872
+ } = column.group;
2873
+ groups.push({
2874
+ title,
2875
+ active,
2876
+ toggle,
2877
+ storageKey,
2878
+ getValue
2879
+ });
2880
+ }
2881
+
2882
+ if (column.show) {
2883
+ column.renderIndex = renderIndex;
2884
+ columns[i].renderIndex = renderIndex;
2885
+ renderIndex++;
2886
+ visibleColumns.push(column);
2887
+
2888
+ if (excel) {
2889
+ excelColumns.push(column);
2890
+ }
2891
+
2892
+ if (sort) {
2893
+ $$.getSorts({
2894
+ column,
2895
+ columnTitle,
2896
+ sorts,
2897
+ sortOptions,
2898
+ colIndex: i
2899
+ });
2900
+ }
2901
+
2902
+ $$.getFreezes({
2903
+ column,
2904
+ colIndex: i,
2905
+ columnTitle,
2906
+ freezeOptions,
2907
+ freezeColumns,
2908
+ unFreezeColumns
2909
+ });
2910
+ }
2911
+
2912
+ if (toggleShow) {
2913
+ $$.getToggles({
2914
+ column,
2915
+ columnTitle,
2916
+ toggleOptions,
2917
+ colIndex: i
2918
+ });
2919
+ }
2920
+ }
2921
+
2922
+ $$.getGroups(groupOptions);
2923
+ return {
2924
+ sorts,
2925
+ sortOptions,
2926
+ freezeColumns,
2927
+ unFreezeColumns,
2928
+ freezeOptions,
2929
+ toggleOptions,
2930
+ groupOptions,
2931
+ excelColumns,
2932
+ columns: visibleColumns,
2933
+ search
2934
+ };
2935
+ },
2936
+
2937
+ getGroups(groupOptions) {
2938
+ var {
2939
+ groups
2940
+ } = getState();
2941
+
2942
+ for (let i = 0; i < groups.length; i++) {
2943
+ let group = groups[i];
2944
+ let {
2945
+ title,
2946
+ active = true,
2947
+ toggle = true,
2948
+ storageKey,
2949
+ _readStorage
2950
+ } = group;
2951
+
2952
+ if (storageKey && !_readStorage) {
2953
+ group._readStorage = true;
2954
+ let storageActive = localStorage.getItem('aio table group' + storageKey);
2955
+
2956
+ if (storageActive === null) {
2957
+ storageActive = true;
2958
+ localStorage.setItem('aio table group' + storageKey, JSON.stringify(storageAtive));
2959
+ } else {
2960
+ storageActive = JSON.parse(storageActive);
2961
+ }
2962
+
2963
+ active = storageActive;
2964
+ }
2965
+
2966
+ group.active = active;
2967
+
2968
+ if (toggle) {
2969
+ groupOptions.push({
2970
+ text: title,
2971
+ checked: active === true,
2972
+ onClick: () => {
2973
+ let {
2974
+ groups
2975
+ } = getState();
2976
+ let group = groups[i];
2977
+ group.active = !group.active;
2978
+
2979
+ if (storageKey) {
2980
+ localStorage.setItem('aio table group' + storageKey, JSON.stringify(group.active));
2981
+ }
2982
+
2983
+ setState({
2984
+ groups
2985
+ });
2986
+ }
2987
+ });
2988
+ }
2989
+ }
2990
+ },
2991
+
2992
+ isContain(text, subtext) {
2993
+ return text.toString().toLowerCase().indexOf(subtext.toString().toLowerCase()) !== -1;
2994
+ },
2995
+
2996
+ isEqual(a, b) {
2997
+ return a.toString().toLowerCase() === b.toString().toLowerCase();
2998
+ },
2999
+
3000
+ isGreater(a, b, type) {
3001
+ if (type === 'date') {
3002
+ return $$.getDateNumber(a) > $$.getDateNumber(b);
3003
+ }
3004
+
3005
+ return parseFloat(a) > parseFloat(b);
3006
+ },
3007
+
3008
+ isLess(a, b, type) {
3009
+ if (type === 'date') {
3010
+ return $$.getDateNumber(a) < $$.getDateNumber(b);
3011
+ }
3012
+
3013
+ return parseFloat(a) < parseFloat(b);
3014
+ },
3015
+
3016
+ getFilterResult_and(filters, val) {
3017
+ if (val === undefined) {
3018
+ return false;
3019
+ }
3020
+
3021
+ for (let i = 0; i < filters.length; i++) {
3022
+ let {
3023
+ operator: o,
3024
+ value: v,
3025
+ type
3026
+ } = filters[i];
3027
+
3028
+ if (v === '' || v === undefined) {
3029
+ continue;
3030
+ }
3031
+
3032
+ if (o === 'contain') {
3033
+ if (!$$.isContain(val, v)) {
3034
+ return false;
3035
+ }
3036
+
3037
+ continue;
3038
+ }
3039
+
3040
+ if (o === 'notContain') {
3041
+ if ($$.isContain(val, v)) {
3042
+ return false;
3043
+ }
3044
+
3045
+ continue;
3046
+ }
3047
+
3048
+ if (o === 'equal') {
3049
+ if (!$$.isEqual(val, v)) {
3050
+ return false;
3051
+ }
3052
+
3053
+ continue;
3054
+ }
3055
+
3056
+ if (o === 'notEqual') {
3057
+ if ($$.isEqual(val, v)) {
3058
+ return false;
3059
+ }
3060
+
3061
+ continue;
3062
+ }
3063
+
3064
+ if (o === 'greater') {
3065
+ if (!$$.isGreater(val, v, type)) {
3066
+ return false;
3067
+ }
3068
+
3069
+ continue;
3070
+ }
3071
+
3072
+ if (o === 'less') {
3073
+ if (!$$.isLess(val, v, type)) {
3074
+ return false;
3075
+ }
3076
+
3077
+ continue;
3078
+ }
3079
+ }
3080
+
3081
+ return true;
3082
+ },
3083
+
3084
+ getFilterResult_or(filters, val) {
3085
+ if (val === undefined) {
3086
+ return false;
3087
+ }
3088
+
3089
+ for (let i = 0; i < filters.length; i++) {
3090
+ let {
3091
+ operator: o,
3092
+ value: v,
3093
+ type
3094
+ } = filters[i];
3095
+
3096
+ if (v === '' || v === undefined) {
3097
+ return true;
3098
+ }
3099
+
3100
+ if (o === 'contain') {
3101
+ if ($$.isContain(val, v)) {
3102
+ return true;
3103
+ }
3104
+
3105
+ continue;
3106
+ }
3107
+
3108
+ if (o === 'notContain') {
3109
+ if (!$$.isContain(val, v)) {
3110
+ return true;
3111
+ }
3112
+
3113
+ continue;
3114
+ }
3115
+
3116
+ if (o === 'equal') {
3117
+ if ($$.isEqual(val, v)) {
3118
+ return true;
3119
+ }
3120
+
3121
+ continue;
3122
+ }
3123
+
3124
+ if (o === 'notEqual') {
3125
+ if (!$$.isEqual(val, v)) {
3126
+ return true;
3127
+ }
3128
+
3129
+ continue;
3130
+ }
3131
+
3132
+ if (o === 'greater') {
3133
+ if ($$.isGreater(val, v, type)) {
3134
+ return true;
3135
+ }
3136
+
3137
+ continue;
3138
+ }
3139
+
3140
+ if (o === 'less') {
3141
+ if ($$.isLess(val, v, type)) {
3142
+ return true;
3143
+ }
3144
+
3145
+ continue;
3146
+ }
3147
+ }
3148
+
3149
+ return false;
3150
+ },
3151
+
3152
+ getFilterResult(column, value) {
3153
+ let {
3154
+ items = [],
3155
+ booleanType = 'or'
3156
+ } = column.filter;
3157
+
3158
+ if (items.length) {
3159
+ return $$['getFilterResult_' + booleanType](items, value);
3160
+ }
3161
+
3162
+ return true;
3163
+ },
3164
+
3165
+ cubes2(obj = {}) {
3166
+ var {
3167
+ count = 5,
3168
+ thickness = [5, 16],
3169
+ delay = 0.1,
3170
+ borderRadius = 0,
3171
+ colors = ['dodgerblue'],
3172
+ duration = 1,
3173
+ gap = 3
3174
+ } = obj;
3175
+ let Thickness = Array.isArray(thickness) ? thickness : [thickness, thickness];
3176
+
3177
+ let getStyle1 = i => {
3178
+ return {
3179
+ width: Thickness[0],
3180
+ height: Thickness[1],
3181
+ background: colors[i % colors.length],
3182
+ margin: `0 ${gap / 2}px`,
3183
+ animation: `${duration}s loadingScaleY infinite ease-in-out ${i * delay}s`,
3184
+ borderRadius: borderRadius + 'px'
3185
+ };
3186
+ };
3187
+
3188
+ let items = [];
3189
+
3190
+ for (var i = 0; i < count; i++) {
3191
+ items.push( /*#__PURE__*/_react.default.createElement("div", {
3192
+ key: i,
3193
+ style: getStyle1(i)
3194
+ }));
3195
+ }
3196
+
3197
+ return /*#__PURE__*/_react.default.createElement("div", {
3198
+ className: "rect",
3199
+ style: {
3200
+ width: '100%',
3201
+ display: 'flex',
3202
+ alignItems: 'center',
3203
+ justifyContent: 'center',
3204
+ background: 'transparent'
3205
+ }
3206
+ }, items);
3207
+ },
3208
+
3209
+ getLoading(isMain) {
3210
+ if (isMain) {
3211
+ return /*#__PURE__*/_react.default.createElement("div", {
3212
+ className: "aio-table-loading aio-table-main-loading",
3213
+ style: {
3214
+ display: 'none'
3215
+ }
3216
+ }, $$.cubes2({
3217
+ thickness: [6, 40]
3218
+ }));
3219
+ }
3220
+
3221
+ return /*#__PURE__*/_react.default.createElement("div", {
3222
+ className: "aio-table-loading"
3223
+ }, $$.cubes2({
3224
+ thickness: [6, 40]
3225
+ }));
3226
+ },
3227
+
3228
+ toggleRow(row) {
3229
+ var {
3230
+ openDictionary
3231
+ } = getState();
3232
+ var {
3233
+ id
3234
+ } = getProps();
3235
+
3236
+ if (row._show === 'relativeFilter') {
3237
+ return;
3238
+ }
3239
+
3240
+ openDictionary[row._id] = !openDictionary[row._id];
3241
+
3242
+ if (id !== undefined) {
3243
+ localStorage.setItem('aio table ' + id, JSON.stringify(openDictionary));
3244
+ }
3245
+
3246
+ setState({
3247
+ openDictionary
3248
+ });
3249
+ },
3250
+
3251
+ getRow(row) {
3252
+ let {
3253
+ searchText
3254
+ } = getState();
3255
+ let {
3256
+ columns
3257
+ } = getContext().details;
3258
+ row._values = {};
3259
+ let searchShow;
3260
+ let show = true,
3261
+ lastColumn,
3262
+ isThereAutoColumn = false,
3263
+ cells = [],
3264
+ freezeCells = [],
3265
+ unFreezeCells = [];
3266
+
3267
+ for (let i = 0; i < columns.length; i++) {
3268
+ let column = columns[i];
3269
+ let value = $$.getCellValue(row, column.getValue);
3270
+ row._values[column.realIndex] = value;
3271
+
3272
+ if (show && column.search && searchText) {
3273
+ if (searchShow === undefined) {
3274
+ searchShow = false;
3275
+ }
3276
+
3277
+ searchShow = searchShow || JSON.stringify(value).toLowerCase().indexOf(searchText.toLowerCase()) !== -1;
3278
+ }
3279
+
3280
+ if (show && column.filter && !column.filter.onChange) {
3281
+ show = show && $$.getFilterResult(column, value);
3282
+ }
3283
+
3284
+ let obj = {
3285
+ key: row._index + ',' + column.realIndex,
3286
+ column,
3287
+ value,
3288
+ freeze: column.freeze
3289
+ };
3290
+
3291
+ if ($$.freezeMode) {
3292
+ if (column.freeze) {
3293
+ freezeCells.push(obj);
3294
+ } else {
3295
+ lastColumn = column;
3296
+ unFreezeCells.push(obj);
3297
+
3298
+ if (column.width === 'auto') {
3299
+ isThereAutoColumn = true;
3300
+ }
3301
+ }
3302
+ } else {
3303
+ cells.push(obj);
3304
+ lastColumn = column;
3305
+
3306
+ if (column.width === 'auto') {
3307
+ isThereAutoColumn = true;
3308
+ }
3309
+ }
3310
+ }
3311
+
3312
+ row._show = show && searchShow !== false;
3313
+
3314
+ if (show) {
3315
+ let parents = row._getParents();
3316
+
3317
+ for (let i = 0; i < parents.length; i++) {
3318
+ if (parents[i]._show === false) {
3319
+ parents[i]._show = 'relativeFilter';
3320
+ }
3321
+ }
3322
+ }
3323
+
3324
+ if (!isThereAutoColumn && lastColumn) {
3325
+ lastColumn.width = 'auto';
3326
+ }
3327
+
3328
+ return {
3329
+ cells,
3330
+ freezeCells,
3331
+ unFreezeCells
3332
+ };
3333
+ },
3334
+
3335
+ getRowById(id, rows) {
3336
+ for (let i = 0; i < rows.length; i++) {
3337
+ let row = rows[i];
3338
+
3339
+ if (!row.row) {
3340
+ continue;
3341
+ }
3342
+
3343
+ if (row.row._id === id) {
3344
+ return row;
3345
+ }
3346
+ }
3347
+ },
3348
+
3349
+ getStateByToggleAll(rows) {
3350
+ var {
3351
+ openDictionary,
3352
+ groupsOpen,
3353
+ toggleAllState
3354
+ } = getState();
3355
+ var {
3356
+ id
3357
+ } = getProps();
3358
+
3359
+ for (let prop in openDictionary) {
3360
+ let row = $$.getRowById(prop, rows);
3361
+
3362
+ if (row && row.row && row.row._show === 'relativeFilter') {
3363
+ continue;
3364
+ }
3365
+
3366
+ openDictionary[prop] = toggleAllState;
3367
+ }
3368
+
3369
+ for (let prop in groupsOpen) {
3370
+ groupsOpen[prop] = toggleAllState;
3371
+ }
3372
+
3373
+ if (id !== undefined) {
3374
+ localStorage.setItem('aio table ' + id, JSON.stringify(openDictionary));
3375
+ }
3376
+
3377
+ return {
3378
+ openDictionary,
3379
+ groupsOpen,
3380
+ toggleAllState: !toggleAllState
3381
+ };
3382
+ },
3383
+
3384
+ getClient(e) {
3385
+ return getState().touch ? [e.changedTouches[0].clientX, e.changedTouches[0].clientY] : [e.clientX, e.clientY];
3386
+ },
3387
+
3388
+ getRowsReq(model, rows, _level, parents, nestedIndex) {
3389
+ var {
3390
+ openDictionary
3391
+ } = getState();
3392
+ var {
3393
+ getRowId,
3394
+ getRowChilds,
3395
+ getRowVisible,
3396
+ getRowParentId
3397
+ } = getProps();
3398
+
3399
+ if (getRowParentId) {
3400
+ getRowChilds = row => row._childs;
3401
+ }
3402
+
3403
+ for (let i = 0; i < model.length; i++) {
3404
+ let row = model[i];
3405
+
3406
+ if (getRowVisible && getRowVisible(row) === false) {
3407
+ continue;
3408
+ }
3409
+
3410
+ if (row._groupId) {
3411
+ rows.push(row);
3412
+ continue;
3413
+ }
3414
+
3415
+ row._index = $$.realIndex;
3416
+ $$.realIndex++;
3417
+ row._childIndex = i;
3418
+ let NI = nestedIndex.concat(i);
3419
+ row._nestedIndex = NI;
3420
+ row._level = _level;
3421
+ row._isFirstChild = i === 0;
3422
+ row._isLastChild = i === model.length - 1;
3423
+
3424
+ row._getParents = () => parents;
3425
+
3426
+ if (row._id === undefined) {
3427
+ let id = getRowId ? getRowId(row) : 'row' + Math.random();
3428
+
3429
+ if (id === undefined) {
3430
+ console.error('AIOTable => id of row is not defined, please check getRowId props of AIOTable');
3431
+ }
3432
+
3433
+ row._id = id;
3434
+ }
3435
+
3436
+ openDictionary[row._id] = openDictionary[row._id] === false ? false : true;
3437
+ row._opened = openDictionary[row._id];
3438
+ row._childsLength = 0;
3439
+ let childs = [];
3440
+
3441
+ if (getRowChilds) {
3442
+ childs = $$.getCellValue(row, getRowChilds) || [];
3443
+ row._childsLength = childs.length;
3444
+ }
3445
+
3446
+ let Row = $$.getRow(row);
3447
+
3448
+ if (row._level === 0) {
3449
+ rows.push([]);
3450
+ }
3451
+
3452
+ rows[rows.length - 1].push({ ...Row,
3453
+ row
3454
+ });
3455
+
3456
+ if (row._opened && row._childsLength) {
3457
+ $$.getRowsReq(childs, rows, _level + 1, parents.concat(row), NI);
3458
+ } else {
3459
+ $$.realIndex += row._childsLength;
3460
+ }
3461
+ }
3462
+ },
3463
+
3464
+ getRowsNested(model, childsField) {
3465
+ let {
3466
+ getRowId,
3467
+ getRowParentId
3468
+ } = getProps();
3469
+
3470
+ if (!getRowParentId) {
3471
+ return model;
3472
+ }
3473
+
3474
+ var convertModelRecursive = (array, parentId, parentObject) => {
3475
+ for (let i = 0; i < array.length; i++) {
3476
+ let row = array[i];
3477
+ let rowParentId = getRowParentId(row);
3478
+
3479
+ if (rowParentId !== parentId) {
3480
+ continue;
3481
+ }
3482
+
3483
+ let rowId = getRowId(row);
3484
+ row[childsField] = [];
3485
+ parentObject.push(row);
3486
+ array.splice(i, 1);
3487
+ i--;
3488
+ convertModelRecursive([...array], rowId, row[childsField]);
3489
+ }
3490
+ };
3491
+
3492
+ var result = [];
3493
+ convertModelRecursive([...model], undefined, result);
3494
+ return result;
3495
+ },
3496
+
3497
+ getRowsBySort(rows, sorts) {
3498
+ if (!sorts.length) {
3499
+ return rows;
3500
+ }
3501
+
3502
+ return rows.sort((a, b) => {
3503
+ for (let i = 0; i < sorts.length; i++) {
3504
+ let {
3505
+ getValue,
3506
+ dir,
3507
+ onChange
3508
+ } = sorts[i];
3509
+
3510
+ if (onChange) {
3511
+ continue;
3512
+ }
3513
+
3514
+ let aValue = $$.getCellValue(a, getValue),
3515
+ bValue = $$.getCellValue(b, getValue);
3516
+
3517
+ if (aValue < bValue) {
3518
+ return -1 * (dir === 'dec' ? -1 : 1);
3519
+ }
3520
+
3521
+ if (aValue > bValue) {
3522
+ return 1 * (dir === 'dec' ? -1 : 1);
3523
+ }
3524
+
3525
+ if (i === sorts.length - 1) {
3526
+ return 0;
3527
+ }
3528
+ }
3529
+
3530
+ return 0;
3531
+ });
3532
+ },
3533
+
3534
+ getRows(model, freezeMode) {
3535
+ let rows = [];
3536
+ $$.realIndex = 0;
3537
+ $$.freezeMode = freezeMode;
3538
+ $$.getRowsReq(model, rows, 0, [], []);
3539
+ let result = [];
3540
+
3541
+ for (let i = 0; i < rows.length; i++) {
3542
+ let list = rows[i];
3543
+
3544
+ if (list[0].row._show === false) {
3545
+ continue;
3546
+ }
3547
+
3548
+ let arr = list.filter(o => o.row._show !== false);
3549
+
3550
+ if (arr.length) {
3551
+ result.push(arr);
3552
+ }
3553
+ }
3554
+
3555
+ return result;
3556
+ },
3557
+
3558
+ getRootsByPaging(roots, index) {
3559
+ let {
3560
+ paging
3561
+ } = getState();
3562
+
3563
+ if (!paging) {
3564
+ return roots;
3565
+ }
3566
+
3567
+ var length = paging.onChange ? paging.count : roots.length;
3568
+ paging.pages = Math.ceil(length / paging.size);
3569
+
3570
+ if (paging.number > paging.pages) {
3571
+ paging.number = paging.pages;
3572
+ }
3573
+
3574
+ if (paging.number < 1) {
3575
+ paging.number = 1;
3576
+ }
3577
+
3578
+ if (paging.onChange) {
3579
+ return roots;
3580
+ } //اگر پیجینگ آنچنج داشت تغییری در ردیف ها نده و اجازه بده تغییرات در آنچنج روی مدل ورودی انجام شود
3581
+
3582
+
3583
+ let start = (paging.number - 1) * paging.size;
3584
+ let end = start + paging.size;
3585
+
3586
+ if (end > length) {
3587
+ end = length;
3588
+ }
3589
+
3590
+ index.real = start;
3591
+ return roots.slice(start, end);
3592
+ },
3593
+
3594
+ getRootsByGroup(roots, groups) {
3595
+ if (!groups.length) {
3596
+ return roots;
3597
+ }
3598
+
3599
+ var {
3600
+ groupsOpen
3601
+ } = getState();
3602
+
3603
+ function msf(obj, _level, parents) {
3604
+ if (Array.isArray(obj)) {
3605
+ groupedRows = groupedRows.concat(obj);
3606
+ } else {
3607
+ for (var prop in obj) {
3608
+ let newParents = parents.concat(prop);
3609
+
3610
+ let _groupId = newParents.toString();
3611
+
3612
+ groupsOpen[_groupId] = groupsOpen[_groupId] === undefined ? true : groupsOpen[_groupId];
3613
+ groupedRows.push({
3614
+ _groupValue: prop,
3615
+ _groupId,
3616
+ _level,
3617
+ _opened: groupsOpen[_groupId]
3618
+ });
3619
+
3620
+ if (groupsOpen[_groupId]) {
3621
+ msf(obj[prop], _level + 1, newParents);
3622
+ }
3623
+ }
3624
+ }
3625
+ }
3626
+
3627
+ var newModel = {};
3628
+
3629
+ for (let i = 0; i < roots.length; i++) {
3630
+ let root = roots[i];
3631
+ var obj = newModel;
3632
+ let values = groups.map(group => $$.getCellValue(root[0].row, group.getValue, group.field));
3633
+
3634
+ for (let j = 0; j < values.length; j++) {
3635
+ let value = values[j];
3636
+
3637
+ if (j === values.length - 1) {
3638
+ obj[value] = obj[value] || [];
3639
+ obj[value].push(root);
3640
+ } else {
3641
+ obj[value] = obj[value] || {};
3642
+ obj = obj[value];
3643
+ }
3644
+ }
3645
+ }
3646
+
3647
+ var groupedRows = [];
3648
+ var _level = 0;
3649
+ msf(newModel, _level, []);
3650
+ return groupedRows;
3651
+ },
3652
+
3653
+ getRowsByRoots(rows) {
3654
+ var result = [];
3655
+
3656
+ for (var i = 0; i < rows.length; i++) {
3657
+ result = result.concat(rows[i]);
3658
+ }
3659
+
3660
+ return result;
3661
+ },
3662
+
3663
+ getFullCellStyle(columns) {
3664
+ if (!columns) {
3665
+ return {
3666
+ gridColumnStart: 1,
3667
+ gridColumnEnd: 2
3668
+ };
3669
+ }
3670
+
3671
+ return {
3672
+ gridColumnStart: 1,
3673
+ gridColumnEnd: columns.length + 1
3674
+ };
3675
+ },
3676
+
3677
+ getNoData(columns) {
3678
+ var {
3679
+ rowHeight,
3680
+ translate
3681
+ } = getProps();
3682
+ return /*#__PURE__*/_react.default.createElement("div", {
3683
+ className: "aio-table-nodata",
3684
+ style: { ...$$.getFullCellStyle(columns),
3685
+ height: rowHeight
3686
+ }
3687
+ }, translate('No Data'));
3688
+ }
3689
+
3690
+ };
3691
+ return {
3692
+ exportToExcel: $$.exportToExcel,
3693
+ getDetails: $$.getDetails,
3694
+ getSliderCell: $$.getSliderCell,
3695
+ getOptionsCell: $$.getOptionsCell,
3696
+ getGanttCell: $$.getGanttCell,
3697
+ getCheckboxCell: $$.getCheckboxCell,
3698
+ handleOutsideClick: $$.handleOutsideClick,
3699
+ onScroll: $$.onScroll,
3700
+ getCardRowCount: $$.getCardRowCount,
3701
+ getOpenDictionary: $$.getOpenDictionary,
3702
+ getRowsBySort: $$.getRowsBySort,
3703
+ getGroups: $$.getGroups,
3704
+ getRootsByGroup: $$.getRootsByGroup,
3705
+ setColumnByStorage: $$.setColumnByStorage,
3706
+ getFilterResult: $$.getFilterResult,
3707
+ getLoading: $$.getLoading,
3708
+ cubes2: $$.cubes2,
3709
+ getRow: $$.getRow,
3710
+ getRowById: $$.getRowById,
3711
+ getClient: $$.getClient,
3712
+ getStateByToggleAll: $$.getStateByToggleAll,
3713
+ getRootsByPaging: $$.getRootsByPaging,
3714
+ getRowsReq: $$.getRowsReq,
3715
+ getRowsNested: $$.getRowsNested,
3716
+ getRows: $$.getRows,
3717
+ getRootsByRows: $$.getRootsByRows,
3718
+ getRowsByRoots: $$.getRowsByRoots,
3719
+ toggleRow: $$.toggleRow,
3720
+ getFullCellStyle: $$.getFullCellStyle,
3721
+ getNoData: $$.getNoData,
3722
+ getSortsFromColumns: $$.getSortsFromColumns,
3723
+ getCellValue: $$.getCellValue,
3724
+ setCellValue: $$.setCellValue
3725
+ };
3726
+ }
3727
+
3728
+ function aioTableGetSvg(type, conf = {}) {
3729
+ let {
3730
+ className,
3731
+ flip,
3732
+ onClick,
3733
+ box = '0 0 24 24'
3734
+ } = conf;
3735
+ let style1 = {
3736
+ width: '1.05rem',
3737
+ height: '1.05rem'
3738
+ };
3739
+ style1.background = '';
3740
+
3741
+ if (flip) {
3742
+ style1.transform = 'scaleX(-1)';
3743
+ style1.transformOrigin = 'center center';
3744
+ }
3745
+
3746
+ let style2 = {
3747
+ fill: 'currentcolor'
3748
+ };
3749
+ let Attrs = {
3750
+ viewBox: box,
3751
+ role: "presentation",
3752
+ style: style1
3753
+ };
3754
+
3755
+ if (className) {
3756
+ Attrs.className = className;
3757
+ }
3758
+
3759
+ if (onClick) {
3760
+ Attrs.onClick = onClick;
3761
+ }
3762
+
3763
+ if (type === 'eye') {
3764
+ return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
3765
+ d: "M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z",
3766
+ style: style2
3767
+ }));
3768
+ }
3769
+
3770
+ if (type === 'magnify') {
3771
+ return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
3772
+ d: "M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z",
3773
+ style: style2
3774
+ }));
3775
+ }
3776
+
3777
+ if (type === 'close') {
3778
+ return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
3779
+ d: "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z",
3780
+ style: style2
3781
+ }));
3782
+ }
3783
+
3784
+ if (type === 'toggleAllPlus') {
3785
+ return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
3786
+ d: "M18,8H8V18H6V8A2,2 0 0,1 8,6H18V8M14,2H4A2,2 0 0,0 2,4V14H4V4H14V2M22,12V20A2,2 0 0,1 20,22H12A2,2 0 0,1 10,20V12A2,2 0 0,1 12,10H20A2,2 0 0,1 22,12M20,15H17V12H15V15H12V17H15V20H17V17H20V15Z",
3787
+ style: style2
3788
+ }));
3789
+ }
3790
+
3791
+ if (type === 'toggleAllMinus') {
3792
+ return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
3793
+ d: "M14,4H4V14H2V4A2,2 0 0,1 4,2H14V4M18,6H8A2,2 0 0,0 6,8V18H8V8H18V6M22,12V20A2,2 0 0,1 20,22H12A2,2 0 0,1 10,20V12A2,2 0 0,1 12,10H20A2,2 0 0,1 22,12M20,15H12V17H20V15Z",
3794
+ style: style2
3795
+ }));
3796
+ }
3797
+
3798
+ if (type === 'excel') {
3799
+ return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
3800
+ d: "M21.17 3.25Q21.5 3.25 21.76 3.5 22 3.74 22 4.08V19.92Q22 20.26 21.76 20.5 21.5 20.75 21.17 20.75H7.83Q7.5 20.75 7.24 20.5 7 20.26 7 19.92V17H2.83Q2.5 17 2.24 16.76 2 16.5 2 16.17V7.83Q2 7.5 2.24 7.24 2.5 7 2.83 7H7V4.08Q7 3.74 7.24 3.5 7.5 3.25 7.83 3.25M7 13.06L8.18 15.28H9.97L8 12.06L9.93 8.89H8.22L7.13 10.9L7.09 10.96L7.06 11.03Q6.8 10.5 6.5 9.96 6.25 9.43 5.97 8.89H4.16L6.05 12.08L4 15.28H5.78M13.88 19.5V17H8.25V19.5M13.88 15.75V12.63H12V15.75M13.88 11.38V8.25H12V11.38M13.88 7V4.5H8.25V7M20.75 19.5V17H15.13V19.5M20.75 15.75V12.63H15.13V15.75M20.75 11.38V8.25H15.13V11.38M20.75 7V4.5H15.13V7Z",
3801
+ style: style2
3802
+ }));
3803
+ }
3804
+
3805
+ if (type === 'sort') {
3806
+ return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
3807
+ d: "M18 21L14 17H17V7H14L18 3L22 7H19V17H22M2 19V17H12V19M2 13V11H9V13M2 7V5H6V7H2Z",
3808
+ style: style2
3809
+ }));
3810
+ }
3811
+
3812
+ if (type === 'group') {
3813
+ return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
3814
+ d: "M3,3H9V7H3V3M15,10H21V14H15V10M15,17H21V21H15V17M13,13H7V18H13V20H7L5,20V9H7V11H13V13Z",
3815
+ style: style2
3816
+ }));
3817
+ }
3818
+
3819
+ if (type === 'freeze') {
3820
+ return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
3821
+ d: "M4 22H2V2H4V22M22 7H6V10H22V7M16 14H6V17H16V14Z",
3822
+ style: style2
3823
+ }));
3824
+ }
3825
+
3826
+ if (type === 'filter') {
3827
+ return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
3828
+ d: "M14,12V19.88C14.04,20.18 13.94,20.5 13.71,20.71C13.32,21.1 12.69,21.1 12.3,20.71L10.29,18.7C10.06,18.47 9.96,18.16 10,17.87V12H9.97L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L14.03,12H14Z",
3829
+ style: style2
3830
+ }));
3831
+ }
3832
+
3833
+ if (type === 'filterActive') {
3834
+ return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
3835
+ d: "M11 11L16.76 3.62A1 1 0 0 0 16.59 2.22A1 1 0 0 0 16 2H2A1 1 0 0 0 1.38 2.22A1 1 0 0 0 1.21 3.62L7 11V16.87A1 1 0 0 0 7.29 17.7L9.29 19.7A1 1 0 0 0 10.7 19.7A1 1 0 0 0 11 18.87V11M13 16L18 21L23 16Z",
3836
+ style: style2
3837
+ }));
3838
+ }
3839
+
3840
+ if (type === 'dots') {
3841
+ return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
3842
+ d: "M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z",
3843
+ style: style2
3844
+ }));
3845
+ }
3846
+
3847
+ if (type === 'chevronDown') {
3848
+ return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
3849
+ d: "M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z",
3850
+ style: style2
3851
+ }));
3852
+ }
3853
+
3854
+ if (type === 'chevronRight') {
3855
+ return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
3856
+ d: "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z",
3857
+ style: style2
3858
+ }));
3859
+ }
3860
+
3861
+ if (type === 'doubleChevronRight') {
3862
+ return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
3863
+ d: "M5.59,7.41L7,6L13,12L7,18L5.59,16.59L10.17,12L5.59,7.41M11.59,7.41L13,6L19,12L13,18L11.59,16.59L16.17,12L11.59,7.41Z",
3864
+ style: style2
3865
+ }));
3866
+ }
3867
+
3868
+ if (type === 'arrowUp') {
3869
+ return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
3870
+ d: "M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z",
3871
+ style: style2
3872
+ }));
3873
+ }
3874
+
3875
+ if (type === 'arrowDown') {
3876
+ return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
3877
+ d: "M11,4H13V16L18.5,10.5L19.92,11.92L12,19.84L4.08,11.92L5.5,10.5L11,16V4Z",
3878
+ style: style2
3879
+ }));
3880
+ }
1302
3881
  }