@onesy/ui-react 1.0.171 → 1.0.173

package/esm/ImageCrop/ImageCrop.js

@@ -1,7 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["image", "minWidth", "minHeight", "maxWidth", "maxHeight", "selectorDefault", "selector", "onSelectorChange", "type", "quality", "aspectRatio", "gridLines", "dynamicParent", "onFocus", "onBlur", "TooltipProps", "Component", "className"];
+const _excluded = ["ref", "image", "minWidth", "minHeight", "maxWidth", "maxHeight", "selectorDefault", "selector", "onSelectorChange", "type", "quality", "aspectRatio", "gridLines", "dynamicParent", "onFocus", "onBlur", "TooltipProps", "Component", "className"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
@@ -9,6 +8,7 @@ import { is, clamp, isEnvironment } from '@onesy/utils';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import TooltipElement from '../Tooltip';
 import { staticClassName, image as imageMethod } from '../utils';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => {
   const dot = {
     display: 'inline-block',
@@ -246,11 +246,12 @@ const useStyle = styleMethod(theme => {
 }, {
   name: 'onesy-ImageCrop'
 });
-const ImageCrop = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const ImageCrop = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyImageCrop?.props?.default), props_);
   const Tooltip = theme?.elements?.Tooltip || TooltipElement;
   const {
+      ref,
       // url, datauri or canvas
       image: image_,
       minWidth,
@@ -973,7 +974,7 @@ const ImageCrop = /*#__PURE__*/React.forwardRef((props_, ref) => {
     });
   };
   const rect = refs.root.current?.getBoundingClientRect();
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/_jsxs(Component, _objectSpread(_objectSpread({
     ref: item => {
       if (ref) {
         if (is('function', ref)) ref(item);else ref.current = item;
@@ -986,88 +987,96 @@ const ImageCrop = /*#__PURE__*/React.forwardRef((props_, ref) => {
     onTouchStart: onTouchStart,
     onMouseDown: onMouseDown,
     className: classNames([staticClassName('ImageCrop', theme) && ['onesy-ImageCrop-root'], className, classes.root])
-  }, other), /*#__PURE__*/React.createElement("canvas", {
-    ref: refs.canvasMain,
-    className: classNames([staticClassName('ImageCrop', theme) && ['onesy-ImageCrop-canvas', 'onesy-ImageCrop-canvas-main'], classes.canvas, classes.canvas_main])
-  }), /*#__PURE__*/React.createElement("div", {
-    className: classNames([staticClassName('ImageCrop', theme) && ['onesy-ImageCrop-background'], classes.background, image && classes.background_in])
-  }), /*#__PURE__*/React.createElement(Tooltip, _extends({
-    open: mouseDown && selector?.width + selector?.height > 0,
-    label: `${Math.round(selectorRelative?.width || 0)} x ${Math.round(selectorRelative?.height || 0)}`,
-    position: "bottom"
-  }, TooltipProps), /*#__PURE__*/React.createElement("div", {
-    ref: refs.imageSelectorMain,
-    className: classNames([staticClassName('ImageCrop', theme) && ['onesy-ImageCrop-image-selector-main'], classes.imageSelector_main, selector && classes.imageSelector_main_in]),
-    style: _objectSpread({}, selector)
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: refs.move,
-    onTouchStart: onTouchStartSelector,
-    onMouseDown: onMouseDownSelector,
-    className: classNames([staticClassName('ImageCrop', theme) && ['onesy-ImageCrop-move'], classes.move])
-  }), gridLines && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: classNames([staticClassName('ImageCrop', theme) && ['onesy-ImageCrop-grid-line', 'onesy-ImageCrop-grid-line-top-start'], classes.grid_line, classes.grid_line_top_start])
-  }), /*#__PURE__*/React.createElement("div", {
-    className: classNames([staticClassName('ImageCrop', theme) && ['onesy-ImageCrop-grid-line', 'onesy-ImageCrop-grid-line-top-end'], classes.grid_line, classes.grid_line_top_end])
-  }), /*#__PURE__*/React.createElement("div", {
-    className: classNames([staticClassName('ImageCrop', theme) && ['onesy-ImageCrop-grid-line', 'onesy-ImageCrop-grid-line-left-start'], classes.grid_line, classes.grid_line_left_start])
-  }), /*#__PURE__*/React.createElement("div", {
-    className: classNames([staticClassName('ImageCrop', theme) && ['onesy-ImageCrop-grid-line', 'onesy-ImageCrop-grid-line-left-end'], classes.grid_line, classes.grid_line_left_end])
-  })), /*#__PURE__*/React.createElement("div", {
-    ref: refs.dotTopLeft,
-    onTouchStart: onTouchStartBorder('top_left'),
-    onMouseDown: onMouseDownBorder('top_left'),
-    className: classNames([staticClassName('ImageCrop', theme) && ['onesy-ImageCrop-dot', 'onesy-ImageCrop-dot-top-left'], classes.dot, classes.dot_top_left])
-  }), /*#__PURE__*/React.createElement("div", {
-    ref: refs.dotTopRight,
-    onTouchStart: onTouchStartBorder('top_right'),
-    onMouseDown: onMouseDownBorder('top_right'),
-    className: classNames([staticClassName('ImageCrop', theme) && ['onesy-ImageCrop-dot', 'onesy-ImageCrop-dot-top-right'], classes.dot, classes.dot_top_right])
-  }), /*#__PURE__*/React.createElement("div", {
-    ref: refs.dotBottomLeft,
-    onTouchStart: onTouchStartBorder('bottom_left'),
-    onMouseDown: onMouseDownBorder('bottom_left'),
-    className: classNames([staticClassName('ImageCrop', theme) && ['onesy-ImageCrop-dot', 'onesy-ImageCrop-dot-bottom-left'], classes.dot, classes.dot_bottom_left])
-  }), /*#__PURE__*/React.createElement("div", {
-    ref: refs.dotBottomRight,
-    onTouchStart: onTouchStartBorder('bottom_right'),
-    onMouseDown: onMouseDownBorder('bottom_right'),
-    className: classNames([staticClassName('ImageCrop', theme) && ['onesy-ImageCrop-dot', 'onesy-ImageCrop-dot-bottom-right'], classes.dot, classes.dot_bottom_right])
-  }), /*#__PURE__*/React.createElement("div", {
-    ref: refs.borderTop,
-    onTouchStart: onTouchStartBorder('top'),
-    onMouseDown: onMouseDownBorder('top'),
-    className: classNames([staticClassName('ImageCrop', theme) && ['onesy-ImageCrop-border', 'onesy-ImageCrop-border-top'], classes.border, classes.border_top])
-  }), /*#__PURE__*/React.createElement("div", {
-    ref: refs.borderLeft,
-    onTouchStart: onTouchStartBorder('left'),
-    onMouseDown: onMouseDownBorder('left'),
-    className: classNames([staticClassName('ImageCrop', theme) && ['onesy-ImageCrop-border', 'onesy-ImageCrop-border-left'], classes.border, classes.border_left])
-  }), /*#__PURE__*/React.createElement("div", {
-    ref: refs.borderRight,
-    onTouchStart: onTouchStartBorder('right'),
-    onMouseDown: onMouseDownBorder('right'),
-    className: classNames([staticClassName('ImageCrop', theme) && ['onesy-ImageCrop-border', 'onesy-ImageCrop-border-right'], classes.border, classes.border_right])
-  }), /*#__PURE__*/React.createElement("div", {
-    ref: refs.borderBottom,
-    onTouchStart: onTouchStartBorder('bottom'),
-    onMouseDown: onMouseDownBorder('bottom'),
-    className: classNames([staticClassName('ImageCrop', theme) && ['onesy-ImageCrop-border', 'onesy-ImageCrop-border-bottom'], classes.border, classes.border_bottom])
-  }))), /*#__PURE__*/React.createElement("div", {
-    ref: refs.imageSelector,
-    className: classNames([staticClassName('ImageCrop', theme) && ['onesy-ImageCrop-image-selector'], classes.imageSelector]),
-    style: _objectSpread({}, selector)
-  }, /*#__PURE__*/React.createElement("canvas", {
-    ref: refs.canvasImageSelector,
-    className: classNames([staticClassName('ImageCrop', theme) && ['onesy-ImageCrop-canvas', 'onesy-ImageCrop-canvas-image-selector'], classes.canvas, classes.canvas_imageSelector]),
-    width: image?.width || 0,
-    height: image?.height || 0,
-    style: {
-      top: `${(selector?.top || 0) * -1}px`,
-      left: `${(selector?.left || 0) * -1}px`,
-      width: rect?.width,
-      height: rect?.height
-    }
-  })));
-});
+  }, other), {}, {
+    children: [/*#__PURE__*/_jsx("canvas", {
+      ref: refs.canvasMain,
+      className: classNames([staticClassName('ImageCrop', theme) && ['onesy-ImageCrop-canvas', 'onesy-ImageCrop-canvas-main'], classes.canvas, classes.canvas_main])
+    }), /*#__PURE__*/_jsx("div", {
+      className: classNames([staticClassName('ImageCrop', theme) && ['onesy-ImageCrop-background'], classes.background, image && classes.background_in])
+    }), /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
+      open: mouseDown && selector?.width + selector?.height > 0,
+      label: `${Math.round(selectorRelative?.width || 0)} x ${Math.round(selectorRelative?.height || 0)}`,
+      position: "bottom"
+    }, TooltipProps), {}, {
+      children: /*#__PURE__*/_jsxs("div", {
+        ref: refs.imageSelectorMain,
+        className: classNames([staticClassName('ImageCrop', theme) && ['onesy-ImageCrop-image-selector-main'], classes.imageSelector_main, selector && classes.imageSelector_main_in]),
+        style: _objectSpread({}, selector),
+        children: [/*#__PURE__*/_jsx("div", {
+          ref: refs.move,
+          onTouchStart: onTouchStartSelector,
+          onMouseDown: onMouseDownSelector,
+          className: classNames([staticClassName('ImageCrop', theme) && ['onesy-ImageCrop-move'], classes.move])
+        }), gridLines && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx("div", {
+            className: classNames([staticClassName('ImageCrop', theme) && ['onesy-ImageCrop-grid-line', 'onesy-ImageCrop-grid-line-top-start'], classes.grid_line, classes.grid_line_top_start])
+          }), /*#__PURE__*/_jsx("div", {
+            className: classNames([staticClassName('ImageCrop', theme) && ['onesy-ImageCrop-grid-line', 'onesy-ImageCrop-grid-line-top-end'], classes.grid_line, classes.grid_line_top_end])
+          }), /*#__PURE__*/_jsx("div", {
+            className: classNames([staticClassName('ImageCrop', theme) && ['onesy-ImageCrop-grid-line', 'onesy-ImageCrop-grid-line-left-start'], classes.grid_line, classes.grid_line_left_start])
+          }), /*#__PURE__*/_jsx("div", {
+            className: classNames([staticClassName('ImageCrop', theme) && ['onesy-ImageCrop-grid-line', 'onesy-ImageCrop-grid-line-left-end'], classes.grid_line, classes.grid_line_left_end])
+          })]
+        }), /*#__PURE__*/_jsx("div", {
+          ref: refs.dotTopLeft,
+          onTouchStart: onTouchStartBorder('top_left'),
+          onMouseDown: onMouseDownBorder('top_left'),
+          className: classNames([staticClassName('ImageCrop', theme) && ['onesy-ImageCrop-dot', 'onesy-ImageCrop-dot-top-left'], classes.dot, classes.dot_top_left])
+        }), /*#__PURE__*/_jsx("div", {
+          ref: refs.dotTopRight,
+          onTouchStart: onTouchStartBorder('top_right'),
+          onMouseDown: onMouseDownBorder('top_right'),
+          className: classNames([staticClassName('ImageCrop', theme) && ['onesy-ImageCrop-dot', 'onesy-ImageCrop-dot-top-right'], classes.dot, classes.dot_top_right])
+        }), /*#__PURE__*/_jsx("div", {
+          ref: refs.dotBottomLeft,
+          onTouchStart: onTouchStartBorder('bottom_left'),
+          onMouseDown: onMouseDownBorder('bottom_left'),
+          className: classNames([staticClassName('ImageCrop', theme) && ['onesy-ImageCrop-dot', 'onesy-ImageCrop-dot-bottom-left'], classes.dot, classes.dot_bottom_left])
+        }), /*#__PURE__*/_jsx("div", {
+          ref: refs.dotBottomRight,
+          onTouchStart: onTouchStartBorder('bottom_right'),
+          onMouseDown: onMouseDownBorder('bottom_right'),
+          className: classNames([staticClassName('ImageCrop', theme) && ['onesy-ImageCrop-dot', 'onesy-ImageCrop-dot-bottom-right'], classes.dot, classes.dot_bottom_right])
+        }), /*#__PURE__*/_jsx("div", {
+          ref: refs.borderTop,
+          onTouchStart: onTouchStartBorder('top'),
+          onMouseDown: onMouseDownBorder('top'),
+          className: classNames([staticClassName('ImageCrop', theme) && ['onesy-ImageCrop-border', 'onesy-ImageCrop-border-top'], classes.border, classes.border_top])
+        }), /*#__PURE__*/_jsx("div", {
+          ref: refs.borderLeft,
+          onTouchStart: onTouchStartBorder('left'),
+          onMouseDown: onMouseDownBorder('left'),
+          className: classNames([staticClassName('ImageCrop', theme) && ['onesy-ImageCrop-border', 'onesy-ImageCrop-border-left'], classes.border, classes.border_left])
+        }), /*#__PURE__*/_jsx("div", {
+          ref: refs.borderRight,
+          onTouchStart: onTouchStartBorder('right'),
+          onMouseDown: onMouseDownBorder('right'),
+          className: classNames([staticClassName('ImageCrop', theme) && ['onesy-ImageCrop-border', 'onesy-ImageCrop-border-right'], classes.border, classes.border_right])
+        }), /*#__PURE__*/_jsx("div", {
+          ref: refs.borderBottom,
+          onTouchStart: onTouchStartBorder('bottom'),
+          onMouseDown: onMouseDownBorder('bottom'),
+          className: classNames([staticClassName('ImageCrop', theme) && ['onesy-ImageCrop-border', 'onesy-ImageCrop-border-bottom'], classes.border, classes.border_bottom])
+        })]
+      })
+    })), /*#__PURE__*/_jsx("div", {
+      ref: refs.imageSelector,
+      className: classNames([staticClassName('ImageCrop', theme) && ['onesy-ImageCrop-image-selector'], classes.imageSelector]),
+      style: _objectSpread({}, selector),
+      children: /*#__PURE__*/_jsx("canvas", {
+        ref: refs.canvasImageSelector,
+        className: classNames([staticClassName('ImageCrop', theme) && ['onesy-ImageCrop-canvas', 'onesy-ImageCrop-canvas-image-selector'], classes.canvas, classes.canvas_imageSelector]),
+        width: image?.width || 0,
+        height: image?.height || 0,
+        style: {
+          top: `${(selector?.top || 0) * -1}px`,
+          left: `${(selector?.left || 0) * -1}px`,
+          width: rect?.width,
+          height: rect?.height
+        }
+      })
+    })]
+  }));
+};
 ImageCrop.displayName = 'onesy-ImageCrop';
 export default ImageCrop;