From 7a4a6353998fe66e59f6630f1a722c6000ef4bba Mon Sep 17 00:00:00 2001 From: gdi2290 Date: Thu, 14 May 2015 10:14:26 -0700 Subject: [PATCH] feat(change_detection): uppercase and lowercase pipes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit because the world needs more uppercase madness [✔] clang-format [✔] tests --- .../src/change_detection/change_detection.ts | 20 ++++++- .../change_detection/pipes/lowercase_pipe.ts | 58 +++++++++++++++++++ .../change_detection/pipes/uppercase_pipe.ts | 58 +++++++++++++++++++ .../pipes/lowercase_pipe_spec.js | 47 +++++++++++++++ .../pipes/uppercase_pipe_spec.js | 47 +++++++++++++++ 5 files changed, 229 insertions(+), 1 deletion(-) create mode 100644 modules/angular2/src/change_detection/pipes/lowercase_pipe.ts create mode 100644 modules/angular2/src/change_detection/pipes/uppercase_pipe.ts create mode 100644 modules/angular2/test/change_detection/pipes/lowercase_pipe_spec.js create mode 100644 modules/angular2/test/change_detection/pipes/uppercase_pipe_spec.js diff --git a/modules/angular2/src/change_detection/change_detection.ts b/modules/angular2/src/change_detection/change_detection.ts index 1f87c62518..831b165b67 100644 --- a/modules/angular2/src/change_detection/change_detection.ts +++ b/modules/angular2/src/change_detection/change_detection.ts @@ -5,6 +5,8 @@ import {IterableChangesFactory} from './pipes/iterable_changes'; import {KeyValueChangesFactory} from './pipes/keyvalue_changes'; import {ObservablePipeFactory} from './pipes/observable_pipe'; import {PromisePipeFactory} from './pipes/promise_pipe'; +import {UpperCaseFactory} from './pipes/uppercase_pipe'; +import {LowerCaseFactory} from './pipes/lowercase_pipe'; import {NullPipeFactory} from './pipes/null_pipe'; import {ChangeDetection, ProtoChangeDetector, ChangeDetectorDefinition} from './interfaces'; import {Injectable} from 'angular2/src/di/decorators'; @@ -39,10 +41,26 @@ export var iterableDiff: List < export var async: List < PipeFactory >= [new ObservablePipeFactory(), new PromisePipeFactory(), new NullPipeFactory()]; +/** + * Uppercase text transform. + * + * @exportedAs angular2/pipes + */ +export var uppercase: List < PipeFactory >= [new UpperCaseFactory(), new NullPipeFactory()]; + +/** + * Lowercase text transform. + * + * @exportedAs angular2/pipes + */ +export var lowercase: List < PipeFactory >= [new LowerCaseFactory(), new NullPipeFactory()]; + export var defaultPipes = { "iterableDiff": iterableDiff, "keyValDiff": keyValDiff, - "async": async + "async": async, + "uppercase": uppercase, + "lowercase": lowercase }; export var preGeneratedProtoDetectors = {}; diff --git a/modules/angular2/src/change_detection/pipes/lowercase_pipe.ts b/modules/angular2/src/change_detection/pipes/lowercase_pipe.ts new file mode 100644 index 0000000000..f785bc3766 --- /dev/null +++ b/modules/angular2/src/change_detection/pipes/lowercase_pipe.ts @@ -0,0 +1,58 @@ +import {isString, StringWrapper} from 'angular2/src/facade/lang'; +import {Pipe} from './pipe'; + +// HACK: workaround for Traceur behavior. +// It expects all transpiled modules to contain this marker. +// TODO: remove this when we no longer use traceur +export var __esModule = true; + +/** + * Implements lowercase transforms to text. + * + * # Example + * + * In this example we transform the user text lowercase. + * + * ``` + * @Component({ + * selector: "username-cmp" + * }) + * @View({ + * inline: "Username: {{ user | lowercase }}" + * }) + * class Username { + * user:string; + * } + * + * ``` + * + * @exportedAs angular2/pipes + */ +export class LowerCasePipe extends Pipe { + _latestValue: string; + constructor() { + super(); + this._latestValue = null; + } + supports(str): boolean { return isString(str); } + + onDestroy(): void { this._latestValue = null; } + + transform(value: string): string { + if (this._latestValue !== value) { + this._latestValue = value; + return StringWrapper.toLowerCase(value); + } else { + return this._latestValue; + } + } +} + +/** + * @exportedAs angular2/pipes + */ +export class LowerCaseFactory { + supports(str): boolean { return isString(str); } + + create(): Pipe { return new LowerCasePipe(); } +} diff --git a/modules/angular2/src/change_detection/pipes/uppercase_pipe.ts b/modules/angular2/src/change_detection/pipes/uppercase_pipe.ts new file mode 100644 index 0000000000..80659fe2e7 --- /dev/null +++ b/modules/angular2/src/change_detection/pipes/uppercase_pipe.ts @@ -0,0 +1,58 @@ +import {isString, StringWrapper} from 'angular2/src/facade/lang'; +import {Pipe} from './pipe'; + +// HACK: workaround for Traceur behavior. +// It expects all transpiled modules to contain this marker. +// TODO: remove this when we no longer use traceur +export var __esModule = true; + +/** + * Implements uppercase transforms to text. + * + * # Example + * + * In this example we transform the user text uppercase. + * + * ``` + * @Component({ + * selector: "username-cmp" + * }) + * @View({ + * inline: "Username: {{ user | uppercase }}" + * }) + * class Username { + * user:string; + * } + * + * ``` + * + * @exportedAs angular2/pipes + */ +export class UpperCasePipe extends Pipe { + _latestValue: string; + constructor() { + super(); + this._latestValue = null; + } + supports(str): boolean { return isString(str); } + + onDestroy(): void { this._latestValue = null; } + + transform(value: string): string { + if (this._latestValue !== value) { + this._latestValue = value; + return StringWrapper.toUpperCase(value); + } else { + return this._latestValue; + } + } +} + +/** + * @exportedAs angular2/pipes + */ +export class UpperCaseFactory { + supports(str): boolean { return isString(str); } + + create(): Pipe { return new UpperCasePipe(); } +} diff --git a/modules/angular2/test/change_detection/pipes/lowercase_pipe_spec.js b/modules/angular2/test/change_detection/pipes/lowercase_pipe_spec.js new file mode 100644 index 0000000000..10f76574d4 --- /dev/null +++ b/modules/angular2/test/change_detection/pipes/lowercase_pipe_spec.js @@ -0,0 +1,47 @@ +import {ddescribe, describe, it, iit, xit, expect, beforeEach, afterEach} from 'angular2/test_lib'; + +import {LowerCasePipe} from 'angular2/src/change_detection/pipes/lowercase_pipe'; + +export function main() { + describe("LowerCasePipe", () => { + var str; + var upper; + var lower; + var pipe; + + beforeEach(() => { + str = 'something'; + lower = 'something'; + upper = 'SOMETHING'; + pipe = new LowerCasePipe(); + }); + + describe("supports", () => { + it("should support strings", () => { + expect(pipe.supports(str)).toBe(true); + }); + + it("should not support other objects", () => { + expect(pipe.supports(new Object())).toBe(false); + expect(pipe.supports(null)).toBe(false); + }); + }); + + describe("transform", () => { + + it("should return lowercase", () => { + var val = pipe.transform(upper); + expect(val).toEqual(lower); + }); + + it("should lowercase when there is a new value", () => { + var val = pipe.transform(upper); + expect(val).toEqual(lower); + var val2 = pipe.transform('WAT'); + expect(val2).toEqual('wat'); + }); + + }); + + }); +} diff --git a/modules/angular2/test/change_detection/pipes/uppercase_pipe_spec.js b/modules/angular2/test/change_detection/pipes/uppercase_pipe_spec.js new file mode 100644 index 0000000000..535baf054d --- /dev/null +++ b/modules/angular2/test/change_detection/pipes/uppercase_pipe_spec.js @@ -0,0 +1,47 @@ +import {ddescribe, describe, it, iit, xit, expect, beforeEach, afterEach} from 'angular2/test_lib'; + +import {UpperCasePipe} from 'angular2/src/change_detection/pipes/uppercase_pipe'; + +export function main() { + describe("UpperCasePipe", () => { + var str; + var upper; + var lower; + var pipe; + + beforeEach(() => { + str = 'something'; + lower = 'something'; + upper = 'SOMETHING'; + pipe = new UpperCasePipe(); + }); + + describe("supports", () => { + it("should support strings", () => { + expect(pipe.supports(str)).toBe(true); + }); + + it("should not support other objects", () => { + expect(pipe.supports(new Object())).toBe(false); + expect(pipe.supports(null)).toBe(false); + }); + }); + + describe("transform", () => { + + it("should return uppercase", () => { + var val = pipe.transform(lower); + expect(val).toEqual(upper); + }); + + it("should uppercase when there is a new value", () => { + var val = pipe.transform(lower); + expect(val).toEqual(upper); + var val2 = pipe.transform('wat'); + expect(val2).toEqual('WAT'); + }); + + }); + + }); +}