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 tests for directive ISSUES CLOSED: NationalBankBelgium#1099
- Loading branch information
1 parent
b74eabb
commit 084b687
Showing
13 changed files
with
326 additions
and
37 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"; |
108 changes: 108 additions & 0 deletions
108
...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,108 @@ | ||
| import { Component, OnInit } from "@angular/core"; | ||
| import { ComponentFixture, TestBed } from "@angular/core/testing"; | ||
| import { FormControl, FormsModule, ReactiveFormsModule } from "@angular/forms"; | ||
| import { By } from "@angular/platform-browser"; | ||
| import { MockStarkLoggingService } from "@nationalbankbelgium/stark-core/testing"; | ||
| import { STARK_LOGGING_SERVICE } from "@nationalbankbelgium/stark-core"; | ||
| import { StarkTransformInputDirective } from "./transform-input.directive"; | ||
|
|
||
| /** | ||
| * Mocks an InputEvent on the element with the given value. | ||
| * @param value - the value to set the element to. | ||
| * @param element - the HTMLInputElement to mock the event on | ||
| */ | ||
| const mockInputEvent: (value: string, element: HTMLInputElement) => void = (value: string, element: HTMLInputElement): void => { | ||
| const event: Event = document.createEvent("Event"); | ||
| event.initEvent("input", true, true); | ||
| element.value = value; | ||
| element.dispatchEvent(event); | ||
| }; | ||
|
|
||
| describe("TransformsInputDirective with ngModel", () => { | ||
| /** | ||
| * mocked wrapper for the directive | ||
| */ | ||
| @Component({ | ||
| selector: "test-component", | ||
| template: "<input [(ngModel)]='value' starkTransformInput='upper'/>" | ||
| }) | ||
| class TestComponent { | ||
| public value: string = ""; | ||
| } | ||
|
|
||
| let fixture: ComponentFixture<TestComponent>; | ||
|
|
||
| beforeEach(() => { | ||
| TestBed.configureTestingModule({ | ||
| declarations: [StarkTransformInputDirective, TestComponent], | ||
| imports: [FormsModule], | ||
| 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 "); | ||
|
|
||
| const inputElement: HTMLInputElement = (<HTMLInputElement>fixture.debugElement.query(By.css("input")).nativeElement); | ||
| mockInputEvent("a", inputElement); | ||
| fixture.detectChanges(); | ||
|
|
||
| expect(fixture.componentInstance.value).toBe("A", "field 'value' should have been updated to upper case 'A'"); | ||
| }); | ||
|
|
||
| }); | ||
|
|
||
| describe("TransformsInputDirective with formControl", () => { | ||
| /** | ||
| * mocked wrapper for the directive | ||
| */ | ||
| @Component({ | ||
| selector: "test-component", | ||
| template: "<input [formControl]='formControl' starkTransformInput='lower'/>" | ||
| }) | ||
| class TestComponent implements OnInit { | ||
| public formControl: FormControl = new FormControl(""); | ||
|
|
||
| public ngOnInit(): void { | ||
| this.formControl.valueChanges.subscribe(this.onValueChanges); | ||
| } | ||
|
|
||
| public onValueChanges(): void {/*noop*/} | ||
| } | ||
|
|
||
| let fixture: ComponentFixture<TestComponent>; | ||
|
|
||
| beforeEach(() => { | ||
| TestBed.configureTestingModule({ | ||
| declarations: [StarkTransformInputDirective, TestComponent], | ||
| imports: [ReactiveFormsModule], | ||
| providers: [ | ||
| { provide: STARK_LOGGING_SERVICE, useValue: new MockStarkLoggingService() } | ||
| ] | ||
| }); | ||
|
|
||
| fixture = TestBed.createComponent(TestComponent); | ||
| spyOn(fixture.componentInstance, "onValueChanges").calls.reset(); | ||
|
|
||
| // trigger initial data binding | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it("should set the value to uppercase", () => { | ||
| expect(fixture.componentInstance.formControl.value).toBe("", "FormControl value should start as empty string "); | ||
|
|
||
| const inputElement: HTMLInputElement = (<HTMLInputElement>fixture.debugElement.query(By.css("input")).nativeElement); | ||
| mockInputEvent("A", inputElement); | ||
| fixture.detectChanges(); | ||
|
|
||
| expect(fixture.componentInstance.onValueChanges).toHaveBeenCalledTimes(1); | ||
| expect(fixture.componentInstance.formControl.value).toBe("a", "FormControl value should be lower case 'a'"); | ||
| }); | ||
|
|
||
| }); |
112 changes: 112 additions & 0 deletions
112
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,112 @@ | ||
| import { Directive, ElementRef, forwardRef, Input, Renderer2 } from "@angular/core"; | ||
| import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms"; | ||
|
|
||
| export type TransformationType = "upper" | "lower" | ((value: any) => any); | ||
|
|
||
| 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). | ||
| * It is possible to pass 'upper', 'lower' or a custom function to transform the value. | ||
| * 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)": "onInput($event)", | ||
| "(blur)": "_onTouched()" | ||
| } | ||
| }) | ||
| export class StarkTransformInputDirective implements ControlValueAccessor { | ||
| public _transformation: (value: any) => any; | ||
|
|
||
| // tslint:disable-next-line:no-input-rename | ||
| @Input("starkTransformInput") | ||
| public set transformation(transformation: TransformationType) { | ||
| switch (transformation) { | ||
| case "upper": | ||
| this._transformation = (v: string) => v.toUpperCase(); | ||
| break; | ||
| case "lower": | ||
| this._transformation = (v: string) => v.toLocaleLowerCase(); | ||
| break; | ||
| default: | ||
| this._transformation = transformation; | ||
| break; | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * @internal | ||
| * The registered callback function called when an input event occurs on the input element. | ||
| */ | ||
| public _onChange: (_: any) => void = (_: any) => {/*noop*/}; | ||
|
|
||
| /** | ||
| * @internal | ||
| * The registered callback function called when a blur event occurs on the input element. | ||
| */ | ||
| public _onTouched: () => void = () => {/*noop*/}; | ||
|
|
||
| /** | ||
| * Class constructor | ||
| * @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 onInput(event: Event): void { | ||
| const value: any = (<HTMLInputElement>event.target).value; | ||
| const transformed: any = this._transformation(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
Oops, something went wrong.