mautourco-components 0.2.57 → 0.2.58

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 (4) hide show
  1. package/dist/components/organisms/Table/Table.d.ts +4 -1
  2. package/dist/components/organisms/Table/Table.js +5 -5
  3. package/package.json +1 -1
  4. package/src/components/organisms/Table/Table.tsx +17 -7
package/dist/components/organisms/Table/Table.d.ts CHANGED
@@ -24,7 +24,10 @@ export interface TableProps<T extends TableRowData<T>> {
24
24
  /** Data for the table */
25
25
  data: T[];
26
26
  /** Callback function to be called when a row is clicked */
27
- onClickRow?: (e: React.MouseEvent<HTMLTableRowElement>, row: T) => void;
27
+ onClickRow?: (e: React.MouseEvent<HTMLTableRowElement>, row: T, payload?: {
28
+ parentIndex?: number;
29
+ childIndex?: number;
30
+ }) => void;
28
31
  /** Pagination configuration for the table */
29
32
  pagination?: PaginationProps;
30
33
  /** Total rows in the table */
package/dist/components/organisms/Table/Table.js CHANGED
@@ -33,7 +33,7 @@ import { TableCell } from './TableCell';
33
33
  * @returns
34
34
  */
35
35
  var NestedContent = function (_a) {
36
- var rowIndex = _a.rowIndex, columns = _a.columns, children = _a.children, isGrouped = _a.isGrouped, onClickRow = _a.onClickRow;
36
+ var rowIndex = _a.rowIndex, columns = _a.columns, children = _a.children, isGrouped = _a.isGrouped, parentIndex = _a.parentIndex, onClickRow = _a.onClickRow;
37
37
  var contentRef = useRef(null);
38
38
  var _b = useState(0), height = _b[0], setHeight = _b[1];
39
39
  useEffect(function () {
@@ -48,7 +48,7 @@ var NestedContent = function (_a) {
48
48
  opacity: { duration: 0.15, ease: 'easeInOut' },
49
49
  }, className: "table__nested-wrapper", children: _jsx("table", { className: "table", children: _jsx("tbody", { children: children.map(function (child, childIndex) { return (_jsx("tr", { className: cn(child.className, {
50
50
  'table__row-clickable': onClickRow,
51
- }), onClick: function (e) { return onClickRow === null || onClickRow === void 0 ? void 0 : onClickRow(e, child); }, children: _jsx(TableCell, { columns: columns, row: child, rowIndex: childIndex, childIndex: childIndex }) }, "ch-".concat(rowIndex, "-").concat(childIndex))); }) }) }) }));
51
+ }), onClick: function (e) { return onClickRow === null || onClickRow === void 0 ? void 0 : onClickRow(e, child, { parentIndex: parentIndex, childIndex: childIndex }); }, children: _jsx(TableCell, { columns: columns, row: child, rowIndex: childIndex, childIndex: childIndex }) }, "ch-".concat(rowIndex, "-").concat(childIndex))); }) }) }) }));
52
52
  };
53
53
  /**
54
54
  * A table component for displaying structured data in rows and columns. Supports customizable column definitions and data rows.
@@ -85,12 +85,12 @@ export function Table(props) {
85
85
  'table__row-nested': (_b = row.children) === null || _b === void 0 ? void 0 : _b.length,
86
86
  'table__row-clickable': onClickRow,
87
87
  'table__row-highlighted': row.isHighlighted,
88
- }), onClick: function (e) { return onClickRow === null || onClickRow === void 0 ? void 0 : onClickRow(e, row); }, children: row.isHighlighted ? (_jsx("td", { colSpan: columns.length, className: "table__cell-highlighted", children: _jsx("div", { className: "table__row-div-highlighted", children: _jsx("table", { className: "table", children: _jsx("tbody", { children: _jsx("tr", { children: _jsx(TableCell, { columns: columns, row: row, rowIndex: rowIndex }) }) }) }) }) })) : (_jsx(TableCell, { columns: columns, row: row, rowIndex: rowIndex })) }));
89
- return (_jsx(Fragment, { children: isGrouped ? (row.children && row.children.length > 0 ? (_jsx("tr", { className: "table__row-grouped", children: _jsx("td", { colSpan: columns.length, children: _jsx(NestedContent, { isGrouped: isGrouped, rowIndex: rowIndex, columns: columns, children: row.children || [], onClickRow: onClickRow }) }) })) : (defaultTable)) : !row.children ? (defaultTable) : (_jsx("tr", { className: "table__row-with-children", onClick: function (e) { return onClickRow === null || onClickRow === void 0 ? void 0 : onClickRow(e, row); }, children: _jsx("td", { colSpan: columns.length, className: cn({
88
+ }), onClick: function (e) { return onClickRow === null || onClickRow === void 0 ? void 0 : onClickRow(e, row, { parentIndex: rowIndex }); }, children: row.isHighlighted ? (_jsx("td", { colSpan: columns.length, className: "table__cell-highlighted", children: _jsx("div", { className: "table__row-div-highlighted", children: _jsx("table", { className: "table", children: _jsx("tbody", { children: _jsx("tr", { children: _jsx(TableCell, { columns: columns, row: row, rowIndex: rowIndex }) }) }) }) }) })) : (_jsx(TableCell, { columns: columns, row: row, rowIndex: rowIndex })) }));
89
+ return (_jsx(Fragment, { children: isGrouped ? (row.children && row.children.length > 0 ? (_jsx("tr", { className: "table__row-grouped", children: _jsx("td", { colSpan: columns.length, children: _jsx(NestedContent, { isGrouped: isGrouped, rowIndex: rowIndex, columns: columns, children: row.children || [], onClickRow: onClickRow, parentIndex: rowIndex }) }) })) : (defaultTable)) : !row.children ? (defaultTable) : (_jsx("tr", { className: "table__row-with-children", children: _jsx("td", { colSpan: columns.length, className: cn({
90
90
  'table__children--visible': hasVisibleChildren,
91
91
  }), children: _jsx("table", { className: "table", children: _jsxs("tbody", { children: [defaultTable, _jsx(AnimatePresence, { initial: false, children: hasVisibleChildren && (_jsx("tr", { className: cn('table__no-hover', {
92
92
  'table__row-nested': row.children && row.children.length > 0,
93
- }), children: _jsx("td", { colSpan: columns.length, className: "table__cell-nested", children: _jsx(NestedContent, { rowIndex: rowIndex, columns: columns, children: row.children || [] }) }) }, "nested-".concat(rowIndex))) })] }) }) }) })) }, "rw-".concat(rowIndex)));
93
+ }), children: _jsx("td", { colSpan: columns.length, className: "table__cell-nested", children: _jsx(NestedContent, { rowIndex: rowIndex, columns: columns, parentIndex: rowIndex, children: row.children || [], onClickRow: onClickRow }) }) }, "nested-".concat(rowIndex))) })] }) }) }) })) }, "rw-".concat(rowIndex)));
94
94
  }), data.length === 0 && (_jsx("tr", { children: _jsx("td", { colSpan: columns.length, className: "table__cell-empty", children: _jsx(Text, { size: "md", variant: "bold", className: "text-center", children: "No data found" }) }) }))] })] }) }), hasTotal && (_jsx("div", { className: 'table__total-container', children: _jsx("table", { className: "table", children: _jsx("tbody", { className: cn('table__total', {
95
95
  'table__total--dashed': isTotalBorderDash,
96
96
  }), children: _jsxs("tr", { children: [_jsx("td", { colSpan: columns.length - 1 }), _jsx("td", { style: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mautourco-components",
3
- "version": "0.2.57",
3
+ "version": "0.2.58",
4
4
  "private": false,
5
5
  "description": "Bibliothèque de composants Mautourco pour le redesign",
6
6
  "main": "dist/index.js",
package/src/components/organisms/Table/Table.tsx CHANGED
@@ -36,7 +36,14 @@ export interface TableProps<T extends TableRowData<T>> {
36
36
  data: T[];
37
37
 
38
38
  /** Callback function to be called when a row is clicked */
39
- onClickRow?: (e: React.MouseEvent<HTMLTableRowElement>, row: T) => void;
39
+ onClickRow?: (
40
+ e: React.MouseEvent<HTMLTableRowElement>,
41
+ row: T,
42
+ payload?: {
43
+ parentIndex?: number;
44
+ childIndex?: number;
45
+ }
46
+ ) => void;
40
47
 
41
48
  /** Pagination configuration for the table */
42
49
  pagination?: PaginationProps;
@@ -75,13 +82,15 @@ const NestedContent = <T extends TableRowData<T>>({
75
82
  columns,
76
83
  children,
77
84
  isGrouped,
85
+ parentIndex,
78
86
  onClickRow,
79
87
  }: {
80
88
  rowIndex: number;
81
89
  columns: ColumnType<T>[];
82
90
  children: T[];
83
91
  isGrouped?: boolean;
84
- onClickRow?: (e: React.MouseEvent<HTMLTableRowElement>, row: T) => void;
92
+ parentIndex?: number;
93
+ onClickRow?: TableProps<T>['onClickRow'];
85
94
  }) => {
86
95
  const contentRef = useRef<HTMLDivElement>(null);
87
96
  const [height, setHeight] = useState<number | 'auto'>(0);
@@ -114,7 +123,7 @@ const NestedContent = <T extends TableRowData<T>>({
114
123
  className={cn(child.className, {
115
124
  'table__row-clickable': onClickRow,
116
125
  })}
117
- onClick={(e) => onClickRow?.(e, child as T)}>
126
+ onClick={(e) => onClickRow?.(e, child as T, { parentIndex, childIndex })}>
118
127
  <TableCell<T>
119
128
  columns={columns}
120
129
  row={child as T}
@@ -203,7 +212,7 @@ export function Table<T extends TableRowData<T>>(props: TableProps<T>) {
203
212
  'table__row-clickable': onClickRow,
204
213
  'table__row-highlighted': row.isHighlighted,
205
214
  })}
206
- onClick={(e) => onClickRow?.(e, row)}>
215
+ onClick={(e) => onClickRow?.(e, row, { parentIndex: rowIndex })}>
207
216
  {row.isHighlighted ? (
208
217
  <td colSpan={columns.length} className="table__cell-highlighted">
209
218
  <div className="table__row-div-highlighted">
@@ -238,6 +247,7 @@ export function Table<T extends TableRowData<T>>(props: TableProps<T>) {
238
247
  columns={columns}
239
248
  children={row.children || []}
240
249
  onClickRow={onClickRow}
250
+ parentIndex={rowIndex}
241
251
  />
242
252
  </td>
243
253
  </tr>
@@ -247,9 +257,7 @@ export function Table<T extends TableRowData<T>>(props: TableProps<T>) {
247
257
  ) : !row.children ? (
248
258
  defaultTable
249
259
  ) : (
250
- <tr
251
- className="table__row-with-children"
252
- onClick={(e) => onClickRow?.(e, row)}>
260
+ <tr className="table__row-with-children">
253
261
  <td
254
262
  colSpan={columns.length}
255
263
  className={cn({
@@ -272,7 +280,9 @@ export function Table<T extends TableRowData<T>>(props: TableProps<T>) {
272
280
  <NestedContent<T>
273
281
  rowIndex={rowIndex}
274
282
  columns={columns}
283
+ parentIndex={rowIndex}
275
284
  children={row.children || []}
285
+ onClickRow={onClickRow}
276
286
  />
277
287
  </td>
278
288
  </tr>