Flex direction-specific property access now in adapter

popcodeorg · May 27, 2018 · 6211922 · 6211922
1 parent 7e6a73d
commit 6211922
Showing 1 changed file with 33 additions and 11 deletions.
diff --git a/src/util/resizableFlex.js b/src/util/resizableFlex.js
@@ -8,6 +8,23 @@ import times from 'lodash-es/times';
 import {makeGetResizableFlex} from '../selectors';
 import {updateFlexGrow} from '../actions';
 
+const directionAdapters = {
+  column: {
+    getCurrentSize(element) {
+      return element.offsetHeight;
+    },
+
+    getDesiredSize(element, {y}) {
+      return y - element.offsetTop;
+    },
+  },
+};
+
+function directionAdapterFor({parentNode}) {
+  const flexDirection = getComputedStyle(parentNode)['flex-direction'];
+  return directionAdapters[flexDirection];
+}
+
 function calculateFlexGrowAfterDrag(
   {
     currentFlexGrow: currentBeforeFlexGrow,
@@ -58,14 +75,17 @@ export default function resizableFlex(size) {
             const [{current: before}, {current: after}] =
               at(regions, [beforeIndex, afterIndex]);
 
+            const {getCurrentSize, getDesiredSize} =
+              directionAdapterFor(before);
+
             const [desiredBeforeFlex, desiredAfterFlex] =
               calculateFlexGrowAfterDrag(
                 {
                   currentFlexGrow: Number(
                     getComputedStyle(before)['flex-grow'],
                   ),
-                  currentSize: before.offsetHeight,
-                  desiredSize: payload.y - before.offsetTop,
+                  currentSize: getCurrentSize(before),
+                  desiredSize: getDesiredSize(before, payload),
                   initialMainSize: initialMainSizes[beforeIndex],
                 },
                 {
@@ -88,18 +108,20 @@ export default function resizableFlex(size) {
 
           flexRefs: map(
             regions,
-            (region, index) => (ref) => {
-              region.current = ref;
-              if (isNull(ref)) {
+            (region, index) => (element) => {
+              region.current = element;
+              if (isNull(element)) {
                 initialMainSizes[index] = null;
                 return;
               }
-              const flexGrowWas = ref.style.flexGrow;
-              const flexShrinkWas = ref.style.flexShrink;
-              ref.style.flexGrow = ref.style.flexShrink = '0';
-              initialMainSizes[index] = ref.offsetHeight;
-              ref.style.flexGrow = flexGrowWas;
-              ref.style.flexShrink = flexShrinkWas;
+
+              const flexGrowWas = element.style.flexGrow;
+              const flexShrinkWas = element.style.flexShrink;
+              element.style.flexGrow = element.style.flexShrink = '0';
+              initialMainSizes[index] = directionAdapterFor(element).
+                getCurrentSize(element);
+              element.style.flexGrow = flexGrowWas;
+              element.style.flexShrink = flexShrinkWas;
             },
           ),