@obolnetwork/obol-ui 1.0.36 → 1.0.37
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/molecules/Table/Table.d.ts +1 -0
- package/dist/index.es.js +16 -8
- package/dist/index.js +16 -8
- package/package.json +1 -1
|
@@ -29,6 +29,7 @@ export interface SplitterTableProps extends TableProps {
|
|
|
29
29
|
onRemoveRow?(item: string | number): void;
|
|
30
30
|
onUpdateRow?(id: string, value: string | number, accessorKey: unknown): void;
|
|
31
31
|
totalSplitFooter?: number;
|
|
32
|
+
addText?: string;
|
|
32
33
|
}
|
|
33
34
|
export declare const SplitterTable: React.FC<SplitterTableProps>;
|
|
34
35
|
export declare const Table: React.FC<TableProps>;
|
package/dist/index.es.js
CHANGED
|
@@ -2063,10 +2063,10 @@ var Td = styled("td", {
|
|
|
2063
2063
|
borderRadius: 0,
|
|
2064
2064
|
width: "100%",
|
|
2065
2065
|
},
|
|
2066
|
-
textOverflow:
|
|
2066
|
+
textOverflow: "ellipsis",
|
|
2067
2067
|
maxWidth: 0,
|
|
2068
|
-
whiteSpace:
|
|
2069
|
-
overflow:
|
|
2068
|
+
whiteSpace: "nowrap",
|
|
2069
|
+
overflow: "hidden",
|
|
2070
2070
|
variants: {
|
|
2071
2071
|
splitter: {
|
|
2072
2072
|
true: {
|
|
@@ -2089,6 +2089,7 @@ var Td = styled("td", {
|
|
|
2089
2089
|
});
|
|
2090
2090
|
var Th = styled("th", {
|
|
2091
2091
|
border: "2px solid $bg04",
|
|
2092
|
+
minWidth: "20px",
|
|
2092
2093
|
py: "$sm",
|
|
2093
2094
|
px: "$sm",
|
|
2094
2095
|
textAlign: "center",
|
|
@@ -2111,8 +2112,12 @@ var BoxBorderTop = styled(Box, {
|
|
|
2111
2112
|
px: "$sm",
|
|
2112
2113
|
});
|
|
2113
2114
|
var AddNewRow = function (_a) {
|
|
2114
|
-
var onAddRow = _a.onAddRow, totalSplitFooter = _a.totalSplitFooter;
|
|
2115
|
-
return (jsxs(Tr, { children: [jsx(Td, __assign({ splitter: true }, { children: jsx(BoxBorderTop, {}) })), jsx(Td, __assign({ splitter: true, css: { backgroundColor: "$bg03" } }, { children: jsx(BoxBorderTop,
|
|
2115
|
+
var onAddRow = _a.onAddRow, totalSplitFooter = _a.totalSplitFooter, _b = _a.addText, addText = _b === void 0 ? "+ Add Recipient" : _b;
|
|
2116
|
+
return (jsxs(Tr, { children: [jsx(Td, __assign({ splitter: true }, { children: jsx(BoxBorderTop, {}) })), jsx(Td, __assign({ splitter: true, css: { backgroundColor: "$bg03" } }, { children: jsx(BoxBorderTop, __assign({ css: {
|
|
2117
|
+
"@xs": {
|
|
2118
|
+
px: "$2",
|
|
2119
|
+
},
|
|
2120
|
+
} }, { children: onAddRow && (jsxs(Button, __assign({ type: "button", css: {
|
|
2116
2121
|
color: "$obolGreen",
|
|
2117
2122
|
justifyContent: "start",
|
|
2118
2123
|
borderRadius: 0,
|
|
@@ -2122,13 +2127,16 @@ var AddNewRow = function (_a) {
|
|
|
2122
2127
|
"&:disabled": {
|
|
2123
2128
|
borderColor: "transparent",
|
|
2124
2129
|
},
|
|
2130
|
+
"@xs": {
|
|
2131
|
+
px: "$1",
|
|
2132
|
+
},
|
|
2125
2133
|
}, fullWidth: true, ghost: true, onClick: function (e) {
|
|
2126
2134
|
e.preventDefault();
|
|
2127
2135
|
onAddRow();
|
|
2128
|
-
}, disabled: totalSplitFooter === 100 }, { children: "+
|
|
2136
|
+
}, disabled: totalSplitFooter === 100 }, { children: [jsx(Box, __assign({ css: { display: "none", "@xs": { display: "inline-block" } } }, { children: "+ Recipient" })), " ", jsx(Box, __assign({ css: { "@xs": { display: "none" } } }, { children: addText }))] }))) })) })), jsx(Td, __assign({ splitter: true, css: { backgroundColor: "$bg03" } }, { children: jsx(BoxBorderTop, { children: jsx(Box, { children: totalSplitFooter && "".concat(totalSplitFooter, "%") }) }) }))] }));
|
|
2129
2137
|
};
|
|
2130
2138
|
var SplitterTable = function (_a) {
|
|
2131
|
-
var rows = _a.rows, columns = _a.columns, onAddRow = _a.onAddRow, onRemoveRow = _a.onRemoveRow, onUpdateRow = _a.onUpdateRow, _b = _a.totalSplitFooter, totalSplitFooter = _b === void 0 ? 100 : _b;
|
|
2139
|
+
var rows = _a.rows, columns = _a.columns, onAddRow = _a.onAddRow, onRemoveRow = _a.onRemoveRow, onUpdateRow = _a.onUpdateRow, _b = _a.totalSplitFooter, totalSplitFooter = _b === void 0 ? 100 : _b, addText = _a.addText;
|
|
2132
2140
|
return (jsxs(StyledTable, { children: [jsx("thead", { children: jsxs("tr", { children: [jsx(Th, {}), columns.map(function (_a, index) {
|
|
2133
2141
|
var css = _a.css, column = __rest(_a, ["css"]);
|
|
2134
2142
|
return (jsx(Th, __assign({ css: __assign({ textAlign: "start" }, css) }, { children: column.header }), "header-".concat(index)));
|
|
@@ -2180,7 +2188,7 @@ var SplitterTable = function (_a) {
|
|
|
2180
2188
|
onUpdateRow(row.id, value, column.accessorKey);
|
|
2181
2189
|
}, min: (_c = (_b = column.cell) === null || _b === void 0 ? void 0 : _b.config) === null || _c === void 0 ? void 0 : _c.min, max: (_e = (_d = column.cell) === null || _d === void 0 ? void 0 : _d.config) === null || _e === void 0 ? void 0 : _e.max, type: (_g = (_f = column.cell) === null || _f === void 0 ? void 0 : _f.config) === null || _g === void 0 ? void 0 : _g.type, readOnly: !isEditable })) }), "cell ".concat(cellIndex)));
|
|
2182
2190
|
}), onRemoveRow && isRemovable && (jsx(Td, __assign({ splitter: true, size: "sm", css: { p: "$2" } }, { children: jsx(IconButton, __assign({ ghost: true, onClick: function () { return onRemoveRow(row.id); } }, { children: jsx(TrashIcon, {}) })) })))] }, row.id));
|
|
2183
|
-
}), jsx(AddNewRow, { onAddRow: onAddRow, totalSplitFooter: totalSplitFooter })] })] }));
|
|
2191
|
+
}), jsx(AddNewRow, { onAddRow: onAddRow, totalSplitFooter: totalSplitFooter, addText: addText })] })] }));
|
|
2184
2192
|
};
|
|
2185
2193
|
var Table = function (_a) {
|
|
2186
2194
|
var rows = _a.rows, columns = _a.columns;
|
package/dist/index.js
CHANGED
|
@@ -2097,10 +2097,10 @@ var Td = styled("td", {
|
|
|
2097
2097
|
borderRadius: 0,
|
|
2098
2098
|
width: "100%",
|
|
2099
2099
|
},
|
|
2100
|
-
textOverflow:
|
|
2100
|
+
textOverflow: "ellipsis",
|
|
2101
2101
|
maxWidth: 0,
|
|
2102
|
-
whiteSpace:
|
|
2103
|
-
overflow:
|
|
2102
|
+
whiteSpace: "nowrap",
|
|
2103
|
+
overflow: "hidden",
|
|
2104
2104
|
variants: {
|
|
2105
2105
|
splitter: {
|
|
2106
2106
|
true: {
|
|
@@ -2123,6 +2123,7 @@ var Td = styled("td", {
|
|
|
2123
2123
|
});
|
|
2124
2124
|
var Th = styled("th", {
|
|
2125
2125
|
border: "2px solid $bg04",
|
|
2126
|
+
minWidth: "20px",
|
|
2126
2127
|
py: "$sm",
|
|
2127
2128
|
px: "$sm",
|
|
2128
2129
|
textAlign: "center",
|
|
@@ -2145,8 +2146,12 @@ var BoxBorderTop = styled(Box, {
|
|
|
2145
2146
|
px: "$sm",
|
|
2146
2147
|
});
|
|
2147
2148
|
var AddNewRow = function (_a) {
|
|
2148
|
-
var onAddRow = _a.onAddRow, totalSplitFooter = _a.totalSplitFooter;
|
|
2149
|
-
return (jsxRuntime.jsxs(Tr, { children: [jsxRuntime.jsx(Td, __assign({ splitter: true }, { children: jsxRuntime.jsx(BoxBorderTop, {}) })), jsxRuntime.jsx(Td, __assign({ splitter: true, css: { backgroundColor: "$bg03" } }, { children: jsxRuntime.jsx(BoxBorderTop,
|
|
2149
|
+
var onAddRow = _a.onAddRow, totalSplitFooter = _a.totalSplitFooter, _b = _a.addText, addText = _b === void 0 ? "+ Add Recipient" : _b;
|
|
2150
|
+
return (jsxRuntime.jsxs(Tr, { children: [jsxRuntime.jsx(Td, __assign({ splitter: true }, { children: jsxRuntime.jsx(BoxBorderTop, {}) })), jsxRuntime.jsx(Td, __assign({ splitter: true, css: { backgroundColor: "$bg03" } }, { children: jsxRuntime.jsx(BoxBorderTop, __assign({ css: {
|
|
2151
|
+
"@xs": {
|
|
2152
|
+
px: "$2",
|
|
2153
|
+
},
|
|
2154
|
+
} }, { children: onAddRow && (jsxRuntime.jsxs(Button, __assign({ type: "button", css: {
|
|
2150
2155
|
color: "$obolGreen",
|
|
2151
2156
|
justifyContent: "start",
|
|
2152
2157
|
borderRadius: 0,
|
|
@@ -2156,13 +2161,16 @@ var AddNewRow = function (_a) {
|
|
|
2156
2161
|
"&:disabled": {
|
|
2157
2162
|
borderColor: "transparent",
|
|
2158
2163
|
},
|
|
2164
|
+
"@xs": {
|
|
2165
|
+
px: "$1",
|
|
2166
|
+
},
|
|
2159
2167
|
}, fullWidth: true, ghost: true, onClick: function (e) {
|
|
2160
2168
|
e.preventDefault();
|
|
2161
2169
|
onAddRow();
|
|
2162
|
-
}, disabled: totalSplitFooter === 100 }, { children: "+
|
|
2170
|
+
}, disabled: totalSplitFooter === 100 }, { children: [jsxRuntime.jsx(Box, __assign({ css: { display: "none", "@xs": { display: "inline-block" } } }, { children: "+ Recipient" })), " ", jsxRuntime.jsx(Box, __assign({ css: { "@xs": { display: "none" } } }, { children: addText }))] }))) })) })), jsxRuntime.jsx(Td, __assign({ splitter: true, css: { backgroundColor: "$bg03" } }, { children: jsxRuntime.jsx(BoxBorderTop, { children: jsxRuntime.jsx(Box, { children: totalSplitFooter && "".concat(totalSplitFooter, "%") }) }) }))] }));
|
|
2163
2171
|
};
|
|
2164
2172
|
var SplitterTable = function (_a) {
|
|
2165
|
-
var rows = _a.rows, columns = _a.columns, onAddRow = _a.onAddRow, onRemoveRow = _a.onRemoveRow, onUpdateRow = _a.onUpdateRow, _b = _a.totalSplitFooter, totalSplitFooter = _b === void 0 ? 100 : _b;
|
|
2173
|
+
var rows = _a.rows, columns = _a.columns, onAddRow = _a.onAddRow, onRemoveRow = _a.onRemoveRow, onUpdateRow = _a.onUpdateRow, _b = _a.totalSplitFooter, totalSplitFooter = _b === void 0 ? 100 : _b, addText = _a.addText;
|
|
2166
2174
|
return (jsxRuntime.jsxs(StyledTable, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsxs("tr", { children: [jsxRuntime.jsx(Th, {}), columns.map(function (_a, index) {
|
|
2167
2175
|
var css = _a.css, column = __rest(_a, ["css"]);
|
|
2168
2176
|
return (jsxRuntime.jsx(Th, __assign({ css: __assign({ textAlign: "start" }, css) }, { children: column.header }), "header-".concat(index)));
|
|
@@ -2214,7 +2222,7 @@ var SplitterTable = function (_a) {
|
|
|
2214
2222
|
onUpdateRow(row.id, value, column.accessorKey);
|
|
2215
2223
|
}, min: (_c = (_b = column.cell) === null || _b === void 0 ? void 0 : _b.config) === null || _c === void 0 ? void 0 : _c.min, max: (_e = (_d = column.cell) === null || _d === void 0 ? void 0 : _d.config) === null || _e === void 0 ? void 0 : _e.max, type: (_g = (_f = column.cell) === null || _f === void 0 ? void 0 : _f.config) === null || _g === void 0 ? void 0 : _g.type, readOnly: !isEditable })) }), "cell ".concat(cellIndex)));
|
|
2216
2224
|
}), onRemoveRow && isRemovable && (jsxRuntime.jsx(Td, __assign({ splitter: true, size: "sm", css: { p: "$2" } }, { children: jsxRuntime.jsx(IconButton, __assign({ ghost: true, onClick: function () { return onRemoveRow(row.id); } }, { children: jsxRuntime.jsx(TrashIcon, {}) })) })))] }, row.id));
|
|
2217
|
-
}), jsxRuntime.jsx(AddNewRow, { onAddRow: onAddRow, totalSplitFooter: totalSplitFooter })] })] }));
|
|
2225
|
+
}), jsxRuntime.jsx(AddNewRow, { onAddRow: onAddRow, totalSplitFooter: totalSplitFooter, addText: addText })] })] }));
|
|
2218
2226
|
};
|
|
2219
2227
|
var Table = function (_a) {
|
|
2220
2228
|
var rows = _a.rows, columns = _a.columns;
|