aio-table 7.0.2 → 7.1.1

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 +3695 -1099
  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,3878 @@ 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;
1104
- }
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
+ }
1105
879
 
1106
- getColumnOptions(column) {
1107
- let {
1108
- getValue
1109
- } = this.props;
1110
- return getValue(column.options, []);
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());
1111
899
  }
1112
900
 
1113
- getColumns() {
1114
- let {
1115
- onChange,
1116
- addable = true,
1117
- disabled,
1118
- columns,
1119
- value,
1120
- rowNumber
901
+ render() {
902
+ var {
903
+ onScroll,
904
+ onSwap,
905
+ onDrop,
906
+ onDrag,
907
+ fn,
908
+ focused,
909
+ SetState,
910
+ striped,
911
+ getCellAttrs,
912
+ fn
913
+ } = this.context;
914
+ var {
915
+ rows,
916
+ id,
917
+ tableIndex,
918
+ type,
919
+ columns
1121
920
  } = 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
- }
921
+ let props = {
922
+ id,
923
+ tabIndex: 0,
924
+ className: 'aio-table-unit',
925
+ style: this.getStyle(),
926
+ ref: this.dom,
927
+ onKeyDown: this.keyDown.bind(this),
928
+ onScroll: e => onScroll(tableIndex)
929
+ };
1152
930
 
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
- }];
931
+ if (this.context.cardTemplate) {
932
+ return this.card(props);
933
+ }
1161
934
 
1162
- a.template = (row, column, value) => {
1163
- let option = options.filter(o => o.value === value)[0];
1164
- return option ? option.text : '';
1165
- };
935
+ this.renderIndex = -1;
936
+ return /*#__PURE__*/_react.default.createElement("div", props, this.getTitles(), rows && rows.length !== 0 && rows.map((o, i) => {
937
+ if (o._groupId) {
938
+ return /*#__PURE__*/_react.default.createElement(AIOTableGroup, {
939
+ tableIndex,
940
+ row: o,
941
+ columns: columns,
942
+ key: 'group' + i + '-' + tableIndex
943
+ });
1166
944
  }
1167
945
 
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] = {};
946
+ this.renderIndex++;
947
+ return o[type].map(({
948
+ value,
949
+ column
950
+ }, j) => {
951
+ let row = o.row;
952
+ let cellId = i + '-' + j + '-' + tableIndex;
953
+ let inlineEdit = fn.getValueByField(row, column, column.inlineEdit);
954
+ let attrs = getCellAttrs(row, column);
955
+ return /*#__PURE__*/_react.default.createElement(AIOTableCell, {
956
+ key: cellId,
957
+ attrs: {
958
+ 'data-row-index': this.renderIndex,
959
+ 'data-col-index': column.renderIndex,
960
+ 'data-real-row-index': row._index,
961
+ 'data-real-col-index': column.realIndex,
962
+ 'data-child-index': row._childIndex,
963
+ 'data-childs-length': row._childsLength,
964
+ 'data-lavel': row._level,
965
+ 'data-cell-id': cellId,
966
+ tabIndex: 0,
967
+ draggable: typeof onSwap === 'function' && column.swap,
968
+ onDrop: () => onDrop(row),
969
+ onDragOver: e => e.preventDefault(),
970
+ onDragStart: () => onDrag(row),
971
+ onClick: () => {
972
+ var {
973
+ focused,
974
+ SetState
975
+ } = this.context;
976
+
977
+ if (attrs.onClick) {
978
+ attrs.onClick(row);
979
+ }
980
+
981
+ if (!inlineEdit || focused === cellId) {
982
+ return;
983
+ }
984
+
985
+ if (focused === false) {
986
+ setTimeout(() => fn.handleOutsideClick(), 5);
987
+ }
988
+
989
+ SetState({
990
+ focused: cellId
991
+ }, 'cellonClick');
992
+ setTimeout(() => {
993
+ let dom = (0, _jquery.default)(`[data-cell-id = ${cellId}]`).find('.aio-table-input');
994
+ dom.focus().select();
995
+ }, 10);
1175
996
  }
1176
-
1177
- this.setValueByField(value[row._index], column.field, val);
1178
- onChange(value);
1179
997
  },
1180
- disabled: () => disabled
1181
- };
998
+ striped: this.renderIndex % 2 === 0 && striped,
999
+ value: value,
1000
+ column: column,
1001
+ row: row,
1002
+ inlineEdit: inlineEdit,
1003
+ before: fn.getValueByField(row, column, column.before),
1004
+ after: fn.getValueByField(row, column, column.after),
1005
+ justify: column.justify !== false && !column.treeMode
1006
+ });
1007
+ });
1008
+ }), rows && rows.length === 0 && fn.getNoData(columns), !rows && fn.getLoading());
1009
+ }
1182
1010
 
1183
- if (column.type === 'select') {
1184
- a.inlineEdit.options = this.getColumnOptions(column);
1185
- }
1011
+ }
1186
1012
 
1187
- a.inlineEdit.disabled = row => {
1188
- if (column.disabled) {
1189
- return true;
1190
- }
1013
+ _defineProperty(AIOTableUnit, "contextType", AioTableContext);
1191
1014
 
1192
- return false;
1193
- };
1194
- }
1015
+ class AIOTableTitle extends _react.Component {
1016
+ constructor(props) {
1017
+ super(props);
1018
+ this.dom = /*#__PURE__*/(0, _react.createRef)();
1019
+ }
1195
1020
 
1196
- return a;
1197
- });
1021
+ getStyle(style) {
1022
+ let {
1023
+ headerHeight,
1024
+ columnGap
1025
+ } = this.context;
1026
+ return {
1027
+ height: headerHeight,
1028
+ top: 0,
1029
+ borderLeft: columnGap ? 'none' : undefined,
1030
+ borderRight: columnGap ? 'none' : undefined,
1031
+ ...style
1032
+ };
1033
+ }
1198
1034
 
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
- });
1035
+ mouseDown(e, column) {
1036
+ if (!column.resizable) {
1037
+ return;
1213
1038
  }
1214
1039
 
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
- });
1040
+ this.resizeDown(e, column);
1041
+ }
1042
+
1043
+ resizeDown(e, column) {
1044
+ var {
1045
+ touch,
1046
+ fn
1047
+ } = this.context;
1048
+ var {
1049
+ gridTemplateColumns
1050
+ } = this.props;
1051
+ this.resized = false;
1052
+ (0, _jquery.default)(window).bind(touch ? 'touchmove' : 'mousemove', _jquery.default.proxy(this.resizeMove, this));
1053
+ (0, _jquery.default)(window).bind(touch ? 'touchend' : 'mouseup', _jquery.default.proxy(this.resizeUp, this));
1054
+ this.resizeDetails = {
1055
+ client: fn.getClient(e),
1056
+ width: parseInt(gridTemplateColumns[column.renderIndex]),
1057
+ column
1058
+ };
1059
+ }
1060
+
1061
+ resizeMove(e) {
1062
+ this.resized = true;
1063
+ var {
1064
+ rtl,
1065
+ fn
1066
+ } = this.context;
1067
+ var {
1068
+ setStyle,
1069
+ gridTemplateColumns
1070
+ } = this.props;
1071
+ var Client = fn.getClient(e);
1072
+ var {
1073
+ client,
1074
+ width,
1075
+ column
1076
+ } = this.resizeDetails;
1077
+ var offset = Client[0] - client[0];
1078
+ let newWidth = width + offset * (rtl ? -1 : 1);
1079
+
1080
+ if (newWidth < parseInt(column.minWidth || 36)) {
1081
+ newWidth = parseInt(column.minWidth || 36);
1237
1082
  }
1238
1083
 
1239
- return result;
1084
+ this.resizeDetails.newWidth = newWidth + 'px';
1085
+ gridTemplateColumns[column.renderIndex] = this.resizeDetails.newWidth;
1086
+ setStyle(gridTemplateColumns);
1240
1087
  }
1241
1088
 
1242
- render() {
1089
+ resizeUp() {
1090
+ (0, _jquery.default)(window).unbind(touch ? 'touchmove' : 'mousemove', this.resizeMove);
1091
+ (0, _jquery.default)(window).unbind(touch ? 'touchend' : 'mouseup', this.resizeUp);
1092
+
1093
+ if (!this.resized) {
1094
+ return;
1095
+ }
1096
+
1097
+ var {
1098
+ touch,
1099
+ columns,
1100
+ SetState,
1101
+ fn
1102
+ } = this.context;
1103
+ var {
1104
+ newWidth
1105
+ } = this.resizeDetails;
1243
1106
  let {
1244
- value = [],
1245
- disabled,
1246
- className,
1247
- style,
1248
- attrs
1107
+ column
1249
1108
  } = this.props;
1250
- let model;
1251
- let input = {
1252
- height: 28
1109
+ column = { ...column,
1110
+ width: newWidth
1253
1111
  };
1112
+ column = fn.updateStorageByColumn(column, {
1113
+ width: newWidth
1114
+ });
1115
+ columns = columns.map((c, i) => i === column.realIndex ? column : c);
1116
+ SetState({
1117
+ columns
1118
+ });
1119
+ }
1254
1120
 
1255
- try {
1256
- model = JSON.parse(JSON.stringify(value));
1257
- } catch {
1258
- model = [];
1259
- }
1260
-
1261
- if (!model.length) {
1262
- if (disabled) {
1263
- return null;
1121
+ getGanttTitle(column) {
1122
+ var {
1123
+ headerHeight,
1124
+ columnGap
1125
+ } = this.context;
1126
+ var {
1127
+ template
1128
+ } = column;
1129
+ let {
1130
+ padding = 36
1131
+ } = template;
1132
+ var keys = template.getKeys();
1133
+ return /*#__PURE__*/_react.default.createElement("div", {
1134
+ className: "aio-table-title aio-table-title-gantt",
1135
+ style: {
1136
+ padding: `0 ${+padding}px`,
1137
+ height: headerHeight,
1138
+ top: 0,
1139
+ borderLeft: columnGap ? 'none' : undefined,
1140
+ borderRight: columnGap ? 'none' : undefined
1141
+ },
1142
+ key: column.realIndex + 'title'
1143
+ }, /*#__PURE__*/_react.default.createElement(_rRangeSlider.default, {
1144
+ start: 0,
1145
+ end: keys.length - 1,
1146
+ labelStep: 1,
1147
+ editLabel: value => keys[value],
1148
+ labelStyle: () => {
1149
+ return {
1150
+ top: 0
1151
+ };
1152
+ },
1153
+ pointStyle: () => {
1154
+ return {
1155
+ display: 'none'
1156
+ };
1157
+ },
1158
+ lineStyle: () => {
1159
+ return {
1160
+ display: 'none'
1161
+ };
1264
1162
  }
1163
+ }));
1164
+ }
1265
1165
 
1266
- return /*#__PURE__*/_react.default.createElement("div", {
1267
- className: "aio-form-table-add aio-form-input",
1268
- onClick: () => this.add()
1269
- }, "+");
1166
+ render() {
1167
+ let {
1168
+ column,
1169
+ onDragStart,
1170
+ onDragOver,
1171
+ onDrop,
1172
+ isLast
1173
+ } = this.props;
1174
+ let {
1175
+ rtl
1176
+ } = this.context;
1177
+
1178
+ if (column.template && column.template.type === 'gantt') {
1179
+ return this.getGanttTitle(column);
1270
1180
  }
1271
1181
 
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
1182
+ let title = typeof column.title === 'function' ? column.title() : column.title;
1183
+ let attrs = { ...this.context.titleAttrs,
1184
+ ...column.titleAttrs
1285
1185
  };
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
- }
1186
+ let dataUniqId = 'aiotabletitle' + Math.round(Math.random() * 10000000);
1187
+ return /*#__PURE__*/_react.default.createElement("div", {
1188
+ ref: this.dom,
1189
+ "data-uniq-id": dataUniqId,
1190
+ style: this.getStyle(attrs.style),
1191
+ draggable: false,
1192
+ className: 'aio-table-title' + (attrs.className ? ' ' + attrs.className : '') + (isLast ? ' last-child' : '') + (rtl ? ' rtl' : ' ltr')
1193
+ }, /*#__PURE__*/_react.default.createElement(AIOTableFilter, {
1194
+ column: column,
1195
+ dataUniqId: dataUniqId
1196
+ }), /*#__PURE__*/_react.default.createElement("div", {
1197
+ className: "aio-table-title-text",
1198
+ style: {
1199
+ justifyContent: column.titleJustify !== false ? 'center' : undefined,
1200
+ cursor: column.movable === false ? undefined : 'move'
1297
1201
  },
1298
- style: props.style
1299
- });
1202
+ draggable: column.movable !== false,
1203
+ onDragStart: () => onDragStart(column.realIndex),
1204
+ onDragOver: e => onDragOver(e, column.realIndex),
1205
+ onDrop: () => onDrop(column)
1206
+ }, title), column.width !== 'auto' && /*#__PURE__*/_react.default.createElement("div", {
1207
+ className: "aio-table-resize",
1208
+ style: {
1209
+ cursor: column.resizable ? 'col-resize' : 'default'
1210
+ },
1211
+ draggable: false,
1212
+ onTouchStart: e => this.mouseDown(e, column),
1213
+ onMouseDown: e => this.mouseDown(e, column)
1214
+ }));
1300
1215
  }
1301
1216
 
1217
+ }
1218
+
1219
+ _defineProperty(AIOTableTitle, "contextType", AioTableContext);
1220
+
1221
+ class AIOTableGroup extends _react.Component {
1222
+ getStyle() {
1223
+ let {
1224
+ rowHeight,
1225
+ fn
1226
+ } = this.context;
1227
+ let {
1228
+ columns
1229
+ } = this.props;
1230
+ return { ...fn.getFullCellStyle(columns),
1231
+ height: rowHeight
1232
+ };
1233
+ }
1234
+
1235
+ getIcon(row) {
1236
+ let {
1237
+ rtl
1238
+ } = this.context;
1239
+
1240
+ if (row._opened) {
1241
+ return aioTableGetSvg('chevronDown', {
1242
+ box: '2 1 20 20'
1243
+ });
1244
+ }
1245
+
1246
+ return aioTableGetSvg('chevronRight', {
1247
+ flip: rtl === true
1248
+ });
1249
+ }
1250
+
1251
+ click(row) {
1252
+ let {
1253
+ SetState,
1254
+ groupsOpen
1255
+ } = this.context;
1256
+ var {
1257
+ _groupId
1258
+ } = row;
1259
+ groupsOpen[_groupId] = !groupsOpen[_groupId];
1260
+ SetState({
1261
+ groupsOpen
1262
+ });
1263
+ }
1264
+
1265
+ render() {
1266
+ let {
1267
+ indent
1268
+ } = this.context;
1269
+ let {
1270
+ row,
1271
+ tableIndex
1272
+ } = this.props;
1273
+ return /*#__PURE__*/_react.default.createElement("div", {
1274
+ className: "aio-table-group",
1275
+ style: this.getStyle()
1276
+ }, tableIndex !== 1 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
1277
+ style: {
1278
+ width: indent * row._level,
1279
+ flexShrink: 0
1280
+ }
1281
+ }), /*#__PURE__*/_react.default.createElement("div", {
1282
+ className: "aio-table-toggle",
1283
+ onClick: () => this.click(row)
1284
+ }, this.getIcon(row)), /*#__PURE__*/_react.default.createElement("div", {
1285
+ className: "aio-table-cell-gap"
1286
+ }), /*#__PURE__*/_react.default.createElement("div", {
1287
+ className: "aio-table-group-text"
1288
+ }, row._groupValue)));
1289
+ }
1290
+
1291
+ }
1292
+
1293
+ _defineProperty(AIOTableGroup, "contextType", AioTableContext);
1294
+
1295
+ class AIOTableCell extends _react.Component {
1296
+ constructor(props) {
1297
+ super(props);
1298
+ this.dom = /*#__PURE__*/(0, _react.createRef)();
1299
+ var {
1300
+ value
1301
+ } = this.props;
1302
+ this.state = {
1303
+ value,
1304
+ error: false,
1305
+ prevValue: value
1306
+ };
1307
+ }
1308
+
1309
+ getStyle(column, row) {
1310
+ var {
1311
+ template,
1312
+ minWidth = '30px'
1313
+ } = column;
1314
+ var {
1315
+ rowHeight,
1316
+ getCellAttrs
1317
+ } = this.context;
1318
+ let {
1319
+ striped
1320
+ } = this.props;
1321
+ var style = {
1322
+ height: rowHeight,
1323
+ overflow: template ? undefined : 'hidden',
1324
+ minWidth
1325
+ };
1326
+
1327
+ if (column.template && column.template.type === 'gantt') {
1328
+ style.padding = 0;
1329
+ }
1330
+
1331
+ if (typeof striped === 'string') {
1332
+ style.background = striped;
1333
+ } else if (Array.isArray(striped)) {
1334
+ style.background = striped[0];
1335
+ style.color = striped[1];
1336
+ }
1337
+
1338
+ let attrs = getCellAttrs(row, column);
1339
+ return { ...style,
1340
+ ...attrs.style
1341
+ };
1342
+ }
1343
+
1344
+ getClassName(row, column) {
1345
+ let {
1346
+ getCellAttrs
1347
+ } = this.context;
1348
+ var className = 'aio-table-cell';
1349
+ let {
1350
+ striped
1351
+ } = this.props;
1352
+ let attrs = getCellAttrs(row, column);
1353
+
1354
+ if (striped === true) {
1355
+ className += ' striped';
1356
+ }
1357
+
1358
+ if (column.selectable !== false) {
1359
+ className += ' aio-table-cell-selectable';
1360
+ }
1361
+
1362
+ if (column.template && column.template.type === 'gantt') {
1363
+ className += ' aio-table-cell-gantt';
1364
+ }
1365
+
1366
+ if (attrs.className) {
1367
+ className += ' ' + attrs.className;
1368
+ }
1369
+
1370
+ if (column.inlineEdit) {
1371
+ className += ' aio-table-cell-input';
1372
+ }
1373
+
1374
+ if (row._show === 'relativeFilter') {
1375
+ className += ' aio-table-relative-filter';
1376
+ }
1377
+
1378
+ if (row._show === false) {
1379
+ className += ' aio-table-cell-hidden';
1380
+ }
1381
+
1382
+ if (row._isFirstChild) {
1383
+ className += ' first-child';
1384
+ }
1385
+
1386
+ if (row._isLastChild) {
1387
+ className += ' last-child';
1388
+ }
1389
+
1390
+ return className;
1391
+ }
1392
+
1393
+ getToggleIcon(row) {
1394
+ let {
1395
+ rtl,
1396
+ fn
1397
+ } = this.context;
1398
+ let icon;
1399
+
1400
+ if (row._opened) {
1401
+ icon = aioTableGetSvg('chevronDown');
1402
+ } else {
1403
+ icon = aioTableGetSvg('chevronRight', {
1404
+ flip: rtl === true
1405
+ });
1406
+ }
1407
+
1408
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
1409
+ className: "aio-table-toggle",
1410
+ onClick: () => fn.toggleRow(row),
1411
+ style: {
1412
+ opacity: row._childsLength ? 1 : 0
1413
+ }
1414
+ }, icon), /*#__PURE__*/_react.default.createElement("div", {
1415
+ className: "aio-table-cell-gap"
1416
+ }));
1417
+ }
1418
+
1419
+ splitNumber(num) {
1420
+ if (!num) {
1421
+ return num;
1422
+ }
1423
+
1424
+ let str = num.toString();
1425
+ let dotIndex = str.indexOf('.');
1426
+
1427
+ if (dotIndex !== -1) {
1428
+ str = str.slice(0, dotIndex);
1429
+ }
1430
+
1431
+ let res = '';
1432
+ let index = 0;
1433
+
1434
+ for (let i = str.length - 1; i >= 0; i--) {
1435
+ res = str[i] + res;
1436
+
1437
+ if (index === 2) {
1438
+ index = 0;
1439
+
1440
+ if (i > 0) {
1441
+ res = ',' + res;
1442
+ }
1443
+ } else {
1444
+ index++;
1445
+ }
1446
+ }
1447
+
1448
+ return res;
1449
+ }
1450
+
1451
+ getContentByTemplate(row, column, value) {
1452
+ let {
1453
+ fn
1454
+ } = this.context;
1455
+ let template = typeof column.template === 'function' ? column.template(row, column, value) : column.template;
1456
+
1457
+ if (!template) {
1458
+ return value;
1459
+ }
1460
+
1461
+ if (template.type === 'slider') {
1462
+ return fn.getSliderCell(template, value);
1463
+ }
1464
+
1465
+ if (template.type === 'checkbox') {
1466
+ return fn.getCheckboxCell(template, value, row);
1467
+ }
1468
+
1469
+ if (template.type === 'options') {
1470
+ return fn.getOptionsCell(template, row);
1471
+ }
1472
+
1473
+ if (template.type === 'split') {
1474
+ let newValue = this.splitNumber(value);
1475
+
1476
+ if (template.editValue) {
1477
+ newValue = template.editValue(newValue);
1478
+ }
1479
+
1480
+ return newValue;
1481
+ }
1482
+
1483
+ if (template.type === 'gantt') {
1484
+ return fn.getGanttCell(row, template, column);
1485
+ }
1486
+
1487
+ return template;
1488
+ }
1489
+
1490
+ getContent(row, column, value) {
1491
+ let {
1492
+ focused,
1493
+ fn
1494
+ } = this.context;
1495
+ let {
1496
+ inlineEdit
1497
+ } = this.props;
1498
+ let template = this.getContentByTemplate(row, column, value);
1499
+ var content = '';
1500
+
1501
+ if (inlineEdit && focused) {
1502
+ content = this.getInput(row, column);
1503
+ } else {
1504
+ content = template;
1505
+ }
1506
+
1507
+ if (column.subText) {
1508
+ let subText;
1509
+
1510
+ try {
1511
+ subText = fn.getValueByField(row, column, column.subText);
1512
+ } catch {
1513
+ subText = '';
1514
+ }
1515
+
1516
+ return /*#__PURE__*/_react.default.createElement("div", {
1517
+ className: "aio-table-cell-has-subtext"
1518
+ }, /*#__PURE__*/_react.default.createElement("div", {
1519
+ style: {
1520
+ flex: 1
1521
+ }
1522
+ }), /*#__PURE__*/_react.default.createElement("div", {
1523
+ className: "aio-table-cell-uptext"
1524
+ }, content), /*#__PURE__*/_react.default.createElement("div", {
1525
+ className: "aio-table-cell-subtext"
1526
+ }, subText), /*#__PURE__*/_react.default.createElement("div", {
1527
+ style: {
1528
+ flex: 1
1529
+ }
1530
+ }));
1531
+ }
1532
+
1533
+ return content;
1534
+ }
1535
+
1536
+ async changeCell(value) {
1537
+ let {
1538
+ row,
1539
+ column,
1540
+ inlineEdit
1541
+ } = this.props;
1542
+ let {
1543
+ fn
1544
+ } = this.context;
1545
+ let res;
1546
+ this.setState({
1547
+ loading: true
1548
+ });
1549
+
1550
+ if (inlineEdit.onChange) {
1551
+ res = await inlineEdit.onChange(row, value);
1552
+ } else if (typeof column.getValue === 'string') {
1553
+ res = await this.context.onChange(fn.setCellValue(row, column.getValue, value));
1554
+ }
1555
+
1556
+ this.setState({
1557
+ loading: false
1558
+ });
1559
+ return res;
1560
+ }
1561
+
1562
+ getInput(row, column) {
1563
+ let {
1564
+ fn
1565
+ } = this.context;
1566
+ let {
1567
+ attrs,
1568
+ inlineEdit
1569
+ } = this.props;
1570
+ let {
1571
+ type,
1572
+ getValue,
1573
+ disabled = () => false,
1574
+ options
1575
+ } = inlineEdit;
1576
+ let {
1577
+ value
1578
+ } = this.state;
1579
+
1580
+ if (getValue) {
1581
+ value = fn.getValueByField(row, column, getValue);
1582
+ }
1583
+
1584
+ if (disabled(row)) {
1585
+ if (typeof value === 'boolean') {
1586
+ return JSON.stringify(value);
1587
+ }
1588
+
1589
+ return value;
1590
+ }
1591
+
1592
+ let props = { ...inlineEdit,
1593
+ className: 'aio-table-input',
1594
+ 'data-row-index': attrs['data-row-index'],
1595
+ 'data-col-index': attrs['data-col-index'],
1596
+ value: value === null || value === undefined ? '' : value
1597
+ };
1598
+
1599
+ if (type === 'text' || type === 'number') {
1600
+ return /*#__PURE__*/_react.default.createElement("div", {
1601
+ className: 'aio-table-input-container'
1602
+ }, /*#__PURE__*/_react.default.createElement("input", _extends({}, props, {
1603
+ style: {
1604
+ textAlign: column.justify || type === 'number' ? 'center' : undefined
1605
+ },
1606
+ onChange: e => this.setState({
1607
+ value: e.target.value
1608
+ }),
1609
+ onBlur: async e => {
1610
+ let {
1611
+ value
1612
+ } = this.state;
1613
+
1614
+ if (value === this.props.value) {
1615
+ return;
1616
+ }
1617
+
1618
+ let newValue = value;
1619
+
1620
+ if (type === 'number') {
1621
+ newValue = parseFloat(newValue);
1622
+
1623
+ if (isNaN(newValue)) {
1624
+ newValue = 0;
1625
+ }
1626
+ }
1627
+
1628
+ let res = await this.changeCell(newValue);
1629
+
1630
+ if (typeof res === 'string') {
1631
+ this.setState({
1632
+ error: res
1633
+ });
1634
+ } else {
1635
+ this.setState({
1636
+ value: this.props.value
1637
+ });
1638
+ }
1639
+ }
1640
+ })), /*#__PURE__*/_react.default.createElement("div", {
1641
+ className: "aio-table-input-border"
1642
+ }));
1643
+ }
1644
+
1645
+ if (type === 'select') {
1646
+ if (!options) {
1647
+ console.error('aio table => missing options property of column inlineEdit with type="select"');
1648
+ return '';
1649
+ }
1650
+
1651
+ if (!Array.isArray(options)) {
1652
+ 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!!!');
1653
+ return '';
1654
+ }
1655
+
1656
+ return /*#__PURE__*/_react.default.createElement("div", {
1657
+ className: "aio-table-input-container"
1658
+ }, /*#__PURE__*/_react.default.createElement("select", _extends({}, props, {
1659
+ onFocus: () => this.focus = true,
1660
+ onBlur: () => this.focus = false,
1661
+ onChange: async e => {
1662
+ let value = e.target.value;
1663
+
1664
+ if (value === 'true') {
1665
+ value = true;
1666
+ }
1667
+
1668
+ if (value === 'false') {
1669
+ value = false;
1670
+ }
1671
+
1672
+ this.setState({
1673
+ value
1674
+ });
1675
+ let res = await this.changeCell(value);
1676
+
1677
+ if (typeof res === 'string') {
1678
+ this.setState({
1679
+ error: res
1680
+ });
1681
+ } else if (res === false) {
1682
+ this.setState({
1683
+ value: this.props.value
1684
+ });
1685
+ }
1686
+ }
1687
+ }), options.map((o, i) => /*#__PURE__*/_react.default.createElement("option", {
1688
+ key: i,
1689
+ value: o.value
1690
+ }, o.text))), /*#__PURE__*/_react.default.createElement("div", {
1691
+ className: "aio-table-input-border"
1692
+ }));
1693
+ }
1694
+
1695
+ if (type === 'checkbox') {
1696
+ return /*#__PURE__*/_react.default.createElement("div", {
1697
+ className: 'aio-table-input-container',
1698
+ tabIndex: 0,
1699
+ onKeyDown: async e => {
1700
+ if (e.keyCode === 13) {
1701
+ value = value === true ? true : false;
1702
+ await this.changeCell(!value);
1703
+ }
1704
+ }
1705
+ }, /*#__PURE__*/_react.default.createElement("input", _extends({}, props, {
1706
+ onFocus: () => this.focus = true,
1707
+ onBlur: () => this.focus = false,
1708
+ checked: value === true ? true : false,
1709
+ onChange: async e => {
1710
+ let value = e.target.checked;
1711
+ this.setState({
1712
+ loading: true
1713
+ });
1714
+ await this.changeCell(value);
1715
+ this.setState({
1716
+ loading: false
1717
+ });
1718
+ }
1719
+ })), /*#__PURE__*/_react.default.createElement("div", {
1720
+ className: "aio-table-input-border"
1721
+ }));
1722
+ }
1723
+
1724
+ console.error('aio table => missing type property of column input');
1725
+ return '';
1726
+ }
1727
+
1728
+ componentDidUpdate() {
1729
+ let {
1730
+ inlineEdit
1731
+ } = this.props;
1732
+
1733
+ if (inlineEdit && this.focus) {
1734
+ if (inlineEdit.type === 'select' || inlineEdit.type === 'checkbox') {
1735
+ (0, _jquery.default)(this.dom.current).find('.aio-table-input').focus();
1736
+ }
1737
+ }
1738
+ }
1739
+
1740
+ getProps(row, column, content) {
1741
+ let attrs = this.context.getCellAttrs(row, column);
1742
+ let title = typeof content === 'string' ? content : undefined;
1743
+ return {
1744
+ ref: this.dom,
1745
+ title,
1746
+ ...attrs,
1747
+ style: this.getStyle(column, row),
1748
+ className: this.getClassName(row, column)
1749
+ };
1750
+ }
1751
+
1752
+ render() {
1753
+ let {
1754
+ indent,
1755
+ fn
1756
+ } = this.context;
1757
+ let {
1758
+ row,
1759
+ column,
1760
+ value,
1761
+ before,
1762
+ after,
1763
+ justify,
1764
+ attrs
1765
+ } = this.props;
1766
+
1767
+ if (this.state.prevValue !== value) {
1768
+ setTimeout(() => this.setState({
1769
+ value,
1770
+ prevValue: value
1771
+ }), 0);
1772
+ }
1773
+
1774
+ let {
1775
+ error,
1776
+ loading
1777
+ } = this.state;
1778
+ let content = this.getContent(row, column, value);
1779
+
1780
+ if (column.affix) {
1781
+ content = content + ' ' + column.affix;
1782
+ }
1783
+
1784
+ let cell;
1785
+
1786
+ if (loading) {
1787
+ return fn.cubes2();
1788
+ }
1789
+
1790
+ if (error) {
1791
+ cell = /*#__PURE__*/_react.default.createElement("div", {
1792
+ className: "aio-table-error",
1793
+ onClick: () => {
1794
+ this.setState({
1795
+ value: this.props.value,
1796
+ error: false
1797
+ });
1798
+ }
1799
+ }, error);
1800
+ } else {
1801
+ cell = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, column.treeMode && /*#__PURE__*/_react.default.createElement("div", {
1802
+ style: {
1803
+ width: row._level * indent,
1804
+ flexShrink: 0
1805
+ }
1806
+ }), column.treeMode && this.getToggleIcon(row), before !== undefined && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
1807
+ className: "aio-table-icon"
1808
+ }, before), /*#__PURE__*/_react.default.createElement("div", {
1809
+ className: "aio-table-cell-gap"
1810
+ })), content !== undefined && /*#__PURE__*/_react.default.createElement("div", {
1811
+ className: "aio-table-cell-content",
1812
+ style: {
1813
+ justifyContent: justify ? 'center' : undefined
1814
+ }
1815
+ }, content), after !== undefined && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
1816
+ style: {
1817
+ flex: 1
1818
+ }
1819
+ }), /*#__PURE__*/_react.default.createElement("div", {
1820
+ className: "aio-table-icon"
1821
+ }, after)));
1822
+ }
1823
+
1824
+ return /*#__PURE__*/_react.default.createElement("div", _extends({}, attrs, this.getProps(row, column, content)), cell);
1825
+ }
1826
+
1827
+ }
1828
+
1829
+ _defineProperty(AIOTableCell, "contextType", AioTableContext);
1830
+
1831
+ class AIOTableFilter extends _react.Component {
1832
+ constructor(...args) {
1833
+ super(...args);
1834
+
1835
+ _defineProperty(this, "dom", /*#__PURE__*/(0, _react.createRef)());
1836
+ }
1837
+
1838
+ async change(obj) {
1839
+ let {
1840
+ SetState,
1841
+ columns
1842
+ } = this.context;
1843
+ let {
1844
+ column
1845
+ } = this.props;
1846
+ column = { ...column,
1847
+ filter: { ...column.filter,
1848
+ ...obj
1849
+ }
1850
+ };
1851
+ let approve = true;
1852
+
1853
+ if (column.filter.onChange) {
1854
+ let loading = (0, _jquery.default)(this.dom.current).parents('.aio-table').find('.aio-table-main-loading');
1855
+ loading.css({
1856
+ display: 'flex'
1857
+ });
1858
+ approve = await newFilter.onChange(column.filter);
1859
+ loading.css({
1860
+ display: 'none'
1861
+ });
1862
+ }
1863
+
1864
+ if (approve !== false) {
1865
+ SetState({
1866
+ columns: columns.map(o => o.realIndex === column.realIndex ? column : o)
1867
+ });
1868
+ }
1869
+ }
1870
+
1871
+ render() {
1872
+ var {
1873
+ rtl,
1874
+ translate
1875
+ } = this.context;
1876
+ var {
1877
+ column
1878
+ } = this.props;
1879
+
1880
+ if (!column.filter || column.search) {
1881
+ return null;
1882
+ }
1883
+
1884
+ let {
1885
+ items = [],
1886
+ booleanType = 'or',
1887
+ type = 'text'
1888
+ } = column.filter;
1889
+ let icon = items.length ? aioTableGetSvg('filterActive', {
1890
+ className: 'has-filter'
1891
+ }) : aioTableGetSvg('filter');
1892
+ return /*#__PURE__*/_react.default.createElement("div", {
1893
+ className: "aio-table-filter-icon",
1894
+ ref: this.dom,
1895
+ onClick: () => {
1896
+ (0, _jquery.default)('.aio-table-title').css({
1897
+ zIndex: 100
1898
+ });
1899
+ (0, _jquery.default)(`[data-uniq-id = ${this.props.dataUniqId}]`).css({
1900
+ zIndex: 1000
1901
+ });
1902
+ }
1903
+ }, /*#__PURE__*/_react.default.createElement(_aioButton.default, {
1904
+ type: "button",
1905
+ rtl: rtl,
1906
+ caret: false,
1907
+ openRelatedTo: ".aio-table",
1908
+ text: icon,
1909
+ popOver: () => {
1910
+ return /*#__PURE__*/_react.default.createElement(AIOTableFilterPopup, {
1911
+ translate,
1912
+ type,
1913
+ items,
1914
+ booleanType,
1915
+ onChange: obj => this.change(obj)
1916
+ });
1917
+ }
1918
+ }));
1919
+ }
1920
+
1921
+ }
1922
+
1923
+ _defineProperty(AIOTableFilter, "contextType", AioTableContext);
1924
+
1925
+ class AIOTableFilterPopup extends _react.Component {
1926
+ render() {
1927
+ var {
1928
+ type,
1929
+ items,
1930
+ booleanType,
1931
+ onChange,
1932
+ translate = str => str
1933
+ } = this.props;
1934
+ var filterItems = items.map((item, i) => {
1935
+ return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
1936
+ key: i
1937
+ }, /*#__PURE__*/_react.default.createElement(AIOTableFilterItem, {
1938
+ item: item,
1939
+ type: type,
1940
+ onChange: (key, value) => onChange({
1941
+ items: items.map((o, index) => {
1942
+ if (i === index) {
1943
+ return { ...o,
1944
+ [key]: value
1945
+ };
1946
+ }
1947
+
1948
+ return o;
1949
+ })
1950
+ }),
1951
+ onRemove: () => onChange({
1952
+ items: items.filter((o, index) => index !== i)
1953
+ }),
1954
+ translate: translate
1955
+ }), i < items.length - 1 && /*#__PURE__*/_react.default.createElement("div", {
1956
+ className: "aio-table-boolean",
1957
+ onClick: () => onChange({
1958
+ booleanType: booleanType === 'or' ? 'and' : 'or'
1959
+ })
1960
+ }, translate(booleanType)));
1961
+ });
1962
+ return /*#__PURE__*/_react.default.createElement("div", {
1963
+ className: "aio-table-filter-popup",
1964
+ style: {
1965
+ minWidth: 250
1966
+ }
1967
+ }, filterItems, /*#__PURE__*/_react.default.createElement("div", {
1968
+ className: "aio-table-filter-footer"
1969
+ }, /*#__PURE__*/_react.default.createElement("button", {
1970
+ className: "aio-table-filter-add",
1971
+ onClick: () => onChange({
1972
+ items: items.concat({
1973
+ operator: 'contain',
1974
+ value: '',
1975
+ type
1976
+ })
1977
+ })
1978
+ }, translate('Add'))));
1979
+ }
1980
+
1981
+ }
1982
+
1983
+ exports.AIOTableFilterPopup = AIOTableFilterPopup;
1984
+
1985
+ class AIOTableFilterItem extends _react.Component {
1986
+ constructor(props) {
1987
+ super(props);
1988
+ var {
1989
+ item
1990
+ } = this.props;
1991
+ this.state = {
1992
+ value: item.value,
1993
+ prevValue: item.value
1994
+ };
1995
+ }
1996
+
1997
+ changeValue(value) {
1998
+ clearTimeout(this.timeout);
1999
+ this.setState({
2000
+ value
2001
+ });
2002
+ this.timeout = setTimeout(() => {
2003
+ var {
2004
+ onChange
2005
+ } = this.props;
2006
+ onChange('value', value);
2007
+ }, 1000);
2008
+ }
2009
+
2010
+ getOptions(type, translate) {
2011
+ let options = [];
2012
+
2013
+ if (type !== 'number' && type !== 'date') {
2014
+ options.push( /*#__PURE__*/_react.default.createElement("option", {
2015
+ key: "contain",
2016
+ value: "contain"
2017
+ }, translate('Contain')));
2018
+ options.push( /*#__PURE__*/_react.default.createElement("option", {
2019
+ key: "notContain",
2020
+ value: "notContain"
2021
+ }, translate('Not Contain')));
2022
+ }
2023
+
2024
+ options.push( /*#__PURE__*/_react.default.createElement("option", {
2025
+ key: "equal",
2026
+ value: "equal"
2027
+ }, translate('Equal')));
2028
+ options.push( /*#__PURE__*/_react.default.createElement("option", {
2029
+ key: "notEqual",
2030
+ value: "notEqual"
2031
+ }, translate('Not Equal')));
2032
+
2033
+ if (type !== 'text') {
2034
+ options.push( /*#__PURE__*/_react.default.createElement("option", {
2035
+ key: "greater",
2036
+ value: "greater"
2037
+ }, translate('Greater')));
2038
+ options.push( /*#__PURE__*/_react.default.createElement("option", {
2039
+ key: "less",
2040
+ value: "less"
2041
+ }, translate('Less')));
2042
+ }
2043
+
2044
+ return options;
2045
+ }
2046
+
2047
+ render() {
2048
+ var {
2049
+ item,
2050
+ type,
2051
+ onChange,
2052
+ onRemove,
2053
+ translate
2054
+ } = this.props;
2055
+
2056
+ if (this.state.prevValue !== item.value) {
2057
+ setTimeout(() => this.setState({
2058
+ value: item.value,
2059
+ prevValue: item.value
2060
+ }), 0);
2061
+ }
2062
+
2063
+ var {
2064
+ value
2065
+ } = this.state;
2066
+ return /*#__PURE__*/_react.default.createElement("div", {
2067
+ className: "aio-table-filter-item"
2068
+ }, /*#__PURE__*/_react.default.createElement("select", {
2069
+ value: item.operator,
2070
+ onChange: e => onChange('operator', e.target.value)
2071
+ }, this.getOptions(type, translate)), /*#__PURE__*/_react.default.createElement("div", {
2072
+ style: {
2073
+ width: '6px'
2074
+ }
2075
+ }), /*#__PURE__*/_react.default.createElement("input", {
2076
+ type: type === 'date' ? 'text' : type,
2077
+ value: value,
2078
+ onChange: e => this.changeValue(e.target.value)
2079
+ }), /*#__PURE__*/_react.default.createElement("div", {
2080
+ style: {
2081
+ width: '6px'
2082
+ }
2083
+ }), /*#__PURE__*/_react.default.createElement("div", {
2084
+ className: "aio-table-filter-remove",
2085
+ onClick: () => onRemove()
2086
+ }, aioTableGetSvg('close')));
2087
+ }
2088
+
2089
+ }
2090
+
2091
+ function ATFN({
2092
+ getProps,
2093
+ getState,
2094
+ setState,
2095
+ getContext
2096
+ }) {
2097
+ let $$ = {
2098
+ fixPersianAndArabicNumbers(str) {
2099
+ var persianNumbers = [/۰/g, /۱/g, /۲/g, /۳/g, /۴/g, /۵/g, /۶/g, /۷/g, /۸/g, /۹/g],
2100
+ arabicNumbers = [/٠/g, /١/g, /٢/g, /٣/g, /٤/g, /٥/g, /٦/g, /٧/g, /٨/g, /٩/g];
2101
+
2102
+ if (typeof str === 'string') {
2103
+ for (var i = 0; i < 10; i++) {
2104
+ str = str.replace(persianNumbers[i], i).replace(arabicNumbers[i], i);
2105
+ }
2106
+ }
2107
+
2108
+ return str;
2109
+ },
2110
+
2111
+ getJSON(columns, rows) {
2112
+ let result = [];
2113
+
2114
+ for (let i = 0; i < rows.length; i++) {
2115
+ if (!rows[i].row) {
2116
+ continue;
2117
+ }
2118
+
2119
+ let row = rows[i].row;
2120
+ let obj = {};
2121
+
2122
+ for (let j = 0; j < columns.length; j++) {
2123
+ let {
2124
+ title,
2125
+ realIndex
2126
+ } = columns[j];
2127
+ let res = row._values[realIndex];
2128
+ obj[title] = res !== undefined ? $$.fixPersianAndArabicNumbers(res) : "";
2129
+ }
2130
+
2131
+ result.push(obj);
2132
+ }
2133
+
2134
+ return result;
2135
+ },
2136
+
2137
+ exportToExcel(columns, rows) {
2138
+ let {
2139
+ translate
2140
+ } = getProps();
2141
+ let name = window.prompt(translate('Inter Excel File Name')); // if (name === false || name === undefined || name === null) { return; }
2142
+
2143
+ if (!name || name === null || !name.length) return;
2144
+ var data = $$.getJSON(columns, rows);
2145
+ var arrData = typeof data != "object" ? JSON.parse(data) : data;
2146
+ var CSV = ""; // CSV += 'title';
2147
+
2148
+ CSV += '\r\n\n';
2149
+
2150
+ if (true) {
2151
+ let row = "";
2152
+
2153
+ for (let index in arrData[0]) {
2154
+ row += index + ",";
2155
+ }
2156
+
2157
+ row = row.slice(0, -1);
2158
+ CSV += row + "\r\n";
2159
+ }
2160
+
2161
+ for (var i = 0; i < arrData.length; i++) {
2162
+ let row = "";
2163
+
2164
+ for (let index in arrData[i]) {
2165
+ row += '"' + arrData[i][index] + '",';
2166
+ }
2167
+
2168
+ row.slice(0, row.length - 1);
2169
+ CSV += row + "\r\n";
2170
+ }
2171
+
2172
+ if (CSV === "") {
2173
+ alert("Invalid data");
2174
+ return;
2175
+ }
2176
+
2177
+ var fileName = name.replace(/ /g, "_");
2178
+ var universalBOM = "\uFEFF";
2179
+ var uri = "data:text/csv;charset=utf-8," + encodeURIComponent(universalBOM + CSV);
2180
+ var link = document.createElement("a");
2181
+ link.href = uri;
2182
+ link.style = "visibility:hidden";
2183
+ link.download = fileName + ".csv";
2184
+ document.body.appendChild(link);
2185
+ link.click();
2186
+ document.body.removeChild(link);
2187
+ },
2188
+
2189
+ getSliderCell(template, val) {
2190
+ let {
2191
+ colors = ['#eee', 'dodgerblue'],
2192
+ start = 0,
2193
+ end = 100,
2194
+ value = val,
2195
+ editValue = value => value
2196
+ } = template;
2197
+ let {
2198
+ rowHeight,
2199
+ rtl
2200
+ } = getProps();
2201
+ let [clr1 = '#eee', clr2 = 'dodgerblue'] = colors;
2202
+ let points = Array.isArray(value) ? value : [value];
2203
+
2204
+ if (points.length > 2) {
2205
+ points = [points[0], points[1]];
2206
+ }
2207
+
2208
+ return /*#__PURE__*/_react.default.createElement("div", {
2209
+ className: "aio-table-slider"
2210
+ }, points.length === 2 && /*#__PURE__*/_react.default.createElement("div", {
2211
+ style: {
2212
+ display: 'flex',
2213
+ alignItems: 'center',
2214
+ padding: '0 3px'
2215
+ }
2216
+ }, editValue(points[0])), /*#__PURE__*/_react.default.createElement(_rRangeSlider.default, {
2217
+ style: {
2218
+ height: rowHeight
2219
+ },
2220
+ direction: rtl ? 'left' : 'right',
2221
+ start: start,
2222
+ end: end,
2223
+ step: 0.1,
2224
+ pointStyle: () => {
2225
+ return {
2226
+ display: 'none'
2227
+ };
2228
+ },
2229
+ lineStyle: () => {
2230
+ return {
2231
+ height: 5,
2232
+ borderRadius: 6,
2233
+ background: clr1
2234
+ };
2235
+ },
2236
+ fillStyle: (index, obj) => {
2237
+ if (index === (points.length === 2 ? 1 : 0)) {
2238
+ return {
2239
+ height: 5,
2240
+ background: clr2,
2241
+ borderRadius: 6
2242
+ };
2243
+ }
2244
+ },
2245
+ points: points
2246
+ }), /*#__PURE__*/_react.default.createElement("div", {
2247
+ style: {
2248
+ display: 'flex',
2249
+ alignItems: 'center',
2250
+ padding: '0 3px'
2251
+ }
2252
+ }, editValue(points[points.length - 1])));
2253
+ },
2254
+
2255
+ getOptionsCell({
2256
+ options
2257
+ }, row) {
2258
+ return /*#__PURE__*/_react.default.createElement(_aioButton.default, {
2259
+ type: "select",
2260
+ caret: false,
2261
+ className: "aio-table-options",
2262
+ text: aioTableGetSvg('dots'),
2263
+ options: options.map(({
2264
+ text,
2265
+ icon,
2266
+ onClick
2267
+ }) => {
2268
+ return {
2269
+ text,
2270
+ before: icon,
2271
+ onClick: () => onClick(row)
2272
+ };
2273
+ })
2274
+ });
2275
+ },
2276
+
2277
+ getCheckboxCell(template, value, row) {
2278
+ let {
2279
+ color,
2280
+ onChange,
2281
+ size = 24
2282
+ } = template;
2283
+ let style = {
2284
+ width: size,
2285
+ height: size
2286
+ };
2287
+
2288
+ if (!!value) {
2289
+ return /*#__PURE__*/_react.default.createElement("svg", {
2290
+ style: style,
2291
+ viewBox: `0,0,24,24`,
2292
+ className: "aio-table-checkbox checked",
2293
+ onClick: () => onChange(row, false)
2294
+ }, /*#__PURE__*/_react.default.createElement("path", {
2295
+ fill: color,
2296
+ 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"
2297
+ }));
2298
+ } else {
2299
+ return /*#__PURE__*/_react.default.createElement("svg", {
2300
+ style: style,
2301
+ viewBox: `0,0,24,24`,
2302
+ className: "aio-table-checkbox",
2303
+ onClick: () => onChange(row, true)
2304
+ }, /*#__PURE__*/_react.default.createElement("path", {
2305
+ fill: color,
2306
+ "ng-attr-fill": "{{icon.color}}",
2307
+ "ng-attr-d": "{{icon.data}}",
2308
+ 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"
2309
+ }));
2310
+ }
2311
+ },
2312
+
2313
+ getGanttCell(row, template, column) {
2314
+ let {
2315
+ rtl
2316
+ } = getProps();
2317
+ let {
2318
+ getKeys,
2319
+ getColor = () => '#fff',
2320
+ getBackgroundColor = () => '#69bedb',
2321
+ getFlags = () => [],
2322
+ getProgress = () => false,
2323
+ getText = () => false,
2324
+ getStart,
2325
+ getEnd,
2326
+ padding = 36
2327
+ } = template;
2328
+ let keys = getKeys();
2329
+
2330
+ if (!Array.isArray(keys)) {
2331
+ console.error('aio table => gantt column => column getKeys property must return an array of strings');
2332
+ return '';
2333
+ }
2334
+
2335
+ let color = $$.getValueByField(row, column, getColor);
2336
+ let backgroundColor = $$.getValueByField(row, column, getBackgroundColor);
2337
+ let progress = $$.getValueByField(row, column, getProgress);
2338
+ let text = $$.getValueByField(row, column, getText);
2339
+ let startIndex = keys.indexOf($$.getValueByField(row, column, getStart));
2340
+ let endIndex = keys.indexOf($$.getValueByField(row, column, getEnd));
2341
+ 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%)`;
2342
+ let flags = getFlags();
2343
+ return /*#__PURE__*/_react.default.createElement(_rRangeSlider.default, {
2344
+ attrs: {
2345
+ style: {
2346
+ padding: `0 ${+padding}px`
2347
+ }
2348
+ },
2349
+ start: 0,
2350
+ editValue: value => keys[value],
2351
+ end: keys.length - 1,
2352
+ points: [startIndex, endIndex],
2353
+ fillStyle: index => {
2354
+ if (index === 1) {
2355
+ return {
2356
+ background: backgroundColor,
2357
+ backgroundImage: background
2358
+ };
2359
+ }
2360
+ },
2361
+ getText: index => {
2362
+ if (index === 1 && text) {
2363
+ return text;
2364
+ }
2365
+ },
2366
+ textStyle: () => {
2367
+ return {
2368
+ color
2369
+ };
2370
+ },
2371
+ scaleStep: 1,
2372
+ scaleStyle: value => {
2373
+ let flag = flags.filter(o => keys.indexOf(o.value) === value)[0];
2374
+
2375
+ if (flag) {
2376
+ return {
2377
+ background: flag.color,
2378
+ height: '100%',
2379
+ top: 0,
2380
+ zIndex: 100
2381
+ };
2382
+ }
2383
+
2384
+ return {
2385
+ height: '100%',
2386
+ top: 0,
2387
+ opacity: .4
2388
+ };
2389
+ },
2390
+ lineStyle: () => {
2391
+ return {
2392
+ opacity: .4
2393
+ };
2394
+ }
2395
+ });
2396
+ },
2397
+
2398
+ handleOutsideClick() {
2399
+ (0, _jquery.default)(window).unbind('click', $$.outSideClick);
2400
+ (0, _jquery.default)(window).bind('click', $$.outSideClick);
2401
+ },
2402
+
2403
+ outSideClick(e) {
2404
+ let {
2405
+ focused
2406
+ } = getState();
2407
+
2408
+ if (focused === false) {
2409
+ return;
2410
+ }
2411
+
2412
+ let target = (0, _jquery.default)(e.target);
2413
+
2414
+ if (target.hasClass('aio-table-cell')) {
2415
+ return;
2416
+ }
2417
+
2418
+ if (target.parents('.aio-table-input-container').length) {
2419
+ return;
2420
+ }
2421
+
2422
+ if (target.parents('.aio-table-cell-content').length) {
2423
+ return;
2424
+ }
2425
+
2426
+ if (target.parents('.aio-table-cell').length) {
2427
+ return;
2428
+ }
2429
+
2430
+ (0, _jquery.default)(window).unbind('click', $$.outSideClick);
2431
+ setState({
2432
+ focused: false
2433
+ }, 'outsideClick');
2434
+ },
2435
+
2436
+ getCardRowCount() {
2437
+ var {
2438
+ cardRowCount = 1
2439
+ } = getProps();
2440
+
2441
+ if (typeof cardRowCount !== 'object') {
2442
+ return cardRowCount;
2443
+ }
2444
+
2445
+ let result,
2446
+ matched = false;
2447
+
2448
+ for (let prop in cardRowCount) {
2449
+ let count = cardRowCount[prop];
2450
+ let a = window.matchMedia(`(max-width: ${prop}px)`);
2451
+
2452
+ if (a.matches && !matched) {
2453
+ matched = true;
2454
+ result = count;
2455
+ }
2456
+
2457
+ a.addListener(() => setState({
2458
+ cardRowCount: count
2459
+ }));
2460
+ }
2461
+
2462
+ return result;
2463
+ },
2464
+
2465
+ async onScroll(dom, index) {
2466
+ let {
2467
+ onScrollEnd
2468
+ } = getProps();
2469
+
2470
+ if (onScrollEnd) {
2471
+ if (index === undefined || index === 0) {
2472
+ let table = (0, _jquery.default)(dom.current).find('.aio-table-unit');
2473
+ let scrollTop = table.scrollTop();
2474
+ let scrollHeight = table[0].scrollHeight;
2475
+ let height = table.height();
2476
+
2477
+ if (scrollTop + height === scrollHeight) {
2478
+ let {
2479
+ startIndex
2480
+ } = getState();
2481
+ let {
2482
+ scrollLoadLength,
2483
+ scrollTotalLength
2484
+ } = getProps();
2485
+ let from = startIndex + scrollLoadLength;
2486
+
2487
+ if (from > scrollTotalLength) {
2488
+ return;
2489
+ }
2490
+
2491
+ let to = from + scrollLoadLength;
2492
+
2493
+ if (to > scrollTotalLength) {
2494
+ to = scrollTotalLength;
2495
+ }
2496
+
2497
+ let a = (0, _jquery.default)(dom.current).find('.aio-table-main-loading');
2498
+ a.css({
2499
+ display: 'flex'
2500
+ });
2501
+ let res = await onScrollEnd(from, to);
2502
+ a.css({
2503
+ display: 'none'
2504
+ });
2505
+
2506
+ if (res !== false) {
2507
+ setState({
2508
+ startIndex: from
2509
+ });
2510
+ }
2511
+ }
2512
+ }
2513
+ }
2514
+
2515
+ if (index === undefined) {
2516
+ return;
2517
+ }
2518
+
2519
+ if (!$$['scroll' + index]) {
2520
+ let otherIndex = Number(!index);
2521
+ $$['scroll' + otherIndex] = true;
2522
+ let c = (0, _jquery.default)(dom.current);
2523
+ var units = [c.find('#aio-table-first-split'), c.find('#aio-table-second-split')];
2524
+ var scrollTop = units[index].scrollTop();
2525
+ units[otherIndex].scrollTop(scrollTop);
2526
+ }
2527
+
2528
+ $$['scroll' + index] = false;
2529
+ },
2530
+
2531
+ getOpenDictionary() {
2532
+ let {
2533
+ id
2534
+ } = getProps();
2535
+
2536
+ if (id === undefined) {
2537
+ return {};
2538
+ }
2539
+
2540
+ let openDictionary = localStorage.getItem('aio table ' + id);
2541
+
2542
+ if (openDictionary === null || openDictionary === undefined) {
2543
+ localStorage.setItem('aio table ' + id, '{}');
2544
+ return {};
2545
+ } else {
2546
+ return JSON.parse(openDictionary);
2547
+ }
2548
+ },
2549
+
2550
+ getDateNumber(value) {
2551
+ let splitter;
2552
+
2553
+ for (let i = 0; i < value.length; i++) {
2554
+ if (isNaN(parseInt(value[i]))) {
2555
+ splitter = value[i];
2556
+ break;
2557
+ }
2558
+ }
2559
+
2560
+ let [year, month = '01', day = '01'] = value.split(splitter);
2561
+ let list = [year, month, day];
2562
+ return parseInt(list.map(o => o.length === 1 ? '0' + o : o).join(''));
2563
+ },
2564
+
2565
+ setCellValue: (row, getValue, value) => {
2566
+ //row is used in eval
2567
+ let {
2568
+ model
2569
+ } = getProps();
2570
+ let evalText;
2571
+
2572
+ if (typeof value === 'string') {
2573
+ evalText = `${getValue} = "${value}"`;
2574
+ } else {
2575
+ evalText = getValue + ' = ' + JSON.stringify(value);
2576
+ }
2577
+
2578
+ eval(evalText);
2579
+ return model;
2580
+ },
2581
+ getValueByField: (row, column, getValue) => {
2582
+ let props = getProps();
2583
+ let type = typeof getValue;
2584
+
2585
+ try {
2586
+ if (type === 'function') {
2587
+ return getValue(row, column);
2588
+ }
2589
+
2590
+ if (type === 'string') {
2591
+ if (getValue.indexOf('.') !== -1 && getValue.indexOf('row') !== -1 || getValue.indexOf('column') !== -1 || getValue.indexOf('props') !== -1) {
2592
+ let result;
2593
+ eval('result = ' + getValue);
2594
+ return result;
2595
+ }
2596
+
2597
+ return getValue;
2598
+ }
2599
+
2600
+ return getValue;
2601
+ } catch {
2602
+ return;
2603
+ }
2604
+ },
2605
+
2606
+ async onChangeSort(obj, colIndex) {
2607
+ let {
2608
+ columns
2609
+ } = getState();
2610
+ columns = [...columns];
2611
+ let column = { ...columns[colIndex]
2612
+ };
2613
+ column.sort = { ...column.sort,
2614
+ ...obj
2615
+ };
2616
+
2617
+ if (!column.sort.onChange && column.storageKey) {
2618
+ column = $$.updateStorageByColumn(column, {
2619
+ sort: column.sort
2620
+ });
2621
+ }
2622
+
2623
+ let newColumns = columns.map((o, i) => i === colIndex ? column : o);
2624
+ let approve = true;
2625
+
2626
+ if (column.sort.onChange) {
2627
+ let {
2628
+ active = true,
2629
+ dir = 'inc'
2630
+ } = column.sort;
2631
+ approve = await column.sort.onChange({
2632
+ active,
2633
+ dir
2634
+ });
2635
+ }
2636
+
2637
+ if (approve !== false) {
2638
+ setState({
2639
+ columns: newColumns
2640
+ });
2641
+ }
2642
+ },
2643
+
2644
+ getSorts({
2645
+ column,
2646
+ sorts,
2647
+ sortOptions,
2648
+ columnTitle,
2649
+ colIndex
2650
+ }) {
2651
+ let {
2652
+ sort
2653
+ } = column;
2654
+ let {
2655
+ title = columnTitle || '',
2656
+ getValue = column.getValue,
2657
+ type,
2658
+ active = true,
2659
+ toggle = true,
2660
+ dir = 'inc',
2661
+ onChange
2662
+ } = sort;
2663
+
2664
+ if (type === 'date') {
2665
+ getValue = row => {
2666
+ let {
2667
+ sort
2668
+ } = column;
2669
+ let {
2670
+ getValue = column.getValue
2671
+ } = sort;
2672
+ let value = $$.getValueByField(row, column, getValue);
2673
+
2674
+ if (typeof value !== 'string') {
2675
+ return 0;
2676
+ }
2677
+
2678
+ return $$.getDateNumber(value);
2679
+ };
2680
+ }
2681
+
2682
+ sorts.push({
2683
+ title,
2684
+ dir,
2685
+ active,
2686
+ toggle,
2687
+ getValue,
2688
+ type,
2689
+ onChange
2690
+ });
2691
+
2692
+ if (toggle) {
2693
+ sortOptions.push({
2694
+ text: title,
2695
+ checked: !!active,
2696
+ onClick: () => $$.onChangeSort({
2697
+ active: !active
2698
+ }, colIndex),
2699
+ after: /*#__PURE__*/_react.default.createElement("div", {
2700
+ style: {
2701
+ width: '30px',
2702
+ display: 'flex',
2703
+ justifyContent: 'flex-end'
2704
+ }
2705
+ }, aioTableGetSvg(dir === 'dec' ? 'arrowDown' : 'arrowUp', {
2706
+ onClick: e => {
2707
+ e.stopPropagation();
2708
+ $$.onChangeSort({
2709
+ dir: dir === 'dec' ? 'inc' : 'dec'
2710
+ }, colIndex);
2711
+ }
2712
+ }))
2713
+ });
2714
+ }
2715
+ },
2716
+
2717
+ getToggles(obj) {
2718
+ let {
2719
+ column,
2720
+ toggleOptions,
2721
+ colIndex,
2722
+ columnTitle
2723
+ } = obj;
2724
+ let {
2725
+ columns
2726
+ } = getState();
2727
+ toggleOptions.push({
2728
+ text: columnTitle,
2729
+ checked: column.show !== false,
2730
+ onClick: () => {
2731
+ //change columns imutable(prevent change columns directly)
2732
+ let column = { ...obj.column,
2733
+ show: !obj.column.show
2734
+ };
2735
+ column = $$.updateStorageByColumn(column, {
2736
+ show: column.show
2737
+ });
2738
+ setState({
2739
+ columns: columns.map((o, i) => i === column.realIndex ? column : o)
2740
+ });
2741
+ }
2742
+ });
2743
+ },
2744
+
2745
+ getFreezes({
2746
+ column,
2747
+ colIndex,
2748
+ columnTitle,
2749
+ freezeOptions,
2750
+ freezeColumns,
2751
+ unFreezeColumns
2752
+ }) {
2753
+ (column.freeze ? freezeColumns : unFreezeColumns).push(column);
2754
+
2755
+ if (!column.toggleFreeze) {
2756
+ return;
2757
+ }
2758
+
2759
+ freezeOptions.push({
2760
+ text: columnTitle,
2761
+ checked: column.freeze === true,
2762
+ onClick: () => {
2763
+ let {
2764
+ columns
2765
+ } = getState();
2766
+ columns = [...columns];
2767
+ let column = { ...columns[colIndex]
2768
+ };
2769
+ column.freeze = !column.freeze;
2770
+ setState({
2771
+ columns: columns.map((o, i) => i === colIndex ? column : o)
2772
+ });
2773
+ }
2774
+ });
2775
+ },
2776
+
2777
+ updateColumnByStorage(column) {
2778
+ let {
2779
+ storageKey,
2780
+ _readStorage
2781
+ } = column;
2782
+
2783
+ if (storageKey && !_readStorage) {
2784
+ column._readStorage = true;
2785
+ let storageStr = localStorage.getItem('aio-table-column-storage-' + column.storageKey);
2786
+ let storageObj;
2787
+
2788
+ if (!storageStr || storageStr === null) {
2789
+ storageObj = {};
2790
+ localStorage.setItem('aio-table-column-storage-' + column.storageKey, '{}');
2791
+ } else {
2792
+ storageObj = JSON.parse(storageStr);
2793
+ }
2794
+
2795
+ if (storageObj.show !== undefined) {
2796
+ column.show = storageObj.show;
2797
+ }
2798
+
2799
+ if (storageObj.width !== undefined) {
2800
+ column.width = storageObj.width;
2801
+ }
2802
+
2803
+ if (storageObj.sort !== undefined) {
2804
+ column.sort = storageObj.sort;
2805
+ }
2806
+
2807
+ column._storageObj = storageObj;
2808
+ }
2809
+ },
2810
+
2811
+ updateStorageByColumn(column, obj) {
2812
+ if (column.storageKey) {
2813
+ column = { ...column,
2814
+ _storageObj: { ...column._storageObj,
2815
+ ...obj
2816
+ }
2817
+ };
2818
+ localStorage.setItem('aio-table-column-storage-' + column.storageKey, JSON.stringify(column._storageObj));
2819
+ }
2820
+
2821
+ return column;
2822
+ },
2823
+
2824
+ getDetails() {
2825
+ let {
2826
+ columns,
2827
+ groups
2828
+ } = getState();
2829
+ columns = [...columns];
2830
+ let sorts = [];
2831
+ let freezeColumns = [],
2832
+ unFreezeColumns = [],
2833
+ freezeOptions = [],
2834
+ sortOptions = [],
2835
+ toggleOptions = [],
2836
+ groupOptions = [];
2837
+ let excelColumns = [],
2838
+ visibleColumns = [],
2839
+ search = false;
2840
+ let groupTitles = groups.map(o => o.title);
2841
+ let renderIndex = 0;
2842
+
2843
+ for (let i = 0; i < columns.length; i++) {
2844
+ columns[i].realIndex = i;
2845
+
2846
+ if (columns[i].sort === true) {
2847
+ columns[i].sort = {};
2848
+ }
2849
+
2850
+ if (columns[i].filter === true) {
2851
+ columns[i].filter = {
2852
+ items: [],
2853
+ booleanType: 'or',
2854
+ type: 'text'
2855
+ };
2856
+ }
2857
+
2858
+ if (columns[i].group === true) {
2859
+ columns[i].group = {};
2860
+ }
2861
+
2862
+ columns[i].width = columns[i].width || 'auto';
2863
+ let column = { ...columns[i]
2864
+ };
2865
+ column.realIndex = i;
2866
+ $$.updateColumnByStorage(column);
2867
+ let {
2868
+ title: columnTitle,
2869
+ show = true,
2870
+ sort,
2871
+ toggleShow,
2872
+ excel
2873
+ } = column;
2874
+ columnTitle = typeof columnTitle === 'function' ? columnTitle() : columnTitle;
2875
+ column.show = typeof show === 'function' ? show() : show;
2876
+
2877
+ if (column.search) {
2878
+ search = true;
2879
+ }
2880
+
2881
+ if (column.group && groupTitles.indexOf(columnTitle) === -1) {
2882
+ let {
2883
+ title = columnTitle,
2884
+ active = true,
2885
+ toggle = true,
2886
+ storageKey = column.storageKey,
2887
+ getValue = column.getValue
2888
+ } = column.group;
2889
+ groups.push({
2890
+ title,
2891
+ active,
2892
+ toggle,
2893
+ storageKey,
2894
+ getValue
2895
+ });
2896
+ }
2897
+
2898
+ if (column.show) {
2899
+ column.renderIndex = renderIndex;
2900
+ columns[i].renderIndex = renderIndex;
2901
+ renderIndex++;
2902
+ visibleColumns.push(column);
2903
+
2904
+ if (excel) {
2905
+ excelColumns.push(column);
2906
+ }
2907
+
2908
+ if (sort) {
2909
+ $$.getSorts({
2910
+ column,
2911
+ columnTitle,
2912
+ sorts,
2913
+ sortOptions,
2914
+ colIndex: i
2915
+ });
2916
+ }
2917
+
2918
+ $$.getFreezes({
2919
+ column,
2920
+ colIndex: i,
2921
+ columnTitle,
2922
+ freezeOptions,
2923
+ freezeColumns,
2924
+ unFreezeColumns
2925
+ });
2926
+ }
2927
+
2928
+ if (toggleShow) {
2929
+ $$.getToggles({
2930
+ column,
2931
+ columnTitle,
2932
+ toggleOptions,
2933
+ colIndex: i
2934
+ });
2935
+ }
2936
+ }
2937
+
2938
+ $$.getGroups(groupOptions);
2939
+ return {
2940
+ sorts,
2941
+ sortOptions,
2942
+ freezeColumns,
2943
+ unFreezeColumns,
2944
+ freezeOptions,
2945
+ toggleOptions,
2946
+ groupOptions,
2947
+ excelColumns,
2948
+ columns: visibleColumns,
2949
+ search
2950
+ };
2951
+ },
2952
+
2953
+ getGroups(groupOptions) {
2954
+ var {
2955
+ groups
2956
+ } = getState();
2957
+
2958
+ for (let i = 0; i < groups.length; i++) {
2959
+ let group = groups[i];
2960
+ let {
2961
+ title,
2962
+ active = true,
2963
+ toggle = true,
2964
+ storageKey,
2965
+ _readStorage
2966
+ } = group;
2967
+
2968
+ if (storageKey && !_readStorage) {
2969
+ group._readStorage = true;
2970
+ let storageActive = localStorage.getItem('aio table group' + storageKey);
2971
+
2972
+ if (storageActive === null) {
2973
+ storageActive = true;
2974
+ localStorage.setItem('aio table group' + storageKey, JSON.stringify(storageActive));
2975
+ } else {
2976
+ storageActive = JSON.parse(storageActive);
2977
+ }
2978
+
2979
+ active = storageActive;
2980
+ }
2981
+
2982
+ group.active = active;
2983
+
2984
+ if (toggle) {
2985
+ groupOptions.push({
2986
+ text: title,
2987
+ checked: active === true,
2988
+ onClick: () => {
2989
+ let {
2990
+ groups
2991
+ } = getState();
2992
+ let group = groups[i];
2993
+ group.active = !group.active;
2994
+
2995
+ if (storageKey) {
2996
+ localStorage.setItem('aio table group' + storageKey, JSON.stringify(group.active));
2997
+ }
2998
+
2999
+ setState({
3000
+ groups
3001
+ });
3002
+ }
3003
+ });
3004
+ }
3005
+ }
3006
+ },
3007
+
3008
+ isContain(text, subtext) {
3009
+ return text.toString().toLowerCase().indexOf(subtext.toString().toLowerCase()) !== -1;
3010
+ },
3011
+
3012
+ isEqual(a, b) {
3013
+ return a.toString().toLowerCase() === b.toString().toLowerCase();
3014
+ },
3015
+
3016
+ isGreater(a, b, type) {
3017
+ if (type === 'date') {
3018
+ return $$.getDateNumber(a) > $$.getDateNumber(b);
3019
+ }
3020
+
3021
+ return parseFloat(a) > parseFloat(b);
3022
+ },
3023
+
3024
+ isLess(a, b, type) {
3025
+ if (type === 'date') {
3026
+ return $$.getDateNumber(a) < $$.getDateNumber(b);
3027
+ }
3028
+
3029
+ return parseFloat(a) < parseFloat(b);
3030
+ },
3031
+
3032
+ getFilterResult_and(filters, val) {
3033
+ if (val === undefined) {
3034
+ return false;
3035
+ }
3036
+
3037
+ for (let i = 0; i < filters.length; i++) {
3038
+ let {
3039
+ operator: o,
3040
+ value: v,
3041
+ type
3042
+ } = filters[i];
3043
+
3044
+ if (v === '' || v === undefined) {
3045
+ continue;
3046
+ }
3047
+
3048
+ if (o === 'contain') {
3049
+ if (!$$.isContain(val, v)) {
3050
+ return false;
3051
+ }
3052
+
3053
+ continue;
3054
+ }
3055
+
3056
+ if (o === 'notContain') {
3057
+ if ($$.isContain(val, v)) {
3058
+ return false;
3059
+ }
3060
+
3061
+ continue;
3062
+ }
3063
+
3064
+ if (o === 'equal') {
3065
+ if (!$$.isEqual(val, v)) {
3066
+ return false;
3067
+ }
3068
+
3069
+ continue;
3070
+ }
3071
+
3072
+ if (o === 'notEqual') {
3073
+ if ($$.isEqual(val, v)) {
3074
+ return false;
3075
+ }
3076
+
3077
+ continue;
3078
+ }
3079
+
3080
+ if (o === 'greater') {
3081
+ if (!$$.isGreater(val, v, type)) {
3082
+ return false;
3083
+ }
3084
+
3085
+ continue;
3086
+ }
3087
+
3088
+ if (o === 'less') {
3089
+ if (!$$.isLess(val, v, type)) {
3090
+ return false;
3091
+ }
3092
+
3093
+ continue;
3094
+ }
3095
+ }
3096
+
3097
+ return true;
3098
+ },
3099
+
3100
+ getFilterResult_or(filters, val) {
3101
+ if (val === undefined) {
3102
+ return false;
3103
+ }
3104
+
3105
+ for (let i = 0; i < filters.length; i++) {
3106
+ let {
3107
+ operator: o,
3108
+ value: v,
3109
+ type
3110
+ } = filters[i];
3111
+
3112
+ if (v === '' || v === undefined) {
3113
+ return true;
3114
+ }
3115
+
3116
+ if (o === 'contain') {
3117
+ if ($$.isContain(val, v)) {
3118
+ return true;
3119
+ }
3120
+
3121
+ continue;
3122
+ }
3123
+
3124
+ if (o === 'notContain') {
3125
+ if (!$$.isContain(val, v)) {
3126
+ return true;
3127
+ }
3128
+
3129
+ continue;
3130
+ }
3131
+
3132
+ if (o === 'equal') {
3133
+ if ($$.isEqual(val, v)) {
3134
+ return true;
3135
+ }
3136
+
3137
+ continue;
3138
+ }
3139
+
3140
+ if (o === 'notEqual') {
3141
+ if (!$$.isEqual(val, v)) {
3142
+ return true;
3143
+ }
3144
+
3145
+ continue;
3146
+ }
3147
+
3148
+ if (o === 'greater') {
3149
+ if ($$.isGreater(val, v, type)) {
3150
+ return true;
3151
+ }
3152
+
3153
+ continue;
3154
+ }
3155
+
3156
+ if (o === 'less') {
3157
+ if ($$.isLess(val, v, type)) {
3158
+ return true;
3159
+ }
3160
+
3161
+ continue;
3162
+ }
3163
+ }
3164
+
3165
+ return false;
3166
+ },
3167
+
3168
+ getFilterResult(column, value) {
3169
+ let {
3170
+ items = [],
3171
+ booleanType = 'or'
3172
+ } = column.filter;
3173
+
3174
+ if (items.length) {
3175
+ return $$['getFilterResult_' + booleanType](items, value);
3176
+ }
3177
+
3178
+ return true;
3179
+ },
3180
+
3181
+ cubes2(obj = {}) {
3182
+ var {
3183
+ count = 5,
3184
+ thickness = [5, 16],
3185
+ delay = 0.1,
3186
+ borderRadius = 0,
3187
+ colors = ['dodgerblue'],
3188
+ duration = 1,
3189
+ gap = 3
3190
+ } = obj;
3191
+ let Thickness = Array.isArray(thickness) ? thickness : [thickness, thickness];
3192
+
3193
+ let getStyle1 = i => {
3194
+ return {
3195
+ width: Thickness[0],
3196
+ height: Thickness[1],
3197
+ background: colors[i % colors.length],
3198
+ margin: `0 ${gap / 2}px`,
3199
+ animation: `${duration}s loadingScaleY infinite ease-in-out ${i * delay}s`,
3200
+ borderRadius: borderRadius + 'px'
3201
+ };
3202
+ };
3203
+
3204
+ let items = [];
3205
+
3206
+ for (var i = 0; i < count; i++) {
3207
+ items.push( /*#__PURE__*/_react.default.createElement("div", {
3208
+ key: i,
3209
+ style: getStyle1(i)
3210
+ }));
3211
+ }
3212
+
3213
+ return /*#__PURE__*/_react.default.createElement("div", {
3214
+ className: "rect",
3215
+ style: {
3216
+ width: '100%',
3217
+ display: 'flex',
3218
+ alignItems: 'center',
3219
+ justifyContent: 'center',
3220
+ background: 'transparent'
3221
+ }
3222
+ }, items);
3223
+ },
3224
+
3225
+ getLoading(isMain) {
3226
+ if (isMain) {
3227
+ return /*#__PURE__*/_react.default.createElement("div", {
3228
+ className: "aio-table-loading aio-table-main-loading",
3229
+ style: {
3230
+ display: 'none'
3231
+ }
3232
+ }, $$.cubes2({
3233
+ thickness: [6, 40]
3234
+ }));
3235
+ }
3236
+
3237
+ return /*#__PURE__*/_react.default.createElement("div", {
3238
+ className: "aio-table-loading"
3239
+ }, $$.cubes2({
3240
+ thickness: [6, 40]
3241
+ }));
3242
+ },
3243
+
3244
+ toggleRow(row) {
3245
+ var {
3246
+ openDictionary
3247
+ } = getState();
3248
+ var {
3249
+ id
3250
+ } = getProps();
3251
+
3252
+ if (row._show === 'relativeFilter') {
3253
+ return;
3254
+ }
3255
+
3256
+ openDictionary[row._id] = !openDictionary[row._id];
3257
+
3258
+ if (id !== undefined) {
3259
+ localStorage.setItem('aio table ' + id, JSON.stringify(openDictionary));
3260
+ }
3261
+
3262
+ setState({
3263
+ openDictionary
3264
+ });
3265
+ },
3266
+
3267
+ getRow(row) {
3268
+ let {
3269
+ searchText
3270
+ } = getState();
3271
+ let {
3272
+ columns
3273
+ } = getContext().details;
3274
+ row._values = {};
3275
+ let searchShow;
3276
+ let show = true,
3277
+ lastColumn,
3278
+ isThereAutoColumn = false,
3279
+ cells = [],
3280
+ freezeCells = [],
3281
+ unFreezeCells = [];
3282
+
3283
+ for (let i = 0; i < columns.length; i++) {
3284
+ let column = columns[i];
3285
+ let value = $$.getValueByField(row, column, column.getValue);
3286
+ row._values[column.realIndex] = value;
3287
+
3288
+ if (show && column.search && searchText) {
3289
+ if (searchShow === undefined) {
3290
+ searchShow = false;
3291
+ }
3292
+
3293
+ searchShow = searchShow || JSON.stringify(value).toLowerCase().indexOf(searchText.toLowerCase()) !== -1;
3294
+ }
3295
+
3296
+ if (show && column.filter && !column.filter.onChange) {
3297
+ show = show && $$.getFilterResult(column, value);
3298
+ }
3299
+
3300
+ let obj = {
3301
+ key: row._index + ',' + column.realIndex,
3302
+ column,
3303
+ value,
3304
+ freeze: column.freeze
3305
+ };
3306
+
3307
+ if ($$.freezeMode) {
3308
+ if (column.freeze) {
3309
+ freezeCells.push(obj);
3310
+ } else {
3311
+ lastColumn = column;
3312
+ unFreezeCells.push(obj);
3313
+
3314
+ if (column.width === 'auto') {
3315
+ isThereAutoColumn = true;
3316
+ }
3317
+ }
3318
+ } else {
3319
+ cells.push(obj);
3320
+ lastColumn = column;
3321
+
3322
+ if (column.width === 'auto') {
3323
+ isThereAutoColumn = true;
3324
+ }
3325
+ }
3326
+ }
3327
+
3328
+ row._show = show && searchShow !== false;
3329
+
3330
+ if (show) {
3331
+ let parents = row._getParents();
3332
+
3333
+ for (let i = 0; i < parents.length; i++) {
3334
+ if (parents[i]._show === false) {
3335
+ parents[i]._show = 'relativeFilter';
3336
+ }
3337
+ }
3338
+ }
3339
+
3340
+ if (!isThereAutoColumn && lastColumn) {
3341
+ lastColumn.width = 'auto';
3342
+ }
3343
+
3344
+ return {
3345
+ cells,
3346
+ freezeCells,
3347
+ unFreezeCells
3348
+ };
3349
+ },
3350
+
3351
+ getRowById(id, rows) {
3352
+ for (let i = 0; i < rows.length; i++) {
3353
+ let row = rows[i];
3354
+
3355
+ if (!row.row) {
3356
+ continue;
3357
+ }
3358
+
3359
+ if (row.row._id === id) {
3360
+ return row;
3361
+ }
3362
+ }
3363
+ },
3364
+
3365
+ getStateByToggleAll(rows) {
3366
+ var {
3367
+ openDictionary,
3368
+ groupsOpen,
3369
+ toggleAllState
3370
+ } = getState();
3371
+ var {
3372
+ id
3373
+ } = getProps();
3374
+
3375
+ for (let prop in openDictionary) {
3376
+ let row = $$.getRowById(prop, rows);
3377
+
3378
+ if (row && row.row && row.row._show === 'relativeFilter') {
3379
+ continue;
3380
+ }
3381
+
3382
+ openDictionary[prop] = toggleAllState;
3383
+ }
3384
+
3385
+ for (let prop in groupsOpen) {
3386
+ groupsOpen[prop] = toggleAllState;
3387
+ }
3388
+
3389
+ if (id !== undefined) {
3390
+ localStorage.setItem('aio table ' + id, JSON.stringify(openDictionary));
3391
+ }
3392
+
3393
+ return {
3394
+ openDictionary,
3395
+ groupsOpen,
3396
+ toggleAllState: !toggleAllState
3397
+ };
3398
+ },
3399
+
3400
+ getClient(e) {
3401
+ return getState().touch ? [e.changedTouches[0].clientX, e.changedTouches[0].clientY] : [e.clientX, e.clientY];
3402
+ },
3403
+
3404
+ getRowsReq(model, rows, _level, parents, nestedIndex) {
3405
+ var {
3406
+ openDictionary
3407
+ } = getState();
3408
+ var {
3409
+ getRowId,
3410
+ getRowChilds,
3411
+ getRowVisible,
3412
+ getRowParentId
3413
+ } = getProps();
3414
+
3415
+ if (getRowParentId) {
3416
+ getRowChilds = row => row._childs;
3417
+ }
3418
+
3419
+ for (let i = 0; i < model.length; i++) {
3420
+ let row = model[i];
3421
+
3422
+ if (getRowVisible && getRowVisible(row) === false) {
3423
+ continue;
3424
+ }
3425
+
3426
+ if (row._groupId) {
3427
+ rows.push(row);
3428
+ continue;
3429
+ }
3430
+
3431
+ row._index = $$.realIndex;
3432
+ $$.realIndex++;
3433
+ row._childIndex = i;
3434
+ let NI = nestedIndex.concat(i);
3435
+ row._nestedIndex = NI;
3436
+ row._level = _level;
3437
+ row._isFirstChild = i === 0;
3438
+ row._isLastChild = i === model.length - 1;
3439
+
3440
+ row._getParents = () => parents;
3441
+
3442
+ if (row._id === undefined) {
3443
+ let id = getRowId ? getRowId(row) : 'row' + Math.random();
3444
+
3445
+ if (id === undefined) {
3446
+ console.error('AIOTable => id of row is not defined, please check getRowId props of AIOTable');
3447
+ }
3448
+
3449
+ row._id = id;
3450
+ }
3451
+
3452
+ openDictionary[row._id] = openDictionary[row._id] === false ? false : true;
3453
+ row._opened = openDictionary[row._id];
3454
+ row._childsLength = 0;
3455
+ let childs = [];
3456
+
3457
+ if (getRowChilds) {
3458
+ childs = $$.getValueByField(row, undefined, getRowChilds) || [];
3459
+ row._childsLength = childs.length;
3460
+ }
3461
+
3462
+ let Row = $$.getRow(row);
3463
+
3464
+ if (row._level === 0) {
3465
+ rows.push([]);
3466
+ }
3467
+
3468
+ rows[rows.length - 1].push({ ...Row,
3469
+ row
3470
+ });
3471
+
3472
+ if (row._opened && row._childsLength) {
3473
+ $$.getRowsReq(childs, rows, _level + 1, parents.concat(row), NI);
3474
+ } else {
3475
+ $$.realIndex += row._childsLength;
3476
+ }
3477
+ }
3478
+ },
3479
+
3480
+ getRowsNested(model, childsField) {
3481
+ let {
3482
+ getRowId,
3483
+ getRowParentId
3484
+ } = getProps();
3485
+
3486
+ if (!getRowParentId) {
3487
+ return model;
3488
+ }
3489
+
3490
+ var convertModelRecursive = (array, parentId, parentObject) => {
3491
+ for (let i = 0; i < array.length; i++) {
3492
+ let row = array[i];
3493
+ let rowParentId = getRowParentId(row);
3494
+
3495
+ if (rowParentId !== parentId) {
3496
+ continue;
3497
+ }
3498
+
3499
+ let rowId = getRowId(row);
3500
+ row[childsField] = [];
3501
+ parentObject.push(row);
3502
+ array.splice(i, 1);
3503
+ i--;
3504
+ convertModelRecursive([...array], rowId, row[childsField]);
3505
+ }
3506
+ };
3507
+
3508
+ var result = [];
3509
+ convertModelRecursive([...model], undefined, result);
3510
+ return result;
3511
+ },
3512
+
3513
+ getRowsBySort(rows, sorts) {
3514
+ if (!sorts.length) {
3515
+ return rows;
3516
+ }
3517
+
3518
+ return rows.sort((a, b) => {
3519
+ for (let i = 0; i < sorts.length; i++) {
3520
+ let {
3521
+ getValue,
3522
+ dir,
3523
+ onChange
3524
+ } = sorts[i];
3525
+
3526
+ if (onChange) {
3527
+ continue;
3528
+ }
3529
+
3530
+ let aValue = $$.getValueByField(a, undefined, getValue),
3531
+ bValue = $$.getValueByField(b, undefined, getValue);
3532
+
3533
+ if (aValue < bValue) {
3534
+ return -1 * (dir === 'dec' ? -1 : 1);
3535
+ }
3536
+
3537
+ if (aValue > bValue) {
3538
+ return 1 * (dir === 'dec' ? -1 : 1);
3539
+ }
3540
+
3541
+ if (i === sorts.length - 1) {
3542
+ return 0;
3543
+ }
3544
+ }
3545
+
3546
+ return 0;
3547
+ });
3548
+ },
3549
+
3550
+ getRows(model, freezeMode) {
3551
+ let rows = [];
3552
+ $$.realIndex = 0;
3553
+ $$.freezeMode = freezeMode;
3554
+ $$.getRowsReq(model, rows, 0, [], []);
3555
+ let result = [];
3556
+
3557
+ for (let i = 0; i < rows.length; i++) {
3558
+ let list = rows[i];
3559
+
3560
+ if (list[0].row._show === false) {
3561
+ continue;
3562
+ }
3563
+
3564
+ let arr = list.filter(o => o.row._show !== false);
3565
+
3566
+ if (arr.length) {
3567
+ result.push(arr);
3568
+ }
3569
+ }
3570
+
3571
+ return result;
3572
+ },
3573
+
3574
+ getRootsByPaging(roots, index) {
3575
+ let {
3576
+ paging
3577
+ } = getState();
3578
+
3579
+ if (!paging) {
3580
+ return roots;
3581
+ }
3582
+
3583
+ var length = paging.onChange ? paging.count : roots.length;
3584
+ paging.pages = Math.ceil(length / paging.size);
3585
+
3586
+ if (paging.number > paging.pages) {
3587
+ paging.number = paging.pages;
3588
+ }
3589
+
3590
+ if (paging.number < 1) {
3591
+ paging.number = 1;
3592
+ }
3593
+
3594
+ if (paging.onChange) {
3595
+ return roots;
3596
+ } //اگر پیجینگ آنچنج داشت تغییری در ردیف ها نده و اجازه بده تغییرات در آنچنج روی مدل ورودی انجام شود
3597
+
3598
+
3599
+ let start = (paging.number - 1) * paging.size;
3600
+ let end = start + paging.size;
3601
+
3602
+ if (end > length) {
3603
+ end = length;
3604
+ }
3605
+
3606
+ index.real = start;
3607
+ return roots.slice(start, end);
3608
+ },
3609
+
3610
+ getRootsByGroup(roots, groups) {
3611
+ if (!groups.length) {
3612
+ return roots;
3613
+ }
3614
+
3615
+ var {
3616
+ groupsOpen
3617
+ } = getState();
3618
+
3619
+ function msf(obj, _level, parents) {
3620
+ if (Array.isArray(obj)) {
3621
+ groupedRows = groupedRows.concat(obj);
3622
+ } else {
3623
+ for (var prop in obj) {
3624
+ let newParents = parents.concat(prop);
3625
+
3626
+ let _groupId = newParents.toString();
3627
+
3628
+ groupsOpen[_groupId] = groupsOpen[_groupId] === undefined ? true : groupsOpen[_groupId];
3629
+ groupedRows.push({
3630
+ _groupValue: prop,
3631
+ _groupId,
3632
+ _level,
3633
+ _opened: groupsOpen[_groupId]
3634
+ });
3635
+
3636
+ if (groupsOpen[_groupId]) {
3637
+ msf(obj[prop], _level + 1, newParents);
3638
+ }
3639
+ }
3640
+ }
3641
+ }
3642
+
3643
+ var newModel = {};
3644
+
3645
+ for (let i = 0; i < roots.length; i++) {
3646
+ let root = roots[i];
3647
+ var obj = newModel;
3648
+ let values = groups.map(group => $$.getValueByField(root[0].row, undefined, group.getValue));
3649
+
3650
+ for (let j = 0; j < values.length; j++) {
3651
+ let value = values[j];
3652
+
3653
+ if (j === values.length - 1) {
3654
+ obj[value] = obj[value] || [];
3655
+ obj[value].push(root);
3656
+ } else {
3657
+ obj[value] = obj[value] || {};
3658
+ obj = obj[value];
3659
+ }
3660
+ }
3661
+ }
3662
+
3663
+ var groupedRows = [];
3664
+ var _level = 0;
3665
+ msf(newModel, _level, []);
3666
+ return groupedRows;
3667
+ },
3668
+
3669
+ getRowsByRoots(rows) {
3670
+ var result = [];
3671
+
3672
+ for (var i = 0; i < rows.length; i++) {
3673
+ result = result.concat(rows[i]);
3674
+ }
3675
+
3676
+ return result;
3677
+ },
3678
+
3679
+ getFullCellStyle(columns) {
3680
+ if (!columns) {
3681
+ return {
3682
+ gridColumnStart: 1,
3683
+ gridColumnEnd: 2
3684
+ };
3685
+ }
3686
+
3687
+ return {
3688
+ gridColumnStart: 1,
3689
+ gridColumnEnd: columns.length + 1
3690
+ };
3691
+ },
3692
+
3693
+ getNoData(columns) {
3694
+ var {
3695
+ rowHeight,
3696
+ translate
3697
+ } = getProps();
3698
+ return /*#__PURE__*/_react.default.createElement("div", {
3699
+ className: "aio-table-nodata",
3700
+ style: { ...$$.getFullCellStyle(columns),
3701
+ height: rowHeight
3702
+ }
3703
+ }, translate('No Data'));
3704
+ }
3705
+
3706
+ };
3707
+ return {
3708
+ exportToExcel: $$.exportToExcel,
3709
+ getDetails: $$.getDetails,
3710
+ getSliderCell: $$.getSliderCell,
3711
+ getOptionsCell: $$.getOptionsCell,
3712
+ getGanttCell: $$.getGanttCell,
3713
+ getCheckboxCell: $$.getCheckboxCell,
3714
+ handleOutsideClick: $$.handleOutsideClick,
3715
+ onScroll: $$.onScroll,
3716
+ getCardRowCount: $$.getCardRowCount,
3717
+ getOpenDictionary: $$.getOpenDictionary,
3718
+ getRowsBySort: $$.getRowsBySort,
3719
+ getGroups: $$.getGroups,
3720
+ getRootsByGroup: $$.getRootsByGroup,
3721
+ setColumnByStorage: $$.setColumnByStorage,
3722
+ getFilterResult: $$.getFilterResult,
3723
+ getLoading: $$.getLoading,
3724
+ cubes2: $$.cubes2,
3725
+ getRow: $$.getRow,
3726
+ getRowById: $$.getRowById,
3727
+ getClient: $$.getClient,
3728
+ getStateByToggleAll: $$.getStateByToggleAll,
3729
+ getRootsByPaging: $$.getRootsByPaging,
3730
+ getRowsReq: $$.getRowsReq,
3731
+ getRowsNested: $$.getRowsNested,
3732
+ getRows: $$.getRows,
3733
+ getRootsByRows: $$.getRootsByRows,
3734
+ getRowsByRoots: $$.getRowsByRoots,
3735
+ toggleRow: $$.toggleRow,
3736
+ getFullCellStyle: $$.getFullCellStyle,
3737
+ getNoData: $$.getNoData,
3738
+ getSortsFromColumns: $$.getSortsFromColumns,
3739
+ getValueByField: $$.getValueByField,
3740
+ setCellValue: $$.setCellValue,
3741
+ updateStorageByColumn: $$.updateStorageByColumn
3742
+ };
3743
+ }
3744
+
3745
+ function aioTableGetSvg(type, conf = {}) {
3746
+ let {
3747
+ className,
3748
+ flip,
3749
+ onClick,
3750
+ box = '0 0 24 24'
3751
+ } = conf;
3752
+ let style1 = {
3753
+ width: '1.05rem',
3754
+ height: '1.05rem'
3755
+ };
3756
+ style1.background = '';
3757
+
3758
+ if (flip) {
3759
+ style1.transform = 'scaleX(-1)';
3760
+ style1.transformOrigin = 'center center';
3761
+ }
3762
+
3763
+ let style2 = {
3764
+ fill: 'currentcolor'
3765
+ };
3766
+ let Attrs = {
3767
+ viewBox: box,
3768
+ role: "presentation",
3769
+ style: style1
3770
+ };
3771
+
3772
+ if (className) {
3773
+ Attrs.className = className;
3774
+ }
3775
+
3776
+ if (onClick) {
3777
+ Attrs.onClick = onClick;
3778
+ }
3779
+
3780
+ if (type === 'eye') {
3781
+ return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
3782
+ 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",
3783
+ style: style2
3784
+ }));
3785
+ }
3786
+
3787
+ if (type === 'magnify') {
3788
+ return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
3789
+ 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",
3790
+ style: style2
3791
+ }));
3792
+ }
3793
+
3794
+ if (type === 'close') {
3795
+ return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
3796
+ 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",
3797
+ style: style2
3798
+ }));
3799
+ }
3800
+
3801
+ if (type === 'toggleAllPlus') {
3802
+ return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
3803
+ 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",
3804
+ style: style2
3805
+ }));
3806
+ }
3807
+
3808
+ if (type === 'toggleAllMinus') {
3809
+ return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
3810
+ 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",
3811
+ style: style2
3812
+ }));
3813
+ }
3814
+
3815
+ if (type === 'excel') {
3816
+ return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
3817
+ 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",
3818
+ style: style2
3819
+ }));
3820
+ }
3821
+
3822
+ if (type === 'sort') {
3823
+ return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
3824
+ d: "M18 21L14 17H17V7H14L18 3L22 7H19V17H22M2 19V17H12V19M2 13V11H9V13M2 7V5H6V7H2Z",
3825
+ style: style2
3826
+ }));
3827
+ }
3828
+
3829
+ if (type === 'group') {
3830
+ return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
3831
+ d: "M3,3H9V7H3V3M15,10H21V14H15V10M15,17H21V21H15V17M13,13H7V18H13V20H7L5,20V9H7V11H13V13Z",
3832
+ style: style2
3833
+ }));
3834
+ }
3835
+
3836
+ if (type === 'freeze') {
3837
+ return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
3838
+ d: "M4 22H2V2H4V22M22 7H6V10H22V7M16 14H6V17H16V14Z",
3839
+ style: style2
3840
+ }));
3841
+ }
3842
+
3843
+ if (type === 'filter') {
3844
+ return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
3845
+ 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",
3846
+ style: style2
3847
+ }));
3848
+ }
3849
+
3850
+ if (type === 'filterActive') {
3851
+ return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
3852
+ 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",
3853
+ style: style2
3854
+ }));
3855
+ }
3856
+
3857
+ if (type === 'dots') {
3858
+ return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
3859
+ 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",
3860
+ style: style2
3861
+ }));
3862
+ }
3863
+
3864
+ if (type === 'chevronDown') {
3865
+ return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
3866
+ d: "M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z",
3867
+ style: style2
3868
+ }));
3869
+ }
3870
+
3871
+ if (type === 'chevronRight') {
3872
+ return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
3873
+ d: "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z",
3874
+ style: style2
3875
+ }));
3876
+ }
3877
+
3878
+ if (type === 'doubleChevronRight') {
3879
+ return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
3880
+ 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",
3881
+ style: style2
3882
+ }));
3883
+ }
3884
+
3885
+ if (type === 'arrowUp') {
3886
+ return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
3887
+ d: "M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z",
3888
+ style: style2
3889
+ }));
3890
+ }
3891
+
3892
+ if (type === 'arrowDown') {
3893
+ return /*#__PURE__*/_react.default.createElement("svg", Attrs, /*#__PURE__*/_react.default.createElement("path", {
3894
+ d: "M11,4H13V16L18.5,10.5L19.92,11.92L12,19.84L4.08,11.92L5.5,10.5L11,16V4Z",
3895
+ style: style2
3896
+ }));
3897
+ }
1302
3898
  }