DataRow styles with context (#1081)

Author: anserwaseem

.changeset/brave-trees-smile.md

@@ -0,0 +1,6 @@
+---
+"@ensembleui/react-kitchen-sink": patch
+"@ensembleui/react-runtime": patch
+---
+
+expose context in DataRow styles

apps/kitchen-sink/src/ensemble/screens/widgets.yaml

@@ -317,6 +317,11 @@ View:
                     key: ${dummyData.id}
                     template:
                       DataRow:
+                        styles:
+                          backgroundColor: ${colors.teal['300']}
+                          border: 2px double ${index % 2 === 0 ? colors.primary['100'] :"lightgreen"}
+                          borderRadius: ${ensemble.storage.get("skip")}px
+                          padding: ${getDummyProductsByPaginate.body.products.length * 2}px
                         children:
                           - Text:
                               id: ${dummyData.patient+"Name"}
@@ -417,9 +422,14 @@ View:
                         key: ${dummyData.id}
                         template:
                           DataRow:
+                            onTap:
+                              showToast:
+                                message: heha ${data.dummyData.id} ${index}
                             styles:
                               backgroundColor: ${index % 2 === 0 ? "beige" :"lightgreen"}
-                              border: 4px double blue
+                              border: 4px double ${dummyData.id % 2 === 0 ? colors.primary['100'] :colors.primary['500']}
+                              textAlign: ${ensemble.storage.get("skip") === 10 ? "right" :"left"}
+                              lineHeight: ${getDummyProductsByPaginate.body.products.length}px
                             disableSelection: ${dummyData.id === 2}
                             item-template:
                               data: ${Object.values(dummyData)}

packages/runtime/src/widgets/DataGrid/DataGrid.tsx

@@ -15,14 +15,15 @@ import {
   useRegisterBindings,
   type EnsembleAction,
   unwrapWidget,
-  evaluateDeep,
+  useEvaluate,
 } from "@ensembleui/react-framework";
 import React, {
   useCallback,
   useState,
   useMemo,
   useRef,
   useEffect,
+  memo,
 } from "react";
 import type { ReactEventHandler, ReactElement } from "react";
 import {
@@ -156,6 +157,42 @@ const ResizableTitle: React.FC<ResizableProps & ResizableState> = (props) => {
   );
 };
 
+const CustomRowWithStyles: React.FC<
+  React.PropsWithChildren<{
+    "data-index"?: number;
+    "data-styles"?: EnsembleWidgetStyles;
+    "data-record"?: object;
+    [key: string]: unknown;
+  }>
+> = memo(
+  ({
+    "data-index": index,
+    "data-styles": rowStyles,
+    "data-record": record,
+    children,
+    ...props
+  }) => {
+    const memoizedContext = useMemo(
+      () => ({ ...record, index }),
+      [record, index],
+    );
+
+    const evaluatedRowStyles = useEvaluate(
+      rowStyles ? (rowStyles as { [key: string]: unknown }) : undefined,
+      {
+        context: memoizedContext,
+      },
+    );
+
+    return (
+      <tr {...props} style={{ ...evaluatedRowStyles }}>
+        {children}
+      </tr>
+    );
+  },
+);
+CustomRowWithStyles.displayName = "CustomRowWithStyles";
+
 const defaultGridMutatorOptions = {
   suppressCallbacks: false,
 };
@@ -185,11 +222,6 @@ export const DataGrid: React.FC<GridProps> = (props) => {
   const selectionColWidth = props.selectionColWidth || 50;
   const containerRef = useRef<HTMLDivElement>(null);
   const { namedData } = useTemplateData({ ...itemTemplate });
-  const components = {
-    header: {
-      cell: ResizableTitle,
-    },
-  };
 
   // on row tap action
   const onTapAction = useEnsembleAction(itemTemplate.template.properties.onTap);
@@ -200,6 +232,15 @@ export const DataGrid: React.FC<GridProps> = (props) => {
     [onTapAction?.callback],
   );
 
+  const components = {
+    header: {
+      cell: ResizableTitle,
+    },
+    body: {
+      row: CustomRowWithStyles,
+    },
+  };
+
   // on row selected action
   const onRowsSelected = useEnsembleAction(props.onRowsSelected);
   const onRowsSelectedCallback = useCallback(
@@ -476,22 +517,14 @@ export const DataGrid: React.FC<GridProps> = (props) => {
           dataSource={namedData}
           key={resolvedWidgetId}
           onChange={onChange}
-          onRow={(record, recordIndex) => {
-            const rowStyles = itemTemplate.template.properties.styles;
-            const recordStyles = rowStyles
-              ? evaluateDeep(
-                  rowStyles as {
-                    [key: string]: unknown;
-                  },
-                  defaultScreenContext.model,
-                  { ...record, index: recordIndex },
-                )
-              : {};
-            return {
-              onClick: () => onTapActionCallback(record, recordIndex),
-              style: recordStyles,
-            };
-          }}
+          onRow={(record, recordIndex) => ({
+            "data-index": recordIndex,
+            "data-record": record,
+            "data-styles": itemTemplate.template.properties.styles,
+            onClick: itemTemplate.template.properties.onTap
+              ? (): unknown => onTapActionCallback(record, recordIndex)
+              : undefined,
+          })}
           pagination={paginationObject}
           rowKey={(data: unknown) => {
             const identifier: string = evaluate(