Merge pull request #12 from ghiscoding/feat/text-formatter-string-patterns

feat: add string pattern options as alternative to override text formats

Author: ghiscoding

demo/src/examples/example09.ts

@@ -18,7 +18,10 @@ export default class Example {
     }) as EventListener);
 
     this.ms1 = multipleSelect(elm) as MultipleSelectInstance;
-    this.ms2 = multipleSelect('#select', { showOkButton: true }) as MultipleSelectInstance;
+    this.ms2 = multipleSelect('#select', {
+      filter: true,
+      showOkButton: true,
+    }) as MultipleSelectInstance;
   }
 
   unmount() {

demo/src/i18n/i18n.ts

@@ -6,9 +6,9 @@ export default class Example {
   mount() {
     this.ms1 = multipleSelect('select', {
       filter: true,
-      formatSelectAll() {
-        return '[Tout sélectionner]';
-      },
+      showOkButton: true,
+
+      // 1. you could use the text format callback functions
       formatAllSelected() {
         return 'Tous sélectionnés';
       },
@@ -18,6 +18,19 @@ export default class Example {
       formatNoMatchesFound() {
         return 'Aucun résultat';
       },
+      formatOkButton() {
+        return 'Fermer';
+      },
+      formatSelectAll() {
+        return '[Tout sélectionner]';
+      },
+
+      // 2. OR you could also use string pattern instead of the callback functions
+      // allSelectedText: 'Tous sélectionnés',
+      // countSelectedText: '# de % selectionnés',
+      // noMatchesFoundText: 'Aucun résultat',
+      // okButtonText: 'Fermer',
+      // selectAllText: 'Tout sélectionner',
     }) as MultipleSelectInstance;
   }
 

lib/src/MultipleSelectInstance.ts

@@ -376,7 +376,7 @@ export class MultipleSelectInstance {
       const saInputElm = createDomElement('input', { type: 'checkbox', checked: this.allSelected });
       saInputElm.dataset.name = 'selectAll';
       saLabelElm.appendChild(saInputElm);
-      saLabelElm.appendChild(createDomElement('span', { textContent: this.options.formatSelectAll() }));
+      saLabelElm.appendChild(createDomElement('span', { textContent: this.formatSelectAll() }));
       this.selectAllParentElm.appendChild(saLabelElm);
       this.dropElm.appendChild(this.selectAllParentElm);
     }
@@ -388,7 +388,7 @@ export class MultipleSelectInstance {
       this.okButtonElm = createDomElement('button', {
         className: 'ms-ok-button',
         type: 'button',
-        textContent: this.options.formatOkButton(),
+        textContent: this.formatOkButton(),
       });
       this.dropElm.appendChild(this.okButtonElm);
     }
@@ -464,7 +464,7 @@ export class MultipleSelectInstance {
       rows.push(...this.initListItem(row));
     });
 
-    rows.push(`<li class="ms-no-results">${this.options.formatNoMatchesFound()}</li>`);
+    rows.push(`<li class="ms-no-results">${this.formatNoMatchesFound()}</li>`);
 
     return rows;
   }
@@ -904,12 +904,12 @@ export class MultipleSelectInstance {
         spanElm.innerHTML = this.options.sanitizer ? this.options.sanitizer(placeholder) : placeholder;
       } else if (sl < this.options.minimumCountSelected) {
         html = getSelectOptionHtml();
-      } else if (this.options.formatAllSelected() && sl === this.dataTotal) {
-        html = this.options.formatAllSelected();
+      } else if (this.formatAllSelected() && sl === this.dataTotal) {
+        html = this.formatAllSelected();
       } else if (this.options.ellipsis && sl > this.options.minimumCountSelected) {
         html = `${textSelects.slice(0, this.options.minimumCountSelected).join(this.options.displayDelimiter)}...`;
-      } else if (this.options.formatCountSelected(sl, this.dataTotal) && sl > this.options.minimumCountSelected) {
-        html = this.options.formatCountSelected(sl, this.dataTotal);
+      } else if (this.formatCountSelected(sl, this.dataTotal) && sl > this.options.minimumCountSelected) {
+        html = this.formatCountSelected(sl, this.dataTotal);
       } else {
         html = getSelectOptionHtml();
       }
@@ -1397,4 +1397,29 @@ export class MultipleSelectInstance {
 
     return widthNoScroll - widthWithScroll;
   }
+
+  // five text formatters, it could be string patterns or formatter callback functions
+
+  formatAllSelected() {
+    return this.options.allSelectedText || this.options.formatAllSelected();
+  }
+
+  formatCountSelected(selectedCount: number, totalCount: number) {
+    if (this.options.countSelectedText) {
+      return this.options.countSelectedText.replace('#', `${selectedCount}`).replace('%', `${totalCount}`);
+    }
+    return this.options.formatCountSelected(selectedCount, totalCount);
+  }
+
+  formatNoMatchesFound() {
+    return this.options.noMatchesFoundText || this.options.formatNoMatchesFound();
+  }
+
+  formatOkButton() {
+    return this.options.okButtonText || this.options.formatOkButton();
+  }
+
+  formatSelectAll() {
+    return this.options.selectAllText || this.options.formatSelectAll();
+  }
 }

lib/src/interfaces/multipleSelectOption.interface.ts

@@ -7,6 +7,9 @@ export interface MultipleSelectOption extends MultipleSelectLocale {
   /** defaults to 10, when using "autoAdjustDropHeight" we might want to add a bottom (or top) padding instead of taking the entire available space */
   adjustedHeightPadding: number;
 
+  /** Use optional string to override "All selected" text instead of `formatAllSelected()`, the latter should be prefered */
+  allSelectedText?: string;
+
   /** Auto-adjust the Drop menu height to fit with available space */
   autoAdjustDropHeight?: boolean;
 
@@ -19,6 +22,9 @@ export interface MultipleSelectOption extends MultipleSelectLocale {
   /** HTML container to use for the drop menu, e.g. 'body' */
   container?: string | HTMLElement | null;
 
+  /** Use optional string to override selected count text "# of % selected" instead of `formatCountSelected()`, the latter should be prefered */
+  countSelectedText?: string;
+
   /** provide custom data */
   data?: any | any[];
 
@@ -94,6 +100,12 @@ export interface MultipleSelectOption extends MultipleSelectLocale {
   /** Provide a name to the multiple select element. By default this option is set to ''. */
   name?: string;
 
+  /** Use optional string to override text when filtering "No matches found" instead of `formatNoMatchesFound()`, the latter should be prefered */
+  noMatchesFoundText?: string;
+
+  /** Use optional string to override "OK" button text instead of `formatOkButton()`, the latter should be prefered */
+  okButtonText?: string;
+
   /** Should we open the dropdown while hovering the select? */
   openOnHover?: boolean;
 
@@ -106,6 +118,9 @@ export interface MultipleSelectOption extends MultipleSelectLocale {
   /** Whether or not Multiple Select show select all checkbox. */
   selectAll?: boolean;
 
+  /** Use optional string to override "Select All" checkbox text instead of `formatSelectAll()`, the latter should be prefered */
+  selectAllText?: string;
+
   /** Whether or not Multiple Select allows you to select only one option.By default this option is set to false. */
   single?: boolean;