@typeolymp/ui-components 1.18.6 → 1.19.0

package/build/components/organisms/Table/index.d.ts

@@ -1,14 +1,20 @@
 import { FC, ReactNode } from "react";
+export declare type ColumnType = {
+    title?: string;
+    dataIndex: string;
+    render?(value: any, row: any): ReactNode;
+    align?: "left" | "right" | "center";
+};
+export declare type DataType = {
+    key: string;
+    [key: string]: any;
+};
 export declare type PropsType = {
-    columns: Array<{
-        title?: string;
-        dataIndex: string;
-        render?(value: any, row: any): ReactNode;
-        align?: "left" | "right" | "center";
-    }>;
-    data: Array<{
-        [key: string]: any;
-    }>;
+    columns: ColumnType[];
+    data: DataType[];
+    rowSelection?: {
+        onChange(selectedRowKeys: string[], selectedRowKey: string, selectedRows: DataType[], selectedRow: DataType): void;
+    };
     empytText?: string;
 };
 declare const Table: FC<PropsType>;

package/build/index.es.js

@@ -48230,16 +48230,36 @@ var EmptyTableCell = styled.td(templateObject_8 || (templateObject_8 = __makeTem
 var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
 
 var Table = function (_a) {
-    var columns = _a.columns, data = _a.data, empytText = _a.empytText;
-    return (jsxs(Container$1, { children: [jsx$1(TableHead, { children: jsx$1(TableRow, { children: columns.map(function (_a, index) {
-                        var title = _a.title, dataIndex = _a.dataIndex;
-                        return (jsx$1(ColumnTitle, { children: title && (jsx$1(Heading, __assign$2({ type: "h6", as: "span" }, { children: title }))) }, "".concat(dataIndex, "-").concat(index)));
-                    }) }) }), jsx$1(TableBody, { children: data.length === 0 ? (jsx$1(TableRow, { children: jsx$1(EmptyTableCell, __assign$2({ colSpan: columns.length }, { children: jsx$1(Paragraph, __assign$2({ align: "center", size: "small", weight: "regular" }, { children: empytText || "No data" })) })) })) : (data.map(function (row, index) {
-                    return (jsx$1(TableRow, { children: columns.map(function (_a, index) {
-                            var dataIndex = _a.dataIndex, render = _a.render, align = _a.align;
-                            var data = row[dataIndex];
-                            return (jsx$1(TableCell, __assign$2({ align: align }, { children: render ? render(data, row) : data }), "col-".concat(index)));
-                        }) }, "row-".concat(index)));
+    var columns = _a.columns, data = _a.data, empytText = _a.empytText, rowSelection = _a.rowSelection;
+    var _b = useState([]), selectedRowKeys = _b[0], setSelectedRowKeys = _b[1];
+    var onSelectRow = function (selectedKey) {
+        var index = selectedRowKeys.indexOf(selectedKey);
+        var newSelectedRowKeys = __spreadArray([], selectedRowKeys, true);
+        if (index === -1)
+            newSelectedRowKeys.push(selectedKey);
+        else
+            newSelectedRowKeys.splice(index, 1);
+        setSelectedRowKeys(newSelectedRowKeys);
+        var selectedRows = data.filter(function (_a) {
+            var key = _a.key;
+            return newSelectedRowKeys.includes(key);
+        });
+        var selectedRow = data.find(function (_a) {
+            var key = _a.key;
+            return key === selectedKey;
+        });
+        if (rowSelection && rowSelection.onChange)
+            rowSelection.onChange(newSelectedRowKeys, selectedKey, selectedRows, selectedRow);
+    };
+    return (jsxs(Container$1, { children: [jsx$1(TableHead, { children: jsxs(TableRow, { children: [rowSelection && jsx$1("th", { style: { width: 55 } }), columns.map(function (_a, index) {
+                            var title = _a.title, dataIndex = _a.dataIndex;
+                            return (jsx$1(ColumnTitle, { children: title && (jsx$1(Heading, __assign$2({ type: "h6", as: "span" }, { children: title }))) }, "".concat(dataIndex, "-").concat(index)));
+                        })] }) }), jsx$1(TableBody, { children: data.length === 0 ? (jsx$1(TableRow, { children: jsx$1(EmptyTableCell, __assign$2({ colSpan: columns.length }, { children: jsx$1(Paragraph, __assign$2({ align: "center", size: "small", weight: "regular" }, { children: empytText || "No data" })) })) })) : (data.map(function (row, rowIndex) {
+                    return (jsxs(TableRow, { children: [rowSelection && (jsx$1(TableCell, { children: jsx$1(Checkbox, { id: "".concat(rowIndex), name: "".concat(rowIndex), value: row.key, onChange: onSelectRow }) }, "row-select-".concat(rowIndex))), columns.map(function (_a, colIndex) {
+                                var dataIndex = _a.dataIndex, render = _a.render, align = _a.align;
+                                var data = row[dataIndex];
+                                return (jsx$1(TableCell, __assign$2({ align: align }, { children: render ? render(data, row) : data }), "col-".concat(colIndex)));
+                            })] }, "row-".concat(rowIndex)));
                 })) })] }));
 };