@axelor/ui - npm Package Compare versions

Comparing version 0.0.32 to 0.0.33

core/nav/nav-tabs.d.ts

@@ -16,6 +16,15 @@ /// <reference types="react" />
      */
-    icon?: (props: {
+    icon?: React.FC<{
         color?: string;
-    }) => JSX.Element | null;
+    }>;
     /**
+     * The renderer to customize tab rendering
+     */
+    render?: React.FC<{
+        item: NavTabItem;
+        active?: boolean;
+        className?: string;
+        children?: React.ReactNode;
+    }>;
+    /**
      * The color for the icon.
@@ -26,2 +35,7 @@ *
     /**
+     * Associate any data
+     *
+     */
+    data?: any;
+    /**
      * The click handler.
@@ -28,0 +42,0 @@ *

core/nav/nav-tabs.js

@@ -162,3 +162,3 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
     const { item, onItemClick } = props;
-    const { icon, title, onClick, onAuxClick, onContextMenu } = item;
+    const { icon, title, render, onClick, onAuxClick, onContextMenu } = item;
     const { active, setActive } = useTabs();
@@ -179,4 +179,12 @@ const [element, setElement] = useState(null);
             [styles.active]: isActive,
-        }), "data-tab-id": item.id, onClick: handleClick, onAuxClick: onAuxClick, onContextMenu: onContextMenu, children: _jsxs("div", { className: styles.title, children: [icon && _jsx(NavTabIcon, { item: item }), _jsx("div", { className: styles.text, children: title })] }) }));
+        }), "data-tab-id": item.id, onClick: handleClick, onAuxClick: onAuxClick, onContextMenu: onContextMenu, children: _jsx(NavTabInner, { item: item, active: isActive }) }));
 }
+function NavTabInner(props) {
+    const { item, active } = props;
+    const { icon, title, render: Title } = item;
+    if (Title) {
+        return (_jsxs(Title, { item: item, active: active, className: styles.title, children: [icon && _jsx(NavTabIcon, { item: item }), title && _jsx("div", { className: styles.text, children: title })] }));
+    }
+    return (_jsxs("div", { className: styles.title, children: [icon && _jsx(NavTabIcon, { item: item }), title && _jsx("div", { className: styles.text, children: title })] }));
+}
 function NavTabIcon(props) {
@@ -183,0 +191,0 @@ const { item } = props;

grid/grid-body-row.js

@@ -20,8 +20,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
     }, [data, rowIndex, onCellClick, onClick]);
-    function getColumnValue(column) {
-        const value = data.record[column.name];
+    function getColumnValue(rawValue, column) {
         return column.formatter
-            ? column.formatter(column, value, data.record)
-            : value;
+            ? column.formatter(column, rawValue, data.record)
+            : rawValue;
     }
+    function getColumnRawValue(column) {
+        return column.valueGetter
+            ? column.valueGetter(column, data.record)
+            : data.record[column.name];
+    }
     function renderColumn(column, value) {
@@ -41,6 +45,7 @@ if (isRowCheck(column)) {
             }), style: style, onDoubleClick: (e) => onDoubleClick && onDoubleClick(e, data, rowIndex), children: columns.map((column, index) => {
-                const value = getColumnValue(column);
-                return (_jsx(GridColumn, { data: column, index: index, type: "body", record: data.record, value: value, focus: editCell === index, selected: selectedCell === index, renderer: column.renderer || cellRenderer, onClick: handleCellClick, onUpdate: handleUpdate, children: renderColumn(column, value) }, column.id ?? column.name));
+                const rawValue = getColumnRawValue(column);
+                const value = getColumnValue(rawValue, column);
+                return (_jsx(GridColumn, { data: column, index: index, type: "body", record: data.record, value: value, rawValue: rawValue, focus: editCell === index, selected: selectedCell === index, renderer: column.renderer || cellRenderer, onClick: handleCellClick, onUpdate: handleUpdate, children: renderColumn(column, value) }, column.id ?? column.name));
             }) }) }));
 });
 //# sourceMappingURL=grid-body-row.js.map

grid/grid-header-column.d.ts

@@ -10,2 +10,3 @@ import React, { SyntheticEvent } from "react";
     columns?: TYPES.GridColumn[];
+    renderer?: TYPES.Renderer;
     onGroup?: (e: SyntheticEvent, group: TYPES.GridGroup) => void;
@@ -12,0 +13,0 @@ onUngroup?: (e: SyntheticEvent, group: TYPES.GridGroup) => void;

grid/grid-header-column.js

@@ -35,3 +35,3 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export const GridHeaderColumn = React.memo(function GridHeaderColumn(props) {
-    const { data, columns, sort, index, checkType, selectionType, onCheckAll, onSort, onShow, onHide, onGroup, onUngroup, onResizeStart, onResize, onResizeEnd, onCustomize, } = props;
+    const { data, columns, sort, index, checkType, selectionType, renderer, onCheckAll, onSort, onShow, onHide, onGroup, onUngroup, onResizeStart, onResize, onResizeEnd, onCustomize, } = props;
     const classNames = useClassNames();
@@ -95,4 +95,4 @@ const targetRef = useRef(null);
             }
-            : {}), type: "header", index: index, data: data, children: renderColumn(data, index) }));
+            : {}), renderer: renderer, type: "header", index: index, data: data, children: renderColumn(data, index) }));
 });
 //# sourceMappingURL=grid-header-column.js.map

grid/grid-header.d.ts

@@ -8,2 +8,3 @@ import React from "react";
     allColumns?: TYPES.GridColumn[];
+    cellRenderer?: TYPES.Renderer;
     rowRenderer?: TYPES.Renderer;
@@ -10,0 +11,0 @@ checkType?: GridHeaderColumnProps["checkType"];

grid/grid-header.js

@@ -9,7 +9,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const GridHeader = React.memo(function GridHeader(props) {
-    const { className, columns = [], allColumns = [], orderBy, checkType, selectionType, groupBy, searchRowRenderer, searchColumnRenderer, rowRenderer, onCheckAll, onColumnDrop, onColumnSort, onColumnCustomize, onColumnShow, onColumnHide, onColumnGroupAdd, onColumnGroupRemove, onColumnResizeStart, onColumnResize, onColumnResizeEnd, } = props;
+    const { className, columns = [], allColumns = [], orderBy, checkType, selectionType, groupBy, searchRowRenderer, searchColumnRenderer, cellRenderer, rowRenderer, onCheckAll, onColumnDrop, onColumnSort, onColumnCustomize, onColumnShow, onColumnHide, onColumnGroupAdd, onColumnGroupRemove, onColumnResizeStart, onColumnResize, onColumnResizeEnd, } = props;
     const RowRenderer = rowRenderer || "div";
     return (_jsxs("div", { className: className, children: [_jsx(RowRenderer, { className: styles.row, children: columns.map((column, index) => {
                     const sortColumn = (orderBy || []).find((col) => col.name === column.name);
-                    return (_jsx(GridHeaderColumn, { index: index, data: column, sort: sortColumn ? sortColumn.order : null, groupBy: groupBy, columns: allColumns, onCheckAll: onCheckAll, onSort: onColumnSort, onGroup: onColumnGroupAdd, onUngroup: onColumnGroupRemove, onShow: onColumnShow, onHide: onColumnHide, onResize: onColumnResize, onResizeStart: onColumnResizeStart, onResizeEnd: onColumnResizeEnd, onCustomize: onColumnCustomize, ...(isRowCheck(column) ? { checkType, selectionType } : {}) }, column.id ?? column.name));
+                    return (_jsx(GridHeaderColumn, { index: index, data: column, sort: sortColumn ? sortColumn.order : null, groupBy: groupBy, columns: allColumns, renderer: cellRenderer, onCheckAll: onCheckAll, onSort: onColumnSort, onGroup: onColumnGroupAdd, onUngroup: onColumnGroupRemove, onShow: onColumnShow, onHide: onColumnHide, onResize: onColumnResize, onResizeStart: onColumnResizeStart, onResizeEnd: onColumnResizeEnd, onCustomize: onColumnCustomize, ...(isRowCheck(column) ? { checkType, selectionType } : {}) }, column.id ?? column.name));
                 }) }), searchRowRenderer && searchColumnRenderer && (_jsx(GridSearchRow, { columns,
@@ -16,0 +16,0 @@ searchRowRenderer,

grid/grid.js

@@ -53,3 +53,3 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
     const { onRowClick, onRowDoubleClick, onRowReorder, onRowSelectionChange, onCellClick, onRecordAdd, onRecordEdit, onRecordSave, onRecordDiscard, onColumnCustomize, } = props;
-    const { cellRenderer, rowRenderer, headerRowRenderer, footerRowRenderer, rowGroupHeaderRenderer, rowGroupFooterRenderer, editRowRenderer, editRowColumnRenderer, searchRowRenderer, searchColumnRenderer, } = props;
+    const { cellRenderer, rowRenderer, headerCellRenderer, headerRowRenderer, footerRowRenderer, rowGroupHeaderRenderer, rowGroupFooterRenderer, editRowRenderer, editRowColumnRenderer, searchRowRenderer, searchColumnRenderer, } = props;
     const handleRef = useRefs(containerRef, ref);
@@ -931,3 +931,3 @@ const totalRows = state.rows.length;
                         [styles.options]: allowColumnOptions,
-                    }), groupBy: state.groupBy, orderBy: state.orderBy, columns: displayColumns, rowRenderer: headerRowRenderer, checkType: checkType, selectionType: selectionType, ...(allowColumnOptions ? { allColumns: state.columns } : {}), ...(allowSearch
+                    }), groupBy: state.groupBy, orderBy: state.orderBy, columns: displayColumns, cellRenderer: headerCellRenderer, rowRenderer: headerRowRenderer, checkType: checkType, selectionType: selectionType, ...(allowColumnOptions ? { allColumns: state.columns } : {}), ...(allowSearch
                         ? {
@@ -934,0 +934,0 @@ searchRowRenderer,

grid/types.d.ts

@@ -19,2 +19,3 @@ import React, { CSSProperties, SyntheticEvent } from "react";
     formatter?: (column: GridColumn, value: any, record: any) => any;
+    valueGetter?: (column: GridColumn, record: any) => any;
     renderer?: (props: any) => any;
@@ -30,2 +31,3 @@ $changed?: boolean;
     value?: any;
+    rawValue?: any;
     record?: GridRow["record"];
@@ -104,2 +106,3 @@ type?: "header" | "footer" | "body";
     headerRowRenderer?: Renderer;
+    headerCellRenderer?: Renderer;
     footerRowRenderer?: Renderer;
@@ -106,0 +109,0 @@ searchRowRenderer?: Renderer;

package.json

 {
   "name": "@axelor/ui",
-  "version": "0.0.32",
+  "version": "0.0.33",
   "author": "Axelor",
@@ -5,0 +5,0 @@ "license": "AGPL-3.0-only",

No alert changes

Improved metrics

Total package byte prevSize

966081

increased by0.21%

Lines of code

11601

increased by0.28%

No dependency changes