diff --git a/README.md b/README.md index ee6c83f..905488e 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,4 @@ -![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/1011863345/25.1.3%2B) [![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1297944) [![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183) [![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives) diff --git a/React/package-lock.json b/React/package-lock.json index c2b4f96..bf4aa5b 100644 --- a/React/package-lock.json +++ b/React/package-lock.json @@ -8,8 +8,8 @@ "name": "react", "version": "0.0.0", "dependencies": { - "devextreme": "^24.2.3", - "devextreme-react": "^24.2.3", + "devextreme": "^25.1.3", + "devextreme-react": "^25.1.3", "react": "^18.2.0", "react-dom": "^18.2.0" }, @@ -681,17 +681,6 @@ "tslib": "2.3.1" } }, - "node_modules/@devextreme/runtime": { - "version": "3.0.13", - "resolved": "https://registry.npmjs.org/@devextreme/runtime/-/runtime-3.0.13.tgz", - "integrity": "sha512-//24I6vo5a+XG/Ul3+vOGqU4M22IWyldpECxLY8iyGJWA5fiNaYzAedrMV2Ixo5oRj8DawiHTZKy5iKKF9ks5g==", - "license": "SEE LICENSE IN LICENSE", - "dependencies": { - "inferno": "^7.4.6", - "inferno-create-element": "^7.4.6", - "inferno-hydrate": "^7.4.6" - } - }, "node_modules/@esbuild/aix-ppc64": { "version": "0.25.5", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.5.tgz", @@ -1392,6 +1381,16 @@ "node": ">= 8" } }, + "node_modules/@preact/signals-core": { + "version": "1.11.0", + "resolved": "https://registry.npmjs.org/@preact/signals-core/-/signals-core-1.11.0.tgz", + "integrity": "sha512-jglbibeWHuFRzEWVFY/TT7wB1PppJxmcSfUHcK+2J9vBRtiooMfw6tAPttojNYrrpdGViqAYCbPpmWYlMm+eMQ==", + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/preact" + } + }, "node_modules/@rolldown/pluginutils": { "version": "1.0.0-beta.9", "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.9.tgz", @@ -3274,9 +3273,9 @@ "license": "MIT" }, "node_modules/core-js": { - "version": "3.42.0", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.42.0.tgz", - "integrity": "sha512-Sz4PP4ZA+Rq4II21qkNqOEDTDrCvcANId3xpIgB34NDkWc3UduWj2dqEtN9yZIq8Dk3HyPI33x9sqqU5C8sr0g==", + "version": "3.44.0", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.44.0.tgz", + "integrity": "sha512-aFCtd4l6GvAXwVEh3XbbVqJGHDJt0OZRa+5ePGx3LLwi12WfexqQxcsohb2wgsa/92xtl19Hd66G/L+TaAxDMw==", "hasInstallScript": true, "license": "MIT", "funding": { @@ -3427,7 +3426,6 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "dev": true, "license": "MIT" }, "node_modules/damerau-levenshtein": { @@ -3698,9 +3696,9 @@ } }, "node_modules/devexpress-diagram": { - "version": "2.2.16", - "resolved": "https://registry.npmjs.org/devexpress-diagram/-/devexpress-diagram-2.2.16.tgz", - "integrity": "sha512-O60EjxtHKzedhl9M9bv3yLHBDylpAMQEtTJ2HcmuJyYTKA5SRccpf/BvtKzl43C0tSjPN2jJAYYGruZoIqOVOg==", + "version": "2.2.18", + "resolved": "https://registry.npmjs.org/devexpress-diagram/-/devexpress-diagram-2.2.18.tgz", + "integrity": "sha512-zHWkrBbGDBbMBgK4fFsNlaMzcngf1DrTvbs0IHNHfBSsIDrNy8t3BXRgrLXWgFr8UCsYpkYx2aHGZ6kvsN/kWg==", "license": "SEE LICENSE IN README.md", "dependencies": { "@devexpress/utils": "^1.4.3", @@ -3708,9 +3706,9 @@ } }, "node_modules/devexpress-gantt": { - "version": "4.1.60", - "resolved": "https://registry.npmjs.org/devexpress-gantt/-/devexpress-gantt-4.1.60.tgz", - "integrity": "sha512-EreGiSrxOk9kSkBsslPr3oFCxxhRRev6dmzgR/7dEzNxgZPE0KRnW8hYwZqu8tmx9o5m5Z59nv7CQ5kEczNlrA==", + "version": "4.1.62", + "resolved": "https://registry.npmjs.org/devexpress-gantt/-/devexpress-gantt-4.1.62.tgz", + "integrity": "sha512-8ULKoAyStlFnATNkkYFZWB7eQHrxJPallq04+HHiu9fn1TIRz0SgYlQdZuXoOmEhcRhaNwk5d+38sJ6OMC0HnQ==", "license": "SEE LICENSE IN README.md", "dependencies": { "@devexpress/utils": "^1.4.3", @@ -3718,19 +3716,19 @@ } }, "node_modules/devextreme": { - "version": "24.2.7", - "resolved": "https://registry.npmjs.org/devextreme/-/devextreme-24.2.7.tgz", - "integrity": "sha512-f32EtlOcsOYoG7j5XoYgH3a9pcguwvbG0RWPNx4iHp1g0nlvwH1JVplzN0++b5lLR/IHu73JgoRsjoFnj349Kg==", + "version": "25.1.3", + "resolved": "https://registry.npmjs.org/devextreme/-/devextreme-25.1.3.tgz", + "integrity": "sha512-72J3vL+QbQWEfUTzNuPTEsyN/+Nnb4jI/BwymcUHcBUKKp4vf3m72KviteHxutobblcfzvZmxLQCEvn01T/EqA==", "license": "SEE LICENSE IN README.md", "dependencies": { "@babel/runtime": "^7.12.1", - "@devextreme/runtime": "3.0.13", - "devexpress-diagram": "2.2.16", - "devexpress-gantt": "4.1.60", - "devextreme-quill": "1.7.2", - "inferno": "^7.4.9", - "inferno-create-element": "^7.4.9", - "inferno-hydrate": "^7.4.9", + "@preact/signals-core": "^1.8.0", + "devexpress-diagram": "2.2.18", + "devexpress-gantt": "4.1.62", + "devextreme-quill": "1.7.3", + "inferno": "^8.2.3", + "inferno-create-element": "^8.2.3", + "inferno-hydrate": "^8.2.3", "jszip": "^3.10.1", "rrule": "^2.7.1" }, @@ -3740,30 +3738,29 @@ } }, "node_modules/devextreme-quill": { - "version": "1.7.2", - "resolved": "https://registry.npmjs.org/devextreme-quill/-/devextreme-quill-1.7.2.tgz", - "integrity": "sha512-Ng+3ULPwGhLnCqstLRqnDF8Jj2P40sgjTjWzwgCYzH9G9E1n5IvzRl6weFzDWeytRM1WfsxX8Xdr2Oumf/2CDA==", + "version": "1.7.3", + "resolved": "https://registry.npmjs.org/devextreme-quill/-/devextreme-quill-1.7.3.tgz", + "integrity": "sha512-YPE9e8UOOByf/QUBAGZRmCDHFzQDnM+hyPet6vFNFGm2UsJAIz4xkL6gDhfan/a6otInQUB5wLsbPZqldZrliQ==", "license": "BSD-3-Clause", "dependencies": { "core-js": "^3.34.0", "eventemitter3": "^4.0.7", "lodash.clonedeep": "^4.5.0", - "lodash.isequal": "^4.5.0", "lodash.merge": "^4.6.2", "parchment": "^2.0.1", "quill-delta": "^5.0.0" } }, "node_modules/devextreme-react": { - "version": "24.2.7", - "resolved": "https://registry.npmjs.org/devextreme-react/-/devextreme-react-24.2.7.tgz", - "integrity": "sha512-VVY3Y7vjHC99rI/uZNTFGvh3gd5H3HhWd2rX64dRvt6KCy0Oh2PCLdvsmox+NaMpk2mQcv3KjgtbrFAk31DhDg==", + "version": "25.1.3", + "resolved": "https://registry.npmjs.org/devextreme-react/-/devextreme-react-25.1.3.tgz", + "integrity": "sha512-reTLUl9tC1KFb5bjY60G6Cyy8svXHTrTYeiYtx/kiaZq+NjyQ0ez67dALWyzKAVbzTWqoUWO/E/z9iwzNjcsUA==", "license": "MIT", "dependencies": { "prop-types": "^15.8.1" }, "peerDependencies": { - "devextreme": "~24.2.7", + "devextreme": "25.1.3", "react": "^16.2.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.2.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } @@ -5617,45 +5614,43 @@ } }, "node_modules/inferno": { - "version": "7.4.11", - "resolved": "https://registry.npmjs.org/inferno/-/inferno-7.4.11.tgz", - "integrity": "sha512-N+cs33ESWI8fdToCd98yMRYl7jkLnCkJskxov3FKKlaKOvk3PRlAttbhmUaYdWXlRvt2WeXi+J4MbzNj3V6G0w==", + "version": "8.2.3", + "resolved": "https://registry.npmjs.org/inferno/-/inferno-8.2.3.tgz", + "integrity": "sha512-LMeRlCe+RlXw8kHCLyOWRk2PsZ3Fo4jkESyAR1g4FfPT48N78i11YhTVXW2ukCx5MFjv+qrfa73JzJWU9sg4CQ==", "hasInstallScript": true, "license": "MIT", "dependencies": { - "inferno-shared": "7.4.11", - "inferno-vnode-flags": "7.4.11", + "csstype": "^3.1.2", + "inferno-vnode-flags": "8.2.3", "opencollective-postinstall": "^2.0.3" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/inferno" } }, "node_modules/inferno-create-element": { - "version": "7.4.11", - "resolved": "https://registry.npmjs.org/inferno-create-element/-/inferno-create-element-7.4.11.tgz", - "integrity": "sha512-kE6XIx2hPAd5qpDli2iGjNXgubvuyxdLvoiW71WnSzIIxA+Uxa/s8lY8m03VyHHVypFV3n329ZY5dFvKc7UQMg==", + "version": "8.2.3", + "resolved": "https://registry.npmjs.org/inferno-create-element/-/inferno-create-element-8.2.3.tgz", + "integrity": "sha512-YEwX4OiFlgeTutvE16uCGxkaSVwZ1DklpAPX8okjVsGaLIWQrM8QIQFxn3mTLWSu70Uea+afQfKL5wE4hxn39Q==", "license": "MIT", "dependencies": { - "inferno": "7.4.11" + "inferno": "8.2.3" } }, "node_modules/inferno-hydrate": { - "version": "7.4.11", - "resolved": "https://registry.npmjs.org/inferno-hydrate/-/inferno-hydrate-7.4.11.tgz", - "integrity": "sha512-hF9Ke4GHAkj8GQrMXBZPfsUqhq6WjkoDCAfXhPBuF1Wiceqyy8KerOOXEnuocHky77fuEXq0AzVnQcC064Bkfw==", + "version": "8.2.3", + "resolved": "https://registry.npmjs.org/inferno-hydrate/-/inferno-hydrate-8.2.3.tgz", + "integrity": "sha512-AyCiswnjYg7D9veJdjiQg06Npp0/iXKhwOm2hjoY3cjadT3fIdz2XtDElLB7imU4icuJ3xOmXA8FgIfnSJfHrQ==", "license": "MIT", "dependencies": { - "inferno": "7.4.11" + "inferno": "8.2.3" } }, - "node_modules/inferno-shared": { - "version": "7.4.11", - "resolved": "https://registry.npmjs.org/inferno-shared/-/inferno-shared-7.4.11.tgz", - "integrity": "sha512-pN725bDSTxkQmRS3e/3H02/xAqgHl+xgddCMjPm8M0etRdRcVCisi3NGPhzSbDDmiftrxhY31exs7+dwsngcDA==", - "license": "MIT" - }, "node_modules/inferno-vnode-flags": { - "version": "7.4.11", - "resolved": "https://registry.npmjs.org/inferno-vnode-flags/-/inferno-vnode-flags-7.4.11.tgz", - "integrity": "sha512-L7lslEQCq3IfwgT/b9zhuMf8fv6KXCNXXHZevk/WYxnqJsOWGDcKpJn0zkzXfvmj0otbB149iLUQVBq3oe2sfA==", + "version": "8.2.3", + "resolved": "https://registry.npmjs.org/inferno-vnode-flags/-/inferno-vnode-flags-8.2.3.tgz", + "integrity": "sha512-dfC0MIwFv9PCbZCUsuk9ISejFS3fKJODC0rZ/LjxxzE+OrCk+PMwPLsUnGU6O9/jbBnPACVz1BkACDf5LWgU5Q==", "license": "MIT" }, "node_modules/inflight": { diff --git a/React/package.json b/React/package.json index 21f61bb..e9dcb01 100644 --- a/React/package.json +++ b/React/package.json @@ -15,8 +15,8 @@ }, "dependencies": { - "devextreme": "^24.2.3", - "devextreme-react": "^24.2.3", + "devextreme": "^25.1.3", + "devextreme-react": "^25.1.3", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/React/src/App.css b/React/src/App.css index 438a219..560cc18 100644 --- a/React/src/App.css +++ b/React/src/App.css @@ -1,4 +1,16 @@ -.main { - margin: 50px; - width: 90vw; +#dashboard { + display: grid; + gap: 20px; + max-width: 900px; + margin: 40px auto; + padding: 20px; + box-sizing: border-box; +} + +#progress, +#task-grid { + background: #fff; + padding: 16px; + border-radius: 8px; + box-shadow: 0 2px 6px rgba(0 0 0 / 10%); } \ No newline at end of file diff --git a/React/src/App.tsx b/React/src/App.tsx index c61a5cb..adcfb37 100644 --- a/React/src/App.tsx +++ b/React/src/App.tsx @@ -1,16 +1,54 @@ import { useCallback, useState } from 'react'; +import DataGrid, { Column, Editing } from 'devextreme-react/data-grid'; +import ProgressBar from 'devextreme-react/progress-bar'; import './App.css'; -import 'devextreme/dist/css/dx.material.blue.light.compact.css'; -import Button from 'devextreme-react/button'; +import 'devextreme/dist/css/dx.light.css'; + +const tasks = [ + { + id: 1, + task: 'Buy groceries', + dueDate: new Date(), + done: false, + }, + { + id: 2, + task: 'Write a blog post', + dueDate: new Date(), + done: true, + }, +]; function App(): JSX.Element { - var [count, setCount] = useState(0); - const clickHandler = useCallback(() => { - setCount((prev) => prev + 1); - }, [setCount]); + const [progressValue, setProgressValue] = useState(50); + const updateProgress = useCallback(() => { + const all = tasks.length; + const completed = tasks.filter((t) => t.done).length; + setProgressValue(Math.round((completed / all) * 100)); + }, [tasks]); + return ( -
-