Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(popover-edit): experimental popover edit for tables (mvp)
- Loading branch information
Showing
33 changed files
with
1,899 additions
and
6 deletions.
There are no files selected for viewing
Validating CODEOWNERS rules …
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
package(default_visibility=["//visibility:public"]) | ||
|
||
load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite") | ||
|
||
ng_module( | ||
name = "popover-edit", | ||
srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]), | ||
module_name = "@angular/cdk-experimental/popover-edit", | ||
deps = [ | ||
"@npm//@angular/common", | ||
"@npm//@angular/core", | ||
"@npm//@angular/forms", | ||
"@npm//rxjs", | ||
"//src/cdk/a11y", | ||
"//src/cdk/overlay", | ||
"//src/cdk/portal", | ||
], | ||
) | ||
|
||
ng_test_library( | ||
name = "popover_edit_test_sources", | ||
srcs = glob(["**/*.spec.ts"]), | ||
deps = [ | ||
":popover-edit", | ||
"@npm//@angular/common", | ||
"@npm//@angular/forms", | ||
"@npm//rxjs", | ||
"//src/cdk/collections", | ||
"//src/cdk/table", | ||
], | ||
) | ||
|
||
ng_web_test_suite( | ||
name = "unit_tests", | ||
deps = [":popover_edit_test_sources"] | ||
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
/** | ||
* @license | ||
* Copyright Google LLC All Rights Reserved. | ||
* | ||
* Use of this source code is governed by an MIT-style license that can be | ||
* found in the LICENSE file at https://angular.io/license | ||
*/ | ||
|
||
/** Selector for finding table cells. */ | ||
export const CELL_SELECTOR = '.cdk-cell, .mat-cell, td'; | ||
|
||
/** Selector for finding table rows. */ | ||
export const ROW_SELECTOR = '.cdk-row, .mat-row, tr'; | ||
|
||
/** CSS class added to the edit lens pane. */ | ||
export const EDIT_PANE_CLASS = 'cdk-edit-pane'; | ||
|
||
/** Selector for finding the edit lens pane. */ | ||
export const EDIT_PANE_SELECTOR = '.' + EDIT_PANE_CLASS; |
86 changes: 86 additions & 0 deletions
86
src/cdk-experimental/popover-edit/edit-event-dispatcher.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,86 @@ | ||
/** | ||
* @license | ||
* Copyright Google LLC All Rights Reserved. | ||
* | ||
* Use of this source code is governed by an MIT-style license that can be | ||
* found in the LICENSE file at https://angular.io/license | ||
*/ | ||
|
||
import {Injectable} from '@angular/core'; | ||
import {Observable, Subject, timer} from 'rxjs'; | ||
import {audit, distinctUntilChanged, filter, map, share} from 'rxjs/operators'; | ||
|
||
import {CELL_SELECTOR, ROW_SELECTOR} from './constants'; | ||
import {closest} from './polyfill'; | ||
|
||
/** The delay between mouse out events and hiding hover content. */ | ||
const DEFAULT_MOUSE_OUT_DELAY_MS = 30; | ||
|
||
/** | ||
* Service for sharing delegated events and state for triggering table edits. | ||
*/ | ||
@Injectable() | ||
export class EditEventDispatcher { | ||
/** A subject that indicates which table cell is currently editing. */ | ||
readonly editing = new Subject<Element|null>(); | ||
|
||
/** A subject that indicates which table row is currently hovered. */ | ||
readonly hovering = new Subject<Element|null>(); | ||
|
||
/** A subject that emits mouse move events for table rows. */ | ||
readonly mouseMove = new Subject<Element|null>(); | ||
|
||
/** The table cell that has an active edit lens (or null). */ | ||
private _currentlyEditing: Element|null = null; | ||
|
||
private readonly _hoveringDistinct = this.hovering.pipe(distinctUntilChanged(), share()); | ||
private readonly _editingDistinct = this.editing.pipe(distinctUntilChanged(), share()); | ||
|
||
constructor() { | ||
this._editingDistinct.subscribe(cell => { | ||
this._currentlyEditing = cell; | ||
}); | ||
} | ||
|
||
/** | ||
* Gets an Observable that emits true when the specified element's cell | ||
* is editing and false when not. | ||
*/ | ||
editingCell(element: Element|EventTarget): Observable<boolean> { | ||
let cell: Element|null = null; | ||
|
||
return this._editingDistinct.pipe( | ||
map(editCell => editCell === (cell || (cell = closest(element, CELL_SELECTOR)))), | ||
distinctUntilChanged(), | ||
); | ||
} | ||
|
||
/** | ||
* Stops editing for the specified cell. If the specified cell is not the current | ||
* edit cell, does nothing. | ||
*/ | ||
doneEditingCell(element: Element|EventTarget): void { | ||
const cell = closest(element, CELL_SELECTOR); | ||
|
||
if (this._currentlyEditing === cell) { | ||
this.editing.next(null); | ||
} | ||
} | ||
|
||
/** | ||
* Gets an Observable that emits true when the specified element's row | ||
* is being hovered over and false when not. Hovering is defined as when | ||
* the mouse has momentarily stopped moving over the cell. | ||
*/ | ||
hoveringOnRow(element: Element|EventTarget): Observable<boolean> { | ||
let row: Element|null = null; | ||
|
||
return this._hoveringDistinct.pipe( | ||
map(hoveredRow => hoveredRow === (row || (row = closest(element, ROW_SELECTOR)))), | ||
audit( | ||
(hovering) => hovering ? this.mouseMove.pipe(filter(hoveredRow => hoveredRow === row)) : | ||
timer(DEFAULT_MOUSE_OUT_DELAY_MS)), | ||
distinctUntilChanged(), | ||
); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,77 @@ | ||
/** | ||
* @license | ||
* Copyright Google LLC All Rights Reserved. | ||
* | ||
* Use of this source code is governed by an MIT-style license that can be | ||
* found in the LICENSE file at https://angular.io/license | ||
*/ | ||
|
||
import {Injectable, OnDestroy, Self} from '@angular/core'; | ||
import {ControlContainer} from '@angular/forms'; | ||
import {Subject} from 'rxjs'; | ||
import {take} from 'rxjs/operators'; | ||
|
||
import {EditEventDispatcher} from './edit-event-dispatcher'; | ||
|
||
/** | ||
* Service used for communication between the form within the edit lens and the | ||
* table that launched it. Provided by CdkPopoverEditControl within the lens. | ||
*/ | ||
@Injectable() | ||
export class EditRef<FormValue> implements OnDestroy { | ||
/** Emits the final value of this edit instance before closing. */ | ||
private readonly _finalValueSubject = new Subject<FormValue>(); | ||
readonly finalValue = this._finalValueSubject.asObservable(); | ||
|
||
/** The value to set the form back to on revert. */ | ||
private _revertFormValue: FormValue; | ||
|
||
constructor( | ||
@Self() private readonly _form: ControlContainer, | ||
private readonly _editEventDispatcher: EditEventDispatcher) {} | ||
|
||
/** | ||
* Called by the host directive's OnInit hook. Reads the initial state of the | ||
* form and overrides it with persisted state from previous openings, if | ||
* applicable. | ||
*/ | ||
init(previousFormValue: FormValue|undefined): void { | ||
// Wait for either the first value to be set, then override it with | ||
// the previously entered value, if any. | ||
this._form.valueChanges!.pipe(take(1)).subscribe(() => { | ||
this.updateRevertValue(); | ||
|
||
if (previousFormValue) { | ||
this.reset(previousFormValue); | ||
} | ||
}); | ||
} | ||
|
||
ngOnDestroy(): void { | ||
this._finalValueSubject.next(this._form.value); | ||
this._finalValueSubject.complete(); | ||
} | ||
|
||
/** Whether the attached form is in a valid state. */ | ||
isValid(): boolean|null { | ||
return this._form.valid; | ||
} | ||
|
||
/** Set the form's current value as what it will be set to on revert/reset. */ | ||
updateRevertValue(): void { | ||
this._revertFormValue = this._form.value; | ||
} | ||
|
||
/** Tells the table to close the edit popup. */ | ||
close(): void { | ||
this._editEventDispatcher.editing.next(null); | ||
} | ||
|
||
/** | ||
* Resets the form value to the specified value or the previously set | ||
* revert value. | ||
*/ | ||
reset(value?: FormValue): void { | ||
this._form.reset(value || this._revertFormValue); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
/** | ||
* @license | ||
* Copyright Google LLC All Rights Reserved. | ||
* | ||
* Use of this source code is governed by an MIT-style license that can be | ||
* found in the LICENSE file at https://angular.io/license | ||
*/ | ||
|
||
export * from './public-api'; |
Oops, something went wrong.