@agilant/toga-blox 1.0.202 → 1.0.203
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.
|
@@ -1,7 +1,12 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
// stories/TableRow.stories.tsx
|
|
3
3
|
import React from "react";
|
|
4
4
|
import TableRow from "./TableRow";
|
|
5
|
+
// ----- Custom Toggle component -----
|
|
6
|
+
const CustomToggle = ({ expanded, onToggle, truncated, fullText, className = "", linkTextClassNames = "text-purple-500 ml-1 underline", }) => (_jsx("button", { onClick: (e) => {
|
|
7
|
+
e.stopPropagation();
|
|
8
|
+
onToggle();
|
|
9
|
+
}, className: `px-2 py-1 border rounded ${className}`, children: expanded ? (_jsxs(_Fragment, { children: [fullText, " ", _jsx("span", { className: linkTextClassNames, children: "\u25B2 Less" })] })) : (_jsxs(_Fragment, { children: [truncated, "\u2026 ", _jsx("span", { className: linkTextClassNames, children: "\u25BC More" })] })) }));
|
|
5
10
|
const sampleData = {
|
|
6
11
|
uuid: "12345",
|
|
7
12
|
name: "John Doe",
|
|
@@ -126,3 +131,13 @@ export const MultipleRows = () => {
|
|
|
126
131
|
const onToggleRow = React.useCallback((uuid) => setExpandedRowUuid((prev) => (prev === uuid ? null : uuid)), []);
|
|
127
132
|
return (_jsx("table", { className: "min-w-[700px]", children: _jsxs("tbody", { children: [_jsx(TableRow, { row: mockRow, prepareRow: prepareRow, hasInfiniteScroll: true, onRowClick: () => alert("from row"), hasDropDown: true, rowUuid: "1", expandedContent: sampleData.expandedContent, expandedCells: expandedCells, toggleCell: toggleCell, expandedRowUuid: expandedRowUuid, onToggleRow: onToggleRow, maxCharacters: 30, cellColor: "", cellMaxWidthWhenExpanded: 0, additionalCellClassNames: "" }), _jsx(TableRow, { row: mockRow2, prepareRow: prepareRow, hasInfiniteScroll: true, onRowClick: () => alert("from row"), hasDropDown: false, rowUuid: "2", expandedContent: sampleData.expandedContent, expandedCells: expandedCells, toggleCell: toggleCell, expandedRowUuid: expandedRowUuid, onToggleRow: onToggleRow, cellExpandable: true, maxCharacters: 30, cellColor: "", cellMaxWidthWhenExpanded: 0, additionalCellClassNames: "" })] }) }));
|
|
128
133
|
};
|
|
134
|
+
export const WithCustomToggle = Template.bind({});
|
|
135
|
+
WithCustomToggle.args = {
|
|
136
|
+
...Default.args,
|
|
137
|
+
// turn on cell‐level expand/collapse
|
|
138
|
+
cellExpandable: true,
|
|
139
|
+
// pass your custom component here:
|
|
140
|
+
toggleComponent: CustomToggle,
|
|
141
|
+
// optional: override the “Show more/less” link style
|
|
142
|
+
linkTextClassNames: "text-red-600 font-bold",
|
|
143
|
+
};
|