px-react-ui-components 1.0.0

package/dist/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/dist/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/dist/components/MyModal/MyModal.js

@@ -0,0 +1,71 @@
+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 /*#__PURE__*/React.createElement("div", {
+    className: 'modal-overlay ' + (top ? 'top' : ''),
+    onClick: handleBackdropClick,
+    style: {
+      paddingTop: top
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "modal",
+    onClick: e => e.stopPropagation(),
+    style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "modal-header"
+  }, /*#__PURE__*/React.createElement("h4", null, title), onClose && /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "close-button",
+    onClick: onClose
+  }, "\xD7")), /*#__PURE__*/React.createElement("div", {
+    className: "modal-content"
+  }, childBody), /*#__PURE__*/React.createElement("div", {
+    className: "modal-footer"
+  }, childFooter)));
+};
+export default MyModal;

package/dist/components/MyModal/MyModalBody.js

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

package/dist/components/MyModal/MyModalFooter.js

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

package/dist/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/dist/components/MyNotFound/MyNotFound.js

@@ -0,0 +1,20 @@
+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 /*#__PURE__*/React.createElement("div", {
+    className: "my-nodata " + (className ? className : ''),
+    style: style
+  }, icon && /*#__PURE__*/React.createElement("div", {
+    className: "icon"
+  }, icon), /*#__PURE__*/React.createElement("span", {
+    dangerouslySetInnerHTML: {
+      __html: message
+    }
+  }));
+}

package/dist/components/MyScrollableCard/MyScrollableCard.js

@@ -0,0 +1,74 @@
+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 /*#__PURE__*/React.createElement("div", {
+    className: className,
+    onMouseDown: handleMouseDown,
+    onMouseMove: handleMouseMove,
+    onMouseLeave: handleMouseUp,
+    onMouseUp: handleMouseUp,
+    onWheel: handleWheel,
+    ref: containerRef
+  }, children);
+};
+export default MyScrollableCard;