Enable align feature via a prop, add position fix for ‘start’ alignment

Author: richardadjogah

lib/index.js

@@ -66,6 +66,7 @@ const Popover = createClass({
     isOpen: T.bool,
     onOuterAction: T.func,
     enterExitTransitionDurationMs: T.number,
+    align: T.string,
   },
   getInitialState () {
     return {
@@ -86,6 +87,7 @@ const Popover = createClass({
       enterExitTransitionDurationMs: 500,
       target: null,
       refreshIntervalMs: 200,
+      align: `center`,
     }
   },
   checkTargetReposition () {
@@ -138,7 +140,7 @@ const Popover = createClass({
     /* When positioning self on the cross-axis do not exceed frame bounds. The strategy to achieve
     this is thus: First position cross-axis self to the cross-axis-center of the the target. Then,
     offset self by the amount that self is past the boundaries of frame. */
-    const pos = Layout.calcRelPos(zone, tb, this.size)
+    const pos = Layout.calcRelPos(zone, tb, this.size, this.props.align)
 
     /* Offset allows users to control the distance betweent the tip and the target. */
     pos[axis.main.start] += this.props.offset * zone.order

lib/layout.js

@@ -56,18 +56,30 @@ const centerOfBoundsFromBounds = (flow, axis, boundsTo, boundsFrom) => (
 
 const place = (flow, axis, align, bounds, size) => {
   const axisProps = axes[flow][axis]
-  return (
-    align === `center`
-      ? centerOfBounds(flow, axis, bounds) - centerOfSize(flow, axis, size)
-    : align === `end`
-      ? bounds[axisProps.end]
-    : align === `start`
-      /* DOM rendering unfolds leftward. Therefore if the slave is positioned before
-      the master then the slave`s position must in addition be pulled back
-      by its [the slave`s] own length. */
-      ? bounds[axisProps.start] - size[axisProps.size]
-    : null
-  )
+  if (axis === `main`) {
+    return (
+      align === `center`
+        ? centerOfBounds(flow, axis, bounds) - centerOfSize(flow, axis, size)
+      : align === `end`
+        ? bounds[axisProps.end]
+      : align === `start`
+        /* DOM rendering unfolds leftward. Therefore if the slave is positioned before
+        the master then the slave`s position must in addition be pulled back
+        by its [the slave`s] own length. */
+        ? bounds[axisProps.start] - size[axisProps.size]
+      : null
+    )
+  } else {
+    return (
+      align === `center`
+        ? centerOfBounds(flow, axis, bounds) - centerOfSize(flow, axis, size)
+      : align === `end`
+        ? bounds[axisProps.end]
+      : align === `start`
+        ? bounds[axisProps.start]
+      : null
+    )
+  }
 }
 
 
@@ -208,13 +220,12 @@ const pickZone = (opts, frameBounds, targetBounds, size) => {
 
 /* TODO Document this. */
 
-const calcRelPos = (zone, masterBounds, slaveSize) => {
+const calcRelPos = (zone, masterBounds, slaveSize, align) => {
   const { main, cross } = axes[zone.flow]
   /* TODO: The slave is hard-coded to align cross-center with master. */
-  const crossAlign = `center`
   const mainStart = place(zone.flow, `main`, zone.side, masterBounds, slaveSize)
   const mainSize = slaveSize[main.size]
-  const crossStart = place(zone.flow, `cross`, crossAlign, masterBounds, slaveSize)
+  const crossStart = place(zone.flow, `cross`, align, masterBounds, slaveSize)
   const crossSize = slaveSize[cross.size]
 
   return {