make rtl icons part of each theme

packages/bootstrap/src/main.ts

@@ -26,6 +26,12 @@ BootstrapTheme.prototype.iconClasses = {
   prevYear: 'fa-angle-double-left',
   nextYear: 'fa-angle-double-right'
 }
+BootstrapTheme.prototype.rtlIconClasses = {
+  prev: 'fa-chevron-right',
+  next: 'fa-chevron-left',
+  prevYear: 'fa-angle-double-right',
+  nextYear: 'fa-angle-double-left'
+}
 
 BootstrapTheme.prototype.iconOverrideOption = 'bootstrapFontAwesome'
 BootstrapTheme.prototype.iconOverrideCustomButtonOption = 'bootstrapFontAwesome'

packages/core/src/component/ComponentContext.ts

@@ -59,10 +59,12 @@ export function buildContext(
 
 
 function computeContextProps(options: any, theme: Theme, calendar: Calendar) {
+  let isRtl = options.dir === 'rtl'
+
   return {
-    isRtl: options.dir === 'rtl',
+    isRtl,
     eventOrderSpecs: parseFieldSpecs(options.eventOrder),
     nextDayThreshold: createDuration(options.nextDayThreshold),
-    ...parseToolbars(options, theme, calendar)
+    ...parseToolbars(options, theme, isRtl, calendar)
   }
 }

packages/core/src/options.ts

@@ -92,13 +92,6 @@ export const rtlDefaults = { // right-to-left defaults
     left: 'next,prev today',
     center: '',
     right: 'title'
-  },
-  buttonIcons: {
-    // TODO: make RTL support the responibility of the theme
-    prev: 'fc-icon-chevron-right',
-    next: 'fc-icon-chevron-left',
-    prevYear: 'fc-icon-chevrons-right',
-    nextYear: 'fc-icon-chevrons-left'
   }
 }
 

packages/core/src/theme/StandardTheme.ts

@@ -18,6 +18,12 @@ StandardTheme.prototype.iconClasses = {
   prevYear: 'fc-icon-chevrons-left',
   nextYear: 'fc-icon-chevrons-right'
 }
+StandardTheme.prototype.rtlIconClasses = {
+  prev: 'fc-icon-chevron-right',
+  next: 'fc-icon-chevron-left',
+  prevYear: 'fc-icon-chevrons-right',
+  nextYear: 'fc-icon-chevrons-left'
+}
 
 StandardTheme.prototype.iconOverrideOption = 'buttonIcons'
 StandardTheme.prototype.iconOverrideCustomButtonOption = 'icon'

packages/core/src/theme/Theme.ts

@@ -1,27 +1,20 @@
 
 export default class Theme {
 
-  calendarOptions: any
-
   // settings. default values are set after the class
   classes: any
   iconClasses: any
-  baseIconClass: string
-  iconOverrideOption: any
-  iconOverrideCustomButtonOption: any
+  rtlIconClasses: any
+  baseIconClass: string // className that ALL icon elements for this theme should have
+  iconOverrideOption: any // the name of the setting to use for icons. the subclass must set this.
+  iconOverrideCustomButtonOption: any // the name of the setting, *within* each customButtons object, to use for icons
   iconOverridePrefix: string
 
 
   constructor(calendarOptions) {
-    this.calendarOptions = calendarOptions
-    this.processIconOverride()
-  }
-
-
-  processIconOverride() {
     if (this.iconOverrideOption) {
       this.setIconOverride(
-        this.calendarOptions[this.iconOverrideOption]
+        calendarOptions[this.iconOverrideOption]
       )
     }
   }
@@ -41,6 +34,7 @@ export default class Theme {
       }
 
       this.iconClasses = iconClassesCopy
+
     } else if (iconOverrideHash === false) {
       this.iconClasses = {}
     }
@@ -63,8 +57,15 @@ export default class Theme {
   }
 
 
-  getIconClass(buttonName) {
-    let className = this.iconClasses[buttonName]
+  getIconClass(buttonName, isRtl?: boolean) {
+    let className
+
+    if (isRtl && this.rtlIconClasses) {
+      className = this.rtlIconClasses[buttonName] || this.iconClasses[buttonName]
+
+    } else {
+      className = this.iconClasses[buttonName]
+    }
 
     if (className) {
       return this.baseIconClass + ' ' + className

packages/core/src/toolbar-parse.ts

@@ -15,23 +15,23 @@ export interface ToolbarWidget {
   buttonText?: any
 }
 
-export function parseToolbars(allOptions, theme: Theme, calendar: Calendar) {
+export function parseToolbars(allOptions, theme: Theme, isRtl: boolean, calendar: Calendar) {
   let viewsWithButtons: string[] = []
-  let header = allOptions.header ? parseToolbar(allOptions.header, theme, calendar, viewsWithButtons) : null
-  let footer = allOptions.footer ? parseToolbar(allOptions.footer, theme, calendar, viewsWithButtons) : null
+  let header = allOptions.header ? parseToolbar(allOptions.header, theme, isRtl, calendar, viewsWithButtons) : null
+  let footer = allOptions.footer ? parseToolbar(allOptions.footer, theme, isRtl, calendar, viewsWithButtons) : null
 
   return { header, footer, viewsWithButtons }
 }
 
-function parseToolbar(raw, theme: Theme, calendar: Calendar, viewsWithButtons: string[]): ToolbarModel {
+function parseToolbar(raw, theme: Theme, isRtl: boolean, calendar: Calendar, viewsWithButtons: string[]): ToolbarModel {
   return {
-    left: raw.left ? parseSection(raw.left, theme, calendar, viewsWithButtons) : [],
-    center: raw.center ? parseSection(raw.center, theme, calendar, viewsWithButtons) : [],
-    right: raw.right ? parseSection(raw.right, theme, calendar, viewsWithButtons) : []
+    left: raw.left ? parseSection(raw.left, theme, isRtl, calendar, viewsWithButtons) : [],
+    center: raw.center ? parseSection(raw.center, theme, isRtl, calendar, viewsWithButtons) : [],
+    right: raw.right ? parseSection(raw.right, theme, isRtl, calendar, viewsWithButtons) : []
   }
 }
 
-function parseSection(sectionStr: string, theme: Theme, calendar: Calendar, viewsWithButtons: string[]): ToolbarWidget[][] {
+function parseSection(sectionStr: string, theme: Theme, isRtl: boolean, calendar: Calendar, viewsWithButtons: string[]): ToolbarWidget[][] {
   let optionsManager = calendar.optionsManager
   let viewSpecs = calendar.viewSpecs
   let calendarCustomButtons = optionsManager.computed.customButtons || {}
@@ -58,7 +58,7 @@ function parseSection(sectionStr: string, theme: Theme, calendar: Calendar, view
             }
           };
           (buttonIcon = theme.getCustomButtonIconClass(customButtonProps)) ||
-          (buttonIcon = theme.getIconClass(buttonName)) ||
+          (buttonIcon = theme.getIconClass(buttonName, isRtl)) ||
           (buttonText = customButtonProps.text)
 
         } else if ((viewSpec = viewSpecs[buttonName])) {
@@ -68,7 +68,7 @@ function parseSection(sectionStr: string, theme: Theme, calendar: Calendar, view
             calendar.changeView(buttonName)
           };
           (buttonText = viewSpec.buttonTextOverride) ||
-          (buttonIcon = theme.getIconClass(buttonName)) ||
+          (buttonIcon = theme.getIconClass(buttonName, isRtl)) ||
           (buttonText = viewSpec.buttonTextDefault)
 
         } else if (calendar[buttonName]) { // a calendar method
@@ -76,7 +76,7 @@ function parseSection(sectionStr: string, theme: Theme, calendar: Calendar, view
             calendar[buttonName]()
           };
           (buttonText = calendarButtonTextOverrides[buttonName]) ||
-          (buttonIcon = theme.getIconClass(buttonName)) ||
+          (buttonIcon = theme.getIconClass(buttonName, isRtl)) ||
           (buttonText = calendarButtonText[buttonName])
           //            ^ everything else is considered default
         }