@frui.ts/dataviews - npm Package Compare versions

Comparing version 0.15.0-alpha.1 to 0.15.0-alpha.2

dist/dataRepeater/index.d.ts

 import * as React from "react";
 import { DataTablePropsBase } from "../dataTypes";
-export interface DataRepeaterProps<TItem, TWrapper extends React.ElementType, THeadWrapper extends React.ElementType, THeadCell extends React.ElementType, TBodyWrapper extends React.ElementType, TItemWrapper extends React.ElementType, TItemCell extends React.ElementType> extends DataTablePropsBase<TItem> {
+export interface DataRepeaterProps<TItem, TContext, TWrapper extends React.ElementType, THeadWrapper extends React.ElementType, THeadCell extends React.ElementType, TBodyWrapper extends React.ElementType, TItemWrapper extends React.ElementType, TItemCell extends React.ElementType> extends DataTablePropsBase<TItem, TContext> {
     wrapperType?: TWrapper;
@@ -17,4 +17,4 @@ wrapperProps?: React.ComponentPropsWithoutRef<TWrapper>;
 }
-declare function dataRepeater<TItem, TWrapper extends React.ElementType, THeadWrapper extends React.ElementType, THeadCell extends React.ElementType, TBodyWrapper extends React.ElementType, TItemWrapper extends React.ElementType, TItemCell extends React.ElementType>(props: DataRepeaterProps<TItem, TWrapper, THeadWrapper, THeadCell, TBodyWrapper, TItemWrapper, TItemCell>): JSX.Element;
+declare function dataRepeater<TItem, TContext, TWrapper extends React.ElementType, THeadWrapper extends React.ElementType, THeadCell extends React.ElementType, TBodyWrapper extends React.ElementType, TItemWrapper extends React.ElementType, TItemCell extends React.ElementType>(props: DataRepeaterProps<TItem, TContext, TWrapper, THeadWrapper, THeadCell, TBodyWrapper, TItemWrapper, TItemCell>): JSX.Element;
 declare const DataRepeater: typeof dataRepeater;
 export default DataRepeater;

dist/dataRepeater/index.js

@@ -23,4 +23,4 @@ "use strict";
     return (React.createElement(Wrapper, __assign({}, props.wrapperProps),
-        React.createElement(repeaterHeader_1.default, { columns: props.columns, pagingFilter: props.pagingFilter, onColumnSort: props.onColumnSort, wrapperType: props.headWrapperType, wrapperProps: props.headWrapperProps, itemCellType: props.headCellType, itemCellProps: props.headCellProps }),
-        React.createElement(ItemWrapper, __assign({}, props.bodyWrapperProps), props.items.map(function (item) { return (React.createElement(repeaterRow_1.default, { key: String(item[props.itemKey]), item: item, columns: props.columns, wrapperType: props.itemWrapperType, wrapperProps: props.itemWrapperProps, itemCellType: props.itemCellType, itemCellProps: props.itemCellProps })); }))));
+        React.createElement(repeaterHeader_1.default, { columns: props.columns, context: props.context, pagingFilter: props.pagingFilter, onColumnSort: props.onColumnSort, wrapperType: props.headWrapperType, wrapperProps: props.headWrapperProps, itemCellType: props.headCellType, itemCellProps: props.headCellProps }),
+        React.createElement(ItemWrapper, __assign({}, props.bodyWrapperProps), props.items.map(function (item) { return (React.createElement(repeaterRow_1.default, { key: String(item[props.itemKey]), item: item, columns: props.columns, context: props.context, wrapperType: props.itemWrapperType, wrapperProps: props.itemWrapperProps, itemCellType: props.itemCellType, itemCellProps: props.itemCellProps })); }))));
 }
@@ -27,0 +27,0 @@ var DataRepeater = mobx_react_lite_1.observer(dataRepeater);

dist/dataRepeater/repeaterHeader.d.ts

 import { IPagingFilter } from "@frui.ts/data";
 import * as React from "react";
 import { ColumnDefinition, PropsWithColumns } from "../dataTypes";
-export interface HeaderRowProps<TItem, TWrapper extends React.ElementType, TItemCell extends React.ElementType> extends PropsWithColumns<TItem> {
+export interface HeaderRowProps<TItem, TContext, TWrapper extends React.ElementType, TItemCell extends React.ElementType> extends PropsWithColumns<TItem, TContext> {
     pagingFilter?: IPagingFilter;
-    onColumnSort?: (column: ColumnDefinition<TItem>) => any;
+    onColumnSort?: (column: ColumnDefinition<TItem, TContext>) => any;
     wrapperType?: TWrapper;
@@ -12,4 +12,4 @@ wrapperProps?: React.ComponentPropsWithoutRef<TWrapper>;
 }
-declare function repeaterHeader<TItem, TWrapper extends React.ElementType, TItemCell extends React.ElementType>(props: HeaderRowProps<TItem, TWrapper, TItemCell>): JSX.Element;
+declare function repeaterHeader<TItem, TContext, TWrapper extends React.ElementType, TItemCell extends React.ElementType>(props: HeaderRowProps<TItem, TContext, TWrapper, TItemCell>): JSX.Element;
 declare const RepeaterHeader: typeof repeaterHeader;
 export default RepeaterHeader;

dist/dataRepeater/repeaterHeader.js

@@ -29,15 +29,16 @@ "use strict";
     var Item = (_b = props.itemCellType) !== null && _b !== void 0 ? _b : "th";
-    return (React.createElement(Wrapper, __assign({}, props.wrapperProps), props.columns.map(function (col, i) {
+    var context = props.context;
+    return (React.createElement(Wrapper, __assign({}, props.wrapperProps), props.columns.map(function (column, i) {
         var _a;
-        var key = (_a = col.property) !== null && _a !== void 0 ? _a : i;
-        if (col.headerFormatter) {
-            return col.headerFormatter(col, key);
+        var key = (_a = column.property) !== null && _a !== void 0 ? _a : i;
+        if (column.headerFormatter) {
+            return column.headerFormatter({ key: key, column: column, context: context });
         }
-        else if (props.pagingFilter && col.sortable && col.property) {
-            return (React.createElement(Item, __assign({ key: key, className: "sortable", onClick: function () { var _a; return (_a = props.onColumnSort) === null || _a === void 0 ? void 0 : _a.call(props, col); } }, props.itemCellProps, { style: col.headerStyle }),
-                col.title,
-                React.createElement("span", { className: getSortIndicatorClass(props.pagingFilter, col.property) })));
+        else if (props.pagingFilter && column.sortable && column.property) {
+            return (React.createElement(Item, __assign({ key: key, className: "sortable", onClick: function () { var _a; return (_a = props.onColumnSort) === null || _a === void 0 ? void 0 : _a.call(props, column); } }, props.itemCellProps, { style: column.headerStyle }),
+                column.title,
+                React.createElement("span", { className: getSortIndicatorClass(props.pagingFilter, column.property) })));
         }
         else {
-            return (React.createElement(Item, __assign({ key: key }, props.itemCellProps, { style: col.headerStyle }), col.title));
+            return (React.createElement(Item, __assign({ key: key }, props.itemCellProps, { style: column.headerStyle }), column.title));
         }
@@ -44,0 +45,0 @@ })));

dist/dataRepeater/repeaterRow.d.ts

 import * as React from "react";
 import { PropsWithColumns } from "../dataTypes";
-export interface DataRowProps<TItem, TWrapper extends React.ElementType, TItemCell extends React.ElementType> extends PropsWithColumns<TItem> {
+export interface DataRowProps<TItem, TContext, TWrapper extends React.ElementType, TItemCell extends React.ElementType> extends PropsWithColumns<TItem, TContext> {
     item: TItem;
@@ -10,4 +10,4 @@ wrapperType?: TWrapper;
 }
-declare function repeaterRow<TItem, TWrapper extends React.ElementType, TItemCell extends React.ElementType>(props: DataRowProps<TItem, TWrapper, TItemCell>): JSX.Element;
+declare function repeaterRow<TItem, TContext, TWrapper extends React.ElementType, TItemCell extends React.ElementType>(props: DataRowProps<TItem, TContext, TWrapper, TItemCell>): JSX.Element;
 declare const RepeaterRow: typeof repeaterRow;
 export default RepeaterRow;

dist/dataRepeater/repeaterRow.js

@@ -20,2 +20,3 @@ "use strict";
     var Item = (_b = props.itemCellType) !== null && _b !== void 0 ? _b : "td";
+    var context = props.context;
     var columns = props.columns, item = props.item, itemCellProps = props.itemCellProps;
@@ -27,6 +28,6 @@ return (React.createElement(Wrapper, __assign({}, props.wrapperProps), columns.map(function (column, i) {
         if (column.cellFormatter) {
-            return column.cellFormatter(value, item, column, key);
+            return column.cellFormatter({ key: key, value: value, item: item, column: column, context: context });
         }
         else {
-            return (React.createElement(Item, __assign({ key: key }, itemCellProps), column.valueFormatter ? column.valueFormatter(value, item, column) : value));
+            return (React.createElement(Item, __assign({ key: key }, itemCellProps), column.valueFormatter ? column.valueFormatter({ value: value, item: item, column: column, context: context }) : value));
         }
@@ -33,0 +34,0 @@ })));

dist/dataTable/index.d.ts

 /// <reference types="react" />
 import { DataTablePropsBase } from "../dataTypes";
-export interface DataTableProps<TItem> extends DataTablePropsBase<TItem> {
+export interface DataTableProps<TItem, TContext> extends DataTablePropsBase<TItem, TContext> {
     className?: string;
@@ -8,4 +8,4 @@ headerRowClassName?: string;
 }
-declare function dataTable<TItem>(props: DataTableProps<TItem>): JSX.Element;
+declare function dataTable<TItem, TContext>(props: DataTableProps<TItem, TContext>): JSX.Element;
 declare const DataTable: typeof dataTable;
 export default DataTable;

dist/dataTable/index.js

@@ -11,4 +11,4 @@ "use strict";
         React.createElement("thead", null,
-            React.createElement(tableHeader_1.default, { columns: props.columns, pagingFilter: props.pagingFilter, onColumnSort: props.onColumnSort, className: props.headerRowClassName, cellClassName: props.headerCellClassName })),
-        React.createElement("tbody", null, (_a = props.items) === null || _a === void 0 ? void 0 : _a.map(function (item) { return (React.createElement(tableRow_1.default, { key: String(item[props.itemKey]), item: item, columns: props.columns })); }))));
+            React.createElement(tableHeader_1.default, { columns: props.columns, context: props.context, pagingFilter: props.pagingFilter, onColumnSort: props.onColumnSort, className: props.headerRowClassName, cellClassName: props.headerCellClassName })),
+        React.createElement("tbody", null, (_a = props.items) === null || _a === void 0 ? void 0 : _a.map(function (item) { return (React.createElement(tableRow_1.default, { key: String(item[props.itemKey]), item: item, columns: props.columns, context: props.context })); }))));
 }
@@ -15,0 +15,0 @@ var DataTable = mobx_react_lite_1.observer(dataTable);

dist/dataTable/tableHeader.d.ts

 /// <reference types="react" />
 import { IPagingFilter } from "@frui.ts/data";
 import { ColumnDefinition, PropsWithColumns } from "../dataTypes";
-export interface HeaderRowProps<TItem> extends PropsWithColumns<TItem> {
+export interface HeaderRowProps<TItem, TContext> extends PropsWithColumns<TItem, TContext> {
     pagingFilter?: IPagingFilter;
-    onColumnSort?: (column: ColumnDefinition<TItem>) => any;
+    onColumnSort?: (column: ColumnDefinition<TItem, TContext>) => any;
     className?: string;
     cellClassName?: string;
 }
-declare function tableHeader<TItem>(props: HeaderRowProps<TItem>): JSX.Element;
+declare function tableHeader<TItem, TContext>(props: HeaderRowProps<TItem, TContext>): JSX.Element;
 declare const TableHeader: typeof tableHeader;
 export default TableHeader;

dist/dataTable/tableHeader.js

@@ -15,15 +15,15 @@ "use strict";
 function tableHeader(props) {
-    return (React.createElement("tr", { className: props.className }, props.columns.map(function (col, i) {
+    return (React.createElement("tr", { className: props.className }, props.columns.map(function (column, i) {
         var _a;
-        var key = (_a = col.property) !== null && _a !== void 0 ? _a : i;
-        if (col.headerFormatter) {
-            return col.headerFormatter(col, key);
+        var key = (_a = column.property) !== null && _a !== void 0 ? _a : i;
+        if (column.headerFormatter) {
+            return column.headerFormatter({ key: key, column: column, context: props.context });
         }
-        else if (props.pagingFilter && col.sortable && col.property) {
-            return (React.createElement("th", { key: key, className: "sortable", style: col.headerStyle, onClick: function () { var _a; return (_a = props.onColumnSort) === null || _a === void 0 ? void 0 : _a.call(props, col); } },
-                col.title,
-                React.createElement("span", { className: getSortIndicatorClass(props.pagingFilter, col.property) })));
+        else if (props.pagingFilter && column.sortable && column.property) {
+            return (React.createElement("th", { key: key, className: "sortable", style: column.headerStyle, onClick: function () { var _a; return (_a = props.onColumnSort) === null || _a === void 0 ? void 0 : _a.call(props, column); } },
+                column.title,
+                React.createElement("span", { className: getSortIndicatorClass(props.pagingFilter, column.property) })));
         }
         else {
-            return (React.createElement("th", { key: key, className: props.cellClassName, style: col.headerStyle }, col.title));
+            return (React.createElement("th", { key: key, className: props.cellClassName, style: column.headerStyle }, column.title));
         }
@@ -30,0 +30,0 @@ })));

dist/dataTable/tableRow.d.ts

 /// <reference types="react" />
 import { PropsWithColumns } from "../dataTypes";
-export interface DataRowProps<TItem> extends PropsWithColumns<TItem> {
+export interface DataRowProps<TItem, TContext> extends PropsWithColumns<TItem, TContext> {
     item: TItem;
@@ -8,4 +8,4 @@ className?: string;
 }
-declare function tableRow<TItem>({ item, columns, className, cellClassName }: DataRowProps<TItem>): JSX.Element;
+declare function tableRow<TItem, TContext>({ item, columns, context, className, cellClassName }: DataRowProps<TItem, TContext>): JSX.Element;
 declare const TableRow: typeof tableRow;
 export default TableRow;

dist/dataTable/tableRow.js

@@ -6,3 +6,3 @@ "use strict";
 function tableRow(_a) {
-    var item = _a.item, columns = _a.columns, className = _a.className, cellClassName = _a.cellClassName;
+    var item = _a.item, columns = _a.columns, context = _a.context, className = _a.className, cellClassName = _a.cellClassName;
     return (React.createElement("tr", { className: className }, columns.map(function (column, i) {
@@ -13,6 +13,6 @@ var _a;
         if (column.cellFormatter) {
-            return column.cellFormatter(value, item, column, key);
+            return column.cellFormatter({ key: key, value: value, item: item, column: column, context: context });
         }
         else {
-            return (React.createElement("td", { key: key, className: cellClassName, style: column.cellStyle }, column.valueFormatter ? column.valueFormatter(value, item, column) : value));
+            return (React.createElement("td", { key: key, className: cellClassName, style: column.cellStyle }, column.valueFormatter ? column.valueFormatter({ value: value, item: item, column: column, context: context }) : value));
         }
@@ -19,0 +19,0 @@ })));

dist/dataTypes.d.ts

@@ -0,5 +1,16 @@
+import { IPagingFilter } from "@frui.ts/data";
 import { ReactNode } from "react";
-import { IPagingFilter } from "@frui.ts/data";
 export declare type PropertyKey<TItem> = keyof TItem & (string | number);
-export interface ColumnDefinition<TItem, TProperty extends PropertyKey<TItem> = PropertyKey<TItem>> {
+export interface KeyRenderProps {
+    key: React.Key;
+}
+export interface ColumnRenderProps<TItem, TContext, TProperty extends PropertyKey<TItem>> {
+    column: ColumnDefinition<TItem, TContext, TProperty>;
+    context?: TContext;
+}
+export interface ValueRenderProps<TItem, TContext, TProperty extends PropertyKey<TItem>> extends ColumnRenderProps<TItem, TContext, TProperty> {
+    value?: TItem[TProperty] | any;
+    item: TItem;
+}
+export interface ColumnDefinition<TItem, TContext = any, TProperty extends PropertyKey<TItem> = PropertyKey<TItem>> {
     title?: ReactNode;
@@ -9,9 +20,10 @@ property?: TProperty;
     headerStyle?: React.CSSProperties;
-    headerFormatter?: (column: ColumnDefinition<TItem, TProperty>, key: React.Key) => ReactNode;
-    valueFormatter?: (value: TItem[TProperty] | any | undefined, item: TItem, column: ColumnDefinition<TItem, TProperty>) => ReactNode;
+    headerFormatter?: (props: ColumnRenderProps<TItem, TContext, TProperty> & KeyRenderProps) => ReactNode;
+    valueFormatter?: (props: ValueRenderProps<TItem, TContext, TProperty>) => ReactNode;
     cellStyle?: React.CSSProperties;
-    cellFormatter?: (value: TItem[TProperty] | any | undefined, item: TItem, column: ColumnDefinition<TItem, TProperty>, key: React.Key) => ReactNode;
+    cellFormatter?: (props: ValueRenderProps<TItem, TContext, TProperty> & KeyRenderProps) => ReactNode;
 }
-export interface PropsWithColumns<TItem> {
-    columns: ColumnDefinition<TItem>[];
+export interface PropsWithColumns<TItem, TContext> {
+    columns: ColumnDefinition<TItem, TContext>[];
+    context?: TContext;
 }
@@ -22,5 +34,5 @@ export interface PropsWithItems<TItem> {
 }
-export interface DataTablePropsBase<TItem> extends PropsWithColumns<TItem>, PropsWithItems<TItem> {
+export interface DataTablePropsBase<TItem, TContext> extends PropsWithColumns<TItem, TContext>, PropsWithItems<TItem> {
     pagingFilter?: IPagingFilter;
-    onColumnSort?: (column: ColumnDefinition<TItem>) => any;
+    onColumnSort?: (column: ColumnDefinition<TItem, TContext>) => any;
 }

package.json

@@ -6,3 +6,3 @@ {
   },
-  "version": "0.15.0-alpha.1",
+  "version": "0.15.0-alpha.2",
   "description": "View components for data display",
@@ -51,3 +51,3 @@ "keywords": [
   },
-  "gitHead": "cacc87f118565a66e67579070fb8186820e097b5"
+  "gitHead": "c284a116ec1f9f17be366936544e2a07bae554b6"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

39654

increased by7.32%

Lines of code

304

increased by4.83%

No dependency changes