px-react-ui-components 1.0.2 → 1.0.3

package/dist/components/MyTable/MyTableHead.js

@@ -1,9 +1,17 @@
-import React from 'react';
-function MyTableHead({
-  children
-}) {
-  return /*#__PURE__*/React.createElement("thead", {
-    className: "MyTableTagHead"
-  }, children);
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function MyTableHead(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
+    className: "MyTableTagHead",
+    children: children
+  });
 }
-export default MyTableHead;
+var _default = exports["default"] = MyTableHead;

package/dist/components/MyTabs/MyTabPane.js

@@ -1,17 +1,38 @@
-import React, { useEffect, useState } from 'react';
-function MyTabPane({
-  children,
-  label = null,
-  title = null,
-  description = null,
-  badge = null,
-  name = null,
-  icon = null,
-  className = null,
-  style = null,
-  tabClassName = null,
-  tabStyle = null
-}) {
-  return /*#__PURE__*/React.createElement("div", null, children);
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function MyTabPane(_ref) {
+  var children = _ref.children,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? null : _ref$label,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? null : _ref$title,
+    _ref$description = _ref.description,
+    description = _ref$description === void 0 ? null : _ref$description,
+    _ref$badge = _ref.badge,
+    badge = _ref$badge === void 0 ? null : _ref$badge,
+    _ref$name = _ref.name,
+    name = _ref$name === void 0 ? null : _ref$name,
+    _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? null : _ref$icon,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? null : _ref$className,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? null : _ref$style,
+    _ref$tabClassName = _ref.tabClassName,
+    tabClassName = _ref$tabClassName === void 0 ? null : _ref$tabClassName,
+    _ref$tabStyle = _ref.tabStyle,
+    tabStyle = _ref$tabStyle === void 0 ? null : _ref$tabStyle;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: children
+  });
 }
-export default MyTabPane;
+var _default = exports["default"] = MyTabPane;

package/dist/components/MyTabs/MyTabs.js

@@ -1,16 +1,39 @@
-import React, { useEffect, useState } from 'react';
-import "./MyTabs.css";
-function MyTabs({
-  children,
-  className = null,
-  style = null,
-  onChange = null,
-  activePaneIndex = -1,
-  activePaneName = null
-}) {
-  const [activei, setActivei] = useState(activePaneIndex > -1 ? activePaneIndex : 0);
-  const arrChild = React.Children.toArray(children);
-  useEffect(() => {
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+require("./MyTabs.css");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function MyTabs(_ref) {
+  var children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? null : _ref$className,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? null : _ref$style,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? null : _ref$onChange,
+    _ref$activePaneIndex = _ref.activePaneIndex,
+    activePaneIndex = _ref$activePaneIndex === void 0 ? -1 : _ref$activePaneIndex,
+    _ref$activePaneName = _ref.activePaneName,
+    activePaneName = _ref$activePaneName === void 0 ? null : _ref$activePaneName;
+  var _useState = (0, _react.useState)(activePaneIndex > -1 ? activePaneIndex : 0),
+    _useState2 = _slicedToArray(_useState, 2),
+    activei = _useState2[0],
+    setActivei = _useState2[1];
+  var arrChild = _react["default"].Children.toArray(children);
+  (0, _react.useEffect)(function () {
     if (onChange) {
       onChange({
         index: activei,
@@ -19,48 +42,63 @@ function MyTabs({
       });
     }
   }, [activei]);
-  useEffect(() => {
+  (0, _react.useEffect)(function () {
     if (activePaneName) {
-      const index = arrChild.findIndex(item => item.props.name === activePaneName);
+      var index = arrChild.findIndex(function (item) {
+        return item.props.name === activePaneName;
+      });
       if (index > -1) {
         setActivei(index);
       }
     }
   }, [activePaneName]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "my-TabsContainer " + (className ? className : ''),
-    style: style
-  }, /*#__PURE__*/React.createElement("ul", {
-    className: "my-TabsTabList"
-  }, arrChild.map((item, i) => {
-    return /*#__PURE__*/React.createElement("li", {
-      key: i,
-      className: (i == activei && 'active') + ' ' + (item.props.tabClassName ? item.props.tabClassName : ''),
-      style: item.props.tabStyle,
-      onClick: () => setActivei(i),
-      title: item.props.title
-    }, item.props.icon != undefined && /*#__PURE__*/React.createElement("div", {
-      className: "icon"
-    }, item.props.icon), /*#__PURE__*/React.createElement("div", {
-      className: "flex flex-col gap-0 text-start"
-    }, item.props.label != undefined ? /*#__PURE__*/React.createElement("span", {
-      className: "title"
-    }, item.props.label) : /*#__PURE__*/React.createElement("span", {
-      className: "title"
-    }, item.props.title), item.props.description != undefined && /*#__PURE__*/React.createElement("div", {
-      className: "description"
-    }, item.props.description)), item.props.badge != undefined && /*#__PURE__*/React.createElement("div", {
-      className: "badge"
-    }, item.props.badge));
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "my-TabsTabBody"
-  }, arrChild.map((item, i) => {
-    return /*#__PURE__*/React.createElement("div", {
-      key: i,
-      className: "my-TabsTabContainer " + (i == activei && 'active') + ' ' + (item.props.className ? item.props.className : ''),
-      style: item.props.style,
-      onClick: () => setActivei(i)
-    }, item.props.children);
-  })));
+    style: style,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+      className: "my-TabsTabList",
+      children: arrChild.map(function (item, i) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+          className: (i == activei && 'active') + ' ' + (item.props.tabClassName ? item.props.tabClassName : ''),
+          style: item.props.tabStyle,
+          onClick: function onClick() {
+            return setActivei(i);
+          },
+          title: item.props.title,
+          children: [item.props.icon != undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "icon",
+            children: item.props.icon
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "flex flex-col gap-0 text-start",
+            children: [item.props.label != undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "title",
+              children: item.props.label
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "title",
+              children: item.props.title
+            }), item.props.description != undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "description",
+              children: item.props.description
+            })]
+          }), item.props.badge != undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "badge",
+            children: item.props.badge
+          })]
+        }, i);
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "my-TabsTabBody",
+      children: arrChild.map(function (item, i) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "my-TabsTabContainer " + (i == activei && 'active') + ' ' + (item.props.className ? item.props.className : ''),
+          style: item.props.style,
+          onClick: function onClick() {
+            return setActivei(i);
+          },
+          children: item.props.children
+        }, i);
+      })
+    })]
+  });
 }
-export default MyTabs;
+var _default = exports["default"] = MyTabs;

package/dist/components/MyWaiting/MyWaiting.js

@@ -1,27 +1,39 @@
-import React from "react";
-import { Oval } from "react-loader-spinner";
-import './MyWaiting.css'; // Modal için CSS dosyası
+"use strict";
 
-export default function MyWaiting({
-  show = false,
-  message = null
-}) {
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = MyWaiting;
+var _react = _interopRequireDefault(require("react"));
+var _reactLoaderSpinner = require("react-loader-spinner");
+require("./MyWaiting.css");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+// Modal için CSS dosyası
+function MyWaiting(_ref) {
+  var _ref$show = _ref.show,
+    show = _ref$show === void 0 ? false : _ref$show,
+    _ref$message = _ref.message,
+    message = _ref$message === void 0 ? null : _ref$message;
   if (!show) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
-    className: "my-waiting-backdrop"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "my-waiting-content"
-  }, /*#__PURE__*/React.createElement(Oval, {
-    visible: true,
-    height: "60",
-    width: "60",
-    color: "#fff",
-    secondaryColor: "#cdcdcd",
-    ariaLabel: "oval-loading",
-    strokeWidth: 5
-  }), message && /*#__PURE__*/React.createElement("span", {
-    className: "my-waiting-message"
-  }, message)));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "my-waiting-backdrop",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "my-waiting-content",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactLoaderSpinner.Oval, {
+        visible: true,
+        height: "60",
+        width: "60",
+        color: "#fff",
+        secondaryColor: "#cdcdcd",
+        ariaLabel: "oval-loading",
+        strokeWidth: 5
+      }), message && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "my-waiting-message",
+        children: message
+      })]
+    })
+  });
 }

package/dist/components/MyZoomImage/MyZoomImage.js

@@ -1,108 +1,157 @@
-import React, { useRef, useState } from "react";
-import { TransformWrapper, TransformComponent, useControls } from "react-zoom-pan-pinch";
-import "./MyZoomImage.css";
-import { PiMinusBold, PiPlusBold, PiX, PiArrowUpBold, PiArrowDownBold, PiArrowLeftBold, PiArrowRightBold, PiArrowsIn } from "react-icons/pi";
-const Controls = ({
-  wrapperRef,
-  openArrow
-}) => {
-  const {
-    zoomIn,
-    zoomOut,
-    resetTransform,
-    centerView
-  } = useControls();
-  const handlePan = (x, y) => {
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactZoomPanPinch = require("react-zoom-pan-pinch");
+require("./MyZoomImage.css");
+var _pi = require("react-icons/pi");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var Controls = function Controls(_ref) {
+  var wrapperRef = _ref.wrapperRef,
+    openArrow = _ref.openArrow;
+  var _useControls = (0, _reactZoomPanPinch.useControls)(),
+    zoomIn = _useControls.zoomIn,
+    zoomOut = _useControls.zoomOut,
+    resetTransform = _useControls.resetTransform,
+    centerView = _useControls.centerView;
+  var handlePan = function handlePan(x, y) {
     if (wrapperRef.current) {
       // debugger
       // Mevcut pozisyonu al
-      const state = wrapperRef.current.instance.transformState;
+      var state = wrapperRef.current.instance.transformState;
       // Pozisyonu güncelle
       wrapperRef.current.instance.setTransformState(state.scale, state.positionX + x, state.positionY + y);
     }
   };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "absolute flex flex-col gap-1 z-50 top-3 left-5"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flex gap-1 mb-3"
-  }, /*#__PURE__*/React.createElement("button", {
-    className: "bg-slate-400 hover:bg-slate-500 rounded-full p-2",
-    onClick: () => zoomIn(),
-    title: "Zoom +"
-  }, /*#__PURE__*/React.createElement(PiPlusBold, {
-    className: "text-lg text-white"
-  })), /*#__PURE__*/React.createElement("button", {
-    className: "bg-slate-400 hover:bg-slate-500 rounded-full p-2",
-    onClick: () => zoomOut(),
-    title: "Zoom -"
-  }, /*#__PURE__*/React.createElement(PiMinusBold, {
-    className: "text-lg text-white"
-  })), /*#__PURE__*/React.createElement("button", {
-    className: "bg-slate-400 hover:bg-slate-500 rounded-full p-2",
-    onClick: () => resetTransform(),
-    title: "Zoom Cancel"
-  }, /*#__PURE__*/React.createElement(PiX, {
-    className: "text-lg text-white"
-  }))), openArrow && /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col items-center p-2"
-  }, /*#__PURE__*/React.createElement("button", {
-    className: "bg-blue-400 hover:bg-blue-500 rounded-full p-2 mb-1",
-    onClick: () => handlePan(0, 30)
-  }, /*#__PURE__*/React.createElement(PiArrowUpBold, {
-    className: "text-lg text-white"
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "flex"
-  }, /*#__PURE__*/React.createElement("button", {
-    className: "bg-blue-400 hover:bg-blue-500 rounded-full p-2",
-    onClick: () => handlePan(30, 0)
-  }, /*#__PURE__*/React.createElement(PiArrowLeftBold, {
-    className: "text-lg text-white"
-  })), /*#__PURE__*/React.createElement("button", {
-    className: "bg-blue-400 hover:bg-blue-500 rounded-full p-2 ml-1 mr-1",
-    onClick: () => centerView(),
-    title: "Center"
-  }, /*#__PURE__*/React.createElement(PiArrowsIn, {
-    className: "text-lg text-white"
-  })), /*#__PURE__*/React.createElement("button", {
-    className: "bg-blue-400 hover:bg-blue-500 rounded-full p-2",
-    onClick: () => handlePan(-30, 0)
-  }, /*#__PURE__*/React.createElement(PiArrowRightBold, {
-    className: "text-lg text-white"
-  }))), /*#__PURE__*/React.createElement("button", {
-    className: "bg-blue-400 hover:bg-blue-500 rounded-full p-2 mt-1",
-    onClick: () => handlePan(0, -30)
-  }, /*#__PURE__*/React.createElement(PiArrowDownBold, {
-    className: "text-lg text-white"
-  }))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "absolute flex flex-col gap-1 z-50 top-3 left-5",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "flex gap-1 mb-3",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        className: "bg-slate-400 hover:bg-slate-500 rounded-full p-2",
+        onClick: function onClick() {
+          return zoomIn();
+        },
+        title: "Zoom +",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_pi.PiPlusBold, {
+          className: "text-lg text-white"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        className: "bg-slate-400 hover:bg-slate-500 rounded-full p-2",
+        onClick: function onClick() {
+          return zoomOut();
+        },
+        title: "Zoom -",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_pi.PiMinusBold, {
+          className: "text-lg text-white"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        className: "bg-slate-400 hover:bg-slate-500 rounded-full p-2",
+        onClick: function onClick() {
+          return resetTransform();
+        },
+        title: "Zoom Cancel",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_pi.PiX, {
+          className: "text-lg text-white"
+        })
+      })]
+    }), openArrow && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "flex flex-col items-center p-2",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        className: "bg-blue-400 hover:bg-blue-500 rounded-full p-2 mb-1",
+        onClick: function onClick() {
+          return handlePan(0, 30);
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_pi.PiArrowUpBold, {
+          className: "text-lg text-white"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "flex",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          className: "bg-blue-400 hover:bg-blue-500 rounded-full p-2",
+          onClick: function onClick() {
+            return handlePan(30, 0);
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_pi.PiArrowLeftBold, {
+            className: "text-lg text-white"
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          className: "bg-blue-400 hover:bg-blue-500 rounded-full p-2 ml-1 mr-1",
+          onClick: function onClick() {
+            return centerView();
+          },
+          title: "Center",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_pi.PiArrowsIn, {
+            className: "text-lg text-white"
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          className: "bg-blue-400 hover:bg-blue-500 rounded-full p-2",
+          onClick: function onClick() {
+            return handlePan(-30, 0);
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_pi.PiArrowRightBold, {
+            className: "text-lg text-white"
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        className: "bg-blue-400 hover:bg-blue-500 rounded-full p-2 mt-1",
+        onClick: function onClick() {
+          return handlePan(0, -30);
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_pi.PiArrowDownBold, {
+          className: "text-lg text-white"
+        })
+      })]
+    })]
+  });
 };
-const MyImageZoom = ({
-  image,
-  children = null,
-  onZoomChange = null
-}) => {
-  const wrapperRef = useRef(null); // Ref oluştur
-  const [openArrow, setOpenArrow] = useState(false);
-  const handlerTransform = e => {
+var MyImageZoom = function MyImageZoom(_ref2) {
+  var image = _ref2.image,
+    _ref2$children = _ref2.children,
+    children = _ref2$children === void 0 ? null : _ref2$children,
+    _ref2$onZoomChange = _ref2.onZoomChange,
+    onZoomChange = _ref2$onZoomChange === void 0 ? null : _ref2$onZoomChange;
+  var wrapperRef = (0, _react.useRef)(null); // Ref oluştur
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    openArrow = _useState2[0],
+    setOpenArrow = _useState2[1];
+  var handlerTransform = function handlerTransform(e) {
     setOpenArrow(e.state.scale != 1);
     if (onZoomChange != null) {
       onZoomChange(e.state);
     }
   };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "zoom-container flex justify-center items-center"
-  }, /*#__PURE__*/React.createElement(TransformWrapper, {
-    ref: wrapperRef,
-    className: "w-full flex items-center justify-center",
-    onTransformed: handlerTransform
-  }, /*#__PURE__*/React.createElement(Controls, {
-    wrapperRef: wrapperRef,
-    openArrow: openArrow
-  }), /*#__PURE__*/React.createElement(TransformComponent, {
-    className: "w-full flex items-center justify-center"
-  }, children || /*#__PURE__*/React.createElement("img", {
-    src: image,
-    alt: "Zoomable",
-    className: "max-w-full object-cover rounded-md "
-  }))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "zoom-container flex justify-center items-center",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactZoomPanPinch.TransformWrapper, {
+      ref: wrapperRef,
+      className: "w-full flex items-center justify-center",
+      onTransformed: handlerTransform,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Controls, {
+        wrapperRef: wrapperRef,
+        openArrow: openArrow
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactZoomPanPinch.TransformComponent, {
+        className: "w-full flex items-center justify-center",
+        children: children || /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          src: image,
+          alt: "Zoomable",
+          className: "max-w-full object-cover rounded-md "
+        })
+      })]
+    })
+  });
 };
-export default MyImageZoom;
+var _default = exports["default"] = MyImageZoom;