@imposium-hub/components 1.26.3 → 1.27.0

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 (7) hide show
  1. package/components/assets/AssetField.tsx +2 -2
  2. package/components/assets/AssetsTableNameCell.tsx +2 -15
  3. package/components/assets/DataTableDnDWrapper.tsx +34 -0
  4. package/components/data-table/DataTable.tsx +64 -51
  5. package/dist/components.js +2 -2
  6. package/dist/components.js.map +1 -1
  7. package/package.json +1 -1
package/components/assets/AssetField.tsx CHANGED
@@ -94,7 +94,7 @@ class AssetField extends React.PureComponent<IAssetFieldProps, IAssetFieldState>
94
94
 
95
95
  private onAssetDrop(data, m) {
96
96
 
97
- const {assetData, assetData: {name, id, type}} = data;
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(assetData);
105
+ this.props.onChange(rowData);
106
106
  });
107
107
  } else {
108
108
  if (this.props.onError) {
package/components/assets/AssetsTableNameCell.tsx CHANGED
@@ -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, row: {original: {name, id}}}} = props;
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 ref = {drag}>
19
+ <div>
33
20
  <TextField
34
21
  controlled = {true}
35
22
  value ={name}
package/components/assets/DataTableDnDWrapper.tsx ADDED
@@ -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;
package/components/data-table/DataTable.tsx CHANGED
@@ -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
- return (
348
- <React.Fragment key = {`row-${i}`}>
349
- <tr
350
- {...row.getRowProps()}
351
- ref = {activeRef}
352
- className = {`ip-table-row ${selectedClass}`}
353
- onClick = {(e) => {
354
- const onClick = () => {
355
- if (typeof props.onRowClick === 'function') {
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
- {row.cells.map((cell) => (
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
- {...cell.getCellProps()}
378
- className = {`ip-table-col ${(cell.column.overflowVisible) ? 'overflow-visible' : ''}`.trim()}
395
+ className = {`ip-pivot-col ${selectedClass}`}
396
+ colSpan = {visibleColumns.length}
379
397
  >
380
- {cell.render('Cell')}
398
+ {renderPivotComponent(row)}
381
399
  </td>
382
- ))}
383
- </tr>
384
-
385
- {(row.isExpanded) &&
386
- (
387
- <tr
388
- {...row.getRowProps({key: 'pivot-row'})}
389
- className = 'ip-pivot-row'
390
- >
391
- <td
392
- className = {`ip-pivot-col ${selectedClass}`}
393
- colSpan = {visibleColumns.length}
394
- >
395
- {renderPivotComponent(row)}
396
- </td>
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>