Merge pull request #337 from AlexeySemenko/add-icons-to-selected-item

Support icons in selected item also, not only in list of options
sa-si-dev · Jun 13, 2024 · 5a6ab6a · 5a6ab6a
2 parents 687d89f + 155d08c
commit 5a6ab6a
Show file tree

Hide file tree

Showing 10 changed files with 85 additions and 61 deletions.
diff --git a/cypress/e2e/examples.cy.ts b/cypress/e2e/examples.cy.ts
@@ -408,6 +408,10 @@ describe('Add image/icon', () => {
   it('has flag icon on scroll', () => {
     cy.getVs(id).scrollOptions(700).hasFlagIcon().parent().contains('Option 16');
   });
+
+  it('has flag icon on selected item', () => {
+    cy.open(id).selectOption(16).hasSelectedFlagIcon();
+  });
 });
 
 describe('Show values as tags', () => {

diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
@@ -118,6 +118,10 @@ Cypress.Commands.add('hasFlagIcon', { prevSubject: true }, (vsElem) => {
   cy.getDropbox(vsElem).find('.vscomp-option').first().find('i.flag');
 });
 
+Cypress.Commands.add('hasSelectedFlagIcon', { prevSubject: true }, (vsElem) => {
+  cy.get(vsElem).find('.vscomp-value').find('i.flag');
+});
+
 Cypress.Commands.add('hasValueTags', { prevSubject: true }, (vsElem, labels) => {
   labels.forEach((label) => {
     cy.get(vsElem).find('.vscomp-value-tag').contains(label);

diff --git a/cypress/support/index.d.ts b/cypress/support/index.d.ts
@@ -136,6 +136,12 @@ declare namespace Cypress {
      */
     hasFlagIcon(): Chainable<any>;
 
+     /**
+     * @example
+     * cy.hasFlagIcon()
+     */
+     hasSelectedFlagIcon(): Chainable<any>;
+
     /**
      * @example
      * cy.hasValueTags(['Option 3', 'Option 5'])

diff --git a/docs/assets/script.js b/docs/assets/script.js
@@ -281,6 +281,7 @@ function initPageExamples() {
   initVirtualSelect({
     ele: '#with-image-select',
     labelRenderer: sampleLabelRenderer,
+    selectedLabelRenderer: sampleLabelRenderer,
   });
 
   initVirtualSelect({

diff --git a/docs/assets/styles.css b/docs/assets/styles.css
@@ -117,7 +117,7 @@ section.cover {
   margin-bottom: 20px;
 }
 
-.vscomp-option-text .flag {
+.vscomp-value .flag, .vscomp-option-text .flag {
   margin-right: 12px;
   -webkit-transform: scale(1.4);
   transform: scale(1.4);

diff --git a/docs/assets/virtual-select.js b/docs/assets/virtual-select.js
diff --git a/docs/assets/virtual-select.min.js b/docs/assets/virtual-select.min.js
diff --git a/docs/examples.md b/docs/examples.md
@@ -306,14 +306,16 @@ VirtualSelect.init({
 
 ## Add image/icon
 
-Use `labelRenderer` callback function to add image, icon, or custom content
+Use `labelRenderer` callback function to add image, icon, or custom content to items
+Use `selectedLabelRenderer` callback function to add image, icon, or custom content to selected item
 
 <div id="with-image-select"></div>
 
 ```js
 VirtualSelect.init({
   ...
   labelRenderer: sampleLabelRenderer,
+  selectedLabelRenderer: sampleLabelRenderer
 });
 
 function sampleLabelRenderer(data) {

diff --git a/docs/properties.md b/docs/properties.md
@@ -57,6 +57,7 @@
 | onServerSearch                 | Function          |                                                        | Callback function to integrate server search                                                                                                                                                                  |
 | searchDelay                    | Number            | 300                                                    | Delay time in milliseconds to trigger onServerSearch callback function                                                                                                                                        |
 | labelRenderer                  | Function          |                                                        | Callback function to render label, which could be used to add image, icon, or custom content                                                                                                                  |
+| selectedLabelRenderer          | Function          |                                                        | Callback function to render label of selected item when select is closed, similar to labelRenderer |
 | ariaLabelledby                 | String            |                                                        | ID of the label element to use as a11y attribute aria-labelledby                                                                                                                                              |
 | hideValueTooltipOnSelectAll    | Boolean           | true                                                   | Hide value tooltip if all options selected                                                                                                                                                                    |
 | showOptionsOnlyOnSearch        | Boolean           | false                                                  | Show options to select only if search value is not empty                                                                                                                                                      |

diff --git a/src/virtual-select.js b/src/virtual-select.js
@@ -285,7 +285,7 @@ export class VirtualSelect {
     let newOptionIconHtml = '';
     const markSearchResults = !!(this.markSearchResults && this.searchValue);
     let searchRegex;
-    const { labelRenderer, disableOptionGroupCheckbox, uniqueId, searchGroup } = this;
+    const { labelRenderer, selectedLabelRenderer, disableOptionGroupCheckbox, uniqueId, searchGroup } = this;
     const hasLabelRenderer = typeof labelRenderer === 'function';
     const { convertToBoolean } = Utils;
     let groupName = '';
@@ -939,6 +939,7 @@ export class VirtualSelect {
     this.popupPosition = options.popupPosition;
     this.onServerSearch = options.onServerSearch;
     this.labelRenderer = options.labelRenderer;
+    this.selectedLabelRenderer = options.selectedLabelRenderer;
     this.initialSelectedValue = options.selectedValue === 0 ? '0' : options.selectedValue;
     this.emptyValue = options.emptyValue;
     this.ariaLabelledby = options.ariaLabelledby;
@@ -1559,7 +1560,7 @@ export class VirtualSelect {
   }
 
   setValueText() {
-    const { multiple, selectedValues, noOfDisplayValues, showValueAsTags, $valueText } = this;
+    const { multiple, selectedValues, noOfDisplayValues, showValueAsTags, $valueText, selectedLabelRenderer } = this;
     const valueText = [];
     let valueTooltip = [];
     const selectedLength = selectedValues.length;
@@ -1585,7 +1586,12 @@ export class VirtualSelect {
           return true;
         }
 
-        const { label } = d;
+        let { label } = d;
+
+        if(typeof selectedLabelRenderer === 'function' ){
+          label = selectedLabelRenderer(d);
+        }
+
         valueText.push(label);
         selectedValuesCount += 1;