mig-schema-table 3.0.6 → 3.0.8

package/dist/SchemaTable/Td/index.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import { oas31 } from "openapi3-ts";
+import { IColumnConfig, IRenderData } from "../../types";
+interface ITdProps<T> {
+    checkedIndexes?: number[];
+    columnIndex: number;
+    data: T[];
+    getRowClassName?: (rowData: T, dataIndex: number) => string;
+    getRowSelected?: (rowData: T) => boolean;
+    rowHeight: number;
+    rowIndex: number;
+    onCheckedIndexesChange?: (dataIndex: number[]) => void;
+    onRowClick?: (rowData: T, dataIndex: number, event: React.MouseEvent) => void;
+    propConfig?: IColumnConfig<any>;
+    propName: string;
+    propSchema: oas31.SchemaObject;
+    sortedRenderData?: IRenderData[];
+    style: React.CSSProperties;
+}
+declare function Td<T>({ checkedIndexes, columnIndex, data, getRowClassName, getRowSelected, onCheckedIndexesChange, onRowClick, propConfig, propName, propSchema, rowHeight, rowIndex, sortedRenderData, style, }: ITdProps<T>): import("react/jsx-runtime").JSX.Element | null;
+declare const _default: typeof Td;
+export default _default;

package/dist/SchemaTable/Td/index.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { SELECT_ALL_COLUMN_NAME } from "../constants";
+function Td({ checkedIndexes, columnIndex, data, getRowClassName, getRowSelected, onCheckedIndexesChange, onRowClick, propConfig, propName, propSchema, rowHeight, rowIndex, sortedRenderData, style, }) {
+    const onTdClick = React.useCallback((e) => {
+        if (!sortedRenderData || !onRowClick) {
+            return;
+        }
+        const { rowIndex } = e.currentTarget.dataset;
+        if (!rowIndex) {
+            return;
+        }
+        const row = sortedRenderData[parseInt(rowIndex, 10)];
+        onRowClick(data[row._index], row._index, e);
+    }, [data, onRowClick, sortedRenderData]);
+    if (!sortedRenderData) {
+        return null;
+    }
+    const row = sortedRenderData[rowIndex];
+    const tdDivProps = {
+        "data-row-index": rowIndex,
+        "data-column-index": columnIndex,
+        key: propName,
+        style: Object.assign(Object.assign({}, style), { lineHeight: `${rowHeight}px` }),
+        onClick: !(propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderCell) ? onTdClick : undefined,
+        className: `schema-table__td schema-table__td--${rowIndex % 2 ? "odd" : "even"}${row && getRowSelected && getRowSelected(data[row._index])
+            ? " schema-table__td--selected"
+            : ""} ${row && getRowClassName
+            ? getRowClassName(data[row._index], row._index)
+            : ""}`,
+    };
+    if (propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderCell) {
+        return (_jsx("div", Object.assign({}, tdDivProps, { children: propConfig.renderCell(data[row._index], row._index, rowIndex) })));
+    }
+    if (propName === SELECT_ALL_COLUMN_NAME) {
+        const onChecked = () => {
+            if (!onCheckedIndexesChange) {
+                return;
+            }
+            onCheckedIndexesChange([row._index]);
+        };
+        return (_jsx("div", Object.assign({}, tdDivProps, { children: _jsx("div", Object.assign({ style: { textAlign: "center" } }, { children: _jsx("input", { type: "checkbox", onChange: onChecked, checked: checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.includes(row._index) }) })) })));
+    }
+    if (!propSchema) {
+        return null;
+    }
+    switch (propSchema.type) {
+        case "boolean":
+            tdDivProps.className += ` text-${(propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) || "center"}`;
+            break;
+        case "number":
+        case "integer":
+            tdDivProps.className += ` text-${(propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) || "end"}`;
+            break;
+        case "string":
+            // @ts-ignore
+            tdDivProps.title = row[propName];
+            if (propSchema.format === "date" || propSchema.format === "date-time") {
+                tdDivProps.className += ` text-${(propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) || "end"}`;
+            }
+    }
+    return _jsx("div", Object.assign({}, tdDivProps, { children: row[propName] }));
+}
+export default React.memo(Td);

package/dist/SchemaTable/index.js

@@ -5,6 +5,7 @@ import { localeFormat } from "../inc/date";
 import { uncamel } from "../inc/string";
 import Th from "./Th";
 import { SELECT_ALL_COLUMN_NAME, SELECT_ALL_COLUMN_WIDTH } from "./constants";
+import Td from "./Td";
 export default function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, customElement, data, defaultSortAsc = false, defaultSortColumn, getRowClassName, getRowSelected, maxHeight, isSearchable, isSortable, onCheckedIndexesChange, onRowClick, rowHeight = 36, schema, searchPlaceholder, style, width, }) {
     const [sortColumn, setSortColumn] = React.useState(defaultSortColumn);
     const [sortAsc, setSortAsc] = React.useState(defaultSortAsc);
@@ -226,80 +227,20 @@ export default function SchemaTable({ Heading = VariableSizeList, checkedIndexes
         isAllRowsChecked,
         checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length,
     ]);
-    const onTdClick = React.useCallback((e) => {
-        if (!sortedRenderData || !onRowClick) {
-            return;
-        }
-        const { rowIndex } = e.currentTarget.dataset;
-        if (!rowIndex) {
-            return;
-        }
-        const row = sortedRenderData[parseInt(rowIndex, 10)];
-        onRowClick(data[row._index], row._index, e);
-    }, [data, onRowClick, sortedRenderData]);
-    const Td = React.useCallback(({ columnIndex, rowIndex, style }) => {
-        if (!sortedRenderData) {
-            return null;
-        }
+    const SchemaTableTd = React.useCallback(({ columnIndex, rowIndex, style }) => {
         const propName = columnNames[columnIndex];
-        const propConfig = config ? config[propName] : undefined;
-        const row = sortedRenderData[rowIndex];
-        const schema = properties[propName];
-        const tdDivProps = {
-            "data-row-index": rowIndex,
-            "data-column-index": columnIndex,
-            key: propName,
-            style,
-            onClick: !(propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderCell) ? onTdClick : undefined,
-            className: `schema-table__td schema-table__td--${rowIndex % 2 ? "odd" : "even"}${row && getRowSelected && getRowSelected(data[row._index])
-                ? " schema-table__td--selected"
-                : ""} ${row && getRowClassName
-                ? getRowClassName(data[row._index], row._index)
-                : ""}`,
-        };
-        if (propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderCell) {
-            return (_jsx("div", Object.assign({}, tdDivProps, { children: propConfig.renderCell(data[row._index], row._index, rowIndex) })));
-        }
-        if (propName === SELECT_ALL_COLUMN_NAME) {
-            const onChecked = () => {
-                if (!onCheckedIndexesChange) {
-                    return;
-                }
-                onCheckedIndexesChange([row._index]);
-            };
-            return (_jsx("div", Object.assign({}, tdDivProps, { children: _jsx("div", Object.assign({ style: { textAlign: "center" } }, { children: _jsx("input", { type: "checkbox", onChange: onChecked, checked: checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.includes(row._index) }) })) })));
-        }
-        if (!schema) {
-            return null;
-        }
-        // @ts-ignore
-        switch (schema.type) {
-            case "boolean":
-                tdDivProps.className += ` text-${(propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) || "center"}`;
-                break;
-            case "number":
-            case "integer":
-                tdDivProps.className += ` text-${(propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) || "end"}`;
-                break;
-            case "string":
-                // @ts-ignore
-                tdDivProps.title = row[propName];
-                if (schema.format === "date" || schema.format === "date-time") {
-                    tdDivProps.className += ` text-${(propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) || "end"}`;
-                }
-        }
-        return _jsx("div", Object.assign({}, tdDivProps, { children: row[propName] }));
+        return (_jsx(Td, { checkedIndexes: checkedIndexes, columnIndex: columnIndex, data: data, getRowClassName: getRowClassName, getRowSelected: getRowSelected, onCheckedIndexesChange: onCheckedIndexesChange, propConfig: config ? config[propName] : undefined, propName: propName, propSchema: properties[propName], rowHeight: rowHeight, rowIndex: rowIndex, sortedRenderData: sortedRenderData, style: style }));
     }, [
-        sortedRenderData,
+        checkedIndexes,
         columnNames,
         config,
-        properties,
-        onTdClick,
-        getRowSelected,
         data,
         getRowClassName,
-        checkedIndexes,
+        getRowSelected,
         onCheckedIndexesChange,
+        properties,
+        rowHeight,
+        sortedRenderData,
     ]);
     const onSearchChange = React.useCallback((e) => {
         setSearchQuery(e.currentTarget.value);
@@ -314,5 +255,5 @@ export default function SchemaTable({ Heading = VariableSizeList, checkedIndexes
             ? rowsMaxHeight
             : rowsHeight;
     }, [maxHeight, isSearchable, rowCount, rowHeight]);
-    return (_jsxs("div", Object.assign({ className: `schema-table${onRowClick ? " schema-table--clickable-rows" : ""}`, style: Object.assign(Object.assign({}, style), { width: rowWidth }) }, { children: [_jsxs("div", Object.assign({ className: "action-container" }, { children: [_jsx("div", Object.assign({ style: { flex: 1 } }, { children: isSearchable ? (_jsx("input", { id: "input-filter", type: "text", placeholder: searchPlaceholder || "Search...", value: searchQuery, onChange: onSearchChange, autoFocus: true })) : null })), customElement] })), _jsx(Heading, Object.assign({ height: 50, itemCount: columnCount, itemSize: getColumnWidth, layout: "horizontal", width: rowWidth, sortAsc: sortAsc, setSortAsc: setSortAsc, setSortColumn: setSortColumn, sortColumn: sortColumn, sortedRenderData: sortedRenderData, className: "schema-table__th-row" }, { children: SchemaTableTh }), `thead_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}`), _jsx(VariableSizeGrid, Object.assign({ className: "schema-table__tbody", height: tableBodyHeight, width: rowWidth, columnWidth: getColumnWidth, rowHeight: getRowHeight, columnCount: columnCount, rowCount: rowCount }, { children: Td }), `tbody_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}_${columnCount}`)] })));
+    return (_jsxs("div", Object.assign({ className: `schema-table${onRowClick ? " schema-table--clickable-rows" : ""}`, style: Object.assign(Object.assign({}, style), { width: rowWidth }) }, { children: [_jsxs("div", Object.assign({ className: "schema-table__action-container" }, { children: [_jsx("div", Object.assign({ style: { flex: 1 } }, { children: isSearchable ? (_jsx("input", { type: "text", placeholder: searchPlaceholder || "Search...", value: searchQuery, onChange: onSearchChange, autoFocus: true })) : null })), customElement] })), _jsx(Heading, Object.assign({ height: 50, itemCount: columnCount, itemSize: getColumnWidth, layout: "horizontal", width: rowWidth, sortAsc: sortAsc, setSortAsc: setSortAsc, setSortColumn: setSortColumn, sortColumn: sortColumn, sortedRenderData: sortedRenderData, className: "schema-table__th-row" }, { children: SchemaTableTh }), `thead_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}`), _jsx(VariableSizeGrid, Object.assign({ className: "schema-table__tbody", height: tableBodyHeight, width: rowWidth, columnWidth: getColumnWidth, rowHeight: getRowHeight, columnCount: columnCount, rowCount: rowCount }, { children: SchemaTableTd }), `tbody_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}_${columnCount}`)] })));
 }

package/dist/index.css

@@ -10,11 +10,14 @@
   overflow: hidden !important;
 }
 .schema-table__th {
-  overflow: hidden;
   background-color: #eee;
-  padding-left: 8px;
   align-items: center;
 }
+.schema-table__th div {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 .schema-table__th,
 .schema-table__th button {
   font-weight: bold;
@@ -29,7 +32,6 @@
   text-overflow: ellipsis;
   padding-left: 8px;
   align-items: center;
-  line-height: 40px;
 }
 .schema-table__td--odd {
   background-color: #ddd;
@@ -46,7 +48,6 @@
 }
 .schema-table__search input {
   width: 100%;
-  line-height: 20px;
 }
 .schema-table--clickable-rows .schema-table__td {
   cursor: pointer;
@@ -54,16 +55,13 @@
 .schema-table button {
   border: 1px solid transparent;
 }
-.schema-table .action-container {
+.schema-table__action-container {
   display: flex;
   flex-direction: row;
+  padding-bottom: 1rem;
 }
-.schema-table .action-container #input-filter {
+.schema-table__action-container input {
   width: 30%;
   border-radius: 8px;
   padding: 4px 10px;
 }
-.schema-table .action-container img {
-  margin-right: 1.5rem;
-  margin-top: 5px;
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mig-schema-table",
-  "version": "3.0.6",
+  "version": "3.0.8",
   "main": "dist/index.js",
   "files": [
     "dist/"