Merge branch '25_2' into 25_2_check_angular_21_in_demos_v2

Author: GoodDayForSurf

apps/demos/Demos/DataGrid/AIColumns/React/App.tsx

@@ -0,0 +1,121 @@
+import React, { useCallback, useState } from 'react';
+import DataGrid, {
+  Column,
+  Paging,
+  Grouping,
+  Ai,
+} from 'devextreme-react/data-grid';
+import Popup, { Position } from 'devextreme-react/popup';
+import { vehicles } from './data.ts';
+import { aiIntegration } from './service.ts';
+import Trademark from './Trademark.tsx';
+import Category from './Category.tsx';
+import LicenseInfo from './LicenseInfo.tsx';
+import { type Vehicle } from './types.ts';
+
+const onAIColumnRequestCreating = (e) => {
+  e.data = e.data.map((item) => ({
+    ID: item.ID,
+    TrademarkName: item.TrademarkName,
+    Name: item.Name,
+    Modification: item.Modification,
+  }));
+};
+
+export default function App() {
+  const [currentVehicle, setCurrentVehicle] = useState<Vehicle | null>(null);
+
+  const showInfo = useCallback((vehicle: Vehicle) => {
+    setCurrentVehicle(vehicle);
+  }, []);
+
+  const hideInfo = useCallback(() => {
+    setCurrentVehicle(null);
+  }, []);
+
+  return (
+    <React.Fragment>
+      <DataGrid
+        dataSource={vehicles}
+        showBorders={true}
+        keyExpr="ID"
+        aiIntegration={aiIntegration}
+        onAIColumnRequestCreating={onAIColumnRequestCreating}
+      >
+        <Paging
+          enabled={true}
+          pageSize={10}
+        />
+        <Grouping contextMenuEnabled={false} />
+        <Column
+          caption="Trademark"
+          width={200}
+          dataField="TrademarkName"
+          cellRender={(cellData) =>
+            <Trademark
+              vehicle={cellData.data}
+              onShowInfo={showInfo}
+            />
+          }
+        />
+        <Column
+          dataField="Price"
+          alignment="left"
+          format="currency"
+          width={100}
+        />
+        <Column
+          caption="Category"
+          minWidth={180}
+          cellRender={Category}
+        />
+        <Column
+          dataField="Modification"
+          width={180}
+        />
+        <Column
+          dataField="Horsepower"
+          width={140}
+        />
+        <Column
+          dataField="BodyStyleName"
+          caption="Body Style"
+          width={180}
+        />
+        <Column
+          name="AI Column"
+          caption="AI Column"
+          type="ai"
+          width={200}
+          fixed={true}
+          fixedPosition="right"
+          cssClass="ai__cell"
+        >
+          <Ai
+            mode="auto"
+            noDataText="No data"
+            prompt="Identify the country where this vehicle model is originally manufactured or developed, based on its brand, model, and specifications."
+          />
+        </Column>
+      </DataGrid>
+      <Popup
+        width={360}
+        height={260}
+        visible={Boolean(currentVehicle)}
+        dragEnabled={false}
+        hideOnOutsideClick={true}
+        title="Image Info"
+        onHiding={hideInfo}
+        contentRender={() =>
+          <LicenseInfo vehicle={currentVehicle} />
+        }
+      >
+        <Position
+          at="center"
+          my="center"
+          collision="fit"
+        />
+      </Popup>
+    </React.Fragment>
+  );
+}

apps/demos/Demos/DataGrid/AIColumns/React/Category.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { type Vehicle } from './types';
+import { type DataGridTypes } from 'devextreme-react/data-grid';
+
+export default function Category(props: DataGridTypes.ColumnCellTemplateData<Vehicle>) {
+  return <div className="category__wrapper">{props.data.CategoryName}</div>;
+}

apps/demos/Demos/DataGrid/AIColumns/React/LicenseInfo.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { type Vehicle } from './types';
+
+type Props = {
+  vehicle: Vehicle | null;
+};
+
+const LicenseInfo = ({ vehicle }: Props) => {
+  if (!vehicle) {
+    return null;
+  }
+
+  const { LicenseName, Author, Source, Edits } = vehicle;
+  const vehicleLink = `https://${Source}`;
+  return (
+    <div>
+      <p><b>Image licensed under: </b> <span>{LicenseName}</span></p>
+      <p><b>Author: </b> <span>{Author}</span></p>
+      <p>
+        <b>Source link: </b>
+        <a
+          href={vehicleLink}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {vehicleLink}
+        </a>
+      </p>
+      <p><b>Edits: </b> <span>{Edits}</span></p>
+    </div>
+  );
+};
+
+export default LicenseInfo;

apps/demos/Demos/DataGrid/AIColumns/React/Trademark.tsx

@@ -0,0 +1,39 @@
+import React, { useCallback } from 'react';
+import { type Vehicle } from './types';
+
+type TrademarkProps = {
+  vehicle: Vehicle;
+  onShowInfo: (vehicle: Vehicle) => void;
+};
+
+export default function Trademark({ vehicle, onShowInfo }: TrademarkProps) {
+  const { ID, TrademarkName, Name } = vehicle;
+
+  const onKeyDown = useCallback((event: React.KeyboardEvent<HTMLImageElement>) => {
+    if (event.key === 'Enter') {
+      onShowInfo(vehicle);
+    }
+  }, [onShowInfo, vehicle]);
+
+  return (
+    <div className="trademark__wrapper">
+      <div className="trademark__img-wrapper">
+        <img
+          className="trademark__img"
+          src={`../../../../images/vehicles/image_${ID}.png`}
+          alt={`${TrademarkName} ${Name}`}
+          tabIndex={0}
+          onClick={() => onShowInfo(vehicle)}
+          role="button"
+          onKeyDown={onKeyDown}
+          aria-haspopup="dialog"
+          aria-label={`${TrademarkName} ${Name} - press Enter for image info`}
+        />
+      </div>
+      <div>
+        <div className="trademark__text trademark__text--title">{TrademarkName}</div>
+        <div className="trademark__text trademark__text--subtitle">{Name}</div>
+      </div>
+    </div>
+  );
+}