px-react-ui-components 1.0.0

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

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

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

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

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

package/src/components/MyModal/MyModalFooter.jsx

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

package/src/components/MyNotFound/MyNotFound.css

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

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

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