@agilant/toga-blox 1.0.216 → 1.0.218
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.
|
@@ -8,7 +8,7 @@ const DefaultCollapsedToggle = ({ onToggle, truncated, className = "", linkTextC
|
|
|
8
8
|
e.stopPropagation();
|
|
9
9
|
onToggle();
|
|
10
10
|
}, children: _jsxs("span", { children: [truncated, "\u2026", _jsx("span", { className: `hidden group-hover:inline text-purple-500 ml-1 underline ${linkTextClassNames}`, children: "Show more" })] }) }));
|
|
11
|
-
const TableCell = ({ cell, isLastCell, expanded, onToggle, maxCharacters = DEFAULT_MAX_CHARS, cellMaxWidthWhenExpanded = 50, cellColor = "bg-blue-500", additionalCellClassNames = "", toggleComponent: ToggleComponent = DefaultCollapsedToggle, cellExpandable = false, linkTextClassNames = "text-purple-500 ml-1 underline", cellTextClassNames = "", onCellOverflow = () => { }, expandedCellActionButton
|
|
11
|
+
const TableCell = ({ cell, isLastCell, expanded, onToggle, maxCharacters = DEFAULT_MAX_CHARS, cellMaxWidthWhenExpanded = 50, cellColor = "bg-blue-500", additionalCellClassNames = "", toggleComponent: ToggleComponent = DefaultCollapsedToggle, cellExpandable = false, linkTextClassNames = "text-purple-500 ml-1 underline", cellTextClassNames = "", onCellOverflow = () => { }, expandedCellActionButton, }) => {
|
|
12
12
|
const prev = useRef();
|
|
13
13
|
// --- truncation logic ---
|
|
14
14
|
const isString = typeof cell.value === "string";
|
|
@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import { Fragment, useState, useCallback, } from "react";
|
|
4
4
|
import { motion, AnimatePresence } from "framer-motion";
|
|
5
5
|
import TableCell from "../TableCell";
|
|
6
|
-
const TableRow = ({ row, prepareRow, activeIndex, activeRowColor = "bg-pink-100", rowHoverClasses = "hover:bg-navy-100 hover:cursor-pointer", rowClassNames = "", hasInfiniteScroll, rowUuid, onRowClick, expandedCells, toggleCell, hasDropDown = false, onFetchRowData, loadingIndicator, errorIndicator, expandedContent, expandedRowUuid = null, cellExpandable = false, onToggleRow, maxCharacters = 30, cellColor = "bg-blue-50", cellMaxWidthWhenExpanded = 50, additionalCellClassNames = "", toggleComponent = undefined, linkTextClassNames = "", cellTextClassNames = "", onRowOverflow = () => { }, expandedCellActionButton, }) => {
|
|
6
|
+
const TableRow = ({ row, prepareRow, activeIndex, activeRowColor = "bg-pink-100", rowHoverClasses = "hover:bg-navy-100 hover:cursor-pointer", rowClassNames = "", hasInfiniteScroll, rowUuid, onRowClick, expandedCells, toggleCell, hasDropDown = false, onFetchRowData, loadingIndicator, errorIndicator, expandedContent, expandedRowUuid = null, cellExpandable = false, onToggleRow, maxCharacters = 30, cellColor = "bg-blue-50", cellMaxWidthWhenExpanded = 50, additionalCellClassNames = "", toggleComponent = undefined, linkTextClassNames = "", cellTextClassNames = "", onRowOverflow = () => { }, expandedCellActionButton = (_jsx("span", { className: "text-blue-500", children: "Action button here" })), }) => {
|
|
7
7
|
prepareRow(row);
|
|
8
8
|
const rowClasses = `border-primary${activeIndex === row.index ? ` activeRow ${activeRowColor}` : ""}`;
|
|
9
9
|
const [overflowMap, setOverflowMap] = useState({});
|
|
@@ -134,7 +134,7 @@ export const MultipleRows = () => {
|
|
|
134
134
|
const toggleCell = React.useCallback((key) => setExpandedCells((s) => ({ ...s, [key]: !s[key] })), []);
|
|
135
135
|
const [expandedRowUuid, setExpandedRowUuid] = React.useState(null);
|
|
136
136
|
const onToggleRow = React.useCallback((uuid) => setExpandedRowUuid((prev) => (prev === uuid ? null : uuid)), []);
|
|
137
|
-
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: "", cellExpandable: true, expandedCellActionButton: "" }), _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: "", expandedCellActionButton: "" })] }) }));
|
|
137
|
+
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: "", cellExpandable: true, expandedCellActionButton: _jsx(_Fragment, { children: "BUTTON" }) }), _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: "", expandedCellActionButton: _jsx(_Fragment, { children: "BUTTON" }) })] }) }));
|
|
138
138
|
};
|
|
139
139
|
export const WithCustomToggle = Template.bind({});
|
|
140
140
|
WithCustomToggle.args = {
|