feat(popover-edit): experimental popover edit for tables (mvp)

Author: kseamon

.github/CODEOWNERS

@@ -89,6 +89,7 @@
 /src/cdk-experimental/**                           @jelbourn
 /src/cdk-experimental/dialog/**                    @jelbourn @josephperrott @crisbeto
 /src/cdk-experimental/scrolling/**                 @mmalerba
+/src/cdk-experimental/popover-edit/**              @kseamon @andrewseguin
 
 # Docs examples & guides
 /guides/**                                         @jelbourn
@@ -129,6 +130,7 @@
 /src/dev-app/paginator/**                          @andrewseguin
 /src/dev-app/platform/**                           @jelbourn @devversion
 /src/dev-app/portal/**                             @jelbourn
+/src/dev-app/popover-edit/**                       @kseamon @andrewseguin
 /src/dev-app/progress-bar/**                       @jelbourn @crisbeto @josephperrott
 /src/dev-app/progress-spinner/**                   @jelbourn @crisbeto @josephperrott
 /src/dev-app/radio/**                              @jelbourn @devversion

packages.bzl

@@ -24,6 +24,7 @@ CDK_TARGETS = ["//src/cdk"] + ["//src/cdk/%s" % p for p in CDK_PACKAGES]
 
 CDK_EXPERIMENTAL_PACKAGES = [
   "dialog",
+  "popover-edit",
   "scrolling",
 ]
 

src/cdk-experimental/popover-edit/BUILD.bazel

@@ -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"]
+)

src/cdk-experimental/popover-edit/common.ts

@@ -0,0 +1,48 @@
+/**
+ * @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 {ReplaySubject} from 'rxjs';
+import {OnDestroy} from '@angular/core';
+
+export const DEFAULT_HOVER_DELAY_MS = 30;
+
+export const CELL_SELECTOR = '.cdk-cell, .mat-cell, td';
+export const ROW_SELECTOR = '.cdk-row, .mat-row, tr';
+export const EDIT_PANE_CLASS = 'cdk-edit-pane';
+export const EDIT_PANE_SELECTOR = '.' + EDIT_PANE_CLASS;
+
+/** IE 11 compatible matches implementation. */
+export function matches(element: Element, selector: string): boolean {
+  return element.matches ?
+      element.matches(selector) :
+      (element as any)['msMatchesSelector'](selector);
+}
+
+/** IE 11 compatible closest implementation. */
+export function closest(
+    element: EventTarget|Element|null|undefined,
+    selector: string) {
+  if (!(element instanceof Node)) { return null; }
+
+  let curr: Node|null = element;
+  while (curr != null && !(curr instanceof Element && matches(curr, selector))) {
+    curr = curr.parentNode;
+  }
+
+  return (curr || null) as Element|null;
+}
+
+/** Convenience superclass for exposing a destroyed subject member. */
+export abstract class Destroyable implements OnDestroy {
+  protected readonly destroyed = new ReplaySubject<void>();
+
+  ngOnDestroy() {
+    this.destroyed.next();
+    this.destroyed.complete();
+  }
+}

src/cdk-experimental/popover-edit/edit-events.ts

@@ -0,0 +1,75 @@
+/**
+ * @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 {Subject, timer} from 'rxjs';
+import {audit, distinctUntilChanged, filter, map, share} from 'rxjs/operators';
+import {Injectable} from '@angular/core';
+import {closest, CELL_SELECTOR, DEFAULT_HOVER_DELAY_MS, ROW_SELECTOR} from './common';
+
+/**
+ * Service for sharing delegated events and state for triggering edits.
+ */
+@Injectable()
+export class EditEvents {
+  readonly editing = new Subject<Element|null>();
+  readonly hovering = new Subject<Element|null>();
+  readonly mouseMove = new Subject<Element|null>();
+
+  protected currentlyEditing: Element|null = null;
+
+  protected readonly hoveringDistinct = this.hovering.pipe(distinctUntilChanged(), share());
+  protected readonly editingDistinct = this.editing.pipe(distinctUntilChanged(), share());
+
+  constructor() {
+    this.editing.subscribe(cell => {
+      this.currentlyEditing = cell;
+    });
+  }
+
+  /**
+   * Returns an Observable that emits true when the specified element's cell
+   * is editing and false when not.
+   */
+  editingCell(element: Element|EventTarget) {
+    let cell: Element|null = null;
+
+    return this.editing.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) {
+    const cell = closest(element, CELL_SELECTOR);
+
+    if (this.currentlyEditing === cell) {
+      this.editing.next(null);
+    }
+  }
+
+  /**
+   * Returns 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) {
+    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_HOVER_DELAY_MS)),
+        distinctUntilChanged(),
+        );
+  }
+}

src/cdk-experimental/popover-edit/edit-ref.ts

@@ -0,0 +1,74 @@
+/**
+ * @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 {Subject} from 'rxjs';
+import {first} from 'rxjs/operators';
+import {Injectable, OnDestroy, Self} from '@angular/core';
+import {ControlContainer} from '@angular/forms';
+import {EditEvents} from './edit-events';
+
+/**
+ * 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 implements OnDestroy {
+  private readonly _finalValueSubject = new Subject<any>();
+  readonly finalValue = this._finalValueSubject.asObservable();
+
+  private _revertFormValue: any;
+
+  constructor(
+      @Self() private readonly _form: ControlContainer,
+      private readonly _editEvents: EditEvents, ) {}
+
+  /**
+   * 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: any) {
+    // Wait for either the first value to be set, then override it with
+    // the previously entered value, if any.
+    this._form.valueChanges!.pipe(first()).subscribe(() => {
+      this.updateRevertValue();
+
+      if (previousFormValue) {
+        this.reset(previousFormValue);
+      }
+    });
+  }
+
+  ngOnDestroy() {
+    this._finalValueSubject.next(this._form.value);
+    this._finalValueSubject.complete();
+  }
+
+  /** Whether the attached form is in a valid state. */
+  isValid() {
+    return this._form.valid;
+  }
+
+  /** Set the form's current value as what it will be set to on revert/reset. */
+  updateRevertValue() {
+    this._revertFormValue = this._form.value;
+  }
+
+  /** Tells the table to close the edit popup. */
+  close() {
+    this._editEvents.editing.next(null);
+  }
+
+  /**
+   * Resets the form value to the specified value or the previously set
+   * revert value.
+   */
+  reset(value?: any) {
+    this._form.reset(value || this._revertFormValue);
+  }
+}

src/cdk-experimental/popover-edit/index.ts

@@ -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';