px-react-ui-components 1.0.0 → 1.0.2

package/dist/components/MyFileUpload/MyFileUpload.js

@@ -3,11 +3,11 @@ import { PiCamera, PiFileArrowUpLight } from "react-icons/pi";
 import Resizer from "react-image-file-resizer";
 import Camera, { FACING_MODES, IMAGE_TYPES } from "react-html5-camera-photo";
 import "react-html5-camera-photo/build/css/index.css";
-import { useTranslation } from "../../context/TranslationContext";
 import MyWaiting from "../MyWaiting/MyWaiting";
 import { MyAlert, MyAlertType } from "../MyAlert/MyAlert";
 import styles from "./MyFileUpload.module.css";
 import MyModal from "../MyModal/MyModal";
+import { MdOutlineAttachFile } from "react-icons/md";
 export const AcceptType = {
   ALL: "all",
   FILE: "file",
@@ -25,9 +25,6 @@ export default function MyFileUpload({
   maxSizeMB = 50,
   onData
 }) {
-  const {
-    t
-  } = useTranslation();
   const [loading, setLoading] = useState(false);
   const [accepttypes, setAccepttypes] = useState(AcceptType.ALL);
   const [acceptlabel, setAcceptlabel] = useState(AcceptType.ALL);
@@ -43,27 +40,27 @@ export default function MyFileUpload({
     switch (accept) {
       case AcceptType.ALL:
         setAccepttypes(type_files + "," + type_image + "," + type_media);
-        setAcceptlabel("PNG, JPG, PDF, RAR, ZIP, MP3, MP4, AVI, WAV veya Word-Excel Dosyaları");
+        setAcceptlabel("PNG, JPG, PDF, RAR, ZIP, MP3, MP4, AVI, WAV, Word-Excel");
         break;
       case AcceptType.IMAGE:
         setAccepttypes(type_image);
-        setAcceptlabel(t("PNG veya JPG Dosyaları"));
+        setAcceptlabel("PNG, JPG ");
         break;
       case AcceptType.MEDIA:
         setAccepttypes(type_media);
-        setAcceptlabel(t("MP3, MP4, AVI veya WAV Dosyaları"));
+        setAcceptlabel("MP3, MP4, AVI, WAV");
         break;
       case AcceptType.FILE:
         setAccepttypes(type_files + "," + type_image);
-        setAcceptlabel(t("PDF, RAR, ZIP, PNG, JPG veya Word-Excel Dosyaları"));
+        setAcceptlabel("PDF, RAR, ZIP, PNG, JPG, Word-Excel ");
         break;
       case AcceptType.PDF:
         setAccepttypes(".pdf");
-        setAcceptlabel(t("PDF Dosyaları"));
+        setAcceptlabel("PDF");
         break;
       case AcceptType.IMAGEPDF:
         setAccepttypes(type_image + ",.pdf");
-        setAcceptlabel(t("PNG, JPG veya PDF Dosyaları"));
+        setAcceptlabel("PNG, JPG, PDF");
         break;
     }
     navigator.mediaDevices.enumerateDevices().then(deviceInfos => {
@@ -79,7 +76,7 @@ export default function MyFileUpload({
       let message = _error.map((e, i) => {
         return i + 1 + ".) <b><i>" + e.filename + "</i></b><br/>---- " + e.message + "<br/>";
       });
-      MyAlert(t("Aşağıdaki dosyalar eklenemedi!") + "<br/><br/><div style='display: block;font-size:13px;width: 100%;text-align: left;'>" + message + "</div>", MyAlertType.WARNING);
+      MyAlert("<br/><br/><div style='display: block;font-size:13px;width: 100%;text-align: left;'>" + message + "</div>", MyAlertType.WARNING);
     }
     if (onData && (Array.isArray(resdata) && resdata.length > 0 || !Array.isArray(resdata) && resdata)) onData(resdata);
     setLoading(false);
@@ -99,12 +96,14 @@ export default function MyFileUpload({
         if (filesize > maxSizeMB) {
           _error.push({
             filename: file.name,
-            message: t("Boyutu Max. Dosya Boyutundan büyük olamaz!") + ` <b>${maxSizeMB}MB</b>`
+            // message: "Boyutu Max. Dosya Boyutundan büyük olamaz!" + ` <b>${maxSizeMB}MB</b>`,
+            message: "Size cannot be larger than Max. File Size!" + ` <b>${maxSizeMB}MB</b>`
           });
         } else {
           _error.push({
             filename: file.name,
-            message: t("Dosya türü desteklenmiyor!") + ` <b>${file_ext}</b>`
+            // message: t("Dosya türü desteklenmiyor!") + ` <b>${file_ext}</b>`,
+            message: "File type not supported!" + ` <b>${file_ext}</b>`
           });
         }
         if (files.length == i + 1 && response_files.length == 0) {
@@ -223,7 +222,7 @@ export default function MyFileUpload({
     className: styles.Icon
   }), /*#__PURE__*/React.createElement("h2", {
     className: styles.myFileUploadContainerItemIconText
-  }, acceptlabel, /*#__PURE__*/React.createElement("br", null), " ", t("En fazla"), " ", maxSizeMB, " MB")), /*#__PURE__*/React.createElement("div", {
+  }, acceptlabel, /*#__PURE__*/React.createElement("br", null), " ", maxSizeMB, " MB")), /*#__PURE__*/React.createElement("div", {
     className: styles.myFileUploadContainerItemFile
   }, /*#__PURE__*/React.createElement("input", {
     type: "file",
@@ -235,7 +234,7 @@ export default function MyFileUpload({
   }), /*#__PURE__*/React.createElement("div", {
     className: styles.myFileUploadButton,
     onClick: () => fileInputRef.current.click()
-  }, t("Dosya Seç")))), camera && /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(MdOutlineAttachFile, null)))), camera && /*#__PURE__*/React.createElement("div", {
     className: styles.myFileUploadContainerItem
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.myFileUploadContainerItemIcon
@@ -243,13 +242,13 @@ export default function MyFileUpload({
     className: styles.Icon
   }), /*#__PURE__*/React.createElement("div", {
     className: styles.myFileUploadContainerItemIconText
-  }, /*#__PURE__*/React.createElement("span", null, t("Kameradan fotoğraf çekebilirsin.")))), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("span", null, "You can take a photo from the camera."))), /*#__PURE__*/React.createElement("div", {
     className: styles.myFileUploadContainerItemFile
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: styles.myFileUploadButton,
     onClick: () => setCameraopen(true)
-  }, t("Fotoğraf Çek")))))), /*#__PURE__*/React.createElement(MyModal, {
+  }, /*#__PURE__*/React.createElement(PiCamera, null)))))), /*#__PURE__*/React.createElement(MyModal, {
     show: cameraopen,
     onClose: () => setCameraopen(false),
     title: t("Fotoğraf Çek"),

package/dist/components/MyInput/MyInput.js

@@ -1,8 +1,8 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React, { useEffect, useRef, useState } from "react";
 import styles from "./MyInput.module.css";
-import { PiCaretDownBold, PiEye, PiEyeSlash } from "react-icons/pi";
-import { useTranslation } from "../../context/TranslationContext";
+import { PiCaretDownBold, PiEye, PiEyeSlash, PiImage } from "react-icons/pi";
+import { MdOutlineAttachFile } from "react-icons/md";
 export const MyInputType = Object.freeze({
   TEXT: 'text',
   PASSWORD: 'password',
@@ -66,9 +66,6 @@ function MyInput({
   onMouseLeave = null,
   onRemoveImage = null
 }) {
-  const {
-    t
-  } = useTranslation();
   const myInputId = `key${Date.now() + Math.random().toString(36).substr(2, 9)}`;
   const fileInputRef = useRef(null);
   const [loaded, setLoaded] = useState(false);
@@ -625,7 +622,7 @@ function MyInput({
         style: style,
         value: filtertext,
         onChange: e => setFiltertext(e.target.value),
-        placeholder: placeholdersearchtext && placeholdersearchtext != "" ? placeholdersearchtext : (placeholder ? placeholder : myTitleLite) + " " + t("Ara"),
+        placeholder: placeholdersearchtext && placeholdersearchtext != "" ? placeholdersearchtext : (placeholder ? placeholder : myTitleLite) + " ...",
         onBlur: onMyBlur,
         onFocus: onMyFocus,
         onKeyDown: onMyKeyDown,
@@ -720,7 +717,7 @@ function MyInput({
         type: "button",
         onClick: () => fileInputRef.current.click(),
         className: styles.filebutton
-      }, type === MyInputType.IMAGE ? t("Görsel Seç") : t("Dosya Seç")), /*#__PURE__*/React.createElement("input", _extends({
+      }, type === MyInputType.IMAGE ? /*#__PURE__*/React.createElement(PiImage, null) : /*#__PURE__*/React.createElement(MdOutlineAttachFile, null)), /*#__PURE__*/React.createElement("input", _extends({
         type: "file",
         ref: fileInputRef,
         onChange: e => onMyChange(e),

package/dist/components/MyTable/MyTable.js

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from "react";
 import styles from "./MyTable.module.css";
-import { useTranslation } from "../../context/TranslationContext";
 export const MyTableIsNumeric = value => {
   if (value === null || value === undefined || value === "") return false;
   return !isNaN(value) && !isNaN(parseFloat(value));
@@ -31,9 +30,6 @@ function MyTable({
   onRowClick = null,
   onPageChange = null
 }) {
-  const {
-    t
-  } = useTranslation();
   const tableid = `key${Date.now() + Math.random().toString(36).substr(2, 9)}`;
   const [curEmptyText, setCurEmptyText] = useState(emptyText);
   const [curTotalCount, setCurTotalCount] = useState(data ? data.length : totalCount);
@@ -106,7 +102,8 @@ function MyTable({
   }, [data, searchTerm, sortConfig, currentPage, pageSize]);
   useEffect(() => {
     if (emptyText == "") {
-      setCurEmptyText(t("Henüz bir kayıt mevcut değil!"));
+      // setCurEmptyText(t("Henüz bir kayıt mevcut değil!"));
+      setCurEmptyText("No records found!");
     }
     return () => {};
   }, [tableid]);
@@ -271,8 +268,10 @@ function MyTable({
   }, searchable && /*#__PURE__*/React.createElement("div", {
     className: styles.searchContainer
   }, /*#__PURE__*/React.createElement("input", {
-    type: "text",
-    placeholder: t("Ara"),
+    type: "text"
+    // placeholder={t("Ara")}
+    ,
+    placeholder: "Search",
     value: searchTerm,
     className: styles.searchInput,
     onChange: e => setSearchTerm(e.target.value)
@@ -303,7 +302,9 @@ function MyTable({
     className: styles.td
   }, searchTerm != "" && /*#__PURE__*/React.createElement("span", {
     dangerouslySetInnerHTML: {
-      __html: `${t("Aradığınız kriterlere uygun kayıt bulunamadı!")}<br/><b>(${searchTerm})</b>`
+      __html: `${
+      // t("Aradığınız kriterlere uygun kayıt bulunamadı!")
+      "No records found for the criteria you searched for!"}<br/><b>(${searchTerm})</b>`
     }
   }) || curEmptyText))))), totalPages > 0 && renderPagination());
 }

package/package.json

@@ -1,7 +1,19 @@
 {
   "name": "px-react-ui-components",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "main": "dist/index.js",
+  "module": "dist/index.js",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
   "scripts": {
     "build": "babel src --out-dir dist --copy-files"
   },

package/.babelrc

@@ -1,3 +0,0 @@
-{
-  "presets": ["@babel/preset-react"]
-}

package/src/components/MyAlert/MyAlert.css

@@ -1,113 +0,0 @@
-
-.react-confirm-alert-blur {
-    filter: url(#gaussian-blur);
-    filter: blur(2px);
-    -webkit-filter: blur(2px);
-}
-
-.react-confirm-alert-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 9999;
-    background: rgba(99, 99, 99, 0.9);
-    display: -webkit-flex;
-    display: -moz-flex;
-    display: -ms-flex;
-    display: -o-flex;
-    display: flex;
-    justify-content: center;
-    -ms-align-items: center;
-    align-items: center;
-    opacity: 0;
-    -webkit-animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
-    -moz-animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
-    -o-animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
-    animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
-}
-
-.react-confirm-alert-body {
-    font-family: "Nunito", sans-serif;
-    width: 90%; /* Daha geniş cihazlarda %90 genişlik */
-    max-width: 400px; /* Maksimum genişlik sınırı */
-    padding: 20px;
-    text-align: left;
-    background: #fff;
-    border-radius: 10px;
-    box-shadow: 0 20px 75px rgba(0, 0, 0, 0.13);
-    color: #666;
-    text-align: center;
-    margin: 0 auto; /* Orta hizalama */
-}
-
-@media (max-width: 600px) {
-    .react-confirm-alert-body {
-        width: 95%; /* Küçük ekranlarda daha fazla boşluk */
-        max-width: 320px; /* Maksimum genişlik daha küçük */
-    }
-}
-
-.react-confirm-alert-svg {
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-
-.react-confirm-alert-body > h1 {
-    margin-top: 0;
-    color: #1e293b !important;
-    font-weight: bold;
-    font-size: 1.3em;
-    border-radius: 0px;
-}
-
-.react-confirm-alert-body > h3 {
-    margin: 0;
-    font-size: 3.5em !important;
-    color: #1e293b !important;
-}
-
-.react-confirm-alert-button-group {
-    display: -webkit-flex;
-    display: -moz-flex;
-    display: -ms-flex;
-    display: -o-flex;
-    display: flex;
-    justify-content: space-between;
-    margin-top: 30px;
-}
-
-.react-confirm-alert-button-group > button {
-    outline: none;
-    background: #1e293b;
-    border: none;
-    display: inline-block;
-    padding: 10px 18px;
-    color: #fff;
-    margin-right: 10px;
-    border-radius: 5px;
-    font-size: 1em;
-    cursor: pointer;
-    width: 100%;
-
-    &:hover {
-        opacity: 0.8;
-    }
-
-    &:last-child {
-        background: #506280 !important;
-        color: #fff;
-    }
-    &:first-child {
-        background: #1e293b !important;
-        color: #fff;
-    }
-}
-
-.react-confirm-alert-body {
-    width: 500px;
-    max-height: 300px;
-    overflow: auto;
-}

package/src/components/MyAlert/MyAlert.jsx

@@ -1,96 +0,0 @@
-import React from "react";
-
-import { confirmAlert } from "react-confirm-alert";
-import "react-confirm-alert/src/react-confirm-alert.css";
-import "./MyAlert.css";
-
-// import Swal from "sweetalert2";
-
-export const MyAlertType = {
-  WARNING: 'warning',
-  ERROR: 'error',
-  SUCCESS: 'success',
-  INFO: 'info',
-  QUESTION: 'question'
-};
-
-Object.freeze(MyAlertType); // Enum sabitlerini değiştirmeyi engeller
-
-export const MyAlert = (message, type = MyAlertType.INFO, { title = '', buttontext = { confirm: 'Tamam', cancel: 'İptal' }, callback = null } = {}) => {
-  let _showCancelButton = false;
-  switch (type) {
-    case MyAlertType.WARNING:
-      title = title ? title : 'Uyarı';
-      break;
-    case MyAlertType.ERROR:
-      title = title ? title : 'Hata!';
-      break;
-    case MyAlertType.SUCCESS:
-      title = title ? title : 'İşlem Başarılı';
-      break;
-    case MyAlertType.INFO:
-      title = title ? title : 'Bilgi';
-      break;
-    case MyAlertType.QUESTION:
-      title = title ? title : 'Onaylıyor musunuz?';
-      _showCancelButton = true;
-
-      if (buttontext.confirm == "Tamam") {
-        buttontext.confirm = "Evet";
-        buttontext.cancel = "Hayır";
-      }
-      break;
-  }
-
-  let _buttons = [
-    {
-      label: buttontext.confirm,
-      onClick: () => {
-        if (callback) callback({ isConfirmed: true, isDenied: false });
-      },
-    },
-  ];
-
-  if (_showCancelButton) {
-    _buttons.push({
-      label: buttontext.cancel,
-      onClick: () => {
-        if (callback) callback({ isConfirmed: false, isDenied: true });
-      },
-    });
-  }
-
-  confirmAlert({
-    title: title,
-    message: <div dangerouslySetInnerHTML={{
-      __html: (typeof message === 'string' ? message : message.props?.children || message.toString())
-    }}></div>,
-    buttons: _buttons,
-    onClickOutside: () => {
-      if (callback) callback({ isConfirmed: false, isDenied: true });
-    },
-    onKeypressEscape: () => {
-      if (callback) callback({ isConfirmed: false, isDenied: true });
-    }
-  });
-
-  // Swal.fire({
-  //   title: title,
-  //   html: message,
-  //   icon: type,
-  //   focusConfirm: true,
-  //   confirmButtonText: buttontext.confirm,
-  //   cancelButtonText: buttontext.cancel,
-  //   showCancelButton: _showCancelButton
-  // }).then((result) => {
-  //   if (callback){
-  //     callback(result);
-  //   }
-  //   // /* Read more about isConfirmed, isDenied below */
-  //   // if (result.isConfirmed) {
-  //   //   // Swal.fire("Saved!", "", "success");
-  //   // } else if (result.isDenied) {
-  //   //   // Swal.fire("Changes are not saved", "", "info");
-  //   // }
-  // });
-}

package/src/components/MyContainer/MyContainer.jsx

@@ -1,90 +0,0 @@
-import React from "react";
-import styles from "./MyContainer.module.css";
-
-function MyContainer({
-    children,
-    title = "",
-    description = null,
-    icon = null,
-    className = null,
-    titleTextStyle = null,
-    style = null,
-    headerClassName = null,
-    headerStyle = null,
-    bodyClassName = null,
-    bodyStyle = null,
-    footerClassName = null,
-    footerStyle = null,
-}) {
-    const arrChild = React.Children.toArray(children);
-
-    let childHeaderRight = null;
-    let childBody = null;
-    let childFooter = null;
-
-    for (let i = 0; i < arrChild.length; i++) {
-        const el = arrChild[i];
-        if (el.type && el.type.toString().includes("MyContainerTagRight")) {
-            childHeaderRight = el;
-        } else if (
-            el.type &&
-            el.type.toString().includes("MyContainerTagBody")
-        ) {
-            childBody = el;
-        } else if (
-            el.type &&
-            el.type.toString().includes("MyContainerTagFooter")
-        ) {
-            childFooter = el;
-        } else if (childBody == null) {
-            childBody = el;
-        } else if (
-            childBody != null &&
-            childFooter == null &&
-            i == arrChild.length - 1
-        ) {
-            childFooter = el;
-        }
-    }
-
-    return (
-        <section
-            className={`${styles.container} ${className || ""}`}
-            style={style}
-        >
-            {(title || childHeaderRight) && (
-                <div className={`${styles.header} ${headerClassName || ""}`} style={headerStyle}>
-                {title &&
-                    <>
-                        <h3 className={styles.title} style={titleTextStyle}>
-                            {title}
-                        </h3>
-                        {description && (
-                            <span className={styles.description}>
-                                {description}
-                            </span>
-                        )}
-                    </>
-                }
-                    {childHeaderRight && childHeaderRight}
-                </div>
-            )}
-            <div
-                className={`${styles.body} ${bodyClassName || ""}`}
-                style={(title ? { paddingTop: "12px" } : null)}
-            >
-                {childBody}
-            </div>
-            {childFooter && (
-                <div
-                    className={`${styles.footer} ${footerClassName || ""}`}
-                    style={(title ? { paddingTop: "12px" } : null) }
-                >
-                    {childFooter}
-                </div>
-            )}
-        </section>
-    );
-}
-
-export default MyContainer;

package/src/components/MyContainer/MyContainer.module.css

@@ -1,110 +0,0 @@
-.container {
-    position: relative;
-    display: block;
-    width: 100%;
-    background: #ffff;
-    border-radius: 15px;
-}
-
-.header {
-    position: relative;
-    display: block;
-    width: 100%;
-    padding: 15px;
-    padding-left: 20px;
-    padding-bottom: 7.5px;
-    border-bottom: 1px solid #d0d6de;
-    color: #464255;
-}
-
-.title {
-    margin: 0px !important;
-}
-
-.description {
-    font-size: 12px;
-}
-
-.rightBlock {
-    position: absolute;
-    right: 15px;
-    z-index: 2;
-    top: 50%;
-    transform: translateY(-50%);
-    display: flex;
-    flex-direction: row;
-    gap: 10px;
-}
-
-.rightBlock button {
-    display: flex;
-    flex-direction: row;
-    gap: 10px;
-    justify-items: center;
-    align-items: center;
-    padding: 10px 15px;
-}
-
-.body {
-    display: block;
-    width: 100%;
-    padding: 15px;
-}
-
-.footer {
-    display: block;
-    width: 100%;
-    padding: 15px;
-    border-top: 1px solid #d0d6de;
-}
-
-@media screen and (max-width: 768px) {
-    .header {
-        padding: 10px;
-        padding-left: 15px;
-        padding-bottom: 5px;
-    }
-
-    .rightBlock {
-        position: relative;
-        right: auto;
-        top: auto;
-        transform: none;
-        margin-top: 10px;
-        justify-content: flex-end;
-    }
-
-    .rightBlock button {
-        padding: 8px 12px;
-        font-size: 14px;
-    }
-
-    .body {
-        padding: 10px;
-    }
-
-    .footer {
-        padding: 10px;
-    }
-}
-
-@media screen and (max-width: 480px) {
-    .header {
-        padding: 8px;
-        padding-left: 12px;
-        padding-bottom: 4px;
-    }
-
-    .rightBlock button {
-        padding: 6px 10px;
-        font-size: 12px;
-    }
-
-    .body {
-        padding: 8px;
-    }
-
-    .footer {
-        padding: 8px;
-    }
-}

package/src/components/MyContainer/MyContainerBody.jsx

@@ -1,8 +0,0 @@
-import React from "react";
-
-function MyContainerBody({ children }) {
-  return (
-    <div className="MyContainerTagBody">{children}</div>
-  )
-}
-export default MyContainerBody

package/src/components/MyContainer/MyContainerFooter.jsx

@@ -1,8 +0,0 @@
-import React from "react";
-
-function MyContainerFooter({ children }) {
-  return (
-    <div className="MyContainerTagFooter">{children}</div>
-  )
-}
-export default MyContainerFooter

package/src/components/MyContainer/MyContainerRight.jsx

@@ -1,11 +0,0 @@
-import React from "react";
-import styles from "./MyContainer.module.css";
-
-function MyContainerRight({ children }) {
-    return (
-        <div className={"MyContainerTagRight " + styles.rightBlock}>
-            {children}
-        </div>
-    );
-}
-export default MyContainerRight;