From d954c07d4ef70e4cecea259f0069c913d5ffa73d Mon Sep 17 00:00:00 2001 From: xelaint Date: Fri, 20 Dec 2019 13:24:36 +0800 Subject: [PATCH 1/2] feat(design): add prefix/suffix directives to core --- .../prefix-suffix/prefix-suffix.module.ts | 17 ++++++ .../core/prefix-suffix/prefix.directive.ts | 15 +++++ .../prefixable/prefixable-interface.ts | 9 +++ .../prefixable/prefixable.spec.ts | 60 +++++++++++++++++++ .../prefix-suffix/prefixable/prefixable.ts | 23 +++++++ .../src/core/prefix-suffix/public_api.ts | 7 +++ .../core/prefix-suffix/suffix.directive.ts | 15 +++++ .../suffixable/suffixable-interface.ts | 9 +++ .../suffixable/suffixable.spec.ts | 60 +++++++++++++++++++ .../prefix-suffix/suffixable/suffixable.ts | 22 +++++++ 10 files changed, 237 insertions(+) create mode 100644 libs/design/src/core/prefix-suffix/prefix-suffix.module.ts create mode 100644 libs/design/src/core/prefix-suffix/prefix.directive.ts create mode 100644 libs/design/src/core/prefix-suffix/prefixable/prefixable-interface.ts create mode 100644 libs/design/src/core/prefix-suffix/prefixable/prefixable.spec.ts create mode 100644 libs/design/src/core/prefix-suffix/prefixable/prefixable.ts create mode 100644 libs/design/src/core/prefix-suffix/public_api.ts create mode 100644 libs/design/src/core/prefix-suffix/suffix.directive.ts create mode 100644 libs/design/src/core/prefix-suffix/suffixable/suffixable-interface.ts create mode 100644 libs/design/src/core/prefix-suffix/suffixable/suffixable.spec.ts create mode 100644 libs/design/src/core/prefix-suffix/suffixable/suffixable.ts diff --git a/libs/design/src/core/prefix-suffix/prefix-suffix.module.ts b/libs/design/src/core/prefix-suffix/prefix-suffix.module.ts new file mode 100644 index 0000000000..3c815103a1 --- /dev/null +++ b/libs/design/src/core/prefix-suffix/prefix-suffix.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; + +import { DaffPrefixDirective } from './prefix.directive'; +import { DaffSuffixDirective } from './suffix.directive'; + +@NgModule({ + imports: [], + exports: [ + DaffPrefixDirective, + DaffSuffixDirective + ], + declarations: [ + DaffPrefixDirective, + DaffSuffixDirective + ] +}) +export class DaffPrefixSuffixModule {} diff --git a/libs/design/src/core/prefix-suffix/prefix.directive.ts b/libs/design/src/core/prefix-suffix/prefix.directive.ts new file mode 100644 index 0000000000..8719a13079 --- /dev/null +++ b/libs/design/src/core/prefix-suffix/prefix.directive.ts @@ -0,0 +1,15 @@ +import { Directive, HostBinding } from '@angular/core'; + +/** + * + * Prefix can be used to place content before another piece of content in components like + * `daff-form-field`, `daff-solo-field`, and `daff-list`. + */ +@Directive({ + selector: '[daffPrefix]' +}) + +export class DaffPrefixDirective { + + @HostBinding('class.daff-prefix') class = true; +} diff --git a/libs/design/src/core/prefix-suffix/prefixable/prefixable-interface.ts b/libs/design/src/core/prefix-suffix/prefixable/prefixable-interface.ts new file mode 100644 index 0000000000..628542407b --- /dev/null +++ b/libs/design/src/core/prefix-suffix/prefixable/prefixable-interface.ts @@ -0,0 +1,9 @@ +import { DaffPrefixDirective } from '../prefix.directive'; + +/** + * An interface enforcing that a component will manage a given DaffPrefixDirective. + */ +export interface DaffPrefixable { + + _prefix: DaffPrefixDirective; +} diff --git a/libs/design/src/core/prefix-suffix/prefixable/prefixable.spec.ts b/libs/design/src/core/prefix-suffix/prefixable/prefixable.spec.ts new file mode 100644 index 0000000000..4cb0c77779 --- /dev/null +++ b/libs/design/src/core/prefix-suffix/prefixable/prefixable.spec.ts @@ -0,0 +1,60 @@ +import { Component } from '@angular/core'; +import { ReactiveFormsModule } from '@angular/forms'; +import { ComponentFixture, async, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; + +import { daffPrefixableMixin } from './prefixable'; +import { DaffPrefixSuffixModule } from '../prefix-suffix.module'; +import { DaffPrefixDirective } from '../prefix.directive'; + +class PrefixableComponentBase {} + +const _prefixableComponentBase = daffPrefixableMixin(PrefixableComponentBase); + +@Component({ + selector: 'daff-prefixable', + template: '' +}) +class PrefixableComponent extends _prefixableComponentBase {} + +@Component({ + template: '
' +}) +class WrapperComponent {} + + +describe('daffPrefixableMixin', () => { + let fixture: ComponentFixture; + let wrapper: WrapperComponent; + let prefixableComponent: PrefixableComponent; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [ + ReactiveFormsModule, + DaffPrefixSuffixModule + ], + declarations: [ + WrapperComponent, + PrefixableComponent + ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(WrapperComponent); + wrapper = fixture.componentInstance; + fixture.detectChanges(); + + prefixableComponent = fixture.debugElement.query(By.css('daff-prefixable')).componentInstance; + }); + + it('should add a _prefix property to an existing class', () => { + expect('_prefix' in prefixableComponent).toBeTruthy(); + }); + + it('should make the _prefix property the daffPrefix directive instance', () => { + expect(prefixableComponent._prefix).toEqual(jasmine.any(DaffPrefixDirective)); + }); +}); diff --git a/libs/design/src/core/prefix-suffix/prefixable/prefixable.ts b/libs/design/src/core/prefix-suffix/prefixable/prefixable.ts new file mode 100644 index 0000000000..5958c85c09 --- /dev/null +++ b/libs/design/src/core/prefix-suffix/prefixable/prefixable.ts @@ -0,0 +1,23 @@ +import { ContentChild } from '@angular/core'; +import { DaffPrefixDirective } from '../prefix.directive'; +import { Constructor } from '../../constructor'; + + +/** + * A mixin for giving a form control component a prefixed symbol. + * + * This should be a trait, but typescript only supports mixins. + * See: https://github.com/Microsoft/TypeScript/issues/311 + */ +export function daffPrefixableMixin(Base: T) { + class Prefixable extends Base { + + @ContentChild(DaffPrefixDirective, { static: true}) _prefix: DaffPrefixDirective; + + constructor(...args: any[]) { + super(...args); + } + } + + return Prefixable; +} diff --git a/libs/design/src/core/prefix-suffix/public_api.ts b/libs/design/src/core/prefix-suffix/public_api.ts new file mode 100644 index 0000000000..12d63b8567 --- /dev/null +++ b/libs/design/src/core/prefix-suffix/public_api.ts @@ -0,0 +1,7 @@ +export * from './prefix-suffix.module'; +export * from './prefix.directive'; +export * from './suffix.directive'; +export { daffSuffixableMixin } from './suffixable/suffixable'; +export { DaffSuffixable } from './suffixable/suffixable-interface'; +export { DaffPrefixable } from './prefixable/prefixable-interface'; +export { daffPrefixableMixin } from './prefixable/prefixable'; diff --git a/libs/design/src/core/prefix-suffix/suffix.directive.ts b/libs/design/src/core/prefix-suffix/suffix.directive.ts new file mode 100644 index 0000000000..8c5f084294 --- /dev/null +++ b/libs/design/src/core/prefix-suffix/suffix.directive.ts @@ -0,0 +1,15 @@ +import { Directive, HostBinding } from '@angular/core'; + +/** + * + * Prefix can be used to place content after another piece of content in components like + * `daff-form-field`, `daff-solo-field`, and `daff-list`. + */ +@Directive({ + selector: '[daffSuffix]', +}) + +export class DaffSuffixDirective { + + @HostBinding('class.daff-suffix') class = true; +} diff --git a/libs/design/src/core/prefix-suffix/suffixable/suffixable-interface.ts b/libs/design/src/core/prefix-suffix/suffixable/suffixable-interface.ts new file mode 100644 index 0000000000..23611253e2 --- /dev/null +++ b/libs/design/src/core/prefix-suffix/suffixable/suffixable-interface.ts @@ -0,0 +1,9 @@ +import { DaffSuffixDirective } from '../suffix.directive'; + +/** + * An interface enforcing that a component will manage a given DaffSuffixDirective. + */ +export interface DaffSuffixable { + + _suffix: DaffSuffixDirective; +} diff --git a/libs/design/src/core/prefix-suffix/suffixable/suffixable.spec.ts b/libs/design/src/core/prefix-suffix/suffixable/suffixable.spec.ts new file mode 100644 index 0000000000..47a3108942 --- /dev/null +++ b/libs/design/src/core/prefix-suffix/suffixable/suffixable.spec.ts @@ -0,0 +1,60 @@ +import { Component } from '@angular/core'; +import { ReactiveFormsModule } from '@angular/forms'; +import { ComponentFixture, async, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; + +import { daffSuffixableMixin } from './suffixable'; +import { DaffPrefixSuffixModule } from '../prefix-suffix.module'; +import { DaffSuffixDirective } from '../suffix.directive'; + +class SuffixableComponentBase {} + +const _suffixableComponentBase = daffSuffixableMixin(SuffixableComponentBase); + +@Component({ + selector: 'daff-suffixable', + template: '' +}) +class SuffixableComponent extends _suffixableComponentBase {} + +@Component({ + template: '
' +}) +class WrapperComponent {} + + +describe('daffSuffixableMixin', () => { + let fixture: ComponentFixture; + let wrapper: WrapperComponent; + let suffixableComponent: SuffixableComponent; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [ + ReactiveFormsModule, + DaffPrefixSuffixModule + ], + declarations: [ + WrapperComponent, + SuffixableComponent + ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(WrapperComponent); + wrapper = fixture.componentInstance; + fixture.detectChanges(); + + suffixableComponent = fixture.debugElement.query(By.css('daff-suffixable')).componentInstance; + }); + + it('should add a _suffix property to an existing class', () => { + expect('_suffix' in suffixableComponent).toBeTruthy(); + }); + + it('should make the _suffix property the daffPrefix directive instance', () => { + expect(suffixableComponent._suffix).toEqual(jasmine.any(DaffSuffixDirective)); + }); +}); diff --git a/libs/design/src/core/prefix-suffix/suffixable/suffixable.ts b/libs/design/src/core/prefix-suffix/suffixable/suffixable.ts new file mode 100644 index 0000000000..687801147c --- /dev/null +++ b/libs/design/src/core/prefix-suffix/suffixable/suffixable.ts @@ -0,0 +1,22 @@ +import { ContentChild } from '@angular/core'; +import { DaffSuffixDirective } from '../suffix.directive'; +import { Constructor } from '../../constructor'; + +/** + * A mixin for giving a form control component a prefixed symbol. + * + * This should be a trait, but typescript only supports mixins. + * See: https://github.com/Microsoft/TypeScript/issues/311 + */ +export function daffSuffixableMixin(Base: T) { + class Suffixable extends Base { + + @ContentChild(DaffSuffixDirective, { static: true}) _suffix: DaffSuffixDirective; + + constructor(...args: any[]) { + super(...args); + } + } + + return Suffixable; +} From ff3c4055f1db472ab134dd9440e2b40956fd2b16 Mon Sep 17 00:00:00 2001 From: xelaint Date: Fri, 20 Dec 2019 13:57:47 +0800 Subject: [PATCH 2/2] docs(design): update documentation --- .../core/prefix-suffix/prefixable/prefixable-interface.ts | 2 +- libs/design/src/core/prefix-suffix/prefixable/prefixable.ts | 5 +---- .../core/prefix-suffix/suffixable/suffixable-interface.ts | 2 +- libs/design/src/core/prefix-suffix/suffixable/suffixable.ts | 5 +---- 4 files changed, 4 insertions(+), 10 deletions(-) diff --git a/libs/design/src/core/prefix-suffix/prefixable/prefixable-interface.ts b/libs/design/src/core/prefix-suffix/prefixable/prefixable-interface.ts index 628542407b..ed6e3de858 100644 --- a/libs/design/src/core/prefix-suffix/prefixable/prefixable-interface.ts +++ b/libs/design/src/core/prefix-suffix/prefixable/prefixable-interface.ts @@ -1,7 +1,7 @@ import { DaffPrefixDirective } from '../prefix.directive'; /** - * An interface enforcing that a component will manage a given DaffPrefixDirective. + * An interface enforcing that a component has the ability to interact with a given DaffPrefixDirective. */ export interface DaffPrefixable { diff --git a/libs/design/src/core/prefix-suffix/prefixable/prefixable.ts b/libs/design/src/core/prefix-suffix/prefixable/prefixable.ts index 5958c85c09..ddd57f463f 100644 --- a/libs/design/src/core/prefix-suffix/prefixable/prefixable.ts +++ b/libs/design/src/core/prefix-suffix/prefixable/prefixable.ts @@ -4,10 +4,7 @@ import { Constructor } from '../../constructor'; /** - * A mixin for giving a form control component a prefixed symbol. - * - * This should be a trait, but typescript only supports mixins. - * See: https://github.com/Microsoft/TypeScript/issues/311 + * A mixin for giving a component the ability to place content before another piece of content. */ export function daffPrefixableMixin(Base: T) { class Prefixable extends Base { diff --git a/libs/design/src/core/prefix-suffix/suffixable/suffixable-interface.ts b/libs/design/src/core/prefix-suffix/suffixable/suffixable-interface.ts index 23611253e2..6cbf1b9a5d 100644 --- a/libs/design/src/core/prefix-suffix/suffixable/suffixable-interface.ts +++ b/libs/design/src/core/prefix-suffix/suffixable/suffixable-interface.ts @@ -1,7 +1,7 @@ import { DaffSuffixDirective } from '../suffix.directive'; /** - * An interface enforcing that a component will manage a given DaffSuffixDirective. + * An interface enforcing that a component has the ability to interact with a given DaffSuffixDirective. */ export interface DaffSuffixable { diff --git a/libs/design/src/core/prefix-suffix/suffixable/suffixable.ts b/libs/design/src/core/prefix-suffix/suffixable/suffixable.ts index 687801147c..84321c38f2 100644 --- a/libs/design/src/core/prefix-suffix/suffixable/suffixable.ts +++ b/libs/design/src/core/prefix-suffix/suffixable/suffixable.ts @@ -3,10 +3,7 @@ import { DaffSuffixDirective } from '../suffix.directive'; import { Constructor } from '../../constructor'; /** - * A mixin for giving a form control component a prefixed symbol. - * - * This should be a trait, but typescript only supports mixins. - * See: https://github.com/Microsoft/TypeScript/issues/311 + * A mixin for giving a component the ability to place content after another piece of content. */ export function daffSuffixableMixin(Base: T) { class Suffixable extends Base {