Days selection fix when using RTL languages (#172)

* a better solution * also a fix for TimeGrid
jquense · Nov 12, 2016 · 5b8c99d · 5b8c99d
1 parent e750014
commit 5b8c99d
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 9 deletions.
diff --git a/src/BackgroundCells.jsx b/src/BackgroundCells.jsx
@@ -11,7 +11,8 @@ class DisplayCells extends React.Component {
   static propTypes = {
     selectable: React.PropTypes.bool,
     onSelect: React.PropTypes.func,
-    slots: React.PropTypes.number
+    slots: React.PropTypes.number,
+    rtl: React.PropTypes.bool
   }
 
   state = { selecting: false }
@@ -62,7 +63,7 @@ class DisplayCells extends React.Component {
     let selector = this._selector = new Selection(this.props.container)
 
     selector.on('selecting', box => {
-      let { slots } = this.props;
+      let { slots, rtl } = this.props;
 
       let startIdx = -1;
       let endIdx = -1;
@@ -78,7 +79,8 @@ class DisplayCells extends React.Component {
             this._initial
           , nodeBox
           , box
-          , slots));
+          , slots
+          , rtl));
       }
 
       this.setState({
@@ -90,10 +92,11 @@ class DisplayCells extends React.Component {
     selector
       .on('click', point => {
         let rowBox = getBoundsForNode(node)
+        let { slots, rtl } = this.props;
 
         if (pointInBox(rowBox, point)) {
           let width = slotWidth(getBoundsForNode(node),  this.props.slots);
-          let currentCell = getCellAtX(rowBox, point.x, width);
+          let currentCell = getCellAtX(rowBox, point.x, width, rtl, slots);
 
           this._selectSlot({
             startIdx: currentCell,

diff --git a/src/Month.jsx b/src/Month.jsx
@@ -184,6 +184,7 @@ let MonthView = React.createClass({
 
     return (
     <BackgroundCells
+      rtl={this.props.rtl}
       slots={7}
       onSelectSlot={onSelectSlot}
       container={() => findDOMNode(this)}

diff --git a/src/TimeGrid.jsx b/src/TimeGrid.jsx
@@ -259,6 +259,7 @@ export default class TimeGrid extends Component {
           </div>
           <div ref='allDay' className='rbc-allday-cell'>
             <BackgroundCells
+              rtl={this.props.rtl}
               slots={range.length}
               container={()=> this.refs.allDay}
               selectable={this.props.selectable}

diff --git a/src/utils/selection.js b/src/utils/selection.js
@@ -11,8 +11,9 @@ export function slotWidth(rowBox, slots){
   return cellWidth
 }
 
-export function getCellAtX(rowBox, x, cellWidth) {
-   return Math.floor((x - rowBox.left) / cellWidth);
+export function getCellAtX(rowBox, x, cellWidth, rtl, slots) {
+   return (rtl ? slots - 1 - Math.floor((x - rowBox.left) / cellWidth) :
+                 Math.floor((x - rowBox.left) / cellWidth));
 }
 
 export function pointInBox(box, { x, y }) {
@@ -22,15 +23,15 @@ export function pointInBox(box, { x, y }) {
    )
 }
 
-export function dateCellSelection(start, rowBox, box, slots){
+export function dateCellSelection(start, rowBox, box, slots, rtl){
   let startIdx = -1;
   let endIdx = -1;
   let lastSlotIdx = slots - 1
 
   let cellWidth = slotWidth(rowBox, slots);
 
   // cell under the mouse
-  let currentSlot = getCellAtX(rowBox, box.x, cellWidth);
+  let currentSlot = getCellAtX(rowBox, box.x, cellWidth, rtl, slots);
 
   // Identify row as either the initial row
   // or the row under the current mouse point
@@ -61,7 +62,8 @@ export function dateCellSelection(start, rowBox, box, slots){
 
   if (isStartRow) {
     // select the cell under the initial point
-    startIdx = endIdx = Math.floor((start.x - rowBox.left) / cellWidth)
+    startIdx = endIdx = ( rtl ? lastSlotIdx - Math.floor((start.x - rowBox.left) / cellWidth) :
+                                Math.floor((start.x - rowBox.left) / cellWidth));
 
     if (isCurrentRow) {
       if (currentSlot < startIdx) startIdx = currentSlot