px-react-ui-components 1.0.1 → 1.0.3

package/src/components/MyMenu/MyMenu.module.css

@@ -1,102 +0,0 @@
-.menuItem{
-  display: flex;
-  width: 100%;
-  flex-direction: row;
-  align-items: center;
-  gap: 15px;
-  padding: 10px 16px 10px 20px;
-  cursor: pointer;
-  border-bottom: 1px solid #0000001c;
-  font-weight: 300;
-  font-size: 14px;
-  color: #fff !important;
-  text-decoration: none !important;
-}
-.menuItem.selected{
-  background-color: #fff1c939 !important;
-}
-.menuItem:last-child{
-  border-bottom: none;
-}
-.menuItem:hover{
-  background-color: #00000039;
-}
-.menuItem .menuItemIcon{
-  font-size: 20px;
-}
-.menuItem .menuItemText{
-  display: block;
-  position: relative;
-  width: 100%;
-  padding-right: 35px;
-}
-.menuItem .menuItemText .menuItemBadge{
-  position: absolute;
-  right: 0px;
-  top: 50%;
-  padding: 0px 8px;
-  transform: translateY(-50%);
-  background-color: #0000003d;
-  color: #fff;
-  border-radius: 10px;
-  padding-top: 1px;
-  font-size: 12px;
-  min-width: 25px;
-  font-weight: normal;
-  text-align: center;
-}
-
-.menuItem.menuItemShortMenu{
-  position: relative;
-  padding: 10px 10px;
-  justify-content: center;
-}
-.menuItem.menuItemShortMenu .menuItemIcon{
-  font-size: 24px;
-}
-
-.menuItem.menuItemShortMenu .menuItemText{
-  display: none;
-}
-
-.menuItem.menuItemShortMenu .menuItemIconSubMenu{
-  font-size: 13px;
-  position: absolute;
-  right: 8px;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.menuItem.menuItemShortMenu:hover .menuItemText{
-  display: block;
-  position: absolute;
-  width: auto;
-  left: calc(100% + 5px);
-  top: 50%;
-  transform: translateY(-50%);
-  padding: 10px;
-  background-color: #000000;
-  color: #fff !important;
-  border-radius: 10px;
-  z-index: 1000;
-  white-space: nowrap;
-}
-.menuItem.menuItemShortMenu:hover .menuItemText.menuItemTextBadge{
-  padding-right: 50px;
-}
-.menuItem.menuItemShortMenu:hover .menuItemText.menuItemTextBadge .menuItemBadge{
-  right: 8px;
-  background-color: #ffffff46;
-}
-.menuItemOwner .menuItemOpen{
-  background-color: #283b5c;
-}
-
-.menuItemOwner .menuItemChildren{
-  display: none;
-  background-color: #30425f;
-
-}
-.menuItemOwner .menuItemChildrenOpen{
-  display: block;
-}

package/src/components/MyModal/MyModal.css

@@ -1,83 +0,0 @@
-.modal-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    padding: 25px 0;
-    background-color: rgba(0, 0, 0, 0.5);
-    display: flex;
-    justify-content: center;
-    /* align-items: center; */
-    /* Overlay için overflow özelliği */
-    overflow-y: auto;
-    z-index: 99;
-}
-.modal-overlay.top {
-    align-items: baseline;
-}
-
-.modal-overlay .modal {
-    /* Modal için maksimum yükseklik ve scroll */
-
-    /* Modalın üst ve alt kısmında boşluk bırakmak için */
-    /* margin: 20px 0; */
-    height: max-content;
-    background-color: #ebeef3;
-    padding: 15px;
-    border-radius: 10px;
-    min-width: 200px;
-    max-width: 100%;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-}
-
-.modal-overlay .modal .modal-header {
-    display: flex;
-    width: 100%;
-    justify-content: space-between;
-    align-items: center;
-}
-.modal-overlay .modal .modal-header h4 {
-    margin-top: 0px;
-    padding-left: 8px;
-}
-
-.modal-overlay .modal .modal-header .close-button {
-    background: none;
-    border: none;
-    height: 25px;
-    font-size: 32px;
-    color: #cdcdcd;
-    background: none;
-    padding: 0px;
-    cursor: pointer;
-    margin: -10px 10px 0 0;
-}
-
-.modal-overlay .modal .modal-header .close-button:hover {
-    background: none;
-    color: #9c9c9c;
-}
-
-.modal-overlay .modal .modal-content {
-    display: block;
-    width: 100%;
-    padding: 10px 0;
-    /* max-height: calc(100vh - 80px); */
-    /* overflow-y: auto; */
-}
-
-.MyModalTagBody {
-    display: block;
-    width: 100%;
-    padding: 15px;
-    background: #fff;
-    border-radius: 15px;
-}
-
-.MyModalTagFooter {
-    display: flex;
-    justify-content: flex-end;
-    gap: 10px;
-    margin-top: 5px;
-}

package/src/components/MyModal/MyModal.jsx

@@ -1,78 +0,0 @@
-import React, { useEffect } from 'react';
-import './MyModal.css'; // Modal için CSS dosyası
-
-const MyModal = ({
-  show,
-  title,
-  children,
-  top = null,
-  onClose = null,
-  closeOnBackdropClick = true,
-  closeOnEsc = true,
-  style = null,
-}) => {
-
-  const arrChild = React.Children.toArray(children);
-
-  let childBody = null;
-  let childFooter = null;
-
-  for (let i = 0; i < arrChild.length; i++) {
-    const el = arrChild[i];
-    if (el.type.toString().includes("MyModalTagFooter")) {
-      childFooter = el;
-    } else if (el.type.toString().includes("MyModalTagBody")) {
-      childBody = el;
-    } else if (childBody == null) {
-      childBody = el;
-    }
-  }
-
-  // ESC tuşu ile kapatma işlevi
-  useEffect(() => {
-    if (!closeOnEsc) return;
-
-    const handleEsc = (event) => {
-      if (event.key === 'Escape') {
-        onClose();
-      }
-    };
-
-    window.addEventListener('keydown', handleEsc);
-
-    return () => {
-      window.removeEventListener('keydown', handleEsc);
-    };
-  }, [closeOnEsc, onClose]);
-
-  if (!show) {
-    return null;
-  }
-
-  const handleBackdropClick = (e) => {
-    if (closeOnBackdropClick && e.target.className.includes('modal-overlay')) {
-      onClose();
-    }
-  };
-
-
-  return (
-    <div className={'modal-overlay ' + (top ? 'top' : '')} onClick={handleBackdropClick} style={{ paddingTop: top }}>
-      <div className='modal' onClick={(e) => e.stopPropagation()} style={style}>
-        <div className='modal-header'>
-          <h4>{title}</h4>
-          {onClose &&
-            <button type='button' className='close-button' onClick={onClose}>
-              &times;
-            </button>
-          }
-        </div>
-
-        <div className='modal-content'>{childBody}</div>
-        <div className='modal-footer'>{childFooter}</div>
-      </div>
-    </div>
-  );
-};
-
-export default MyModal;

package/src/components/MyModal/MyModalBody.jsx

@@ -1,8 +0,0 @@
-import React from "react";
-
-function MyModalBody({ children }) {
-  return (
-    <div className="MyModalTagBody">{children}</div>
-  )
-}
-export default MyModalBody

package/src/components/MyModal/MyModalFooter.jsx

@@ -1,8 +0,0 @@
-import React from "react";
-
-function MyModalFooter({ children }) {
-  return (
-    <div className="MyModalTagFooter">{children}</div>
-  )
-}
-export default MyModalFooter

package/src/components/MyNotFound/MyNotFound.css

@@ -1,22 +0,0 @@
-.my-nodata{
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  justify-content: center;
-  align-items: center;
-  padding: 25px;
-  font-size: 17px;
-  color:  #444;
-}
-
-.my-nodata .icon{
-  font-size: 42px;
-  color:  #adadad;
-  margin-bottom: 10px;
-}
-
-.my-nodata span{
-  display: block;
-  width: 100%;
-  text-align: center;
-}

package/src/components/MyNotFound/MyNotFound.jsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import './MyNotFound.css'; // Modal için CSS dosyası
-
-export default function MyNotFound({ message = "Kayıt Mevcut Değil!", className = null, style = null, icon = null }) {
-  return (
-    <div className={"my-nodata " + (className ? className : '')} style={style}>
-      {icon && <div className="icon">{icon}</div>}
-      <span dangerouslySetInnerHTML={{ __html: message }}></span>
-    </div>
-  )
-}

package/src/components/MyScrollableCard/MyScrollableCard.jsx

@@ -1,86 +0,0 @@
-import React, { useState, useRef } from "react";
-
-
-const MyScrollableCard = ({ children, className }) => {
-  const [isDragging, setIsDragging] = useState(false);
-  const [startX, setStartX] = useState(0);
-  const [startY, setStartY] = useState(0);
-  const [scrollLeft, setScrollLeft] = useState(0);
-  const [scrollTop, setScrollTop] = useState(0);
-  const [direction, setDirection] = useState(null); // Yatay mı dikey mi olduğuna karar verecek
-  const containerRef = useRef(null);
-
-  const handleMouseDown = (e) => {
-      setIsDragging(true);
-      setStartX(e.pageX - containerRef.current.offsetLeft);
-      setStartY(e.pageY - containerRef.current.offsetTop);
-      setScrollLeft(containerRef.current.scrollLeft);
-      setScrollTop(containerRef.current.scrollTop);
-      setDirection(null); // Fare basıldığı anda yönü sıfırla
-  };
-
-  const handleMouseMove = (e) => {
-    if (!isDragging) return;
-    e.preventDefault();
-
-    const x = e.pageX - containerRef.current.offsetLeft;
-    const y = e.pageY - containerRef.current.offsetTop;
-
-    // İlk hareket yönünü belirle
-    if (direction === null) {
-        const diffX = Math.abs(x - startX);
-        const diffY = Math.abs(y - startY);
-        if (diffX > diffY) {
-            setDirection("horizontal");
-        } else {
-            setDirection("vertical");
-        }
-    }
-
-    if (direction === "horizontal") {
-        const walkX = x - startX; // Hız faktörünü kaldırdım
-        containerRef.current.scrollLeft = scrollLeft - walkX; // Düz kaydırma
-    } else if (direction === "vertical") {
-        const walkY = y - startY;
-        containerRef.current.scrollTop = scrollTop - walkY;
-    }
-};
-
-  const handleMouseUp = () => {
-      setIsDragging(false);
-  };
-
-  const handleWheel = (e) => {
-      e.preventDefault();
-
-      containerRef.current.scrollLeft += e.deltaY * 2; // Yatay tekerlek kaydırma
-
-      // Eğer dikey kaydırma isteniyorsa deltaX'i kullanabilirsiniz:
-      // containerRef.current.scrollTop += e.deltaY * 2;
-
-      // const deltaX = e.deltaX;
-      // const deltaY = e.deltaY;
-
-      // if (Math.abs(deltaX) > Math.abs(deltaY)) {
-      //     containerRef.current.scrollLeft += deltaX * 2; // Yatay tekerlek kaydırma
-      // } else {
-      //     containerRef.current.scrollTop += deltaY * 2; // Dikey tekerlek kaydırma
-      // }
-  };
-
-  return (
-      <div
-          className={className}
-          onMouseDown={handleMouseDown}
-          onMouseMove={handleMouseMove}
-          onMouseLeave={handleMouseUp}
-          onMouseUp={handleMouseUp}
-          onWheel={handleWheel}
-          ref={containerRef}
-      >
-          {children}
-      </div>
-  );
-};
-
-export default MyScrollableCard;