Navigation: Transfer demos to TS

JSDemos/Demos/Accordion/Overview/React/App.js → JSDemos/Demos/Accordion/Overview/React/App.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import Accordion from 'devextreme-react/accordion';
-import CheckBox from 'devextreme-react/check-box';
-import TagBox from 'devextreme-react/tag-box';
-import Slider, { Tooltip, Label } from 'devextreme-react/slider';
+import Accordion, { AccordionTypes } from 'devextreme-react/accordion';
+import CheckBox, { CheckBoxTypes } from 'devextreme-react/check-box';
+import TagBox, { TagBoxTypes } from 'devextreme-react/tag-box';
+import Slider, { Tooltip, Label, SliderTypes } from 'devextreme-react/slider';
 
-import service from './data.js';
-import CustomTitle from './CustomTitle.js';
-import CustomItem from './CustomItem.js';
+import service from './data.ts';
+import CustomTitle from './CustomTitle.tsx';
+import CustomItem from './CustomItem.tsx';
 
 const companyLabel = { 'aria-label': 'Company' };
 const companies = service.getCompanies();
@@ -17,7 +17,7 @@ const App = () => {
   const [collapsible, setCollapsible] = React.useState(false);
   const [animationDuration, setAnimationDuration] = React.useState(300);
 
-  const selectionChanged = React.useCallback((e) => {
+  const selectionChanged = React.useCallback((e: AccordionTypes.SelectionChangedEvent) => {
     let newItems = [...selectedItems];
     e.removedItems.forEach((item) => {
       const index = newItems.indexOf(item);
@@ -31,19 +31,19 @@ const App = () => {
     setSelectedItems(newItems);
   }, [selectedItems, setSelectedItems]);
 
-  const selectedItemsChanged = React.useCallback((e) => {
+  const selectedItemsChanged = React.useCallback((e: TagBoxTypes.ValueChangedEvent) => {
     setSelectedItems(e.value);
   }, [setSelectedItems]);
 
-  const multipleChanged = React.useCallback((e) => {
+  const multipleChanged = React.useCallback((e: CheckBoxTypes.ValueChangedEvent) => {
     setMultiple(e.value);
   }, [setMultiple]);
 
-  const collapsibleChanged = React.useCallback((e) => {
+  const collapsibleChanged = React.useCallback((e: CheckBoxTypes.ValueChangedEvent) => {
     setCollapsible(e.value);
   }, [setCollapsible]);
 
-  const animationDurationChanged = React.useCallback((e) => {
+  const animationDurationChanged = React.useCallback((e: SliderTypes.ValueChangedEvent) => {
     setAnimationDuration(e.value);
   }, [setAnimationDuration]);
 

JSDemos/Demos/Accordion/Overview/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>
 

JSDemos/Demos/Common/NavigationRightToLeftSupport/React/index.js → JSDemos/Demos/Accordion/Overview/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 />,

JSDemos/Demos/Accordion/Overview/ReactJs/App.js

@@ -0,0 +1,116 @@
+import React from 'react';
+import Accordion from 'devextreme-react/accordion';
+import CheckBox from 'devextreme-react/check-box';
+import TagBox from 'devextreme-react/tag-box';
+import Slider, { Tooltip, Label } from 'devextreme-react/slider';
+import service from './data.js';
+import CustomTitle from './CustomTitle.js';
+import CustomItem from './CustomItem.js';
+
+const companyLabel = { 'aria-label': 'Company' };
+const companies = service.getCompanies();
+const App = () => {
+  const [selectedItems, setSelectedItems] = React.useState([companies[0]]);
+  const [multiple, setMultiple] = React.useState(false);
+  const [collapsible, setCollapsible] = React.useState(false);
+  const [animationDuration, setAnimationDuration] = React.useState(300);
+  const selectionChanged = React.useCallback(
+    (e) => {
+      let newItems = [...selectedItems];
+      e.removedItems.forEach((item) => {
+        const index = newItems.indexOf(item);
+        if (index >= 0) {
+          newItems.splice(index, 1);
+        }
+      });
+      if (e.addedItems.length) {
+        newItems = [...newItems, ...e.addedItems];
+      }
+      setSelectedItems(newItems);
+    },
+    [selectedItems, setSelectedItems],
+  );
+  const selectedItemsChanged = React.useCallback(
+    (e) => {
+      setSelectedItems(e.value);
+    },
+    [setSelectedItems],
+  );
+  const multipleChanged = React.useCallback(
+    (e) => {
+      setMultiple(e.value);
+    },
+    [setMultiple],
+  );
+  const collapsibleChanged = React.useCallback(
+    (e) => {
+      setCollapsible(e.value);
+    },
+    [setCollapsible],
+  );
+  const animationDurationChanged = React.useCallback(
+    (e) => {
+      setAnimationDuration(e.value);
+    },
+    [setAnimationDuration],
+  );
+  return (
+    <div id="accordion">
+      <Accordion
+        dataSource={companies}
+        collapsible={collapsible}
+        multiple={multiple}
+        animationDuration={animationDuration}
+        selectedItems={selectedItems}
+        onSelectionChanged={selectionChanged}
+        itemTitleRender={CustomTitle}
+        itemRender={CustomItem}
+        id="accordion-container"
+      />
+      <div className="options">
+        <div className="caption">Options</div>
+        <div className="option">
+          <CheckBox
+            text="Multiple enabled"
+            value={multiple}
+            onValueChanged={multipleChanged}
+          />
+        </div>
+        <div className="option">
+          <CheckBox
+            text="Collapsible enabled"
+            value={collapsible}
+            onValueChanged={collapsibleChanged}
+          />
+        </div>
+        <div className="option">
+          <span>Animation duration</span>
+          <Slider
+            min={0}
+            max={1000}
+            value={animationDuration}
+            onValueChanged={animationDurationChanged}
+          >
+            <Tooltip
+              enabled={true}
+              position="bottom"
+            />
+            <Label visible={true} />
+          </Slider>
+        </div>
+        <div className="option">
+          <span className="caption">Selected Items</span>
+          <TagBox
+            dataSource={companies}
+            displayExpr="CompanyName"
+            value={selectedItems}
+            inputAttr={companyLabel}
+            onValueChanged={selectedItemsChanged}
+            disabled={!multiple}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+export default App;

JSDemos/Demos/Accordion/Overview/ReactJs/CustomItem.js

@@ -0,0 +1,34 @@
+import React from 'react';
+
+export default function CustomItem(data) {
+  return (
+    <div>
+      <div>
+        <p>
+          <b>{data.City} </b>(<span>{data.State}</span>)
+        </p>
+        <p>
+          <span>{data.Zipcode} </span>
+          <span>{data.Address}</span>
+        </p>
+      </div>
+      <div>
+        <p>
+          Phone: <b>{data.Phone}</b>
+        </p>
+        <p>
+          Fax: <b>{data.Fax}</b>
+        </p>
+        <p>
+          Website:{' '}
+          <a
+            href={data.Website}
+            target="_blank"
+          >
+            {data.Website}
+          </a>
+        </p>
+      </div>
+    </div>
+  );
+}

JSDemos/Demos/Accordion/Overview/ReactJs/CustomTitle.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function CustomTitle(data) {
+  return <div className="header">{data.CompanyName}</div>;
+}

JSDemos/Demos/Accordion/Overview/ReactJs/data.js

@@ -0,0 +1,51 @@
+const companies = [
+  {
+    ID: 1,
+    CompanyName: 'Super Mart of the West',
+    Address: '702 SW 8th Street',
+    City: 'Bentonville',
+    State: 'Arkansas',
+    Zipcode: 72716,
+    Phone: '(800) 555-2797',
+    Fax: '(800) 555-2171',
+    Website: 'http://www.nowebsitesupermart.com',
+  },
+  {
+    ID: 2,
+    CompanyName: 'Electronics Depot',
+    Address: '2455 Paces Ferry Road NW',
+    City: 'Atlanta',
+    State: 'Georgia',
+    Zipcode: 30339,
+    Phone: '(800) 595-3232',
+    Fax: '(800) 595-3231',
+    Website: 'http://www.nowebsitedepot.com',
+  },
+  {
+    ID: 3,
+    CompanyName: 'K&S Music',
+    Address: '1000 Nicllet Mall',
+    City: 'Minneapolis',
+    State: 'Minnesota',
+    Zipcode: 55403,
+    Phone: '(612) 304-6073',
+    Fax: '(612) 304-6074',
+    Website: 'http://www.nowebsitemusic.com',
+  },
+  {
+    ID: 4,
+    CompanyName: "Tom's Club",
+    Address: '999 Lake Drive',
+    City: 'Issaquah',
+    State: 'Washington',
+    Zipcode: 98027,
+    Phone: '(800) 955-2292',
+    Fax: '(800) 955-2293',
+    Website: 'http://www.nowebsitetomsclub.com',
+  },
+];
+export default {
+  getCompanies() {
+    return companies;
+  },
+};

JSDemos/Demos/Accordion/Overview/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>

JSDemos/Demos/Accordion/Overview/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'));

JSDemos/Demos/Accordion/Overview/ReactJs/styles.css

@@ -0,0 +1,52 @@
+#accordion {
+  height: 700px;
+}
+
+#accordion .header {
+  font-size: 20px;
+}
+
+#accordion .header,
+#accordion p {
+  margin: 0;
+}
+
+#accordion-container {
+  margin-right: 400px;
+}
+
+.dx-theme-material #accordion .dx-accordion-item-title {
+  display: flex;
+}
+
+.dx-theme-material #accordion .header {
+  align-self: center;
+}
+
+.options {
+  padding: 20px;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 340px;
+  top: 0;
+  background-color: rgba(191, 191, 191, 0.15);
+}
+
+.options > .caption {
+  font-weight: 500;
+  font-size: 18px;
+}
+
+.option {
+  margin-top: 10px;
+}
+
+.option > .caption {
+  margin-top: 10px;
+  display: inline-block;
+}
+
+.option > .dx-tagbox {
+  margin-top: 2px;
+}