From 831580d5234114d9510a578a71f608cbb3eda3ec Mon Sep 17 00:00:00 2001 From: Ghislain B Date: Tue, 17 Nov 2020 15:19:17 -0500 Subject: [PATCH] feat(formatters): add AlignRight Formatter & alias AlignCenter=>Center (#161) * feat(formatters): add AlignRight Formatter & alias AlignCenter=>Center - center already existed but we can add alignCenter to be in line with the other alignRight formatter - note also that there's no need for alignLeft since everything is aligned to the left in SlickGrid --- .../__tests__/alignRightFormatter.spec.ts | 32 +++++++++++++++++++ .../__tests__/centerFormatter.spec.ts | 11 ++++++- .../__tests__/treeFormatter.spec.ts | 2 +- .../__tests__/yesNoFormatter.spec.ts | 2 +- .../src/formatters/alignRightFormatter.ts | 10 ++++++ .../common/src/formatters/centerFormatter.ts | 9 +++--- .../common/src/formatters/formatters.index.ts | 7 ++++ packages/common/src/formatters/index.ts | 1 + 8 files changed, 67 insertions(+), 7 deletions(-) create mode 100644 packages/common/src/formatters/__tests__/alignRightFormatter.spec.ts create mode 100644 packages/common/src/formatters/alignRightFormatter.ts diff --git a/packages/common/src/formatters/__tests__/alignRightFormatter.spec.ts b/packages/common/src/formatters/__tests__/alignRightFormatter.spec.ts new file mode 100644 index 000000000..32873813e --- /dev/null +++ b/packages/common/src/formatters/__tests__/alignRightFormatter.spec.ts @@ -0,0 +1,32 @@ +import { Column } from '../../interfaces/index'; +import { alignRightFormatter } from '../alignRightFormatter'; + +describe('Right Alignment Formatter', () => { + it('should return an empty string when no value is passed', () => { + const output = alignRightFormatter(1, 1, '', {} as Column, {}); + expect(output).toBe('
'); + }); + + it('should return an empty string when value is null or undefined', () => { + const output1 = alignRightFormatter(1, 1, null, {} as Column, {}); + const output2 = alignRightFormatter(1, 1, undefined, {} as Column, {}); + + expect(output1).toBe('
'); + expect(output2).toBe('
'); + }); + + it('should return a string all in uppercase', () => { + const output = alignRightFormatter(1, 1, 'hello', {} as Column, {}); + expect(output).toBe('
hello
'); + }); + + it('should return a number as a string', () => { + const output = alignRightFormatter(1, 1, 99, {} as Column, {}); + expect(output).toBe('
99
'); + }); + + it('should return a boolean as a string all in uppercase', () => { + const output = alignRightFormatter(1, 1, false, {} as Column, {}); + expect(output).toBe('
false
'); + }); +}); diff --git a/packages/common/src/formatters/__tests__/centerFormatter.spec.ts b/packages/common/src/formatters/__tests__/centerFormatter.spec.ts index 0c45a9dc5..aa32efeab 100644 --- a/packages/common/src/formatters/__tests__/centerFormatter.spec.ts +++ b/packages/common/src/formatters/__tests__/centerFormatter.spec.ts @@ -1,12 +1,21 @@ import { Column } from '../../interfaces/index'; import { centerFormatter } from '../centerFormatter'; -describe('the Uppercase Formatter', () => { +describe('Center Alignment Formatter', () => { it('should return an empty string when no value is passed', () => { const output = centerFormatter(1, 1, '', {} as Column, {}); expect(output).toBe('
'); }); + it('should return an empty string when value is null or undefined', () => { + const output1 = centerFormatter(1, 1, null, {} as Column, {}); + const output2 = centerFormatter(1, 1, undefined, {} as Column, {}); + + expect(output1).toBe('
'); + expect(output2).toBe('
'); + }); + + it('should return a string all in uppercase', () => { const output = centerFormatter(1, 1, 'hello', {} as Column, {}); expect(output).toBe('
hello
'); diff --git a/packages/common/src/formatters/__tests__/treeFormatter.spec.ts b/packages/common/src/formatters/__tests__/treeFormatter.spec.ts index fdecae778..82c7e35b0 100644 --- a/packages/common/src/formatters/__tests__/treeFormatter.spec.ts +++ b/packages/common/src/formatters/__tests__/treeFormatter.spec.ts @@ -12,7 +12,7 @@ const gridStub = { getOptions: jest.fn(), } as unknown as SlickGrid; -describe('the Uppercase Formatter', () => { +describe('Tree Formatter', () => { let dataset; let mockGridOptions: GridOption; diff --git a/packages/common/src/formatters/__tests__/yesNoFormatter.spec.ts b/packages/common/src/formatters/__tests__/yesNoFormatter.spec.ts index 0810c25a7..d84ef9b36 100644 --- a/packages/common/src/formatters/__tests__/yesNoFormatter.spec.ts +++ b/packages/common/src/formatters/__tests__/yesNoFormatter.spec.ts @@ -1,7 +1,7 @@ import { Column } from '../../interfaces/index'; import { yesNoFormatter } from '../yesNoFormatter'; -describe('the Uppercase Formatter', () => { +describe('Yes/No Formatter', () => { it('should return a "Yes" string when value is passed', () => { const output = yesNoFormatter(1, 1, 'blah', {} as Column, {}); expect(output).toBe('Yes'); diff --git a/packages/common/src/formatters/alignRightFormatter.ts b/packages/common/src/formatters/alignRightFormatter.ts new file mode 100644 index 000000000..db31f8725 --- /dev/null +++ b/packages/common/src/formatters/alignRightFormatter.ts @@ -0,0 +1,10 @@ +import { Formatter } from './../interfaces/index'; + +export const alignRightFormatter: Formatter = (_row: number, _cell: number, value: string | any): string => { + let outputValue = value; + + if (value === null || value === undefined) { + outputValue = ''; + } + return `
${outputValue}
`; +}; diff --git a/packages/common/src/formatters/centerFormatter.ts b/packages/common/src/formatters/centerFormatter.ts index 77a3e3ae4..efd353938 100644 --- a/packages/common/src/formatters/centerFormatter.ts +++ b/packages/common/src/formatters/centerFormatter.ts @@ -1,9 +1,10 @@ import { Formatter } from './../interfaces/index'; export const centerFormatter: Formatter = (_row: number, _cell: number, value: string | any): string => { - // make sure the value is a string - if (value !== undefined && typeof value !== 'string') { - value = value + ''; + let outputValue = value; + + if (value === null || value === undefined) { + outputValue = ''; } - return `
${value}
`; + return `
${outputValue}
`; }; diff --git a/packages/common/src/formatters/formatters.index.ts b/packages/common/src/formatters/formatters.index.ts index feb99d5c6..29b017588 100644 --- a/packages/common/src/formatters/formatters.index.ts +++ b/packages/common/src/formatters/formatters.index.ts @@ -1,5 +1,6 @@ import { FieldType } from '../enums/index'; import { getAssociatedDateFormatter } from './formatterUtilities'; +import { alignRightFormatter } from './alignRightFormatter'; import { arrayObjectToCsvFormatter } from './arrayObjectToCsvFormatter'; import { arrayToCsvFormatter } from './arrayToCsvFormatter'; import { boldFormatter } from './boldFormatter'; @@ -38,6 +39,12 @@ import { yesNoFormatter } from './yesNoFormatter'; /** Provides a list of different Formatters that will change the cell value displayed in the UI */ export const Formatters = { + /** Align cell value to the center (alias to Formatters.center) */ + alignCenter: centerFormatter, + + /** Align cell value to the right */ + alignRight: alignRightFormatter, + /** * Takes an array of complex objects converts it to a comma delimited string. * Requires to pass an array of "propertyNames" in the column definition the generic "params" property diff --git a/packages/common/src/formatters/index.ts b/packages/common/src/formatters/index.ts index 275c1ab66..7fc2f3e72 100644 --- a/packages/common/src/formatters/index.ts +++ b/packages/common/src/formatters/index.ts @@ -1,3 +1,4 @@ +export * from './alignRightFormatter'; export * from './arrayObjectToCsvFormatter'; export * from './arrayToCsvFormatter'; export * from './boldFormatter';