@multiplatform.one/table 7.8.0 → 7.10.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.
- package/dist/cjs/components/DataTable/DataTableMobileCards.cjs +100 -33
- package/dist/cjs/components/DataTable/DataTableMobileCards.native.js +139 -38
- package/dist/cjs/components/DataTable/DataTableMobileCards.native.js.map +1 -1
- package/dist/cjs/components/DataTable/index.native.js +59 -93
- package/dist/cjs/components/DataTable/index.native.js.map +1 -1
- package/dist/esm/components/DataTable/DataTableMobileCards.mjs +99 -34
- package/dist/esm/components/DataTable/DataTableMobileCards.mjs.map +1 -1
- package/dist/esm/components/DataTable/DataTableMobileCards.native.js +138 -39
- package/dist/esm/components/DataTable/DataTableMobileCards.native.js.map +1 -1
- package/dist/esm/components/DataTable/index.native.js +60 -94
- package/dist/esm/components/DataTable/index.native.js.map +1 -1
- package/dist/jsx/components/DataTable/DataTableMobileCards.mjs +99 -34
- package/dist/jsx/components/DataTable/DataTableMobileCards.mjs.map +1 -1
- package/dist/jsx/components/DataTable/DataTableMobileCards.native.js +139 -38
- package/dist/jsx/components/DataTable/DataTableMobileCards.native.js.map +1 -1
- package/dist/jsx/components/DataTable/index.native.js +59 -93
- package/dist/jsx/components/DataTable/index.native.js.map +1 -1
- package/package.json +12 -12
- package/src/components/DataTable/DataTable.spec.tsx +5 -3
- package/src/components/DataTable/DataTableMobileCards.tsx +162 -39
- package/src/components/DataTable/cardLayout.spec.tsx +19 -8
- package/src/components/DataTable/dataTableMobileCards.spec.tsx +50 -2
- package/src/components/DataTable/index.native.tsx +80 -124
- package/src/components/DataTable/nativeCardParity.spec.tsx +95 -0
- package/types/components/DataTable/DataTableMobileCards.d.ts +42 -8
- package/types/components/DataTable/DataTableMobileCards.d.ts.map +1 -1
- package/types/components/DataTable/index.native.d.ts +1 -1
- package/types/components/DataTable/index.native.d.ts.map +1 -1
|
@@ -22,7 +22,9 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
|
|
|
22
22
|
}), mod);
|
|
23
23
|
var DataTableMobileCards_exports = {};
|
|
24
24
|
__export(DataTableMobileCards_exports, {
|
|
25
|
-
DataTableMobileCards: () => DataTableMobileCards
|
|
25
|
+
DataTableMobileCards: () => DataTableMobileCards,
|
|
26
|
+
classifyCardField: () => classifyCardField,
|
|
27
|
+
getColumnLabel: () => getColumnLabel
|
|
26
28
|
});
|
|
27
29
|
module.exports = __toCommonJS(DataTableMobileCards_exports);
|
|
28
30
|
var import_react = require("@phosphor-icons/react");
|
|
@@ -42,6 +44,27 @@ function getColumnLabel(cell) {
|
|
|
42
44
|
if (typeof metaLabel === "string" && metaLabel) return metaLabel;
|
|
43
45
|
return typeof columnDef.header === "string" ? columnDef.header : columnDef.id || cell.column.id;
|
|
44
46
|
}
|
|
47
|
+
const selfNamingFields = /* @__PURE__ */new Set(["checkbox", "switch", "rating", "progress", "image", "signature", "fileupload", "colorpicker", "barcode", "geolocation"]);
|
|
48
|
+
const indicatorIds = /* @__PURE__ */new Set(["status", "priority", "workflow_state", "state"]);
|
|
49
|
+
const dateLike = /^\d{4}-\d{2}-\d{2}([T ]|$)|^\d{1,2}\/\d{1,2}\/\d{2,4}$/;
|
|
50
|
+
const numberLike = /^[+\-−]?[\d,\s]*\d(\.\d+)?%?$/;
|
|
51
|
+
function classifyCardField(cell) {
|
|
52
|
+
const def = cell.column.columnDef;
|
|
53
|
+
const id = String(cell.column.id ?? "");
|
|
54
|
+
const role = def.meta?.role;
|
|
55
|
+
if (role === "hidden" || role === "skip") return "skip";
|
|
56
|
+
if (role === "actions" || id.startsWith("_") || def.field && selfNamingFields.has(def.field)) {
|
|
57
|
+
return "control";
|
|
58
|
+
}
|
|
59
|
+
const raw = typeof cell.getValue === "function" ? cell.getValue() : void 0;
|
|
60
|
+
if (raw == null || typeof raw === "string" && raw.trim() === "") return "skip";
|
|
61
|
+
if (role === "indicator" || indicatorIds.has(id)) return "bare";
|
|
62
|
+
if (typeof raw === "string") {
|
|
63
|
+
const value = raw.trim();
|
|
64
|
+
return numberLike.test(value) || dateLike.test(value) ? "figure" : "bare";
|
|
65
|
+
}
|
|
66
|
+
return "figure";
|
|
67
|
+
}
|
|
45
68
|
function DataTableMobileCards({
|
|
46
69
|
tableRows,
|
|
47
70
|
enableRowSelection = false,
|
|
@@ -72,17 +95,29 @@ function DataTableMobileCards({
|
|
|
72
95
|
compact
|
|
73
96
|
});
|
|
74
97
|
const tableZebraOn = knobProps.tableZebra === "on";
|
|
98
|
+
const renderCell = (0, import_react2.useCallback)((cell, index, rowData) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.TableCellContext.Provider, {
|
|
99
|
+
value: {
|
|
100
|
+
inTableCell: true,
|
|
101
|
+
isHeader: false
|
|
102
|
+
},
|
|
103
|
+
children: renderCellContent(cell, index, rowData)
|
|
104
|
+
}), [renderCellContent]);
|
|
75
105
|
const renderMobileCard = (0, import_react2.useCallback)((row, index) => {
|
|
76
106
|
const rowData = row.original;
|
|
77
107
|
const visibleCells = row.getVisibleCells();
|
|
78
108
|
const [titleCell, ...detailCells] = visibleCells;
|
|
79
109
|
const showDelete = showDeleteRow && !readOnly;
|
|
110
|
+
const bare = [];
|
|
111
|
+
const figures = [];
|
|
112
|
+
const controls = [];
|
|
113
|
+
for (const cell of detailCells) {
|
|
114
|
+
const kind = classifyCardField(cell);
|
|
115
|
+
if (kind === "bare") bare.push(cell);else if (kind === "figure") figures.push(cell);else if (kind === "control") controls.push(cell);
|
|
116
|
+
}
|
|
117
|
+
const hasBody = bare.length > 0 || figures.length > 0 || controls.length > 0;
|
|
80
118
|
return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
|
|
81
119
|
testID: "data-table-card",
|
|
82
|
-
...knobProps.surface,
|
|
83
120
|
...knobProps.cardSurface,
|
|
84
|
-
elevation: knobProps.elevation,
|
|
85
|
-
borderColor: "$color6",
|
|
86
121
|
...(tableZebraOn && index % 2 === 1 ? {
|
|
87
122
|
backgroundColor: "$color2"
|
|
88
123
|
} : {}),
|
|
@@ -94,7 +129,7 @@ function DataTableMobileCards({
|
|
|
94
129
|
children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
|
|
95
130
|
alignItems: "center",
|
|
96
131
|
gap: "$2",
|
|
97
|
-
...(
|
|
132
|
+
...(hasBody ? {
|
|
98
133
|
paddingBottom: "$2",
|
|
99
134
|
marginBottom: "$2",
|
|
100
135
|
...import_theme.hairline.bottom,
|
|
@@ -119,16 +154,11 @@ function DataTableMobileCards({
|
|
|
119
154
|
flex: 1,
|
|
120
155
|
minWidth: 0,
|
|
121
156
|
"aria-label": getColumnLabel(titleCell),
|
|
157
|
+
accessibilityLabel: getColumnLabel(titleCell),
|
|
122
158
|
...{
|
|
123
159
|
"data-card-slot": "title"
|
|
124
160
|
},
|
|
125
|
-
children:
|
|
126
|
-
value: {
|
|
127
|
-
inTableCell: true,
|
|
128
|
-
isHeader: false
|
|
129
|
-
},
|
|
130
|
-
children: renderCellContent(titleCell, index, rowData)
|
|
131
|
-
})
|
|
161
|
+
children: renderCell(titleCell, index, rowData)
|
|
132
162
|
}) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
|
|
133
163
|
flex: 1
|
|
134
164
|
}), showRowNumbers && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
|
|
@@ -149,32 +179,69 @@ function DataTableMobileCards({
|
|
|
149
179
|
row: index + 1
|
|
150
180
|
})
|
|
151
181
|
})]
|
|
152
|
-
}),
|
|
153
|
-
|
|
182
|
+
}), bare.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
|
|
183
|
+
flexWrap: "wrap",
|
|
154
184
|
alignItems: "center",
|
|
155
|
-
paddingVertical: "$1.5",
|
|
156
185
|
gap: "$2",
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
|
|
165
|
-
flex: 1,
|
|
186
|
+
...{
|
|
187
|
+
"data-card-slot": "meta"
|
|
188
|
+
},
|
|
189
|
+
children: bare.map((cell, i) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
|
|
190
|
+
alignItems: "center",
|
|
191
|
+
gap: "$2",
|
|
192
|
+
flexShrink: 1,
|
|
166
193
|
minWidth: 0,
|
|
167
|
-
children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
children:
|
|
173
|
-
})
|
|
174
|
-
|
|
194
|
+
children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.VisuallyHidden, {
|
|
195
|
+
children: `${getColumnLabel(cell)}: `
|
|
196
|
+
}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
|
|
197
|
+
flexShrink: 1,
|
|
198
|
+
minWidth: 0,
|
|
199
|
+
children: renderCell(cell, index, rowData)
|
|
200
|
+
}), i < bare.length - 1 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
|
|
201
|
+
fontSize: knobProps.sizeToken,
|
|
202
|
+
color: "$color8",
|
|
203
|
+
"aria-hidden": true,
|
|
204
|
+
accessibilityElementsHidden: true,
|
|
205
|
+
importantForAccessibility: "no-hide-descendants",
|
|
206
|
+
children: "\xB7"
|
|
207
|
+
}) : null]
|
|
208
|
+
}, cell.id))
|
|
209
|
+
}) : null, figures.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
|
|
210
|
+
flexWrap: "wrap",
|
|
211
|
+
alignItems: "center",
|
|
212
|
+
gap: "$3",
|
|
213
|
+
paddingTop: bare.length > 0 ? "$1.5" : 0,
|
|
214
|
+
...{
|
|
215
|
+
"data-card-slot": "figure"
|
|
216
|
+
},
|
|
217
|
+
children: figures.map(cell => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
|
|
218
|
+
alignItems: "center",
|
|
219
|
+
gap: "$1.5",
|
|
220
|
+
flexShrink: 1,
|
|
221
|
+
minWidth: 0,
|
|
222
|
+
children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
|
|
223
|
+
fontSize: knobProps.sizeToken,
|
|
224
|
+
color: "$color10",
|
|
225
|
+
fontWeight: "500",
|
|
226
|
+
children: getColumnLabel(cell)
|
|
227
|
+
}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
|
|
228
|
+
flexShrink: 1,
|
|
229
|
+
minWidth: 0,
|
|
230
|
+
children: renderCell(cell, index, rowData)
|
|
231
|
+
})]
|
|
232
|
+
}, cell.id))
|
|
233
|
+
}) : null, controls.map(cell => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
|
|
234
|
+
paddingTop: "$2",
|
|
235
|
+
minWidth: 0,
|
|
236
|
+
...{
|
|
237
|
+
"data-card-slot": "control"
|
|
238
|
+
},
|
|
239
|
+
children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.VisuallyHidden, {
|
|
240
|
+
children: `${getColumnLabel(cell)}: `
|
|
241
|
+
}), renderCell(cell, index, rowData)]
|
|
175
242
|
}, cell.id))]
|
|
176
243
|
}, `${row.id}-${index}`);
|
|
177
|
-
}, [enableRowSelection, showRowNumbers, showDeleteRow, readOnly, disabled, dataLength, minRows,
|
|
244
|
+
}, [enableRowSelection, showRowNumbers, showDeleteRow, readOnly, disabled, dataLength, minRows, renderCell, onDeleteRow, compact, knobProps, tableZebraOn, t, selectRowLabel, getRowPressProps]);
|
|
178
245
|
return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
|
|
179
246
|
flexDirection: "column",
|
|
180
247
|
...knobProps.gap,
|
|
@@ -24,7 +24,9 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
|
|
|
24
24
|
}), mod);
|
|
25
25
|
var DataTableMobileCards_exports = {};
|
|
26
26
|
__export(DataTableMobileCards_exports, {
|
|
27
|
-
DataTableMobileCards: () => DataTableMobileCards
|
|
27
|
+
DataTableMobileCards: () => DataTableMobileCards,
|
|
28
|
+
classifyCardField: () => classifyCardField,
|
|
29
|
+
getColumnLabel: () => getColumnLabel
|
|
28
30
|
});
|
|
29
31
|
module.exports = __toCommonJS(DataTableMobileCards_exports);
|
|
30
32
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
@@ -45,6 +47,29 @@ function getColumnLabel(cell) {
|
|
|
45
47
|
if (typeof metaLabel === "string" && metaLabel) return metaLabel;
|
|
46
48
|
return typeof columnDef.header === "string" ? columnDef.header : columnDef.id || cell.column.id;
|
|
47
49
|
}
|
|
50
|
+
var selfNamingFields = /* @__PURE__ */new Set(["checkbox", "switch", "rating", "progress", "image", "signature", "fileupload", "colorpicker", "barcode", "geolocation"]);
|
|
51
|
+
var indicatorIds = /* @__PURE__ */new Set(["status", "priority", "workflow_state", "state"]);
|
|
52
|
+
var dateLike = /^\d{4}-\d{2}-\d{2}([T ]|$)|^\d{1,2}\/\d{1,2}\/\d{2,4}$/;
|
|
53
|
+
var numberLike = /^[+\-−]?[\d,\s]*\d(\.\d+)?%?$/;
|
|
54
|
+
function classifyCardField(cell) {
|
|
55
|
+
var _cell_column_id;
|
|
56
|
+
var _def_meta;
|
|
57
|
+
var def = cell.column.columnDef;
|
|
58
|
+
var id = String((_cell_column_id = cell.column.id) !== null && _cell_column_id !== void 0 ? _cell_column_id : "");
|
|
59
|
+
var role = (_def_meta = def.meta) === null || _def_meta === void 0 ? void 0 : _def_meta.role;
|
|
60
|
+
if (role === "hidden" || role === "skip") return "skip";
|
|
61
|
+
if (role === "actions" || id.startsWith("_") || def.field && selfNamingFields.has(def.field)) {
|
|
62
|
+
return "control";
|
|
63
|
+
}
|
|
64
|
+
var raw = typeof cell.getValue === "function" ? cell.getValue() : void 0;
|
|
65
|
+
if (raw == null || typeof raw === "string" && raw.trim() === "") return "skip";
|
|
66
|
+
if (role === "indicator" || indicatorIds.has(id)) return "bare";
|
|
67
|
+
if (typeof raw === "string") {
|
|
68
|
+
var value = raw.trim();
|
|
69
|
+
return numberLike.test(value) || dateLike.test(value) ? "figure" : "bare";
|
|
70
|
+
}
|
|
71
|
+
return "figure";
|
|
72
|
+
}
|
|
48
73
|
function DataTableMobileCards(param) {
|
|
49
74
|
var {
|
|
50
75
|
tableRows,
|
|
@@ -76,18 +101,51 @@ function DataTableMobileCards(param) {
|
|
|
76
101
|
compact
|
|
77
102
|
});
|
|
78
103
|
var tableZebraOn = knobProps.tableZebra === "on";
|
|
104
|
+
var renderCell = (0, import_react2.useCallback)(function (cell, index, rowData) {
|
|
105
|
+
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.TableCellContext.Provider, {
|
|
106
|
+
value: {
|
|
107
|
+
inTableCell: true,
|
|
108
|
+
isHeader: false
|
|
109
|
+
},
|
|
110
|
+
children: renderCellContent(cell, index, rowData)
|
|
111
|
+
});
|
|
112
|
+
}, [renderCellContent]);
|
|
79
113
|
var renderMobileCard = (0, import_react2.useCallback)(function (row, index) {
|
|
80
114
|
var _ref;
|
|
81
115
|
var rowData = row.original;
|
|
82
116
|
var visibleCells = row.getVisibleCells();
|
|
83
117
|
var [titleCell, ...detailCells] = visibleCells;
|
|
84
118
|
var showDelete = showDeleteRow && !readOnly;
|
|
119
|
+
var bare = [];
|
|
120
|
+
var figures = [];
|
|
121
|
+
var controls = [];
|
|
122
|
+
var _iteratorNormalCompletion = true,
|
|
123
|
+
_didIteratorError = false,
|
|
124
|
+
_iteratorError = void 0;
|
|
125
|
+
try {
|
|
126
|
+
for (var _iterator = detailCells[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
|
|
127
|
+
var cell = _step.value;
|
|
128
|
+
var kind = classifyCardField(cell);
|
|
129
|
+
if (kind === "bare") bare.push(cell);else if (kind === "figure") figures.push(cell);else if (kind === "control") controls.push(cell);
|
|
130
|
+
}
|
|
131
|
+
} catch (err) {
|
|
132
|
+
_didIteratorError = true;
|
|
133
|
+
_iteratorError = err;
|
|
134
|
+
} finally {
|
|
135
|
+
try {
|
|
136
|
+
if (!_iteratorNormalCompletion && _iterator.return != null) {
|
|
137
|
+
_iterator.return();
|
|
138
|
+
}
|
|
139
|
+
} finally {
|
|
140
|
+
if (_didIteratorError) {
|
|
141
|
+
throw _iteratorError;
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
var hasBody = bare.length > 0 || figures.length > 0 || controls.length > 0;
|
|
85
146
|
return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
|
|
86
147
|
testID: "data-table-card",
|
|
87
|
-
...knobProps.surface,
|
|
88
148
|
...knobProps.cardSurface,
|
|
89
|
-
elevation: knobProps.elevation,
|
|
90
|
-
borderColor: "$color6",
|
|
91
149
|
...(tableZebraOn && index % 2 === 1 ? {
|
|
92
150
|
backgroundColor: "$color2"
|
|
93
151
|
} : {}),
|
|
@@ -100,7 +158,7 @@ function DataTableMobileCards(param) {
|
|
|
100
158
|
/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
|
|
101
159
|
alignItems: "center",
|
|
102
160
|
gap: "$2",
|
|
103
|
-
...(
|
|
161
|
+
...(hasBody ? {
|
|
104
162
|
paddingBottom: "$2",
|
|
105
163
|
marginBottom: "$2",
|
|
106
164
|
...import_theme.hairline.bottom,
|
|
@@ -125,16 +183,11 @@ function DataTableMobileCards(param) {
|
|
|
125
183
|
flex: 1,
|
|
126
184
|
minWidth: 0,
|
|
127
185
|
"aria-label": getColumnLabel(titleCell),
|
|
186
|
+
accessibilityLabel: getColumnLabel(titleCell),
|
|
128
187
|
...{
|
|
129
188
|
"data-card-slot": "title"
|
|
130
189
|
},
|
|
131
|
-
children:
|
|
132
|
-
value: {
|
|
133
|
-
inTableCell: true,
|
|
134
|
-
isHeader: false
|
|
135
|
-
},
|
|
136
|
-
children: renderCellContent(titleCell, index, rowData)
|
|
137
|
-
})
|
|
190
|
+
children: renderCell(titleCell, index, rowData)
|
|
138
191
|
}) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
|
|
139
192
|
flex: 1
|
|
140
193
|
}), showRowNumbers && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
|
|
@@ -157,35 +210,83 @@ function DataTableMobileCards(param) {
|
|
|
157
210
|
row: index + 1
|
|
158
211
|
})
|
|
159
212
|
})]
|
|
160
|
-
}),
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
flex: 1,
|
|
213
|
+
}),
|
|
214
|
+
/* Self-naming values, wrapped into one flow. No printed labels:
|
|
215
|
+
the name goes to assistive tech only, at no layout cost. */
|
|
216
|
+
bare.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
|
|
217
|
+
flexWrap: "wrap",
|
|
218
|
+
alignItems: "center",
|
|
219
|
+
gap: "$2",
|
|
220
|
+
...{
|
|
221
|
+
"data-card-slot": "meta"
|
|
222
|
+
},
|
|
223
|
+
children: bare.map(function (cell2, i) {
|
|
224
|
+
return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
|
|
225
|
+
alignItems: "center",
|
|
226
|
+
gap: "$2",
|
|
227
|
+
flexShrink: 1,
|
|
176
228
|
minWidth: 0,
|
|
177
|
-
children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
children:
|
|
183
|
-
})
|
|
184
|
-
|
|
185
|
-
|
|
229
|
+
children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.VisuallyHidden, {
|
|
230
|
+
children: `${getColumnLabel(cell2)}: `
|
|
231
|
+
}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
|
|
232
|
+
flexShrink: 1,
|
|
233
|
+
minWidth: 0,
|
|
234
|
+
children: renderCell(cell2, index, rowData)
|
|
235
|
+
}),
|
|
236
|
+
/* The separator TRAILS its value, so a line that wraps
|
|
237
|
+
starts with content instead of a stray dot. */
|
|
238
|
+
i < bare.length - 1 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
|
|
239
|
+
fontSize: knobProps.sizeToken,
|
|
240
|
+
color: "$color8",
|
|
241
|
+
"aria-hidden": true,
|
|
242
|
+
accessibilityElementsHidden: true,
|
|
243
|
+
importantForAccessibility: "no-hide-descendants",
|
|
244
|
+
children: "\xB7"
|
|
245
|
+
}) : null]
|
|
246
|
+
}, cell2.id);
|
|
247
|
+
})
|
|
248
|
+
}) : null, /* Figures keep their name, inline beside the value. */
|
|
249
|
+
figures.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
|
|
250
|
+
flexWrap: "wrap",
|
|
251
|
+
alignItems: "center",
|
|
252
|
+
gap: "$3",
|
|
253
|
+
paddingTop: bare.length > 0 ? "$1.5" : 0,
|
|
254
|
+
...{
|
|
255
|
+
"data-card-slot": "figure"
|
|
256
|
+
},
|
|
257
|
+
children: figures.map(function (cell2) {
|
|
258
|
+
return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
|
|
259
|
+
alignItems: "center",
|
|
260
|
+
gap: "$1.5",
|
|
261
|
+
flexShrink: 1,
|
|
262
|
+
minWidth: 0,
|
|
263
|
+
children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
|
|
264
|
+
fontSize: knobProps.sizeToken,
|
|
265
|
+
color: "$color10",
|
|
266
|
+
fontWeight: "500",
|
|
267
|
+
children: getColumnLabel(cell2)
|
|
268
|
+
}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
|
|
269
|
+
flexShrink: 1,
|
|
270
|
+
minWidth: 0,
|
|
271
|
+
children: renderCell(cell2, index, rowData)
|
|
272
|
+
})]
|
|
273
|
+
}, cell2.id);
|
|
274
|
+
})
|
|
275
|
+
}) : null, /* Controls keep a row of their own — they are tap targets. */
|
|
276
|
+
controls.map(function (cell2) {
|
|
277
|
+
return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
|
|
278
|
+
paddingTop: "$2",
|
|
279
|
+
minWidth: 0,
|
|
280
|
+
...{
|
|
281
|
+
"data-card-slot": "control"
|
|
282
|
+
},
|
|
283
|
+
children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.VisuallyHidden, {
|
|
284
|
+
children: `${getColumnLabel(cell2)}: `
|
|
285
|
+
}), renderCell(cell2, index, rowData)]
|
|
286
|
+
}, cell2.id);
|
|
186
287
|
})]
|
|
187
288
|
}, `${row.id}-${index}`);
|
|
188
|
-
}, [enableRowSelection, showRowNumbers, showDeleteRow, readOnly, disabled, dataLength, minRows,
|
|
289
|
+
}, [enableRowSelection, showRowNumbers, showDeleteRow, readOnly, disabled, dataLength, minRows, renderCell, onDeleteRow, compact, knobProps, tableZebraOn, t, selectRowLabel, getRowPressProps]);
|
|
189
290
|
return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
|
|
190
291
|
flexDirection: "column",
|
|
191
292
|
...knobProps.gap,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","DataTableMobileCards_exports","__export","DataTableMobileCards","module","exports","import_jsx_runtime","require","import_react","import_components","import_forms","import_theme","import_react2","import_tamagui","import_react_i18next","import_table_primitives","import_withInterp","import_dataTableChrome","
|
|
1
|
+
{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","DataTableMobileCards_exports","__export","DataTableMobileCards","classifyCardField","getColumnLabel","module","exports","import_jsx_runtime","require","import_react","import_components","import_forms","import_theme","import_react2","import_tamagui","import_react_i18next","import_table_primitives","import_withInterp","import_dataTableChrome","cell","_columnDef_meta","columnDef","column","metaLabel","meta","label","header","id","selfNamingFields","Set","indicatorIds","dateLike","numberLike","_cell_column_id","_def_meta","def","String","role","startsWith","field","has","raw","getValue","trim","test","param","tableRows","enableRowSelection","showRowNumbers","showDeleteRow","readOnly","disabled","dataLength","minRows","hasActiveFilters","renderCellContent","onDeleteRow","selectAllChecked","selectAllIndeterminate","onToggleSelectAll","compact","selectRowLabel","getRowPressProps","queryInFlight","t","useTranslation","knobProps","useResolvedKnobs","component","tableZebraOn","tableZebra","renderCell","useCallback","index","rowData","jsx","TableCellContext","Provider","inTableCell","isHeader","children","renderMobileCard","row","_ref","original","visibleCells","getVisibleCells","titleCell","detailCells","showDelete","bare","figures","controls","_iteratorNormalCompletion","_didIteratorError","_iteratorError","_iterator","Symbol","iterator","_step","next","done","kind","push","err","return","hasBody","length","jsxs","View","testID","cardSurface","backgroundColor","rowIntentProps","XStack","alignItems","gap","paddingBottom","marginBottom","hairline","bottom","borderBottomColor","Checkbox","checked","getIsSelected","onChange","toggleSelected","checkboxProps","withInterp","flex","minWidth","accessibilityLabel","Text","fontSize","sizeToken","color","fontWeight","Button","chromeless","circular","size","icon","TrashIcon","onPress","flexWrap","map","cell2","i","flexShrink","VisuallyHidden","accessibilityElementsHidden","importantForAccessibility","paddingTop"],"sources":["../../../../src/components/DataTable/DataTableMobileCards.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
|