Added examples to TestLayout.

Author: RoccoC

README.md

@@ -2,7 +2,7 @@
 
 [View the Demo](https://strml.github.io/react-resizable/examples/1.html)
 
-A simple widget that can be resized via a handle.
+A simple widget that can be resized via one or more handles.
 
 You can either use the `<Resizable>` element directly, or use the much simpler `<ResizableBox>` element.
 
@@ -59,6 +59,7 @@ These props apply to both `<Resizable>` and `<ResizableBox>`.
   onResizeStop?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any,
   onResizeStart?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any,
   onResize?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any,
-  draggableOpts?: ?Object
+  draggableOpts?: ?Object,
+  resizeHandles?: ?Array<'s' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'> = ['se']
 };
 ```

lib/Resizable.js

@@ -20,14 +20,15 @@ type DragCallbackData = {
 };
 export type ResizeCallbackData = {
   node: HTMLElement,
-  size: {width: number, height: number}
+  size: {width: number, height: number},
+  handle: ResizeHandle
 };
 export type Props = {
   children: ReactElement<any>,
   className?: ?string,
   width: number,
   height: number,
-  handle: ReactElement<any>,
+  handle: ReactElement<any> | (resizeHandle: ResizeHandle) => ReactElement<any>,
   handleSize: [number, number],
   lockAspectRatio: boolean,
   axis: Axis,
@@ -183,12 +184,13 @@ export default class Resizable extends React.Component<Props, State> {
       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') {
+      // reverse delta if using top or left drag handles
+      if (canDragX && axis[axis.length - 1] === 'w') {
         deltaX = -deltaX;
       }
+      if (canDragY && axis[0] === 'n') {
+        deltaY = -deltaY;
+      }
 
       // Update w/h
       let width = this.state.width + (canDragX ? deltaX : 0);
@@ -217,36 +219,29 @@ export default class Resizable extends React.Component<Props, State> {
       const hasCb = typeof this.props[handlerName] === 'function';
       if (hasCb) {
         if (typeof e.persist === 'function') e.persist();
-        this.setState(newState, () => this.props[handlerName](e, {node, size: {width, height}}));
+        this.setState(newState, () => this.props[handlerName](e, {node, size: {width, height}, handle: axis}));
       } else {
         this.setState(newState);
       }
     };
   }
 
-  renderResizeHandles(): ReactNode {
-    const {draggableOpts, handle, resizeHandles} = this.props;
+  renderResizeHandle(resizeHandle: ResizeHandle): ReactNode {
+    const {handle} = this.props;
     if (handle) {
+      if (typeof handle === 'function') {
+        return handle(resizeHandle);
+      }
       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>
-    ));
+    return <span className={`react-resizable-handle react-resizable-handle-${resizeHandle}`} />;
   }
 
   render(): ReactNode {
     // eslint-disable-next-line no-unused-vars
-    const {children, width, height, handle, handleSize,
+    const {children, draggableOpts, width, height, handleSize,
         lockAspectRatio, axis, minConstraints, maxConstraints, onResize,
-        onResizeStop, onResizeStart, ...p} = this.props;
+        onResizeStop, onResizeStart, resizeHandles, ...p} = this.props;
 
     const className = p.className ?
       `${p.className} react-resizable`:
@@ -261,7 +256,17 @@ export default class Resizable extends React.Component<Props, State> {
       className,
       children: [
         children.props.children,
-        this.renderResizeHandles()
+        resizeHandles.map(h => (
+          <DraggableCore
+            {...draggableOpts}
+            key={`resizableHandle-${h}`}
+            onStop={this.resizeHandler('onResizeStop', h)}
+            onStart={this.resizeHandler('onResizeStart', h)}
+            onDrag={this.resizeHandler('onResize', h)}
+          >
+            {this.renderResizeHandle(h)}
+          </DraggableCore>
+        ))
       ]
     });
   }

lib/ResizableBox.js

@@ -48,8 +48,8 @@ export default class ResizableBox extends React.Component<ResizableProps, State>
     // Basic wrapper around a Resizable instance.
     // If you use Resizable directly, you are responsible for updating the child component
     // with a new width and height.
-    const {handle, handleSize, onResize, onResizeStart, onResizeStop, draggableOpts,
-         minConstraints, maxConstraints, lockAspectRatio, axis, width, height, ...props} = this.props;
+    const {handle, handleSize, onResize, onResizeStart, onResizeStop, draggableOpts, minConstraints,
+      maxConstraints, lockAspectRatio, axis, width, height, resizeHandles, ...props} = this.props;
     return (
       <Resizable
         handle={handle}
@@ -64,6 +64,7 @@ export default class ResizableBox extends React.Component<ResizableProps, State>
         maxConstraints={maxConstraints}
         lockAspectRatio={lockAspectRatio}
         axis={axis}
+        resizeHandles={resizeHandles}
       >
         <div style={{width: this.state.width + 'px', height: this.state.height + 'px'}} {...props} />
       </Resizable>

test/TestLayout.js

@@ -2,6 +2,7 @@ import React from 'react';
 import Resizable from '../lib/Resizable';
 import ResizableBox from '../lib/ResizableBox';
 import 'style-loader!css-loader!../css/styles.css';
+import 'style-loader!css-loader!./test.css';
 
 export default class TestLayout extends React.Component<{}, {width: number, height: number}> {
   state = {width: 200, height: 200};
@@ -10,7 +11,8 @@ export default class TestLayout extends React.Component<{}, {width: number, heig
     this.setState({width: 200, height: 200});
   };
 
-  onResize = (event, {element, size}) => {
+  onResize = (event, {element, size, handle}) => {
+    console.log(handle);
     this.setState({width: size.width, height: size.height});
   };
 
@@ -27,6 +29,23 @@ export default class TestLayout extends React.Component<{}, {width: number, heig
           <ResizableBox className="box" width={200} height={200}>
             <span className="text">{"<ResizableBox>, same as above."}</span>
           </ResizableBox>
+          <ResizableBox
+            className="custom-box box"
+            width={200}
+            height={200}
+            handle={<span className="custom-handle custom-handle-se" />}
+            handleSize={[8, 8]}>
+            <span className="text">{"<ResizableBox> with custom handle in SE corner."}</span>
+          </ResizableBox>
+          <ResizableBox
+            className="custom-box box"
+            width={200}
+            height={200}
+            handle={(h) => <span className={`custom-handle custom-handle-${h}`} />}
+            handleSize={[8, 8]}
+            resizeHandles={['sw', 'se', 'nw', 'ne', 'w', 'e', 'n', 's']}>
+            <span className="text">{"<ResizableBox> with custom handles in all locations."}</span>
+          </ResizableBox>
           <ResizableBox className="box" width={200} height={200} draggableOpts={{grid: [25, 25]}}>
             <span className="text">Resizable box that snaps to even intervals of 25px.</span>
           </ResizableBox>

test/test.css

@@ -0,0 +1,55 @@
+.custom-box {
+  overflow: visible;
+}
+.custom-handle {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background-color: #1153aa;
+  opacity: 0.75;
+  border-radius: 4px;
+}
+.custom-handle-sw {
+  bottom: -4px;
+  left: -4px;
+  cursor: sw-resize;
+}
+.custom-handle-se {
+  bottom: -4px;
+  right: -4px;
+  cursor: se-resize;
+}
+.custom-handle-nw {
+  top: -4px;
+  left: -4px;
+  cursor: nw-resize;
+}
+.custom-handle-ne {
+  top: -4px;
+  right: -4px;
+  cursor: ne-resize;
+}
+.custom-handle-w,
+.custom-handle-e {
+  top: 50%;
+  margin-top: -4px;
+  cursor: ew-resize;
+}
+.custom-handle-w {
+  left: -4px;
+}
+.custom-handle-e {
+  right: -4px;
+}
+.custom-handle-n,
+.custom-handle-s {
+  left: 50%;
+  margin-left: -4px;
+  cursor: ns-resize;
+}
+.custom-handle-n {
+  top: -4px;
+}
+.custom-handle-s {
+  bottom: -4px;
+}