inprogress

DevExpress · Aug 29, 2024 · 612d263 · 612d263
1 parent 72e9cc4
commit 612d263
Show file tree

Hide file tree

Showing 16 changed files with 143 additions and 111 deletions.
diff --git a/packages/devextreme-scss/build/style-compiler.js b/packages/devextreme-scss/build/style-compiler.js
@@ -138,6 +138,6 @@ task('style-compiler-themes-watch', () => {
             return null;
         });
 
-    watch('scss/**/*', parallel(() => compileBundles(bundles), 'copy-fonts-and-icons'))
+    watch('scss/**/*', parallel(() => compileBundles(getBundleSourcePath('*')), 'copy-fonts-and-icons'))
         .on('ready', () => console.log('style-compiler-themes task is watching for changes...'));
 });
diff --git a/packages/devextreme-scss/build/theme-options.js b/packages/devextreme-scss/build/theme-options.js
@@ -1,16 +1,16 @@
 'use strict';
 
-const sizes = ['default'/* , 'compact' */];
-const materialColors = ['blue',/*  'lime', 'orange', 'purple', 'teal' */];
-const materialModes = ['light'/* , 'dark' */];
-// const fluentColors = ['blue', 'saas'];
-// const fluentModes = ['light', 'dark'];
-// const genericColors = ['carmine', 'contrast', 'dark', 'darkmoon', 'darkviolet', 'greenmist', 'light', 'softblue'];
+const sizes = ['default'];
+const materialColors = ['blue',];
+const materialModes = ['light'];
+const fluentColors = ['blue'];
+const fluentModes = ['light'];
+const genericColors = ['light'];
 
 const getThemes = () => sizes.flatMap((size) => [
     ...materialModes.flatMap((mode) => materialColors.map((color) => ['material', size, color, mode])),
-    // ...fluentModes.flatMap((mode) => fluentColors.map((color) => ['fluent', size, color, mode])),
-    // ...genericColors.map((color) => ['generic', size, color])
+    ...fluentModes.flatMap((mode) => fluentColors.map((color) => ['fluent', size, color, mode])),
+    ...genericColors.map((color) => ['generic', size, color])
 ]);
 
 module.exports = {

diff --git a/packages/devextreme-scss/generate-figma.js b/packages/devextreme-scss/generate-figma.js
@@ -13,7 +13,8 @@ function setFigmaVarAlias(figmaName, scssName, collection) {
   figmaMapping[collection][figmaName] = scssName;
 }
 
-function getFigmaVarValue(figmaName, collectionName, modeName) {
+function getFigmaVarValue(figmaName, collectionName, modeNameMapping) {
+  const modeName = modeNameMapping[collectionName];
   console.log('getFigmaVarValue', figmaName, collectionName, modeName);
 
   const collection = variables.collections.find(
@@ -31,6 +32,7 @@ function getFigmaVarValue(figmaName, collectionName, modeName) {
   if (variable.isAlias) {
     if (figmaMapping?.[variable.value.collection]?.[variable.value.name] === undefined) {
       console.warn(`${variable.value.name} for ${variable.value.collection} is undefined`)
+      return getFigmaVarValue(variable.value.name, variable.value.collection, modeNameMapping);
     }
     return figmaMapping[variable.value.collection][variable.value.name];
   } else {

diff --git a/packages/devextreme-scss/gulpfile.js b/packages/devextreme-scss/gulpfile.js
@@ -55,7 +55,12 @@ gulp.task('generate', gulp.series(
         .pipe(through.obj(function(file, encoding, callback) {
             const content = file.contents.toString(encoding);
             const newContent = content.replace(/(\s*\/\/ getFigmaVariable\('(.+?)', *'(.+?)', *'(.+?)' *\)\n\s*(\$.+?): *)(.+?)( !default;)/g, function(match, beginning,  name, collection, mode, scssName, scssValue, end) {
-                return beginning + getFigmaVarValue(name, collection, mode) + end;
+                return beginning + getFigmaVarValue(name, collection, {
+                    'Fluent (Colors)': 'Light',
+                    'Material (Colors)': 'Light',
+                    'Generic (Colors)': 'Light',
+                    [collection]: mode
+                }) + end;
             })
             file.contents = Buffer.from(newContent)
             callback(null, file);

diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/_colors.scss b/packages/devextreme-scss/scss/widgets/base/cardView/_colors.scss
@@ -1 +1,6 @@
-$cardview-header-item-background-color: null !default;
+$cardview-header-item-background-color: null !default;
+$cardview-header-item-border-width: null !default;
+$cardview-header-item-border-radius: null !default;
+$cardview-header-item-border-color: null !default;
+$cardview-header-item-padding-horizontal: 12px !default;
+$cardview-header-item-padding-vertical: 6px !default;
diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/_index.scss
@@ -19,4 +19,10 @@
 
 .dx-gridcore-header-item {
   background-color: $cardview-header-item-background-color;
-}
+  border: solid $cardview-header-item-border-width $cardview-header-item-border-color;
+  border-radius: #{$cardview-header-item-border-radius}px;
+  padding: $cardview-header-item-padding-vertical $cardview-header-item-padding-horizontal;
+  margin: 5px;
+  width: fit-content;
+  display: inline-block;
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/_index.scss
@@ -60,3 +60,4 @@
 @use "./sortable";
 @use "./deferRendering";
 @use "./map";
+@use "./cardView";
diff --git a/packages/devextreme-scss/scss/widgets/fluent/cardView/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/cardView/_colors.scss
@@ -1,4 +1,10 @@
 @use '../../base/cardView/colors' as *;
+@use '../colors' as *;
 
 // getFigmaVariable('Header item/neutrals/background/1/rest', 'Components', 'Fluent')
-$cardview-header-item-background-color: $colors-grey-10 !default;
+$cardview-header-item-background-color: $colors-grey-10 !default;
+$cardview-header-item-border-width: 1px !default;
+// getFigmaVariable('Header item/сorner-radius/Bubble M (true)', 'Components', 'Fluent')
+$cardview-header-item-border-radius: 6 !default;
+// getFigmaVariable('Header item/neutrals/strokes/1/rest', 'Components', 'Fluent')
+$cardview-header-item-border-color: #E0E0E0 !default;
diff --git a/packages/devextreme-scss/scss/widgets/generic/_index.scss b/packages/devextreme-scss/scss/widgets/generic/_index.scss
@@ -60,4 +60,6 @@
 @use "./sortable";
 @use "./deferRendering";
 @use "./map";
+@use "./cardView";
+
 
diff --git a/packages/devextreme-scss/scss/widgets/generic/cardView/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/cardView/_colors.scss
@@ -1,4 +1,10 @@
 @use '../../base/cardView/colors' as *;
+@use '../colors' as *;
 
 // getFigmaVariable('Header item/neutrals/background/1/rest', 'Components', 'Generic')
-$cardview-header-item-background-color: $colors-neutral-grey-0 !default;
+$cardview-header-item-background-color: $colors-neutral-grey-0 !default;
+$cardview-header-item-border-width: 1px !default;
+// getFigmaVariable('Header item/сorner-radius/Bubble M (true)', 'Components', 'Generic')
+$cardview-header-item-border-radius: 4 !default;
+// getFigmaVariable('Header item/neutrals/strokes/1/rest', 'Components', 'Generic')
+$cardview-header-item-border-color: #DDDDDD !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/cardView/_colors.scss b/packages/devextreme-scss/scss/widgets/material/cardView/_colors.scss
@@ -1,4 +1,10 @@
 @use '../../base/cardView/colors' as *;
+@use '../colors' as *;
 
 // getFigmaVariable('Header item/neutrals/background/1/rest', 'Components', 'Material')
-$cardview-header-item-background-color: $colors-neutral-300 !default;
+$cardview-header-item-background-color: $colors-neutral-300 !default;
+$cardview-header-item-border-width: 1px !default;
+// getFigmaVariable('Header item/сorner-radius/Bubble M (true)', 'Components', 'Material')
+$cardview-header-item-border-radius: 99 !default;
+// getFigmaVariable('Header item/neutrals/strokes/1/rest', 'Components', 'Material')
+$cardview-header-item-border-color: $colors-neutral-300 !default;
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/headers/header_item.tsx b/packages/devextreme/js/__internal/grids/new/grid_core/headers/header_item.tsx
@@ -0,0 +1,20 @@
+import type { ComponentType } from 'inferno';
+
+import type { Column } from '../columns_controller/types';
+
+export const CLASSES = {
+  headerItem: 'dx-gridcore-header-item',
+};
+
+export interface HeaderItemProps {
+  column: Column;
+  buttons?: ComponentType;
+}
+
+export function HeaderItem(props: HeaderItemProps): JSX.Element {
+  return (
+    <div className={CLASSES.headerItem}>
+      {props.column.name}
+    </div>
+  );
+}
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/headers/headers.tsx b/packages/devextreme/js/__internal/grids/new/grid_core/headers/headers.tsx
@@ -0,0 +1,22 @@
+import type { Column } from '../columns_controller/types';
+import { HeaderItem } from './header_item';
+
+export const CLASSES = {
+  headers: 'dx-gridcore-headers',
+};
+
+export interface HeadersProps {
+  columns: Column[];
+}
+
+export function Headers(props: HeadersProps): JSX.Element {
+  return (
+    <div className={CLASSES.headers}>
+      {props.columns.map((column) => (
+        <HeaderItem
+          column={column}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/headers/view.tsx b/packages/devextreme/js/__internal/grids/new/grid_core/headers/view.tsx
@@ -1,69 +1,20 @@
-import { computed, Subscribable } from '@ts/core/reactive';
-import type { RefObject } from 'inferno';
-import { createRef, InfernoNode } from 'inferno';
+import { computed } from '@ts/core/reactive';
 
 import { ColumnsController } from '../columns_controller/columns_controller';
-import { ColumnsDraggingController } from '../columns_dragging/columns_dragging';
 import { View } from '../core/view';
+import { Headers } from './headers';
 
 export class HeadersView extends View {
-  private readonly draggingAreaRef = createRef<HTMLDivElement>();
-
-  private draggingAreaElements: RefObject<HTMLDivElement>[] = [];
-
   public vdom = computed(
-    (columns) => {
-      this.draggingAreaElements = columns.map(() => createRef());
-      return <div ref={this.draggingAreaRef}>
-        {columns.map((c, index) => (
-          <div ref={this.draggingAreaElements[index]}>{c.name}</div>
-        ))}
-      </div>;
-    },
+    (columns) => <Headers columns={columns} />,
     [this.columnsController.columns],
   );
 
-  public static dependencies = [ColumnsController, ColumnsDraggingController] as const;
+  public static dependencies = [ColumnsController] as const;
 
   constructor(
     private readonly columnsController: ColumnsController,
-    private readonly columnsDragging: ColumnsDraggingController,
   ) {
     super();
-    // TODO: move to onMounted
-    // setTimeout(() => {
-    //   this.registerDragging();
-    // }, 1000);
-  }
-
-  private registerDragging(): void {
-    this.columnsDragging.registerDraggingArea({
-      draggingArea: this.draggingAreaRef.current!,
-      draggingElements: this.draggingAreaElements.map((r, i) => ({
-        element: r.current!,
-        index: i,
-        column: undefined as any,
-      })),
-      draggedInto: this.draggedInto.bind(this),
-      draggedOut: this.draggedOut.bind(this),
-      draggingStart: this.draggingStart.bind(this),
-      draggingCancel: this.draggingCancel.bind(this),
-      draggingHover: this.draggingHover.bind(this),
-      getHoverIndex: this.getHoverIndex.bind(this),
-    });
-  }
-
-  private draggedInto() { }
-
-  private draggedOut() { }
-
-  private draggingStart() { }
-
-  private draggingCancel() { }
-
-  private draggingHover() { }
-
-  private getHoverIndex(): number {
-    throw new Error('not implemented');
   }
 }
diff --git a/packages/devextreme/js/__internal/tsconfig.json b/packages/devextreme/js/__internal/tsconfig.json
@@ -39,7 +39,7 @@
         "./__internal/*"
       ],
     },
-    "types": []
+    "types": ["jest"]
   },
   "tsc-alias": {
     "verbose": false,

diff --git a/packages/devextreme/playground/themeSelector.js b/packages/devextreme/playground/themeSelector.js
@@ -8,42 +8,42 @@ const themeList = [
         group: 'Fluent',
         list: [
             { theme: 'fluent.blue.light' },
-            { theme: 'fluent.blue.light.compact' },
-            { theme: 'fluent.blue.dark' },
-            { theme: 'fluent.blue.dark.compact' },
-            { theme: 'fluent.saas.light' },
-            { theme: 'fluent.saas.light.compact' },
-            { theme: 'fluent.saas.dark' },
-            { theme: 'fluent.saas.dark.compact' },
+            // { theme: 'fluent.blue.light.compact' },
+            // { theme: 'fluent.blue.dark' },
+            // { theme: 'fluent.blue.dark.compact' },
+            // { theme: 'fluent.saas.light' },
+            // { theme: 'fluent.saas.light.compact' },
+            // { theme: 'fluent.saas.dark' },
+            // { theme: 'fluent.saas.dark.compact' },
         ]
     },
 
     {
         group: 'Material',
         list: [
-            { theme: 'material.purple.dark.compact' },
-            { theme: 'material.purple.dark' },
-            { theme: 'material.purple.light.compact' },
-            { theme: 'material.purple.light' },
+            // { theme: 'material.purple.dark.compact' },
+            // { theme: 'material.purple.dark' },
+            // { theme: 'material.purple.light.compact' },
+            // { theme: 'material.purple.light' },
 
-            { theme: 'material.teal.dark.compact' },
-            { theme: 'material.teal.dark' },
-            { theme: 'material.teal.light.compact' },
-            { theme: 'material.teal.light' },
+            // { theme: 'material.teal.dark.compact' },
+            // { theme: 'material.teal.dark' },
+            // { theme: 'material.teal.light.compact' },
+            // { theme: 'material.teal.light' },
 
-            { theme: 'material.orange.dark.compact' },
-            { theme: 'material.orange.dark' },
-            { theme: 'material.orange.light.compact' },
-            { theme: 'material.orange.light' },
+            // { theme: 'material.orange.dark.compact' },
+            // { theme: 'material.orange.dark' },
+            // { theme: 'material.orange.light.compact' },
+            // { theme: 'material.orange.light' },
 
-            { theme: 'material.lime.dark.compact' },
-            { theme: 'material.lime.dark' },
-            { theme: 'material.lime.light.compact' },
-            { theme: 'material.lime.light' },
+            // { theme: 'material.lime.dark.compact' },
+            // { theme: 'material.lime.dark' },
+            // { theme: 'material.lime.light.compact' },
+            // { theme: 'material.lime.light' },
 
-            { theme: 'material.blue.dark.compact' },
-            { theme: 'material.blue.dark' },
-            { theme: 'material.blue.light.compact' },
+            // { theme: 'material.blue.dark.compact' },
+            // { theme: 'material.blue.dark' },
+            // { theme: 'material.blue.light.compact' },
             { theme: 'material.blue.light' },
         ]
     },
@@ -52,21 +52,21 @@ const themeList = [
         group: 'Generic',
         list: [
             { theme: 'light' },
-            { theme: 'light.compact' },
-            { theme: 'carmine.compact' },
-            { theme: 'carmine' },
-            { theme: 'contrast.compact' },
-            { theme: 'contrast' },
-            { theme: 'dark.compact' },
-            { theme: 'dark' },
-            { theme: 'darkmoon.compact' },
-            { theme: 'darkmoon' },
-            { theme: 'darkviolet.compact' },
-            { theme: 'darkviolet' },
-            { theme: 'softblue.compact' },
-            { theme: 'softblue' },
-            { theme: 'greenmist.compact' },
-            { theme: 'greenmist' },
+            // { theme: 'light.compact' },
+            // { theme: 'carmine.compact' },
+            // { theme: 'carmine' },
+            // { theme: 'contrast.compact' },
+            // { theme: 'contrast' },
+            // { theme: 'dark.compact' },
+            // { theme: 'dark' },
+            // { theme: 'darkmoon.compact' },
+            // { theme: 'darkmoon' },
+            // { theme: 'darkviolet.compact' },
+            // { theme: 'darkviolet' },
+            // { theme: 'softblue.compact' },
+            // { theme: 'softblue' },
+            // { theme: 'greenmist.compact' },
+            // { theme: 'greenmist' },
         ]
     },
 ];