px-react-ui-components 1.0.0 → 1.0.1

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,6 +1,6 @@
 {
   "name": "px-react-ui-components",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "main": "dist/index.js",
   "scripts": {
     "build": "babel src --out-dir dist --copy-files"

package/src/components/MyFileUpload/MyFileUpload.jsx

@@ -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",
@@ -28,7 +28,6 @@ export default function MyFileUpload({
     maxSizeMB = 50,
     onData,
 }) {
-    const { t } = useTranslation();
 
     const [loading, setLoading] = useState(false);
     const [accepttypes, setAccepttypes] = useState(AcceptType.ALL);
@@ -50,31 +49,28 @@ export default function MyFileUpload({
                 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;
         }
 
@@ -104,7 +100,6 @@ export default function MyFileUpload({
             });
 
             MyAlert(
-                t("Aşağıdaki dosyalar eklenemedi!") +
                 "<br/><br/><div style='display: block;font-size:13px;width: 100%;text-align: left;'>" +
                 message +
                 "</div>",
@@ -140,12 +135,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>`,
                     });
                 }
 
@@ -294,7 +291,7 @@ export default function MyFileUpload({
                             <PiFileArrowUpLight className={styles.Icon} />
                             <h2 className={styles.myFileUploadContainerItemIconText}>
                                 {acceptlabel}
-                                <br /> {t("En fazla")} {maxSizeMB} MB
+                                <br /> {maxSizeMB} MB
                             </h2>
                         </div>
                         <div className={styles.myFileUploadContainerItemFile}>
@@ -310,7 +307,7 @@ export default function MyFileUpload({
                                 className={styles.myFileUploadButton}
                                 onClick={() => fileInputRef.current.click()}
                             >
-                                {t("Dosya Seç")}
+                                <MdOutlineAttachFile />
                             </div>
                         </div>
                     </div>
@@ -320,7 +317,8 @@ export default function MyFileUpload({
                                 <PiCamera className={styles.Icon} />
                                 <div className={styles.myFileUploadContainerItemIconText}>
                                     <span>
-                                        {t("Kameradan fotoğraf çekebilirsin.")}
+                                        {/* {t("Kameradan fotoğraf çekebilirsin.")} */}
+                                        You can take a photo from the camera.
                                     </span>
                                 </div>
                             </div>
@@ -330,7 +328,7 @@ export default function MyFileUpload({
                                     className={styles.myFileUploadButton}
                                     onClick={() => setCameraopen(true)}
                                 >
-                                    {t("Fotoğraf Çek")}
+                                    <PiCamera />
                                 </button>
                             </div>
                         </div>

package/src/components/MyInput/MyInput.jsx

@@ -1,7 +1,7 @@
 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',
@@ -72,7 +72,6 @@ function MyInput({
     onMouseLeave = null,
     onRemoveImage = null
 }) {
-    const { t } = useTranslation();
 
     const myInputId = `key${Date.now() + Math.random().toString(36).substr(2, 9)}`;
 
@@ -746,7 +745,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}
@@ -841,7 +840,7 @@ function MyInput({
                         onClick={() => fileInputRef.current.click()}
                         className={styles.filebutton}
                     >
-                        {type === MyInputType.IMAGE ? t("Görsel Seç") : t("Dosya Seç")}
+                        {type === MyInputType.IMAGE ? <PiImage /> : <MdOutlineAttachFile />}
                     </button>
 
                     <input

package/src/components/MyTable/MyTable.jsx

@@ -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;
@@ -36,7 +35,6 @@ function MyTable({
     onRowClick = null,
     onPageChange = null,
 }) {
-    const { t } = useTranslation();
 
     const tableid = `key${Date.now() + Math.random().toString(36).substr(2, 9)}`;
 
@@ -135,7 +133,8 @@ function MyTable({
 
     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 () => { };
@@ -359,7 +358,8 @@ function MyTable({
                 <div className={styles.searchContainer}>
                     <input
                         type="text"
-                        placeholder={t("Ara")}
+                        // placeholder={t("Ara")}
+                        placeholder="Search"
                         value={searchTerm}
                         className={styles.searchInput}
                         onChange={(e) => setSearchTerm(e.target.value)}
@@ -436,9 +436,10 @@ function MyTable({
                                         {(searchTerm != "" && (
                                             <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>`,
                                                 }}
                                             ></span>
                                         )) ||