feat: Vertical and horizontal resize handles supported

Author: RaoHai

css/styles.css

@@ -1,6 +1,7 @@
 .react-resizable {
   position: relative;
 }
+
 .react-resizable-handle {
   position: absolute;
   width: 20px;
@@ -15,3 +16,17 @@
   box-sizing: border-box;
   cursor: se-resize;
 }
+
+.react-resizable-handle-x {
+  right: 0;
+  bottom: 50%;
+  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCA0LjIgNiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');
+  cursor: ew-resize;
+}
+
+.react-resizable-handle-y {
+  right: 50%;
+  bottom: 0;
+  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDYgNC4yIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');
+  cursor: ns-resize;
+}

lib/Resizable.js

@@ -19,7 +19,8 @@ type DragCallbackData = {
 };
 export type ResizeCallbackData = {
   node: HTMLElement,
-  size: {width: number, height: number}
+  size: {width: number, height: number},
+  axis: Axis,
 };
 export type Props = {
   children: ReactElement<any>,
@@ -157,12 +158,13 @@ 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, resizeAxis: Axis): 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 axis = resizeAxis || this.props.axis;
+      const canDragX = axis === 'both' || axis === 'x';
+      const canDragY = axis === 'both' || axis === 'y';
 
       // Update w/h
       let width = this.state.width + (canDragX ? deltaX : 0);
@@ -191,13 +193,27 @@ 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}, axis }));
       } else {
         this.setState(newState);
       }
     };
   }
 
+
+  renderAxis(axis: Axis): ReactNode {
+    const { draggableOpts } = this.props;
+    return <DraggableCore
+      {...draggableOpts}
+      key={`resizableHandle-${axis}`}
+      onStop={this.resizeHandler('onResizeStop', axis)}
+      onStart={this.resizeHandler('onResizeStart', axis)}
+      onDrag={this.resizeHandler('onResize', axis)}
+    >
+      <span className={`react-resizable-handle ${axis === 'both' ? '' : 'react-resizable-handle-' + axis}`} />
+    </DraggableCore>;
+  }
+
   render(): ReactNode {
     // eslint-disable-next-line no-unused-vars
     const {children, draggableOpts, width, height, handleSize,
@@ -208,6 +224,11 @@ export default class Resizable extends React.Component<Props, State> {
       `${p.className} react-resizable`:
       'react-resizable';
 
+    const draggableCores = [
+      axis === 'both' ? this.renderAxis('both') : null,
+      axis === 'both' || axis === 'x' ? this.renderAxis('x') : null,
+      axis === 'both' || axis === 'y' ? this.renderAxis('y') : null,
+    ];
     // 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
@@ -217,15 +238,7 @@ export default class Resizable extends React.Component<Props, State> {
       className,
       children: [
         children.props.children,
-        <DraggableCore
-          {...draggableOpts}
-          key="resizableHandle"
-          onStop={this.resizeHandler('onResizeStop')}
-          onStart={this.resizeHandler('onResizeStart')}
-          onDrag={this.resizeHandler('onResize')}
-          >
-          <span className="react-resizable-handle" />
-        </DraggableCore>
+        ...draggableCores,
       ]
     });
   }