px-react-ui-components 1.0.1 → 1.0.2

package/src/components/MyTable/MyTable.module.css

@@ -1,350 +0,0 @@
-.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

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

package/src/components/MyTable/MyTableHead.jsx

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

package/src/components/MyTabs/MyTabPane.jsx

@@ -1,9 +0,0 @@
-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

@@ -1,105 +0,0 @@
-.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

@@ -1,63 +0,0 @@
-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

@@ -1,28 +0,0 @@
-.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

@@ -1,27 +0,0 @@
-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>
-    );
-}