mig-schema-table 2.0.2 → 2.0.3

package/dist/{component/SchemaTable → SchemaTable}/Th/index.d.ts

@@ -1,6 +1,6 @@
 import { oas31 } from "openapi3-ts";
 import React, { CSSProperties, Dispatch, SetStateAction } from "react";
-import { IColumnConfig } from "../../../types/type";
+import { IColumnConfig } from "../../types";
 interface IThProps {
     columnFilters?: {
         [prop: string]: any;

package/dist/{component/SchemaTable → SchemaTable}/Th/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { uncamel } from "../../../inc/string";
+import { uncamel } from "../../inc/string";
 import { SELECT_ALL_COLUMN_NAME } from "../constants";
 const Th = ({ columnFilters, config, isSortable, name, schema, setColumnFilters, setSortAsc, setSortColumn, sortAsc, style, onSelectAllIndexesHandler, isAllChecked, numberOfSelectedRows, }) => {
     const thDivProps = {

package/dist/{component/SchemaTable → SchemaTable}/constants.d.ts

@@ -1 +1,2 @@
 export declare const SELECT_ALL_COLUMN_NAME = "SELECT_ALL_COLUMN_NAME";
+export declare const SELECT_ALL_COLUMN_WIDTH = 40;

package/dist/{component/SchemaTable → SchemaTable}/constants.js

@@ -1 +1,2 @@
 export const SELECT_ALL_COLUMN_NAME = "SELECT_ALL_COLUMN_NAME";
+export const SELECT_ALL_COLUMN_WIDTH = 40;

package/dist/{component/SchemaTable → SchemaTable}/index.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { oas31 } from "openapi3-ts";
-import { IColumnConfig, IRenderData } from "../../types/type";
+import { IColumnConfig, IRenderData } from "../types";
 export interface ISchemaTableComponentProps<T> {
     config?: {
         [propName: string]: IColumnConfig<T>;

package/dist/{component/SchemaTable → SchemaTable}/index.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { VariableSizeList, VariableSizeGrid } from "react-window";
-import { localeFormat } from "../../inc/date";
-import { uncamel } from "../../inc/string";
+import { localeFormat } from "../inc/date";
+import { uncamel } from "../inc/string";
 import Th from "./Th";
-import { SELECT_ALL_COLUMN_NAME } from "./constants";
+import { SELECT_ALL_COLUMN_NAME, SELECT_ALL_COLUMN_WIDTH } from "./constants";
 export default function SchemaTable(props) {
     const { config, data, defaultSortColumn, defaultSortAsc = false, Heading = VariableSizeList, isSearchable, isSortable, onRowClick, getRowClassName, getRowSelected, rowHeight = 36, schema, style, customElement, tableTitle, searchPlaceholder, onCheckedIndexesChange, checkedIndexes, } = props;
     const [sortColumn, setSortColumn] = React.useState(defaultSortColumn);
@@ -105,29 +105,40 @@ export default function SchemaTable(props) {
         : undefined, [columnNames, config, data, properties]);
     const gridWidth = props.width;
     const columnCount = columnNames.length;
-    const { columnWidths, dynamicWidthColumnCount, fixedWidthColumnsWidth } = React.useMemo(() => {
+    const { dynamicWidthColumnCount, fixedWidthColumnsWidth } = React.useMemo(() => {
         let fixedWidthColumnsWidth = 0;
         let dynamicWidthColumnCount = 0;
         columnNames.forEach((propName) => {
+            if (propName === SELECT_ALL_COLUMN_NAME) {
+                return SELECT_ALL_COLUMN_WIDTH;
+            }
             const propConfig = config ? config[propName] : undefined;
             if (propConfig === null || propConfig === void 0 ? void 0 : propConfig.width) {
-                fixedWidthColumnsWidth += propConfig.width;
+                fixedWidthColumnsWidth += propConfig.width + 8;
             }
             else {
                 dynamicWidthColumnCount += 1;
             }
         }, 0);
-        const dynamicColumnWidth = Math.floor((gridWidth - 16 - fixedWidthColumnsWidth) / dynamicWidthColumnCount);
-        const columnWidths = columnNames.map((propName) => {
-            const propConfig = config ? config[propName] : undefined;
+        return { dynamicWidthColumnCount, fixedWidthColumnsWidth };
+    }, [columnNames, config]);
+    const columnWidths = React.useMemo(() => {
+        const dynamicColumnWidth = Math.floor((gridWidth - fixedWidthColumnsWidth) / dynamicWidthColumnCount);
+        return columnNames.map((propName) => {
             if (propName === SELECT_ALL_COLUMN_NAME) {
-                return 50;
+                return SELECT_ALL_COLUMN_WIDTH;
             }
+            const propConfig = config ? config[propName] : undefined;
             return (propConfig === null || propConfig === void 0 ? void 0 : propConfig.width) || dynamicColumnWidth;
         });
-        return { columnWidths, dynamicWidthColumnCount, fixedWidthColumnsWidth };
-    }, [columnNames, config, gridWidth]);
-    const getColumnWidth = React.useCallback((columnIndex) => columnWidths[columnIndex], [columnWidths]);
+    }, [
+        columnNames,
+        config,
+        dynamicWidthColumnCount,
+        fixedWidthColumnsWidth,
+        gridWidth,
+    ]);
+    const getColumnWidth = React.useCallback((columnIndex) => (columnWidths ? columnWidths[columnIndex] : 1), [columnWidths]);
     const filteredRenderData = React.useMemo(() => {
         let result = renderData;
         if (!result) {
@@ -295,9 +306,6 @@ export default function SchemaTable(props) {
     }, []);
     const getRowHeight = React.useCallback(() => rowHeight, [rowHeight]);
     const width = dynamicWidthColumnCount ? gridWidth : fixedWidthColumnsWidth;
-    const totalWidth = React.useMemo(() => columnWidths.reduce((a, b) => {
-        return a + b;
-    }, 0), [columnWidths]);
     const tableBodyHeight = React.useMemo(() => {
         const defaultHeight = props.height - (isSearchable ? 50 : 0);
         if (!sortedRenderData) {
@@ -306,5 +314,5 @@ export default function SchemaTable(props) {
         const dynamicHeight = sortedRenderData.length * rowHeight;
         return dynamicHeight < defaultHeight ? dynamicHeight : defaultHeight;
     }, [isSearchable, props.height, rowHeight, sortedRenderData]);
-    return (_jsxs("div", Object.assign({ className: `schema-table${onRowClick ? " schema-table--clickable-rows" : ""}`, style: Object.assign(Object.assign({}, style), { width: dynamicWidthColumnCount ? gridWidth : fixedWidthColumnsWidth }) }, { children: [_jsx("div", Object.assign({ className: "tableTitle" }, { children: tableTitle })), _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: width, sortAsc: sortAsc, setSortAsc: setSortAsc, setSortColumn: setSortColumn, sortColumn: sortColumn, sortedRenderData: sortedRenderData, className: "schema-table__th-row" }, { children: SchemaTableTh }), `thead_${width}_${sortColumn}_${sortAsc}_${searchQuery}`), _jsx(VariableSizeGrid, Object.assign({ className: "schema-table__tbody", height: tableBodyHeight, width: totalWidth, columnWidth: getColumnWidth, rowHeight: getRowHeight, columnCount: columnCount, rowCount: sortedRenderData ? sortedRenderData.length : 0 }, { children: Td }), `tbody_${width}_${sortColumn}_${sortAsc}_${searchQuery}_${columnCount}`)] })));
+    return (_jsxs("div", Object.assign({ className: `schema-table${onRowClick ? " schema-table--clickable-rows" : ""}`, style: Object.assign(Object.assign({}, style), { width: dynamicWidthColumnCount ? gridWidth : fixedWidthColumnsWidth }) }, { children: [_jsx("div", Object.assign({ className: "tableTitle" }, { children: tableTitle })), _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: width, sortAsc: sortAsc, setSortAsc: setSortAsc, setSortColumn: setSortColumn, sortColumn: sortColumn, sortedRenderData: sortedRenderData, className: "schema-table__th-row" }, { children: SchemaTableTh }), `thead_${width}_${sortColumn}_${sortAsc}_${searchQuery}`), _jsx(VariableSizeGrid, Object.assign({ className: "schema-table__tbody", height: tableBodyHeight, width: dynamicWidthColumnCount ? gridWidth : fixedWidthColumnsWidth, columnWidth: getColumnWidth, rowHeight: getRowHeight, columnCount: columnCount, rowCount: sortedRenderData ? sortedRenderData.length : 0 }, { children: Td }), `tbody_${width}_${sortColumn}_${sortAsc}_${searchQuery}_${columnCount}`)] })));
 }

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import SchemaTable from "./component/SchemaTable";
-import { IColumnConfig, IRenderData } from "./types/type";
+import SchemaTable from "./SchemaTable";
+import { IColumnConfig, IRenderData } from "./types.js";
 export type { IColumnConfig, IRenderData };
 export { SchemaTable };

package/dist/index.js

@@ -1,2 +1,2 @@
-import SchemaTable from "./component/SchemaTable";
+import SchemaTable from "./SchemaTable";
 export { SchemaTable };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mig-schema-table",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "main": "dist/index.js",
   "files": [
     "dist/"
@@ -30,7 +30,7 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "tsc -p tsconfig.json; sass --no-source-map src/index.scss dist/index.css"
+    "build": "tsc -p tsconfig.json; sass --no-source-map src/component/SchemaTable/index.scss dist/index.css"
   },
   "eslintConfig": {
     "extends": [

package/dist/reportWebVitals.d.ts

@@ -1,3 +0,0 @@
-import { ReportHandler } from 'web-vitals';
-declare const reportWebVitals: (onPerfEntry?: ReportHandler) => void;
-export default reportWebVitals;

package/dist/reportWebVitals.js

@@ -1,12 +0,0 @@
-const reportWebVitals = (onPerfEntry) => {
-    if (onPerfEntry && onPerfEntry instanceof Function) {
-        import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-            getCLS(onPerfEntry);
-            getFID(onPerfEntry);
-            getFCP(onPerfEntry);
-            getLCP(onPerfEntry);
-            getTTFB(onPerfEntry);
-        });
-    }
-};
-export default reportWebVitals;

package/dist/setupTests.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/setupTests.js

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';

package/dist/types/type.d.ts

@@ -1,20 +0,0 @@
-import React from "react";
-export interface IColumnConfig<T> {
-    align?: "start" | "center" | "end";
-    defaultSortDesc?: boolean;
-    hidden?: boolean;
-    hoverTitle?: string;
-    isFilterable?: boolean;
-    renderCell?: (rowData: T, index: number) => React.ReactElement | null;
-    renderData?: (rowData: T, index: number) => string;
-    sort?: (a: T, b: T, sortAsc: boolean) => number;
-    sortByValue?: boolean;
-    sortable?: boolean;
-    title?: string | React.ReactElement;
-    width?: number;
-    order?: number;
-}
-export interface IRenderData {
-    _index: number;
-    [key: string]: any;
-}

package/dist/types/type.js

@@ -1 +0,0 @@
-export {};