Merge branch '23_2' into rm-typestat

DevExpress · Nov 9, 2023 · c2f398b · c2f398b
2 parents 8a564c4 + 0eba3b2
commit c2f398b
Show file tree

Hide file tree

Showing 198 changed files with 3,980 additions and 400 deletions.
diff --git a/...logsAndNotificationsOverview/React/App.js → ...ogsAndNotificationsOverview/React/App.tsx b/...logsAndNotificationsOverview/React/App.js → ...ogsAndNotificationsOverview/React/App.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import notify from 'devextreme/ui/notify';
 import Button from 'devextreme-react/button';
 import Popup from 'devextreme-react/popup';
-import { housesSource } from './data.js';
-import House from './House.js';
+import { housesSource } from './data.ts';
+import { House } from './House.tsx';
 
 const ADD_TO_FAVORITES = 'Add to Favorites';
 const REMOVE_FROM_FAVORITES = 'Remove from Favorites';

diff --git a/JSDemos/Demos/Common/DialogsAndNotificationsOverview/React/House.js b/JSDemos/Demos/Common/DialogsAndNotificationsOverview/React/House.js
diff --git a/JSDemos/Demos/Common/DialogsAndNotificationsOverview/React/House.tsx b/JSDemos/Demos/Common/DialogsAndNotificationsOverview/React/House.tsx
@@ -0,0 +1,93 @@
+import React from 'react';
+
+import Popover, { IPositionProps } from 'devextreme-react/popover';
+
+const formatCurrency = new Intl.NumberFormat('en-US', {
+  style: 'currency',
+  currency: 'USD',
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 2,
+}).format;
+
+const position: IPositionProps = {
+  offset: '0, 2',
+  at: 'bottom',
+  my: 'top',
+  collision: 'fit flip',
+};
+
+interface HouseProps {
+  house: {
+    ID: string;
+    Favorite: boolean;
+    Address: string;
+    City: string;
+    State: string;
+    ZipCode: string;
+    Beds: string;
+    Baths: string;
+    HouseSize: number;
+    LotSize: string;
+    Price: number;
+    Coordinates: string;
+    Features: string;
+    Image: string;
+    Agent: {
+      Name: string;
+      Picture: string;
+      Phone: string;
+    }
+  };
+  show: any;
+  key: string;
+}
+
+export function House(props: HouseProps) {
+  const renderAgentDetails = React.useCallback(() => {
+    const agent = props.house.Agent;
+    return (
+      <div className="agent-details">
+        <img alt={agent.Name} src={agent.Picture} />
+        <div>
+          <div className="name large-text">{agent.Name}</div>
+          <div className="phone">Tel: {agent.Phone}</div>
+        </div>
+      </div>
+    );
+  }, [props.house.Agent]);
+
+  const show = React.useCallback(() => {
+    props.show(props.house);
+  }, [props]);
+
+  return (
+    <div>
+      <div onClick={show} className="item-content">
+
+        <img alt={props.house.Address} src={props.house.Image} />
+
+        <div className="item-options">
+          <div>
+            <div className="address">{props.house.Address}</div>
+            <div className="price large-text">{formatCurrency(props.house.Price)}</div>
+            <div className="agent">
+              <div id={`house${props.house.ID}`}>
+                <img alt="Listing agent" src="../../../../images/icon-agent.svg" />
+                                    Listing agent
+              </div>
+            </div>
+          </div>
+        </div>
+        <Popover
+          showEvent="mouseenter"
+          hideEvent="mouseleave"
+          position={position}
+          target={`#house${props.house.ID}`}
+          width={260}
+          contentRender={renderAgentDetails}
+        />
+      </div>
+    </div>
+  );
+}
+
diff --git a/...ogsAndNotificationsOverview/React/data.js → ...ogsAndNotificationsOverview/React/data.ts b/...ogsAndNotificationsOverview/React/data.js → ...ogsAndNotificationsOverview/React/data.ts
diff --git a/JSDemos/Demos/Common/DialogsAndNotificationsOverview/React/index.html b/JSDemos/Demos/Common/DialogsAndNotificationsOverview/React/index.html
@@ -12,7 +12,7 @@
     <script src="../../../../../node_modules/systemjs/dist/system.js"></script>
     <script type="text/javascript" src="config.js"></script>
     <script type="text/javascript">
-      System.import("./index.js");
+      System.import("./index.tsx");
     </script>
   </head>
 

diff --git a/.../Demos/HtmlEditor/Mentions/React/index.js → ...sAndNotificationsOverview/React/index.tsx b/.../Demos/HtmlEditor/Mentions/React/index.js → ...sAndNotificationsOverview/React/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import App from './App.js';
+import App from './App.tsx';
 
 ReactDOM.render(
   <App />,

diff --git a/JSDemos/Demos/Common/DialogsAndNotificationsOverview/ReactJs/App.js b/JSDemos/Demos/Common/DialogsAndNotificationsOverview/ReactJs/App.js
@@ -0,0 +1,99 @@
+import React from 'react';
+import notify from 'devextreme/ui/notify';
+import Button from 'devextreme-react/button';
+import Popup from 'devextreme-react/popup';
+import { housesSource } from './data.js';
+import { House } from './House.js';
+
+const ADD_TO_FAVORITES = 'Add to Favorites';
+const REMOVE_FROM_FAVORITES = 'Remove from Favorites';
+const formatCurrency = new Intl.NumberFormat('en-US', {
+  style: 'currency',
+  currency: 'USD',
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 2,
+}).format;
+const favButtonAttrs = {
+  class: 'favorites',
+};
+export default function App() {
+  const [currentHouse, setCurrentHouse] = React.useState(housesSource[0]);
+  const [popupVisible, setPopupVisible] = React.useState(false);
+  const renderPopup = React.useCallback(
+    () => (
+      <div className="popup-property-details">
+        <div className="large-text">{formatCurrency(currentHouse.Price)}</div>
+        <div className="opacity">
+          {currentHouse.Address}, {currentHouse.City}, {currentHouse.State}
+        </div>
+        <Button
+          icon="favorites"
+          text={currentHouse.Favorite ? REMOVE_FROM_FAVORITES : ADD_TO_FAVORITES}
+          width={260}
+          height={44}
+          elementAttr={favButtonAttrs}
+          onClick={changeFavoriteState}
+        />
+        <div className="images">
+          <img
+            alt={currentHouse.Address}
+            src={currentHouse.Image}
+          />
+          <img
+            alt={currentHouse.Address}
+            src={currentHouse.Image.replace('.jpg', 'b.jpg')}
+          />
+        </div>
+        <div>{currentHouse.Features}</div>
+      </div>
+    ),
+    [currentHouse],
+  );
+  const showHouse = React.useCallback(
+    (house) => {
+      setCurrentHouse(house);
+      setPopupVisible(true);
+    },
+    [setCurrentHouse, setPopupVisible],
+  );
+  const handlePopupHidden = React.useCallback(() => {
+    setPopupVisible(false);
+  }, [setPopupVisible]);
+  const changeFavoriteState = React.useCallback(() => {
+    const updatedHouse = { ...currentHouse };
+    updatedHouse.Favorite = !updatedHouse.Favorite;
+    setCurrentHouse(updatedHouse);
+    notify(
+      {
+        message: `This item has been ${
+          updatedHouse.Favorite ? 'added to' : 'removed from'
+        } the Favorites list!`,
+        width: 450,
+      },
+      updatedHouse.Favorite ? 'success' : 'error',
+      2000,
+    );
+  }, [currentHouse, setCurrentHouse]);
+  return (
+    <div className="images">
+      {housesSource.map((h) => (
+        <House
+          house={h}
+          show={showHouse}
+          key={h.ID}
+        />
+      ))}
+      <Popup
+        width={660}
+        height={540}
+        showTitle={true}
+        title={currentHouse.Address}
+        dragEnabled={false}
+        hideOnOutsideClick={true}
+        visible={popupVisible}
+        onHiding={handlePopupHidden}
+        contentRender={renderPopup}
+      />
+    </div>
+  );
+}
diff --git a/JSDemos/Demos/Common/DialogsAndNotificationsOverview/ReactJs/House.js b/JSDemos/Demos/Common/DialogsAndNotificationsOverview/ReactJs/House.js
@@ -0,0 +1,72 @@
+import React from 'react';
+import Popover from 'devextreme-react/popover';
+
+const formatCurrency = new Intl.NumberFormat('en-US', {
+  style: 'currency',
+  currency: 'USD',
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 2,
+}).format;
+const position = {
+  offset: '0, 2',
+  at: 'bottom',
+  my: 'top',
+  collision: 'fit flip',
+};
+export function House(props) {
+  const renderAgentDetails = React.useCallback(() => {
+    const agent = props.house.Agent;
+    return (
+      <div className="agent-details">
+        <img
+          alt={agent.Name}
+          src={agent.Picture}
+        />
+        <div>
+          <div className="name large-text">{agent.Name}</div>
+          <div className="phone">Tel: {agent.Phone}</div>
+        </div>
+      </div>
+    );
+  }, [props.house.Agent]);
+  const show = React.useCallback(() => {
+    props.show(props.house);
+  }, [props]);
+  return (
+    <div>
+      <div
+        onClick={show}
+        className="item-content"
+      >
+        <img
+          alt={props.house.Address}
+          src={props.house.Image}
+        />
+
+        <div className="item-options">
+          <div>
+            <div className="address">{props.house.Address}</div>
+            <div className="price large-text">{formatCurrency(props.house.Price)}</div>
+            <div className="agent">
+              <div id={`house${props.house.ID}`}>
+                <img
+                  alt="Listing agent"
+                  src="../../../../images/icon-agent.svg"
+                />
+                Listing agent
+              </div>
+            </div>
+          </div>
+        </div>
+        <Popover
+          showEvent="mouseenter"
+          hideEvent="mouseleave"
+          position={position}
+          target={`#house${props.house.ID}`}
+          width={260}
+          contentRender={renderAgentDetails}
+        />
+      </div>
+    </div>
+  );
+}