px-react-ui-components 1.0.0

package/dist/components/MyTable/MyTable.js

@@ -0,0 +1,310 @@
+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));
+};
+export const CountBlock = ({
+  count
+}) => {
+  const {
+    t
+  } = useTranslation();
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.rowsCount
+  }, /*#__PURE__*/React.createElement("span", null, count), /*#__PURE__*/React.createElement("small", null, t("kayıt listelendi")));
+};
+function MyTable({
+  columns = [],
+  //
+  data = null,
+  emptyText = "",
+  children,
+  height = null,
+  totalCount = null,
+  onSearchText = null,
+  searchable = false,
+  showCount = false,
+  pageSize = 0,
+  selectedRow = null,
+  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);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [filteredRows, setFilteredRows] = useState([]);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(0);
+  const [sortConfig, setSortConfig] = useState({
+    key: null,
+    direction: "asc"
+  });
+  const [displayData, setDisplayData] = useState([]);
+  const arrChild = React.Children.toArray(children);
+  let childHeader = null;
+  let childBody = null;
+  if (arrChild.length > 0) {
+    for (let i = 0; i < arrChild.length; i++) {
+      const el = arrChild[i];
+      if (el.type.toString().includes("MyTableTagHead")) {
+        childHeader = el;
+      } else if (el.type.toString().includes("MyTableTagBody")) {
+        childBody = el;
+      } else if (childBody == null) {
+        childBody = el;
+      }
+    }
+  }
+
+  // Veri işleme ve sıralama
+  useEffect(() => {
+    let processedData = Array.isArray(data) ? [...data] : [];
+
+    // Arama işlemi
+    if (searchTerm != "") {
+      processedData = processedData.filter(record => {
+        let _status = false;
+        Object.keys(record).forEach(key => {
+          if (record[key] && record[key].toString().toLocaleLowerCase().includes(searchTerm.toLocaleLowerCase())) {
+            _status = true;
+          }
+        });
+        return _status;
+      });
+    }
+    setTotalPages(Math.ceil(processedData.length / pageSize));
+
+    // Sıralama işlemi
+    if (sortConfig.key) {
+      processedData.sort((a, b) => {
+        const aValue = a[sortConfig.key];
+        const bValue = b[sortConfig.key];
+        if (MyTableIsNumeric(aValue) && MyTableIsNumeric(bValue)) {
+          return sortConfig.direction === "asc" ? Number(aValue) - Number(bValue) : Number(bValue) - Number(aValue);
+        }
+        return sortConfig.direction === "asc" ? String(aValue).localeCompare(String(bValue)) : String(bValue).localeCompare(String(aValue));
+      });
+    }
+
+    // Sayfalama
+    if (pageSize > 0) {
+      const startIndex = (currentPage - 1) * pageSize;
+      processedData = processedData.slice(startIndex, startIndex + pageSize);
+    }
+    setDisplayData(processedData);
+    if (data) {
+      setCurTotalCount(data.length);
+    } else {
+      setCurTotalCount(0);
+    }
+  }, [data, searchTerm, sortConfig, currentPage, pageSize]);
+  useEffect(() => {
+    if (emptyText == "") {
+      setCurEmptyText(t("Henüz bir kayıt mevcut değil!"));
+    }
+    return () => {};
+  }, [tableid]);
+
+  // Arama işlevi
+  const filterRows = row => {
+    if (!searchTerm) return true;
+    const cells = row.props.children;
+    return React.Children.toArray(cells).some(cell => {
+      const cellText = cell.props.children ? cell.props.children.toString().trim().toLocaleLowerCase() : "";
+      const cleanCellText = cellText.replace(/[^a-zA-Z0-9\s]/g, ""); // Virgül ve diğer özel karakterleri temizle
+      const cleanSearchTerm = searchTerm.replace(/[^a-zA-Z0-9\s]/g, "").toLocaleLowerCase(); // Aynı şekilde arama terimini temizle
+
+      return cleanCellText.includes(cleanSearchTerm);
+    });
+  };
+
+  // Sıralama işleyicisi
+  const handleSort = key => {
+    setSortConfig(prevSort => ({
+      key,
+      direction: prevSort.key === key && prevSort.direction === "asc" ? "desc" : "asc"
+    }));
+  };
+
+  // Sütun başlığı render fonksiyonu
+  const renderColumnHeader = column => {
+    const isSorted = sortConfig.key === column.key;
+    const sortDirection = isSorted ? sortConfig.direction : null;
+    let style = {};
+    if (column.style) style = {
+      ...style,
+      ...column.style
+    };
+    if (column.width) style = {
+      ...style,
+      width: column.width
+    };
+
+    //style = { ...style, minWidth: column.width || "150px" };
+
+    return /*#__PURE__*/React.createElement("th", {
+      key: "head" + column.key + btoa(Math.random().toString(36).substr(2, 9)),
+      onClick: column.sortable ? () => handleSort(column.key) : undefined,
+      className: `
+                        ${styles.th}
+                        ${column.className && column.className || ""}
+                        ${column.sortable ? styles.sortable : ""}
+                        ${isSorted ? styles[`sort-${sortDirection}`] : ""}
+                        `,
+      style: style
+    }, column.title);
+  };
+
+  // Hücre render fonksiyonu
+  const renderCell = (item, column, index) => {
+    const value = item[column.key];
+    const content = column.render ? column.render(value, item, index, currentPage) : value;
+    const key = "cell" + column.key + btoa(Math.random().toString(36).substr(2, 9));
+
+    // If the content is already a React element (like from a render function that returns MathJax),
+    // just return it directly in the cell
+    if (/*#__PURE__*/React.isValidElement(content)) {
+      return /*#__PURE__*/React.createElement("td", {
+        key: key,
+        style: column.tdStyle,
+        className: `${styles.td} ${column.tdClassName && column.tdClassName || ""}`,
+        "data-row-index": index
+      }, content);
+    }
+    return /*#__PURE__*/React.createElement("td", {
+      key: key,
+      style: column.tdStyle,
+      className: `${styles.td} ${column.tdClassName && column.tdClassName || ""}`,
+      "data-row-index": index
+    }, typeof content === 'string' ? /*#__PURE__*/React.createElement("span", {
+      dangerouslySetInnerHTML: {
+        __html: content
+      }
+    }) : content);
+  };
+
+  // Filtrelenen satırları güncelle
+  useEffect(() => {
+    if (onSearchText == null) {
+      if (childBody) {
+        const rows = React.Children.toArray(childBody.props.children);
+        const filtered = rows.filter(row => filterRows(row));
+        setFilteredRows(filtered);
+      }
+    } else {
+      onSearchText(searchTerm);
+    }
+  }, [searchTerm, children]);
+
+  // Sayfa değiştirme işleyicisi
+  const handlePageChange = page => {
+    setCurrentPage(page);
+  };
+  // Sayfalama render fonksiyonu
+  const renderPagination = () => {
+    if (pageSize == 0 || totalPages <= 1) return null;
+    const maxVisiblePages = 10;
+    let pagesToShow = [];
+    if (totalPages <= maxVisiblePages) {
+      // Toplam sayfa sayısı 10 veya daha az ise hepsini göster
+      pagesToShow = Array.from({
+        length: totalPages
+      }, (_, i) => i + 1);
+    } else {
+      // Her zaman ilk ve son sayfayı göster
+      // Aktif sayfanın etrafında dengeli dağılım yap
+      const sidePages = 4; // Aktif sayfanın her iki yanında kaç sayfa gösterileceği
+
+      if (currentPage <= sidePages + 1) {
+        // Başlangıçtayız
+        pagesToShow = [...Array(maxVisiblePages - 1).keys()].map(i => i + 1);
+        pagesToShow.push(totalPages);
+      } else if (currentPage >= totalPages - sidePages) {
+        // Sondayız
+        pagesToShow = [1];
+        pagesToShow.push(...Array.from({
+          length: maxVisiblePages - 1
+        }, (_, i) => totalPages - (maxVisiblePages - 2) + i));
+      } else {
+        // Ortadayız
+        pagesToShow = [1];
+        const start = currentPage - Math.floor((maxVisiblePages - 4) / 2);
+        const end = currentPage + Math.floor((maxVisiblePages - 4) / 2);
+        pagesToShow.push(...Array.from({
+          length: end - start + 1
+        }, (_, i) => start + i));
+        pagesToShow.push(totalPages);
+      }
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles.pagination
+    }, /*#__PURE__*/React.createElement("button", {
+      onClick: () => handlePageChange(currentPage - 1),
+      disabled: currentPage === 1,
+      className: styles.pageButton
+    }, "<"), pagesToShow.map((page, index) => /*#__PURE__*/React.createElement(React.Fragment, {
+      key: page
+    }, index > 0 && pagesToShow[index] - pagesToShow[index - 1] > 1 && /*#__PURE__*/React.createElement("span", {
+      className: styles.pageEllipsis
+    }, "..."), /*#__PURE__*/React.createElement("button", {
+      onClick: () => handlePageChange(page),
+      className: `${styles.pageButton} ${currentPage === page ? styles.activePage : ""}`
+    }, page))), /*#__PURE__*/React.createElement("button", {
+      onClick: () => handlePageChange(currentPage + 1),
+      disabled: currentPage === totalPages,
+      className: styles.pageButton
+    }, ">"));
+  };
+  const headerCellsCount = columns.filter(column => column.title).length > 0 ? columns.filter(column => column.title).length : childBody ? React.Children.count(childBody.props.children.props.children) : 0;
+  return /*#__PURE__*/React.createElement("div", {
+    id: tableid,
+    className: `${styles.myTableContainer} ${searchable && styles.searchable} ${totalPages > 0 && styles.myTablePagination}`,
+    style: {
+      height: height
+    }
+  }, searchable && /*#__PURE__*/React.createElement("div", {
+    className: styles.searchContainer
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    placeholder: t("Ara"),
+    value: searchTerm,
+    className: styles.searchInput,
+    onChange: e => setSearchTerm(e.target.value)
+  }), /*#__PURE__*/React.createElement(CountBlock, {
+    count: curTotalCount && curTotalCount || childBody && childBody.props.children.length || 0
+  })) || showCount && /*#__PURE__*/React.createElement(CountBlock, {
+    count: curTotalCount && curTotalCount || childBody && childBody.props.children.length || 0
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles.myTable
+  }, /*#__PURE__*/React.createElement("table", {
+    className: styles.table
+  }, columns.filter(column => column.title).length > 0 ? /*#__PURE__*/React.createElement("thead", {
+    className: styles.thead
+  }, /*#__PURE__*/React.createElement("tr", {
+    className: styles.tr
+  }, columns.filter(column => column.title).map(renderColumnHeader))) : childHeader, /*#__PURE__*/React.createElement("tbody", null, onSearchText && childBody && childBody.props.children.length > 0 && childBody.props.children || filteredRows && filteredRows.length > 0 && filteredRows || displayData.length > 0 && displayData.map((item, index) => /*#__PURE__*/React.createElement("tr", {
+    key: index,
+    onClick: () => onRowClick && onRowClick(item),
+    className: `
+                    ${styles.tr}
+                    ${onRowClick ? styles.clickable : ""}
+                    ${selectedRow === item ? styles.selected : ""}
+                  `
+  }, columns.filter(column => column.title).map(column => renderCell(item, column, index)), children && /*#__PURE__*/React.createElement("td", null, typeof children === "function" ? children(item) : children))) || /*#__PURE__*/React.createElement("tr", {
+    className: styles.noData + " " + styles.tr
+  }, /*#__PURE__*/React.createElement("td", {
+    colSpan: headerCellsCount,
+    className: styles.td
+  }, searchTerm != "" && /*#__PURE__*/React.createElement("span", {
+    dangerouslySetInnerHTML: {
+      __html: `${t("Aradığınız kriterlere uygun kayıt bulunamadı!")}<br/><b>(${searchTerm})</b>`
+    }
+  }) || curEmptyText))))), totalPages > 0 && renderPagination());
+}
+export default MyTable;

package/dist/components/MyTable/MyTable.module.css

@@ -0,0 +1,350 @@
+.myTableContainer {
+  position: relative;
+  background: #fbfbfd;
+  border: 1px solid #dadada;
+  border-radius: 8px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.myTableContainer::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.myTableContainer::-webkit-scrollbar-track {
+  background: #e0e0e0;
+  border-radius: 10px;
+}
+
+.myTableContainer::-webkit-scrollbar-thumb {
+  background-color: #888;
+  border-radius: 10px;
+  border: 2px solid #e0e0e0;
+}
+
+.myTableContainer::-webkit-scrollbar-thumb:hover {
+  background-color: #555;
+}
+
+.rowsCount {
+  display: flex;
+  flex-direction: column;
+  justify-items: center;
+  align-items: end;
+  gap: 0px;
+  line-height: 0.8rem;
+  font-size: 13px;
+  font-weight: 300;
+}
+.rowsCount span{
+  font-weight: 500;
+}
+
+.searchContainer {
+  position: relative;
+  width: 100%;
+  flex-shrink: 0;
+}
+
+.searchContainer .rowsCount {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 2;
+  font-size: 13px;
+}
+
+.searchInput {
+  width: 100%;
+  padding: 8px 10px 5px 10px;
+  margin-bottom: 1px;
+  border-radius: 8px 8px 0 0;
+  outline: none;
+  background: #f5f6f7;
+}
+
+.searchable .myTable {
+  border-radius: 0 0 8px 8px;
+}
+
+.myTable {
+  width: 100%;
+  height: 100% ;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: thin;
+}
+
+.myTablePagination {
+  height: calc(100% - 50px);
+  height: 50px;
+}
+
+.table {
+  width: 100%;
+  min-width: 300px;
+  table-layout: auto;
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
+.thead {
+  position: sticky;
+  top: 0;
+  background-color: #dce3eb;
+  box-shadow: 0 2px 6px rgba(97, 98, 100, 0.301);
+  /* #dce3eb */
+  z-index: 1;
+}
+
+.th {
+  background-color: #dce3eb;
+  padding: 8px 4px;
+  font-weight: 500;
+  font-size: 13px;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border-right: 1px solid #bdc7d4 !important;
+}
+
+.th,
+.td {
+  border-collapse: collapse;
+  border-right: 1px solid #d0d6de;
+  border-bottom: 1px solid #d0d6de;
+}
+.th[data-width],
+.td[data-width] {
+  width: attr(data-width); /* data attribute ile genişlik belirleme */
+}
+
+.th:last-child,
+.td:last-child {
+  border-right: none;
+}
+
+.leftAlign {
+  text-align: left;
+}
+
+.tr {
+  background-color: #fff;
+}
+
+.tr:nth-child(2n + 1) {
+  background-color: #eff3f3;
+}
+
+.tr:hover {
+  cursor: default;
+  background-color: #d6eff0;
+}
+
+
+
+.td {
+  font-size: 13px;
+  font-weight: normal;
+  padding: 5px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-wrap: balance;
+}
+
+.tableBtn {
+  cursor: pointer;
+}
+
+.td button {
+  background-color: unset;
+  border: none;
+  border-radius: 8px;
+  color: #1d4736;
+  padding: 7px;
+  white-space: nowrap;
+}
+
+.td button:hover {
+  background-color: #0c696a;
+  color: #fff;
+}
+
+.noData {
+  background-color: unset !important;
+}
+
+.noData td {
+  text-align: center;
+  color: #888;
+  font-style: italic;
+  font-size: 15px;
+  padding: 50px 0;
+  border-bottom: none;
+}
+
+.paginationContainer {
+  height: 50px;
+  width: 100%;
+  background: #f0f2f3;
+  border-radius: 0 0 8px 8px;
+  flex-shrink: 0;
+}
+
+.pagination {
+  height: auto;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  background: #f0f2f3;
+  padding: 2px 10px;
+  box-shadow: 0 -1px 5px rgba(97, 98, 100, 0.301);
+}
+
+.pageButton {
+  min-width: 32px;
+  padding: 4px 8px;
+  border: 1px solid #dee2e6;
+  background: #f8f8f8;
+  color: #000;
+  cursor: pointer;
+  border-radius: 4px;
+  font-size: 13px;
+  font-weight: normal;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  touch-action: manipulation;
+}
+
+.pageButton:hover:not(:disabled) {
+  background-color: #e9ecef;
+}
+
+.pageButton:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.pageEllipsis {
+  padding: 0 5px;
+  color: #666;
+  align-self: center;
+}
+
+.activePage {
+  background-color: #0c696a;
+  color: white;
+}
+
+.activePage:hover {
+  background-color: #065052 !important;
+}
+
+.sortable {
+  cursor: pointer;
+  position: relative;
+  padding-right: 20px !important;
+}
+
+.sortable:after {
+  content: '↕';
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  opacity: 0.3;
+}
+
+.sort-asc:after {
+  content: '↑';
+  opacity: 1;
+}
+
+.sort-desc:after {
+  content: '↓';
+  opacity: 1;
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+.selected {
+  background-color: #b6d4d5 !important;
+}
+
+@media screen and (max-width: 1024px) {
+  .pageButton {
+    min-width: 28px;
+    min-height: 28px;
+    font-size: 12px;
+  }
+
+  .th, .td {
+    min-width: 40px !important;
+  }
+}
+
+/* Tablet ve mobil için doğal genişlik */
+@media screen and (max-width: 1023px) {
+  .th,
+  .td {
+    min-width: unset;
+    width: auto;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .searchInput {
+    font-size: 14px;
+    padding: 6px 8px 4px 8px;
+  }
+
+  .rowsCount {
+    font-size: 11px;
+  }
+
+  .pageButton {
+    min-width: 24px;
+    min-height: 24px;
+    padding: 2px 4px;
+    font-size: 11px;
+  }
+
+  .pagination {
+    padding: 2px 5px;
+    gap: 2px;
+  }
+
+  .pageEllipsis {
+    padding: 0 2px;
+  }
+
+  .th, .td {
+    min-width: 60px;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .searchInput {
+    font-size: 13px;
+    padding: 5px 6px 3px 6px;
+  }
+
+  .pageButton {
+    min-width: 22px;
+    min-height: 22px;
+    padding: 1px 3px;
+    font-size: 10px;
+  }
+}

package/dist/components/MyTable/MyTableBody.js

@@ -0,0 +1,9 @@
+import React from 'react';
+function MyTableBody({
+  children
+}) {
+  return /*#__PURE__*/React.createElement("tbody", {
+    className: "MyTableTagBody"
+  }, children);
+}
+export default MyTableBody;

package/dist/components/MyTable/MyTableHead.js

@@ -0,0 +1,9 @@
+import React from 'react';
+function MyTableHead({
+  children
+}) {
+  return /*#__PURE__*/React.createElement("thead", {
+    className: "MyTableTagHead"
+  }, children);
+}
+export default MyTableHead;

package/dist/components/MyTabs/MyTabPane.js

@@ -0,0 +1,17 @@
+import React, { useEffect, useState } from 'react';
+function MyTabPane({
+  children,
+  label = null,
+  title = null,
+  description = null,
+  badge = null,
+  name = null,
+  icon = null,
+  className = null,
+  style = null,
+  tabClassName = null,
+  tabStyle = null
+}) {
+  return /*#__PURE__*/React.createElement("div", null, children);
+}
+export default MyTabPane;