fixed resize in boxes example

Author: bennobuilder

examples/react/release/boxes/package.json

@@ -15,7 +15,7 @@
     "react-dom": "^17.0.2",
     "react-draggable": "^4.4.3",
     "react-feather": "^2.0.9",
-    "react-resizable": "^3.0.4",
+    "react-resizable": "^1.11.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "typescript": "^4.1.2",

examples/react/release/boxes/src/components/Rectangle/index.tsx

@@ -41,7 +41,6 @@ export const Rectangle: React.FC<RectangleProps> = (props) => {
         position={element.style.position}
         size={element.style.size}
         onResize={(style: ElementStyleInterface) => {
-          console.log('onResize', style); // TODO REMOVE
           ELEMENT?.patch({ style: style });
         }}
         lockAspectRatio={element.image !== undefined}>

examples/react/release/boxes/src/components/actionComponents/Resize/components/Handle.tsx

@@ -21,7 +21,9 @@ const Handle: React.FC<HandlePropsInterface> = (props) => {
 
   const size = 10;
   const position: Position = {};
+  let cursor = 'default';
 
+  // Calculate handle position
   if (handleAxis.startsWith('n')) position.top = 0;
   if (handleAxis.startsWith('s')) position.bottom = 0;
   if (handleAxis.includes('w')) position.left = 0;
@@ -30,11 +32,12 @@ const Handle: React.FC<HandlePropsInterface> = (props) => {
   if (handleAxis === 'n' || handleAxis === 's') position.left = '50%';
   if (handleAxis === 'e' || handleAxis === 'w') position.top = '50%';
 
-  let cursor = `${handleAxis}-resize`;
+  cursor = `${handleAxis}-resize`;
   if (handleAxis === 'n' || handleAxis === 's') cursor = 'ns-resize';
 
   return (
     <Box
+      className={`handle-${handleAxis}`}
       ref={innerRef}
       position="absolute"
       style={{

examples/react/release/boxes/src/components/actionComponents/Resize/index.tsx

@@ -30,19 +30,11 @@ export const Resize: React.FC<ResizePropsInterface> = (props) => {
     lockAspectRatio,
   } = props;
 
-  // https://github.com/react-grid-layout/react-resizable#custom-react-component
-  // https://github.com/react-grid-layout/react-resizable#functional-components
-  const WrappedHandle = React.forwardRef((props: any, ref) => (
-    <Handle innerRef={ref} {...props} />
-  ));
-
   return (
     <Resizable
       width={size.width}
       height={size.height}
       onResize={(_, { size: newSize, handle }) => {
-        console.log('onResize', size);
-
         let topDiff = 0;
         if (handle.includes('n')) {
           topDiff = size.height - newSize.height;
@@ -66,7 +58,15 @@ export const Resize: React.FC<ResizePropsInterface> = (props) => {
       }}
       resizeHandles={handlePlacements}
       // The handle (dot) to resize the Component
-      handle={<WrappedHandle visible={selected} />}
+      // TODO Make this work in the latest 'react-resizeable' version.. (-> upgrade from 1.x to 3.x)
+      // handle={(handleAxis: ResizeHandleType, ref: any) => (
+      //   <Handle handleAxis={handleAxis} innerRef={ref} visible={selected} />
+      // )}
+      handle={(handleAxis: ResizeHandleType) => (
+        <div>
+          <Handle handleAxis={handleAxis} visible={selected} />
+        </div>
+      )}
       lockAspectRatio={lockAspectRatio}>
       <div>{children}</div>
     </Resizable>

examples/react/release/boxes/src/index.tsx

@@ -6,8 +6,10 @@ import App from './App';
 import './global.css';
 
 ReactDOM.render(
-  <ChakraProvider>
-    <App />
-  </ChakraProvider>,
+  <React.StrictMode>
+    <ChakraProvider>
+      <App />
+    </ChakraProvider>{' '}
+  </React.StrictMode>,
   document.getElementById('root')
 );

examples/react/release/boxes/yarn.lock

@@ -9878,10 +9878,10 @@ react-remove-scroll@2.4.1:
     use-callback-ref "^1.2.3"
     use-sidecar "^1.0.1"
 
-react-resizable@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/react-resizable/-/react-resizable-3.0.4.tgz#aa20108eff28c52c6fddaa49abfbef8abf5e581b"
-  integrity sha512-StnwmiESiamNzdRHbSSvA65b0ZQJ7eVQpPusrSmcpyGKzC0gojhtO62xxH6YOBmepk9dQTBi9yxidL3W4s3EBA==
+react-resizable@^1.11.1:
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/react-resizable/-/react-resizable-1.11.1.tgz#02ca6850afa7a22c1b3e623e64aef71ee252af69"
+  integrity sha512-S70gbLaAYqjuAd49utRHibtHLrHXInh7GuOR+6OO6RO6uleQfuBnWmZjRABfqNEx3C3Z6VPLg0/0uOYFrkfu9Q==
   dependencies:
     prop-types "15.x"
     react-draggable "^4.0.3"