Use jsx-dom for formatters

src/Serenity.Demo.BasicSamples/Areas/Serenity.Demo.BasicSamples/Grids/CustomLinksInGrid/Index.cshtml

@@ -21,7 +21,7 @@
 
     <p class="s-sample-sources"><b>Source Files:</b> 
         @Html.BasicSamplesSourceFile("Index.cshtml"), 
-        @Html.BasicSamplesSourceFile("CustomLinksInGridPage.ts")
+        @Html.BasicSamplesSourceFile("CustomLinksInGridPage.tsx")
     </p>
 </div>
 

src/Serenity.Demo.BasicSamples/Areas/Serenity.Demo.BasicSamples/Grids/InlineActionButtons/Index.cshtml

@@ -15,7 +15,7 @@
 
     <p class="s-sample-sources"><b>Source Files:</b> 
     @Html.BasicSamplesSourceFile("Index.cshtml"), 
-    @Html.BasicSamplesSourceFile("InlineActionButtonsPage.ts")</p>
+    @Html.BasicSamplesSourceFile("InlineActionButtonsPage.tsx")</p>
 </div>
 
 <div id="GridDiv"></div>

src/Serenity.Demo.BasicSamples/Areas/Serenity.Demo.BasicSamples/Grids/InlineImageInGrid/Index.cshtml

@@ -14,7 +14,7 @@
     <p>Here is how to show a product image inline in grid.</p>
     <p>If you didn't yet, please upload an image for a product for this demonstration to work.</p>
 
-    <p class="s-sample-sources"><b>Source Files:</b> @Html.BasicSamplesSourceFile("Index.cshtml"), @Html.BasicSamplesSourceFile("InlineImageInGridPage.ts")</p>
+    <p class="s-sample-sources"><b>Source Files:</b> @Html.BasicSamplesSourceFile("Index.cshtml"), @Html.BasicSamplesSourceFile("InlineImageInGridPage.tsx")</p>
 </div>
 
 <div id="GridDiv"></div>

src/Serenity.Demo.BasicSamples/Modules/Grids/CustomLinksInGrid/CustomLinksInGridPage.ts → src/Serenity.Demo.BasicSamples/Modules/Grids/CustomLinksInGrid/CustomLinksInGridPage.tsx

@@ -15,16 +15,16 @@ export class CustomLinksInGrid extends OrderGrid {
         var columns = new OrderColumns(super.getColumns());
 
         columns.CustomerCompanyName && (columns.CustomerCompanyName.format =
-            ctx => `<a href="#" class="customer-link">${ctx.escape()}</a>`);
+            ctx => <a href="#" class="customer-link">{ctx.value}</a>);
 
         columns.OrderDate && (columns.OrderDate.format =
-            ctx => `<a href="#" class="date-link">${ctx.escape(formatDate(ctx.value))}</a>`);
+            ctx => <a href="#" class="date-link">{formatDate(ctx.value)}</a>);
 
         columns.EmployeeFullName && (columns.EmployeeFullName.format =
-            ctx => `<a href="#" class="employee-link">${ctx.escape()}</a>`);
+            ctx => <a href="#" class="employee-link">{ctx.value}</a>);
 
         columns.ShipCountry && (columns.ShipCountry.format =
-            ctx => `<a href="#" class="ship-country-link">${ctx.escape()}</a>`);
+            ctx => <a href="#" class="ship-country-link">{ctx.value}</a>);
 
         return columns.valueOf();
     }

src/Serenity.Demo.BasicSamples/Modules/Grids/InlineActionButtons/InlineActionButtonsPage.ts → src/Serenity.Demo.BasicSamples/Modules/Grids/InlineActionButtons/InlineActionButtonsPage.tsx

@@ -17,7 +17,7 @@ export class InlineActionGrid extends CustomerGrid {
         let inlineAction = (actionKey: string, hint, iconClass: string): Column => ({
             name: '',
             width: 24,
-            format: _ => `<a class="inline-action" data-action="${actionKey}" title="${htmlEncode(hint)}"><i class="${htmlEncode(iconClass)}"></i></a>`,
+            format: () => <a class="inline-action" data-action={actionKey} title={hint}><i class={iconClass}></i></a>,
             minWidth: 24,
             maxWidth: 24
         })
@@ -60,7 +60,7 @@ export class InlineActionGrid extends CustomerGrid {
                 case newOrderAction: {
                     var dlg = new OrderDialog();
                     this.initDialog(dlg);
-                    dlg.loadEntityAndOpenDialog(<OrderRow>{
+                    dlg.loadEntityAndOpenDialog({
                         CustomerID: item.CustomerID
                     });
                 }

src/Serenity.Demo.BasicSamples/Modules/Grids/InlineImageInGrid/InlineImageInGridPage.ts → src/Serenity.Demo.BasicSamples/Modules/Grids/InlineImageInGrid/InlineImageInGridPage.tsx

@@ -1,7 +1,7 @@
-import { InlineImageInGridColumns } from "../../ServerTypes/Demo";
 import { Decorators, EntityGrid, Formatter, IInitializeColumn, gridPageInit, resolveUrl } from "@serenity-is/corelib";
 import { ProductDialog, ProductRow, ProductService } from "@serenity-is/demo.northwind";
-import { Column, FormatterContext, GridOptions } from "@serenity-is/sleekgrid";
+import { Column, FormatterContext, FormatterResult, GridOptions } from "@serenity-is/sleekgrid";
+import { InlineImageInGridColumns } from "../../ServerTypes/Demo";
 
 export default () => gridPageInit(InlineImageInGrid);
 
@@ -12,23 +12,19 @@ export class InlineImageFormatter
     constructor(public readonly props: { fileProperty?: string, thumb?: boolean } = {}) {
     }
 
-    format(ctx: FormatterContext): string {
+    format(ctx: FormatterContext): FormatterResult {
 
         var file = (this.props?.fileProperty ? ctx.item[this.props.fileProperty] : ctx.value) as string;
         if (!file || !file.length)
             return "";
 
-        let href = resolveUrl("~/upload/" + file);
-
         if (this.props?.thumb) {
             var parts = file.split('.');
             file = parts.slice(0, parts.length - 1).join('.') + '_t.jpg';
         }
 
-        let src = resolveUrl('~/upload/' + file);
-
-        return `<a class="inline-image" target='_blank' href="${href}">` +
-            `<img src="${src}" style='max-height: 145px; max-width: 100%;' /></a>`;
+        return <a class="inline-image" target="_blank" href={resolveUrl("~/upload/" + file)}>
+            <img src={resolveUrl('~/upload/' + file)} style="max-height: 145px; max-width: 100%" /></a>;
     }
 
     initializeColumn(column: Column): void {
@@ -43,7 +39,7 @@ export class InlineImageFormatter
 export class InlineImageInGrid<P = {}> extends EntityGrid<ProductRow, P> {
 
     protected getColumnsKey() { return InlineImageInGridColumns.columnsKey; }
-    protected getDialogType() { return <any>ProductDialog; }
+    protected getDialogType() { return ProductDialog; }
     protected getRowDefinition() { return ProductRow; }
     protected getService() { return ProductService.baseUrl; }
 

src/Serenity.Demo.Northwind/Modules/Customer/EmployeeListFormatter.ts → src/Serenity.Demo.Northwind/Modules/Customer/EmployeeListFormatter.tsx

@@ -1,6 +1,5 @@
-import { Decorators, Formatter, faIcon } from "@serenity-is/corelib";
-import { Lookup } from "@serenity-is/corelib";
-import { FormatterContext } from "@serenity-is/sleekgrid";
+import { Decorators, Formatter, Lookup, faIcon } from "@serenity-is/corelib";
+import { FormatterContext, FormatterResult } from "@serenity-is/sleekgrid";
 import { EmployeeRow } from "../ServerTypes/Demo";
 
 let lookup: Lookup<EmployeeRow>;
@@ -9,18 +8,18 @@ let promise: Promise<Lookup<EmployeeRow>>;
 @Decorators.registerFormatter('Serenity.Demo.Northwind.EmployeeListFormatter')
 export class EmployeeListFormatter implements Formatter {
 
-    format(ctx: FormatterContext) {
+    format(ctx: FormatterContext): FormatterResult {
 
         let idList = ctx.value as string[];
         if (!idList || !idList.length)
             return "";
 
         let byId = lookup?.itemById;
         if (byId) {
-            return idList.map(x => {
+            return <>{idList.map(x => {
                 var z = byId[x];
-                return ctx.escape(z == null ? x : z.FullName);
-            }).join(", ");
+                return z == null ? x : z.FullName;
+            }).join(", ")}</>;
         }
 
         promise ??= EmployeeRow.getLookupAsync().then(l => {
@@ -34,6 +33,6 @@ export class EmployeeListFormatter implements Formatter {
             }
         }).catch(() => promise = null);
 
-        return `<i class="${faIcon("spinner")}"></i>`;
+        return (<i class={faIcon("spinner")}></i>);
     }
 }

src/Serenity.Demo.Northwind/Modules/Employee/EmployeeFormatter.ts → src/Serenity.Demo.Northwind/Modules/Employee/EmployeeFormatter.tsx

@@ -1,6 +1,5 @@
-import { Decorators, Formatter, IInitializeColumn, ISlickFormatter, faIcon } from "@serenity-is/corelib";
-import { htmlEncode, isTrimmedEmpty } from "@serenity-is/corelib";
-import { Column, FormatterContext } from "@serenity-is/sleekgrid";
+import { Decorators, Formatter, IInitializeColumn, faIcon, isTrimmedEmpty } from "@serenity-is/corelib";
+import { Column, FormatterContext, FormatterResult } from "@serenity-is/sleekgrid";
 import { Gender } from "../ServerTypes/Demo";
 
 @Decorators.registerFormatter('Serenity.Demo.Northwind.EmployeeFormatter', [IInitializeColumn])
@@ -9,14 +8,12 @@ export class EmployeeFormatter implements Formatter {
         this.props ??= {};
     }
 
-    format(ctx: FormatterContext) {
-        let text = ctx.escape();
-
+    format(ctx: FormatterContext): FormatterResult {
         if (!this.props.genderProperty || isTrimmedEmpty(ctx.value))
-            return text;
+            return <>{ctx.value}</>
 
         let female = ctx.item[this.props.genderProperty] === Gender.Female;
-        return `<i class="${faIcon(female ? "female" : "male", female ? "danger" : "primary")} + ' text-opacity-75"></i>` + text;
+        return <><i class={[faIcon(female ? "female" : "male", female ? "danger" : "primary"), "text-opacity-75"]}></i> {ctx.value}</>;
     }
 
     public initializeColumn(column: Column) {

src/Serenity.Demo.Northwind/Modules/Order/OrderGrid.ts → src/Serenity.Demo.Northwind/Modules/Order/OrderGrid.tsx

@@ -1,15 +1,13 @@
-import { OrderColumns, OrderListRequest, OrderRow, OrderService, ProductRow } from "../ServerTypes/Demo";
 import { Decorators, EntityGrid, EnumEditor, Fluent, LookupEditor, ToolButton, faIcon, toId } from "@serenity-is/corelib";
 import { ExcelExportHelper, PdfExportHelper, ReportHelper } from "@serenity-is/extensions";
+import { OrderColumns, OrderListRequest, OrderRow, OrderService, ProductRow } from "../ServerTypes/Demo";
 import { OrderDialog } from "./OrderDialog";
 
-const fld = OrderRow.Fields;
-
 @Decorators.registerClass('Serenity.Demo.Northwind.OrderGrid')
 @Decorators.filterable()
-export class OrderGrid<P={}> extends EntityGrid<OrderRow, P> {
+export class OrderGrid<P = {}> extends EntityGrid<OrderRow, P> {
     protected getColumnsKey() { return OrderColumns.columnsKey; }
-    protected getDialogType() { return <any>OrderDialog; }
+    protected getDialogType() { return OrderDialog as any; }
     protected getRowDefinition() { return OrderRow; }
     protected getService() { return OrderService.baseUrl; }
 
@@ -38,7 +36,7 @@ export class OrderGrid<P={}> extends EntityGrid<OrderRow, P> {
     protected createQuickFilters() {
         super.createQuickFilters();
 
-        this.shippingStateFilter = this.findQuickFilter(EnumEditor, fld.ShippingState);
+        this.shippingStateFilter = this.findQuickFilter(EnumEditor, OrderRow.Fields.ShippingState);
     }
 
     protected getButtons(): ToolButton[] {
@@ -67,7 +65,7 @@ export class OrderGrid<P={}> extends EntityGrid<OrderRow, P> {
             field: null,
             name: '',
             cssClass: 'align-center',
-            format: _ => `<a class="inline-action" data-action="print-invoice" title="invoice"><i class="${faIcon("file-pdf", "red")}"></i></a>`,
+            format: () => <a class="inline-action" data-action="print-invoice" title="invoice"><i class={faIcon("file-pdf", "red")}></i></a>,
             width: 36,
             minWidth: 36,
             maxWidth: 36
@@ -103,7 +101,7 @@ export class OrderGrid<P={}> extends EntityGrid<OrderRow, P> {
 
     protected addButtonClick() {
         var eq = this.view.params.EqualityFilter;
-        this.editItem(<OrderRow>{
+        this.editItem({
             CustomerID: eq ? eq.CustomerID : null
         });
     }

src/Serenity.Demo.Northwind/Modules/Shipper/ShipperFormatter.ts → src/Serenity.Demo.Northwind/Modules/Shipper/ShipperFormatter.tsx

@@ -5,10 +5,11 @@ import { FormatterContext } from "@serenity-is/sleekgrid";
 export class ShipperFormatter implements Formatter {
     format(ctx: FormatterContext) {
 
-        if (!ctx.value)
-            return ctx.escape();
+        if (!ctx.value) {
+            return <>{ctx.value}</>;
+        }
 
-        return `<i class="text-info ${faIcon(ctx.value == "Speedy Express" ? "plane" :
-            (ctx.value == "Federal Shipping" ? "ship" : "truck"))}  text-opacity-75"></i> ${ctx.escape()}`;
+        return (<><i class={["text-info", faIcon(ctx.value == "Speedy Express" ? "plane" : 
+            (ctx.value == "Federal Shipping" ? "ship" : "truck")), "text-opacity-75"]} /> {ctx.value}</>);
     }
 }