px-react-ui-components 1.0.0

package/src/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/src/components/MyTable/MyTableBody.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+function MyTableBody({ children }) {
+  return (
+    <tbody className="MyTableTagBody">{children}</tbody>
+  )
+}
+export default MyTableBody

package/src/components/MyTable/MyTableHead.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+function MyTableHead({ children }) {
+  return (
+    <thead className="MyTableTagHead">
+    {children}
+    </thead>
+  )
+}
+export default MyTableHead

package/src/components/MyTabs/MyTabPane.jsx

@@ -0,0 +1,9 @@
+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 <div>
+    {children}
+  </div>
+}
+
+export default MyTabPane;

package/src/components/MyTabs/MyTabs.css

@@ -0,0 +1,105 @@
+.my-TabsContainer {
+    display: flex;
+    width: 100%;
+    gap: 0px;
+    flex-direction: column;
+}
+
+.my-TabsTabList {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    list-style: none;
+    padding: 0 0 0 7px;
+    margin: 0px;
+}
+
+.my-TabsTabList li {
+    display: flex;
+    flex-direction: row;
+    padding: 8px 17px;
+    min-width: 100px;
+    text-align: center;
+    background: #f5f5f5;
+    margin-right: 1px;
+    font-size: 13px;
+    border-radius: 8px 8px 0 0;
+    gap: 0.5rem;
+    justify-content: center;
+    align-items: center;
+    -webkit-user-select: none; /* Safari */
+    -ms-user-select: none; /* IE 10 and IE 11 */
+    user-select: none; /* Standard syntax */
+    border: 1px solid #dfe3e6;
+    border-bottom: none;
+}
+
+.my-TabsTabList li .icon {
+    font-size: 17px;
+    color: #8a9ba4;
+}
+
+.my-TabsTabList li .badge {
+    font-size: 9px;
+    color: #39464d;
+    background-color: #0000001f;
+    border-radius: 5px;
+    padding: 1px 5px 1px 5px;
+    margin-left: 5px;
+    margin-right: -8px;
+}
+
+.my-TabsTabList li .title {
+    font-size: 13px;
+    color: #000;
+
+}
+
+
+.my-TabsTabList li .description {
+    font-size: 11px;
+    color: #8a9ba4;
+}
+
+.my-TabsTabList li.active {
+    background: #b3d2e6;
+}
+.my-TabsTabList li.active .badge {
+    background-color: #2e465685;
+    color: #fff;
+}
+.my-TabsTabList li.active .title {
+    font-weight: 600;
+}
+.my-TabsTabList li.active .icon {
+    color: #000;
+}
+.my-TabsTabList li.active .description {
+    color: #435d6e;
+}
+
+.my-TabsTabList li:hover {
+    cursor: pointer;
+    background: #eeeeee;
+}
+.my-TabsTabList li.active:hover {
+    background: #c1ddf3;
+}
+
+.my-TabsTabBody {
+    display: inline-block;
+    width: 100%;
+    padding: 12px;
+    border: 1px solid #d9dee1;
+    border-radius: 8px;
+    border-top-width: 2px;
+    border-top-color: #b3d2e6;
+}
+.my-TabsTabBody .my-TabsTabContainer {
+    display: none;
+    width: 100%;
+}
+.my-TabsTabBody .my-TabsTabContainer.active {
+    display: inline-block;
+    width: 100%;
+}

package/src/components/MyTabs/MyTabs.jsx

@@ -0,0 +1,63 @@
+import React, { useEffect, useState } from 'react';
+import "./MyTabs.css";
+
+function MyTabs({ children, className = null, style = null, onChange = null, activePaneIndex = -1, activePaneName = null }) {
+  const [activei, setActivei] = useState(activePaneIndex > -1 ? activePaneIndex : 0);
+
+  const arrChild = React.Children.toArray(children);
+
+  useEffect(() => {
+    if (onChange) {
+      onChange({ index: activei, name: arrChild[activei].props.name, label: arrChild[activei].props.label && arrChild[activei].props.label || arrChild[activei].props.title })
+    }
+  }, [activei])
+
+  useEffect(() => {
+    if (activePaneName) {
+      const index = arrChild.findIndex(item => item.props.name === activePaneName);
+      if (index > -1) {
+        setActivei(index);
+      }
+    }
+  }, [activePaneName])
+
+  return <div className={"my-TabsContainer " + (className ? className : '')} style={style}>
+    <ul className="my-TabsTabList">
+      {
+        arrChild.map((item, i) => {
+          return <li
+            key={i}
+            className={(i == activei && 'active') + ' ' + (item.props.tabClassName ? item.props.tabClassName : '')}
+            style={item.props.tabStyle}
+            onClick={() => setActivei(i)}
+            title={item.props.title}
+          >
+            {item.props.icon != undefined && <div className="icon">{item.props.icon}</div>}
+
+            <div className="flex flex-col gap-0 text-start">
+              {item.props.label != undefined ? <span className="title">{item.props.label}</span> : <span className="title">{item.props.title}</span>}
+              {item.props.description != undefined && <div className="description">{item.props.description}</div>}
+            </div>
+
+            {item.props.badge != undefined && <div className="badge">{item.props.badge}</div>}
+          </li>
+        })
+      }
+    </ul>
+
+    <div className="my-TabsTabBody">
+      {
+        arrChild.map((item, i) => {
+          return <div
+            key={i}
+            className={"my-TabsTabContainer " + (i == activei && 'active') + ' ' + (item.props.className ? item.props.className : '')}
+            style={item.props.style}
+            onClick={() => setActivei(i)}
+          >{item.props.children}</div>
+        })
+      }
+    </div>
+
+  </div>
+}
+export default MyTabs;

package/src/components/MyWaiting/MyWaiting.css

@@ -0,0 +1,28 @@
+.my-waiting-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #282c39de;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999999;
+}
+
+.my-waiting-content{
+  display: block;
+  color : #fff;
+}
+
+.my-waiting-content > div{
+  justify-content: center;
+}
+
+
+.my-waiting-message{
+  display: block;
+  padding: 15px 0;
+  text-align: center;
+}

package/src/components/MyWaiting/MyWaiting.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { Oval } from "react-loader-spinner";
+
+import './MyWaiting.css'; // Modal için CSS dosyası
+
+export default function MyWaiting({ show = false, message = null }) {
+    if (!show) {
+        return null;
+    }
+
+    return (
+        <div className="my-waiting-backdrop">
+            <div className="my-waiting-content">
+                <Oval
+                    visible={true}
+                    height="60"
+                    width="60"
+                    color="#fff"
+                    secondaryColor="#cdcdcd"
+                    ariaLabel="oval-loading"
+                    strokeWidth={5}
+                />
+                {message && <span className="my-waiting-message">{message}</span>}
+            </div>
+        </div>
+    );
+}