@imposium-hub/components 1.26.3 → 1.27.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/assets/AssetField.tsx +2 -2
- package/components/assets/AssetsTableNameCell.tsx +2 -15
- package/components/assets/DataTableDnDWrapper.tsx +34 -0
- package/components/data-table/DataTable.tsx +64 -51
- package/dist/components.js +2 -2
- package/dist/components.js.map +1 -1
- package/package.json +1 -1
- package/redux/actions/asset-list.ts +9 -11
- package/services/API.ts +11 -0
|
@@ -94,7 +94,7 @@ class AssetField extends React.PureComponent<IAssetFieldProps, IAssetFieldState>
|
|
|
94
94
|
|
|
95
95
|
private onAssetDrop(data, m) {
|
|
96
96
|
|
|
97
|
-
const {
|
|
97
|
+
const {rowData, rowData: {name, id, type}} = data;
|
|
98
98
|
const { accepts } = this.props;
|
|
99
99
|
|
|
100
100
|
if (type === accepts) {
|
|
@@ -102,7 +102,7 @@ class AssetField extends React.PureComponent<IAssetFieldProps, IAssetFieldState>
|
|
|
102
102
|
assetName: name,
|
|
103
103
|
error: false
|
|
104
104
|
}, () => {
|
|
105
|
-
this.props.onChange(
|
|
105
|
+
this.props.onChange(rowData);
|
|
106
106
|
});
|
|
107
107
|
} else {
|
|
108
108
|
if (this.props.onError) {
|
|
@@ -4,10 +4,6 @@ import { updateAssetName } from '../../redux/actions/asset-list';
|
|
|
4
4
|
import { connect } from 'react-redux';
|
|
5
5
|
import { bindActionCreators } from 'redux';
|
|
6
6
|
import { IImposiumAPI } from '../../services/API';
|
|
7
|
-
import { useDrag } from 'react-dnd';
|
|
8
|
-
import { ASSET_DND_TYPES } from '../../constants/dnd';
|
|
9
|
-
|
|
10
|
-
const DRAGGER_NAME : string = 'Asset';
|
|
11
7
|
|
|
12
8
|
interface IAssetsTableNameCell {
|
|
13
9
|
cell : any;
|
|
@@ -17,19 +13,10 @@ interface IAssetsTableNameCell {
|
|
|
17
13
|
|
|
18
14
|
const AssetsTableNameCell : React.FC<IAssetsTableNameCell> = (props : IAssetsTableNameCell) => {
|
|
19
15
|
|
|
20
|
-
const {cell: {row
|
|
21
|
-
|
|
22
|
-
const [_, drag] = useDrag({
|
|
23
|
-
type: ASSET_DND_TYPES.ASSET_NAME,
|
|
24
|
-
item: {
|
|
25
|
-
name: DRAGGER_NAME,
|
|
26
|
-
assetData: row.original,
|
|
27
|
-
type: ASSET_DND_TYPES.ASSET_NAME
|
|
28
|
-
},
|
|
29
|
-
});
|
|
16
|
+
const {cell: {row: {original: {name, id}}}} = props;
|
|
30
17
|
|
|
31
18
|
return (
|
|
32
|
-
<div
|
|
19
|
+
<div>
|
|
33
20
|
<TextField
|
|
34
21
|
controlled = {true}
|
|
35
22
|
value ={name}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { useDrag } from 'react-dnd';
|
|
3
|
+
import { ASSET_DND_TYPES } from '../../constants/dnd';
|
|
4
|
+
|
|
5
|
+
const DRAGGER_NAME : string = 'Asset';
|
|
6
|
+
|
|
7
|
+
interface IDataTableDnDWrapper {
|
|
8
|
+
children : any;
|
|
9
|
+
dndType : string;
|
|
10
|
+
dndName : string;
|
|
11
|
+
row : any;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
const DataTableDndWrapper : React.FC<IDataTableDnDWrapper> = (props : IDataTableDnDWrapper) => {
|
|
15
|
+
|
|
16
|
+
const {dndType, dndName, row} = props;
|
|
17
|
+
|
|
18
|
+
const [_, drag] = useDrag({
|
|
19
|
+
type: dndType,
|
|
20
|
+
item: {
|
|
21
|
+
name: dndName,
|
|
22
|
+
rowData: row.original,
|
|
23
|
+
type: dndType
|
|
24
|
+
},
|
|
25
|
+
});
|
|
26
|
+
|
|
27
|
+
return (
|
|
28
|
+
<div ref = {drag}>
|
|
29
|
+
{props.children}
|
|
30
|
+
</div>
|
|
31
|
+
);
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
export default DataTableDndWrapper;
|
|
@@ -12,6 +12,7 @@ import {
|
|
|
12
12
|
useResizeColumns,
|
|
13
13
|
usePagination,
|
|
14
14
|
} from 'react-table';
|
|
15
|
+
import DataTableDnDWrapper from '../assets/DataTableDnDWrapper';
|
|
15
16
|
|
|
16
17
|
const DataTableLoader : React.FC<any> = (p) => (
|
|
17
18
|
(<div className = 'ip-table-loader'><Spinner /></div>)
|
|
@@ -49,6 +50,9 @@ interface IDataTableProps {
|
|
|
49
50
|
freezeWhenExpanded? : boolean;
|
|
50
51
|
customPaginator? : boolean;
|
|
51
52
|
pages ? : number;
|
|
53
|
+
dndType : string;
|
|
54
|
+
dndName : string;
|
|
55
|
+
dnd : boolean;
|
|
52
56
|
onFetchData? : (...args) => any;
|
|
53
57
|
|
|
54
58
|
// organize re-used & new props here
|
|
@@ -344,61 +348,70 @@ const DataTable : React.FC<IDataTableProps> = (props : IDataTableProps) => {
|
|
|
344
348
|
|
|
345
349
|
prepareRow(row);
|
|
346
350
|
|
|
347
|
-
|
|
348
|
-
<
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
onClick =
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
props.onRowClick(row);
|
|
357
|
-
}
|
|
358
|
-
};
|
|
359
|
-
|
|
360
|
-
if (!doubleClickEnabled) {
|
|
361
|
-
onClick();
|
|
362
|
-
}
|
|
363
|
-
|
|
364
|
-
if (e.detail === 1 && doubleClickEnabled) {
|
|
365
|
-
doubleClickTimeout = window.setTimeout(onClick, 200);
|
|
366
|
-
}
|
|
367
|
-
}}
|
|
368
|
-
onDoubleClick = {(e) => {
|
|
369
|
-
clearTimeout(doubleClickTimeout);
|
|
370
|
-
if (doubleClickEnabled) {
|
|
371
|
-
props.onRowDoubleClick(row);
|
|
351
|
+
const rowContent = <>
|
|
352
|
+
<tr
|
|
353
|
+
{...row.getRowProps()}
|
|
354
|
+
ref = {activeRef}
|
|
355
|
+
className = {`ip-table-row ${selectedClass}`}
|
|
356
|
+
onClick = {(e) => {
|
|
357
|
+
const onClick = () => {
|
|
358
|
+
if (typeof props.onRowClick === 'function') {
|
|
359
|
+
props.onRowClick(row);
|
|
372
360
|
}
|
|
373
|
-
}
|
|
374
|
-
|
|
375
|
-
|
|
361
|
+
};
|
|
362
|
+
|
|
363
|
+
if (!doubleClickEnabled) {
|
|
364
|
+
onClick();
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
if (e.detail === 1 && doubleClickEnabled) {
|
|
368
|
+
doubleClickTimeout = window.setTimeout(onClick, 200);
|
|
369
|
+
}
|
|
370
|
+
}}
|
|
371
|
+
onDoubleClick = {(e) => {
|
|
372
|
+
clearTimeout(doubleClickTimeout);
|
|
373
|
+
if (doubleClickEnabled) {
|
|
374
|
+
props.onRowDoubleClick(row);
|
|
375
|
+
}
|
|
376
|
+
}}
|
|
377
|
+
>
|
|
378
|
+
{row.cells.map((cell) => (
|
|
379
|
+
<td
|
|
380
|
+
{...cell.getCellProps()}
|
|
381
|
+
className = {`ip-table-col ${(cell.column.overflowVisible) ? 'overflow-visible' : ''}`.trim()}
|
|
382
|
+
>
|
|
383
|
+
{cell.render('Cell')}
|
|
384
|
+
</td>
|
|
385
|
+
))}
|
|
386
|
+
</tr>
|
|
387
|
+
|
|
388
|
+
{(row.isExpanded) &&
|
|
389
|
+
(
|
|
390
|
+
<tr
|
|
391
|
+
{...row.getRowProps({key: 'pivot-row'})}
|
|
392
|
+
className = 'ip-pivot-row'
|
|
393
|
+
>
|
|
376
394
|
<td
|
|
377
|
-
{
|
|
378
|
-
|
|
395
|
+
className = {`ip-pivot-col ${selectedClass}`}
|
|
396
|
+
colSpan = {visibleColumns.length}
|
|
379
397
|
>
|
|
380
|
-
{
|
|
398
|
+
{renderPivotComponent(row)}
|
|
381
399
|
</td>
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
</tr>
|
|
398
|
-
)
|
|
399
|
-
}
|
|
400
|
-
</React.Fragment>
|
|
401
|
-
);
|
|
400
|
+
</tr>
|
|
401
|
+
)
|
|
402
|
+
}
|
|
403
|
+
</>;
|
|
404
|
+
|
|
405
|
+
if (props.dnd) {
|
|
406
|
+
return <DataTableDnDWrapper key = {`row-${i}`} row = {row} dndType = {props.dndType} dndName = {props.dndName}>
|
|
407
|
+
{rowContent}
|
|
408
|
+
</DataTableDnDWrapper>;
|
|
409
|
+
} else {
|
|
410
|
+
|
|
411
|
+
return <React.Fragment key = {`row-${i}`}>
|
|
412
|
+
{rowContent}
|
|
413
|
+
</React.Fragment>;
|
|
414
|
+
}
|
|
402
415
|
})}
|
|
403
416
|
</tbody>
|
|
404
417
|
</table>
|