@neasg/design-system 0.4.3 → 0.4.5
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/editable-table.d.ts +3 -1
- package/dist/editable-table.js +18 -2
- package/package.json +1 -1
package/dist/editable-table.d.ts
CHANGED
|
@@ -22,9 +22,11 @@ export interface EditableTableProps {
|
|
|
22
22
|
isEditing?: boolean;
|
|
23
23
|
className?: string;
|
|
24
24
|
emptyPlaceholder?: string;
|
|
25
|
+
checkable?: boolean;
|
|
26
|
+
activeField?: string;
|
|
25
27
|
renderRowActions?: (context: EditableTableRowActionContext) => React.ReactNode;
|
|
26
28
|
}
|
|
27
|
-
declare function EditableTable({ value, onChange, columns, isEditing, className, emptyPlaceholder, renderRowActions, }: EditableTableProps): import("react/jsx-runtime").JSX.Element;
|
|
29
|
+
declare function EditableTable({ value, onChange, columns, isEditing, className, emptyPlaceholder, checkable, activeField, renderRowActions, }: EditableTableProps): import("react/jsx-runtime").JSX.Element;
|
|
28
30
|
declare namespace EditableTable {
|
|
29
31
|
var displayName: string;
|
|
30
32
|
}
|
package/dist/editable-table.js
CHANGED
|
@@ -3,6 +3,7 @@ import * as React from "react";
|
|
|
3
3
|
import { Button } from "./button";
|
|
4
4
|
import { PlusIcon } from "./animated-icons/plus";
|
|
5
5
|
import { TrashIcon } from "./animated-icons/trash";
|
|
6
|
+
import { Checkbox } from "./checkbox";
|
|
6
7
|
import { InputControl } from "./input-control";
|
|
7
8
|
import { TableRoot as Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "./table";
|
|
8
9
|
import { cn } from "./lib/utils";
|
|
@@ -31,7 +32,7 @@ function setNestedValue(obj, path, value) {
|
|
|
31
32
|
current[parts[parts.length - 1]] = value;
|
|
32
33
|
return result;
|
|
33
34
|
}
|
|
34
|
-
function EditableTable({ value, onChange, columns, isEditing = false, className, emptyPlaceholder = "-", renderRowActions, }) {
|
|
35
|
+
function EditableTable({ value, onChange, columns, isEditing = false, className, emptyPlaceholder = "-", checkable = false, activeField = "active", renderRowActions, }) {
|
|
35
36
|
const [editingCell, setEditingCell] = React.useState(null);
|
|
36
37
|
const [editValue, setEditValue] = React.useState("");
|
|
37
38
|
const inputRef = React.useRef(null);
|
|
@@ -82,6 +83,9 @@ function EditableTable({ value, onChange, columns, isEditing = false, className,
|
|
|
82
83
|
};
|
|
83
84
|
const handleAddRow = () => {
|
|
84
85
|
let nextRow = {};
|
|
86
|
+
if (checkable) {
|
|
87
|
+
nextRow[activeField] = true;
|
|
88
|
+
}
|
|
85
89
|
columns.forEach((column) => {
|
|
86
90
|
nextRow = setNestedValue(nextRow, column.path, "");
|
|
87
91
|
});
|
|
@@ -90,6 +94,14 @@ function EditableTable({ value, onChange, columns, isEditing = false, className,
|
|
|
90
94
|
const handleDeleteRow = React.useCallback((rowIndex) => {
|
|
91
95
|
onChange(value.filter((_, index) => index !== rowIndex));
|
|
92
96
|
}, [onChange, value]);
|
|
97
|
+
const handleToggleRow = React.useCallback((rowIndex, checked) => {
|
|
98
|
+
const nextRows = [...value];
|
|
99
|
+
nextRows[rowIndex] = {
|
|
100
|
+
...nextRows[rowIndex],
|
|
101
|
+
[activeField]: checked,
|
|
102
|
+
};
|
|
103
|
+
onChange(nextRows);
|
|
104
|
+
}, [activeField, onChange, value]);
|
|
93
105
|
const formatCellValue = (cellValue) => {
|
|
94
106
|
if (cellValue === null || cellValue === undefined || cellValue === "") {
|
|
95
107
|
return emptyPlaceholder;
|
|
@@ -97,7 +109,11 @@ function EditableTable({ value, onChange, columns, isEditing = false, className,
|
|
|
97
109
|
return String(cellValue);
|
|
98
110
|
};
|
|
99
111
|
const hasActionsColumn = isEditing || Boolean(renderRowActions);
|
|
100
|
-
return (_jsxs("div", { className: cn("space-y-2", className), children: [_jsx("div", { className: "rounded-md border", children: _jsxs(Table, {
|
|
112
|
+
return (_jsxs("div", { className: cn("space-y-2", className), children: [_jsx("div", { className: "rounded-md border overflow-x-auto", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [checkable ? _jsx(TableHead, { width: "48px", minWidth: "48px" }) : null, columns.map((column, index) => (_jsx(TableHead, { width: column.width, minWidth: getColumnMinWidth(column), children: _jsx("div", { className: "whitespace-nowrap", children: column.header }) }, `header-${index}`))), hasActionsColumn ? (_jsx(TableHead, { width: renderRowActions ? undefined : "72px", minWidth: renderRowActions ? "120px" : "72px" })) : null] }) }), _jsx(TableBody, { children: value.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length +
|
|
113
|
+
(checkable ? 1 : 0) +
|
|
114
|
+
(hasActionsColumn ? 1 : 0), className: "py-8 text-center text-muted-foreground", children: "No data available" }) })) : (value.map((row, rowIndex) => (_jsxs(TableRow, { className: rowIndex % 2 === 0 ? "bg-muted/30" : undefined, children: [checkable ? (_jsx(TableCell, { width: "48px", minWidth: "48px", children: _jsx("div", { onClick: (event) => event.stopPropagation(), children: _jsx(Checkbox, { checked: Boolean(row[activeField]), disabled: !isEditing, onChange: isEditing
|
|
115
|
+
? (event) => handleToggleRow(rowIndex, event.currentTarget.checked)
|
|
116
|
+
: undefined }) }) })) : null, columns.map((column, columnIndex) => {
|
|
101
117
|
const cellValue = getNestedValue(row, column.path);
|
|
102
118
|
const isEditingCell = (editingCell === null || editingCell === void 0 ? void 0 : editingCell.rowIndex) === rowIndex &&
|
|
103
119
|
(editingCell === null || editingCell === void 0 ? void 0 : editingCell.colPath) === column.path;
|