react-align 1.1.6 → 2.0.2

package/dist/react-align.cjs.development.js

@@ -6,15 +6,15 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var React = require('react');
 var React__default = _interopDefault(React);
-var reactDnd = require('react-dnd');
-var reactDndHtml5Backend = require('react-dnd-html5-backend');
+var reactBeautifulDnd = require('react-beautiful-dnd');
 var glamor = require('glamor');
 
-var EditorModeContext = /*#__PURE__*/React.createContext({
-  enabled: undefined
+var Context = /*#__PURE__*/React.createContext({
+  editing: false,
+  isDragging: false
 });
-var useEditorMode = function useEditorMode() {
-  return React.useContext(EditorModeContext);
+var useAlignContext = function useAlignContext() {
+  return React.useContext(Context);
 };
 
 function styleInject(css, ref) {
@@ -44,25 +44,45 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".wrapper{height:100%}.section,.wrapper{display:flex;justify-content:space-between}.section{flex-direction:column}.area{border:1px solid transparent;border-radius:8px;box-sizing:border-box;display:flex;position:relative}.area-transition-in{transition:all .3s ease-in-out,min-height .5s ease-in-out .2s,min-width .5s ease-in-out .2s}.area-transition-out{transition:all .3s ease-in-out .4s,min-height .5s ease-in-out .2s,min-width .5s ease-in-out .2s}.item{border:1px solid transparent;border-radius:6px;box-sizing:border-box;margin:6px}.vertical{flex-direction:column}.vertical-r{flex-direction:column-reverse}.horizontal{flex-direction:row}.horizontal-r{flex-direction:row-reverse}.stretch{flex:auto}.middle{flex-grow:0;flex:auto}.just-centered{justify-content:center}.just-end{justify-content:flex-end}.end{align-items:flex-end}.hide{display:none}";
+var css_248z = ".wrapper{height:100%}.section,.wrapper{display:flex;justify-content:space-between}.section{flex-direction:column}.area{border:1px solid transparent;border-radius:8px;box-sizing:border-box;display:flex;position:relative}.area-transition-in{transition:all .3s ease-in-out,min-height .5s ease-in-out .2s,min-width .5s ease-in-out .2s}.area-transition-out{transition:all .3s ease-in-out .4s,min-height .5s ease-in-out .2s,min-width .5s ease-in-out .2s}.item{border:1px solid transparent;border-radius:6px;box-sizing:border-box;margin:6px;min-height:40px;min-width:70px;position:relative}.stretch{flex:auto}.middle{flex-grow:0;flex:auto}.just-centered{justify-content:center}.just-end{justify-content:flex-end}.end{align-items:flex-end}.hide{display:none}.overlay{background:rgba(0,0,0,.6);bottom:0;box-sizing:border-box;left:0;position:absolute;right:0;top:0}.overlay-buttons{box-sizing:border-box;display:flex;justify-content:space-between;padding:6px}";
 styleInject(css_248z);
 
 var GridWrapper = function GridWrapper(_ref) {
   var className = _ref.className,
-      enabled = _ref.enabled,
+      editing = _ref.editing,
       vertical = _ref.vertical,
       stretch = _ref.stretch,
-      styles = _ref.styles,
-      editorStyles = _ref.editorStyles,
-      children = _ref.children;
+      style = _ref.style,
+      editorStyle = _ref.editorStyle,
+      children = _ref.children,
+      onMove = _ref.onMove,
+      onAlignChange = _ref.onAlignmentChange,
+      onExtend = _ref.onExtend;
+
+  var _useState = React.useState(false),
+      isDragging = _useState[0],
+      setDragging = _useState[1];
+
+  var handleDragStart = React.useCallback(function () {
+    setDragging(true);
+  }, []);
+  var handleDragEnd = React.useCallback(function (result, _provided) {
+    setDragging(false);
+    if (!result.destination || result.reason !== 'DROP' || result.destination.droppableId === result.source.droppableId && result.destination.index === result.source.index) return;
+    onMove == null ? void 0 : onMove(result.draggableId, result.destination.droppableId, result.destination.index, result.source.droppableId, result.source.index);
+  }, [onMove]);
   return React__default.createElement("div", {
     className: "wrapper " + className + " " + (vertical && 'vertical') + " " + (stretch && 'stretch'),
-    style: enabled ? editorStyles : styles
-  }, React__default.createElement(reactDnd.DndProvider, {
-    backend: reactDndHtml5Backend.HTML5Backend
-  }, React__default.createElement(EditorModeContext.Provider, {
+    style: editing ? editorStyle : style
+  }, React__default.createElement(reactBeautifulDnd.DragDropContext, {
+    onDragStart: handleDragStart,
+    onDragEnd: handleDragEnd
+  }, React__default.createElement(Context.Provider, {
     value: {
-      enabled: enabled
+      editing: !!editing,
+      onAlignChange: onAlignChange,
+      onExtend: onExtend,
+      isDragging: isDragging
     }
   }, children)));
 };
@@ -85,26 +105,41 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
 var GridSection = function GridSection(_ref) {
   var className = _ref.className,
       horizontal = _ref.horizontal,
       stretch = _ref.stretch,
       fixedWidth = _ref.fixedWidth,
       fixedHeight = _ref.fixedHeight,
-      styles = _ref.styles,
-      editorStyles = _ref.editorStyles,
+      style = _ref.style,
+      editorStyle = _ref.editorStyle,
       children = _ref.children;
 
-  var _useEditorMode = useEditorMode(),
-      enabled = _useEditorMode.enabled;
+  var _useAlignContext = useAlignContext(),
+      enabled = _useAlignContext.editing;
 
-  var stylesFromProps = enabled ? editorStyles : styles;
   return React__default.createElement("div", {
-    className: "section " + className + " " + (horizontal && 'horizontal') + " " + (stretch && 'stretch'),
-    style: _extends({}, stylesFromProps, {
-      height: fixedHeight + 'px',
+    className: "section " + className + " " + (horizontal ? 'horizontal' : '') + " " + (stretch ? 'stretch' : ''),
+    style: _extends({}, enabled ? editorStyle : style, typeof fixedHeight === 'number' ? {
+      height: fixedHeight + 'px'
+    } : {}, typeof fixedWidth === 'number' ? {
       width: fixedWidth + 'px'
-    })
+    } : {})
   }, children);
 };
 
@@ -400,330 +435,203 @@ var Icon = function Icon(_ref) {
   var className = _ref.className,
       name = _ref.name,
       size = _ref.size,
-      onClick = _ref.onClick,
-      styles = _ref.styles;
+      style = _ref.style,
+      onClick = _ref.onClick;
   var LocalIconComponent = Icons[name];
   return React__default.createElement(LocalIconComponent, Object.assign({
     className: className
   }, IconStyles(size), {
-    style: styles,
+    style: style,
     onClick: onClick
   }));
 };
 
-var ItemType = {
-  ITEM: 'react-align_item',
-  GROUP: 'react-align_group'
-};
+var alignments = ['start', 'centered', 'end'];
+function GridArea(_ref) {
+  var id = _ref.id,
+      className = _ref.className,
+      vertical = _ref.vertical,
+      stretch = _ref.stretch,
+      end = _ref.end,
+      disabled = _ref.disabled,
+      align = _ref.align,
+      onAlignmentChange = _ref.onAlignmentChange,
+      children = _ref.children,
+      style = _ref.style,
+      editorStyle = _ref.editorStyle,
+      _ref$iconColor = _ref.iconColor,
+      iconColor = _ref$iconColor === void 0 ? '#FFFFFF' : _ref$iconColor;
+
+  var _useAlignContext = useAlignContext(),
+      enabled = _useAlignContext.editing,
+      onAlignChange2 = _useAlignContext.onAlignChange;
+
+  var handleAlignChange = React.useCallback(function () {
+    var a = alignments[(align ? alignments.indexOf(align) + 1 : 0) % alignments.length];
+    onAlignmentChange == null ? void 0 : onAlignmentChange(a);
+    onAlignChange2 == null ? void 0 : onAlignChange2(id, a);
+  }, [align, onAlignmentChange, onAlignChange2, id]);
+  var buttonStyle = React.useMemo(function () {
+    return {
+      position: 'absolute',
+      left: vertical ? end ? 0 : undefined : '50%',
+      right: vertical ? !end ? 0 : undefined : '50%',
+      bottom: !vertical && !end ? 0 : vertical ? '50%' : undefined,
+      top: vertical ? '50%' : end ? 0 : undefined,
+      opacity: !disabled && enabled && align ? 1 : 0,
+      pointerEvents: !disabled && enabled && align ? 'auto' : 'none',
+      transition: 'all 0.5s ease-in-out'
+    };
+  }, [vertical, end, disabled, enabled, align]); // Rebuilds the GridItem children to receive their parent GridArea's 'end' and 'vertical' values.
+  // Used to know where to align the overlay buttons (end) and how to extend the GridItems (vertical).
+
+  var childrenWithParentProps = React.useMemo(function () {
+    return React__default.Children.map(children, function (child) {
+      return React__default.cloneElement(child, {
+        end: end,
+        vertical: vertical
+      });
+    });
+  }, [children, end, vertical]);
+  return React__default.createElement(reactBeautifulDnd.Droppable, {
+    droppableId: id,
+    direction: vertical ? 'vertical' : 'horizontal',
+    isDropDisabled: disabled
+  }, function (provided, snapshot) {
+    return React__default.createElement("div", Object.assign({
+      ref: provided.innerRef
+    }, provided.droppableProps, {
+      className: [className, 'area', stretch && 'stretch', end && 'end', align === 'centered' ? 'just-centered' : align === 'end' ? 'just-end' : 'start', enabled ? 'area-transition-in' : 'area-transition-out'].filter(Boolean).join(' '),
+      style: _extends({
+        flexDirection: vertical ? 'column' : 'row',
+        minHeight: !React__default.Children.count(children) && !enabled ? '0px' : '26px',
+        minWidth: !React__default.Children.count(children) && !enabled ? '0px' : '46px',
+        opacity: snapshot.isDraggingOver ? 0.8 : 1
+      }, enabled ? editorStyle : style)
+    }), childrenWithParentProps, provided.placeholder, React__default.createElement("div", {
+      style: buttonStyle
+    }, React__default.createElement("div", {
+      onClick: handleAlignChange,
+      style: {
+        cursor: 'pointer'
+      }
+    }, React__default.createElement(Icon, {
+      name: align === 'centered' ? vertical ? 'alignCenterV' : 'alignCenter' : align === 'end' ? vertical ? 'alignEndV' : 'alignEnd' : vertical ? 'alignStartV' : 'alignStart',
+      style: {
+        color: iconColor
+      }
+    }))));
+  });
+}
+
 function GridItem(_ref) {
   var className = _ref.className,
       children = _ref.children,
       id = _ref.id,
       index = _ref.index,
-      extendable = _ref.extendable,
-      extended = _ref.extended,
-      draggable = _ref.draggable,
-      onReorder = _ref.onReorder,
-      onMoveArea = _ref.onMoveArea,
+      _ref$extendable = _ref.extendable,
+      extendable = _ref$extendable === void 0 ? false : _ref$extendable,
+      _ref$extended = _ref.extended,
+      extended = _ref$extended === void 0 ? false : _ref$extended,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       onExtend = _ref.onExtend,
-      location = _ref.location,
-      end = _ref.end,
-      vertical = _ref.vertical,
-      styles = _ref.styles,
-      editorStyles = _ref.editorStyles,
+      style = _ref.style,
+      editorStyle = _ref.editorStyle,
       iconSize = _ref.iconSize,
       _ref$iconColor = _ref.iconColor,
-      iconColor = _ref$iconColor === void 0 ? 'rgb(255, 255, 255)' : _ref$iconColor;
-  var ref = React.useRef(null);
+      iconColor = _ref$iconColor === void 0 ? 'rgb(255, 255, 255)' : _ref$iconColor,
+      props = _objectWithoutPropertiesLoose(_ref, ["className", "children", "id", "index", "extendable", "extended", "disabled", "onExtend", "style", "editorStyle", "iconSize", "iconColor"]);
+
+  var end = props.end,
+      vertical = props.vertical;
 
-  var _useEditorMode = useEditorMode(),
-      enabled = _useEditorMode.enabled;
+  var _useAlignContext = useAlignContext(),
+      editing = _useAlignContext.editing,
+      isDragging = _useAlignContext.isDragging,
+      onExtend2 = _useAlignContext.onExtend;
 
   var _useState = React.useState(false),
       isHovered = _useState[0],
       setHovered = _useState[1];
 
-  var dragIndexRef = React.useRef();
-
-  var handleExtend = function handleExtend() {
-    if (!extendable || !onExtend) return;
+  var handleExtend = React.useCallback(function () {
+    if (!extendable) return;
     setHovered(false);
-    onExtend(id, !extended);
-  }; // ***************************************
-  // Drag n drop logic
-
-
-  var _useDrop = reactDnd.useDrop({
-    accept: [ItemType.ITEM, ItemType.GROUP],
-    collect: function collect(monitor) {
-      return {
-        handlerId: monitor.getHandlerId()
-      };
-    },
-    hover: function hover(item, monitor) {
-      var _ref$current;
-
-      if (!ref.current || !enabled || draggable) {
-        return;
-      }
-
-      var dragIndex = item.index;
-      var hoverIndex = index;
-
-      if (dragIndex === hoverIndex) {
-        return;
-      }
-
-      var hoverBoundingRect = (_ref$current = ref.current) == null ? void 0 : _ref$current.getBoundingClientRect();
-      var hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
-      var hoverMiddleX = (hoverBoundingRect.right - hoverBoundingRect.left) / 2;
-      var clientOffset = monitor.getClientOffset();
-      if (!clientOffset) return;
-      var hoverClientY = clientOffset.y - hoverBoundingRect.top;
-      var hoverClientX = clientOffset.x - hoverBoundingRect.left;
-
-      if (vertical) {
-        if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
-          return;
-        }
-
-        if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
-          return;
-        }
-      } else {
-        if (dragIndex < hoverIndex && hoverClientX < hoverMiddleX) {
-          return;
-        }
-
-        if (dragIndex > hoverIndex && hoverClientX > hoverMiddleX) {
-          return;
-        }
-      }
-
-      dragIndexRef.current = dragIndex;
-    },
-    drop: function drop(item) {
-      if (dragIndexRef.current !== undefined) {
-        onReorder(item.id, location, dragIndexRef.current, index);
-        dragIndexRef.current = undefined;
-      }
-    }
-  }),
-      handlerId = _useDrop[0].handlerId,
-      drop = _useDrop[1];
-
-  var _useDrag = reactDnd.useDrag({
-    type: ItemType.ITEM,
-    item: {
-      id: id,
-      index: index
-    },
-    canDrag: draggable != null ? draggable : enabled,
-    end: function end(item, monitor) {
-      var dropResults = monitor.getDropResult();
-
-      if (dropResults && dropResults.location !== location) {
-        onMoveArea(item.id, dropResults.location, location);
-      }
-    },
-    collect: function collect(monitor) {
-      return {
-        isDragging: monitor.isDragging()
-      };
-    }
-  }, [dragIndexRef]),
-      isDragging = _useDrag[0].isDragging,
-      drag = _useDrag[1],
-      preview = _useDrag[2];
-
-  preview(drop(ref)); // ***************************************
-  // ***************************************
-  // External styles for editorMode or the vanilla grid
-
-  var stylesFromProps = enabled ? editorStyles : styles;
-  var itemStyles = React.useMemo(function () {
-    return {
-      opacity: isDragging ? 0.5 : 1,
-      minHeight: isHovered && enabled ? '40px' : undefined,
-      width: !vertical && extended ? '100%' : undefined,
-      minWidth: isHovered && enabled ? extendable ? '70px' : '30px' : undefined,
-      height: vertical && extended ? '100%' : undefined
-    };
-  }, [isDragging, isHovered, enabled, vertical, extended, extendable]);
-  var containerStyle = React.useMemo(function () {
-    return {
-      position: 'relative',
-      display: 'inline-block',
-      minHeight: isHovered && enabled ? '40px' : undefined,
-      width: !vertical && extended ? '100%' : undefined,
-      minWidth: isHovered && enabled ? extendable ? '70px' : '30px' : undefined,
-      height: vertical && extended ? '100%' : undefined
-    };
-  }, [isHovered, enabled, vertical, extended, extendable]);
-  var overlayStyles = {
-    position: 'absolute',
-    top: '0',
-    left: '0',
-    width: '100%',
-    height: '100%',
-    boxSizing: 'border-box',
-    background: 'rgba(0,0,0,0.6)',
-    borderRadius: '6px'
-  };
+    onExtend == null ? void 0 : onExtend(!extended);
+    onExtend2 == null ? void 0 : onExtend2(id, !extended);
+  }, [extendable, onExtend, extended, onExtend2, id]);
   var buttonStyles = React.useMemo(function () {
     return {
-      display: 'flex',
       alignItems: end ? 'end' : 'start',
-      justifyContent: 'space-between',
-      padding: '6px',
       "float": end ? 'right' : 'left'
     };
-  }, [end]); // ***************************************
-
-  var childrenWithParentProps = React__default.Children.map(children, function (child) {
-    return React__default.cloneElement(child, {
-      extended: extended
-    });
-  });
-  return React__default.createElement("div", {
-    id: id,
-    ref: ref,
-    "data-handler-id": handlerId,
-    className: className + " item",
-    style: _extends({}, itemStyles, stylesFromProps),
-    onMouseEnter: function onMouseEnter() {
-      return setHovered(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return setHovered(false);
-    }
-  }, React__default.createElement("div", {
-    style: containerStyle
-  }, (draggable != null ? draggable : enabled) && isHovered && React__default.createElement("div", {
-    style: overlayStyles
-  }, React__default.createElement("div", {
-    style: buttonStyles
-  }, React__default.createElement("div", {
-    ref: drag
-  }, React__default.createElement(Icon, {
-    name: "moveArrows",
-    size: iconSize,
-    styles: {
-      color: iconColor
-    }
-  })), extendable && React__default.createElement(Icon, {
-    name: vertical ? 'verticalExtend' : 'horizontalExtend',
-    size: iconSize,
-    styles: {
-      color: iconColor,
-      marginLeft: '8px'
-    },
-    onClick: handleExtend
-  }))), childrenWithParentProps));
-}
-
-function GridArea(_ref) {
-  var className = _ref.className,
-      vertical = _ref.vertical,
-      reverse = _ref.reverse,
-      stretch = _ref.stretch,
-      end = _ref.end,
-      droppable = _ref.droppable,
-      align = _ref.align,
-      onAlignChange = _ref.onAlignChange,
-      location = _ref.location,
-      children = _ref.children,
-      styles = _ref.styles,
-      editorStyles = _ref.editorStyles,
-      _ref$iconColor = _ref.iconColor,
-      iconColor = _ref$iconColor === void 0 ? '#FFFFFF' : _ref$iconColor;
-
-  var _useEditorMode = useEditorMode(),
-      enabled = _useEditorMode.enabled;
-
-  var handleAlignChange = React.useCallback(function (align) {
-    switch (align) {
-      case 'start':
-        onAlignChange == null ? void 0 : onAlignChange('centered');
-        break;
-
-      case 'centered':
-        onAlignChange == null ? void 0 : onAlignChange('end');
-        break;
-
-      default:
-        onAlignChange == null ? void 0 : onAlignChange('start');
-        break;
-    }
-  }, [onAlignChange]); // ***************************************
-  // Drop logic
-
-  var _useDrop = reactDnd.useDrop(function () {
+  }, [end]);
+  var ctx = React.useMemo(function () {
     return {
-      accept: [ItemType.ITEM, ItemType.GROUP],
-      drop: function drop() {
-        return {
-          location: location
-        };
+      id: id,
+      editing: editing,
+      isDragging: isDragging,
+      isHovered: isHovered,
+      extended: extended,
+      extendable: extendable,
+      disabled: disabled,
+      index: index
+    };
+  }, [disabled, editing, extendable, extended, id, index, isDragging, isHovered]);
+  return React__default.createElement(reactBeautifulDnd.Draggable, {
+    draggableId: id,
+    index: index,
+    isDragDisabled: disabled
+  }, function (provided, snapshot) {
+    return React__default.createElement("div", Object.assign({
+      ref: provided.innerRef
+    }, provided.draggableProps, {
+      className: className + " item",
+      style: _extends({
+        flex: extended && !snapshot.isDragging ? 'auto' : undefined,
+        opacity: snapshot.isDragging ? 0.5 : 1
+      }, editing ? editorStyle : style, provided.draggableProps.style),
+      onMouseEnter: function onMouseEnter() {
+        return setHovered(true);
       },
-      collect: function collect(monitor) {
-        return {
-          isOver: monitor.isOver()
-        };
+      onMouseLeave: function onMouseLeave() {
+        return setHovered(false);
       }
-    };
-  }),
-      isOver = _useDrop[0].isOver,
-      drop = _useDrop[1]; // ***************************************
-  // ***************************************
-  // Internal styles used
-
-
-  var buttonStyle = React.useMemo(function () {
-    return {
-      position: 'absolute',
-      left: vertical ? end ? 0 : undefined : '50%',
-      right: vertical ? !end ? 0 : undefined : '50%',
-      bottom: !vertical && !end ? 0 : vertical ? '50%' : undefined,
-      top: vertical ? '50%' : end ? 0 : undefined,
-      opacity: (droppable != null ? droppable : enabled) && align ? 1 : 0,
-      transition: 'all 0.5s ease-in-out'
-    };
-  }, [vertical, end, droppable, enabled, align]);
-  var mainStyles = React.useMemo(function () {
-    return {
-      opacity: isOver ? 0.8 : 1,
-      minHeight: !React__default.Children.count(children) && !enabled ? '0px' : '26px',
-      minWidth: !React__default.Children.count(children) && !enabled ? '0px' : '46px'
-    };
-  }, [isOver, children, enabled]);
-  var stylesFromProps = enabled ? editorStyles : styles; // ***************************************
-  // Rebuilds the GridItem children to receive their parent GridArea's 'end' and 'vertical' values.
-  // Used to know where to align the overlay buttons (end) and how to extend the GridItems (vertical).
-
-  var childrenWithParentProps = React__default.Children.map(children, function (child) {
-    return React__default.cloneElement(child, {
-      end: end,
-      vertical: vertical,
-      location: location
-    });
+    }), React__default.createElement("div", {
+      style: {
+        width: '100%',
+        height: '100%',
+        pointerEvents: editing ? 'none' : undefined
+      }
+    }, typeof children === 'function' ? children(ctx) : children), React__default.createElement("div", {
+      className: "overlay",
+      style: {
+        display: !disabled && editing && isHovered && (snapshot.isDragging || !isDragging) ? 'block' : 'none'
+      }
+    }, React__default.createElement("div", {
+      className: "overlay-buttons",
+      style: buttonStyles
+    }, React__default.createElement("div", Object.assign({}, provided.dragHandleProps), React__default.createElement(Icon, {
+      name: "moveArrows",
+      size: iconSize,
+      style: {
+        color: iconColor
+      }
+    })), extendable && React__default.createElement("div", {
+      style: {
+        cursor: 'pointer',
+        marginLeft: '8px'
+      },
+      onClick: handleExtend
+    }, React__default.createElement(Icon, {
+      name: vertical ? 'verticalExtend' : 'horizontalExtend',
+      size: iconSize,
+      style: {
+        color: iconColor
+      }
+    })))));
   });
-  return React__default.createElement("div", {
-    ref: drop,
-    className: "\n      " + className + "\n      area\n      " + (stretch && 'stretch') + "\n      " + (end && 'end') + "\n      " + (align === 'centered' ? 'just-centered' : align === 'end' ? 'just-end' : 'start') + "\n      " + (vertical ? reverse ? 'vertical-r' : 'vertical' : reverse ? 'horizontal-r' : 'horizontal') + "\n      " + (enabled ? 'area-transition-in' : 'area-transition-out') + "\n      ",
-    style: _extends({}, mainStyles, stylesFromProps)
-  }, childrenWithParentProps, React__default.createElement("div", {
-    style: buttonStyle
-  }, React__default.createElement(Icon, {
-    name: align === 'centered' ? vertical ? 'alignCenterV' : 'alignCenter' : align === 'end' ? vertical ? 'alignEndV' : 'alignEnd' : vertical ? 'alignStartV' : 'alignStart',
-    styles: {
-      color: iconColor,
-      cursor: (droppable != null ? droppable : enabled) && align && !!React__default.Children.count(children) ? 'pointer' : 'default'
-    },
-    onClick: (droppable != null ? droppable : enabled) && align && !!React__default.Children.count(children) ? function () {
-      return handleAlignChange(align);
-    } : undefined
-  })));
 }
 
 exports.GridArea = GridArea;