morse-react-tables - npm Package Compare versions

Comparing version 0.12.12 to 1.0.0

dist/components/DatasetTable.d.ts

@@ -1,33 +0,32 @@
-import React, { ComponentProps, ReactElement, ReactNode } from "react";
-import { Table, TableHeaderCell } from "morse-react";
-declare type DatasetTableColumnProps<T> = ComponentProps<typeof TableHeaderCell> & {
-    label: React.ReactNode;
-    render: (item: T) => ReactNode;
-    children?: null;
-    headingClassName?: string;
-};
-export declare const DatasetTableColumn: <T>(_props: DatasetTableColumnProps<T>) => null;
-declare type DatasetTableChild<T> = ReactElement<DatasetTableColumnProps<T>>;
+import { Table } from "morse-react";
+import React, { ComponentProps } from "react";
+import { DatasetTableColumn } from "./columns/DatasetTableColumn";
 export interface DatasetTableProps<T> extends ComponentProps<typeof Table> {
-    /** List of items to display in the data set. One row per item */
+    /**
+     * The data set to display - a simple array.
+     */
     dataset: T[];
-    /** How a row renders can be overridden by setting to a functional component. */
-    rowRender?: (item: T, children: JSX.Element[], index: number, selected: boolean) => ReactNode;
-    /** Event handler attached to each `tr` element (with the exception of the heading row) */
-    onRowClick?: (item: T) => any;
     /**
-     * When set, the contents of each cell will be wrapped in a React Router `<Link>` component to allow browser based
-     * linking, rather than `history.push()` or other alternative methods.
+     * An array of DatasetTableColumns that describes the column configuration
      */
-    rowLinkTo?: (item: T) => string;
-    /** Executed for each item (row) in the dataset. If true, the CSS class `+selected` is added to the row element. */
-    isRowSelected?: (item: T) => boolean;
-    children: Array<false | DatasetTableChild<T>> | DatasetTableChild<T>;
-    /** Appends a row to the bottom of the table without the dataset specific click handlers/props. */
-    footer?: JSX.Element | JSX.Element[];
+    columns: DatasetTableColumn<T>[];
+    /**
+     * An optional function to handle rending of a row of items.
+     *
+     * Allows for extended behaviours that might need to inject secondary rows.
+     */
+    rowRender?: (item: T, rowElements: JSX.Element[], index: number) => React.ReactNode;
+    /**
+     * Appends a row to the bottom of the table without the dataset specific click handlers/props.
+     *
+     * Note that the footer is automatically surrounded with <TableFoot> to be semantically correct.
+     */
+    footer?: React.ReactNode;
 }
-export declare const DatasetTable: {
-    <T>(props: DatasetTableProps<T>): JSX.Element;
-    Column: <T_1>(_props: DatasetTableColumnProps<T_1>) => null;
-};
-export {};
+/**
+ * A table component to display tabular data from a data set for a configured list of columns.
+ *
+ * @param props
+ * @returns
+ */
+export declare const DatasetTable: <T>(props: DatasetTableProps<T>) => JSX.Element;

dist/components/DatasetTable.js

@@ -13,90 +13,60 @@ "use strict";
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DatasetTable = exports.DatasetTableColumn = void 0;
-var react_1 = __importStar(require("react"));
+exports.DatasetTable = void 0;
 var morse_react_1 = require("morse-react");
-var react_router_dom_1 = require("react-router-dom");
-exports.DatasetTableColumn = function (_props) {
-    return null;
-};
-exports.DatasetTable = function (props) {
-    var dataset = props.dataset, children = props.children, rowRender = props.rowRender, onRowClick = props.onRowClick, footer = props.footer, tableProps = __rest(props, ["dataset", "children", "rowRender", "onRowClick", "footer"]);
-    var columnHeadings = react_1.default.Children.map(children, function (column, index) {
-        if (typeof column === "boolean" || column === null) {
-            return;
+var react_1 = __importDefault(require("react"));
+/**
+ * A table component to display tabular data from a data set for a configured list of columns.
+ *
+ * @param props
+ * @returns
+ */
+var DatasetTable = function (props) {
+    // These helper functions simple detect if the cell or heading is a react node
+    // or a function instead (in which case the function is called)
+    var callOrReturnCellNode = function (column, item) {
+        if (column.cell instanceof Function) {
+            return column.cell(item, props.dataset);
         }
-        var _a = column.props, label = _a.label, render = _a.render, headingClassName = _a.headingClassName, columnProps = __rest(_a, ["label", "render", "headingClassName"]);
-        return (react_1.default.createElement(morse_react_1.TableHeaderCell, __assign({ key: "table-header-cell-" + index, className: headingClassName }, columnProps), label));
+        else {
+            return column.cell;
+        }
+    };
+    var callOrReturnHeadingNode = function (column) {
+        if (column.heading instanceof Function) {
+            return column.heading(props.dataset);
+        }
+        else {
+            return column.heading;
+        }
+    };
+    // Build the collection of headings
+    var headings = props.columns.map(function (column) {
+        return react_1.default.createElement(morse_react_1.TableHeaderCell, null, callOrReturnHeadingNode(column));
     });
-    var linkMap = react_1.useMemo(function () {
-        var map = new Map();
-        if (props.rowLinkTo) {
-            for (var _i = 0, _a = props.dataset; _i < _a.length; _i++) {
-                var item = _a[_i];
-                map.set(item, props.rowLinkTo(item));
-            }
-        }
-        return map;
-    }, [props.dataset, props.rowLinkTo]);
-    var tableRows = props.dataset.map(function (item, index) {
-        var linkTo = linkMap.get(item);
-        var rowChildren = react_1.default.Children.map(children, function (column) {
-            if (typeof column === "boolean" || column === null) {
-                return null;
-            }
-            var _a = column.props, label = _a.label, render = _a.render, headingClassName = _a.headingClassName, onClick = _a.onClick, sortDirection = _a.sortDirection, sortable = _a.sortable, columnProps = __rest(_a, ["label", "render", "headingClassName", "onClick", "sortDirection", "sortable"]);
-            return (react_1.default.createElement(morse_react_1.TableCell, __assign({ key: "table-cell-row-" + index + "-column-" + label }, columnProps), linkTo === undefined ? (render(item)) : (react_1.default.createElement(react_router_dom_1.Link, { style: {
-                    display: "block",
-                    textDecoration: "inherit",
-                    color: "inherit",
-                }, to: linkTo }, render(item)))));
+    // Build the collection of rows
+    var rows = props.dataset.map(function (item, i) {
+        // Containing cells
+        var cells = props.columns.map(function (column) {
+            return react_1.default.createElement(morse_react_1.TableCell, null, callOrReturnCellNode(column, item));
         });
-        var selected = props.isRowSelected ? props.isRowSelected(item) : false;
-        if (rowRender) {
-            return rowRender(item, rowChildren, index, selected);
+        // If we have a rowRender prop provided delegate this to the parent
+        if (props.rowRender) {
+            return props.rowRender(item, cells, i);
         }
-        var onClick = function () {
-            if (onRowClick) {
-                onRowClick(item);
-            }
-        };
-        return (react_1.default.createElement(morse_react_1.TableRow, { key: "table-row-" + index, className: selected ? "+selected" : undefined, onClick: onClick }, rowChildren));
+        else {
+            // Otherwise a <TableRow /> will do nicely
+            return react_1.default.createElement(morse_react_1.TableRow, null, cells);
+        }
     });
-    return (react_1.default.createElement(morse_react_1.Table, __assign({}, tableProps),
+    return (react_1.default.createElement(morse_react_1.Table, __assign({}, props),
         react_1.default.createElement(morse_react_1.TableHead, null,
-            react_1.default.createElement(morse_react_1.TableRow, null, columnHeadings)),
-        react_1.default.createElement(morse_react_1.TableBody, null, tableRows),
-        footer && footer));
+            react_1.default.createElement(morse_react_1.TableRow, null, headings)),
+        react_1.default.createElement(morse_react_1.TableBody, null, rows),
+        props.footer && react_1.default.createElement(morse_react_1.TableFoot, null, props.footer)));
 };
-exports.DatasetTable.Column = exports.DatasetTableColumn;
+exports.DatasetTable = DatasetTable;
 //# sourceMappingURL=DatasetTable.js.map

dist/components/ExpandableDatasetTable.d.ts

@@ -21,2 +21,4 @@ import React, { ComponentProps } from "react";
 /**
+ * A version of a DatasetTable that supports expanding a row to show 'drill down' or additional
+ * nested content.
  *
@@ -23,0 +25,0 @@ * So - you're probably wondering why this is a class based component . . .

dist/components/ExpandableDatasetTable.js

@@ -10,2 +10,4 @@ "use strict";
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
@@ -46,3 +48,3 @@ function __() { this.constructor = d; }
 var DatasetTable_1 = require("./DatasetTable");
-exports.ExpandableRow = function (props) {
+var ExpandableRow = function (props) {
     var expandedRowContent = props.expandedRowContent, expanded = props.expanded, toggleExpanded = props.toggleExpanded, children = props.children, rowProps = __rest(props, ["expandedRowContent", "expanded", "toggleExpanded", "children"]);
@@ -57,3 +59,6 @@ var numberColumns = react_1.default.Children.count(children);
 };
+exports.ExpandableRow = ExpandableRow;
 /**
+ * A version of a DatasetTable that supports expanding a row to show 'drill down' or additional
+ * nested content.
  *
@@ -60,0 +65,0 @@ * So - you're probably wondering why this is a class based component . . .

dist/index.d.ts

@@ -1,3 +0,3 @@
-export * from "./components/BulkSelectDatasetTable";
 export * from "./components/DatasetTable";
 export * from "./components/ExpandableDatasetTable";
+export * from "./components/columns/index";

dist/index.js

@@ -13,5 +13,5 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./components/BulkSelectDatasetTable"), exports);
 __exportStar(require("./components/DatasetTable"), exports);
 __exportStar(require("./components/ExpandableDatasetTable"), exports);
+__exportStar(require("./components/columns/index"), exports);
 //# sourceMappingURL=index.js.map

package.json

 {
     "name": "morse-react-tables",
-    "version": "0.12.12",
+    "version": "1.0.0",
     "description": "Patterns for building tables",
@@ -35,2 +35,3 @@ "repository": {
         "build": "tsc -d",
+        "version": "tsc -v",
         "build:release": "yarn build"
@@ -41,3 +42,3 @@ },
     ],
-    "gitHead": "1ac0a8eebdafbb1ce6ebcd27117ffd31208d8c6e"
+    "gitHead": "57be2f91c07c73de0f14fa7fc9533866aa0061bf"
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

34015

increased by7.62%

Number of package files

25

increased by92.31%

Lines of code

552

increased by22.12%

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes