diff --git a/README.md b/README.md index 311c3f4..f71abe3 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/index.html b/React/index.html index e4b78ea..6cd6433 100644 --- a/React/index.html +++ b/React/index.html @@ -6,7 +6,7 @@ Vite + React + TS - +
diff --git a/React/src/App.css b/React/src/App.css index 560cc18..16ca360 100644 --- a/React/src/App.css +++ b/React/src/App.css @@ -1,16 +1,60 @@ +:root { + color-scheme: light; /* Update this property when you switch between light/dark themes. */ +} + #dashboard { display: grid; gap: 20px; max-width: 900px; margin: 40px auto; - padding: 20px; + padding: 80px 20px; box-sizing: border-box; } -#progress, -#task-grid { - background: #fff; +#progress, #task-grid { + background-color: light-dark(#fff, #383838); padding: 16px; border-radius: 8px; - box-shadow: 0 2px 6px rgba(0 0 0 / 10%); + box-shadow: 0 2px 6px rgba(0 0 0 10%); +} + +#progress { + padding-top: 32px +} + +#task-grid .dx-datagrid-headers, #task-grid .dx-datagrid .dx-datagrid-table .dx-header-row>td:first-child { + border-top-left-radius: 8px; +} + +#task-grid .dx-datagrid-headers, #task-grid .dx-datagrid .dx-datagrid-table .dx-header-row>td:last-child { + border-top-right-radius: 8px; +} + +#task-grid .dx-row-lines:nth-last-child(2) > td { + border-bottom-style: none; +} + +#task-grid .dx-datagrid-rowsview { + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; + border-bottom-style: none; +} + +.dx-dialog .dx-toolbar-center { + margin: -8px !important; + width: calc(100% + 16px); + border-spacing: 8px 0; + float: none !important; +} + +.dx-toolbar-center .dx-button { + width: 100%; +} + +.dx-toolbar-center .dx-item { + padding-right: 0 !important; +} + +.dx-link-delete::before { + color: var(--dx-color-danger) } \ No newline at end of file diff --git a/React/src/App.tsx b/React/src/App.tsx index adcfb37..bb7b243 100644 --- a/React/src/App.tsx +++ b/React/src/App.tsx @@ -1,10 +1,30 @@ import { useCallback, useState } from 'react'; -import DataGrid, { Column, Editing } from 'devextreme-react/data-grid'; -import ProgressBar from 'devextreme-react/progress-bar'; + +import { + DataGrid, + Column, + Editing, + Toolbar, + type DataGridTypes, +} from 'devextreme-react/data-grid'; +import { ProgressBar } from 'devextreme-react/progress-bar'; +import { Button } from 'devextreme-react/button'; + +import type dxDataGrid from 'devextreme/ui/data_grid'; +import { formatDate } from 'devextreme/localization'; +import notify from 'devextreme/ui/notify'; + import './App.css'; -import 'devextreme/dist/css/dx.light.css'; +import 'devextreme/dist/css/dx.fluent.blue.light.css'; -const tasks = [ +interface taskData { + id: number; + task: string; + dueDate: Date; + done: boolean; +} + +const tasks: taskData[] = [ { id: 1, task: 'Buy groceries', @@ -19,8 +39,55 @@ const tasks = [ }, ]; +function createAddClickHandler(grid: dxDataGrid): () => void { + return () => { + grid.addRow().catch((error) => { + // addRow() returns a promise. This code satisfies the no-floating-promises lint rule. + notify(error); + }); + }; +} + +function renderTaskCell(data: DataGridTypes.ColumnCellTemplateData): JSX.Element { + if (!data.value) { + return ( +
Enter a title...
+ ); + } + return ( +
{data.value}
+ ); +} + +function renderDueDateCell(data: DataGridTypes.ColumnCellTemplateData): JSX.Element { + if (!data.value) { + return ( +
Enter a date...
+ ); + } + return ( +
{formatDate(data.value, 'shortDate')}
+ ); +} + +// This processes `undefined` values to eliminate the Indeterminate state in CheckBox components. +function calculateDoneValue(row: taskData): boolean { + return !!row.done; +} + +function renderButtonColumnHeader(data: DataGridTypes.ColumnHeaderCellTemplateData): JSX.Element { + return ( +