@neasg/design-system 0.4.3 → 0.4.6
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 +20 -4
- 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,16 +109,20 @@ 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;
|
|
104
|
-
return (_jsx(TableCell, { className: cn("whitespace-normal", isEditing && "cursor-pointer hover:bg-muted/50"), minWidth: getColumnMinWidth(column), onClick: () => handleCellClick(rowIndex, column.path), children: isEditingCell ? (_jsx(InputControl, { ref: inputRef, value: editValue, onChange: (event) => setEditValue(event.target.value), onBlur: commitEdit, onKeyDown: handleKeyDown, className: "h-control w-full text-sm" })) : (_jsx("span", { className: cn("block whitespace-normal break-words", cellValue === null ||
|
|
120
|
+
return (_jsx(TableCell, { className: cn("whitespace-normal", isEditing && "cursor-pointer hover:bg-muted/50"), width: column.width, minWidth: getColumnMinWidth(column), maxWidth: getColumnMaxWidth(column), onClick: () => handleCellClick(rowIndex, column.path), children: isEditingCell ? (_jsx(InputControl, { ref: inputRef, value: editValue, onChange: (event) => setEditValue(event.target.value), onBlur: commitEdit, onKeyDown: handleKeyDown, className: "h-control w-full text-sm" })) : (_jsx("span", { className: cn("block whitespace-normal break-words", cellValue === null ||
|
|
105
121
|
cellValue === undefined ||
|
|
106
122
|
cellValue === ""
|
|
107
123
|
? "text-muted-foreground"
|
|
108
124
|
: undefined), style: { maxWidth: getColumnMaxWidth(column) }, children: formatCellValue(cellValue) })) }, `cell-${rowIndex}-${columnIndex}`));
|
|
109
|
-
}), hasActionsColumn ? (_jsx(TableCell, { children: _jsxs("div", { className: "flex items-center justify-end gap-1", children: [renderRowActions
|
|
125
|
+
}), hasActionsColumn ? (_jsx(TableCell, { width: renderRowActions ? undefined : "72px", minWidth: renderRowActions ? "120px" : "72px", children: _jsxs("div", { className: "flex items-center justify-end gap-1", children: [renderRowActions
|
|
110
126
|
? renderRowActions({
|
|
111
127
|
row,
|
|
112
128
|
rowIndex,
|