px-react-ui-components 1.0.29 → 1.1.1

package/README.md

@@ -7,7 +7,7 @@ A modern, customizable React UI components library designed to simplify web deve
 - 🎨 Modern and responsive design
 - 📱 Multiple input types (Text, Select, Date, Number, Phone, Email)
 - 🧩 Customizable components with extensive props
-- 🎯 Built with React 18 for optimal performance
+- 🎯 Built with React 18/19 compatibility for optimal performance
 - 🔧 Easy to integrate and use
 - 📚 Comprehensive documentation
 - 🎭 Tab navigation with rich features (labels, titles, descriptions, badges, icons)
@@ -20,29 +20,62 @@ A modern, customizable React UI components library designed to simplify web deve
 npm install px-react-ui-components
 
 # Install required peer dependencies
-npm install react@^18.3.1 react-dom@^18.3.1 katex@^0.16.21 quill@^1.3.7 quill-image-resize-module-react@^3.0.0 quill-table-ui@^1.0.7 react-confirm-alert@^3.0.6 react-icons@^5.5.0 react-image-crop@^11.0.7 react-loader-spinner@^6.1.6 react-zoom-pan-pinch@^3.7.0
+npm install react@^18.3.1 react-dom@^18.3.1 react-icons@^5.5.0
+
+# Optional dependencies (install only if you need specific components)
+# For MyEditor component:
+npm install react-quill@^2.0.0 quill@^1.3.7 quill-image-resize-module-react@^3.0.0 quill-table-ui@^1.0.7 katex@^0.16.21
+
+# For MyAlert component:
+npm install react-confirm-alert@^3.0.6
+
+# For MyImageCropper component:
+npm install react-image-crop@^11.0.7
+
+# For MyWaiting component:
+npm install react-loader-spinner@^6.1.6
+
+# For MyFileUpload component:
+npm install react-image-file-resizer@^3.0.4 react-html5-camera-photo@^1.5.4
+
+# For MyZoomImage component:
+npm install react-zoom-pan-pinch@^3.7.0
 ```
 
-## Peer Dependencies
+## Dependencies
 
-This library requires the following peer dependencies to be installed in your project:
+### Required Dependencies
+These are always required:
 
 ```json
 {
-  "react": "^18.3.1",
-  "react-dom": "^18.3.1",
-  "katex": "^0.16.21",
-  "quill": "^1.3.7",
-  "quill-image-resize-module-react": "^3.0.0",
-  "quill-table-ui": "^1.0.7",
-  "react-confirm-alert": "^3.0.6",
-  "react-icons": "^5.5.0",
-  "react-image-crop": "^11.0.7",
-  "react-loader-spinner": "^6.1.6",
-  "react-zoom-pan-pinch": "^3.7.0"
+  "react": "^18.3.1 || ^19.0.0",
+  "react-dom": "^18.3.1 || ^19.0.0",
+  "react-icons": "^5.5.0"
 }
 ```
 
+### Optional Dependencies
+These are only needed if you use specific components:
+
+```json
+{
+  "katex": "^0.16.21",                              // MyEditor
+  "quill": "^1.3.7",                               // MyEditor
+  "quill-image-resize-module-react": "^3.0.0",     // MyEditor
+  "quill-table-ui": "^1.0.7",                      // MyEditor
+  "react-quill": "^2.0.0",                         // MyEditor
+  "react-confirm-alert": "^3.0.6",                 // MyAlert
+  "react-image-crop": "^11.0.7",                   // MyImageCropper
+  "react-loader-spinner": "^6.1.6",                // MyWaiting
+  "react-image-file-resizer": "^3.0.4",            // MyFileUpload
+  "react-html5-camera-photo": "^1.5.4",            // MyFileUpload
+  "react-zoom-pan-pinch": "^3.7.0"                 // MyZoomImage
+}
+```
+
+**Note:** If you try to use a component without its required dependencies, you'll see a helpful warning message with installation instructions.
+
 ## Available Components
 
 The library includes the following components:

package/dist/components/MyAlert/MyAlert.js

@@ -5,11 +5,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MyAlertType = exports.MyAlert = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _reactConfirmAlert = require("react-confirm-alert");
-require("react-confirm-alert/src/react-confirm-alert.css");
 require("./MyAlert.css");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Opsiyonel bağımlılığı kontrol et
+let confirmAlert;
+let hasConfirmAlert = false;
+try {
+  const reactConfirmAlert = require("react-confirm-alert");
+  confirmAlert = reactConfirmAlert.confirmAlert;
+  require("react-confirm-alert/src/react-confirm-alert.css");
+  hasConfirmAlert = true;
+} catch (error) {
+  console.warn("MyAlert: react-confirm-alert bağımlılığı bulunamadı. MyAlert bileşenini kullanmak için 'react-confirm-alert' paketini yükleyin.");
+}
+
 // import Swal from "sweetalert2";
 
 const MyAlertType = exports.MyAlertType = {
@@ -29,6 +39,15 @@ const MyAlert = (message, type = MyAlertType.INFO, {
   },
   callback = null
 } = {}) => {
+  // Bağımlılık yoksa uyarı göster
+  if (!hasConfirmAlert) {
+    console.error("MyAlert: react-confirm-alert bağımlılığı bulunamadı. Bu bileşeni kullanmak için 'npm install react-confirm-alert' komutunu çalıştırın.");
+    if (callback) callback({
+      isConfirmed: false,
+      isDenied: true
+    });
+    return;
+  }
   let _showCancelButton = false;
   switch (type) {
     case MyAlertType.WARNING:
@@ -72,7 +91,7 @@ const MyAlert = (message, type = MyAlertType.INFO, {
       }
     });
   }
-  (0, _reactConfirmAlert.confirmAlert)({
+  confirmAlert({
     title: title,
     message: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       dangerouslySetInnerHTML: {

package/dist/components/MyEditor/MyEditor.js

@@ -5,20 +5,31 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _reactQuill = _interopRequireDefault(require("react-quill"));
-require("react-quill/dist/quill.snow.css");
-var _quillImageResize = _interopRequireDefault(require("quill-image-resize"));
-var _quill = _interopRequireDefault(require("quill"));
-var _quillTable = _interopRequireDefault(require("quill-table"));
-var _katex = _interopRequireDefault(require("katex"));
-require("katex/dist/katex.min.css");
 require("./MyEditor.scss");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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; }
-// KaTeX'i global hale getir
-window.katex = _katex.default;
+// Opsiyonel bağımlılıkları kontrol et
+let ReactQuill, Quill, ImageResize, QuillTable, katex;
+let hasQuillDependencies = false;
+try {
+  ReactQuill = require("react-quill");
+  require("react-quill/dist/quill.snow.css");
+  Quill = require("quill");
+  ImageResize = require("quill-image-resize");
+  QuillTable = require("quill-table");
+  katex = require("katex");
+  require("katex/dist/katex.min.css");
+  hasQuillDependencies = true;
+} catch (error) {
+  console.warn("MyEditor: Quill bağımlılıkları bulunamadı. MyEditor bileşenini kullanmak için aşağıdaki paketleri yükleyin:", {
+    "react-quill": "^2.0.0",
+    "quill": "^1.3.7",
+    "quill-image-resize-module-react": "^3.0.0",
+    "quill-table-ui": "^1.0.7",
+    "katex": "^0.16.21"
+  });
+}
 
 // Özel font listesini tanımla
 const fonts = [{
@@ -113,44 +124,58 @@ const fonts = [{
   value: "segoe-ui"
 }];
 
-// Quill font formatını genişlet
-const Font = _quill.default.import("formats/font");
-Font.whitelist = fonts.map(f => f.value);
-_quill.default.register(Font, true);
+// Quill bağımlılıkları varsa konfigürasyonu yap
+if (hasQuillDependencies) {
+  // KaTeX'i global hale getir
+  if (katex) {
+    window.katex = katex;
+  }
 
-// Quill modüllerini kaydet
-_quill.default.register("modules/imageResize", _quillImageResize.default);
-_quill.default.register(_quillTable.default.TableCell);
-_quill.default.register(_quillTable.default.TableRow);
-_quill.default.register(_quillTable.default.Table);
-_quill.default.register(_quillTable.default.Contain);
-_quill.default.register("modules/table", _quillTable.default.TableModule);
+  // Quill font formatını genişlet
+  const Font = Quill.import("formats/font");
+  Font.whitelist = fonts.map(f => f.value);
+  Quill.register(Font, true);
 
-// Formula Embed için düzeltme
-const Embed = _quill.default.import("blots/embed");
-class FormulaEmbed extends Embed {
-  static create(value) {
-    let node = super.create();
-    if (value) {
-      node.setAttribute("data-value", value);
-      try {
-        window.katex.render(value, node, {
-          throwOnError: false
-        });
-      } catch (err) {
-        console.error("KaTeX render error:", err);
+  // Quill modüllerini kaydet
+  if (ImageResize) {
+    Quill.register("modules/imageResize", ImageResize);
+  }
+  if (QuillTable) {
+    Quill.register(QuillTable.TableCell);
+    Quill.register(QuillTable.TableRow);
+    Quill.register(QuillTable.Table);
+    Quill.register(QuillTable.Contain);
+    Quill.register("modules/table", QuillTable.TableModule);
+  }
+
+  // Formula Embed için düzeltme
+  if (katex) {
+    const Embed = Quill.import("blots/embed");
+    class FormulaEmbed extends Embed {
+      static create(value) {
+        let node = super.create();
+        if (value) {
+          node.setAttribute("data-value", value);
+          try {
+            window.katex.render(value, node, {
+              throwOnError: false
+            });
+          } catch (err) {
+            console.error("KaTeX render error:", err);
+          }
+        }
+        return node;
+      }
+      static value(node) {
+        return node.getAttribute("data-value");
       }
     }
-    return node;
-  }
-  static value(node) {
-    return node.getAttribute("data-value");
+    FormulaEmbed.blotName = "formula";
+    FormulaEmbed.tagName = "SPAN";
+    FormulaEmbed.className = "ql-formula";
+    Quill.register("formats/formula", FormulaEmbed);
   }
 }
-FormulaEmbed.blotName = "formula";
-FormulaEmbed.tagName = "SPAN";
-FormulaEmbed.className = "ql-formula";
-_quill.default.register("formats/formula", FormulaEmbed);
 function MyEditor({
   value,
   onChange,
@@ -163,13 +188,43 @@ function MyEditor({
   const editorRef = (0, _react.useRef)(null);
   const timeoutRef = (0, _react.useRef)(null);
   const isFirstRender = (0, _react.useRef)(true);
+
+  // Bağımlılıklar yoksa uyarı göster
+  if (!hasQuillDependencies) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        padding: "20px",
+        border: "2px dashed #ff6b6b",
+        borderRadius: "8px",
+        backgroundColor: "#fff5f5",
+        color: "#d63031",
+        textAlign: "center",
+        ...style
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+        children: "MyEditor Bile\u015Feni Kullan\u0131lam\u0131yor"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: "Bu bile\u015Feni kullanmak i\xE7in a\u015Fa\u011F\u0131daki paketleri y\xFCklemeniz gerekiyor:"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("pre", {
+        style: {
+          backgroundColor: "#f8f9fa",
+          padding: "10px",
+          borderRadius: "4px",
+          fontSize: "12px",
+          textAlign: "left",
+          overflow: "auto"
+        },
+        children: `npm install react-quill quill quill-image-resize-module-react quill-table-ui katex`
+      })]
+    });
+  }
   const handleFullscreen = () => {
     setIsFullscreen(!isFullscreen);
   };
 
   // Custom buton tanımı
   (0, _react.useEffect)(() => {
-    const icons = _quill.default.import('ui/icons');
+    const icons = Quill.import('ui/icons');
     icons['fullscreen'] = `<svg viewbox="0 0 18 18">
       <path d="M4,4H0v2h6V0H4V4z M14,4V0h-2v6h6V4H14z M6,14H0v2h4v4h2V14z M14,18h2v-4h4v-2h-6V18z"/>
     </svg>`;
@@ -293,7 +348,7 @@ function MyEditor({
             d: "M4,4H0v2h6V0H4V4z M14,4V0h-2v6h6V4H14z M6,14H0v2h4v4h2V14z M14,18h2v-4h4v-2h-6V18z"
           })
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactQuill.default, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ReactQuill, {
         ref: editorRef,
         theme: "snow",
         value: editorValue,

package/dist/components/MyFileUpload/MyFileUpload.js

@@ -7,9 +7,6 @@ exports.AcceptType = void 0;
 exports.default = MyFileUpload;
 var _react = _interopRequireWildcard(require("react"));
 var _pi = require("react-icons/pi");
-var _reactImageFileResizer = _interopRequireDefault(require("react-image-file-resizer"));
-var _reactHtml5CameraPhoto = _interopRequireWildcard(require("react-html5-camera-photo"));
-require("react-html5-camera-photo/build/css/index.css");
 var _MyWaiting = _interopRequireDefault(require("../MyWaiting/MyWaiting"));
 var _MyAlert = require("../MyAlert/MyAlert");
 var _MyFileUploadModule = _interopRequireDefault(require("./MyFileUpload.module.css"));
@@ -19,6 +16,26 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+// Opsiyonel bağımlılıkları kontrol et
+let Resizer, Camera, FACING_MODES, IMAGE_TYPES;
+let hasImageResizer = false;
+let hasCamera = false;
+try {
+  Resizer = require("react-image-file-resizer");
+  hasImageResizer = true;
+} catch (error) {
+  console.warn("MyFileUpload: react-image-file-resizer bağımlılığı bulunamadı.");
+}
+try {
+  const cameraModule = require("react-html5-camera-photo");
+  Camera = cameraModule.default;
+  FACING_MODES = cameraModule.FACING_MODES;
+  IMAGE_TYPES = cameraModule.IMAGE_TYPES;
+  require("react-html5-camera-photo/build/css/index.css");
+  hasCamera = true;
+} catch (error) {
+  console.warn("MyFileUpload: react-html5-camera-photo bağımlılığı bulunamadı.");
+}
 const AcceptType = exports.AcceptType = {
   ALL: "all",
   FILE: "file",
@@ -156,7 +173,7 @@ function MyFileUpload({
           ext: file_ext,
           type_image: type_image
         };
-        _reactImageFileResizer.default.imageFileResizer(file, 2600, 2600, "JPEG", 100, 0, uri => {
+        Resizer.imageFileResizer(file, 2600, 2600, "JPEG", 100, 0, uri => {
           fileReaderCalc++;
           let fileitem = {
             base64: uri,
@@ -281,7 +298,7 @@ function MyFileUpload({
       closeOnEsc: false,
       closeOnBackdropClick: false,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHtml5CameraPhoto.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Camera, {
           videoConstraints: {
             deviceId: selectedDeviceId ? {
               exact: selectedDeviceId
@@ -298,12 +315,12 @@ function MyFileUpload({
           onCameraStop: () => {
             handleCameraStop();
           },
-          idealFacingMode: _reactHtml5CameraPhoto.FACING_MODES.ENVIRONMENT,
+          idealFacingMode: FACING_MODES.ENVIRONMENT,
           idealResolution: {
             width: 1024,
             height: 1024
           },
-          imageType: _reactHtml5CameraPhoto.IMAGE_TYPES.JPG,
+          imageType: IMAGE_TYPES.JPG,
           isMaxResolution: true,
           isImageMirror: false,
           isSilentMode: false,

package/dist/components/MyImageCropper/MyImageCropper.js

@@ -5,18 +5,55 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _reactImageCrop = _interopRequireDefault(require("react-image-crop"));
-require("react-image-crop/dist/ReactCrop.css");
 var _MyZoomImage = _interopRequireDefault(require("../MyZoomImage/MyZoomImage"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+// Opsiyonel bağımlılığı kontrol et
+let ReactCrop;
+let hasReactCrop = false;
+try {
+  ReactCrop = require("react-image-crop").default;
+  require("react-image-crop/dist/ReactCrop.css");
+  hasReactCrop = true;
+} catch (error) {
+  console.warn("MyImageCropper: react-image-crop bağımlılığı bulunamadı. MyImageCropper bileşenini kullanmak için 'react-image-crop' paketini yükleyin.");
+}
 const MyImageCropper = ({
   image,
   style = null,
   onChange = null
 }) => {
+  // Bağımlılık yoksa uyarı göster
+  if (!hasReactCrop) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        padding: "20px",
+        border: "2px dashed #ff6b6b",
+        borderRadius: "8px",
+        backgroundColor: "#fff5f5",
+        color: "#d63031",
+        textAlign: "center",
+        ...style
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+        children: "MyImageCropper Bile\u015Feni Kullan\u0131lam\u0131yor"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: "Bu bile\u015Feni kullanmak i\xE7in a\u015Fa\u011F\u0131daki paketi y\xFCklemeniz gerekiyor:"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("pre", {
+        style: {
+          backgroundColor: "#f8f9fa",
+          padding: "10px",
+          borderRadius: "4px",
+          fontSize: "12px",
+          textAlign: "left",
+          overflow: "auto"
+        },
+        children: `npm install react-image-crop`
+      })]
+    });
+  }
   const [crop, setCrop] = (0, _react.useState)({
     x: 0,
     y: 0,
@@ -88,7 +125,7 @@ const MyImageCropper = ({
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     style: style,
-    children: image && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactImageCrop.default, {
+    children: image && /*#__PURE__*/(0, _jsxRuntime.jsx)(ReactCrop, {
       crop: crop,
       onComplete: onCropComplete,
       onChange: newCrop => setCrop(newCrop),

package/dist/components/MyWaiting/MyWaiting.css

@@ -25,4 +25,9 @@
   display: block;
   padding: 15px 0;
   text-align: center;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
 }

package/dist/components/MyWaiting/MyWaiting.js

@@ -5,11 +5,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 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ı
+
+// Opsiyonel bağımlılığı kontrol et
+let Oval;
+let hasLoaderSpinner = false;
+try {
+  const loaderSpinner = require("react-loader-spinner");
+  Oval = loaderSpinner.Oval;
+  hasLoaderSpinner = true;
+} catch (error) {
+  console.warn("MyWaiting: react-loader-spinner bağımlılığı bulunamadı. MyWaiting bileşenini kullanmak için 'react-loader-spinner' paketini yükleyin.");
+}
 function MyWaiting({
   show = false,
   message = null
@@ -21,7 +31,7 @@ function MyWaiting({
     className: "my-waiting-backdrop",
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "my-waiting-content",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactLoaderSpinner.Oval, {
+      children: [hasLoaderSpinner ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Oval, {
         visible: true,
         height: "60",
         width: "60",
@@ -29,6 +39,15 @@ function MyWaiting({
         secondaryColor: "#cdcdcd",
         ariaLabel: "oval-loading",
         strokeWidth: 5
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          width: "60px",
+          height: "60px",
+          border: "5px solid #cdcdcd",
+          borderTop: "5px solid #fff",
+          borderRadius: "50%",
+          animation: "spin 1s linear infinite"
+        }
       }), message && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: "my-waiting-message",
         children: message

package/dist/components/MyZoomImage/MyZoomImage.js

@@ -5,22 +5,34 @@ Object.defineProperty(exports, "__esModule", {
 });
 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 (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; }
+// Opsiyonel bağımlılığı kontrol et
+let TransformWrapper, TransformComponent, useControls;
+let hasZoomPanPinch = false;
+try {
+  const zoomPanPinch = require("react-zoom-pan-pinch");
+  TransformWrapper = zoomPanPinch.TransformWrapper;
+  TransformComponent = zoomPanPinch.TransformComponent;
+  useControls = zoomPanPinch.useControls;
+  hasZoomPanPinch = true;
+} catch (error) {
+  console.warn("MyZoomImage: react-zoom-pan-pinch bağımlılığı bulunamadı. MyZoomImage bileşenini kullanmak için 'react-zoom-pan-pinch' paketini yükleyin.");
+}
 const Controls = ({
   wrapperRef,
   openArrow
 }) => {
+  if (!hasZoomPanPinch) return null;
   const {
     zoomIn,
     zoomOut,
     resetTransform,
     centerView
-  } = (0, _reactZoomPanPinch.useControls)();
+  } = useControls();
   const handlePan = (x, y) => {
     if (wrapperRef.current) {
       // debugger
@@ -103,6 +115,43 @@ const MyImageZoom = ({
 }) => {
   const wrapperRef = (0, _react.useRef)(null); // Ref oluştur
   const [openArrow, setOpenArrow] = (0, _react.useState)(false);
+
+  // Bağımlılık yoksa uyarı göster
+  if (!hasZoomPanPinch) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        padding: "20px",
+        border: "2px dashed #ff6b6b",
+        borderRadius: "8px",
+        backgroundColor: "#fff5f5",
+        color: "#d63031",
+        textAlign: "center"
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+        children: "MyZoomImage Bile\u015Feni Kullan\u0131lam\u0131yor"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: "Bu bile\u015Feni kullanmak i\xE7in a\u015Fa\u011F\u0131daki paketi y\xFCklemeniz gerekiyor:"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("pre", {
+        style: {
+          backgroundColor: "#f8f9fa",
+          padding: "10px",
+          borderRadius: "4px",
+          fontSize: "12px",
+          textAlign: "left",
+          overflow: "auto"
+        },
+        children: `npm install react-zoom-pan-pinch`
+      }), children || /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        src: image,
+        alt: "Image",
+        style: {
+          maxWidth: "100%",
+          marginTop: "10px",
+          borderRadius: "4px"
+        }
+      })]
+    });
+  }
   const handlerTransform = e => {
     setOpenArrow(e.state.scale != 1);
     if (onZoomChange != null) {
@@ -111,14 +160,14 @@ const MyImageZoom = ({
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "zoom-container flex justify-center items-center",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactZoomPanPinch.TransformWrapper, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(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, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TransformComponent, {
         className: "w-full flex items-center justify-center",
         children: children || /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
           src: image,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "px-react-ui-components",
-  "version": "1.0.29",
+  "version": "1.1.1",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "type": "commonjs",
@@ -41,17 +41,60 @@
     "@babel/preset-react": "^7.26.3"
   },
   "peerDependencies": {
+    "react": "^18.3.1 || ^19.0.0",
+    "react-dom": "^18.3.1 || ^19.0.0",
+    "react-icons": "^5.5.0"
+  },
+  "peerDependenciesMeta": {
+    "katex": {
+      "optional": true
+    },
+    "quill": {
+      "optional": true
+    },
+    "quill-image-resize-module-react": {
+      "optional": true
+    },
+    "quill-table-ui": {
+      "optional": true
+    },
+    "react-confirm-alert": {
+      "optional": true
+    },
+    "react-image-crop": {
+      "optional": true
+    },
+    "react-loader-spinner": {
+      "optional": true
+    },
+    "react-quill": {
+      "optional": true
+    },
+    "react-zoom-pan-pinch": {
+      "optional": true
+    },
+    "react-image-file-resizer": {
+      "optional": true
+    },
+    "react-html5-camera-photo": {
+      "optional": true
+    },
+    "react-router-dom": {
+      "optional": true
+    }
+  },
+  "optionalDependencies": {
     "katex": "^0.16.21",
     "quill": "^1.3.7",
     "quill-image-resize-module-react": "^3.0.0",
     "quill-table-ui": "^1.0.7",
-    "react": "^18.3.1",
     "react-confirm-alert": "^3.0.6",
-    "react-dom": "^18.3.1",
-    "react-icons": "^5.5.0",
     "react-image-crop": "^11.0.7",
     "react-loader-spinner": "^6.1.6",
     "react-quill": "^2.0.0",
-    "react-zoom-pan-pinch": "^3.7.0"
+    "react-zoom-pan-pinch": "^3.7.0",
+    "react-image-file-resizer": "^3.0.4",
+    "react-html5-camera-photo": "^1.5.4",
+    "react-router-dom": "^6.28.0"
   }
 }