Initial check-in of resize handle support.

Author: RoccoC

css/styles.css

@@ -5,13 +5,61 @@
   position: absolute;
   width: 20px;
   height: 20px;
-  bottom: 0;
-  right: 0;
-  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');
-  background-position: bottom right;
-  padding: 0 3px 3px 0;
   background-repeat: no-repeat;
   background-origin: content-box;
   box-sizing: border-box;
+  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');
+  background-position: bottom right;
+  padding: 0 3px 3px 0;
+}
+.react-resizable-handle-sw {
+  bottom: 0;
+  left: 0;
+  cursor: sw-resize;
+  transform: rotate(90deg);
+}
+.react-resizable-handle-se {
+  bottom: 0;
+  right: 0;
   cursor: se-resize;
 }
+.react-resizable-handle-nw {
+  top: 0;
+  left: 0;
+  cursor: nw-resize;
+  transform: rotate(180deg);
+}
+.react-resizable-handle-ne {
+  top: 0;
+  right: 0;
+  cursor: ne-resize;
+  transform: rotate(270deg);
+}
+.react-resizable-handle-w,
+.react-resizable-handle-e {
+  top: 50%;
+  margin-top: -10px;
+  cursor: ew-resize;
+}
+.react-resizable-handle-w {
+  left: 0;
+  transform: rotate(135deg);
+}
+.react-resizable-handle-e {
+  right: 0;
+  transform: rotate(315deg);
+}
+.react-resizable-handle-n,
+.react-resizable-handle-s {
+  left: 50%;
+  margin-left: -10px;
+  cursor: ns-resize;
+}
+.react-resizable-handle-n {
+  top: 0;
+  transform: rotate(225deg);
+}
+.react-resizable-handle-s {
+  bottom: 0;
+  transform: rotate(45deg);
+}

lib/Resizable.js

@@ -6,6 +6,7 @@ import cloneElement from './cloneElement';
 import type {Element as ReactElement, Node as ReactNode} from 'react';
 
 type Axis = 'both' | 'x' | 'y' | 'none';
+type ResizeHandle = 's' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne';
 type State = {
   resizing: boolean,
   width: number, height: number,
@@ -35,7 +36,8 @@ export type Props = {
   onResizeStop?: ?(e: SyntheticEvent<>, data: ResizeCallbackData) => any,
   onResizeStart?: ?(e: SyntheticEvent<>, data: ResizeCallbackData) => any,
   onResize?: ?(e: SyntheticEvent<>, data: ResizeCallbackData) => any,
-  draggableOpts?: ?Object
+  draggableOpts?: ?Object,
+  resizeHandles?: ?ResizeHandle[]
 };
 
 export default class Resizable extends React.Component<Props, State> {
@@ -61,6 +63,18 @@ export default class Resizable extends React.Component<Props, State> {
     // If you change this, be sure to update your css
     handleSize: PropTypes.array,
 
+    // Defines which resize handles should be rendered (default: 'se')
+    // Allows for any combination of:
+    // 's' - South handle (bottom-center)
+    // 'w' - West handle (left-center)
+    // 'e' - East handle (right-center)
+    // 'n' - North handle (top-center)
+    // 'sw' - Southwest handle (bottom-left)
+    // 'nw' - Northwest handle (top-left)
+    // 'se' - Southeast handle (bottom-right)
+    // 'ne' - Northeast handle (top-center)
+    resizeHandles: PropTypes.arrayOf(PropTypes.oneOf(['s', 'w', 'e', 'n', 'sw', 'nw', 'se', 'ne'])),
+
     // If true, will only allow width/height to move in lockstep
     lockAspectRatio: PropTypes.bool,
 
@@ -89,7 +103,8 @@ export default class Resizable extends React.Component<Props, State> {
     lockAspectRatio: false,
     axis: 'both',
     minConstraints: [20, 20],
-    maxConstraints: [Infinity, Infinity]
+    maxConstraints: [Infinity, Infinity],
+    resizeHandles: ['se']
   };
 
   state: State = {
@@ -161,12 +176,19 @@ export default class Resizable extends React.Component<Props, State> {
    * @param  {String} handlerName Handler name to wrap.
    * @return {Function}           Handler function.
    */
-  resizeHandler(handlerName: string): Function {
+  resizeHandler(handlerName: string, axis: ResizeHandle): Function {
     return (e: SyntheticEvent<> | MouseEvent, {node, deltaX, deltaY}: DragCallbackData) => {
 
       // Axis restrictions
-      const canDragX = this.props.axis === 'both' || this.props.axis === 'x';
-      const canDragY = this.props.axis === 'both' || this.props.axis === 'y';
+      const canDragX = (this.props.axis === 'both' || this.props.axis === 'x') && ['n', 's'].indexOf(axis) === -1;
+      const canDragY = (this.props.axis === 'both' || this.props.axis === 'y') && ['e', 'w'].indexOf(axis) === -1;
+
+      if (axis[0] === 'n') {
+        deltaY = -deltaY;
+      }
+      if (axis[axis.length - 1] === 'w') {
+        deltaX = -deltaX;
+      }
 
       // Update w/h
       let width = this.state.width + (canDragX ? deltaX : 0);
@@ -202,9 +224,27 @@ export default class Resizable extends React.Component<Props, State> {
     };
   }
 
+  renderResizeHandles(): ReactNode {
+    const {draggableOpts, handle, resizeHandles} = this.props;
+    if (handle) {
+      return handle;
+    }
+    return resizeHandles.map(h => (
+      <DraggableCore
+        {...draggableOpts}
+        key={`resizableHandle-${h}`}
+        onStop={this.resizeHandler('onResizeStop', h)}
+        onStart={this.resizeHandler('onResizeStart', h)}
+        onDrag={this.resizeHandler('onResize', h)}
+      >
+        <span key={h} className={`react-resizable-handle react-resizable-handle-${h}`} />
+      </DraggableCore>
+    ));
+  }
+
   render(): ReactNode {
     // eslint-disable-next-line no-unused-vars
-    const {children, draggableOpts, width, height, handle, handleSize,
+    const {children, width, height, handle, handleSize,
         lockAspectRatio, axis, minConstraints, maxConstraints, onResize,
         onResizeStop, onResizeStart, ...p} = this.props;
 
@@ -215,21 +255,13 @@ export default class Resizable extends React.Component<Props, State> {
     // What we're doing here is getting the child of this element, and cloning it with this element's props.
     // We are then defining its children as:
     // Its original children (resizable's child's children), and
-    // A draggable handle.
+    // One or more draggable handles.
     return cloneElement(children, {
       ...p,
       className,
       children: [
         children.props.children,
-        <DraggableCore
-          {...draggableOpts}
-          key="resizableHandle"
-          onStop={this.resizeHandler('onResizeStop')}
-          onStart={this.resizeHandler('onResizeStart')}
-          onDrag={this.resizeHandler('onResize')}
-        >
-          {handle || <span className="react-resizable-handle" />}
-        </DraggableCore>
+        this.renderResizeHandles()
       ]
     });
   }

test/TestLayout.js

@@ -19,9 +19,9 @@ export default class TestLayout extends React.Component<{}, {width: number, heig
       <div>
         <button onClick={this.onClick} style={{'marginBottom': '10px'}}>Reset first element's width/height</button>
         <div className="layoutRoot">
-          <Resizable className="box" height={this.state.height} width={this.state.width} onResize={this.onResize}>
+          <Resizable className="box" height={this.state.height} width={this.state.width} onResize={this.onResize} resizeHandles={['sw', 'se', 'nw', 'ne', 'w', 'e', 'n', 's']}>
             <div className="box" style={{width: this.state.width + 'px', height: this.state.height + 'px'}}>
-              <span className="text">{"Raw use of <Resizable> element. 200x200, no constraints."}</span>
+              <span className="text">{"Raw use of <Resizable> element. 200x200, all Resize Handles."}</span>
             </div>
           </Resizable>
           <ResizableBox className="box" width={200} height={200}>