Fixed icons (#5329)

* Set the icons in the initConstants function to prevent issues with
extentions

* Fixed customizing icons for the multiple sort extension

* Fixed issue that the button is always shown, also if the
showMultiSortButton is set to false

src/bootstrap-table.js

@@ -50,6 +50,10 @@ class BootstrapTable {
     if (typeof this.buttons !== 'object') {
       this.buttons = {}
     }
+
+    if (typeof opts.icons === 'string') {
+      opts.icons = Utils.calculateObjectValue(null, opts.icons)
+    }
   }
 
   initLocale () {
@@ -563,10 +567,6 @@ class BootstrapTable {
       `${this.constants.classes.pull}-${opts.buttonsAlign}`
     ].join(' ')}">`]
 
-    if (typeof opts.icons === 'string') {
-      opts.icons = Utils.calculateObjectValue(null, opts.icons)
-    }
-
     if (typeof opts.buttonsOrder === 'string') {
       opts.buttonsOrder = opts.buttonsOrder.replace(/\[|\]| |'/g, '').toLowerCase().split(',')
     }

src/extensions/multiple-sort/bootstrap-table-multiple-sort.js

@@ -7,13 +7,42 @@
 
 let isSingleSort = false
 const Utils = $.fn.bootstrapTable.utils
+
+$.extend($.fn.bootstrapTable.defaults.icons, {
+  plus: {
+    bootstrap3: 'glyphicon-plus',
+    bootstrap4: 'fa-plus',
+    bootstrap5: 'fa-plus',
+    semantic: 'fa-plus',
+    materialize: 'plus',
+    foundation: 'fa-plus',
+    bulma: 'fa-plus',
+    'bootstrap-table': 'icon-plus'
+  }[$.fn.bootstrapTable.theme] || 'fa-clock',
+  minus: {
+    bootstrap3: 'glyphicon-minus',
+    bootstrap4: 'fa-minus',
+    bootstrap5: 'fa-minus',
+    semantic: 'fa-minus',
+    materialize: 'minus',
+    foundation: 'fa-minus',
+    bulma: 'fa-minus',
+    'bootstrap-table': 'icon-minus'
+  }[$.fn.bootstrapTable.theme] || 'fa-clock',
+  sort: {
+    bootstrap3: 'glyphicon-sort',
+    bootstrap4: 'fa-sort',
+    bootstrap5: 'fa-sort',
+    semantic: 'fa-sort',
+    materialize: 'sort',
+    foundation: 'fa-sort',
+    bulma: 'fa-sort',
+    'bootstrap-table': 'icon-sort-amount-asc'
+  }[$.fn.bootstrapTable.theme] || 'fa-clock'
+})
+
 const theme = {
   bootstrap3: {
-    icons: {
-      plus: 'glyphicon-plus',
-      minus: 'glyphicon-minus',
-      sort: 'glyphicon-sort'
-    },
     html: {
       multipleSortModal: `
         <div class="modal fade" id="%s" tabindex="-1" role="dialog" aria-labelledby="%sLabel" aria-hidden="true">
@@ -60,11 +89,6 @@ const theme = {
     }
   },
   bootstrap4: {
-    icons: {
-      plus: 'fa-plus',
-      minus: 'fa-minus',
-      sort: 'fa-sort'
-    },
     html: {
       multipleSortModal: `
         <div class="modal fade" id="%s" tabindex="-1" role="dialog" aria-labelledby="%sLabel" aria-hidden="true">
@@ -113,11 +137,6 @@ const theme = {
     }
   },
   bootstrap5: {
-    icons: {
-      plus: 'fa-plus',
-      minus: 'fa-minus',
-      sort: 'fa-sort'
-    },
     html: {
       multipleSortModal: `
         <div class="modal fade" id="%s" tabindex="-1" role="dialog" aria-labelledby="%sLabel" aria-hidden="true">
@@ -166,11 +185,6 @@ const theme = {
     }
   },
   semantic: {
-    icons: {
-      plus: 'fa-plus',
-      minus: 'fa-minus',
-      sort: 'fa-sort'
-    },
     html: {
       multipleSortModal: `
         <div class="ui modal tiny" id="%s" aria-labelledby="%sLabel" aria-hidden="true">
@@ -213,11 +227,6 @@ const theme = {
     }
   },
   materialize: {
-    icons: {
-      plus: 'plus',
-      minus: 'minus',
-      sort: 'sort'
-    },
     html: {
       multipleSortModal: `
         <div id="%s" class="modal" aria-labelledby="%sLabel" aria-hidden="true">
@@ -257,11 +266,6 @@ const theme = {
     }
   },
   foundation: {
-    icons: {
-      plus: 'fa-plus',
-      minus: 'fa-minus',
-      sort: 'fa-sort'
-    },
     html: {
       multipleSortModal: `
         <div class="reveal" id="%s" data-reveal aria-labelledby="%sLabel" aria-hidden="true">
@@ -304,11 +308,6 @@ const theme = {
     }
   },
   bulma: {
-    icons: {
-      plus: 'fa-plus',
-      minus: 'fa-minus',
-      sort: 'fa-sort'
-    },
     html: {
       multipleSortModal: `
         <div class="modal" id="%s" aria-labelledby="%sLabel" aria-hidden="true">
@@ -349,11 +348,6 @@ const theme = {
     }
   },
   'bootstrap-table': {
-    icons: {
-      plus: 'icon-plus',
-      minus: 'icon-minus',
-      sort: 'icon-sort-amount-asc'
-    },
     html: {
       multipleSortModal: `
         <div class="modal" id="%s" aria-labelledby="%sLabel" aria-hidden="true">
@@ -407,9 +401,9 @@ const showSortModal = that => {
       theme.html.multipleSortModal,
       _selector, _selector, _selector,
       that.options.formatMultipleSort(),
-      Utils.sprintf(that.constants.html.icon, o.iconsPrefix, theme.icons.plus),
+      Utils.sprintf(that.constants.html.icon, o.iconsPrefix, o.icons.plus),
       that.options.formatAddLevel(),
-      Utils.sprintf(that.constants.html.icon, o.iconsPrefix, theme.icons.minus),
+      Utils.sprintf(that.constants.html.icon, o.iconsPrefix, o.icons.minus),
       that.options.formatDeleteLevel(),
       that.options.formatColumn(),
       that.options.formatOrder(),
@@ -592,11 +586,13 @@ BootstrapTable.prototype.initToolbar = function (...args) {
     that.onMultipleSort()
   }
 
-  this.buttons = Object.assign(this.buttons, {
-    multipleSort: {
-      html: Utils.sprintf(theme.html.multipleSortButton, that.sortModalSelector, this.options.formatMultipleSort(), Utils.sprintf(that.constants.html.icon, o.iconsPrefix, theme.icons.sort))
-    }
-  })
+  if (this.options.showMultiSortButton) {
+    this.buttons = Object.assign(this.buttons, {
+      multipleSort: {
+        html: Utils.sprintf(theme.html.multipleSortButton, that.sortModalSelector, this.options.formatMultipleSort(), Utils.sprintf(that.constants.html.icon, o.iconsPrefix, o.icons.sort))
+      }
+    })
+  }
 
   _initToolbar.apply(this, Array.prototype.slice.apply(args))