-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
16 changed files
with
255 additions
and
6 deletions.
There are no files selected for viewing
8 changes: 8 additions & 0 deletions
8
apps/demo/src/app/modules/doc/modules/extension/component/widget.example.component.html
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,8 @@ | ||
<div> | ||
<p>Example Widget - Type: "{{ type }}"</p> | ||
<p> | ||
Icon: | ||
<mat-icon>{{ icon }}</mat-icon> | ||
</p> | ||
<p>Data: {{ data | json }}</p> | ||
</div> |
20 changes: 20 additions & 0 deletions
20
apps/demo/src/app/modules/doc/modules/extension/component/widget.example.component.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,20 @@ | ||
import { OnInit, Component } from '@angular/core'; | ||
import { AbstractDbxWidgetComponent } from '@dereekb/dbx-web'; | ||
|
||
export const DOC_EXTENSION_WIDGET_EXAMPLE_TYPE = 'widgetExample'; | ||
|
||
export interface DocExtensionWidgetExampleData { | ||
icon: string; | ||
data: object; | ||
} | ||
|
||
@Component({ | ||
templateUrl: './widget.example.component.html' | ||
}) | ||
export class DocExtensionWidgetExampleComponent extends AbstractDbxWidgetComponent<DocExtensionWidgetExampleData> { | ||
readonly type = DOC_EXTENSION_WIDGET_EXAMPLE_TYPE; | ||
|
||
get icon() { | ||
return this.data.icon; | ||
} | ||
} |
18 changes: 18 additions & 0 deletions
18
apps/demo/src/app/modules/doc/modules/extension/container/widget.component.html
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,18 @@ | ||
<dbx-content-container> | ||
<doc-feature-layout header="Widget Extension" hint=""> | ||
<!-- Examples --> | ||
<doc-feature-example header="dbx-widget-view" hint="Used to render a pre-configured widget based on the input data."> | ||
<h2>Example with data</h2> | ||
<p>The input config has a type that instructs which widget to inject into the view, and passes the data field directly.</p> | ||
<p>Input Config: {{ examplePair | json }}</p> | ||
<dbx-content-border> | ||
<dbx-widget-view [config]="examplePair"></dbx-widget-view> | ||
</dbx-content-border> | ||
<h2>Example without data</h2> | ||
<p>When not given content, the widget produces no visual output.</p> | ||
<dbx-content-border> | ||
<dbx-widget-view></dbx-widget-view> | ||
</dbx-content-border> | ||
</doc-feature-example> | ||
</doc-feature-layout> | ||
</dbx-content-container> |
20 changes: 20 additions & 0 deletions
20
apps/demo/src/app/modules/doc/modules/extension/container/widget.component.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,20 @@ | ||
import { OnInit, Component } from '@angular/core'; | ||
import { DbxWidgetDataPair } from '@dereekb/dbx-web'; | ||
import { DocExtensionWidgetExampleData, DOC_EXTENSION_WIDGET_EXAMPLE_TYPE } from '../component/widget.example.component'; | ||
|
||
@Component({ | ||
templateUrl: './widget.component.html' | ||
}) | ||
export class DocExtensionWidgetComponent implements OnInit { | ||
readonly examplePair: DbxWidgetDataPair = { | ||
type: DOC_EXTENSION_WIDGET_EXAMPLE_TYPE, | ||
data: { | ||
icon: 'code', | ||
data: { | ||
test: true | ||
} | ||
} as DocExtensionWidgetExampleData | ||
}; | ||
|
||
ngOnInit(): void {} | ||
} |
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
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 |
---|---|---|
@@ -1 +1,2 @@ | ||
export * from './calendar'; | ||
export * from './widget'; |
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,6 @@ | ||
export * from './widget'; | ||
export * from './widget.component'; | ||
export * from './widget.directive'; | ||
// export * from './widget.list.component'; | ||
export * from './widget.module'; | ||
export * from './widget.service'; |
52 changes: 52 additions & 0 deletions
52
packages/dbx-web/src/lib/extension/widget/widget.component.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,52 @@ | ||
import { Observable, BehaviorSubject, map } from 'rxjs'; | ||
import { Component, Input, OnDestroy } from '@angular/core'; | ||
import { Maybe } from '@dereekb/util'; | ||
import { DbxInjectionComponentConfig } from '@dereekb/dbx-core'; | ||
import { DbxWidgetDataPair } from './widget'; | ||
import { DbxWidgetService } from './widget.service'; | ||
|
||
/** | ||
* Used to display a corresponding widget based on the input data. | ||
*/ | ||
@Component({ | ||
selector: 'dbx-widget-view', | ||
template: ` | ||
<dbx-injection [config]="config$ | async"></dbx-injection> | ||
`, | ||
host: { | ||
class: 'dbx-widget-view' | ||
} | ||
}) | ||
export class DbxWidgetViewComponent implements OnDestroy { | ||
private _config = new BehaviorSubject<Maybe<DbxWidgetDataPair>>(undefined); | ||
|
||
readonly config$: Observable<Maybe<DbxInjectionComponentConfig>> = this._config.pipe( | ||
map((pair: Maybe<DbxWidgetDataPair>) => { | ||
let config: Maybe<DbxInjectionComponentConfig>; | ||
|
||
if (pair != null) { | ||
const entry = this.dbxWidgetService.getWidgetEntry(pair.type); | ||
|
||
if (entry) { | ||
config = { | ||
componentClass: entry.componentClass, | ||
data: pair.data | ||
}; | ||
} | ||
} | ||
|
||
return config; | ||
}) | ||
); | ||
|
||
constructor(readonly dbxWidgetService: DbxWidgetService) {} | ||
|
||
ngOnDestroy(): void { | ||
this._config.complete(); | ||
} | ||
|
||
@Input() | ||
set config(config: Maybe<DbxWidgetDataPair>) { | ||
this._config.next(config); | ||
} | ||
} |
7 changes: 7 additions & 0 deletions
7
packages/dbx-web/src/lib/extension/widget/widget.directive.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,7 @@ | ||
import { Directive, Inject } from '@angular/core'; | ||
import { DBX_INJECTION_COMPONENT_DATA } from '@dereekb/dbx-core'; | ||
|
||
@Directive() | ||
export abstract class AbstractDbxWidgetComponent<T> { | ||
constructor(@Inject(DBX_INJECTION_COMPONENT_DATA) readonly data: T) {} | ||
} |
Empty file.
18 changes: 18 additions & 0 deletions
18
packages/dbx-web/src/lib/extension/widget/widget.module.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,18 @@ | ||
import { CommonModule } from '@angular/common'; | ||
import { NgModule } from '@angular/core'; | ||
import { DbxInjectionComponentModule } from '@dereekb/dbx-core'; | ||
import { DbxWidgetViewComponent } from './widget.component'; | ||
|
||
/** | ||
* Contains components related to displaying "widgets" for pieces of data. | ||
*/ | ||
@NgModule({ | ||
imports: [ | ||
// | ||
CommonModule, | ||
DbxInjectionComponentModule | ||
], | ||
declarations: [DbxWidgetViewComponent], | ||
exports: [DbxWidgetViewComponent] | ||
}) | ||
export class DbxWidgetModule {} |
52 changes: 52 additions & 0 deletions
52
packages/dbx-web/src/lib/extension/widget/widget.service.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,52 @@ | ||
import { Inject, Injectable, Optional, Type } from '@angular/core'; | ||
import { Maybe, filterMaybeValues, mapIterable } from '@dereekb/util'; | ||
import { DbxWidgetType } from './widget'; | ||
|
||
export interface DbxWidgetEntry { | ||
/** | ||
* Widget type to respond to. | ||
*/ | ||
readonly type: DbxWidgetType; | ||
/** | ||
* Widget component class to use. | ||
*/ | ||
readonly componentClass: Type<unknown>; | ||
} | ||
|
||
/** | ||
* Service used to register widgets. | ||
*/ | ||
@Injectable({ | ||
providedIn: 'root' | ||
}) | ||
export class DbxWidgetService { | ||
private _entries = new Map<DbxWidgetType, DbxWidgetEntry>(); | ||
|
||
/** | ||
* Used to register an entry. If an entry with the same type is already registered, this will override it by default. | ||
* | ||
* @param entry | ||
* @param override | ||
*/ | ||
register(entry: DbxWidgetEntry, override: boolean = true): boolean { | ||
if (override || !this._entries.has(entry.type)) { | ||
this._entries.set(entry.type, entry); | ||
return true; | ||
} else { | ||
return false; | ||
} | ||
} | ||
|
||
// MARK: Get | ||
getWidgetIdentifiers(): DbxWidgetType[] { | ||
return Array.from(this._entries.keys()); | ||
} | ||
|
||
getWidgetEntry(type: DbxWidgetType): Maybe<DbxWidgetEntry> { | ||
return this._entries.get(type); | ||
} | ||
|
||
getWidgetEntries(types: Iterable<DbxWidgetType>): DbxWidgetEntry[] { | ||
return filterMaybeValues(mapIterable(types ?? [], (x) => this._entries.get(x))); | ||
} | ||
} |
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,16 @@ | ||
import { ModelTypeDataPair, TypedModel, MapFunction, ReadKeyFunction } from '@dereekb/util'; | ||
|
||
/** | ||
* Widget type identifier | ||
*/ | ||
export type DbxWidgetType = string; | ||
|
||
/** | ||
* Type and data pair for a DbxWidget. | ||
*/ | ||
export type DbxWidgetDataPair<T = unknown> = ModelTypeDataPair<T>; | ||
|
||
/** | ||
* Used for converting the input data into a DbxWidgetDataPair value. | ||
*/ | ||
export type DbxWidgetDataPairFactory<T> = MapFunction<T, DbxWidgetDataPair<T>>; |