aio-table 9.1.0 → 9.1.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.d.ts +98 -98
  2. package/index.js +449 -449
  3. package/package.json +1 -1
package/index.d.ts CHANGED
@@ -1,98 +1,98 @@
1
- import { ReactNode } from "react";
2
- import "./index.css";
3
- import { I_filter, I_filter_item, I_filter_saved_item, I_paging, I_sort } from "../../aio-component-utils";
4
- type I_rowOption<T, R> = (p: I_rowDetail<T>) => R;
5
- type I_cellOption<T, R> = ((p: I_cellDetail<T>) => R) | string;
6
- type I_rowDetail<T> = {
7
- row: T;
8
- rowIndex: number;
9
- isFirst: boolean;
10
- isLast: boolean;
11
- };
12
- type I_cellDetail<T> = I_rowDetail<T> & {
13
- column: I_table_column<T>;
14
- change: (newRow: T) => void;
15
- isDate: boolean;
16
- };
17
- export type I_table_paging = I_paging;
18
- export type I_table_sort<T> = I_sort<T>;
19
- export type I_table_filter = I_filter;
20
- export type I_table_filter_item = I_filter_item;
21
- export type I_table_filter_saved_item = I_filter_saved_item;
22
- export type I_table_column<T> = {
23
- title?: any;
24
- sort?: true | I_table_sort<T>;
25
- filterId?: string;
26
- search?: boolean;
27
- id?: string;
28
- _id?: string;
29
- width?: any;
30
- minWidth?: any;
31
- excel?: string | boolean;
32
- justify?: boolean;
33
- value?: string;
34
- attrs?: I_cellOption<T, {
35
- [attrs: string]: any;
36
- }>;
37
- before?: I_cellOption<T, ReactNode>;
38
- after?: I_cellOption<T, ReactNode>;
39
- subtext?: I_cellOption<T, ReactNode>;
40
- template?: I_cellOption<T, ReactNode>;
41
- titleAttrs?: {
42
- [attrs: string]: any;
43
- };
44
- type?: 'text' | 'number' | 'month' | 'day' | 'hour' | 'minute';
45
- };
46
- export type I_table<T> = {
47
- fa?: boolean;
48
- addText?: ReactNode | ((value: any) => ReactNode);
49
- columns?: I_table_column<T>[];
50
- excel?: string | ((value: any[]) => any[]);
51
- getValue?: {
52
- [key: string]: (p: {
53
- row: T;
54
- column: I_table_column<T>;
55
- rowIndex: number;
56
- change: (newRow: T) => void;
57
- }) => any;
58
- };
59
- headerAttrs?: any;
60
- onAdd?: () => Promise<T | undefined>;
61
- onRemove?: (p: {
62
- row: T;
63
- rowIndex?: number;
64
- }) => Promise<boolean>;
65
- onChangePaging?: (newPaging: I_table_paging) => void;
66
- onChangeSort?: (sorts: I_table_sort<T>[]) => Promise<boolean>;
67
- onSwap?: true | ((newValue: T[], startRow: T, endRow: T) => void);
68
- onSearch?: true | ((searchValue: string) => void);
69
- paging?: I_table_paging;
70
- removeText?: string;
71
- rowOption?: {
72
- before?: I_rowOption<T, ReactNode>;
73
- after?: I_rowOption<T, ReactNode>;
74
- attrs?: I_rowOption<T, {
75
- [attrs: string]: any;
76
- }>;
77
- template?: I_rowOption<T, ReactNode>;
78
- };
79
- cellAttrs?: string | ((p: {
80
- row: T;
81
- column: I_table_column<T>;
82
- rowIndex: number;
83
- }) => any);
84
- rowsTemplate?: (rows: T[]) => ReactNode;
85
- toolbar?: ReactNode | (() => ReactNode);
86
- toolbarAttrs?: any;
87
- tabIndex?: number;
88
- value: T[];
89
- onChange?: (v: T[]) => void;
90
- className?: string;
91
- style?: any;
92
- attrs?: any;
93
- placeholder?: ReactNode;
94
- filter?: I_table_filter;
95
- gap?: [number, number];
96
- };
97
- declare const AIOTable: <T>(props: I_table<T>) => JSX.Element;
98
- export default AIOTable;
1
+ import { ReactNode } from "react";
2
+ import "./index.css";
3
+ import { I_filter, I_filter_item, I_filter_saved_item, I_paging, I_sort } from "../../aio-component-utils";
4
+ type I_rowOption<T, R> = (p: I_rowDetail<T>) => R;
5
+ type I_cellOption<T, R> = ((p: I_cellDetail<T>) => R) | string;
6
+ type I_rowDetail<T> = {
7
+ row: T;
8
+ rowIndex: number;
9
+ isFirst: boolean;
10
+ isLast: boolean;
11
+ };
12
+ type I_cellDetail<T> = I_rowDetail<T> & {
13
+ column: I_table_column<T>;
14
+ change: (newRow: T) => void;
15
+ isDate: boolean;
16
+ };
17
+ export type I_table_paging = I_paging;
18
+ export type I_table_sort<T> = I_sort<T>;
19
+ export type I_table_filter = I_filter;
20
+ export type I_table_filter_item = I_filter_item;
21
+ export type I_table_filter_saved_item = I_filter_saved_item;
22
+ export type I_table_column<T> = {
23
+ title?: any;
24
+ sort?: true | I_table_sort<T>;
25
+ filterId?: string;
26
+ search?: boolean;
27
+ id?: string;
28
+ _id?: string;
29
+ width?: any;
30
+ minWidth?: any;
31
+ excel?: string | boolean;
32
+ justify?: boolean;
33
+ value?: string;
34
+ attrs?: I_cellOption<T, {
35
+ [attrs: string]: any;
36
+ }>;
37
+ before?: I_cellOption<T, ReactNode>;
38
+ after?: I_cellOption<T, ReactNode>;
39
+ subtext?: I_cellOption<T, ReactNode>;
40
+ template?: I_cellOption<T, ReactNode>;
41
+ titleAttrs?: {
42
+ [attrs: string]: any;
43
+ };
44
+ type?: 'text' | 'number' | 'month' | 'day' | 'hour' | 'minute';
45
+ };
46
+ export type I_table<T> = {
47
+ fa?: boolean;
48
+ addText?: ReactNode | ((value: any) => ReactNode);
49
+ columns?: I_table_column<T>[];
50
+ excel?: string | ((value: any[]) => any[]);
51
+ getValue?: {
52
+ [key: string]: (p: {
53
+ row: T;
54
+ column: I_table_column<T>;
55
+ rowIndex: number;
56
+ change: (newRow: T) => void;
57
+ }) => any;
58
+ };
59
+ headerAttrs?: any;
60
+ onAdd?: () => Promise<T | undefined>;
61
+ onRemove?: (p: {
62
+ row: T;
63
+ rowIndex?: number;
64
+ }) => Promise<boolean>;
65
+ onChangePaging?: (newPaging: I_table_paging) => void;
66
+ onChangeSort?: (sorts: I_table_sort<T>[]) => Promise<boolean>;
67
+ onSwap?: true | ((newValue: T[], startRow: T, endRow: T) => void);
68
+ onSearch?: true | ((searchValue: string) => void);
69
+ paging?: I_table_paging;
70
+ removeText?: string;
71
+ rowOption?: {
72
+ before?: I_rowOption<T, ReactNode>;
73
+ after?: I_rowOption<T, ReactNode>;
74
+ attrs?: I_rowOption<T, {
75
+ [attrs: string]: any;
76
+ }>;
77
+ template?: I_rowOption<T, ReactNode>;
78
+ };
79
+ cellAttrs?: string | ((p: {
80
+ row: T;
81
+ column: I_table_column<T>;
82
+ rowIndex: number;
83
+ }) => any);
84
+ rowsTemplate?: (rows: T[]) => ReactNode;
85
+ toolbar?: ReactNode | (() => ReactNode);
86
+ toolbarAttrs?: any;
87
+ tabIndex?: number;
88
+ value: T[];
89
+ onChange?: (v: T[]) => void;
90
+ className?: string;
91
+ style?: any;
92
+ attrs?: any;
93
+ placeholder?: ReactNode;
94
+ filter?: I_table_filter;
95
+ gap?: [number, number];
96
+ };
97
+ declare const AIOTable: <T>(props: I_table<T>) => JSX.Element;
98
+ export default AIOTable;
package/index.js CHANGED
@@ -1,449 +1,449 @@
1
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
- return new (P || (P = Promise))(function (resolve, reject) {
4
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
- step((generator = generator.apply(thisArg, _arguments || [])).next());
8
- });
9
- };
10
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
11
- import { createContext, createRef, Fragment, useContext, useEffect, useRef, useState } from "react";
12
- import AIOInput from "aio-input";
13
- import * as UT from 'aio-utils';
14
- import usePopup from "aio-popup";
15
- import AIODate from "aio-date";
16
- import { Filterbar, usePaging, useSort } from "aio-component-utils";
17
- import "./index.css";
18
- const Context = createContext({});
19
- const Provider = (p) => _jsx(Context.Provider, { value: p.value, children: p.children });
20
- const useProvider = () => useContext(Context);
21
- const AIOTable = (props) => {
22
- const popup = usePopup();
23
- let [dom] = useState(createRef());
24
- let [searchValue, setSearchValue] = useState('');
25
- const [columns, setColumns] = useState([]);
26
- const [searchColumns, setSearchColumns] = useState([]);
27
- const [excelColumns, setExcelColumns] = useState([]);
28
- const [filterColumns, setFilterColumns] = useState([]);
29
- const filterColumnsRef = useRef(filterColumns);
30
- filterColumnsRef.current = filterColumns;
31
- const rowsIndexDicRef = useRef({});
32
- const setRowsIndexDic = (rowsIndexDic) => rowsIndexDicRef.current = rowsIndexDic;
33
- const getRowsIndexDic = () => rowsIndexDicRef.current;
34
- const propsRef = useRef(props);
35
- propsRef.current = props;
36
- const pagingHook = usePaging({ rows: props.value, paging: props.paging, onChange: props.onChangePaging });
37
- const tableHook = useTable(() => propsRef.current, () => pagingHook.paging);
38
- const getIconRef = useRef(new UT.GetSvg());
39
- const getIcon = getIconRef.current.getIcon;
40
- const DragColumns = UT.useDrag((dragIndex, dropIndex, reOrder) => setColumns(reOrder(columns, dragIndex, dropIndex)));
41
- const getGetValue = (sort, column) => {
42
- if (sort.getValue) {
43
- return sort.getValue;
44
- }
45
- return (row) => {
46
- const isDate = ['month', 'day', 'hour', 'minute'].indexOf(column.type || 'text') !== -1;
47
- const cellValue = tableHook.getCellValue({ row, rowIndex: 0, isFirst: false, isLast: false, column, change: () => { }, isDate }, column.value);
48
- if (isDate) {
49
- const DATE = new AIODate();
50
- try {
51
- return DATE.getTime(cellValue);
52
- }
53
- catch (_a) {
54
- return 0;
55
- }
56
- }
57
- return cellValue;
58
- };
59
- };
60
- const getSorts = (columns) => {
61
- let sorts = [];
62
- for (let i = 0; i < columns.length; i++) {
63
- const column = columns[i];
64
- const { _id } = column;
65
- const sort = column.sort === true ? { sortId: _id } : column.sort;
66
- if (!sort) {
67
- continue;
68
- }
69
- let { active = false, dir = 'dec', sortId } = sort;
70
- let sortItem = { dir, title: sort.title || column.title, sortId, active, getValue: getGetValue(sort, column) };
71
- sorts.push(sortItem);
72
- }
73
- return sorts;
74
- };
75
- const sortHook = useSort({
76
- sorts: [],
77
- rows: propsRef.current.value,
78
- onChangeRows: props.onChange,
79
- onChangeSort: props.onChangeSort,
80
- });
81
- const isDate = (column) => ['month', 'day', 'hour', 'minute'].indexOf(column.type || 'text') !== -1;
82
- function getColumns() {
83
- let { columns = [] } = props;
84
- let searchColumns = [], excelColumns = [], filterColumns = [];
85
- let updatedColumns = columns.map((o) => {
86
- let { id = 'aitc' + Math.round(Math.random() * 1000000), filterId, search, excel } = o;
87
- let column = Object.assign(Object.assign({}, o), { _id: id });
88
- if (search) {
89
- searchColumns.push(column);
90
- }
91
- if (excel) {
92
- excelColumns.push(column);
93
- }
94
- if (filterId) {
95
- filterColumns.push(column);
96
- }
97
- return column;
98
- });
99
- setColumns(updatedColumns);
100
- setSearchColumns(searchColumns);
101
- setExcelColumns(excelColumns);
102
- setFilterColumns(filterColumns);
103
- return updatedColumns;
104
- }
105
- useEffect(() => {
106
- const columns = getColumns();
107
- sortHook.setSorts(getSorts(columns));
108
- }, []);
109
- function getTimeText(column, value) {
110
- if (!value || value === null) {
111
- return '';
112
- }
113
- const t = column.type;
114
- const DATE = new AIODate();
115
- let pattern = '{year}/{month}';
116
- if (t !== 'month') {
117
- pattern += '/{day}';
118
- if (t !== 'day') {
119
- pattern += ' {hour}';
120
- if (t === 'minute') {
121
- pattern += ' : {minute}';
122
- }
123
- else {
124
- pattern += ' : 00';
125
- }
126
- }
127
- }
128
- return DATE.getDateByPattern(value, pattern);
129
- }
130
- function add() {
131
- return __awaiter(this, void 0, void 0, function* () {
132
- if (!props.onAdd) {
133
- return;
134
- }
135
- const res = yield props.onAdd();
136
- if (res && props.onChange) {
137
- props.onChange([res, ...props.value]);
138
- }
139
- });
140
- }
141
- function remove(row, index) {
142
- return __awaiter(this, void 0, void 0, function* () {
143
- if (!props.onRemove) {
144
- return;
145
- }
146
- const res = yield props.onRemove({ row, rowIndex: index });
147
- if (res === true && props.onChange) {
148
- props.onChange(props.value.filter((o) => o._id !== row._id));
149
- }
150
- });
151
- }
152
- function exportToExcel() {
153
- let list = [];
154
- if (typeof props.excel === 'function') {
155
- list = props.excel(props.value);
156
- }
157
- else {
158
- for (let rowIndex = 0; rowIndex < props.value.length; rowIndex++) {
159
- const isFirst = rowIndex === 0;
160
- const isLast = rowIndex === props.value.length - 1;
161
- let row = props.value[rowIndex], json = {};
162
- for (let j = 0; j < excelColumns.length; j++) {
163
- const column = excelColumns[j], { excel } = column;
164
- let key = '';
165
- if (excel === true) {
166
- if (typeof column.title === 'string') {
167
- key = column.title;
168
- }
169
- else {
170
- key = 'untitle';
171
- }
172
- }
173
- else if (typeof excel === 'string') {
174
- key = excel;
175
- }
176
- else {
177
- continue;
178
- }
179
- const cellDetail = { row, rowIndex, isFirst, isLast, column, change: () => { }, isDate: isDate(column) };
180
- json[key] = tableHook.getCellValue(cellDetail, column.value, '');
181
- }
182
- list.push(json);
183
- }
184
- }
185
- UT.ExportToExcel(list, { promptText: typeof props.excel === 'string' ? props.excel : 'Inter Excel File Name' });
186
- }
187
- function getSearchedRows(rows) {
188
- if (props.onSearch !== true) {
189
- return rows;
190
- }
191
- if (!searchColumns.length || !searchValue) {
192
- return rows;
193
- }
194
- const rowsIndexDic = getRowsIndexDic();
195
- return UT.Search(rows, searchValue, (row) => {
196
- const { isFirst, isLast, rowIndex } = rowsIndexDic[(row)._id];
197
- let str = '';
198
- for (let i = 0; i < searchColumns.length; i++) {
199
- let column = searchColumns[i];
200
- const cellDetail = { row, rowIndex, isFirst, isLast, column, change: () => { }, isDate: isDate(column) };
201
- let cellValue = tableHook.getCellValue(cellDetail, column.value, '');
202
- if (cellValue) {
203
- str += cellValue + ' ';
204
- }
205
- }
206
- return str;
207
- });
208
- }
209
- function getRows() {
210
- const rows = props.value;
211
- const rowsIndexDic = {};
212
- for (let i = 0; i < props.value.length; i++) {
213
- rowsIndexDic[props.value[i]._id] = { rowIndex: i, isFirst: i === 0, isLast: i === rows.length - 1 };
214
- }
215
- setRowsIndexDic(rowsIndexDic);
216
- let searchedRows = getSearchedRows(rows);
217
- let sortedRows = sortHook.getSortedRows(searchedRows);
218
- let pagedRows = pagingHook.getPagedRows(sortedRows);
219
- return { rows: props.value, searchedRows, sortedRows, pagedRows };
220
- }
221
- function search(searchValue) {
222
- if (props.onSearch === true) {
223
- setSearchValue(searchValue);
224
- }
225
- else if (typeof props.onSearch === 'function') {
226
- props.onSearch(searchValue);
227
- }
228
- }
229
- const changeCell = (cellDetail, cellNewValue) => {
230
- if (!props.onChange) {
231
- return;
232
- }
233
- const { column } = cellDetail;
234
- if (typeof column.value !== 'string' || column.value.indexOf('row.') !== 0) {
235
- return;
236
- }
237
- let row = JSON.parse(JSON.stringify(cellDetail.row));
238
- const rowId = row._id;
239
- eval(`${column.value} = cellNewValue`);
240
- props.onChange(props.value.map((o) => o._id !== rowId ? o : row));
241
- };
242
- let ROWS = getRows();
243
- const { gap = [0, 1] } = props;
244
- let attrs = UT.AddToAttrs(props.attrs, { className: ['aio-table', props.className], style: Object.assign({ gap: gap[1] }, props.style), attrs: { ref: dom } });
245
- const context = {
246
- rootProps: props, getTimeText, isDate, columns, excelColumns, filterColumns, changeCell, tableHook, sortHook, ROWS,
247
- getRowsIndexDic, add, remove, search, exportToExcel, DragColumns, getIcon, popup,
248
- };
249
- return (_jsxs(Provider, { value: context, children: [_jsxs("div", Object.assign({}, attrs, { children: [_jsx(TableToolbar, {}), !!props.filter &&
250
- _jsx(Filterbar, { columns: filterColumns, filter: props.filter, columnOption: { text: (column) => column.title, id: (column) => column.filterId, type: (column) => column.type || 'text' } }), _jsxs("div", { className: 'aio-table-unit aio-table-scroll', style: { gap: gap[1] }, children: [_jsx(TableHeader, {}), _jsx(TableRows, {})] }), pagingHook.render()] })), popup.render()] }));
251
- };
252
- export default AIOTable;
253
- const TableRows = () => {
254
- let { ROWS, rootProps } = useProvider();
255
- let { rowOption = {}, rowsTemplate, placeholder = 'there is not any items' } = rootProps;
256
- const { before: rowBefore = () => null, after: rowAfter = () => null, template: rowTemplate, } = rowOption;
257
- let rows = ROWS.pagedRows || [];
258
- let content;
259
- if (rowsTemplate) {
260
- content = rowsTemplate(rows);
261
- }
262
- else if (rows.length) {
263
- content = rows.map((o, i) => {
264
- let { id = 'ailr' + Math.round(Math.random() * 10000000) } = o;
265
- o._id = o._id === undefined ? id : o._id;
266
- const rowDetail = {
267
- row: o, rowIndex: i,
268
- isFirst: i === 0,
269
- isLast: i === rows.length - 1
270
- };
271
- let Row;
272
- if (rowTemplate) {
273
- Row = rowTemplate(rowDetail);
274
- }
275
- else {
276
- Row = _jsx(TableRow, { rowDetail: rowDetail }, o._id);
277
- }
278
- return (_jsxs(Fragment, { children: [rowBefore(rowDetail), Row, rowAfter(rowDetail)] }, o._id));
279
- });
280
- }
281
- else if (placeholder) {
282
- content = _jsx("div", { style: { width: '100%', textAlign: 'center', padding: 12, boxSizing: 'border-box' }, children: placeholder });
283
- }
284
- else {
285
- return null;
286
- }
287
- const { gap = [0, 1] } = rootProps;
288
- return _jsx("div", { className: 'aio-table-rows', style: { gap: gap[1] }, children: content });
289
- };
290
- const TableToolbar = () => {
291
- let { add, exportToExcel, search, rootProps, excelColumns, getIcon, sortHook } = useProvider();
292
- let { toolbarAttrs, toolbar, onAdd, onSearch, value } = rootProps;
293
- toolbarAttrs = UT.AddToAttrs(toolbarAttrs, { className: 'aio-table-toolbar' });
294
- if (!onAdd && !toolbar && !onSearch && !sortHook.sorts.length && !excelColumns.length) {
295
- return null;
296
- }
297
- function getAddText() {
298
- let { addText } = rootProps;
299
- if (!rootProps.addText) {
300
- return getIcon('mdiPlusThick', 0.8);
301
- }
302
- return typeof addText === 'function' ? addText(value) : addText;
303
- }
304
- return (_jsxs("div", Object.assign({}, toolbarAttrs, { children: [toolbar && _jsx("div", { className: 'aio-table-toolbar-content', children: typeof toolbar === 'function' ? toolbar() : toolbar }), _jsx("div", { className: 'aio-table-search', children: !!onSearch && _jsx(AIOInput, { type: 'text', onChange: (value) => search(value), after: getIcon('mdiMagnify', 0.7) }) }), sortHook.renderSortButton(), !!excelColumns.length && _jsx("div", { className: 'aio-table-toolbar-button', onClick: () => exportToExcel(), children: getIcon('mdiFileExcel', 0.8) }), !!onAdd && _jsx("div", { className: 'aio-table-toolbar-button', onClick: () => add(), children: getAddText() })] })));
305
- };
306
- const TableHeader = () => {
307
- let { rootProps, columns } = useProvider();
308
- let { headerAttrs, onRemove, gap = [0, 1] } = rootProps;
309
- headerAttrs = UT.AddToAttrs(headerAttrs, { className: 'aio-table-header', style: { gap: gap[0] } });
310
- let Titles = columns.map((o, i) => _jsx(TableTitle, { column: o, isLast: i === columns.length - 1, colIndex: i }, o._id));
311
- let RemoveTitle = !onRemove ? null : _jsx("div", { className: 'aio-table-remove-title' });
312
- return _jsxs("div", Object.assign({}, headerAttrs, { children: [Titles, RemoveTitle] }));
313
- };
314
- const TableTitle = (p) => {
315
- const { column, isLast, colIndex } = p;
316
- let { tableHook, DragColumns } = useProvider();
317
- const attrs = Object.assign(Object.assign(Object.assign({}, tableHook.getTitleAttrs(column)), DragColumns.getDragAttrs(colIndex)), DragColumns.getDropAttrs(colIndex));
318
- return _jsx("div", Object.assign({}, attrs, { children: attrs.title }));
319
- };
320
- const TableRow = (props) => {
321
- const { rowDetail } = props;
322
- const { row, rowIndex } = rowDetail;
323
- const rowId = row._id;
324
- let { remove, rootProps, columns, tableHook, getIcon, isDate } = useProvider();
325
- function getCells() {
326
- return columns.map((column, i) => {
327
- const key = rowId + ' ' + column._id;
328
- const cellDetail = Object.assign(Object.assign({}, rowDetail), { column, change: (cellNewValue) => {
329
- if (!rootProps.onChange) {
330
- return;
331
- }
332
- if (typeof column.value !== 'string' || column.value.indexOf('row.') !== 0) {
333
- return;
334
- }
335
- let row = JSON.parse(JSON.stringify(cellDetail.row));
336
- eval(`${column.value} = cellNewValue`);
337
- rootProps.onChange(rootProps.value.map((o) => o._id !== rowId ? o : row));
338
- }, isDate: isDate(column) });
339
- const cellValue = tableHook.getCellValue(cellDetail, column.value);
340
- return (_jsx(TableCell, { cellDetail: cellDetail, cellValue: cellValue }, key));
341
- });
342
- }
343
- let { onRemove } = rootProps;
344
- return (_jsx(_Fragment, { children: _jsxs("div", Object.assign({}, tableHook.getRowAttrs(props.rowDetail), { children: [getCells(), onRemove ? _jsx("button", { className: 'aio-table-remove', onClick: () => remove(row, rowIndex), children: getIcon('mdiClose', 0.8) }) : null] }), rowId) }));
345
- };
346
- const TableCell = (props) => {
347
- const { cellDetail, cellValue } = props;
348
- const { row, column, isLast } = cellDetail;
349
- const { tableHook, getTimeText } = useProvider();
350
- const { template, before, after, subtext } = column;
351
- const rowId = row._id;
352
- const colId = column._id;
353
- const isTime = ['month', 'day', 'hour', 'minute'].indexOf(column.type || 'text') !== -1;
354
- const templateValue = isTime ? getTimeText(cellValue) : tableHook.getCellValue(cellDetail, template);
355
- const beforeValue = tableHook.getCellValue(cellDetail, before, undefined);
356
- const afterValue = tableHook.getCellValue(cellDetail, after, undefined);
357
- const subtextValue = tableHook.getCellValue(cellDetail, subtext, undefined);
358
- return (_jsx(Fragment, { children: _jsxs("div", Object.assign({}, tableHook.getCellAttrs(props.cellDetail, props.cellValue), { children: [beforeValue !== undefined && _jsx("div", { className: "aio-table-cell-before", children: beforeValue }), _jsxs("div", { className: `aio-table-cell-value${subtext !== undefined ? ' has-subtext' : ''}`, "data-subtext": subtextValue, children: [templateValue !== undefined && templateValue, templateValue === undefined && cellValue] }), afterValue !== undefined && _jsx("div", { className: "aio-table-cell-after", children: afterValue })] })) }, rowId + ' ' + colId));
359
- };
360
- const useTable = (getProps, getPaging) => {
361
- const DragRows = UT.useDrag((dragData, dropData, reOrder) => {
362
- const { onSwap, onChange } = getProps();
363
- const { dragIndex } = dragData;
364
- const { dropIndex, rows } = dropData;
365
- const newRows = reOrder(rows, dragIndex, dropIndex);
366
- const from = rows[dragIndex];
367
- const to = rows[dropIndex];
368
- if (typeof onSwap === 'function') {
369
- onSwap(newRows, from, to);
370
- }
371
- else if (onChange) {
372
- onChange(newRows);
373
- }
374
- });
375
- const getCellValue = (cellDetail, cellValue, def) => {
376
- const { getValue = {} } = getProps();
377
- const paging = getPaging();
378
- if (paging) {
379
- let { number, size } = paging;
380
- cellDetail = Object.assign(Object.assign({}, cellDetail), { rowIndex: cellDetail.rowIndex + ((number - 1) * size) });
381
- }
382
- let type = typeof cellValue;
383
- if (type === 'string') {
384
- const { row } = cellDetail;
385
- let result = cellValue;
386
- if (getValue[cellValue]) {
387
- result = getValue[cellValue](cellDetail);
388
- }
389
- else if (cellValue.indexOf('row.') !== -1) {
390
- try {
391
- eval(`result = ${cellValue}`);
392
- }
393
- catch (_a) {
394
- result = '';
395
- }
396
- }
397
- return result === undefined ? def : result;
398
- }
399
- if (type === 'undefined') {
400
- return def;
401
- }
402
- if (type === 'function') {
403
- return cellValue(cellDetail);
404
- }
405
- return cellValue === undefined ? def : cellValue;
406
- };
407
- const getColValue = (column, field, def) => {
408
- const colValue = column[field];
409
- let type = typeof colValue;
410
- let result;
411
- if (type === 'function') {
412
- result = colValue(column);
413
- }
414
- else {
415
- result = colValue;
416
- }
417
- return result === undefined ? def : result;
418
- };
419
- const getCellAttrs = (cellDetail, cellValue) => {
420
- const { column } = cellDetail;
421
- const attrs = getCellValue(cellDetail, column.attrs, {});
422
- const justify = getColValue(column, 'justify', false);
423
- const width = getColValue(column, 'width');
424
- const minWidth = getColValue(column, 'minWidth');
425
- const className = `aio-table-cell` + (justify ? ` aio-table-cell-justify` : '');
426
- const style = { width, minWidth, flex: width ? undefined : 1 };
427
- return UT.AddToAttrs(attrs, { className, style, attrs: { title: typeof cellValue === 'string' ? cellValue : undefined } });
428
- };
429
- const getTitleAttrs = (column) => {
430
- const attrs = getColValue(column, 'titleAttrs', {});
431
- const justify = getColValue(column, 'justify', false);
432
- const width = getColValue(column, 'width');
433
- const minWidth = getColValue(column, 'minWidth');
434
- const className = `aio-table-title` + (justify ? ` aio-table-title-justify` : '');
435
- const style = { width, minWidth, flex: width ? undefined : 1 };
436
- return UT.AddToAttrs(attrs, { className, style, attrs: { title: typeof column.title === 'string' ? column.title : undefined } });
437
- };
438
- const getRowAttrs = (rowDetail) => {
439
- const { rowOption = {}, onSwap, value, gap = [0, 1] } = getProps();
440
- const { attrs: rowAttrs } = rowOption;
441
- const attrs = rowAttrs ? rowAttrs(rowDetail) : {};
442
- let obj = UT.AddToAttrs(attrs, { className: 'aio-table-row', style: { gap: gap[0] } });
443
- if (onSwap) {
444
- obj = Object.assign(Object.assign(Object.assign({}, obj), DragRows.getDragAttrs({ dragIndex: rowDetail.rowIndex })), DragRows.getDropAttrs({ dropIndex: rowDetail.rowIndex, rows: value }));
445
- }
446
- return obj;
447
- };
448
- return { getCellValue, getColValue, getCellAttrs, getTitleAttrs, getRowAttrs };
449
- };
1
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
+ return new (P || (P = Promise))(function (resolve, reject) {
4
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
8
+ });
9
+ };
10
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
11
+ import { createContext, createRef, Fragment, useContext, useEffect, useRef, useState } from "react";
12
+ import AIOInput from "aio-input";
13
+ import * as UT from 'aio-utils';
14
+ import usePopup from "aio-popup";
15
+ import AIODate from "aio-date";
16
+ import { Filterbar, usePaging, useSort } from "aio-component-utils";
17
+ import "./index.css";
18
+ const Context = createContext({});
19
+ const Provider = (p) => _jsx(Context.Provider, { value: p.value, children: p.children });
20
+ const useProvider = () => useContext(Context);
21
+ const AIOTable = (props) => {
22
+ const popup = usePopup();
23
+ let [dom] = useState(createRef());
24
+ let [searchValue, setSearchValue] = useState('');
25
+ const [columns, setColumns] = useState([]);
26
+ const [searchColumns, setSearchColumns] = useState([]);
27
+ const [excelColumns, setExcelColumns] = useState([]);
28
+ const [filterColumns, setFilterColumns] = useState([]);
29
+ const filterColumnsRef = useRef(filterColumns);
30
+ filterColumnsRef.current = filterColumns;
31
+ const rowsIndexDicRef = useRef({});
32
+ const setRowsIndexDic = (rowsIndexDic) => rowsIndexDicRef.current = rowsIndexDic;
33
+ const getRowsIndexDic = () => rowsIndexDicRef.current;
34
+ const propsRef = useRef(props);
35
+ propsRef.current = props;
36
+ const pagingHook = usePaging({ rows: props.value, paging: props.paging, onChange: props.onChangePaging });
37
+ const tableHook = useTable(() => propsRef.current, () => pagingHook.paging);
38
+ const getIconRef = useRef(new UT.GetSvg());
39
+ const getIcon = getIconRef.current.getIcon;
40
+ const DragColumns = UT.useDrag((dragIndex, dropIndex, reOrder) => setColumns(reOrder(columns, dragIndex, dropIndex)));
41
+ const getGetValue = (sort, column) => {
42
+ if (sort.getValue) {
43
+ return sort.getValue;
44
+ }
45
+ return (row) => {
46
+ const isDate = ['month', 'day', 'hour', 'minute'].indexOf(column.type || 'text') !== -1;
47
+ const cellValue = tableHook.getCellValue({ row, rowIndex: 0, isFirst: false, isLast: false, column, change: () => { }, isDate }, column.value);
48
+ if (isDate) {
49
+ const DATE = new AIODate();
50
+ try {
51
+ return DATE.getTime(cellValue);
52
+ }
53
+ catch (_a) {
54
+ return 0;
55
+ }
56
+ }
57
+ return cellValue;
58
+ };
59
+ };
60
+ const getSorts = (columns) => {
61
+ let sorts = [];
62
+ for (let i = 0; i < columns.length; i++) {
63
+ const column = columns[i];
64
+ const { _id } = column;
65
+ const sort = column.sort === true ? { sortId: _id } : column.sort;
66
+ if (!sort) {
67
+ continue;
68
+ }
69
+ let { active = false, dir = 'dec', sortId } = sort;
70
+ let sortItem = { dir, title: sort.title || column.title, sortId, active, getValue: getGetValue(sort, column) };
71
+ sorts.push(sortItem);
72
+ }
73
+ return sorts;
74
+ };
75
+ const sortHook = useSort({
76
+ sorts: [],
77
+ rows: propsRef.current.value,
78
+ onChangeRows: props.onChange,
79
+ onChangeSort: props.onChangeSort,
80
+ });
81
+ const isDate = (column) => ['month', 'day', 'hour', 'minute'].indexOf(column.type || 'text') !== -1;
82
+ function getColumns() {
83
+ let { columns = [] } = props;
84
+ let searchColumns = [], excelColumns = [], filterColumns = [];
85
+ let updatedColumns = columns.map((o) => {
86
+ let { id = 'aitc' + Math.round(Math.random() * 1000000), filterId, search, excel } = o;
87
+ let column = Object.assign(Object.assign({}, o), { _id: id });
88
+ if (search) {
89
+ searchColumns.push(column);
90
+ }
91
+ if (excel) {
92
+ excelColumns.push(column);
93
+ }
94
+ if (filterId) {
95
+ filterColumns.push(column);
96
+ }
97
+ return column;
98
+ });
99
+ setColumns(updatedColumns);
100
+ setSearchColumns(searchColumns);
101
+ setExcelColumns(excelColumns);
102
+ setFilterColumns(filterColumns);
103
+ return updatedColumns;
104
+ }
105
+ useEffect(() => {
106
+ const columns = getColumns();
107
+ sortHook.setSorts(getSorts(columns));
108
+ }, []);
109
+ function getTimeText(column, value) {
110
+ if (!value || value === null) {
111
+ return '';
112
+ }
113
+ const t = column.type;
114
+ const DATE = new AIODate();
115
+ let pattern = '{year}/{month}';
116
+ if (t !== 'month') {
117
+ pattern += '/{day}';
118
+ if (t !== 'day') {
119
+ pattern += ' {hour}';
120
+ if (t === 'minute') {
121
+ pattern += ' : {minute}';
122
+ }
123
+ else {
124
+ pattern += ' : 00';
125
+ }
126
+ }
127
+ }
128
+ return DATE.getDateByPattern(value, pattern);
129
+ }
130
+ function add() {
131
+ return __awaiter(this, void 0, void 0, function* () {
132
+ if (!props.onAdd) {
133
+ return;
134
+ }
135
+ const res = yield props.onAdd();
136
+ if (res && props.onChange) {
137
+ props.onChange([res, ...props.value]);
138
+ }
139
+ });
140
+ }
141
+ function remove(row, index) {
142
+ return __awaiter(this, void 0, void 0, function* () {
143
+ if (!props.onRemove) {
144
+ return;
145
+ }
146
+ const res = yield props.onRemove({ row, rowIndex: index });
147
+ if (res === true && props.onChange) {
148
+ props.onChange(props.value.filter((o) => o._id !== row._id));
149
+ }
150
+ });
151
+ }
152
+ function exportToExcel() {
153
+ let list = [];
154
+ if (typeof props.excel === 'function') {
155
+ list = props.excel(props.value);
156
+ }
157
+ else {
158
+ for (let rowIndex = 0; rowIndex < props.value.length; rowIndex++) {
159
+ const isFirst = rowIndex === 0;
160
+ const isLast = rowIndex === props.value.length - 1;
161
+ let row = props.value[rowIndex], json = {};
162
+ for (let j = 0; j < excelColumns.length; j++) {
163
+ const column = excelColumns[j], { excel } = column;
164
+ let key = '';
165
+ if (excel === true) {
166
+ if (typeof column.title === 'string') {
167
+ key = column.title;
168
+ }
169
+ else {
170
+ key = 'untitle';
171
+ }
172
+ }
173
+ else if (typeof excel === 'string') {
174
+ key = excel;
175
+ }
176
+ else {
177
+ continue;
178
+ }
179
+ const cellDetail = { row, rowIndex, isFirst, isLast, column, change: () => { }, isDate: isDate(column) };
180
+ json[key] = tableHook.getCellValue(cellDetail, column.value, '');
181
+ }
182
+ list.push(json);
183
+ }
184
+ }
185
+ UT.ExportToExcel(list, { promptText: typeof props.excel === 'string' ? props.excel : 'Inter Excel File Name' });
186
+ }
187
+ function getSearchedRows(rows) {
188
+ if (props.onSearch !== true) {
189
+ return rows;
190
+ }
191
+ if (!searchColumns.length || !searchValue) {
192
+ return rows;
193
+ }
194
+ const rowsIndexDic = getRowsIndexDic();
195
+ return UT.Search(rows, searchValue, (row) => {
196
+ const { isFirst, isLast, rowIndex } = rowsIndexDic[(row)._id];
197
+ let str = '';
198
+ for (let i = 0; i < searchColumns.length; i++) {
199
+ let column = searchColumns[i];
200
+ const cellDetail = { row, rowIndex, isFirst, isLast, column, change: () => { }, isDate: isDate(column) };
201
+ let cellValue = tableHook.getCellValue(cellDetail, column.value, '');
202
+ if (cellValue) {
203
+ str += cellValue + ' ';
204
+ }
205
+ }
206
+ return str;
207
+ });
208
+ }
209
+ function getRows() {
210
+ const rows = props.value;
211
+ const rowsIndexDic = {};
212
+ for (let i = 0; i < props.value.length; i++) {
213
+ rowsIndexDic[props.value[i]._id] = { rowIndex: i, isFirst: i === 0, isLast: i === rows.length - 1 };
214
+ }
215
+ setRowsIndexDic(rowsIndexDic);
216
+ let searchedRows = getSearchedRows(rows);
217
+ let sortedRows = sortHook.getSortedRows(searchedRows);
218
+ let pagedRows = pagingHook.getPagedRows(sortedRows);
219
+ return { rows: props.value, searchedRows, sortedRows, pagedRows };
220
+ }
221
+ function search(searchValue) {
222
+ if (props.onSearch === true) {
223
+ setSearchValue(searchValue);
224
+ }
225
+ else if (typeof props.onSearch === 'function') {
226
+ props.onSearch(searchValue);
227
+ }
228
+ }
229
+ const changeCell = (cellDetail, cellNewValue) => {
230
+ if (!props.onChange) {
231
+ return;
232
+ }
233
+ const { column } = cellDetail;
234
+ if (typeof column.value !== 'string' || column.value.indexOf('row.') !== 0) {
235
+ return;
236
+ }
237
+ let row = JSON.parse(JSON.stringify(cellDetail.row));
238
+ const rowId = row._id;
239
+ eval(`${column.value} = cellNewValue`);
240
+ props.onChange(props.value.map((o) => o._id !== rowId ? o : row));
241
+ };
242
+ let ROWS = getRows();
243
+ const { gap = [0, 1] } = props;
244
+ let attrs = UT.AddToAttrs(props.attrs, { className: ['aio-table', props.className], style: Object.assign({ gap: gap[1] }, props.style), attrs: { ref: dom } });
245
+ const context = {
246
+ rootProps: props, getTimeText, isDate, columns, excelColumns, filterColumns, changeCell, tableHook, sortHook, ROWS,
247
+ getRowsIndexDic, add, remove, search, exportToExcel, DragColumns, getIcon, popup,
248
+ };
249
+ return (_jsxs(Provider, { value: context, children: [_jsxs("div", Object.assign({}, attrs, { children: [_jsx(TableToolbar, {}), !!props.filter &&
250
+ _jsx(Filterbar, { columns: filterColumns, filter: props.filter, columnOption: { text: (column) => column.title, id: (column) => column.filterId, type: (column) => column.type || 'text' } }), _jsxs("div", { className: 'aio-table-unit aio-table-scroll', style: { gap: gap[1] }, children: [_jsx(TableHeader, {}), _jsx(TableRows, {})] }), pagingHook.render()] })), popup.render()] }));
251
+ };
252
+ export default AIOTable;
253
+ const TableRows = () => {
254
+ let { ROWS, rootProps } = useProvider();
255
+ let { rowOption = {}, rowsTemplate, placeholder = 'there is not any items' } = rootProps;
256
+ const { before: rowBefore = () => null, after: rowAfter = () => null, template: rowTemplate, } = rowOption;
257
+ let rows = ROWS.pagedRows || [];
258
+ let content;
259
+ if (rowsTemplate) {
260
+ content = rowsTemplate(rows);
261
+ }
262
+ else if (rows.length) {
263
+ content = rows.map((o, i) => {
264
+ let { id = 'ailr' + Math.round(Math.random() * 10000000) } = o;
265
+ o._id = o._id === undefined ? id : o._id;
266
+ const rowDetail = {
267
+ row: o, rowIndex: i,
268
+ isFirst: i === 0,
269
+ isLast: i === rows.length - 1
270
+ };
271
+ let Row;
272
+ if (rowTemplate) {
273
+ Row = rowTemplate(rowDetail);
274
+ }
275
+ else {
276
+ Row = _jsx(TableRow, { rowDetail: rowDetail }, o._id);
277
+ }
278
+ return (_jsxs(Fragment, { children: [rowBefore(rowDetail), Row, rowAfter(rowDetail)] }, o._id));
279
+ });
280
+ }
281
+ else if (placeholder) {
282
+ content = _jsx("div", { style: { width: '100%', textAlign: 'center', padding: 12, boxSizing: 'border-box' }, children: placeholder });
283
+ }
284
+ else {
285
+ return null;
286
+ }
287
+ const { gap = [0, 1] } = rootProps;
288
+ return _jsx("div", { className: 'aio-table-rows', style: { gap: gap[1] }, children: content });
289
+ };
290
+ const TableToolbar = () => {
291
+ let { add, exportToExcel, search, rootProps, excelColumns, getIcon, sortHook } = useProvider();
292
+ let { toolbarAttrs, toolbar, onAdd, onSearch, value } = rootProps;
293
+ toolbarAttrs = UT.AddToAttrs(toolbarAttrs, { className: 'aio-table-toolbar' });
294
+ if (!onAdd && !toolbar && !onSearch && !sortHook.sorts.length && !excelColumns.length) {
295
+ return null;
296
+ }
297
+ function getAddText() {
298
+ let { addText } = rootProps;
299
+ if (!rootProps.addText) {
300
+ return getIcon('mdiPlusThick', 0.8);
301
+ }
302
+ return typeof addText === 'function' ? addText(value) : addText;
303
+ }
304
+ return (_jsxs("div", Object.assign({}, toolbarAttrs, { children: [toolbar && _jsx("div", { className: 'aio-table-toolbar-content', children: typeof toolbar === 'function' ? toolbar() : toolbar }), _jsx("div", { className: 'aio-table-search', children: !!onSearch && _jsx(AIOInput, { type: 'text', onChange: (value) => search(value), after: getIcon('mdiMagnify', 0.7) }) }), sortHook.renderSortButton(), !!excelColumns.length && _jsx("div", { className: 'aio-table-toolbar-button', onClick: () => exportToExcel(), children: getIcon('mdiFileExcel', 0.8) }), !!onAdd && _jsx("div", { className: 'aio-table-toolbar-button', onClick: () => add(), children: getAddText() })] })));
305
+ };
306
+ const TableHeader = () => {
307
+ let { rootProps, columns } = useProvider();
308
+ let { headerAttrs, onRemove, gap = [0, 1] } = rootProps;
309
+ headerAttrs = UT.AddToAttrs(headerAttrs, { className: 'aio-table-header', style: { gap: gap[0] } });
310
+ let Titles = columns.map((o, i) => _jsx(TableTitle, { column: o, isLast: i === columns.length - 1, colIndex: i }, o._id));
311
+ let RemoveTitle = !onRemove ? null : _jsx("div", { className: 'aio-table-remove-title' });
312
+ return _jsxs("div", Object.assign({}, headerAttrs, { children: [Titles, RemoveTitle] }));
313
+ };
314
+ const TableTitle = (p) => {
315
+ const { column, isLast, colIndex } = p;
316
+ let { tableHook, DragColumns } = useProvider();
317
+ const attrs = Object.assign(Object.assign(Object.assign({}, tableHook.getTitleAttrs(column)), DragColumns.getDragAttrs(colIndex)), DragColumns.getDropAttrs(colIndex));
318
+ return _jsx("div", Object.assign({}, attrs, { children: attrs.title }));
319
+ };
320
+ const TableRow = (props) => {
321
+ const { rowDetail } = props;
322
+ const { row, rowIndex } = rowDetail;
323
+ const rowId = row._id;
324
+ let { remove, rootProps, columns, tableHook, getIcon, isDate } = useProvider();
325
+ function getCells() {
326
+ return columns.map((column, i) => {
327
+ const key = rowId + ' ' + column._id;
328
+ const cellDetail = Object.assign(Object.assign({}, rowDetail), { column, change: (cellNewValue) => {
329
+ if (!rootProps.onChange) {
330
+ return;
331
+ }
332
+ if (typeof column.value !== 'string' || column.value.indexOf('row.') !== 0) {
333
+ return;
334
+ }
335
+ let row = JSON.parse(JSON.stringify(cellDetail.row));
336
+ eval(`${column.value} = cellNewValue`);
337
+ rootProps.onChange(rootProps.value.map((o) => o._id !== rowId ? o : row));
338
+ }, isDate: isDate(column) });
339
+ const cellValue = tableHook.getCellValue(cellDetail, column.value);
340
+ return (_jsx(TableCell, { cellDetail: cellDetail, cellValue: cellValue }, key));
341
+ });
342
+ }
343
+ let { onRemove } = rootProps;
344
+ return (_jsx(_Fragment, { children: _jsxs("div", Object.assign({}, tableHook.getRowAttrs(props.rowDetail), { children: [getCells(), onRemove ? _jsx("button", { className: 'aio-table-remove', onClick: () => remove(row, rowIndex), children: getIcon('mdiClose', 0.8) }) : null] }), rowId) }));
345
+ };
346
+ const TableCell = (props) => {
347
+ const { cellDetail, cellValue } = props;
348
+ const { row, column, isLast } = cellDetail;
349
+ const { tableHook, getTimeText } = useProvider();
350
+ const { template, before, after, subtext } = column;
351
+ const rowId = row._id;
352
+ const colId = column._id;
353
+ const isTime = ['month', 'day', 'hour', 'minute'].indexOf(column.type || 'text') !== -1;
354
+ const templateValue = isTime ? getTimeText(cellValue) : tableHook.getCellValue(cellDetail, template);
355
+ const beforeValue = tableHook.getCellValue(cellDetail, before, undefined);
356
+ const afterValue = tableHook.getCellValue(cellDetail, after, undefined);
357
+ const subtextValue = tableHook.getCellValue(cellDetail, subtext, undefined);
358
+ return (_jsx(Fragment, { children: _jsxs("div", Object.assign({}, tableHook.getCellAttrs(props.cellDetail, props.cellValue), { children: [beforeValue !== undefined && _jsx("div", { className: "aio-table-cell-before", children: beforeValue }), _jsxs("div", { className: `aio-table-cell-value${subtext !== undefined ? ' has-subtext' : ''}`, "data-subtext": subtextValue, children: [templateValue !== undefined && templateValue, templateValue === undefined && cellValue] }), afterValue !== undefined && _jsx("div", { className: "aio-table-cell-after", children: afterValue })] })) }, rowId + ' ' + colId));
359
+ };
360
+ const useTable = (getProps, getPaging) => {
361
+ const DragRows = UT.useDrag((dragData, dropData, reOrder) => {
362
+ const { onSwap, onChange } = getProps();
363
+ const { dragIndex } = dragData;
364
+ const { dropIndex, rows } = dropData;
365
+ const newRows = reOrder(rows, dragIndex, dropIndex);
366
+ const from = rows[dragIndex];
367
+ const to = rows[dropIndex];
368
+ if (typeof onSwap === 'function') {
369
+ onSwap(newRows, from, to);
370
+ }
371
+ else if (onChange) {
372
+ onChange(newRows);
373
+ }
374
+ });
375
+ const getCellValue = (cellDetail, cellValue, def) => {
376
+ const { getValue = {} } = getProps();
377
+ const paging = getPaging();
378
+ if (paging) {
379
+ let { number, size } = paging;
380
+ cellDetail = Object.assign(Object.assign({}, cellDetail), { rowIndex: cellDetail.rowIndex + ((number - 1) * size) });
381
+ }
382
+ let type = typeof cellValue;
383
+ if (type === 'string') {
384
+ const { row } = cellDetail;
385
+ let result = cellValue;
386
+ if (getValue[cellValue]) {
387
+ result = getValue[cellValue](cellDetail);
388
+ }
389
+ else if (cellValue.indexOf('row.') !== -1) {
390
+ try {
391
+ eval(`result = ${cellValue}`);
392
+ }
393
+ catch (_a) {
394
+ result = '';
395
+ }
396
+ }
397
+ return result === undefined ? def : result;
398
+ }
399
+ if (type === 'undefined') {
400
+ return def;
401
+ }
402
+ if (type === 'function') {
403
+ return cellValue(cellDetail);
404
+ }
405
+ return cellValue === undefined ? def : cellValue;
406
+ };
407
+ const getColValue = (column, field, def) => {
408
+ const colValue = column[field];
409
+ let type = typeof colValue;
410
+ let result;
411
+ if (type === 'function') {
412
+ result = colValue(column);
413
+ }
414
+ else {
415
+ result = colValue;
416
+ }
417
+ return result === undefined ? def : result;
418
+ };
419
+ const getCellAttrs = (cellDetail, cellValue) => {
420
+ const { column } = cellDetail;
421
+ const attrs = getCellValue(cellDetail, column.attrs, {});
422
+ const justify = getColValue(column, 'justify', false);
423
+ const width = getColValue(column, 'width');
424
+ const minWidth = getColValue(column, 'minWidth');
425
+ const className = `aio-table-cell` + (justify ? ` aio-table-cell-justify` : '');
426
+ const style = { width, minWidth, flex: width ? undefined : 1 };
427
+ return UT.AddToAttrs(attrs, { className, style, attrs: { title: typeof cellValue === 'string' ? cellValue : undefined } });
428
+ };
429
+ const getTitleAttrs = (column) => {
430
+ const attrs = getColValue(column, 'titleAttrs', {});
431
+ const justify = getColValue(column, 'justify', false);
432
+ const width = getColValue(column, 'width');
433
+ const minWidth = getColValue(column, 'minWidth');
434
+ const className = `aio-table-title` + (justify ? ` aio-table-title-justify` : '');
435
+ const style = { width, minWidth, flex: width ? undefined : 1 };
436
+ return UT.AddToAttrs(attrs, { className, style, attrs: { title: typeof column.title === 'string' ? column.title : undefined } });
437
+ };
438
+ const getRowAttrs = (rowDetail) => {
439
+ const { rowOption = {}, onSwap, value, gap = [0, 1] } = getProps();
440
+ const { attrs: rowAttrs } = rowOption;
441
+ const attrs = rowAttrs ? rowAttrs(rowDetail) : {};
442
+ let obj = UT.AddToAttrs(attrs, { className: 'aio-table-row', style: { gap: gap[0] } });
443
+ if (onSwap) {
444
+ obj = Object.assign(Object.assign(Object.assign({}, obj), DragRows.getDragAttrs({ dragIndex: rowDetail.rowIndex })), DragRows.getDropAttrs({ dropIndex: rowDetail.rowIndex, rows: value }));
445
+ }
446
+ return obj;
447
+ };
448
+ return { getCellValue, getColValue, getCellAttrs, getTitleAttrs, getRowAttrs };
449
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "aio-table",
3
- "version": "9.1.0",
3
+ "version": "9.1.2",
4
4
  "description": "all in one table. tree mode , simple mode , tree mode, gantt mode , groupby mode, freeze mode.",
5
5
  "main": "index.js",
6
6
  "types":"index.d.ts",