mig-schema-table 1.0.12 → 2.0.0

package/README.md

@@ -34,7 +34,7 @@ const userSchema ={
 ```
 ```typescript jsx
     import React from 'react';
-    import { SchemaTableComponent, IColumnConfig } from "mig-schema-table";
+    import { SchemaTable, IColumnConfig } from "mig-schema-table";
     import "mig-schema-table/dist/index.css";
 
     const config:{[keyName: string]: IColumnConfig} ={

package/dist/component/SchemaTable/Th/index.d.ts

@@ -1,5 +1,5 @@
 import { oas31 } from "openapi3-ts";
-import { CSSProperties, Dispatch, SetStateAction } from "react";
+import React, { CSSProperties, Dispatch, SetStateAction } from "react";
 import { IColumnConfig } from "../../../types/type";
 interface IThProps {
     columnFilters?: {
@@ -16,6 +16,9 @@ interface IThProps {
     setSortColumn: Dispatch<SetStateAction<string>>;
     sortAsc?: boolean;
     style: CSSProperties;
+    onSelectAllIndexesHandler?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    isAllChecked?: boolean;
+    numberOfSelectedRows?: number;
 }
-declare const _default: ({ columnFilters, config, isSortable, name, schema, setColumnFilters, setSortAsc, setSortColumn, sortAsc, style, }: IThProps) => import("react/jsx-runtime").JSX.Element;
+declare const _default: ({ columnFilters, config, isSortable, name, schema, setColumnFilters, setSortAsc, setSortColumn, sortAsc, style, onSelectAllIndexesHandler, isAllChecked, numberOfSelectedRows, }: IThProps) => import("react/jsx-runtime").JSX.Element;
 export default _default;

package/dist/component/SchemaTable/Th/index.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { uncamel } from "../../../inc/string";
-const Th = ({ columnFilters, config, isSortable, name, schema, setColumnFilters, setSortAsc, setSortColumn, sortAsc, style, }) => {
+import { SELECT_ALL_COLUMN_NAME } from "../constants";
+const Th = ({ columnFilters, config, isSortable, name, schema, setColumnFilters, setSortAsc, setSortColumn, sortAsc, style, onSelectAllIndexesHandler, isAllChecked, numberOfSelectedRows, }) => {
     const thDivProps = {
         style,
         className: `schema-table__th ${isSortable ? "schema-table__th--sortable" : "schema-table__th--unsortable"}`,
     };
-    const onFilterButtonClick = React.useCallback((e) => {
+    const onFilterButtonClick = React.useCallback(() => {
         if (!setColumnFilters) {
             return;
         }
@@ -23,6 +24,9 @@ const Th = ({ columnFilters, config, isSortable, name, schema, setColumnFilters,
         }
         setSortAsc((sortAsc) => !sortAsc);
     }, [config === null || config === void 0 ? void 0 : config.defaultSortDesc, name, setSortAsc, setSortColumn, sortAsc]);
+    if (name === SELECT_ALL_COLUMN_NAME) {
+        return (_jsx("div", Object.assign({}, thDivProps, { children: _jsx("div", Object.assign({ style: { marginTop: 12, paddingLeft: 37 }, title: `${numberOfSelectedRows || 0} selected` }, { children: _jsx("input", { type: "checkbox", checked: isAllChecked, onChange: onSelectAllIndexesHandler }) })) })));
+    }
     if (!schema) {
         return _jsx("div", Object.assign({}, thDivProps));
     }
@@ -39,6 +43,6 @@ const Th = ({ columnFilters, config, isSortable, name, schema, setColumnFilters,
                 thDivProps.className += ` text-${(config === null || config === void 0 ? void 0 : config.align) || "end"}`;
             }
     }
-    return (_jsxs("div", Object.assign({}, thDivProps, { children: [isSortable ? (_jsxs("button", Object.assign({ className: "px-0", disabled: (config === null || config === void 0 ? void 0 : config.sortable) === false, onClick: onSortButtonClick }, { children: [(config === null || config === void 0 ? void 0 : config.title) || uncamel(name), sortAsc === undefined ? null : sortAsc ? "▲" : "▼"] }))) : (_jsx("div", Object.assign({ style: { lineHeight: "44px" } }, { children: (config === null || config === void 0 ? void 0 : config.title) || uncamel(name) }))), (config === null || config === void 0 ? void 0 : config.isFilterable) ? (_jsx("button", Object.assign({ onClick: onFilterButtonClick }, { children: _jsx("svg", Object.assign({ viewBox: "0 0 36 36", xmlns: "http://www.w3.org/2000/svg", height: 16, width: 16, style: { display: "block" } }, { children: _jsx("polygon", { fill: "#231F20", points: "14,30 22,25 22,17 35.999,0 17.988,0 0,0 14,17 " }) })) }))) : null] })));
+    return (_jsxs("div", Object.assign({}, thDivProps, { children: [isSortable ? (_jsxs("button", Object.assign({ className: "px-0", disabled: (config === null || config === void 0 ? void 0 : config.sortable) === false, onClick: onSortButtonClick }, { children: [(config === null || config === void 0 ? void 0 : config.title) === undefined ? uncamel(name) : config === null || config === void 0 ? void 0 : config.title, sortAsc === undefined ? null : sortAsc ? "▲" : "▼"] }))) : (_jsx("div", Object.assign({ style: { lineHeight: "44px" } }, { children: (config === null || config === void 0 ? void 0 : config.title) === undefined ? uncamel(name) : config === null || config === void 0 ? void 0 : config.title }))), (config === null || config === void 0 ? void 0 : config.isFilterable) ? (_jsx("button", Object.assign({ onClick: onFilterButtonClick }, { children: _jsx("svg", Object.assign({ viewBox: "0 0 36 36", xmlns: "http://www.w3.org/2000/svg", height: 16, width: 16, style: { display: "block" } }, { children: _jsx("polygon", { fill: "#231F20", points: "14,30 22,25 22,17 35.999,0 17.988,0 0,0 14,17 " }) })) }))) : null] })));
 };
 export default React.memo(Th);

package/dist/component/SchemaTable/constants.d.ts

@@ -0,0 +1 @@
+export declare const SELECT_ALL_COLUMN_NAME = "SELECT_ALL_COLUMN_NAME";

package/dist/component/SchemaTable/constants.js

@@ -0,0 +1 @@
+export const SELECT_ALL_COLUMN_NAME = "SELECT_ALL_COLUMN_NAME";

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

@@ -22,5 +22,7 @@ export interface ISchemaTableComponentProps<T> {
     customElement?: React.ReactNode;
     tableTitle?: string;
     searchPlaceholder?: string;
+    onCheckedIndexesChange?: (rowIndex: number[]) => void;
+    checkedIndexes?: number[];
 }
-export default function SchemaTableComponent<T>(props: ISchemaTableComponentProps<T>): import("react/jsx-runtime").JSX.Element;
+export default function SchemaTable<T>(props: ISchemaTableComponentProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/component/SchemaTable/index.js

@@ -4,8 +4,9 @@ import { VariableSizeList, VariableSizeGrid } from "react-window";
 import { localeFormat } from "../../inc/date";
 import { uncamel } from "../../inc/string";
 import Th from "./Th";
-export default function SchemaTableComponent(props) {
-    const { config, data, defaultSortColumn, defaultSortAsc = false, Heading = VariableSizeList, isSearchable, isSortable, onRowClick, getRowClassName, getRowSelected, rowHeight = 36, schema, style, customElement, tableTitle, searchPlaceholder } = props;
+import { SELECT_ALL_COLUMN_NAME } 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);
     const [sortAsc, setSortAsc] = React.useState(defaultSortAsc);
     const [searchQuery, setSearchQuery] = React.useState("");
@@ -13,6 +14,9 @@ export default function SchemaTableComponent(props) {
     const { properties = {} } = schema;
     const columnNames = React.useMemo(() => {
         const columns = Object.keys(properties);
+        if (onCheckedIndexesChange) {
+            columns.unshift(SELECT_ALL_COLUMN_NAME);
+        }
         if (!config) {
             return columns;
         }
@@ -41,7 +45,7 @@ export default function SchemaTableComponent(props) {
             }
             return orderA - orderB;
         });
-    }, [config, properties]);
+    }, [config, onCheckedIndexesChange, properties]);
     const renderData = React.useMemo(() => data
         ? data.map((object, rowIndex) => columnNames.reduce((prev, propName) => {
             const schema = properties[propName];
@@ -50,6 +54,10 @@ export default function SchemaTableComponent(props) {
                 prev[propName] = propConfig.renderData(object, rowIndex);
                 return prev;
             }
+            if (propName === SELECT_ALL_COLUMN_NAME) {
+                prev[propName] = "asd";
+                return prev;
+            }
             if (!schema) {
                 prev[propName] = "?";
                 return prev;
@@ -81,7 +89,7 @@ export default function SchemaTableComponent(props) {
                         return prev;
                     }
                     if (schema.enum) {
-                        prev[propName] = rawValue ? uncamel(rawValue) : '';
+                        prev[propName] = rawValue ? uncamel(rawValue) : "";
                         return prev;
                     }
                 // fallthrough
@@ -113,18 +121,6 @@ export default function SchemaTableComponent(props) {
         return { columnWidths, dynamicWidthColumnCount, fixedWidthColumnsWidth };
     }, [columnNames, config, gridWidth]);
     const getColumnWidth = React.useCallback((columnIndex) => columnWidths[columnIndex], [columnWidths]);
-    const SchemaTableTh = React.useCallback(({ style, index }) => {
-        const propName = columnNames[index];
-        return (_jsx(Th, { columnFilters: columnFilters, config: config ? config[propName] : undefined, isSortable: !!isSortable, name: propName, schema: properties[propName], setColumnFilters: setColumnFilters, setSortColumn: setSortColumn, setSortAsc: setSortAsc, sortAsc: sortColumn === propName ? sortAsc : undefined, style: style }));
-    }, [
-        columnFilters,
-        columnNames,
-        config,
-        isSortable,
-        properties,
-        sortAsc,
-        sortColumn,
-    ]);
     const filteredRenderData = React.useMemo(() => {
         let result = renderData;
         if (!result) {
@@ -188,6 +184,30 @@ export default function SchemaTableComponent(props) {
             return (x < y ? 1 : -1) * (sortAsc ? -1 : 1);
         });
     }, [config, data, filteredRenderData, properties, sortAsc, sortColumn]);
+    const onSelectAllIndexesHandler = React.useCallback(() => {
+        if (!onCheckedIndexesChange || !filteredRenderData) {
+            return;
+        }
+        onCheckedIndexesChange(filteredRenderData.map((el) => el._index));
+    }, [onCheckedIndexesChange, filteredRenderData]);
+    const isAllRowsChecked = React.useMemo(() => {
+        return (checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length) === (filteredRenderData === null || filteredRenderData === void 0 ? void 0 : filteredRenderData.length);
+    }, [checkedIndexes, filteredRenderData]);
+    const SchemaTableTh = React.useCallback(({ style, index }) => {
+        const propName = columnNames[index];
+        return (_jsx(Th, { columnFilters: columnFilters, config: config ? config[propName] : undefined, isSortable: !!isSortable, name: propName, schema: properties[propName], setColumnFilters: setColumnFilters, setSortColumn: setSortColumn, setSortAsc: setSortAsc, sortAsc: sortColumn === propName ? sortAsc : undefined, style: style, onSelectAllIndexesHandler: onSelectAllIndexesHandler, isAllChecked: isAllRowsChecked, numberOfSelectedRows: checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length }));
+    }, [
+        columnNames,
+        columnFilters,
+        config,
+        isSortable,
+        properties,
+        sortColumn,
+        sortAsc,
+        onSelectAllIndexesHandler,
+        isAllRowsChecked,
+        checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length,
+    ]);
     const onTdClick = React.useCallback((e) => {
         if (!sortedRenderData || !onRowClick) {
             return;
@@ -222,6 +242,15 @@ export default function SchemaTableComponent(props) {
         if (propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderCell) {
             return (_jsx("div", Object.assign({}, tdDivProps, { children: propConfig.renderCell(data[row._index], rowIndex) })));
         }
+        if (propName === SELECT_ALL_COLUMN_NAME) {
+            const onChecked = () => {
+                if (!onCheckedIndexesChange) {
+                    return;
+                }
+                onCheckedIndexesChange([rowIndex]);
+            };
+            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(rowIndex) }) })) })));
+        }
         if (!schema) {
             return null;
         }
@@ -251,6 +280,8 @@ export default function SchemaTableComponent(props) {
         getRowSelected,
         data,
         getRowClassName,
+        checkedIndexes,
+        onCheckedIndexesChange,
     ]);
     const onSearchChange = React.useCallback((e) => {
         setSearchQuery(e.currentTarget.value);
@@ -260,5 +291,5 @@ export default function SchemaTableComponent(props) {
     const totalWidth = React.useMemo(() => columnWidths.reduce((a, b) => {
         return a + b;
     }, 0), [columnWidths]);
-    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: "form-action-container" }, { children: [_jsx("div", Object.assign({ className: "flex-1" }, { children: isSearchable ? (_jsx("input", { id: "input-filter", type: "text", placeholder: searchPlaceholder, 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: props.height - (isSearchable ? 50 : 0), 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: props.height - (isSearchable ? 50 : 0), width: totalWidth, columnWidth: getColumnWidth, rowHeight: getRowHeight, columnCount: columnCount, rowCount: sortedRenderData ? sortedRenderData.length : 0 }, { children: Td }), `tbody_${width}_${sortColumn}_${sortAsc}_${searchQuery}_${columnCount}`)] })));
 }

package/dist/index.css

@@ -54,3 +54,16 @@
 .schema-table button {
   border: 1px solid transparent;
 }
+.schema-table .action-container {
+  display: flex;
+  flex-direction: row;
+}
+.schema-table .action-container #input-filter {
+  width: 30%;
+  border-radius: 8px;
+  padding: 4px 10px;
+}
+.schema-table .action-container img {
+  margin-right: 1.5rem;
+  margin-top: 5px;
+}

package/dist/index.d.ts

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

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mig-schema-table",
-  "version": "1.0.12",
+  "version": "2.0.0",
   "main": "dist/index.js",
   "files": [
     "dist/"
@@ -20,6 +20,7 @@
     "lodash": "^4.17.21",
     "openapi-typescript": "^6.2.4",
     "openapi3-ts": "^4.1.2",
+    "prettier": "^2.8.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",