feat(formatters): add Bootstrap Dropdown Formatter

- add this missing Formatter that was available in Angular-Slickgrid

packages/common/src/formatters/__tests__/bsDropdownFormatter.spec.ts

@@ -0,0 +1,39 @@
+import { Column, SlickGrid } from '../../interfaces';
+import { bsDropdownFormatter } from '../bsDropdownFormatter';
+
+describe('the Bootstrap dropdown Formatter', () => {
+  it('should throw an error when omitting to pass "propertyNames" to "params"', () => {
+    expect(() => bsDropdownFormatter(0, 0, 'anything', {} as Column, {}, {} as SlickGrid))
+      .toThrowError('You must provide the "label" or "formatterLabel" via the generic "params"');
+  });
+
+  it('should always return a dropdown template with the label provided in the "label" property from "params"', () => {
+    const input = null;
+    const label = 'Action';
+    const row = 0;
+    const cell = 0;
+    const result = bsDropdownFormatter(row, cell, input, { field: 'user', params: { label } } as Column, {}, {} as SlickGrid);
+
+    expect(result).toBe(`<div id="myDrop-r${row}-c${cell}" class="dropdown pointer">
+    <a class="dropdown-toggle">
+      ${label}
+      <span class="caret"></span>
+    </a>
+  </div>`);
+  });
+
+  it('should always return a a dropdown template with the label provided in the "formatterLabel" property from "params"', () => {
+    const input = null;
+    const label = 'Action';
+    const row = 0;
+    const cell = 0;
+    const result = bsDropdownFormatter(row, cell, input, { field: 'user', params: { label } } as Column, {}, {} as SlickGrid);
+
+    expect(result).toBe(`<div id="myDrop-r${row}-c${cell}" class="dropdown pointer">
+    <a class="dropdown-toggle">
+      ${label}
+      <span class="caret"></span>
+    </a>
+  </div>`);
+  });
+});

packages/common/src/formatters/bsDropdownFormatter.ts

@@ -0,0 +1,18 @@
+import { Formatter } from '../interfaces/formatter.interface';
+
+/** A simple Bootstrap Dropdown Formatter which requires a Formatter Label */
+export const bsDropdownFormatter: Formatter = (row, cell, _val, columnDef) => {
+  const columnParams = columnDef && columnDef.params || {};
+  const label = columnParams.label || columnParams.formatterLabel;
+
+  if (!label) {
+    throw new Error(`You must provide the "label" or "formatterLabel" via the generic "params" options (e.g.: { formatter: Formatters.bsDropdown, params: { formatterLabel: 'Label' }}`);
+  }
+
+  return `<div id="myDrop-r${row}-c${cell}" class="dropdown pointer">
+    <a class="dropdown-toggle">
+      ${label}
+      <span class="caret"></span>
+    </a>
+  </div>`;
+};

packages/common/src/formatters/formatters.index.ts

@@ -4,6 +4,7 @@ import { alignRightFormatter } from './alignRightFormatter';
 import { arrayObjectToCsvFormatter } from './arrayObjectToCsvFormatter';
 import { arrayToCsvFormatter } from './arrayToCsvFormatter';
 import { boldFormatter } from './boldFormatter';
+import { bsDropdownFormatter } from './bsDropdownFormatter';
 import { centerFormatter } from './centerFormatter';
 import { checkboxFormatter } from './checkboxFormatter';
 import { checkmarkFormatter } from './checkmarkFormatter';
@@ -60,6 +61,12 @@ export const Formatters = {
   /** show value in bold font weight */
   bold: boldFormatter,
 
+  /**
+   * a simple Bootstrap Dropdown Formatter which requires a Formatter Label
+   * example:: { formatter: Formatters.bsDropdown, params: { formatterLabel: 'Label' }}
+   */
+  bsDropdown: bsDropdownFormatter,
+
   /** Center a text value horizontally */
   center: centerFormatter,
 

packages/common/src/formatters/index.ts

@@ -2,6 +2,7 @@ export * from './alignRightFormatter';
 export * from './arrayObjectToCsvFormatter';
 export * from './arrayToCsvFormatter';
 export * from './boldFormatter';
+export * from './bsDropdownFormatter';
 export * from './centerFormatter';
 export * from './checkboxFormatter';
 export * from './checkmarkMaterialFormatter';