Merge pull request #54 from mikproto/master

Minor fixes on focus
revolist · Sep 30, 2020 · e0d780b · e0d780b
2 parents c0f03ce + f80de81
commit e0d780b
Show file tree

Hide file tree

Showing 12 changed files with 22 additions and 21 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@revolist/revogrid",
-  "version": "1.5.16",
+  "version": "1.5.17",
   "description": "Virtual reactive data grid component - RevoGrid.",
   "license": "MIT",
   "bugs": {

diff --git a/src/components.d.ts b/src/components.d.ts
@@ -279,7 +279,7 @@ declare namespace LocalJSX {
         /**
           * Before cell focus changed. Use e.preventDefault() to prevent cell focus change.
          */
-        "onBeforeCellFocus"?: (event: CustomEvent<Selection.FocusedCells>) => void;
+        "onBeforeCellFocus"?: (event: CustomEvent<Edition.BeforeSaveDataDetails>) => void;
         /**
           * Before edit event. Triggered before edit data applied. Use e.preventDefault() to prevent edit data set and use you own.  Use e.val = {your value} to replace edit result with your own.
          */
@@ -431,7 +431,7 @@ declare namespace LocalJSX {
         "onChangeSelection"?: (event: CustomEvent<{changes: Partial<Selection.Cell>; isMulti?: boolean; }>) => void;
         "onFocusCell"?: (event: CustomEvent<Selection.FocusedCells>) => void;
         "onInternalCellEdit"?: (event: CustomEvent<Edition.BeforeSaveDataDetails>) => void;
-        "onInternalFocusCell"?: (event: CustomEvent<Selection.FocusedCells>) => void;
+        "onInternalFocusCell"?: (event: CustomEvent<Edition.BeforeSaveDataDetails>) => void;
         /**
           * Range data apply
          */

diff --git a/src/components/data/columnService.ts b/src/components/data/columnService.ts
@@ -96,8 +96,11 @@ export default class ColumnService implements ColumnServiceI {
     return ColumnService.getData(model[prop as number]);
   }
 
-  getSaveData(rowIndex: number, c: number, val: string): BeforeSaveDataDetails {
+  getSaveData(rowIndex: number, c: number, val?: string): BeforeSaveDataDetails {
     const {prop, model } = this.rowDataModel(rowIndex, c);
+    if (typeof val === 'undefined') {
+      val = this.getCellData(rowIndex, c)
+    }
     return { prop, rowIndex, val, model, type: this.dataStore.get('type')};
   }
 
@@ -198,7 +201,7 @@ export default class ColumnService implements ColumnServiceI {
     return toCopy;
   }
 
-  static getData(val: any): string {
+  static getData(val?: any): string {
     if (typeof val === 'undefined' || val === null) {
       return '';
     }

diff --git a/src/components/data/revogr-data-style.scss b/src/components/data/revogr-data-style.scss
@@ -50,5 +50,8 @@ revogr-data {
 		position: absolute;
 		box-sizing: border-box;
 		height: 100%;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
 	}
 }
diff --git a/src/components/overlay/readme.md b/src/components/overlay/readme.md
@@ -27,8 +27,8 @@
 | -------------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `changeSelection`          |                         | `CustomEvent<{ changes: Partial<Cell>; isMulti?: boolean; }>`                                                                                                            |
 | `focusCell`                |                         | `CustomEvent<{ focus: Cell; end: Cell; }>`                                                                                                                               |
-| `internalCellEdit`         |                         | `CustomEvent<{ prop: ColumnProp; model: DataType; val: string; rowIndex: number; type: DimensionRows; }>`                                                                |
-| `internalFocusCell`        |                         | `CustomEvent<{ focus: Cell; end: Cell; }>`                                                                                                                               |
+| `internalCellEdit`         |                         | `CustomEvent<{ prop: ColumnProp; model: DataType; val?: string; rowIndex: number; type: DimensionRows; }>`                                                               |
+| `internalFocusCell`        |                         | `CustomEvent<{ prop: ColumnProp; model: DataType; val?: string; rowIndex: number; type: DimensionRows; }>`                                                               |
 | `internalRangeDataApply`   | Range data apply        | `CustomEvent<{ data: DataLookup; type: DimensionRows; }>`                                                                                                                |
 | `internalSelectionChanged` | Selection range changed | `CustomEvent<{ type: DimensionRows; newRange: RangeArea; oldRange: RangeArea; newProps: ColumnProp[]; oldProps: ColumnProp[]; newData: { [key: number]: DataType; }; }>` |
 | `setEdit`                  |                         | `CustomEvent<boolean \| string>`                                                                                                                                         |

diff --git a/src/components/overlay/revogr-overlay-selection.tsx b/src/components/overlay/revogr-overlay-selection.tsx
@@ -65,7 +65,7 @@ export class OverlaySelection {
   }
 
   @Event({ cancelable: true }) internalCellEdit: EventEmitter<Edition.BeforeSaveDataDetails>;
-  @Event({ cancelable: true }) internalFocusCell: EventEmitter<Selection.FocusedCells>;
+  @Event({ cancelable: true }) internalFocusCell: EventEmitter<Edition.BeforeSaveDataDetails>;
 
   @Event({ bubbles: false }) setEdit: EventEmitter<string|boolean>;
   @Event({ bubbles: false }) changeSelection: EventEmitter<{changes: Partial<Selection.Cell>; isMulti?: boolean; }>;
@@ -182,14 +182,13 @@ export class OverlaySelection {
       change: (changes, isMulti?) => this.changeSelection?.emit({ changes, isMulti }),
       focus: (focus, end) => {
         const focused = { focus, end };
-        const {defaultPrevented} = this.internalFocusCell.emit();
+        const {defaultPrevented} = this.internalFocusCell.emit(this.columnService.getSaveData(focus.y, focus.x));
         if (defaultPrevented) {
           return;
         }
         this.focusCell.emit(focused);
       },
       unregister: () => this.unregister?.emit()
-
     });
     this.selectionService = new CellSelectionService({
       canRange: this.range,

diff --git a/src/components/revo-grid/readme.md b/src/components/revo-grid/readme.md
@@ -29,10 +29,10 @@
 
 | Event             | Description                                                                                                                                                                             | Type                                                                                                                                                                     |
 | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `afterEdit`       | After edit. Triggered when after data applied.                                                                                                                                          | `CustomEvent<{ prop: ColumnProp; model: DataType; val: string; rowIndex: number; type: DimensionRows; }>`                                                                |
+| `afterEdit`       | After edit. Triggered when after data applied.                                                                                                                                          | `CustomEvent<{ prop: ColumnProp; model: DataType; val?: string; rowIndex: number; type: DimensionRows; }>`                                                               |
 | `beforeAutofill`  | Before autofill. Triggered before autofill applied. Use e.preventDefault() to prevent edit data apply.                                                                                  | `CustomEvent<{ type: DimensionRows; newRange: RangeArea; oldRange: RangeArea; newProps: ColumnProp[]; oldProps: ColumnProp[]; newData: { [key: number]: DataType; }; }>` |
-| `beforeCellFocus` | Before cell focus changed. Use e.preventDefault() to prevent cell focus change.                                                                                                         | `CustomEvent<{ focus: Cell; end: Cell; }>`                                                                                                                               |
-| `beforeEdit`      | Before edit event. Triggered before edit data applied. Use e.preventDefault() to prevent edit data set and use you own.  Use e.val = {your value} to replace edit result with your own. | `CustomEvent<{ prop: ColumnProp; model: DataType; val: string; rowIndex: number; type: DimensionRows; }>`                                                                |
+| `beforeCellFocus` | Before cell focus changed. Use e.preventDefault() to prevent cell focus change.                                                                                                         | `CustomEvent<{ prop: ColumnProp; model: DataType; val?: string; rowIndex: number; type: DimensionRows; }>`                                                               |
+| `beforeEdit`      | Before edit event. Triggered before edit data applied. Use e.preventDefault() to prevent edit data set and use you own.  Use e.val = {your value} to replace edit result with your own. | `CustomEvent<{ prop: ColumnProp; model: DataType; val?: string; rowIndex: number; type: DimensionRows; }>`                                                               |
 | `beforeRange`     | Before range apply. Triggered before range applied. Use e.preventDefault() to prevent range.                                                                                            | `CustomEvent<{ type: DimensionRows; newRange: RangeArea; oldRange: RangeArea; newProps: ColumnProp[]; oldProps: ColumnProp[]; newData: { [key: number]: DataType; }; }>` |
 | `beforeRangeEdit` | Before range edit event. Triggered before range data applied, when range selection happened. Use e.preventDefault() to prevent edit data set and use you own.                           | `CustomEvent<{ data: DataLookup; type: DimensionRows; }>`                                                                                                                |
 | `headerClick`     | On header click.                                                                                                                                                                        | `CustomEvent<ColumnRegular>`                                                                                                                                             |

diff --git a/src/components/revo-grid/revo-grid.compact.scss b/src/components/revo-grid/revo-grid.compact.scss
@@ -62,8 +62,6 @@ revo-grid[theme="compact"] {
 			.data-cell {
 				box-shadow: $cell-shadow-cell;
 				padding: 0 15px;
-				overflow: hidden;
-				text-overflow: ellipsis;
 				color: rgba(black, .87);
 
 				&.disabled {

diff --git a/src/components/revo-grid/revo-grid.material.scss b/src/components/revo-grid/revo-grid.material.scss
@@ -62,8 +62,6 @@ revo-grid[theme="material"] {
 			.data-cell {
 				box-shadow: $cell-shadow-cell;
 				padding: 0 15px;
-				overflow: hidden;
-				text-overflow: ellipsis;
 				color: rgba(black, .87);
 
 				&.disabled {

diff --git a/src/components/revo-grid/revo-grid.tsx b/src/components/revo-grid/revo-grid.tsx
@@ -155,7 +155,7 @@ export class RevoGridComponent {
    * Before cell focus changed.
    * Use e.preventDefault() to prevent cell focus change. 
    */
-  @Event() beforeCellFocus: EventEmitter<Selection.FocusedCells>;
+  @Event() beforeCellFocus: EventEmitter<Edition.BeforeSaveDataDetails>;
 
 
 
@@ -287,7 +287,7 @@ export class RevoGridComponent {
   }
 
   @Listen('internalFocusCell')
-  onCellFocus(e: CustomEvent<Selection.FocusedCells>): void {
+  onCellFocus(e: CustomEvent<Edition.BeforeSaveDataDetails>): void {
     e.cancelBubble = true;
     const {defaultPrevented} = this.beforeCellFocus.emit(e.detail);
     if (!this.canFocus || defaultPrevented) {

diff --git a/src/components/viewport/revogr-viewport-scroll-style.scss b/src/components/viewport/revogr-viewport-scroll-style.scss
@@ -54,7 +54,7 @@ revogr-viewport-scroll {
     }
 
 
-    revogr-data {
+    revogr-data, revogr-overlay-selection {
       height: 100%;
     }
   }

diff --git a/src/interfaces.d.ts b/src/interfaces.d.ts
@@ -257,7 +257,7 @@ export declare namespace Edition {
   type BeforeSaveDataDetails = {
     prop: RevoGrid.ColumnProp;
     model: RevoGrid.DataType;
-    val: SaveData;
+    val?: SaveData;
     rowIndex: number;
     type: RevoGrid.DimensionRows;
   };
-Original file line number
+Diff line change
@@ Expand Up / @@ -54,7 +54,7 @@ revogr-viewport-scroll { @@
         }
-        revogr-data {
+        revogr-data, revogr-overlay-selection {
           height: 100%;
         }
       }
@@ Expand Down @@