Convert react Maps Demos to TS

DevExpress · Oct 11, 2023 · 63e40c1 · 63e40c1
1 parent 2e43d64
commit 63e40c1
Show file tree

Hide file tree

Showing 191 changed files with 8,687 additions and 324 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -305,6 +305,7 @@ module.exports = {
       project: './tsconfig.json',
       'createDefaultProgram': true,
       'ecmaVersion': 6,
+      'operator-linebreak': ['error', 'after'],
     },
     rules: {
       // TODO consider this rules

diff --git a/JSDemos/Demos/Map/Markers/React/App.js → JSDemos/Demos/Map/Markers/React/App.tsx b/JSDemos/Demos/Map/Markers/React/App.js → JSDemos/Demos/Map/Markers/React/App.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import Map from 'devextreme-react/map';
 import Button from 'devextreme-react/button';
 import CheckBox from 'devextreme-react/check-box';
-import { markersData } from './data.js';
+import { markersData } from './data.ts';
 
 const markerUrl = 'https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/maps/map-marker.png';
 

diff --git a/JSDemos/Demos/Map/Markers/React/data.js → JSDemos/Demos/Map/Markers/React/data.ts b/JSDemos/Demos/Map/Markers/React/data.js → JSDemos/Demos/Map/Markers/React/data.ts
diff --git a/JSDemos/Demos/Map/Markers/React/index.html b/JSDemos/Demos/Map/Markers/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/...emos/Map/ProvidersAndTypes/React/index.js → JSDemos/Demos/Map/Markers/React/index.tsx b/...emos/Map/ProvidersAndTypes/React/index.js → JSDemos/Demos/Map/Markers/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/Map/Markers/ReactJs/App.js b/JSDemos/Demos/Map/Markers/ReactJs/App.js
@@ -0,0 +1,61 @@
+import React from 'react';
+import Map from 'devextreme-react/map';
+import Button from 'devextreme-react/button';
+import CheckBox from 'devextreme-react/check-box';
+import { markersData } from './data.js';
+
+const markerUrl = 'https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/maps/map-marker.png';
+const apiKey = {
+  bing: 'Aq3LKP2BOmzWY47TZoT1YdieypN_rB6RY9FqBfx-MDCKjvvWBbT68R51xwbL-AqC',
+};
+const App = () => {
+  const [currentMarkersData, setCurrentMarkersData] = React.useState(markersData);
+  const [currentMarkerUrl, setCurrentMarkerUrl] = React.useState(markerUrl);
+  const onCustomMarkersChange = React.useCallback(
+    (value) => {
+      setCurrentMarkerUrl(value ? currentMarkerUrl : null);
+      setCurrentMarkersData(markersData);
+    },
+    [currentMarkerUrl, setCurrentMarkerUrl, setCurrentMarkersData],
+  );
+  const showTooltips = React.useCallback(() => {
+    setCurrentMarkersData(
+      currentMarkersData.map((item) => {
+        const newItem = JSON.parse(JSON.stringify(item));
+        newItem.tooltip.isShown = true;
+        return newItem;
+      }),
+    );
+  }, [currentMarkersData, setCurrentMarkersData]);
+  return (
+    <React.Fragment>
+      <Map
+        defaultZoom={11}
+        height={440}
+        width="100%"
+        controls={true}
+        markerIconSrc={currentMarkerUrl}
+        markers={currentMarkersData}
+        provider="bing"
+        apiKey={apiKey}
+      ></Map>
+      <div className="options">
+        <div className="caption">Options</div>
+        <div className="option">
+          <CheckBox
+            defaultValue={true}
+            text="Use custom marker icons"
+            onValueChange={onCustomMarkersChange}
+          />
+        </div>
+        <div className="option">
+          <Button
+            text="Show all tooltips"
+            onClick={showTooltips}
+          />
+        </div>
+      </div>
+    </React.Fragment>
+  );
+};
+export default App;
diff --git a/JSDemos/Demos/Map/Markers/ReactJs/data.js b/JSDemos/Demos/Map/Markers/ReactJs/data.js
@@ -0,0 +1,26 @@
+export const markersData = [
+  {
+    location: [40.755833, -73.986389],
+    tooltip: {
+      text: 'Times Square',
+    },
+  },
+  {
+    location: '40.7825, -73.966111',
+    tooltip: {
+      text: 'Central Park',
+    },
+  },
+  {
+    location: { lat: 40.753889, lng: -73.981389 },
+    tooltip: {
+      text: 'Fifth Avenue',
+    },
+  },
+  {
+    location: 'Brooklyn Bridge,New York,NY',
+    tooltip: {
+      text: 'Brooklyn Bridge',
+    },
+  },
+];
diff --git a/JSDemos/Demos/Map/Markers/ReactJs/index.html b/JSDemos/Demos/Map/Markers/ReactJs/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>DevExtreme Demo</title>
+    <meta
+      http-equiv="X-UA-Compatible"
+      content="IE=edge"
+    />
+    <meta
+      http-equiv="Content-Type"
+      content="text/html; charset=utf-8"
+    />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../../../../node_modules/devextreme-dist/css/dx.light.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="styles.css"
+    />
+
+    <script src="../../../../../node_modules/core-js/client/shim.min.js"></script>
+    <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");
+    </script>
+  </head>
+
+  <body class="dx-viewport">
+    <div class="demo-container">
+      <div id="app"></div>
+    </div>
+  </body>
+</html>
diff --git a/JSDemos/Demos/Map/Markers/ReactJs/index.js b/JSDemos/Demos/Map/Markers/ReactJs/index.js
@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App.js';
+
+ReactDOM.render(<App />, document.getElementById('app'));
diff --git a/JSDemos/Demos/Map/Markers/ReactJs/styles.css b/JSDemos/Demos/Map/Markers/ReactJs/styles.css
@@ -0,0 +1,14 @@
+.options {
+  padding: 20px;
+  background-color: rgba(191, 191, 191, 0.15);
+  margin-top: 20px;
+}
+
+.caption {
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.option {
+  margin-top: 10px;
+}
diff --git a/.../Demos/Map/ProvidersAndTypes/React/App.js → ...Demos/Map/ProvidersAndTypes/React/App.tsx b/.../Demos/Map/ProvidersAndTypes/React/App.js → ...Demos/Map/ProvidersAndTypes/React/App.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import Map from 'devextreme-react/map';
 import SelectBox from 'devextreme-react/select-box';
 
-import { mapTypes, mapTypeLabel } from './data.js';
+import { mapTypes, mapTypeLabel } from './data.ts';
 
 const apiKey = {
   bing: 'Aq3LKP2BOmzWY47TZoT1YdieypN_rB6RY9FqBfx-MDCKjvvWBbT68R51xwbL-AqC',

diff --git a/...Demos/Map/ProvidersAndTypes/React/data.js → ...Demos/Map/ProvidersAndTypes/React/data.ts b/...Demos/Map/ProvidersAndTypes/React/data.js → ...Demos/Map/ProvidersAndTypes/React/data.ts
@@ -1,4 +1,6 @@
-export const mapTypes = [{
+import { MapType } from 'devextreme/ui/map';
+
+export const mapTypes: { key: MapType, name: string }[] = [{
   key: 'roadmap',
   name: 'Road Map',
 }, {

diff --git a/JSDemos/Demos/Map/ProvidersAndTypes/React/index.html b/JSDemos/Demos/Map/ProvidersAndTypes/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/JSDemos/Demos/Map/Markers/React/index.js → ...mos/Map/ProvidersAndTypes/React/index.tsx b/JSDemos/Demos/Map/Markers/React/index.js → ...mos/Map/ProvidersAndTypes/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/Map/ProvidersAndTypes/ReactJs/App.js b/JSDemos/Demos/Map/ProvidersAndTypes/ReactJs/App.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import Map from 'devextreme-react/map';
+import SelectBox from 'devextreme-react/select-box';
+import { mapTypes, mapTypeLabel } from './data.js';
+
+const apiKey = {
+  bing: 'Aq3LKP2BOmzWY47TZoT1YdieypN_rB6RY9FqBfx-MDCKjvvWBbT68R51xwbL-AqC',
+};
+const App = () => {
+  const [mapTypeValue, setMapTypeValue] = React.useState(mapTypes[0].key);
+  const onMapTypeChange = React.useCallback(
+    (value) => {
+      setMapTypeValue(value);
+    },
+    [setMapTypeValue],
+  );
+  return (
+    <div>
+      <Map
+        defaultCenter="40.7061, -73.9969"
+        defaultZoom={14}
+        height={400}
+        width="100%"
+        provider="bing"
+        type={mapTypeValue}
+        apiKey={apiKey}
+      ></Map>
+      <div className="options">
+        <div className="caption">Options</div>
+        <div className="option">
+          <span>Map Type</span>
+          <SelectBox
+            value={mapTypeValue}
+            onValueChange={onMapTypeChange}
+            dataSource={mapTypes}
+            inputAttr={mapTypeLabel}
+            displayExpr="name"
+            valueExpr="key"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+export default App;
diff --git a/JSDemos/Demos/Map/ProvidersAndTypes/ReactJs/data.js b/JSDemos/Demos/Map/ProvidersAndTypes/ReactJs/data.js
@@ -0,0 +1,15 @@
+export const mapTypes = [
+  {
+    key: 'roadmap',
+    name: 'Road Map',
+  },
+  {
+    key: 'satellite',
+    name: 'Satellite (Photographic) Map',
+  },
+  {
+    key: 'hybrid',
+    name: 'Hybrid Map',
+  },
+];
+export const mapTypeLabel = { 'aria-label': 'Map Type' };
diff --git a/JSDemos/Demos/Map/ProvidersAndTypes/ReactJs/index.html b/JSDemos/Demos/Map/ProvidersAndTypes/ReactJs/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>DevExtreme Demo</title>
+    <meta
+      http-equiv="X-UA-Compatible"
+      content="IE=edge"
+    />
+    <meta
+      http-equiv="Content-Type"
+      content="text/html; charset=utf-8"
+    />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../../../../node_modules/devextreme-dist/css/dx.light.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="styles.css"
+    />
+
+    <script src="../../../../../node_modules/core-js/client/shim.min.js"></script>
+    <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");
+    </script>
+  </head>
+
+  <body class="dx-viewport">
+    <div class="demo-container">
+      <div id="app"></div>
+    </div>
+  </body>
+</html>
diff --git a/JSDemos/Demos/Map/ProvidersAndTypes/ReactJs/index.js b/JSDemos/Demos/Map/ProvidersAndTypes/ReactJs/index.js
@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App.js';
+
+ReactDOM.render(<App />, document.getElementById('app'));
diff --git a/JSDemos/Demos/Map/ProvidersAndTypes/ReactJs/styles.css b/JSDemos/Demos/Map/ProvidersAndTypes/ReactJs/styles.css
@@ -0,0 +1,28 @@
+.options {
+  padding: 20px;
+  background-color: rgba(191, 191, 191, 0.15);
+  margin-top: 20px;
+}
+
+.caption {
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.option {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+}
+
+.option > span {
+  display: inline-block;
+  width: 100px;
+}
+
+.option > .dx-selectbox {
+  width: 100%;
+  max-width: 350px;
+  display: inline-block;
+  vertical-align: middle;
+}
diff --git a/JSDemos/Demos/Map/Routes/React/App.js → JSDemos/Demos/Map/Routes/React/App.tsx b/JSDemos/Demos/Map/Routes/React/App.js → JSDemos/Demos/Map/Routes/React/App.tsx
@@ -3,7 +3,7 @@ import Map from 'devextreme-react/map';
 import SelectBox from 'devextreme-react/select-box';
 import {
   markersData, routesData, modeLabel, colorLabel,
-} from './data.js';
+} from './data.ts';
 
 const modes = ['driving', 'walking'];
 const routeColors = ['blue', 'green', 'red'];

diff --git a/JSDemos/Demos/Map/Routes/React/data.js → JSDemos/Demos/Map/Routes/React/data.ts b/JSDemos/Demos/Map/Routes/React/data.js → JSDemos/Demos/Map/Routes/React/data.ts
@@ -1,3 +1,5 @@
+import { IRouteProps } from 'devextreme-react/map';
+
 export const markersData = [{
   location: [40.755833, -73.986389],
   tooltip: {
@@ -20,16 +22,14 @@ export const markersData = [{
   },
 }];
 
-export const routesData = [{
+export const routesData: IRouteProps[] = [{
   weight: 6,
   color: 'blue',
   opacity: 0.5,
-  mode: '',
   locations: [
     [40.782500, -73.966111],
     [40.755833, -73.986389],
     [40.753889, -73.981389],
-    'Brooklyn Bridge,New York,NY',
   ],
 }];