@itwin/itwinui-react 3.0.4 → 3.0.6

package/esm/core/utils/components/Resizer.js

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { getBoundedValue, getTranslateValues } from '../functions/index.js';
+import { getBoundedValue, getTranslateValuesFromElement, } from '../functions/index.js';
 /**
  * Component that allows to resize parent element.
  * Parent must have `position: relative`.
@@ -17,257 +17,199 @@ import { getBoundedValue, getTranslateValues } from '../functions/index.js';
  * );
  */
 export const Resizer = (props) => {
-  const { elementRef, containerRef, onResizeStart, onResizeEnd } = props;
-  const isResizing = React.useRef(false);
-  const onResizePointerDown = (event) => {
-    if (!elementRef.current || event.button !== 0) {
-      return;
-    }
-    const initialPointerX = event.clientX;
-    const initialPointerY = event.clientY;
-    const [initialTranslateX, initialTranslateY] = getTranslateValues(
-      elementRef.current,
-    );
-    const { width: initialWidth, height: initialHeight } =
-      elementRef.current.getBoundingClientRect();
-    let width = `${initialWidth}px`;
-    let height = `${initialHeight}px`;
-    let translateX = initialTranslateX;
-    let translateY = initialTranslateY;
-    let minWidth = parseFloat(getComputedStyle(elementRef.current).minWidth);
-    if (Number.isNaN(minWidth)) {
-      minWidth = 380;
-    }
-    const minHeight = parseFloat(
-      getComputedStyle(elementRef.current).minHeight,
-    );
-    const resizer = event.currentTarget.dataset.iuiResizer;
-    const ownerDocument = elementRef.current.ownerDocument || document;
-    const originalUserSelect = ownerDocument.body.style.userSelect;
-    ownerDocument.body.style.userSelect = 'none';
-    const onResizePointerMove = (event) => {
-      if (!elementRef.current) {
-        return;
-      }
-      if (!isResizing.current) {
-        isResizing.current = true;
-        onResizeStart?.();
-      }
-      const containerRect = containerRef?.current?.getBoundingClientRect();
-      const clientX = getBoundedValue(
-        event.clientX,
-        containerRect?.left ?? 0,
-        containerRect?.right ?? ownerDocument.documentElement.clientWidth ?? 0,
-      );
-      const clientY = getBoundedValue(
-        event.clientY,
-        containerRect?.top ?? 0,
-        containerRect?.bottom ??
-          ownerDocument.documentElement.clientHeight ??
-          0,
-      );
-      const diffX = initialPointerX - clientX;
-      const diffY = initialPointerY - clientY;
-      switch (resizer) {
-        case 'top-left': {
-          const newHeight = initialHeight + diffY;
-          if (newHeight >= minHeight) {
-            height = elementRef.current.style.height = `${newHeight}px`;
-            translateY = initialTranslateY - diffY;
-          }
-          const newWidth = initialWidth + diffX;
-          if (newWidth >= minWidth) {
-            width = elementRef.current.style.width = `${newWidth}px`;
-            translateX = initialTranslateX - diffX;
-          }
-          elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
-          break;
+    const { elementRef, containerRef, onResizeStart, onResizeEnd } = props;
+    const isResizing = React.useRef(false);
+    const onResizePointerDown = (event) => {
+        if (!elementRef.current || event.button !== 0) {
+            return;
         }
-        case 'top': {
-          const newHeight = initialHeight + diffY;
-          if (newHeight < minHeight) {
-            break;
-          }
-          height = elementRef.current.style.height = `${newHeight}px`;
-          translateY = initialTranslateY - diffY;
-          elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
-          break;
+        const initialPointerX = event.clientX;
+        const initialPointerY = event.clientY;
+        const [initialTranslateX, initialTranslateY] = getTranslateValuesFromElement(elementRef.current);
+        const { width: initialWidth, height: initialHeight } = elementRef.current.getBoundingClientRect();
+        let width = `${initialWidth}px`;
+        let height = `${initialHeight}px`;
+        let translateX = initialTranslateX;
+        let translateY = initialTranslateY;
+        let minWidth = parseFloat(getComputedStyle(elementRef.current).minWidth);
+        if (Number.isNaN(minWidth)) {
+            minWidth = 380;
         }
-        case 'top-right': {
-          const newHeight = initialHeight + diffY;
-          if (newHeight >= minHeight) {
-            height = elementRef.current.style.height = `${newHeight}px`;
-            translateY = initialTranslateY - diffY;
-          }
-          width = elementRef.current.style.width = `${initialWidth - diffX}px`;
-          elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
-          break;
-        }
-        case 'right': {
-          width = elementRef.current.style.width = `${initialWidth - diffX}px`;
-          height = elementRef.current.style.height = `${initialHeight}px`;
-          elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
-          break;
-        }
-        case 'bottom-right': {
-          width = elementRef.current.style.width = `${initialWidth - diffX}px`;
-          height = elementRef.current.style.height = `${
-            initialHeight - diffY
-          }px`;
-          elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
-          break;
-        }
-        case 'bottom': {
-          height = elementRef.current.style.height = `${
-            initialHeight - diffY
-          }px`;
-          elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
-          break;
-        }
-        case 'bottom-left': {
-          const newWidth = initialWidth + diffX;
-          if (newWidth >= minWidth) {
-            width = elementRef.current.style.width = `${newWidth}px`;
-            translateX = initialTranslateX - diffX;
-          }
-          height = elementRef.current.style.height = `${
-            initialHeight - diffY
-          }px`;
-          elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
-          break;
-        }
-        case 'left': {
-          const newWidth = initialWidth + diffX;
-          if (newWidth < minWidth) {
-            break;
-          }
-          width = elementRef.current.style.width = `${newWidth}px`;
-          height = elementRef.current.style.height = `${initialHeight}px`;
-          translateX = initialTranslateX - diffX;
-          elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
-          break;
-        }
-        default:
-          break;
-      }
+        const minHeight = parseFloat(getComputedStyle(elementRef.current).minHeight);
+        const resizer = event.currentTarget.dataset.iuiResizer;
+        const ownerDocument = elementRef.current.ownerDocument || document;
+        const originalUserSelect = ownerDocument.body.style.userSelect;
+        ownerDocument.body.style.userSelect = 'none';
+        const onResizePointerMove = (event) => {
+            if (!elementRef.current) {
+                return;
+            }
+            if (!isResizing.current) {
+                isResizing.current = true;
+                onResizeStart?.();
+            }
+            const containerRect = containerRef?.current?.getBoundingClientRect();
+            const clientX = getBoundedValue(event.clientX, containerRect?.left ?? 0, containerRect?.right ?? ownerDocument.documentElement.clientWidth ?? 0);
+            const clientY = getBoundedValue(event.clientY, containerRect?.top ?? 0, containerRect?.bottom ??
+                ownerDocument.documentElement.clientHeight ??
+                0);
+            const diffX = initialPointerX - clientX;
+            const diffY = initialPointerY - clientY;
+            switch (resizer) {
+                case 'top-left': {
+                    const newHeight = initialHeight + diffY;
+                    if (newHeight >= minHeight) {
+                        height = elementRef.current.style.height = `${newHeight}px`;
+                        translateY = initialTranslateY - diffY;
+                    }
+                    const newWidth = initialWidth + diffX;
+                    if (newWidth >= minWidth) {
+                        width = elementRef.current.style.width = `${newWidth}px`;
+                        translateX = initialTranslateX - diffX;
+                    }
+                    elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
+                    break;
+                }
+                case 'top': {
+                    const newHeight = initialHeight + diffY;
+                    if (newHeight < minHeight) {
+                        break;
+                    }
+                    height = elementRef.current.style.height = `${newHeight}px`;
+                    translateY = initialTranslateY - diffY;
+                    elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
+                    break;
+                }
+                case 'top-right': {
+                    const newHeight = initialHeight + diffY;
+                    if (newHeight >= minHeight) {
+                        height = elementRef.current.style.height = `${newHeight}px`;
+                        translateY = initialTranslateY - diffY;
+                    }
+                    width = elementRef.current.style.width = `${initialWidth - diffX}px`;
+                    elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
+                    break;
+                }
+                case 'right': {
+                    width = elementRef.current.style.width = `${initialWidth - diffX}px`;
+                    height = elementRef.current.style.height = `${initialHeight}px`;
+                    elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
+                    break;
+                }
+                case 'bottom-right': {
+                    width = elementRef.current.style.width = `${initialWidth - diffX}px`;
+                    height = elementRef.current.style.height = `${initialHeight - diffY}px`;
+                    elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
+                    break;
+                }
+                case 'bottom': {
+                    height = elementRef.current.style.height = `${initialHeight - diffY}px`;
+                    elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
+                    break;
+                }
+                case 'bottom-left': {
+                    const newWidth = initialWidth + diffX;
+                    if (newWidth >= minWidth) {
+                        width = elementRef.current.style.width = `${newWidth}px`;
+                        translateX = initialTranslateX - diffX;
+                    }
+                    height = elementRef.current.style.height = `${initialHeight - diffY}px`;
+                    elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
+                    break;
+                }
+                case 'left': {
+                    const newWidth = initialWidth + diffX;
+                    if (newWidth < minWidth) {
+                        break;
+                    }
+                    width = elementRef.current.style.width = `${newWidth}px`;
+                    height = elementRef.current.style.height = `${initialHeight}px`;
+                    translateX = initialTranslateX - diffX;
+                    elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
+                    break;
+                }
+                default:
+                    break;
+            }
+        };
+        ownerDocument.addEventListener('pointermove', onResizePointerMove);
+        ownerDocument.addEventListener('pointerup', () => {
+            ownerDocument.removeEventListener('pointermove', onResizePointerMove);
+            if (elementRef.current) {
+                ownerDocument.body.style.userSelect = originalUserSelect;
+                isResizing.current = false;
+                onResizeEnd?.({
+                    width,
+                    height,
+                    transform: `translate(${translateX}px, ${translateY}px)`,
+                });
+            }
+        }, { once: true });
     };
-    ownerDocument.addEventListener('pointermove', onResizePointerMove);
-    ownerDocument.addEventListener(
-      'pointerup',
-      () => {
-        ownerDocument.removeEventListener('pointermove', onResizePointerMove);
-        if (elementRef.current) {
-          ownerDocument.body.style.userSelect = originalUserSelect;
-          isResizing.current = false;
-          onResizeEnd?.({
-            width,
-            height,
-            transform: `translate(${translateX}px, ${translateY}px)`,
-          });
-        }
-      },
-      { once: true },
-    );
-  };
-  return React.createElement(
-    React.Fragment,
-    null,
-    React.createElement('div', {
-      'data-iui-resizer': 'top-left',
-      onPointerDown: onResizePointerDown,
-      style: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: 12,
-        height: 12,
-        cursor: 'nw-resize',
-      },
-    }),
-    React.createElement('div', {
-      'data-iui-resizer': 'top',
-      onPointerDown: onResizePointerDown,
-      style: {
-        position: 'absolute',
-        top: 0,
-        left: 8,
-        right: 8,
-        height: 8,
-        cursor: 'n-resize',
-      },
-    }),
-    React.createElement('div', {
-      'data-iui-resizer': 'top-right',
-      onPointerDown: onResizePointerDown,
-      style: {
-        position: 'absolute',
-        top: 0,
-        right: 0,
-        width: 12,
-        height: 12,
-        cursor: 'ne-resize',
-      },
-    }),
-    React.createElement('div', {
-      'data-iui-resizer': 'right',
-      onPointerDown: onResizePointerDown,
-      style: {
-        position: 'absolute',
-        top: 8,
-        right: 0,
-        bottom: 8,
-        width: 8,
-        cursor: 'e-resize',
-      },
-    }),
-    React.createElement('div', {
-      'data-iui-resizer': 'bottom-right',
-      onPointerDown: onResizePointerDown,
-      style: {
-        position: 'absolute',
-        bottom: 0,
-        right: 0,
-        width: 12,
-        height: 12,
-        cursor: 'se-resize',
-      },
-    }),
-    React.createElement('div', {
-      'data-iui-resizer': 'bottom',
-      onPointerDown: onResizePointerDown,
-      style: {
-        position: 'absolute',
-        bottom: 0,
-        left: 8,
-        right: 8,
-        height: 8,
-        cursor: 's-resize',
-      },
-    }),
-    React.createElement('div', {
-      'data-iui-resizer': 'bottom-left',
-      onPointerDown: onResizePointerDown,
-      style: {
-        position: 'absolute',
-        bottom: 0,
-        left: 0,
-        width: 12,
-        height: 12,
-        cursor: 'sw-resize',
-      },
-    }),
-    React.createElement('div', {
-      'data-iui-resizer': 'left',
-      onPointerDown: onResizePointerDown,
-      style: {
-        position: 'absolute',
-        top: 8,
-        left: 0,
-        bottom: 8,
-        width: 8,
-        cursor: 'w-resize',
-      },
-    }),
-  );
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { "data-iui-resizer": 'top-left', onPointerDown: onResizePointerDown, style: {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: 12,
+                height: 12,
+                cursor: 'nw-resize',
+            } }),
+        React.createElement("div", { "data-iui-resizer": 'top', onPointerDown: onResizePointerDown, style: {
+                position: 'absolute',
+                top: 0,
+                left: 8,
+                right: 8,
+                height: 8,
+                cursor: 'n-resize',
+            } }),
+        React.createElement("div", { "data-iui-resizer": 'top-right', onPointerDown: onResizePointerDown, style: {
+                position: 'absolute',
+                top: 0,
+                right: 0,
+                width: 12,
+                height: 12,
+                cursor: 'ne-resize',
+            } }),
+        React.createElement("div", { "data-iui-resizer": 'right', onPointerDown: onResizePointerDown, style: {
+                position: 'absolute',
+                top: 8,
+                right: 0,
+                bottom: 8,
+                width: 8,
+                cursor: 'e-resize',
+            } }),
+        React.createElement("div", { "data-iui-resizer": 'bottom-right', onPointerDown: onResizePointerDown, style: {
+                position: 'absolute',
+                bottom: 0,
+                right: 0,
+                width: 12,
+                height: 12,
+                cursor: 'se-resize',
+            } }),
+        React.createElement("div", { "data-iui-resizer": 'bottom', onPointerDown: onResizePointerDown, style: {
+                position: 'absolute',
+                bottom: 0,
+                left: 8,
+                right: 8,
+                height: 8,
+                cursor: 's-resize',
+            } }),
+        React.createElement("div", { "data-iui-resizer": 'bottom-left', onPointerDown: onResizePointerDown, style: {
+                position: 'absolute',
+                bottom: 0,
+                left: 0,
+                width: 12,
+                height: 12,
+                cursor: 'sw-resize',
+            } }),
+        React.createElement("div", { "data-iui-resizer": 'left', onPointerDown: onResizePointerDown, style: {
+                position: 'absolute',
+                top: 8,
+                left: 0,
+                bottom: 8,
+                width: 8,
+                cursor: 'w-resize',
+            } })));
 };
 export default Resizer;