@obolnetwork/obol-ui 1.0.10 → 1.0.13
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.
|
@@ -3,6 +3,7 @@ import * as Stitches from "@stitches/react";
|
|
|
3
3
|
export declare const IconButton: import("@stitches/react/types/styled-component").StyledComponent<"button", {
|
|
4
4
|
ghost?: boolean | "true" | undefined;
|
|
5
5
|
fullWidth?: boolean | "true" | undefined;
|
|
6
|
+
borderDisabled?: boolean | "true" | undefined;
|
|
6
7
|
}, {
|
|
7
8
|
motion: "(prefers-reduced-motion)";
|
|
8
9
|
hover: "(any-hover: hover)";
|
|
@@ -488,6 +489,7 @@ export declare type IconButtonComponentProps = IconButtonComponentVariants;
|
|
|
488
489
|
export declare const IconButtonStory: (props: Omit<import("@stitches/react/types/styled-component").TransformProps<{
|
|
489
490
|
ghost?: boolean | "true" | undefined;
|
|
490
491
|
fullWidth?: boolean | "true" | undefined;
|
|
492
|
+
borderDisabled?: boolean | "true" | undefined;
|
|
491
493
|
}, {
|
|
492
494
|
motion: "(prefers-reduced-motion)";
|
|
493
495
|
hover: "(any-hover: hover)";
|
|
@@ -498,9 +500,10 @@ export declare const IconButtonStory: (props: Omit<import("@stitches/react/types
|
|
|
498
500
|
bp2: "(min-width: 900px)";
|
|
499
501
|
md: "(max-width: 1200px)";
|
|
500
502
|
lg: "(max-width: 1800px)";
|
|
501
|
-
}>, "ghost" | "fullWidth"> & {
|
|
503
|
+
}>, "ghost" | "fullWidth" | "borderDisabled"> & {
|
|
502
504
|
ghost?: boolean | undefined;
|
|
503
505
|
fullWidth?: boolean | undefined;
|
|
506
|
+
borderDisabled?: boolean | undefined;
|
|
504
507
|
} & {
|
|
505
508
|
children?: import("react").ReactNode;
|
|
506
509
|
disabled?: boolean | undefined;
|
|
@@ -5,15 +5,28 @@ export interface RowItem {
|
|
|
5
5
|
}
|
|
6
6
|
export declare type RowTableType = Record<string, string | React.ReactNode>;
|
|
7
7
|
export declare type RowsTableType = RowItem[];
|
|
8
|
+
export declare type CellDef = {
|
|
9
|
+
component: "TextField" | "NumberField";
|
|
10
|
+
config?: {
|
|
11
|
+
type: "text" | "number";
|
|
12
|
+
max: number;
|
|
13
|
+
min: number;
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
export declare type ColumnDef<T> = {
|
|
17
|
+
accessorKey: keyof T;
|
|
18
|
+
header: string;
|
|
19
|
+
cell?: CellDef;
|
|
20
|
+
};
|
|
8
21
|
export interface TableProps {
|
|
9
|
-
rows:
|
|
10
|
-
columns:
|
|
22
|
+
rows: any[];
|
|
23
|
+
columns: ColumnDef<any>[];
|
|
11
24
|
}
|
|
12
25
|
export interface SplitterTableProps extends TableProps {
|
|
13
|
-
renderComponentValue?: "TextField" | "Text";
|
|
14
26
|
onAddRow(item: string): void;
|
|
15
27
|
onRemoveRow(item: string | number): void;
|
|
16
|
-
onUpdateRow(id: string, value: string): void;
|
|
28
|
+
onUpdateRow(id: string, value: string, accessorKey: unknown): void;
|
|
29
|
+
removeButton?: boolean;
|
|
17
30
|
}
|
|
18
31
|
export declare const SplitterTable: React.FC<SplitterTableProps>;
|
|
19
32
|
export declare const Table: React.FC<TableProps>;
|
package/dist/index.es.js
CHANGED
|
@@ -1199,6 +1199,7 @@ var IconButton = styled("button", {
|
|
|
1199
1199
|
color: "$muted",
|
|
1200
1200
|
},
|
|
1201
1201
|
margin: 0,
|
|
1202
|
+
border: "2px solid transparent",
|
|
1202
1203
|
variants: {
|
|
1203
1204
|
ghost: {
|
|
1204
1205
|
true: {
|
|
@@ -1215,6 +1216,11 @@ var IconButton = styled("button", {
|
|
|
1215
1216
|
width: "$full",
|
|
1216
1217
|
},
|
|
1217
1218
|
},
|
|
1219
|
+
borderDisabled: {
|
|
1220
|
+
true: {
|
|
1221
|
+
border: "2px solid $bg04",
|
|
1222
|
+
},
|
|
1223
|
+
},
|
|
1218
1224
|
},
|
|
1219
1225
|
});
|
|
1220
1226
|
var IconButtonStory = modifyVariantsForStory(IconButton);
|
|
@@ -1358,8 +1364,9 @@ TextFieldWithCopy.displayName = "TextFieldWithCopy";
|
|
|
1358
1364
|
|
|
1359
1365
|
var NumberField = forwardRef(function (_a, ref) {
|
|
1360
1366
|
var _b = _a.max, max = _b === void 0 ? 10 : _b, _c = _a.min, min = _c === void 0 ? 1 : _c, value = _a.value, onChangeValue = _a.onChangeValue;
|
|
1361
|
-
var _d = useState(value
|
|
1362
|
-
var handleOnDec = function () {
|
|
1367
|
+
var _d = useState(value || min), qty = _d[0], setQty = _d[1];
|
|
1368
|
+
var handleOnDec = function (e) {
|
|
1369
|
+
e.preventDefault();
|
|
1363
1370
|
if (qty <= min) {
|
|
1364
1371
|
setQty(min);
|
|
1365
1372
|
}
|
|
@@ -1367,7 +1374,8 @@ var NumberField = forwardRef(function (_a, ref) {
|
|
|
1367
1374
|
setQty(qty - 1);
|
|
1368
1375
|
}
|
|
1369
1376
|
};
|
|
1370
|
-
var handleOnInc = function () {
|
|
1377
|
+
var handleOnInc = function (e) {
|
|
1378
|
+
e.preventDefault();
|
|
1371
1379
|
if (qty >= max) {
|
|
1372
1380
|
setQty(max);
|
|
1373
1381
|
}
|
|
@@ -1376,7 +1384,7 @@ var NumberField = forwardRef(function (_a, ref) {
|
|
|
1376
1384
|
}
|
|
1377
1385
|
};
|
|
1378
1386
|
var handleOnChange = function (e) {
|
|
1379
|
-
var value = e.target
|
|
1387
|
+
var value = e.target;
|
|
1380
1388
|
if (value > max) {
|
|
1381
1389
|
setQty(max);
|
|
1382
1390
|
}
|
|
@@ -1425,7 +1433,7 @@ var NumberField = forwardRef(function (_a, ref) {
|
|
|
1425
1433
|
borderRadius: 0,
|
|
1426
1434
|
width: "95px",
|
|
1427
1435
|
},
|
|
1428
|
-
} }, { children: [jsx(IconButton, __assign({ disabled: qty <= min, className: "dec-button", onClick:
|
|
1436
|
+
} }, { children: [jsx(IconButton, __assign({ disabled: qty <= min, className: "dec-button", onClick: handleOnDec, borderDisabled: qty <= min }, { children: "-" })), jsx(TextField, { css: { borderRightStyle: "none", borderLeftStyle: "none" }, type: "number", ref: ref, value: qty, onChange: handleOnChange }), jsx(IconButton, __assign({ disabled: qty >= max, className: "inc-button", onClick: handleOnInc, borderDisabled: qty >= max }, { children: "+" }))] })));
|
|
1429
1437
|
});
|
|
1430
1438
|
NumberField.displayName = "NumberField";
|
|
1431
1439
|
|
|
@@ -1805,7 +1813,7 @@ var StyledTable = styled("table", {
|
|
|
1805
1813
|
borderRadius: "2px",
|
|
1806
1814
|
backgroundColor: "$bg02",
|
|
1807
1815
|
borderStyle: "hidden",
|
|
1808
|
-
boxShadow: "0 0 0 2px $bg04",
|
|
1816
|
+
boxShadow: "0 0 0 2px $colors$bg04",
|
|
1809
1817
|
width: "100%",
|
|
1810
1818
|
"& thead": {
|
|
1811
1819
|
color: "$body",
|
|
@@ -1865,18 +1873,29 @@ var AddNewRow = function (props) {
|
|
|
1865
1873
|
};
|
|
1866
1874
|
// Components
|
|
1867
1875
|
var SplitterTable = function (_a) {
|
|
1868
|
-
var rows = _a.rows, columns = _a.columns,
|
|
1869
|
-
return (jsxs(StyledTable, { children: [jsxs("thead", { children: [jsx(Td, {}), columns.map(function (column, index) { return (jsx(Td, __assign({ css: { textAlign: "start" } }, { children: column }), "header-".concat(index))); }), jsx(Td, {})] }), jsxs("tbody", { children: [rows.map(function (row, rowIndex) { return (jsxs("tr", { children: [jsx(Td, __assign({ size: "sm" }, { children: rowIndex + 1 })),
|
|
1870
|
-
|
|
1871
|
-
|
|
1872
|
-
var isTextField =
|
|
1873
|
-
return (jsx(Td, __assign({ noPadding: true
|
|
1874
|
-
|
|
1876
|
+
var rows = _a.rows, columns = _a.columns, onAddRow = _a.onAddRow, onRemoveRow = _a.onRemoveRow, onUpdateRow = _a.onUpdateRow, _b = _a.removeButton, removeButton = _b === void 0 ? true : _b;
|
|
1877
|
+
return (jsxs(StyledTable, { children: [jsxs("thead", { children: [jsx(Td, {}), columns.map(function (column, index) { return (jsx(Td, __assign({ css: { textAlign: "start" } }, { children: column.header }), "header-".concat(index))); }), jsx(Td, {})] }), jsxs("tbody", { children: [rows.map(function (row, rowIndex) { return (jsxs("tr", { children: [jsx(Td, __assign({ size: "sm" }, { children: rowIndex + 1 })), columns.map(function (column, cellIndex) {
|
|
1878
|
+
var _a;
|
|
1879
|
+
// if (column === "id") return null;
|
|
1880
|
+
var isTextField = !!column.cell;
|
|
1881
|
+
return (jsx(Td, __assign({ noPadding: true, css: {
|
|
1882
|
+
"input::-webkit-inner-spin-button": {
|
|
1883
|
+
"-webkit-appearance": "none",
|
|
1884
|
+
margin: 0,
|
|
1885
|
+
},
|
|
1886
|
+
/* Firefox */
|
|
1887
|
+
"input[type=number]": {
|
|
1888
|
+
"-moz-appearance": "textfield",
|
|
1889
|
+
},
|
|
1890
|
+
} }, { children: isTextField ? (jsx(TextField, __assign({ defaultValue: row[column.accessorKey], onChange: function (e) {
|
|
1891
|
+
return onUpdateRow(row.id, e.target.value, column.accessorKey);
|
|
1892
|
+
} }, (_a = column.cell) === null || _a === void 0 ? void 0 : _a.config))) : (row[column.accessorKey]) }), "cell ".concat(cellIndex)));
|
|
1893
|
+
}), removeButton && (jsx(Td, __assign({ size: "sm" }, { children: jsx(IconButton, __assign({ ghost: true, onClick: function () { return onRemoveRow(row.id); } }, { children: jsx(TrashIcon, {}) })) })))] }, row.id)); }), jsx(AddNewRow, { handleOnClick: function () { return onAddRow(""); } })] })] }));
|
|
1875
1894
|
};
|
|
1876
1895
|
var Table = function (_a) {
|
|
1877
1896
|
var rows = _a.rows, columns = _a.columns;
|
|
1878
|
-
return (jsxs(StyledTable, { children: [jsx("thead", { children: columns.map(function (column, index) { return (jsx(Td, { children: column }, "header-".concat(index))); }) }), jsx("tbody", { children: rows.map(function (row, rowIndex) { return (jsx("tr", { children:
|
|
1879
|
-
return (jsx(Td, { children: row.
|
|
1897
|
+
return (jsxs(StyledTable, { children: [jsx("thead", { children: columns.map(function (column, index) { return (jsx(Td, { children: column }, "header-".concat(index))); }) }), jsx("tbody", { children: rows.map(function (row, rowIndex) { return (jsx("tr", { children: columns.map(function (column, cellIndex) {
|
|
1898
|
+
return (jsx(Td, { children: row[column.accessorKey] }, "cell ".concat(cellIndex)));
|
|
1880
1899
|
}) }, "row ".concat(rowIndex))); }) })] }));
|
|
1881
1900
|
};
|
|
1882
1901
|
|
package/dist/index.js
CHANGED
|
@@ -1231,6 +1231,7 @@ var IconButton = styled("button", {
|
|
|
1231
1231
|
color: "$muted",
|
|
1232
1232
|
},
|
|
1233
1233
|
margin: 0,
|
|
1234
|
+
border: "2px solid transparent",
|
|
1234
1235
|
variants: {
|
|
1235
1236
|
ghost: {
|
|
1236
1237
|
true: {
|
|
@@ -1247,6 +1248,11 @@ var IconButton = styled("button", {
|
|
|
1247
1248
|
width: "$full",
|
|
1248
1249
|
},
|
|
1249
1250
|
},
|
|
1251
|
+
borderDisabled: {
|
|
1252
|
+
true: {
|
|
1253
|
+
border: "2px solid $bg04",
|
|
1254
|
+
},
|
|
1255
|
+
},
|
|
1250
1256
|
},
|
|
1251
1257
|
});
|
|
1252
1258
|
var IconButtonStory = modifyVariantsForStory(IconButton);
|
|
@@ -1390,8 +1396,9 @@ TextFieldWithCopy.displayName = "TextFieldWithCopy";
|
|
|
1390
1396
|
|
|
1391
1397
|
var NumberField = React.forwardRef(function (_a, ref) {
|
|
1392
1398
|
var _b = _a.max, max = _b === void 0 ? 10 : _b, _c = _a.min, min = _c === void 0 ? 1 : _c, value = _a.value, onChangeValue = _a.onChangeValue;
|
|
1393
|
-
var _d = React.useState(value
|
|
1394
|
-
var handleOnDec = function () {
|
|
1399
|
+
var _d = React.useState(value || min), qty = _d[0], setQty = _d[1];
|
|
1400
|
+
var handleOnDec = function (e) {
|
|
1401
|
+
e.preventDefault();
|
|
1395
1402
|
if (qty <= min) {
|
|
1396
1403
|
setQty(min);
|
|
1397
1404
|
}
|
|
@@ -1399,7 +1406,8 @@ var NumberField = React.forwardRef(function (_a, ref) {
|
|
|
1399
1406
|
setQty(qty - 1);
|
|
1400
1407
|
}
|
|
1401
1408
|
};
|
|
1402
|
-
var handleOnInc = function () {
|
|
1409
|
+
var handleOnInc = function (e) {
|
|
1410
|
+
e.preventDefault();
|
|
1403
1411
|
if (qty >= max) {
|
|
1404
1412
|
setQty(max);
|
|
1405
1413
|
}
|
|
@@ -1408,7 +1416,7 @@ var NumberField = React.forwardRef(function (_a, ref) {
|
|
|
1408
1416
|
}
|
|
1409
1417
|
};
|
|
1410
1418
|
var handleOnChange = function (e) {
|
|
1411
|
-
var value = e.target
|
|
1419
|
+
var value = e.target;
|
|
1412
1420
|
if (value > max) {
|
|
1413
1421
|
setQty(max);
|
|
1414
1422
|
}
|
|
@@ -1457,7 +1465,7 @@ var NumberField = React.forwardRef(function (_a, ref) {
|
|
|
1457
1465
|
borderRadius: 0,
|
|
1458
1466
|
width: "95px",
|
|
1459
1467
|
},
|
|
1460
|
-
} }, { children: [jsxRuntime.jsx(IconButton, __assign({ disabled: qty <= min, className: "dec-button", onClick:
|
|
1468
|
+
} }, { children: [jsxRuntime.jsx(IconButton, __assign({ disabled: qty <= min, className: "dec-button", onClick: handleOnDec, borderDisabled: qty <= min }, { children: "-" })), jsxRuntime.jsx(TextField, { css: { borderRightStyle: "none", borderLeftStyle: "none" }, type: "number", ref: ref, value: qty, onChange: handleOnChange }), jsxRuntime.jsx(IconButton, __assign({ disabled: qty >= max, className: "inc-button", onClick: handleOnInc, borderDisabled: qty >= max }, { children: "+" }))] })));
|
|
1461
1469
|
});
|
|
1462
1470
|
NumberField.displayName = "NumberField";
|
|
1463
1471
|
|
|
@@ -1837,7 +1845,7 @@ var StyledTable = styled("table", {
|
|
|
1837
1845
|
borderRadius: "2px",
|
|
1838
1846
|
backgroundColor: "$bg02",
|
|
1839
1847
|
borderStyle: "hidden",
|
|
1840
|
-
boxShadow: "0 0 0 2px $bg04",
|
|
1848
|
+
boxShadow: "0 0 0 2px $colors$bg04",
|
|
1841
1849
|
width: "100%",
|
|
1842
1850
|
"& thead": {
|
|
1843
1851
|
color: "$body",
|
|
@@ -1897,18 +1905,29 @@ var AddNewRow = function (props) {
|
|
|
1897
1905
|
};
|
|
1898
1906
|
// Components
|
|
1899
1907
|
var SplitterTable = function (_a) {
|
|
1900
|
-
var rows = _a.rows, columns = _a.columns,
|
|
1901
|
-
return (jsxRuntime.jsxs(StyledTable, { children: [jsxRuntime.jsxs("thead", { children: [jsxRuntime.jsx(Td, {}), columns.map(function (column, index) { return (jsxRuntime.jsx(Td, __assign({ css: { textAlign: "start" } }, { children: column }), "header-".concat(index))); }), jsxRuntime.jsx(Td, {})] }), jsxRuntime.jsxs("tbody", { children: [rows.map(function (row, rowIndex) { return (jsxRuntime.jsxs("tr", { children: [jsxRuntime.jsx(Td, __assign({ size: "sm" }, { children: rowIndex + 1 })),
|
|
1902
|
-
|
|
1903
|
-
|
|
1904
|
-
var isTextField =
|
|
1905
|
-
return (jsxRuntime.jsx(Td, __assign({ noPadding: true
|
|
1906
|
-
|
|
1908
|
+
var rows = _a.rows, columns = _a.columns, onAddRow = _a.onAddRow, onRemoveRow = _a.onRemoveRow, onUpdateRow = _a.onUpdateRow, _b = _a.removeButton, removeButton = _b === void 0 ? true : _b;
|
|
1909
|
+
return (jsxRuntime.jsxs(StyledTable, { children: [jsxRuntime.jsxs("thead", { children: [jsxRuntime.jsx(Td, {}), columns.map(function (column, index) { return (jsxRuntime.jsx(Td, __assign({ css: { textAlign: "start" } }, { children: column.header }), "header-".concat(index))); }), jsxRuntime.jsx(Td, {})] }), jsxRuntime.jsxs("tbody", { children: [rows.map(function (row, rowIndex) { return (jsxRuntime.jsxs("tr", { children: [jsxRuntime.jsx(Td, __assign({ size: "sm" }, { children: rowIndex + 1 })), columns.map(function (column, cellIndex) {
|
|
1910
|
+
var _a;
|
|
1911
|
+
// if (column === "id") return null;
|
|
1912
|
+
var isTextField = !!column.cell;
|
|
1913
|
+
return (jsxRuntime.jsx(Td, __assign({ noPadding: true, css: {
|
|
1914
|
+
"input::-webkit-inner-spin-button": {
|
|
1915
|
+
"-webkit-appearance": "none",
|
|
1916
|
+
margin: 0,
|
|
1917
|
+
},
|
|
1918
|
+
/* Firefox */
|
|
1919
|
+
"input[type=number]": {
|
|
1920
|
+
"-moz-appearance": "textfield",
|
|
1921
|
+
},
|
|
1922
|
+
} }, { children: isTextField ? (jsxRuntime.jsx(TextField, __assign({ defaultValue: row[column.accessorKey], onChange: function (e) {
|
|
1923
|
+
return onUpdateRow(row.id, e.target.value, column.accessorKey);
|
|
1924
|
+
} }, (_a = column.cell) === null || _a === void 0 ? void 0 : _a.config))) : (row[column.accessorKey]) }), "cell ".concat(cellIndex)));
|
|
1925
|
+
}), removeButton && (jsxRuntime.jsx(Td, __assign({ size: "sm" }, { children: jsxRuntime.jsx(IconButton, __assign({ ghost: true, onClick: function () { return onRemoveRow(row.id); } }, { children: jsxRuntime.jsx(TrashIcon, {}) })) })))] }, row.id)); }), jsxRuntime.jsx(AddNewRow, { handleOnClick: function () { return onAddRow(""); } })] })] }));
|
|
1907
1926
|
};
|
|
1908
1927
|
var Table = function (_a) {
|
|
1909
1928
|
var rows = _a.rows, columns = _a.columns;
|
|
1910
|
-
return (jsxRuntime.jsxs(StyledTable, { children: [jsxRuntime.jsx("thead", { children: columns.map(function (column, index) { return (jsxRuntime.jsx(Td, { children: column }, "header-".concat(index))); }) }), jsxRuntime.jsx("tbody", { children: rows.map(function (row, rowIndex) { return (jsxRuntime.jsx("tr", { children:
|
|
1911
|
-
return (jsxRuntime.jsx(Td, { children: row.
|
|
1929
|
+
return (jsxRuntime.jsxs(StyledTable, { children: [jsxRuntime.jsx("thead", { children: columns.map(function (column, index) { return (jsxRuntime.jsx(Td, { children: column }, "header-".concat(index))); }) }), jsxRuntime.jsx("tbody", { children: rows.map(function (row, rowIndex) { return (jsxRuntime.jsx("tr", { children: columns.map(function (column, cellIndex) {
|
|
1930
|
+
return (jsxRuntime.jsx(Td, { children: row[column.accessorKey] }, "cell ".concat(cellIndex)));
|
|
1912
1931
|
}) }, "row ".concat(rowIndex))); }) })] }));
|
|
1913
1932
|
};
|
|
1914
1933
|
|