DataGrid: transfer to TS

JSDemos/Demos/DataGrid/AdvancedMasterDetailView/React/AddressTab.js → JSDemos/Demos/DataGrid/AdvancedMasterDetailView/React/AddressTab.tsx

@@ -7,7 +7,11 @@ const renderFormItem = (item) => (
   <span>{item.editorOptions.value}</span>
 );
 
-const AddressTab = (props) => (
+interface AddressTabProps {
+  data: any;
+}
+
+const AddressTab = (props: AddressTabProps) => (
   <Form
     formData={props.data}
     colCount={2}

JSDemos/Demos/DataGrid/AdvancedMasterDetailView/React/App.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import {
+  Column, DataGrid, MasterDetail, Paging,
+} from 'devextreme-react/data-grid';
+import { createStore } from 'devextreme-aspnet-data-nojquery';
+import MasterDetailView from './MasterDetailView.tsx';
+
+const url = 'https://js.devexpress.com/Demos/Mvc/api/DataGridAdvancedMasterDetailView';
+
+const suppliersData = createStore({
+  key: 'SupplierID',
+  loadUrl: `${url}/GetSuppliers`,
+});
+
+const App = () => (
+  <DataGrid
+    dataSource={suppliersData}
+    remoteOperations={true}
+    showBorders={true}
+    id="gridContainer"
+  >
+    <MasterDetail
+      enabled={true}
+      component={MasterDetailView}
+    />
+    <Paging defaultPageSize={15} />
+
+    <Column dataField="ContactName" />
+    <Column dataField="ContactTitle" />
+    <Column dataField="CompanyName" />
+    <Column dataField="City" />
+    <Column dataField="Country" />
+  </DataGrid>
+);
+
+export default App;

JSDemos/Demos/DataGrid/AdvancedMasterDetailView/React/MasterDetailView.js → JSDemos/Demos/DataGrid/AdvancedMasterDetailView/React/MasterDetailView.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import { TabPanel, Item } from 'devextreme-react/tab-panel';
+import { DataGridTypes } from 'devextreme-react/data-grid';
 
-import AddressTab from './AddressTab.js';
-import OrdersTab from './OrdersTab.js';
+import AddressTab from './AddressTab.tsx';
+import OrdersTab from './OrdersTab.tsx';
 
-const MasterDetailView = (props) => {
+const MasterDetailView = (props: DataGridTypes.MasterDetailTemplateData) => {
   const renderOrdersTab = React.useCallback(() => (
     <OrdersTab supplierId={props.data.key} />
   ), [props.data.key]);

JSDemos/Demos/DataGrid/AdvancedMasterDetailView/React/OrderHistory.js → JSDemos/Demos/DataGrid/AdvancedMasterDetailView/React/OrderHistory.tsx

@@ -7,7 +7,11 @@ import { createStore } from 'devextreme-aspnet-data-nojquery';
 
 const url = 'https://js.devexpress.com/Demos/Mvc/api/DataGridAdvancedMasterDetailView';
 
-const OrderHistory = ({ productId }) => {
+interface OrderHistoryProps {
+  productId: any;
+}
+
+const OrderHistory = ({ productId }: OrderHistoryProps) => {
   const [orderHistoryStore, setOrderHistoryStore] = React.useState(null);
 
   React.useEffect(() => {
@@ -38,7 +42,7 @@ const OrderHistory = ({ productId }) => {
 
       <Summary>
         <TotalItem column="UnitPrice" summaryType="sum">
-          <ValueFormat format="currency" precision={2} />
+          <ValueFormat precision={2} />
         </TotalItem>
         <TotalItem column="Quantity" summaryType="count" />
       </Summary>

JSDemos/Demos/DataGrid/AdvancedMasterDetailView/React/OrdersTab.js → JSDemos/Demos/DataGrid/AdvancedMasterDetailView/React/OrdersTab.tsx

@@ -1,10 +1,14 @@
 import React from 'react';
 import { Form, Item, Label } from 'devextreme-react/form';
 
-import ProductSelectBox from './ProductSelectBox.js';
-import OrderHistory from './OrderHistory.js';
+import ProductSelectBox from './ProductSelectBox.tsx';
+import OrderHistory from './OrderHistory.tsx';
 
-const OrdersTab = (props) => {
+interface OrdersTabProps {
+  supplierId: any;
+}
+
+const OrdersTab = (props: OrdersTabProps) => {
   const [chosenProductId, setChosenProductId] = React.useState(null);
 
   const renderSelectBox = React.useCallback(() => (

JSDemos/Demos/DataGrid/AdvancedMasterDetailView/React/ProductSelectBox.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { SelectBox, SelectBoxTypes } from 'devextreme-react/select-box';
+import { createStore } from 'devextreme-aspnet-data-nojquery';
+
+const url = 'https://js.devexpress.com/Demos/Mvc/api/DataGridAdvancedMasterDetailView';
+const productLabel = { 'aria-label': 'Product' };
+
+interface ProductSelectBoxProps {
+  supplierId: any;
+  productId: any;
+  onProductChanged: any;
+}
+
+const ProductSelectBox = (props: ProductSelectBoxProps) => {
+  const [productsData, setProductsData] = React.useState(null);
+
+  const valueChanged = React.useCallback((e: SelectBoxTypes.ValueChangedEvent) => {
+    props.onProductChanged(e.value);
+  }, [props]);
+
+  React.useEffect(() => {
+    const setDefaultValue = (items: any[]) => {
+      const firstItem = items[0];
+      if (firstItem && props.productId === null) {
+        props.onProductChanged(firstItem.ProductID);
+      }
+    };
+
+    const newProductsData = createStore({
+      key: 'ProductID',
+      loadParams: { SupplierID: props.supplierId },
+      loadUrl: `${url}/GetProductsBySupplier`,
+      onLoaded: setDefaultValue,
+    });
+
+    setProductsData(newProductsData);
+  }, [props]);
+
+  return (
+    <SelectBox
+      value={props.productId}
+      deferRendering={false}
+      inputAttr={productLabel}
+      dataSource={productsData}
+      valueExpr="ProductID"
+      displayExpr="ProductName"
+      onValueChanged={valueChanged}
+    />
+  );
+};
+
+export default ProductSelectBox;

JSDemos/Demos/DataGrid/AdvancedMasterDetailView/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/DataGrid/AdvancedMasterDetailView/React/index.js → JSDemos/Demos/DataGrid/AdvancedMasterDetailView/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/DataGrid/AdvancedMasterDetailView/ReactJs/AddressTab.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Form, Item } from 'devextreme-react/form';
+
+const items = ['Address', 'City', 'Region', 'PostalCode', 'Country', 'Phone'];
+const renderFormItem = (item) => <span>{item.editorOptions.value}</span>;
+const AddressTab = (props) => (
+  <Form
+    formData={props.data}
+    colCount={2}
+    className="address-form form-container"
+  >
+    {items.map((item, index) => (
+      <Item
+        dataField={item}
+        key={index}
+        render={renderFormItem}
+      />
+    ))}
+  </Form>
+);
+export default AddressTab;

JSDemos/Demos/DataGrid/AdvancedMasterDetailView/React/App.js → JSDemos/Demos/DataGrid/AdvancedMasterDetailView/ReactJs/App.js

@@ -1,18 +1,15 @@
 import React from 'react';
-
 import {
   Column, DataGrid, MasterDetail, Paging,
 } from 'devextreme-react/data-grid';
 import { createStore } from 'devextreme-aspnet-data-nojquery';
 import MasterDetailView from './MasterDetailView.js';
 
 const url = 'https://js.devexpress.com/Demos/Mvc/api/DataGridAdvancedMasterDetailView';
-
 const suppliersData = createStore({
   key: 'SupplierID',
   loadUrl: `${url}/GetSuppliers`,
 });
-
 const App = () => (
   <DataGrid
     dataSource={suppliersData}
@@ -33,5 +30,4 @@ const App = () => (
     <Column dataField="Country" />
   </DataGrid>
 );
-
 export default App;

JSDemos/Demos/DataGrid/AdvancedMasterDetailView/ReactJs/MasterDetailView.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { TabPanel, Item } from 'devextreme-react/tab-panel';
+import AddressTab from './AddressTab.js';
+import OrdersTab from './OrdersTab.js';
+
+const MasterDetailView = (props) => {
+  const renderOrdersTab = React.useCallback(
+    () => <OrdersTab supplierId={props.data.key} />,
+    [props.data.key],
+  );
+  const renderAddressTab = React.useCallback(
+    () => <AddressTab data={props.data.data} />,
+    [props.data.data],
+  );
+  return (
+    <TabPanel>
+      <Item
+        title="Orders"
+        render={renderOrdersTab}
+      />
+      <Item
+        title="Address"
+        render={renderAddressTab}
+      />
+    </TabPanel>
+  );
+};
+export default MasterDetailView;

JSDemos/Demos/DataGrid/AdvancedMasterDetailView/ReactJs/OrderHistory.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import {
+  Column,
+  DataGrid,
+  Paging,
+  Summary,
+  TotalItem,
+  ValueFormat,
+} from 'devextreme-react/data-grid';
+import { createStore } from 'devextreme-aspnet-data-nojquery';
+
+const url = 'https://js.devexpress.com/Demos/Mvc/api/DataGridAdvancedMasterDetailView';
+const OrderHistory = ({ productId }) => {
+  const [orderHistoryStore, setOrderHistoryStore] = React.useState(null);
+  React.useEffect(() => {
+    if (productId) {
+      const newOrderHistoryStore = createStore({
+        key: 'OrderID',
+        loadParams: { ProductID: productId },
+        loadUrl: `${url}/GetOrdersByProduct`,
+      });
+      setOrderHistoryStore(newOrderHistoryStore);
+    }
+  }, [productId]);
+  return (
+    <DataGrid
+      dataSource={orderHistoryStore}
+      showBorders={true}
+    >
+      <Paging defaultPageSize={5} />
+
+      <Column dataField="OrderID" />
+      <Column
+        dataField="OrderDate"
+        dataType="date"
+      />
+      <Column dataField="ShipCountry" />
+      <Column dataField="ShipCity" />
+      <Column
+        dataField="UnitPrice"
+        format="currency"
+      />
+      <Column dataField="Quantity" />
+      <Column
+        dataField="Discount"
+        format="percent"
+      />
+
+      <Summary>
+        <TotalItem
+          column="UnitPrice"
+          summaryType="sum"
+        >
+          <ValueFormat precision={2} />
+        </TotalItem>
+        <TotalItem
+          column="Quantity"
+          summaryType="count"
+        />
+      </Summary>
+    </DataGrid>
+  );
+};
+export default OrderHistory;

JSDemos/Demos/DataGrid/AdvancedMasterDetailView/ReactJs/OrdersTab.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Form, Item, Label } from 'devextreme-react/form';
+import ProductSelectBox from './ProductSelectBox.js';
+import OrderHistory from './OrderHistory.js';
+
+const OrdersTab = (props) => {
+  const [chosenProductId, setChosenProductId] = React.useState(null);
+  const renderSelectBox = React.useCallback(
+    () => (
+      <ProductSelectBox
+        supplierId={props.supplierId}
+        productId={chosenProductId}
+        onProductChanged={setChosenProductId}
+      />
+    ),
+    [chosenProductId, props.supplierId],
+  );
+  const renderOrderHistory = React.useCallback(
+    () => <OrderHistory productId={chosenProductId} />,
+    [chosenProductId],
+  );
+  return (
+    <Form
+      labelLocation="top"
+      className="form-container"
+    >
+      <Item render={renderSelectBox}>
+        <Label text="Product" />
+      </Item>
+      <Item render={renderOrderHistory}>
+        <Label text="Order History" />
+      </Item>
+    </Form>
+  );
+};
+export default OrdersTab;

JSDemos/Demos/DataGrid/AdvancedMasterDetailView/React/ProductSelectBox.js → JSDemos/Demos/DataGrid/AdvancedMasterDetailView/ReactJs/ProductSelectBox.js

@@ -4,32 +4,29 @@ import { createStore } from 'devextreme-aspnet-data-nojquery';
 
 const url = 'https://js.devexpress.com/Demos/Mvc/api/DataGridAdvancedMasterDetailView';
 const productLabel = { 'aria-label': 'Product' };
-
 const ProductSelectBox = (props) => {
   const [productsData, setProductsData] = React.useState(null);
-
-  const valueChanged = React.useCallback((e) => {
-    props.onProductChanged(e.value);
-  }, [props]);
-
+  const valueChanged = React.useCallback(
+    (e) => {
+      props.onProductChanged(e.value);
+    },
+    [props],
+  );
   React.useEffect(() => {
     const setDefaultValue = (items) => {
       const firstItem = items[0];
       if (firstItem && props.productId === null) {
         props.onProductChanged(firstItem.ProductID);
       }
     };
-
     const newProductsData = createStore({
       key: 'ProductID',
       loadParams: { SupplierID: props.supplierId },
       loadUrl: `${url}/GetProductsBySupplier`,
       onLoaded: setDefaultValue,
     });
-
     setProductsData(newProductsData);
   }, [props]);
-
   return (
     <SelectBox
       value={props.productId}
@@ -42,5 +39,4 @@ const ProductSelectBox = (props) => {
     />
   );
 };
-
 export default ProductSelectBox;