Actions and lists: Transfer to TS

JSDemos/Demos/ActionSheet/Basics/React/App.js → JSDemos/Demos/ActionSheet/Basics/React/App.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import ActionSheet from 'devextreme-react/action-sheet';
+import ActionSheet, { ActionSheetTypes } from 'devextreme-react/action-sheet';
 import Button from 'devextreme-react/button';
-import Switch from 'devextreme-react/switch';
+import Switch, { SwitchTypes } from 'devextreme-react/switch';
 import notify from 'devextreme/ui/notify';
-import { actionSheetItems } from './data.js';
+import { actionSheetItems } from './data.ts';
 
 const App = () => {
   const [isActionSheetVisible, setIsActionSheetVisible] = React.useState(false);
@@ -14,24 +14,24 @@ const App = () => {
     setIsActionSheetVisible(true);
   }, [setIsActionSheetVisible]);
 
-  const onActionSheetItemClick = React.useCallback((e) => {
+  const onActionSheetButtonClick = React.useCallback((buttonName: string) => {
+    setIsActionSheetVisible(false);
+    notify(`The "${buttonName}" button is clicked.`);
+  }, [setIsActionSheetVisible]);
+
+  const onActionSheetItemClick = React.useCallback((e: ActionSheetTypes.ItemClickEvent) => {
     onActionSheetButtonClick(e.itemData.text);
   }, [onActionSheetButtonClick]);
 
   const onActionSheetCancelClick = React.useCallback(() => {
     onActionSheetButtonClick('Cancel');
   }, [onActionSheetButtonClick]);
 
-  const onActionSheetButtonClick = React.useCallback((buttonName) => {
-    setIsActionSheetVisible(false);
-    notify(`The "${buttonName}" button is clicked.`);
-  }, [setIsActionSheetVisible]);
-
-  const changeTitle = React.useCallback((e) => {
+  const changeTitle = React.useCallback((e: SwitchTypes.ValueChangedEvent) => {
     setShowTitle(e.value);
   }, [setShowTitle]);
 
-  const changeCancelButton = React.useCallback((e) => {
+  const changeCancelButton = React.useCallback((e: SwitchTypes.ValueChangedEvent) => {
     setShowCancelButton(e.value);
   }, [setShowCancelButton]);
 

JSDemos/Demos/ActionSheet/Basics/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/Button/Icons/React/index.js → JSDemos/Demos/ActionSheet/Basics/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/ActionSheet/Basics/ReactJs/App.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import ActionSheet from 'devextreme-react/action-sheet';
+import Button from 'devextreme-react/button';
+import Switch from 'devextreme-react/switch';
+import notify from 'devextreme/ui/notify';
+import { actionSheetItems } from './data.js';
+
+const App = () => {
+  const [isActionSheetVisible, setIsActionSheetVisible] = React.useState(false);
+  const [showTitle, setShowTitle] = React.useState(true);
+  const [showCancelButton, setShowCancelButton] = React.useState(true);
+  const showActionSheet = React.useCallback(() => {
+    setIsActionSheetVisible(true);
+  }, [setIsActionSheetVisible]);
+  const onActionSheetButtonClick = React.useCallback(
+    (buttonName) => {
+      setIsActionSheetVisible(false);
+      notify(`The "${buttonName}" button is clicked.`);
+    },
+    [setIsActionSheetVisible],
+  );
+  const onActionSheetItemClick = React.useCallback(
+    (e) => {
+      onActionSheetButtonClick(e.itemData.text);
+    },
+    [onActionSheetButtonClick],
+  );
+  const onActionSheetCancelClick = React.useCallback(() => {
+    onActionSheetButtonClick('Cancel');
+  }, [onActionSheetButtonClick]);
+  const changeTitle = React.useCallback(
+    (e) => {
+      setShowTitle(e.value);
+    },
+    [setShowTitle],
+  );
+  const changeCancelButton = React.useCallback(
+    (e) => {
+      setShowCancelButton(e.value);
+    },
+    [setShowCancelButton],
+  );
+  return (
+    <div>
+      <ActionSheet
+        dataSource={actionSheetItems}
+        title="Choose action"
+        showTitle={showTitle}
+        showCancelButton={showCancelButton}
+        visible={isActionSheetVisible}
+        onItemClick={onActionSheetItemClick}
+        onCancelClick={onActionSheetCancelClick}
+      />
+      <div className="button">
+        <Button
+          width="100%"
+          text="Click to show Action Sheet"
+          onClick={showActionSheet}
+        />
+      </div>
+      <div className="options">
+        <div className="caption">Options</div>
+        <div className="option">
+          <span>Show title</span>
+          <Switch
+            value={showTitle}
+            onValueChanged={changeTitle}
+          />
+        </div>
+        <div className="option">
+          <span>Show cancel button</span>
+          <Switch
+            value={showCancelButton}
+            onValueChanged={changeCancelButton}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+export default App;

JSDemos/Demos/ActionSheet/Basics/ReactJs/data.js

@@ -0,0 +1,6 @@
+export const actionSheetItems = [
+  { text: 'Call' },
+  { text: 'Send message' },
+  { text: 'Edit' },
+  { text: 'Delete' },
+];

JSDemos/Demos/ActionSheet/Basics/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/ActionSheet/Basics/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/ActionSheet/Basics/ReactJs/styles.css

@@ -0,0 +1,31 @@
+.button {
+  width: 280px;
+  display: flex;
+  margin: 20px auto;
+}
+
+.options {
+  padding: 20px;
+  background-color: rgba(191, 191, 191, 0.15);
+  left: 0;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+
+.caption {
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.option {
+  margin-top: 10px;
+  line-height: 28px;
+  text-align: right;
+  display: inline-block;
+  width: 100%;
+}
+
+.option > span {
+  float: left;
+}

JSDemos/Demos/ActionSheet/PopoverMode/React/App.js → JSDemos/Demos/ActionSheet/PopoverMode/React/App.tsx

@@ -1,27 +1,27 @@
 import React from 'react';
-import ActionSheet from 'devextreme-react/action-sheet';
-import List from 'devextreme-react/list';
+import ActionSheet, { ActionSheetTypes } from 'devextreme-react/action-sheet';
+import List, { ListTypes } from 'devextreme-react/list';
 
 import notify from 'devextreme/ui/notify';
 
-import RenderContactItem from './ContactItem.js';
-import { actionSheetItems, contacts } from './data.js';
+import RenderContactItem from './ContactItem.tsx';
+import { actionSheetItems, contacts } from './data.ts';
 
 const App = () => {
   const [isActionSheetVisible, setIsActionSheetVisible] = React.useState(false);
-  const [actionSheetTarget, setActionSheetTarget] = React.useState('');
+  const [actionSheetTarget, setActionSheetTarget] = React.useState<HTMLElement | string>('');
 
-  const onListItemClick = React.useCallback((e) => {
+  const onListItemClick = React.useCallback((e: ListTypes.ItemClickEvent) => {
     setIsActionSheetVisible(true);
     setActionSheetTarget(e.itemElement);
   }, [setIsActionSheetVisible, setActionSheetTarget]);
 
-  const onActionSheetItemClick = React.useCallback((e) => {
+  const onActionSheetItemClick = React.useCallback((e: ActionSheetTypes.ItemClickEvent) => {
     setIsActionSheetVisible(false);
     notify(`The "${e.itemData.text}" button is clicked.`);
   }, [setIsActionSheetVisible]);
 
-  const onVisibleChange = React.useCallback((isVisible) => {
+  const onVisibleChange = React.useCallback((isVisible: boolean) => {
     if (isVisible !== isActionSheetVisible) {
       setIsActionSheetVisible(isVisible);
     }

JSDemos/Demos/ActionSheet/PopoverMode/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/ActionSheet/Basics/React/index.js → JSDemos/Demos/ActionSheet/PopoverMode/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/ActionSheet/PopoverMode/ReactJs/App.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import ActionSheet from 'devextreme-react/action-sheet';
+import List from 'devextreme-react/list';
+import notify from 'devextreme/ui/notify';
+import RenderContactItem from './ContactItem.js';
+import { actionSheetItems, contacts } from './data.js';
+
+const App = () => {
+  const [isActionSheetVisible, setIsActionSheetVisible] = React.useState(false);
+  const [actionSheetTarget, setActionSheetTarget] = React.useState('');
+  const onListItemClick = React.useCallback(
+    (e) => {
+      setIsActionSheetVisible(true);
+      setActionSheetTarget(e.itemElement);
+    },
+    [setIsActionSheetVisible, setActionSheetTarget],
+  );
+  const onActionSheetItemClick = React.useCallback(
+    (e) => {
+      setIsActionSheetVisible(false);
+      notify(`The "${e.itemData.text}" button is clicked.`);
+    },
+    [setIsActionSheetVisible],
+  );
+  const onVisibleChange = React.useCallback(
+    (isVisible) => {
+      if (isVisible !== isActionSheetVisible) {
+        setIsActionSheetVisible(isVisible);
+      }
+    },
+    [setIsActionSheetVisible, isActionSheetVisible],
+  );
+  return (
+    <div className="app-container">
+      <List
+        id="list"
+        items={contacts}
+        itemRender={RenderContactItem}
+        onItemClick={onListItemClick}
+      />
+      <ActionSheet
+        title="Choose action"
+        usePopover={true}
+        visible={isActionSheetVisible}
+        target={actionSheetTarget}
+        items={actionSheetItems}
+        onItemClick={onActionSheetItemClick}
+        onVisibleChange={onVisibleChange}
+      />
+    </div>
+  );
+};
+export default App;

JSDemos/Demos/ActionSheet/PopoverMode/ReactJs/ContactItem.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export default function RenderContactItem({ name, phone, email }) {
+  return (
+    <div>
+      <div>{name}</div>
+      <div>{phone}</div>
+      <div>{email}</div>
+    </div>
+  );
+}