px-react-ui-components 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/components/MyFileUpload/MyFileUpload.js +16 -17
  2. package/dist/components/MyInput/MyInput.js +4 -7
  3. package/dist/components/MyTable/MyTable.js +9 -8
  4. package/package.json +1 -1
  5. package/src/components/MyFileUpload/MyFileUpload.jsx +16 -18
  6. package/src/components/MyInput/MyInput.jsx +4 -5
  7. package/src/components/MyTable/MyTable.jsx +8 -7
package/dist/components/MyFileUpload/MyFileUpload.js CHANGED
@@ -3,11 +3,11 @@ import { PiCamera, PiFileArrowUpLight } from "react-icons/pi";
3
3
  import Resizer from "react-image-file-resizer";
4
4
  import Camera, { FACING_MODES, IMAGE_TYPES } from "react-html5-camera-photo";
5
5
  import "react-html5-camera-photo/build/css/index.css";
6
- import { useTranslation } from "../../context/TranslationContext";
7
6
  import MyWaiting from "../MyWaiting/MyWaiting";
8
7
  import { MyAlert, MyAlertType } from "../MyAlert/MyAlert";
9
8
  import styles from "./MyFileUpload.module.css";
10
9
  import MyModal from "../MyModal/MyModal";
10
+ import { MdOutlineAttachFile } from "react-icons/md";
11
11
  export const AcceptType = {
12
12
  ALL: "all",
13
13
  FILE: "file",
@@ -25,9 +25,6 @@ export default function MyFileUpload({
25
25
  maxSizeMB = 50,
26
26
  onData
27
27
  }) {
28
- const {
29
- t
30
- } = useTranslation();
31
28
  const [loading, setLoading] = useState(false);
32
29
  const [accepttypes, setAccepttypes] = useState(AcceptType.ALL);
33
30
  const [acceptlabel, setAcceptlabel] = useState(AcceptType.ALL);
@@ -43,27 +40,27 @@ export default function MyFileUpload({
43
40
  switch (accept) {
44
41
  case AcceptType.ALL:
45
42
  setAccepttypes(type_files + "," + type_image + "," + type_media);
46
- setAcceptlabel("PNG, JPG, PDF, RAR, ZIP, MP3, MP4, AVI, WAV veya Word-Excel Dosyaları");
43
+ setAcceptlabel("PNG, JPG, PDF, RAR, ZIP, MP3, MP4, AVI, WAV, Word-Excel");
47
44
  break;
48
45
  case AcceptType.IMAGE:
49
46
  setAccepttypes(type_image);
50
- setAcceptlabel(t("PNG veya JPG Dosyaları"));
47
+ setAcceptlabel("PNG, JPG ");
51
48
  break;
52
49
  case AcceptType.MEDIA:
53
50
  setAccepttypes(type_media);
54
- setAcceptlabel(t("MP3, MP4, AVI veya WAV Dosyaları"));
51
+ setAcceptlabel("MP3, MP4, AVI, WAV");
55
52
  break;
56
53
  case AcceptType.FILE:
57
54
  setAccepttypes(type_files + "," + type_image);
58
- setAcceptlabel(t("PDF, RAR, ZIP, PNG, JPG veya Word-Excel Dosyaları"));
55
+ setAcceptlabel("PDF, RAR, ZIP, PNG, JPG, Word-Excel ");
59
56
  break;
60
57
  case AcceptType.PDF:
61
58
  setAccepttypes(".pdf");
62
- setAcceptlabel(t("PDF Dosyaları"));
59
+ setAcceptlabel("PDF");
63
60
  break;
64
61
  case AcceptType.IMAGEPDF:
65
62
  setAccepttypes(type_image + ",.pdf");
66
- setAcceptlabel(t("PNG, JPG veya PDF Dosyaları"));
63
+ setAcceptlabel("PNG, JPG, PDF");
67
64
  break;
68
65
  }
69
66
  navigator.mediaDevices.enumerateDevices().then(deviceInfos => {
@@ -79,7 +76,7 @@ export default function MyFileUpload({
79
76
  let message = _error.map((e, i) => {
80
77
  return i + 1 + ".) <b><i>" + e.filename + "</i></b><br/>---- " + e.message + "<br/>";
81
78
  });
82
- 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);
79
+ MyAlert("<br/><br/><div style='display: block;font-size:13px;width: 100%;text-align: left;'>" + message + "</div>", MyAlertType.WARNING);
83
80
  }
84
81
  if (onData && (Array.isArray(resdata) && resdata.length > 0 || !Array.isArray(resdata) && resdata)) onData(resdata);
85
82
  setLoading(false);
@@ -99,12 +96,14 @@ export default function MyFileUpload({
99
96
  if (filesize > maxSizeMB) {
100
97
  _error.push({
101
98
  filename: file.name,
102
- message: t("Boyutu Max. Dosya Boyutundan büyük olamaz!") + ` <b>${maxSizeMB}MB</b>`
99
+ // message: "Boyutu Max. Dosya Boyutundan büyük olamaz!" + ` <b>${maxSizeMB}MB</b>`,
100
+ message: "Size cannot be larger than Max. File Size!" + ` <b>${maxSizeMB}MB</b>`
103
101
  });
104
102
  } else {
105
103
  _error.push({
106
104
  filename: file.name,
107
- message: t("Dosya türü desteklenmiyor!") + ` <b>${file_ext}</b>`
105
+ // message: t("Dosya türü desteklenmiyor!") + ` <b>${file_ext}</b>`,
106
+ message: "File type not supported!" + ` <b>${file_ext}</b>`
108
107
  });
109
108
  }
110
109
  if (files.length == i + 1 && response_files.length == 0) {
@@ -223,7 +222,7 @@ export default function MyFileUpload({
223
222
  className: styles.Icon
224
223
  }), /*#__PURE__*/React.createElement("h2", {
225
224
  className: styles.myFileUploadContainerItemIconText
226
- }, acceptlabel, /*#__PURE__*/React.createElement("br", null), " ", t("En fazla"), " ", maxSizeMB, " MB")), /*#__PURE__*/React.createElement("div", {
225
+ }, acceptlabel, /*#__PURE__*/React.createElement("br", null), " ", maxSizeMB, " MB")), /*#__PURE__*/React.createElement("div", {
227
226
  className: styles.myFileUploadContainerItemFile
228
227
  }, /*#__PURE__*/React.createElement("input", {
229
228
  type: "file",
@@ -235,7 +234,7 @@ export default function MyFileUpload({
235
234
  }), /*#__PURE__*/React.createElement("div", {
236
235
  className: styles.myFileUploadButton,
237
236
  onClick: () => fileInputRef.current.click()
238
- }, t("Dosya Seç")))), camera && /*#__PURE__*/React.createElement("div", {
237
+ }, /*#__PURE__*/React.createElement(MdOutlineAttachFile, null)))), camera && /*#__PURE__*/React.createElement("div", {
239
238
  className: styles.myFileUploadContainerItem
240
239
  }, /*#__PURE__*/React.createElement("div", {
241
240
  className: styles.myFileUploadContainerItemIcon
@@ -243,13 +242,13 @@ export default function MyFileUpload({
243
242
  className: styles.Icon
244
243
  }), /*#__PURE__*/React.createElement("div", {
245
244
  className: styles.myFileUploadContainerItemIconText
246
- }, /*#__PURE__*/React.createElement("span", null, t("Kameradan fotoğraf çekebilirsin.")))), /*#__PURE__*/React.createElement("div", {
245
+ }, /*#__PURE__*/React.createElement("span", null, "You can take a photo from the camera."))), /*#__PURE__*/React.createElement("div", {
247
246
  className: styles.myFileUploadContainerItemFile
248
247
  }, /*#__PURE__*/React.createElement("button", {
249
248
  type: "button",
250
249
  className: styles.myFileUploadButton,
251
250
  onClick: () => setCameraopen(true)
252
- }, t("Fotoğraf Çek")))))), /*#__PURE__*/React.createElement(MyModal, {
251
+ }, /*#__PURE__*/React.createElement(PiCamera, null)))))), /*#__PURE__*/React.createElement(MyModal, {
253
252
  show: cameraopen,
254
253
  onClose: () => setCameraopen(false),
255
254
  title: t("Fotoğraf Çek"),
package/dist/components/MyInput/MyInput.js CHANGED
@@ -1,8 +1,8 @@
1
1
  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); }
2
2
  import React, { useEffect, useRef, useState } from "react";
3
3
  import styles from "./MyInput.module.css";
4
- import { PiCaretDownBold, PiEye, PiEyeSlash } from "react-icons/pi";
5
- import { useTranslation } from "../../context/TranslationContext";
4
+ import { PiCaretDownBold, PiEye, PiEyeSlash, PiImage } from "react-icons/pi";
5
+ import { MdOutlineAttachFile } from "react-icons/md";
6
6
  export const MyInputType = Object.freeze({
7
7
  TEXT: 'text',
8
8
  PASSWORD: 'password',
@@ -66,9 +66,6 @@ function MyInput({
66
66
  onMouseLeave = null,
67
67
  onRemoveImage = null
68
68
  }) {
69
- const {
70
- t
71
- } = useTranslation();
72
69
  const myInputId = `key${Date.now() + Math.random().toString(36).substr(2, 9)}`;
73
70
  const fileInputRef = useRef(null);
74
71
  const [loaded, setLoaded] = useState(false);
@@ -625,7 +622,7 @@ function MyInput({
625
622
  style: style,
626
623
  value: filtertext,
627
624
  onChange: e => setFiltertext(e.target.value),
628
- placeholder: placeholdersearchtext && placeholdersearchtext != "" ? placeholdersearchtext : (placeholder ? placeholder : myTitleLite) + " " + t("Ara"),
625
+ placeholder: placeholdersearchtext && placeholdersearchtext != "" ? placeholdersearchtext : (placeholder ? placeholder : myTitleLite) + " ...",
629
626
  onBlur: onMyBlur,
630
627
  onFocus: onMyFocus,
631
628
  onKeyDown: onMyKeyDown,
@@ -720,7 +717,7 @@ function MyInput({
720
717
  type: "button",
721
718
  onClick: () => fileInputRef.current.click(),
722
719
  className: styles.filebutton
723
- }, type === MyInputType.IMAGE ? t("Görsel Seç") : t("Dosya Seç")), /*#__PURE__*/React.createElement("input", _extends({
720
+ }, type === MyInputType.IMAGE ? /*#__PURE__*/React.createElement(PiImage, null) : /*#__PURE__*/React.createElement(MdOutlineAttachFile, null)), /*#__PURE__*/React.createElement("input", _extends({
724
721
  type: "file",
725
722
  ref: fileInputRef,
726
723
  onChange: e => onMyChange(e),
package/dist/components/MyTable/MyTable.js CHANGED
@@ -1,6 +1,5 @@
1
1
  import React, { useEffect, useState } from "react";
2
2
  import styles from "./MyTable.module.css";
3
- import { useTranslation } from "../../context/TranslationContext";
4
3
  export const MyTableIsNumeric = value => {
5
4
  if (value === null || value === undefined || value === "") return false;
6
5
  return !isNaN(value) && !isNaN(parseFloat(value));
@@ -31,9 +30,6 @@ function MyTable({
31
30
  onRowClick = null,
32
31
  onPageChange = null
33
32
  }) {
34
- const {
35
- t
36
- } = useTranslation();
37
33
  const tableid = `key${Date.now() + Math.random().toString(36).substr(2, 9)}`;
38
34
  const [curEmptyText, setCurEmptyText] = useState(emptyText);
39
35
  const [curTotalCount, setCurTotalCount] = useState(data ? data.length : totalCount);
@@ -106,7 +102,8 @@ function MyTable({
106
102
  }, [data, searchTerm, sortConfig, currentPage, pageSize]);
107
103
  useEffect(() => {
108
104
  if (emptyText == "") {
109
- setCurEmptyText(t("Henüz bir kayıt mevcut değil!"));
105
+ // setCurEmptyText(t("Henüz bir kayıt mevcut değil!"));
106
+ setCurEmptyText("No records found!");
110
107
  }
111
108
  return () => {};
112
109
  }, [tableid]);
@@ -271,8 +268,10 @@ function MyTable({
271
268
  }, searchable && /*#__PURE__*/React.createElement("div", {
272
269
  className: styles.searchContainer
273
270
  }, /*#__PURE__*/React.createElement("input", {
274
- type: "text",
275
- placeholder: t("Ara"),
271
+ type: "text"
272
+ // placeholder={t("Ara")}
273
+ ,
274
+ placeholder: "Search",
276
275
  value: searchTerm,
277
276
  className: styles.searchInput,
278
277
  onChange: e => setSearchTerm(e.target.value)
@@ -303,7 +302,9 @@ function MyTable({
303
302
  className: styles.td
304
303
  }, searchTerm != "" && /*#__PURE__*/React.createElement("span", {
305
304
  dangerouslySetInnerHTML: {
306
- __html: `${t("Aradığınız kriterlere uygun kayıt bulunamadı!")}<br/><b>(${searchTerm})</b>`
305
+ __html: `${
306
+ // t("Aradığınız kriterlere uygun kayıt bulunamadı!")
307
+ "No records found for the criteria you searched for!"}<br/><b>(${searchTerm})</b>`
307
308
  }
308
309
  }) || curEmptyText))))), totalPages > 0 && renderPagination());
309
310
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "px-react-ui-components",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "main": "dist/index.js",
5
5
  "scripts": {
6
6
  "build": "babel src --out-dir dist --copy-files"
package/src/components/MyFileUpload/MyFileUpload.jsx CHANGED
@@ -3,11 +3,11 @@ import { PiCamera, PiFileArrowUpLight } from "react-icons/pi";
3
3
  import Resizer from "react-image-file-resizer";
4
4
  import Camera, { FACING_MODES, IMAGE_TYPES } from "react-html5-camera-photo";
5
5
  import "react-html5-camera-photo/build/css/index.css";
6
- import { useTranslation } from "../../context/TranslationContext";
7
6
  import MyWaiting from "../MyWaiting/MyWaiting";
8
7
  import { MyAlert, MyAlertType } from "../MyAlert/MyAlert";
9
8
  import styles from "./MyFileUpload.module.css"
10
9
  import MyModal from "../MyModal/MyModal";
10
+ import { MdOutlineAttachFile } from "react-icons/md";
11
11
 
12
12
  export const AcceptType = {
13
13
  ALL: "all",
@@ -28,7 +28,6 @@ export default function MyFileUpload({
28
28
  maxSizeMB = 50,
29
29
  onData,
30
30
  }) {
31
- const { t } = useTranslation();
32
31
 
33
32
  const [loading, setLoading] = useState(false);
34
33
  const [accepttypes, setAccepttypes] = useState(AcceptType.ALL);
@@ -50,31 +49,28 @@ export default function MyFileUpload({
50
49
  setAccepttypes(
51
50
  type_files + "," + type_image + "," + type_media
52
51
  );
53
- setAcceptlabel(
54
- "PNG, JPG, PDF, RAR, ZIP, MP3, MP4, AVI, WAV veya Word-Excel Dosyaları"
55
- );
52
+ setAcceptlabel("PNG, JPG, PDF, RAR, ZIP, MP3, MP4, AVI, WAV, Word-Excel");
56
53
  break;
57
54
  case AcceptType.IMAGE:
58
55
  setAccepttypes(type_image);
59
- setAcceptlabel(t("PNG veya JPG Dosyaları"));
56
+ setAcceptlabel("PNG, JPG ");
60
57
  break;
61
58
  case AcceptType.MEDIA:
62
59
  setAccepttypes(type_media);
63
- setAcceptlabel(t("MP3, MP4, AVI veya WAV Dosyaları"));
60
+ setAcceptlabel("MP3, MP4, AVI, WAV");
64
61
  break;
65
62
  case AcceptType.FILE:
66
63
  setAccepttypes(type_files + "," + type_image);
67
- setAcceptlabel(
68
- t("PDF, RAR, ZIP, PNG, JPG veya Word-Excel Dosyaları")
64
+ setAcceptlabel("PDF, RAR, ZIP, PNG, JPG, Word-Excel "
69
65
  );
70
66
  break;
71
67
  case AcceptType.PDF:
72
68
  setAccepttypes(".pdf");
73
- setAcceptlabel(t("PDF Dosyaları"));
69
+ setAcceptlabel("PDF");
74
70
  break;
75
71
  case AcceptType.IMAGEPDF:
76
72
  setAccepttypes(type_image + ",.pdf");
77
- setAcceptlabel(t("PNG, JPG veya PDF Dosyaları"));
73
+ setAcceptlabel("PNG, JPG, PDF");
78
74
  break;
79
75
  }
80
76
 
@@ -104,7 +100,6 @@ export default function MyFileUpload({
104
100
  });
105
101
 
106
102
  MyAlert(
107
- t("Aşağıdaki dosyalar eklenemedi!") +
108
103
  "<br/><br/><div style='display: block;font-size:13px;width: 100%;text-align: left;'>" +
109
104
  message +
110
105
  "</div>",
@@ -140,12 +135,14 @@ export default function MyFileUpload({
140
135
  if (filesize > maxSizeMB) {
141
136
  _error.push({
142
137
  filename: file.name,
143
- message: t("Boyutu Max. Dosya Boyutundan büyük olamaz!") + ` <b>${maxSizeMB}MB</b>`,
138
+ // message: "Boyutu Max. Dosya Boyutundan büyük olamaz!" + ` <b>${maxSizeMB}MB</b>`,
139
+ message: "Size cannot be larger than Max. File Size!" + ` <b>${maxSizeMB}MB</b>`,
144
140
  });
145
141
  } else {
146
142
  _error.push({
147
143
  filename: file.name,
148
- message: t("Dosya türü desteklenmiyor!") + ` <b>${file_ext}</b>`,
144
+ // message: t("Dosya türü desteklenmiyor!") + ` <b>${file_ext}</b>`,
145
+ message: "File type not supported!" + ` <b>${file_ext}</b>`,
149
146
  });
150
147
  }
151
148
 
@@ -294,7 +291,7 @@ export default function MyFileUpload({
294
291
  <PiFileArrowUpLight className={styles.Icon} />
295
292
  <h2 className={styles.myFileUploadContainerItemIconText}>
296
293
  {acceptlabel}
297
- <br /> {t("En fazla")} {maxSizeMB} MB
294
+ <br /> {maxSizeMB} MB
298
295
  </h2>
299
296
  </div>
300
297
  <div className={styles.myFileUploadContainerItemFile}>
@@ -310,7 +307,7 @@ export default function MyFileUpload({
310
307
  className={styles.myFileUploadButton}
311
308
  onClick={() => fileInputRef.current.click()}
312
309
  >
313
- {t("Dosya Seç")}
310
+ <MdOutlineAttachFile />
314
311
  </div>
315
312
  </div>
316
313
  </div>
@@ -320,7 +317,8 @@ export default function MyFileUpload({
320
317
  <PiCamera className={styles.Icon} />
321
318
  <div className={styles.myFileUploadContainerItemIconText}>
322
319
  <span>
323
- {t("Kameradan fotoğraf çekebilirsin.")}
320
+ {/* {t("Kameradan fotoğraf çekebilirsin.")} */}
321
+ You can take a photo from the camera.
324
322
  </span>
325
323
  </div>
326
324
  </div>
@@ -330,7 +328,7 @@ export default function MyFileUpload({
330
328
  className={styles.myFileUploadButton}
331
329
  onClick={() => setCameraopen(true)}
332
330
  >
333
- {t("Fotoğraf Çek")}
331
+ <PiCamera />
334
332
  </button>
335
333
  </div>
336
334
  </div>
package/src/components/MyInput/MyInput.jsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import React, { useEffect, useRef, useState } from "react";
2
2
  import styles from "./MyInput.module.css"
3
- import { PiCaretDownBold, PiEye, PiEyeSlash } from "react-icons/pi";
4
- import { useTranslation } from "../../context/TranslationContext";
3
+ import { PiCaretDownBold, PiEye, PiEyeSlash, PiImage } from "react-icons/pi";
4
+ import { MdOutlineAttachFile } from "react-icons/md";
5
5
 
6
6
  export const MyInputType = Object.freeze({
7
7
  TEXT: 'text',
@@ -72,7 +72,6 @@ function MyInput({
72
72
  onMouseLeave = null,
73
73
  onRemoveImage = null
74
74
  }) {
75
- const { t } = useTranslation();
76
75
 
77
76
  const myInputId = `key${Date.now() + Math.random().toString(36).substr(2, 9)}`;
78
77
 
@@ -746,7 +745,7 @@ function MyInput({
746
745
  style={style}
747
746
  value={filtertext}
748
747
  onChange={(e) => setFiltertext(e.target.value)}
749
- placeholder={placeholdersearchtext && placeholdersearchtext != "" ? placeholdersearchtext : (placeholder ? placeholder : myTitleLite) + " " + t("Ara")}
748
+ placeholder={placeholdersearchtext && placeholdersearchtext != "" ? placeholdersearchtext : (placeholder ? placeholder : myTitleLite) + " ..."}
750
749
  onBlur={onMyBlur}
751
750
  onFocus={onMyFocus}
752
751
  onKeyDown={onMyKeyDown}
@@ -841,7 +840,7 @@ function MyInput({
841
840
  onClick={() => fileInputRef.current.click()}
842
841
  className={styles.filebutton}
843
842
  >
844
- {type === MyInputType.IMAGE ? t("Görsel Seç") : t("Dosya Seç")}
843
+ {type === MyInputType.IMAGE ? <PiImage /> : <MdOutlineAttachFile />}
845
844
  </button>
846
845
 
847
846
  <input
package/src/components/MyTable/MyTable.jsx CHANGED
@@ -1,6 +1,5 @@
1
1
  import React, { useEffect, useState } from "react";
2
2
  import styles from "./MyTable.module.css";
3
- import { useTranslation } from "../../context/TranslationContext";
4
3
 
5
4
  export const MyTableIsNumeric = (value) => {
6
5
  if (value === null || value === undefined || value === "") return false;
@@ -36,7 +35,6 @@ function MyTable({
36
35
  onRowClick = null,
37
36
  onPageChange = null,
38
37
  }) {
39
- const { t } = useTranslation();
40
38
 
41
39
  const tableid = `key${Date.now() + Math.random().toString(36).substr(2, 9)}`;
42
40
 
@@ -135,7 +133,8 @@ function MyTable({
135
133
 
136
134
  useEffect(() => {
137
135
  if (emptyText == "") {
138
- setCurEmptyText(t("Henüz bir kayıt mevcut değil!"));
136
+ // setCurEmptyText(t("Henüz bir kayıt mevcut değil!"));
137
+ setCurEmptyText("No records found!");
139
138
  }
140
139
 
141
140
  return () => { };
@@ -359,7 +358,8 @@ function MyTable({
359
358
  <div className={styles.searchContainer}>
360
359
  <input
361
360
  type="text"
362
- placeholder={t("Ara")}
361
+ // placeholder={t("Ara")}
362
+ placeholder="Search"
363
363
  value={searchTerm}
364
364
  className={styles.searchInput}
365
365
  onChange={(e) => setSearchTerm(e.target.value)}
@@ -436,9 +436,10 @@ function MyTable({
436
436
  {(searchTerm != "" && (
437
437
  <span
438
438
  dangerouslySetInnerHTML={{
439
- __html: `${t(
440
- "Aradığınız kriterlere uygun kayıt bulunamadı!"
441
- )}<br/><b>(${searchTerm})</b>`,
439
+ __html: `${
440
+ // t("Aradığınız kriterlere uygun kayıt bulunamadı!")
441
+ "No records found for the criteria you searched for!"
442
+ }<br/><b>(${searchTerm})</b>`,
442
443
  }}
443
444
  ></span>
444
445
  )) ||