mautourco-components 0.2.48 → 0.2.49
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/dist/components/organisms/Table/Table.js +15 -14
- package/dist/components/organisms/Table/columns/booking-columns.js +1 -1
- package/dist/components/organisms/Table/columns/index.d.ts +1 -1
- package/dist/components/organisms/Table/columns/quotation-columns.d.ts +1 -1
- package/dist/components/organisms/Table/columns/quotation-columns.js +2 -2
- package/package.json +1 -1
- package/src/components/organisms/Table/Table.tsx +99 -89
- package/src/components/organisms/Table/columns/booking-columns.tsx +1 -1
- package/src/components/organisms/Table/columns/quotation-columns.tsx +3 -3
|
@@ -77,20 +77,21 @@ export function Table(props) {
|
|
|
77
77
|
var hasTotal = Object.keys(totalRows).length > 0;
|
|
78
78
|
return (_jsx(LazyMotion, { features: domAnimation, children: _jsxs("div", { children: [_jsx("div", { className: cn('table-container', { 'table-container--no-total': !hasTotal }), children: _jsxs("table", { className: "table", children: [_jsx("thead", { className: "table__header", children: _jsx("tr", { children: columns.map(function (column, columnIndex) { return (_jsx("th", { className: column.className, style: column.width
|
|
79
79
|
? { minWidth: column.width, width: column.width }
|
|
80
|
-
: undefined, children: _jsx(Text, { variant: "bold", size: "sm", children: column.header }) }, "hd-".concat(columnIndex))); }) }) }),
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
80
|
+
: undefined, children: _jsx(Text, { variant: "bold", size: "sm", children: column.header }) }, "hd-".concat(columnIndex))); }) }) }), _jsxs("tbody", { className: "table__body", children: [data.length > 0 &&
|
|
81
|
+
data.map(function (row, rowIndex) {
|
|
82
|
+
var _a, _b;
|
|
83
|
+
var hasVisibleChildren = (_a = row.children) === null || _a === void 0 ? void 0 : _a.some(function (child) { return child.visible; });
|
|
84
|
+
var defaultTable = (_jsx("tr", { className: cn(row.className, {
|
|
85
|
+
'table__row-nested': (_b = row.children) === null || _b === void 0 ? void 0 : _b.length,
|
|
86
|
+
'table__row-clickable': onClickRow,
|
|
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({
|
|
90
|
+
'table__children--visible': hasVisibleChildren,
|
|
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
|
+
'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)));
|
|
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', {
|
|
94
95
|
'table__total--dashed': isTotalBorderDash,
|
|
95
96
|
}), children: _jsxs("tr", { children: [_jsx("td", { colSpan: columns.length - 1 }), _jsx("td", { style: {
|
|
96
97
|
'--last-column-width': normalizeLastColumnWidth(),
|
|
@@ -89,7 +89,7 @@ export var bookingColumns = function (_a) {
|
|
|
89
89
|
var _a;
|
|
90
90
|
var handleAction = (_a = onAction === null || onAction === void 0 ? void 0 : onAction(raw)) !== null && _a !== void 0 ? _a : (function () { });
|
|
91
91
|
var actionData = actionDropdownData(handleAction);
|
|
92
|
-
return (_jsxs("div", { className: "flex items-center justify-between", children: [renderStatusContent(raw.status), _jsx(ActionDropdown, { data: actionData })] }));
|
|
92
|
+
return (_jsxs("div", { className: "flex items-center justify-between gap-x-8", children: [renderStatusContent(raw.status), _jsx(ActionDropdown, { data: actionData })] }));
|
|
93
93
|
},
|
|
94
94
|
},
|
|
95
95
|
];
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
declare const columns: {
|
|
2
2
|
quotation: (params: {
|
|
3
|
-
onExpand?: (value?: import("../../../..").QuotationListItem) => void;
|
|
3
|
+
onExpand?: (value?: import("../../../..").QuotationListItem, index?: number, childIndex?: number) => void;
|
|
4
4
|
onAction?: (data: {
|
|
5
5
|
isChild?: boolean;
|
|
6
6
|
quote: import("../../../..").QuotationListItem;
|
|
@@ -2,7 +2,7 @@ import { ActionDropdownType } from '@/src/types/table/action-dropdown-type.types
|
|
|
2
2
|
import { QuotationListItem } from '@/src/types/table/quotation.types';
|
|
3
3
|
import { ColumnType } from '../TableCell';
|
|
4
4
|
export declare const quotationColumns: (params: {
|
|
5
|
-
onExpand?: (value?: QuotationListItem) => void;
|
|
5
|
+
onExpand?: (value?: QuotationListItem, index?: number, childIndex?: number) => void;
|
|
6
6
|
onAction?: (data: {
|
|
7
7
|
isChild?: boolean;
|
|
8
8
|
quote: QuotationListItem;
|
|
@@ -82,13 +82,13 @@ export var quotationColumns = function (_a) {
|
|
|
82
82
|
header: '',
|
|
83
83
|
key: 'actions',
|
|
84
84
|
width: 232,
|
|
85
|
-
cell: function (_value, raw,
|
|
85
|
+
cell: function (_value, raw, index, childIndex) {
|
|
86
86
|
var _a, _b;
|
|
87
87
|
var hasChildren = raw.children && raw.children.length > 0;
|
|
88
88
|
var isExpanded = (_a = raw.children) === null || _a === void 0 ? void 0 : _a.some(function (child) { return child.visible; });
|
|
89
89
|
var buttonLabel = isExpanded ? 'See less' : 'See more';
|
|
90
90
|
var isOnRequest = raw.status.toLowerCase() === 'on request';
|
|
91
|
-
return (_jsx("div", { children: hasChildren ? (_jsx(Button, { variant: "outline-primary", size: "sm", trailingIcon: "chevron-down", className: cn('table__button', isExpanded && 'table__button-expanded'), onClick: function () { return onExpand === null || onExpand === void 0 ? void 0 : onExpand(raw); }, children: buttonLabel })) : (_jsxs("div", { className: "flex items-center gap-x-8", children: [_jsx(Button, { variant: isOnRequest ? 'outline-secondary' : 'secondary', size: "sm", className: "table__button", children: isOnRequest ? 'Request to book' : 'Book now' }), _jsx(ActionDropdown, { data: actionDropdownData((_b = onAction === null || onAction === void 0 ? void 0 : onAction({ isChild: childIndex !== undefined, quote: raw })) !== null && _b !== void 0 ? _b : (function () { })) })] })) }));
|
|
91
|
+
return (_jsx("div", { children: hasChildren ? (_jsx(Button, { variant: "outline-primary", size: "sm", trailingIcon: "chevron-down", className: cn('table__button', isExpanded && 'table__button-expanded'), onClick: function () { return onExpand === null || onExpand === void 0 ? void 0 : onExpand(raw, index, childIndex); }, children: buttonLabel })) : (_jsxs("div", { className: "flex items-center gap-x-8", children: [_jsx(Button, { variant: isOnRequest ? 'outline-secondary' : 'secondary', size: "sm", className: "table__button", children: isOnRequest ? 'Request to book' : 'Book now' }), _jsx(ActionDropdown, { data: actionDropdownData((_b = onAction === null || onAction === void 0 ? void 0 : onAction({ isChild: childIndex !== undefined, quote: raw })) !== null && _b !== void 0 ? _b : (function () { })) })] })) }));
|
|
92
92
|
},
|
|
93
93
|
},
|
|
94
94
|
];
|
package/package.json
CHANGED
|
@@ -188,99 +188,109 @@ export function Table<T extends TableRowData<T>>(props: TableProps<T>) {
|
|
|
188
188
|
</tr>
|
|
189
189
|
</thead>
|
|
190
190
|
<tbody className="table__body">
|
|
191
|
-
{data.
|
|
192
|
-
|
|
191
|
+
{data.length > 0 &&
|
|
192
|
+
data.map((row, rowIndex) => {
|
|
193
|
+
const hasVisibleChildren = row.children?.some((child) => child.visible);
|
|
193
194
|
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
195
|
+
const defaultTable = (
|
|
196
|
+
<tr
|
|
197
|
+
className={cn(row.className, {
|
|
198
|
+
'table__row-nested': row.children?.length,
|
|
199
|
+
'table__row-clickable': onClickRow,
|
|
200
|
+
'table__row-highlighted': row.isHighlighted,
|
|
201
|
+
})}
|
|
202
|
+
onClick={(e) => onClickRow?.(e, row)}>
|
|
203
|
+
{row.isHighlighted ? (
|
|
204
|
+
<td colSpan={columns.length} className="table__cell-highlighted">
|
|
205
|
+
<div className="table__row-div-highlighted">
|
|
206
|
+
<table className="table">
|
|
207
|
+
<tbody>
|
|
208
|
+
<tr>
|
|
209
|
+
<TableCell<T>
|
|
210
|
+
columns={columns}
|
|
211
|
+
row={row}
|
|
212
|
+
rowIndex={rowIndex}
|
|
213
|
+
/>
|
|
214
|
+
</tr>
|
|
215
|
+
</tbody>
|
|
216
|
+
</table>
|
|
217
|
+
</div>
|
|
218
|
+
</td>
|
|
219
|
+
) : (
|
|
220
|
+
<TableCell<T> columns={columns} row={row} rowIndex={rowIndex} />
|
|
221
|
+
)}
|
|
222
|
+
</tr>
|
|
223
|
+
);
|
|
223
224
|
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
225
|
+
return (
|
|
226
|
+
<Fragment key={`rw-${rowIndex}`}>
|
|
227
|
+
{isGrouped ? (
|
|
228
|
+
row.children && row.children.length > 0 ? (
|
|
229
|
+
<tr className="table__row-grouped">
|
|
230
|
+
<td colSpan={columns.length}>
|
|
231
|
+
<NestedContent<T>
|
|
232
|
+
isGrouped={isGrouped}
|
|
233
|
+
rowIndex={rowIndex}
|
|
234
|
+
columns={columns}
|
|
235
|
+
children={row.children || []}
|
|
236
|
+
onClickRow={onClickRow}
|
|
237
|
+
/>
|
|
238
|
+
</td>
|
|
239
|
+
</tr>
|
|
240
|
+
) : (
|
|
241
|
+
defaultTable
|
|
242
|
+
)
|
|
243
|
+
) : !row.children ? (
|
|
244
|
+
defaultTable
|
|
245
|
+
) : (
|
|
246
|
+
<tr
|
|
247
|
+
className="table__row-with-children"
|
|
248
|
+
onClick={(e) => onClickRow?.(e, row)}>
|
|
249
|
+
<td
|
|
250
|
+
colSpan={columns.length}
|
|
251
|
+
className={cn({
|
|
252
|
+
'table__children--visible': hasVisibleChildren,
|
|
253
|
+
})}>
|
|
254
|
+
<table className="table">
|
|
255
|
+
<tbody>
|
|
256
|
+
{defaultTable}
|
|
257
|
+
<AnimatePresence initial={false}>
|
|
258
|
+
{hasVisibleChildren && (
|
|
259
|
+
<tr
|
|
260
|
+
key={`nested-${rowIndex}`}
|
|
261
|
+
className={cn('table__no-hover', {
|
|
262
|
+
'table__row-nested':
|
|
263
|
+
row.children && row.children.length > 0,
|
|
264
|
+
})}>
|
|
265
|
+
<td
|
|
266
|
+
colSpan={columns.length}
|
|
267
|
+
className="table__cell-nested">
|
|
268
|
+
<NestedContent<T>
|
|
269
|
+
rowIndex={rowIndex}
|
|
270
|
+
columns={columns}
|
|
271
|
+
children={row.children || []}
|
|
272
|
+
/>
|
|
273
|
+
</td>
|
|
274
|
+
</tr>
|
|
275
|
+
)}
|
|
276
|
+
</AnimatePresence>
|
|
277
|
+
</tbody>
|
|
278
|
+
</table>
|
|
237
279
|
</td>
|
|
238
280
|
</tr>
|
|
239
|
-
)
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
})}>
|
|
253
|
-
<table className="table">
|
|
254
|
-
<tbody>
|
|
255
|
-
{defaultTable}
|
|
256
|
-
<AnimatePresence initial={false}>
|
|
257
|
-
{hasVisibleChildren && (
|
|
258
|
-
<tr
|
|
259
|
-
key={`nested-${rowIndex}`}
|
|
260
|
-
className={cn('table__no-hover', {
|
|
261
|
-
'table__row-nested':
|
|
262
|
-
row.children && row.children.length > 0,
|
|
263
|
-
})}>
|
|
264
|
-
<td
|
|
265
|
-
colSpan={columns.length}
|
|
266
|
-
className="table__cell-nested">
|
|
267
|
-
<NestedContent<T>
|
|
268
|
-
rowIndex={rowIndex}
|
|
269
|
-
columns={columns}
|
|
270
|
-
children={row.children || []}
|
|
271
|
-
/>
|
|
272
|
-
</td>
|
|
273
|
-
</tr>
|
|
274
|
-
)}
|
|
275
|
-
</AnimatePresence>
|
|
276
|
-
</tbody>
|
|
277
|
-
</table>
|
|
278
|
-
</td>
|
|
279
|
-
</tr>
|
|
280
|
-
)}
|
|
281
|
-
</Fragment>
|
|
282
|
-
);
|
|
283
|
-
})}
|
|
281
|
+
)}
|
|
282
|
+
</Fragment>
|
|
283
|
+
);
|
|
284
|
+
})}
|
|
285
|
+
{data.length === 0 && (
|
|
286
|
+
<tr>
|
|
287
|
+
<td colSpan={columns.length} className="table__cell-empty">
|
|
288
|
+
<Text size="md" variant="bold" className="text-center">
|
|
289
|
+
No data found
|
|
290
|
+
</Text>
|
|
291
|
+
</td>
|
|
292
|
+
</tr>
|
|
293
|
+
)}
|
|
284
294
|
</tbody>
|
|
285
295
|
</table>
|
|
286
296
|
</div>
|
|
@@ -138,7 +138,7 @@ export const bookingColumns: (params: {
|
|
|
138
138
|
const actionData = actionDropdownData(handleAction);
|
|
139
139
|
|
|
140
140
|
return (
|
|
141
|
-
<div className="flex items-center justify-between">
|
|
141
|
+
<div className="flex items-center justify-between gap-x-8">
|
|
142
142
|
{renderStatusContent(raw.status)}
|
|
143
143
|
<ActionDropdown data={actionData} />
|
|
144
144
|
</div>
|
|
@@ -10,7 +10,7 @@ import { ColumnType } from '../TableCell';
|
|
|
10
10
|
import { actionDropdownData, chipVariant, clientTypeMap } from '../constant';
|
|
11
11
|
|
|
12
12
|
export const quotationColumns: (params: {
|
|
13
|
-
onExpand?: (value?: QuotationListItem) => void;
|
|
13
|
+
onExpand?: (value?: QuotationListItem, index?: number, childIndex?: number) => void;
|
|
14
14
|
onAction?: (data: {
|
|
15
15
|
isChild?: boolean;
|
|
16
16
|
quote: QuotationListItem;
|
|
@@ -146,7 +146,7 @@ export const quotationColumns: (params: {
|
|
|
146
146
|
header: '',
|
|
147
147
|
key: 'actions',
|
|
148
148
|
width: 232,
|
|
149
|
-
cell: (_value, raw,
|
|
149
|
+
cell: (_value, raw, index, childIndex) => {
|
|
150
150
|
const hasChildren = raw.children && raw.children.length > 0;
|
|
151
151
|
const isExpanded = raw.children?.some((child) => child.visible);
|
|
152
152
|
const buttonLabel = isExpanded ? 'See less' : 'See more';
|
|
@@ -160,7 +160,7 @@ export const quotationColumns: (params: {
|
|
|
160
160
|
size="sm"
|
|
161
161
|
trailingIcon="chevron-down"
|
|
162
162
|
className={cn('table__button', isExpanded && 'table__button-expanded')}
|
|
163
|
-
onClick={() => onExpand?.(raw)}>
|
|
163
|
+
onClick={() => onExpand?.(raw, index, childIndex)}>
|
|
164
164
|
{buttonLabel}
|
|
165
165
|
</Button>
|
|
166
166
|
) : (
|