From d5c30e14707dfbe21ef3bd27e0ad2e5e2277e0d9 Mon Sep 17 00:00:00 2001
From: volkanceylan
Date: Sun, 11 Aug 2024 00:48:12 +0300
Subject: [PATCH] Use jsx-dom for formatters
---
.../Grids/CustomLinksInGrid/Index.cshtml | 2 +-
.../Grids/InlineActionButtons/Index.cshtml | 2 +-
.../Grids/InlineImageInGrid/Index.cshtml | 2 +-
...ksInGridPage.ts => CustomLinksInGridPage.tsx} | 8 ++++----
...uttonsPage.ts => InlineActionButtonsPage.tsx} | 4 ++--
...geInGridPage.ts => InlineImageInGridPage.tsx} | 16 ++++++----------
...istFormatter.ts => EmployeeListFormatter.tsx} | 15 +++++++--------
...mployeeFormatter.ts => EmployeeFormatter.tsx} | 13 +++++--------
.../Order/{OrderGrid.ts => OrderGrid.tsx} | 14 ++++++--------
...{ShipperFormatter.ts => ShipperFormatter.tsx} | 9 +++++----
10 files changed, 38 insertions(+), 47 deletions(-)
rename src/Serenity.Demo.BasicSamples/Modules/Grids/CustomLinksInGrid/{CustomLinksInGridPage.ts => CustomLinksInGridPage.tsx} (94%)
rename src/Serenity.Demo.BasicSamples/Modules/Grids/InlineActionButtons/{InlineActionButtonsPage.ts => InlineActionButtonsPage.tsx} (91%)
rename src/Serenity.Demo.BasicSamples/Modules/Grids/InlineImageInGrid/{InlineImageInGridPage.ts => InlineImageInGridPage.tsx} (78%)
rename src/Serenity.Demo.Northwind/Modules/Customer/{EmployeeListFormatter.ts => EmployeeListFormatter.tsx} (66%)
rename src/Serenity.Demo.Northwind/Modules/Employee/{EmployeeFormatter.ts => EmployeeFormatter.tsx} (59%)
rename src/Serenity.Demo.Northwind/Modules/Order/{OrderGrid.ts => OrderGrid.tsx} (89%)
rename src/Serenity.Demo.Northwind/Modules/Shipper/{ShipperFormatter.ts => ShipperFormatter.tsx} (63%)
diff --git a/src/Serenity.Demo.BasicSamples/Areas/Serenity.Demo.BasicSamples/Grids/CustomLinksInGrid/Index.cshtml b/src/Serenity.Demo.BasicSamples/Areas/Serenity.Demo.BasicSamples/Grids/CustomLinksInGrid/Index.cshtml
index 0409b9cc..d05b80bc 100644
--- a/src/Serenity.Demo.BasicSamples/Areas/Serenity.Demo.BasicSamples/Grids/CustomLinksInGrid/Index.cshtml
+++ b/src/Serenity.Demo.BasicSamples/Areas/Serenity.Demo.BasicSamples/Grids/CustomLinksInGrid/Index.cshtml
@@ -21,7 +21,7 @@
Source Files:
@Html.BasicSamplesSourceFile("Index.cshtml"),
- @Html.BasicSamplesSourceFile("CustomLinksInGridPage.ts")
+ @Html.BasicSamplesSourceFile("CustomLinksInGridPage.tsx")
diff --git a/src/Serenity.Demo.BasicSamples/Areas/Serenity.Demo.BasicSamples/Grids/InlineActionButtons/Index.cshtml b/src/Serenity.Demo.BasicSamples/Areas/Serenity.Demo.BasicSamples/Grids/InlineActionButtons/Index.cshtml
index 80fc18bc..830632be 100644
--- a/src/Serenity.Demo.BasicSamples/Areas/Serenity.Demo.BasicSamples/Grids/InlineActionButtons/Index.cshtml
+++ b/src/Serenity.Demo.BasicSamples/Areas/Serenity.Demo.BasicSamples/Grids/InlineActionButtons/Index.cshtml
@@ -15,7 +15,7 @@
Source Files:
@Html.BasicSamplesSourceFile("Index.cshtml"),
- @Html.BasicSamplesSourceFile("InlineActionButtonsPage.ts")
+ @Html.BasicSamplesSourceFile("InlineActionButtonsPage.tsx")
Here is how to show a product image inline in grid.
If you didn't yet, please upload an image for a product for this demonstration to work.
- {
+ dlg.loadEntityAndOpenDialog({
CustomerID: item.CustomerID
});
}
diff --git a/src/Serenity.Demo.BasicSamples/Modules/Grids/InlineImageInGrid/InlineImageInGridPage.ts b/src/Serenity.Demo.BasicSamples/Modules/Grids/InlineImageInGrid/InlineImageInGridPage.tsx
similarity index 78%
rename from src/Serenity.Demo.BasicSamples/Modules/Grids/InlineImageInGrid/InlineImageInGridPage.ts
rename to src/Serenity.Demo.BasicSamples/Modules/Grids/InlineImageInGrid/InlineImageInGridPage.tsx
index 93a19d7f..6a7e15b4 100644
--- a/src/Serenity.Demo.BasicSamples/Modules/Grids/InlineImageInGrid/InlineImageInGridPage.ts
+++ b/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 `` +
- ``;
+ return
+ ;
}
initializeColumn(column: Column): void {
@@ -43,7 +39,7 @@ export class InlineImageFormatter
export class InlineImageInGrid extends EntityGrid {
protected getColumnsKey() { return InlineImageInGridColumns.columnsKey; }
- protected getDialogType() { return ProductDialog; }
+ protected getDialogType() { return ProductDialog; }
protected getRowDefinition() { return ProductRow; }
protected getService() { return ProductService.baseUrl; }
diff --git a/src/Serenity.Demo.Northwind/Modules/Customer/EmployeeListFormatter.ts b/src/Serenity.Demo.Northwind/Modules/Customer/EmployeeListFormatter.tsx
similarity index 66%
rename from src/Serenity.Demo.Northwind/Modules/Customer/EmployeeListFormatter.ts
rename to src/Serenity.Demo.Northwind/Modules/Customer/EmployeeListFormatter.tsx
index a1a4f95d..c289bf62 100644
--- a/src/Serenity.Demo.Northwind/Modules/Customer/EmployeeListFormatter.ts
+++ b/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;
@@ -9,7 +8,7 @@ let promise: Promise>;
@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)
@@ -17,10 +16,10 @@ export class EmployeeListFormatter implements Formatter {
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 ``;
+ return ();
}
}
diff --git a/src/Serenity.Demo.Northwind/Modules/Employee/EmployeeFormatter.ts b/src/Serenity.Demo.Northwind/Modules/Employee/EmployeeFormatter.tsx
similarity index 59%
rename from src/Serenity.Demo.Northwind/Modules/Employee/EmployeeFormatter.ts
rename to src/Serenity.Demo.Northwind/Modules/Employee/EmployeeFormatter.tsx
index 801f2c02..b16ed1ba 100644
--- a/src/Serenity.Demo.Northwind/Modules/Employee/EmployeeFormatter.ts
+++ b/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 `` + text;
+ return <> {ctx.value}>;
}
public initializeColumn(column: Column) {
diff --git a/src/Serenity.Demo.Northwind/Modules/Order/OrderGrid.ts b/src/Serenity.Demo.Northwind/Modules/Order/OrderGrid.tsx
similarity index 89%
rename from src/Serenity.Demo.Northwind/Modules/Order/OrderGrid.ts
rename to src/Serenity.Demo.Northwind/Modules/Order/OrderGrid.tsx
index 60613802..d13aa5d3 100644
--- a/src/Serenity.Demo.Northwind/Modules/Order/OrderGrid.ts
+++ b/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 extends EntityGrid {
+export class OrderGrid extends EntityGrid {
protected getColumnsKey() { return OrderColumns.columnsKey; }
- protected getDialogType() { return OrderDialog; }
+ protected getDialogType() { return OrderDialog as any; }
protected getRowDefinition() { return OrderRow; }
protected getService() { return OrderService.baseUrl; }
@@ -38,7 +36,7 @@ export class OrderGrid extends EntityGrid {
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 extends EntityGrid {
field: null,
name: '',
cssClass: 'align-center',
- format: _ => ``,
+ format: () => ,
width: 36,
minWidth: 36,
maxWidth: 36
@@ -103,7 +101,7 @@ export class OrderGrid extends EntityGrid {
protected addButtonClick() {
var eq = this.view.params.EqualityFilter;
- this.editItem({
+ this.editItem({
CustomerID: eq ? eq.CustomerID : null
});
}
diff --git a/src/Serenity.Demo.Northwind/Modules/Shipper/ShipperFormatter.ts b/src/Serenity.Demo.Northwind/Modules/Shipper/ShipperFormatter.tsx
similarity index 63%
rename from src/Serenity.Demo.Northwind/Modules/Shipper/ShipperFormatter.ts
rename to src/Serenity.Demo.Northwind/Modules/Shipper/ShipperFormatter.tsx
index 1d477e6b..6ade0b54 100644
--- a/src/Serenity.Demo.Northwind/Modules/Shipper/ShipperFormatter.ts
+++ b/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 ` ${ctx.escape()}`;
+ return (<> {ctx.value}>);
}
}