toolbar start/end. kills dirDefaults,rtlDefaults

packages/core/src/OptionsManager.ts

@@ -1,12 +1,11 @@
 import { firstDefined } from './util/misc'
-import { globalDefaults, rtlDefaults, mergeOptions } from './options'
+import { globalDefaults, mergeOptions } from './options'
 import { organizeRawLocales, buildLocale } from './datelib/locale'
 import { __assign } from 'tslib'
 
 
 export default class OptionsManager {
 
-  dirDefaults: any // option defaults related to LTR or RTL
   localeDefaults: any // option defaults related to current locale
   overrides: any // option overrides given to the fullCalendar constructor
   dynamicOverrides: any // options set with dynamic setter method. higher precedence than view overrides.
@@ -56,20 +55,10 @@ export default class OptionsManager {
     let available = organizeRawLocales(locales) // also done in Calendar :(
     let localeDefaults = buildLocale(locale || available.defaultCode, available.map).options
 
-    let dir = firstDefined( // based on options computed so far, is direction RTL?
-      this.dynamicOverrides.dir,
-      this.overrides.dir,
-      localeDefaults.dir
-    )
-
-    let dirDefaults = dir === 'rtl' ? rtlDefaults : {}
-
-    this.dirDefaults = dirDefaults
     this.localeDefaults = localeDefaults
 
     this.computed = mergeOptions([ // merge defaults and overrides. lowest to highest precedence
       globalDefaults, // global defaults
-      dirDefaults,
       localeDefaults,
       this.overrides,
       this.dynamicOverrides

packages/core/src/Toolbar.tsx

@@ -4,7 +4,7 @@ import { ToolbarModel, ToolbarWidget } from './toolbar-parse'
 
 
 export interface ToolbarProps extends ToolbarContent {
-  extraClassName: string
+  extraClassName: string // wish this could be array, but easier for pureness
   model: ToolbarModel
 }
 
@@ -22,23 +22,45 @@ export default class Toolbar extends BaseComponent<ToolbarProps> {
 
   render(props: ToolbarProps) {
     let { model } = props
+    let forceLtr = false
+    let startContent, endContent
+    let centerContent = model.center
+
+    if (model.left) {
+      forceLtr = true
+      startContent = model.left
+    } else {
+      startContent = model.start
+    }
+
+    if (model.right) {
+      forceLtr = true
+      endContent = model.right
+    } else {
+      endContent = model.end
+    }
+
+    let classNames = [
+      props.extraClassName || '',
+      'fc-toolbar',
+      forceLtr ? 'fc-toolbar-ltr' : ''
+    ]
 
     return (
-      <div class={'fc-toolbar ' + props.extraClassName}>
-        {this.renderSection('left', model.left)}
-        {this.renderSection('center', model.center)}
-        {this.renderSection('right', model.right)}
+      <div class={classNames.join(' ')}>
+        {this.renderSection(startContent || [])}
+        {this.renderSection(centerContent || [])}
+        {this.renderSection(endContent || [])}
       </div>
     )
   }
 
 
-  renderSection(position: string, widgetGroups: ToolbarWidget[][]) {
+  renderSection(widgetGroups: ToolbarWidget[][]) {
     let { props } = this
 
     return (
       <ToolbarSection
-        position={position}
         widgetGroups={widgetGroups}
         title={props.title}
         activeButton={props.activeButton}
@@ -53,7 +75,6 @@ export default class Toolbar extends BaseComponent<ToolbarProps> {
 
 
 interface ToolbarSectionProps extends ToolbarContent {
-  position: string
   widgetGroups: ToolbarWidget[][]
 }
 
@@ -63,7 +84,7 @@ class ToolbarSection extends BaseComponent<ToolbarSectionProps> {
     let { theme } = this.context
 
     return (
-      <div class={'fc-toolbar-' + props.position}>
+      <div class='fc-toolbar-chunk'>
         {props.widgetGroups.map((widgetGroup: ToolbarWidget[]) => {
           let children = []
           let isOnlyButtons = true

packages/core/src/options.ts

@@ -17,9 +17,9 @@ export const globalDefaults = {
   defaultView: '',
   aspectRatio: 1.35,
   header: {
-    left: 'title',
+    start: 'title',
     center: '',
-    right: 'today prev,next'
+    end: 'today prev,next'
   },
   weekends: true,
   weekNumbers: false,
@@ -87,15 +87,6 @@ export const globalDefaults = {
 }
 
 
-export const rtlDefaults = { // right-to-left defaults
-  header: { // TODO: smarter solution (first/center/last ?)
-    left: 'next,prev today',
-    center: '',
-    right: 'title'
-  }
-}
-
-
 let complexOptions = [ // names of options that are objects whose properties should be combined
   'header',
   'footer',

packages/core/src/structs/view-spec.ts

@@ -93,7 +93,6 @@ function buildViewSpec(viewDef: ViewDef, overrideConfigs: ViewConfigHash, option
     options: {
       ...globalDefaults,
       ...viewDef.defaults,
-      ...optionsManager.dirDefaults,
       ...optionsManager.localeDefaults,
       ...optionsManager.overrides,
       ...singleUnitOverrides,
@@ -108,7 +107,6 @@ function buildViewSpec(viewDef: ViewDef, overrideConfigs: ViewConfigHash, option
 
     buttonTextDefault:
       queryButtonText(optionsManager.localeDefaults) ||
-      queryButtonText(optionsManager.dirDefaults) ||
       viewDef.defaults.buttonText ||
       queryButtonText(globalDefaults) ||
       viewDef.type // fall back to given view name

packages/core/src/styles/_toolbar.scss

@@ -5,6 +5,10 @@
   align-items: center;
 }
 
+.fc-dir-rtl .fc-toolbar-ltr {
+  flex-direction: row-reverse;
+}
+
 .fc-toolbar.fc-header-toolbar {
   margin-bottom: 1.5em;
 }

packages/core/src/toolbar-parse.ts

@@ -1,11 +1,10 @@
 import { ViewSpec } from './structs/view-spec'
 import Calendar from './Calendar'
 import Theme from './theme/Theme'
+import { mapHash } from './util/object'
 
 export interface ToolbarModel {
-  left: ToolbarWidget[][]
-  center: ToolbarWidget[][]
-  right: ToolbarWidget[][]
+  [sectionName: string]: ToolbarWidget[][]
 }
 
 export interface ToolbarWidget {
@@ -15,6 +14,7 @@ export interface ToolbarWidget {
   buttonText?: any
 }
 
+// TODO: make separate parsing of header/footer part of options-processing system
 export function parseToolbars(allOptions, theme: Theme, isRtl: boolean, calendar: Calendar) {
   let viewsWithButtons: string[] = []
   let header = allOptions.header ? parseToolbar(allOptions.header, theme, isRtl, calendar, viewsWithButtons) : null
@@ -24,21 +24,21 @@ export function parseToolbars(allOptions, theme: Theme, isRtl: boolean, calendar
 }
 
 function parseToolbar(raw, theme: Theme, isRtl: boolean, calendar: Calendar, viewsWithButtons: string[]): ToolbarModel {
-  return {
-    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) : []
-  }
+  return mapHash(raw, (rawSection: any) => parseSection(rawSection, theme, isRtl, calendar, viewsWithButtons))
 }
 
+/*
+BAD: querying icons and text here. should be done at render time
+*/
 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 || {}
   let calendarButtonTextOverrides = optionsManager.overrides.buttonText || {}
   let calendarButtonText = optionsManager.computed.buttonText || {}
+  let sectionSubstrs = sectionStr ? sectionStr.split(' ') : []
 
-  return sectionStr.split(' ').map((buttonGroupStr, i): ToolbarWidget[] => {
+  return sectionSubstrs.map((buttonGroupStr, i): ToolbarWidget[] => {
     return buttonGroupStr.split(',').map((buttonName, j): ToolbarWidget => {
 
       if (buttonName === 'title') {