aio-table 6.3.2 → 7.0.2

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