forked from NationalBankBelgium/stark
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(stark-ui): add directive for transforming input value before pas…
…sing it to a ngControl - added directive `[starkTransformInput]` - added partial demo - small refactor demo page - added test for directive ISSUES CLOSED: NationalBankBelgium#1099
- Loading branch information
1 parent
7ebcd5a
commit 4393233
Showing
11 changed files
with
236 additions
and
62 deletions.
There are no files selected for viewing
1 change: 1 addition & 0 deletions
1
packages/stark-ui/src/modules/keyboard-directives/directives.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 |
|---|---|---|
| @@ -1,2 +1,3 @@ | ||
| export * from "./directives/on-enter-key.directive"; | ||
| export * from "./directives/restrict-input.directive"; | ||
| export * from "./directives/transform-input.directive"; |
51 changes: 51 additions & 0 deletions
51
...ges/stark-ui/src/modules/keyboard-directives/directives/transform-input.directive.spec.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,51 @@ | ||
| import { Component, DebugElement } from "@angular/core"; | ||
| import { ComponentFixture, TestBed } from "@angular/core/testing"; | ||
| import { FormsModule, ReactiveFormsModule } from "@angular/forms"; | ||
| import { By } from "@angular/platform-browser"; | ||
| import { StarkTransformInputDirective } from "@nationalbankbelgium/stark-ui"; | ||
| import { MockStarkLoggingService } from "@nationalbankbelgium/stark-core/testing"; | ||
| import { STARK_LOGGING_SERVICE } from "@nationalbankbelgium/stark-core"; | ||
|
|
||
| fdescribe("TransformsInputDirective with ngModel", () => { | ||
| @Component({ | ||
| selector: "test-component", | ||
| template: "<input [(ngModel)]='value' [starkTransformInput]='transformation'/>" | ||
| }) | ||
| class TestComponent { | ||
| public value: string = ""; | ||
| public transformation = (value: string) => value.toUpperCase(); | ||
| } | ||
|
|
||
| let fixture: ComponentFixture<TestComponent>; | ||
|
|
||
| beforeEach(() => { | ||
| TestBed.configureTestingModule({ | ||
| declarations: [StarkTransformInputDirective, TestComponent], | ||
| imports: [ | ||
| FormsModule, | ||
| ReactiveFormsModule | ||
| ], | ||
| providers: [ | ||
| { provide: STARK_LOGGING_SERVICE, useValue: new MockStarkLoggingService() } | ||
| ] | ||
| }); | ||
|
|
||
| fixture = TestBed.createComponent(TestComponent); | ||
| // trigger initial data binding | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it("should set the value to uppercase", () => { | ||
| expect(fixture.componentInstance.value).toBe("", "Field 'value' should start as empty string "); | ||
|
|
||
| // Mock input event | ||
| const debugInputElement: DebugElement = fixture.debugElement.query(By.css("input")); | ||
| const inputElement: HTMLInputElement = (<HTMLInputElement>debugInputElement.nativeElement); | ||
| inputElement.value = "a"; | ||
| inputElement.dispatchEvent(new Event("input")); | ||
| fixture.detectChanges(); | ||
|
|
||
| expect(fixture.componentInstance.value).toBe("A", "Field 'value' should have been updated to upper case 'A'"); | ||
| }); | ||
|
|
||
| }); |
93 changes: 93 additions & 0 deletions
93
packages/stark-ui/src/modules/keyboard-directives/directives/transform-input.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,93 @@ | ||
| import { Directive, ElementRef, forwardRef, Input, Renderer2 } from "@angular/core"; | ||
| import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms"; | ||
|
|
||
| export const STARK_TRANSFORM_INPUT_PROVIDER: any = { | ||
| provide: NG_VALUE_ACCESSOR, | ||
| // tslint:disable-next-line:no-forward-ref | ||
| useExisting: forwardRef(() => StarkTransformInputDirective), | ||
| multi: true | ||
| }; | ||
|
|
||
| /** | ||
| * Directive to transform the value of an input / textarea before it is passed on to the ngControl (ngModel, formControl). | ||
| * This is mostly based on {@link: @angular/forms/DefaultValueAccessor} | ||
| */ | ||
| @Directive({ | ||
| // tslint:disable-next-line:directive-selector | ||
| selector: "[starkTransformInput]", | ||
| providers: [STARK_TRANSFORM_INPUT_PROVIDER], | ||
| host: { | ||
| "(input)": "$any(this)._handleInput($event.target.value)", | ||
| "(blur)": "onTouched()" | ||
| } | ||
| }) | ||
| export class StarkTransformInputDirective implements ControlValueAccessor { | ||
| // tslint:disable-next-line:no-input-rename | ||
| @Input("starkTransformInput") | ||
| public transformFunction: (value: any) => any; | ||
|
|
||
| /** | ||
| * The registered callback function called when an input event occurs on the input element. | ||
| */ | ||
| public onChange = (_: any) => {/*noop*/}; | ||
|
|
||
| /** | ||
| * The registered callback function called when a blur event occurs on the input element. | ||
| */ | ||
| public onTouched = () => {/*noop*/}; | ||
|
|
||
| /** | ||
| * Class constructor | ||
| * @param logger - The logger of the application | ||
| * @param _renderer - Angular renderer | ||
| * @param _elementRef - Reference to the element | ||
| */ | ||
| public constructor(private _renderer: Renderer2, | ||
| private _elementRef: ElementRef) { | ||
| } | ||
|
|
||
| /** | ||
| * Sets the "value" property on the input element. | ||
| * | ||
| * @param value The checked value | ||
| */ | ||
| public writeValue(value: any): void { | ||
| const normalizedValue: any = value === null ? "" : value; | ||
| this._renderer.setProperty(this._elementRef.nativeElement, "value", normalizedValue); | ||
| } | ||
|
|
||
| /** | ||
| * Registers a function called when the control value changes. | ||
| * | ||
| * @param fn The callback function | ||
| */ | ||
| public registerOnChange(fn: (_: any) => void): void { this.onChange = fn; } | ||
|
|
||
| /** | ||
| * Registers a function called when the control is touched. | ||
| * | ||
| * @param fn The callback function | ||
| */ | ||
| public registerOnTouched(fn: () => void): void { this.onTouched = fn; } | ||
|
|
||
| /** | ||
| * Sets the "disabled" property on the input element. | ||
| * | ||
| * @param isDisabled The disabled value | ||
| */ | ||
| public setDisabledState(isDisabled: boolean): void { | ||
| this._renderer.setProperty(this._elementRef.nativeElement, "disabled", isDisabled); | ||
| } | ||
|
|
||
| /** @internal */ | ||
| public _handleInput(value: any): void { | ||
| const transformed: any = this.transformFunction(value); | ||
| if (transformed !== value) { | ||
| this._elementRef.nativeElement.value = transformed; | ||
| this.onChange(transformed); | ||
| } else { | ||
| this.onChange(value); | ||
| } | ||
| } | ||
|
|
||
| } |
6 changes: 3 additions & 3 deletions
6
packages/stark-ui/src/modules/keyboard-directives/keyboard-directives.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 |
|---|---|---|
| @@ -1,8 +1,8 @@ | ||
| import { NgModule } from "@angular/core"; | ||
| import { StarkOnEnterKeyDirective, StarkRestrictInputDirective } from "./directives"; | ||
| import { StarkTransformInputDirective, StarkOnEnterKeyDirective, StarkRestrictInputDirective } from "./directives"; | ||
|
|
||
| @NgModule({ | ||
| declarations: [StarkOnEnterKeyDirective, StarkRestrictInputDirective], | ||
| exports: [StarkOnEnterKeyDirective, StarkRestrictInputDirective] | ||
| declarations: [StarkOnEnterKeyDirective, StarkRestrictInputDirective, StarkTransformInputDirective], | ||
| exports: [StarkOnEnterKeyDirective, StarkRestrictInputDirective, StarkTransformInputDirective] | ||
| }) | ||
| export class StarkKeyboardDirectivesModule {} |
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
10 changes: 0 additions & 10 deletions
10
...se/src/app/demo-ui/pages/keyboard-directives/demo-keyboard-directives-page.component.scss
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
Oops, something went wrong.