-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(Pipes): truncate pipe is available
ISSUES CLOSED: #1249
- Loading branch information
1 parent
6594bd7
commit 0b68fdd
Showing
5 changed files
with
209 additions
and
25 deletions.
There are no files selected for viewing
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 |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| import { TsTruncateAtPipe } from './truncate.pipe'; | ||
|
|
||
| describe(`TsTruncateAtPipe`, function() { | ||
| let pipeClass: TsTruncateAtPipe; | ||
| let pipe: Function; | ||
| const inputString = 'This is my test string'; | ||
| const ellipses = '\u2026'; | ||
|
|
||
| beforeEach(() => { | ||
| pipeClass = new TsTruncateAtPipe(); | ||
| pipe = pipeClass.transform; | ||
| }); | ||
|
|
||
| test(`should return undefined if no value is passed in`, () => { | ||
| expect(pipe(null)).toEqual(undefined); | ||
| expect(pipe('')).toEqual(undefined); | ||
| }); | ||
|
|
||
| test(`should return the string if no parameters are passed`, () => { | ||
| expect(pipe(inputString)).toEqual('This is my test string'); | ||
| }); | ||
|
|
||
| test(`should return the string if string length is shorter than character count`, () => { | ||
| expect(pipe(inputString, 24)).toEqual('This is my test string'); | ||
| }); | ||
|
|
||
| test(`should return warning if string is passed instead of number`, () => { | ||
| window.console.warn = jest.fn(); | ||
| pipe(inputString, 'start'); | ||
|
|
||
| expect(window.console.warn).toHaveBeenCalled(); | ||
| }); | ||
|
|
||
| test(`should default to end if no position is specified`, () => { | ||
| expect(pipe(inputString, 10, 'undefined as any')).toEqual(`This is m${ellipses}`); | ||
| }); | ||
|
|
||
|
|
||
| describe(`end`, () => { | ||
| test(`should be the format if no position is specified`, () => { | ||
| expect(pipe(inputString, 10)).toEqual(`This is m${ellipses}`); | ||
| expect(pipe(inputString, 10)).toHaveLength(10); | ||
| }); | ||
|
|
||
| test(`should remove last part of the string`, () => { | ||
| expect(pipe(inputString, 10, 'end')).toEqual(`This is m${ellipses}`); | ||
| expect(pipe(inputString, 10, 'end')).toHaveLength(10); | ||
| }); | ||
| }); | ||
|
|
||
|
|
||
| describe(`start`, () => { | ||
| test(`should remove first part of the string`, () => { | ||
| expect(pipe(inputString, 10, 'start')).toEqual(`${ellipses}st string`); | ||
| expect(pipe(inputString, 10, 'start')).toHaveLength(10); | ||
| }); | ||
| }); | ||
|
|
||
|
|
||
| describe(`middle`, () => { | ||
| test(`should have equal number of characters on each side of ellipses if character count is odd`, () => { | ||
| expect(pipe(inputString, 11, 'middle')).toEqual(`This ${ellipses}tring`); | ||
| expect(pipe(inputString, 11, 'middle')).toHaveLength(11); | ||
| }); | ||
|
|
||
| test(`should have one more characters in front of ellipses if character count is even`, () => { | ||
| expect(pipe(inputString, 10, 'middle')).toEqual(`This ${ellipses}ring`); | ||
| expect(pipe(inputString, 10, 'middle')).toHaveLength(10); | ||
| }); | ||
| }); | ||
| }); |
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,87 @@ | ||
| import { | ||
| Pipe, | ||
| PipeTransform, | ||
| } from '@angular/core'; | ||
| import { isNumber } from '@terminus/ngx-tools'; | ||
|
|
||
|
|
||
|
|
||
| /** | ||
| * Define the accepted string values for the {@link TsTruncateAtPipe} position | ||
| */ | ||
| export type TsTruncatePositionType | ||
| = 'start' | ||
| | 'middle' | ||
| | 'end' | ||
| ; | ||
|
|
||
| /** | ||
| * Define the allowed truncation position types Used by {@link TsTruncateAtPipe} position | ||
| */ | ||
| export const allowedTruncationTypes: TsTruncatePositionType[] = [ | ||
| 'start', | ||
| 'middle', | ||
| 'end', | ||
| ]; | ||
|
|
||
|
|
||
| /** | ||
| * The truncate at pipe | ||
| * | ||
| * @example | ||
| * {{ 'Here is my string' | tsTruncateAt:7 }} // Outputs: `Here i…` | ||
| * {{ 'Here is my string' | tsTruncateAt:8:'middle' }} // Outputs: `Here…ing` | ||
| * | ||
| * <example-url>https://getterminus.github.io/ui-demos-master/components/pipes</example-url> | ||
| */ | ||
| @Pipe({ | ||
| name: 'tsTruncateAt', | ||
| }) | ||
| export class TsTruncateAtPipe implements PipeTransform { | ||
| transform(value: string, charCount: number = 0, position: TsTruncatePositionType = 'end'): string | undefined { | ||
| // Check for null values to avoid issues during data-binding | ||
| if (!value) { | ||
| return; | ||
| } | ||
|
|
||
| // Insure the correct type | ||
| if (!isNumber(charCount)) { | ||
| console.warn(`${charCount} is not a number.`); | ||
| } | ||
|
|
||
| if ((value.length < charCount) || (charCount < 1)) { | ||
| return value; | ||
| } | ||
|
|
||
| let newString = value; | ||
| const ellipses = '\u2026'; | ||
|
|
||
| switch (position) { | ||
| case('start'): | ||
| newString = ellipses + value.slice(-(charCount - 1)); | ||
| break; | ||
| case('middle'): | ||
| let charCountStart: number; | ||
| let charCountEnd: number; | ||
| // determine how many characters are on each side of the split | ||
| // if there are an odd number of characters, the beginning of the string is longer | ||
| if ((charCount - 1) % 2 === 1) { | ||
| charCountEnd = (charCount - 1) / 2; | ||
| charCountStart = charCountEnd + 1; | ||
| } else { | ||
| charCountEnd = (charCount - 1) / 2; | ||
| charCountStart = charCountEnd; | ||
| } | ||
| newString = value.slice(0, charCountStart) + ellipses + value.slice(-(charCountEnd)); | ||
| break; | ||
| case('end'): | ||
| newString = value.slice(0, charCount - 1) + ellipses; | ||
| break; | ||
| default: | ||
| newString = value.slice(0, charCount - 1) + ellipses; | ||
| break; | ||
| } | ||
|
|
||
| return newString; | ||
| } | ||
| } |