px-react-ui-components 1.1.17 → 1.1.19

package/README.md

@@ -20,26 +20,26 @@ 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 react-icons@^5.5.0
+npm install react react-dom react-icons
 
 # 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
+npm install react-confirm-alert
 
 # For MyImageCropper component:
-npm install react-image-crop@^11.0.7
+npm install react-image-crop
 
 # For MyWaiting component:
-npm install react-loader-spinner@^7.0.3
+npm install react-loader-spinner
 
 # For MyFileUpload component:
-npm install react-image-file-resizer@^3.0.4 react-html5-camera-photo@^1.5.4
+npm install react-image-file-resizer react-html5-camera-photo
 
 # For MyZoomImage component:
-npm install react-zoom-pan-pinch@^3.7.0
+npm install react-zoom-pan-pinch
 ```
 
 ## Dependencies

package/dist/components/MyFileUpload/MyFileUpload.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.AcceptType = void 0;
+exports.MyFileUploadAcceptType = void 0;
 exports.default = MyFileUpload;
 var _react = _interopRequireWildcard(require("react"));
 var _pi = require("react-icons/pi");
@@ -35,7 +35,7 @@ try {
 } catch (error) {
   console.warn("MyFileUpload: react-html5-camera-photo bağımlılığı bulunamadı.");
 }
-const AcceptType = exports.AcceptType = {
+const MyFileUploadAcceptType = exports.MyFileUploadAcceptType = {
   ALL: "all",
   FILE: "file",
   IMAGE: "image",
@@ -43,18 +43,25 @@ const AcceptType = exports.AcceptType = {
   PDF: "pdf",
   IMAGEPDF: "imagepdf"
 };
-Object.freeze(_MyAlert.MyAlertType);
+Object.freeze(MyFileUploadAcceptType);
 function MyFileUpload({
+  t = null,
   multiple = false,
-  accept = AcceptType.ALL,
+  accept = MyFileUploadAcceptType.ALL,
   className = null,
+  classNameContainer = null,
+  classNameItem = null,
+  classNameIcon = null,
+  classNameFile = null,
+  classNameCamera = null,
   camera = true,
   maxSizeMB = 50,
   onData
 }) {
+  const localT = typeof t === "function" ? t : key => key;
   const [loading, setLoading] = (0, _react.useState)(false);
-  const [accepttypes, setAccepttypes] = (0, _react.useState)(AcceptType.ALL);
-  const [acceptlabel, setAcceptlabel] = (0, _react.useState)(AcceptType.ALL);
+  const [MyFileUploadAcceptTypes, setMyFileUploadAcceptTypes] = (0, _react.useState)(MyFileUploadAcceptType.ALL);
+  const [acceptlabel, setAcceptlabel] = (0, _react.useState)(MyFileUploadAcceptType.ALL);
   const [cameraopen, setCameraopen] = (0, _react.useState)(false);
   const [cameraopened, setCameraopened] = (0, _react.useState)(false);
   const [devices, setDevices] = (0, _react.useState)([]);
@@ -65,28 +72,28 @@ function MyFileUpload({
   let type_media = ".mp3,.mp4,.avi,.wav";
   (0, _react.useEffect)(() => {
     switch (accept) {
-      case AcceptType.ALL:
-        setAccepttypes(type_files + "," + type_image + "," + type_media);
+      case MyFileUploadAcceptType.ALL:
+        setMyFileUploadAcceptTypes(type_files + "," + type_image + "," + type_media);
         setAcceptlabel("PNG, JPG, PDF, RAR, ZIP, MP3, MP4, AVI, WAV, Word-Excel");
         break;
-      case AcceptType.IMAGE:
-        setAccepttypes(type_image);
+      case MyFileUploadAcceptType.IMAGE:
+        setMyFileUploadAcceptTypes(type_image);
         setAcceptlabel("PNG, JPG ");
         break;
-      case AcceptType.MEDIA:
-        setAccepttypes(type_media);
+      case MyFileUploadAcceptType.MEDIA:
+        setMyFileUploadAcceptTypes(type_media);
         setAcceptlabel("MP3, MP4, AVI, WAV");
         break;
-      case AcceptType.FILE:
-        setAccepttypes(type_files + "," + type_image);
+      case MyFileUploadAcceptType.FILE:
+        setMyFileUploadAcceptTypes(type_files + "," + type_image);
         setAcceptlabel("PDF, RAR, ZIP, PNG, JPG, Word-Excel ");
         break;
-      case AcceptType.PDF:
-        setAccepttypes(".pdf");
+      case MyFileUploadAcceptType.PDF:
+        setMyFileUploadAcceptTypes(".pdf");
         setAcceptlabel("PDF");
         break;
-      case AcceptType.IMAGEPDF:
-        setAccepttypes(type_image + ",.pdf");
+      case MyFileUploadAcceptType.IMAGEPDF:
+        setMyFileUploadAcceptTypes(type_image + ",.pdf");
         setAcceptlabel("PNG, JPG, PDF");
         break;
     }
@@ -119,7 +126,7 @@ function MyFileUpload({
 
       let file_ext = file.type.split("/");
       file_ext = file_ext[file_ext.length - 1];
-      if (filesize > maxSizeMB || accepttypes.indexOf(file_ext) == -1) {
+      if (filesize > maxSizeMB || MyFileUploadAcceptTypes.indexOf(file_ext) == -1) {
         if (filesize > maxSizeMB) {
           _error.push({
             filename: file.name,
@@ -239,13 +246,13 @@ function MyFileUpload({
       show: loading,
       message: ""
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: className,
+      className: classNameContainer,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: _MyFileUploadModule.default.myFileUploadContainer,
+        className: _MyFileUploadModule.default.myFileUploadContainer + (className != null ? " " + className : ''),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: _MyFileUploadModule.default.myFileUploadContainerItem,
+          className: _MyFileUploadModule.default.myFileUploadContainerItem + (classNameItem != null ? " " + classNameItem : ''),
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: _MyFileUploadModule.default.myFileUploadContainerItemIcon,
+            className: _MyFileUploadModule.default.myFileUploadContainerItemIcon + (classNameIcon != null ? " " + classNameIcon : ''),
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_pi.PiFileArrowUpLight, {
               className: _MyFileUploadModule.default.Icon
             }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("h2", {
@@ -253,14 +260,14 @@ function MyFileUpload({
               children: [acceptlabel, /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), " ", maxSizeMB, " MB"]
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: _MyFileUploadModule.default.myFileUploadContainerItemFile,
+            className: _MyFileUploadModule.default.myFileUploadContainerItemFile + (classNameFile != null ? " " + classNameFile : ''),
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
               type: "file",
               hidden: true,
               ref: fileInputRef,
               onChange: handleFileInputChange,
               multiple: multiple,
-              accept: accepttypes
+              accept: MyFileUploadAcceptTypes
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               className: _MyFileUploadModule.default.myFileUploadButton,
               onClick: () => fileInputRef.current.click(),
@@ -268,19 +275,19 @@ function MyFileUpload({
             })]
           })]
         }), camera && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: _MyFileUploadModule.default.myFileUploadContainerItem,
+          className: _MyFileUploadModule.default.myFileUploadContainerItem + (classNameCamera != null ? " " + classNameCamera : ''),
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: _MyFileUploadModule.default.myFileUploadContainerItemIcon,
+            className: _MyFileUploadModule.default.myFileUploadContainerItemIcon + (classNameIcon != null ? " " + classNameIcon : ''),
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_pi.PiCamera, {
               className: _MyFileUploadModule.default.Icon
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               className: _MyFileUploadModule.default.myFileUploadContainerItemIconText,
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                children: "You can take a photo from the camera."
+                children: localT("Kameradan fotoğraf çekebilirsin.")
               })
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: _MyFileUploadModule.default.myFileUploadContainerItemFile,
+            className: _MyFileUploadModule.default.myFileUploadContainerItemFile + (classNameFile != null ? " " + classNameFile : ''),
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
               type: "button",
               className: _MyFileUploadModule.default.myFileUploadButton,
@@ -293,7 +300,7 @@ function MyFileUpload({
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MyModal.default, {
       show: cameraopen,
       onClose: () => setCameraopen(false),
-      title: t("Fotoğraf Çek"),
+      title: localT("Fotoğraf Çek"),
       closeOnEsc: false,
       closeOnBackdropClick: false,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/dist/index.js

@@ -27,6 +27,12 @@ Object.defineProperty(exports, "MyFileUpload", {
     return _MyFileUpload.default;
   }
 });
+Object.defineProperty(exports, "MyFileUploadAcceptType", {
+  enumerable: true,
+  get: function () {
+    return _MyFileUpload.MyFileUploadAcceptType;
+  }
+});
 Object.defineProperty(exports, "MyImageCropper", {
   enumerable: true,
   get: function () {
@@ -104,7 +110,7 @@ var _MyInput = _interopRequireDefault(require("./components/MyInput/MyInput"));
 var _MyAlert = _interopRequireDefault(require("./components/MyAlert/MyAlert"));
 var _MyContainer = _interopRequireDefault(require("./components/MyContainer/MyContainer"));
 var _MyEditor = _interopRequireDefault(require("./components/MyEditor/MyEditor"));
-var _MyFileUpload = _interopRequireDefault(require("./components/MyFileUpload/MyFileUpload"));
+var _MyFileUpload = _interopRequireWildcard(require("./components/MyFileUpload/MyFileUpload"));
 var _MyImageCropper = _interopRequireDefault(require("./components/MyImageCropper/MyImageCropper"));
 var _YandexMaps = _interopRequireDefault(require("./components/MyMaps/YandexMaps"));
 var _MenuItem = _interopRequireDefault(require("./components/MyMenu/MenuItem"));
@@ -116,6 +122,7 @@ var _MyTabs = _interopRequireDefault(require("./components/MyTabs/MyTabs"));
 var _MyWaiting = _interopRequireDefault(require("./components/MyWaiting/MyWaiting"));
 var _MyZoomImage = _interopRequireDefault(require("./components/MyZoomImage/MyZoomImage"));
 var _MySwitch = _interopRequireDefault(require("./components/MySwitch/MySwitch"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // Export types
 const MyInputType = exports.MyInputType = {

package/package.json

@@ -1,100 +1,100 @@
-{
-  "name": "px-react-ui-components",
-  "version": "1.1.17",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "type": "commonjs",
-  "exports": {
-    ".": "./dist/index.js"
-  },
-  "files": [
-    "dist",
-    "dist/components",
-    "README.md"
-  ],
-  "scripts": {
-    "build": "babel src --out-dir dist --copy-files",
-    "prepare": "npm run build"
-  },
-  "keywords": [
-    "react",
-    "components",
-    "ui",
-    "ui-components",
-    "library",
-    "design system",
-    "styled-components",
-    "tailwindcss",
-    "input",
-    "select",
-    "datepicker",
-    "container",
-    "tabs"
-  ],
-  "author": "Piri AYKUT | piriaykut@gmail.com",
-  "license": "MIT",
-  "description": "React UI components library",
-  "devDependencies": {
-    "@babel/cli": "^7.27.0",
-    "@babel/core": "^7.26.10",
-    "@babel/preset-env": "^7.26.9",
-    "@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-confirm-alert": "^3.0.6",
-    "react-image-crop": "^11.0.7",
-    "react-loader-spinner": "^7.0.3",
-    "react-quill": "^2.0.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"
-  }
-}
+{
+  "name": "px-react-ui-components",
+  "version": "1.1.19",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "type": "commonjs",
+  "exports": {
+    ".": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "dist/components",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "babel src --out-dir dist --copy-files",
+    "prepare": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "ui",
+    "ui-components",
+    "library",
+    "design system",
+    "styled-components",
+    "tailwindcss",
+    "input",
+    "select",
+    "datepicker",
+    "container",
+    "tabs"
+  ],
+  "author": "Piri AYKUT | piriaykut@gmail.com",
+  "license": "MIT",
+  "description": "React UI components library",
+  "devDependencies": {
+    "@babel/cli": "^7.28.6",
+    "@babel/core": "^7.29.0",
+    "@babel/preset-env": "^7.29.2",
+    "@babel/preset-react": "^7.28.5"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "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.44",
+    "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-image-crop": "^11.0.10",
+    "react-loader-spinner": "^7.0.3",
+    "react-quill": "^2.0.0",
+    "react-zoom-pan-pinch": "^3.7.0",
+    "react-image-file-resizer": "^3.0.4",
+    "react-html5-camera-photo": "^1.5.11",
+    "react-router-dom": "^6.30.3"
+  }
+}