Merge branch '23_2' into ts-actions

DevExpress · Nov 13, 2023 · f759807 · f759807
2 parents 1d5763a + f42540d
commit f759807
Show file tree

Hide file tree

Showing 1,450 changed files with 57,375 additions and 13,998 deletions.
diff --git a/.github/workflows/visual_tests_frameworks.yml b/.github/workflows/visual_tests_frameworks.yml
@@ -393,4 +393,4 @@ jobs:
       with:
         name: screenshots-${{ steps.screenshotname.outputs.value }}
         path: ${{ github.workspace }}/testing/artifacts/compared-screenshots/*
-        if-no-files-found: ignore
+        if-no-files-found: ignore
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,6 @@
 {
 	"editor.tabSize": 2,
-}
+	"editor.codeActionsOnSave": {
+		"source.fixAll.eslint": true
+	}
+}
diff --git a/JSDemos/Demos/Box/Overview/React/App.js → JSDemos/Demos/Box/Overview/React/App.tsx b/JSDemos/Demos/Box/Overview/React/App.js → JSDemos/Demos/Box/Overview/React/App.tsx
diff --git a/JSDemos/Demos/Box/Overview/React/index.html b/JSDemos/Demos/Box/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>
 

diff --git a/JSDemos/Demos/Box/Overview/React/index.js b/JSDemos/Demos/Box/Overview/React/index.js
diff --git a/JSDemos/Demos/Box/Overview/React/index.tsx b/JSDemos/Demos/Box/Overview/React/index.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import themes from 'devextreme/ui/themes';
+import App from './App.tsx';
+
+themes.initialized(() => {
+  ReactDOM.render(
+    <App />,
+    document.getElementById('app'),
+  );
+});
diff --git a/JSDemos/Demos/Box/Overview/ReactJs/App.js b/JSDemos/Demos/Box/Overview/ReactJs/App.js
@@ -0,0 +1,104 @@
+import React from 'react';
+import Box, { Item } from 'devextreme-react/box';
+
+const App = () => (
+  <React.Fragment>
+    <Box
+      direction="row"
+      width="100%"
+      height={75}
+    >
+      <Item ratio={1}>
+        <div className="rect demo-dark">ratio = 1</div>
+      </Item>
+      <Item ratio={2}>
+        <div className="rect demo-light">ratio = 2</div>
+      </Item>
+      <Item ratio={1}>
+        <div className="rect demo-dark">ratio = 1</div>
+      </Item>
+    </Box>
+    <br />
+    <Box
+      direction="row"
+      width="100%"
+      height={75}
+    >
+      <Item
+        ratio={0}
+        baseSize={150}
+      >
+        <div className="rect demo-dark">150px</div>
+      </Item>
+      <Item ratio={1}>
+        <Box
+          className="demo-light"
+          direction="row"
+          width="100%"
+          height={75}
+          align="center"
+          crossAlign="center"
+        >
+          <Item
+            ratio={0}
+            baseSize={50}
+          >
+            <div className="small"></div>
+          </Item>
+          <Item
+            ratio={0}
+            baseSize={50}
+          >
+            <div className="small"></div>
+          </Item>
+          <Item
+            ratio={0}
+            baseSize={50}
+          >
+            <div className="small"></div>
+          </Item>
+        </Box>
+      </Item>
+      <Item
+        ratio={0}
+        baseSize="10%"
+      >
+        <div className="rect demo-dark">10%</div>
+      </Item>
+    </Box>
+    <br />
+    <Box
+      direction="col"
+      width="100%"
+      height={250}
+    >
+      <Item ratio={1}>
+        <div className="rect demo-dark header">Header</div>
+      </Item>
+      <Item
+        ratio={2}
+        baseSize={0}
+      >
+        <Box
+          direction="row"
+          width="100%"
+          height={125}
+        >
+          <Item ratio={1}>
+            <div className="rect demo-dark">Left Bar</div>
+          </Item>
+          <Item ratio={1}>
+            <div className="rect demo-light">Content</div>
+          </Item>
+          <Item ratio={1}>
+            <div className="rect demo-dark">Right Bar</div>
+          </Item>
+        </Box>
+      </Item>
+      <Item ratio={1}>
+        <div className="rect demo-dark footer">Footer</div>
+      </Item>
+    </Box>
+  </React.Fragment>
+);
+export default App;
diff --git a/JSDemos/Demos/Box/Overview/ReactJs/index.html b/JSDemos/Demos/Box/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>
diff --git a/JSDemos/Demos/Box/Overview/ReactJs/index.js b/JSDemos/Demos/Box/Overview/ReactJs/index.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import themes from 'devextreme/ui/themes';
+import App from './App.js';
+
+themes.initialized(() => {
+  ReactDOM.render(<App />, document.getElementById('app'));
+});
diff --git a/JSDemos/Demos/Box/Overview/ReactJs/styles.css b/JSDemos/Demos/Box/Overview/ReactJs/styles.css
@@ -0,0 +1,27 @@
+.rect {
+  text-align: center;
+  font-size: 30px;
+  padding-top: 10px;
+  height: 100%;
+}
+
+.demo-light {
+  background: rgba(245, 229, 166, 0.5);
+}
+
+.demo-dark {
+  background: rgba(148, 215, 199, 0.5);
+}
+
+.demo-dark.header {
+  background: rgba(243, 158, 108, 0.5);
+}
+
+.demo-dark.footer {
+  background: rgba(123, 155, 207, 0.5);
+}
+
+.small {
+  height: 50px;
+  border: 1px solid lightgray;
+}
diff --git a/JSDemos/Demos/ButtonGroup/Overview/React/App.js b/JSDemos/Demos/ButtonGroup/Overview/React/App.js
diff --git a/JSDemos/Demos/ButtonGroup/Overview/React/App.tsx b/JSDemos/Demos/ButtonGroup/Overview/React/App.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { ButtonGroup, ButtonGroupTypes } from 'devextreme-react/button-group';
+import notify from 'devextreme/ui/notify';
+import { alignments, fontStyles } from './data.ts';
+
+const selectedItemKeys = ['left'];
+
+const itemClick = (e: ButtonGroupTypes.ItemClickEvent) => {
+  notify({ message: `The "${e.itemData.hint}" button was clicked`, width: 320 }, 'success', 1000);
+};
+
+export default function App() {
+  return (
+    <div>
+      <div className="buttongroups-container">
+        <ButtonGroup
+          items={alignments}
+          keyExpr="alignment"
+          stylingMode="outlined"
+          defaultSelectedItemKeys={selectedItemKeys}
+          onItemClick={itemClick}
+        />
+        <ButtonGroup
+          items={fontStyles}
+          keyExpr="style"
+          stylingMode="outlined"
+          selectionMode="multiple"
+          onItemClick={itemClick}
+        />
+      </div>
+      <div className="buttongroups-container">
+        <ButtonGroup
+          items={alignments}
+          keyExpr="alignment"
+          stylingMode="text"
+          defaultSelectedItemKeys={selectedItemKeys}
+          onItemClick={itemClick}
+        />
+        <ButtonGroup
+          className="multiple-selection-styling-mode"
+          items={fontStyles}
+          keyExpr="style"
+          stylingMode="text"
+          selectionMode="multiple"
+          onItemClick={itemClick}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/.../Demos/ButtonGroup/Overview/React/data.js → .../Demos/ButtonGroup/Overview/React/data.ts b/.../Demos/ButtonGroup/Overview/React/data.js → .../Demos/ButtonGroup/Overview/React/data.ts
diff --git a/JSDemos/Demos/ButtonGroup/Overview/React/index.html b/JSDemos/Demos/ButtonGroup/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>
 

diff --git a/JSDemos/Demos/ButtonGroup/Overview/React/index.js b/JSDemos/Demos/ButtonGroup/Overview/React/index.js
diff --git a/JSDemos/Demos/ButtonGroup/Overview/React/index.tsx b/JSDemos/Demos/ButtonGroup/Overview/React/index.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import App from './App.tsx';
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('app'),
+);