px-react-ui-components 1.0.0

package/src/components/MyInput/MyInput.module.css

@@ -0,0 +1,420 @@
+.container {
+    display: block;
+    /* width: 100%; */
+    width: auto;
+    font-size: 15px;
+}
+
+.container small {
+    padding-left: 5px;
+    font-size: 11px;
+}
+
+.inputblock {
+    display: block;
+    position: relative;
+    /* width: 100%; */
+    width: auto;
+    background-color: #fff;
+    border: 1px solid #e5e7eb;
+    padding-right: 8px;
+    padding-left: 15px;
+    border-radius: 8px;
+}
+
+.inputblockdisabled{
+    background-color: #f8fafd;
+    border-color: #e5e7eb;
+}
+
+.disabledInput {
+    width: 100%;
+    min-height: 40px;
+    display: flex;
+    align-items: center;
+    padding: 8px;
+    overflow: auto;
+    scrollbar-width: thin;
+}
+
+.caretdown {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 15px;
+}
+
+.fileinput,
+.css13cymwtControl,
+.inputblock select,
+.inputblock textarea,
+.inputblock input {
+    display: block;
+    width: 100%;
+    min-height: 41px;
+    background: rgba(243, 242, 247, 0.1);
+    border: none;
+    padding: 10px 0px;
+    color: #0a0b0f;
+    font-weight: normal;
+    font-size: 14px;
+    outline: none;
+    z-index: 9;
+}
+
+.inputblock:focus-within {
+    background-color: #ecf8ff;
+}
+
+.inputblock select {
+    padding: 10px 0px 11px 0;
+}
+
+.fileinput::placeholder,
+.css13cymwtControl::placeholder,
+.inputblock select::placeholder,
+.inputblock textarea::placeholder,
+.inputblock input::placeholder {
+    color: #73889d;
+    opacity: 0.8;
+}
+
+.fileinput:-internal-autofill-selected,
+.css13cymwtControl:-internal-autofill-selected,
+.inputblock select:-internal-autofill-selected,
+.inputblock textarea:-internal-autofill-selected,
+.inputblock input:-internal-autofill-selected {
+    background-color: rgba(243, 242, 247, 0.1) !important;
+}
+
+.inputblock input[type="color"] {
+    height: 45px;
+    padding: 5px 0;
+}
+
+.inputblock textarea {
+    line-height: unset;
+}
+
+.placeholder {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #75899e;
+    opacity: 0.8;
+    z-index: 0;
+    pointer-events: none;
+    font-weight: 300;
+    font-size: 14px;
+}
+
+.inputblock input.filterInput {
+    position: absolute;
+    display: none;
+    left: 10px;
+    top: 0px;
+    width: calc(100% - 75px) !important;
+    padding-left: 5px !important;
+    z-index: 2 !important;
+    background-color: #f3f2f7 !important;
+}
+
+.inputblockicon input.filterInput {
+    left: 40px;
+}
+
+.filterInputSelected {
+    display: block;
+    width: 100%;
+    height: 41px;
+    padding: 10px 0;
+    font-size: 14px;
+    font-weight: 300;
+}
+
+.filterInputSelectedSelected {
+    position: relative;
+    padding-left: 30px;
+}
+
+.filterInputSelectedContainer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-left: 10px;
+}
+
+.filterInputSelectedContainerSelected {
+    position: relative;
+}
+
+.filterInputSelectedX {
+    position: absolute;
+    right: 35px;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 15px;
+    cursor: pointer;
+    font-family: monospace;
+    border-radius: 50%;
+    width: 18px;
+    height: 18px;
+    background: #e4e4e4;
+    text-align: center;
+    padding: 0px;
+    line-height: 15px;
+    color: #000000;
+}
+
+.filterInputSelectedX:hover {
+    background: #f0cdcd;
+    color: #a34444;
+}
+
+.filterInputList {
+    display: none;
+    position: absolute;
+    left: 5px;
+    top: 41px;
+    max-height: 300px;
+    width: calc(100% - 10px);
+    z-index: 99;
+    background-color: #fff;
+    padding: 0;
+    border-radius: 8px;
+    overflow: auto;
+    scrollbar-width: thin;
+    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.5);
+    font-size: 13px;
+    font-weight: 300;
+}
+
+.filterInputList.opened {
+    display: block;
+}
+
+.filterInputList li {
+    cursor: default;
+    padding: 6px 15px;
+    display: flex;
+    flex-direction: column;
+    gap: 0px;
+}
+
+.filterInputList .subtextli {
+    padding: 4px 15px;
+}
+.filterInputList li .subtext {
+    font-size: 11px;
+    font-style: italic;
+    color: #73889d;
+    opacity: 0.8;
+    font-weight: 300;
+}
+
+.filterInputList li:hover {
+    background-color: #1c61c9;
+    color: #fff;
+}
+
+.filterInputList li:hover .subtext,
+.filterInputList li:hover i,
+.filterInputList li:hover span,
+.filterInputList li:hover small {
+    color: #fff !important;
+}
+
+.inputblockicon {
+    padding-left: 40px;
+}
+
+.inputblockicon .eye,
+.inputblockicon .icon {
+    position: absolute;
+    left: 5px;
+    top: 50%;
+    width: 30px;
+    transform: translateY(-50%);
+    color: #73889d;
+    padding: 0px;
+    font-size: 22px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.inputblockicon .icontextarea {
+    top: 13px;
+    transform: unset;
+}
+
+.inputblockicon .icon {
+    z-index: 0;
+    pointer-events: none;
+}
+
+.inputblockicon .eye {
+    left: unset;
+    right: 10px;
+    background: unset;
+    border: none;
+}
+
+.inputblockicon .eye:hover {
+    color: #a3a7ac;
+}
+
+.inputblockicon .placeholder {
+    left: 45px;
+}
+
+.error .inputblock{
+    border-color: #ff0000 !important;
+}
+
+.fileinput {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 5px;
+    width: 100%;
+    padding: 0px;
+}
+
+.fileImagePreview {
+    position: absolute;
+    height: 35px;
+    width: 35px;
+    object-fit: cover;
+    border-radius: 5px;
+    left: -40px;
+    top: 50%;
+    transform: translateY(-50%);
+    padding: 2px;
+    background: #f3f3f3;
+}
+
+.fileImagePreview:hover {
+    height: 180px;
+    width: 180px;
+    z-index: 9999;
+    padding: 8px;
+    cursor: pointer;
+    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.35);
+    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.35);
+    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.35);
+}
+
+.filename {
+    display: block;
+    position: relative;
+    width: calc(100% - 110px);
+    color: #b9bbbd;
+    padding: 0 0 0 5px;
+}
+
+.filename small {
+    position: absolute;
+    right: 0px;
+    top: 0px;
+    height: 100%;
+    font-weight: normal;
+    background: #cdcdcd;
+    padding: 5px;
+    border-radius: 8px;
+    line-height: 1;
+}
+
+.filename.selected {
+    color: #000;
+}
+
+.filebutton {
+    margin-left: auto;
+    /* position: absolute;
+    right: -2px;
+    top: 5px; */
+    min-width: 80px;
+    /* height: calc(100% - 10px); */
+    padding: 8px;
+    border: none;
+    background: #d0d6de;
+    color: #464255;
+    border-radius: 8px;
+    flex-shrink: 0;
+
+}
+
+.filebutton:hover {
+    background: #c7ced6;
+}
+
+.filebuttonremove {
+    width: 20px;
+    height: 20px;
+    background: #c7ced6;
+    color: #fff;
+    border: none;
+    padding: 0px;
+    border-radius: 50%;
+    font-size: 12px;
+    cursor: pointer;
+    margin-left: auto;
+    flex-shrink: 0;
+
+    /* position: absolute; */
+    /* right: 10px;
+    top: 50%;
+    transform: translateY(-50%); */
+}
+
+.description {
+    display: block;
+    width: 100%;
+    font-size: 10px;
+    padding-top: 2px;
+    color: #737a83;
+}
+
+@media screen and (max-width: 768px) {
+    .container {
+        font-size: 14px;
+    }
+
+    .inputblock {
+        padding-right: 6px;
+    }
+
+    .filebutton {
+        min-width: 70px;
+        padding: 6px;
+    }
+
+    .inputblockicon .icon,
+    .inputblockicon .eye {
+        font-size: 22px;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .container {
+        font-size: 11px;
+    }
+
+    .inputblock {
+        padding-right: 4px;
+    }
+
+    .filebutton {
+        min-width: 60px;
+        padding: 4px;
+    }
+
+    .inputblockicon .icon,
+    .inputblockicon .eye {
+        font-size: 20px;
+    }
+}

package/src/components/MyMaps/YandexMaps.jsx

@@ -0,0 +1,186 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+// Global olarak ymaps yükleyicisi
+let ymapsLoader;
+
+const loadYandexMapsAPI = (APIKEY) => {
+  if (ymapsLoader) {
+    return ymapsLoader;
+  }
+
+  ymapsLoader = new Promise((resolve, reject) => {
+    if (window.ymaps) {
+      resolve(window.ymaps);
+    } else {
+      const script = document.getElementById("yandexmapapi");
+
+      if (!script) {
+        const newScript = document.createElement('script');
+        newScript.id = "yandexmapapi";
+        newScript.src = `https://api-maps.yandex.com/2.1/?apikey=${APIKEY}&lang=tr_TR`;
+        newScript.async = true;
+        document.head.appendChild(newScript);
+
+        newScript.onload = () => {
+          window.ymaps.ready(() => resolve(window.ymaps));
+        };
+
+        newScript.onerror = reject;
+      } else {
+        script.onload = () => {
+          window.ymaps.ready(() => resolve(window.ymaps));
+        };
+      }
+    }
+  });
+
+  return ymapsLoader;
+};
+
+const YandexMap = ({ className = "", value = null, address = null, addressSearch = false, onChange = null, onAddress = null, style = null, APIKEY = null }) => {
+  const [loaded, setLoaded] = useState(false);
+  const [position, setPosition] = useState(null);
+  const [error, setError] = useState(null);
+  const [componentKey] = useState(Date.now() + '' + (Math.floor(Math.random() * (10 - 1)) + 1));
+  const markerRef = useRef(null); // Marker için referans
+
+  const currentLocation = () => {
+    if (value) {
+      maps_load(parseFloat(value.coords[0]), parseFloat(value.coords[1]), parseInt(value.zoom));
+      return;
+    }
+
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition(
+        (position) => {
+          maps_load(position.coords.latitude, position.coords.longitude, 12);
+        },
+        (error) => {
+          console.error(error.message);
+          maps_load(40.32110315567054, 32.199745873178124, 8);
+        }
+      );
+    } else {
+      maps_load(40.32110315567054, 32.199745873178124, 8);
+      setError("Geolocation is not supported by this browser.");
+    }
+  };
+
+  const maps_load = (coorX, coorY, zoom = 10) => {
+    document.getElementById("map" + componentKey).innerHTML = "";
+
+    const myMap = new ymaps.Map("map" + componentKey, {
+      center: [coorX, coorY],
+      zoom: zoom,
+    });
+
+    createMarker(myMap, [coorX, coorY], zoom);
+
+    myMap.events.add('click', (e) => {
+      const coords = e.get('coords');
+      let curzoom = myMap.getZoom();
+      // if (curzoom < 17) {
+      //   curzoom = 17;
+      //   myMap.setZoom(curzoom);
+      // }
+
+      setPosition({ coords: coords, zoom: curzoom });
+      getAddress(coords);
+      createMarker(myMap, coords, curzoom);
+    });
+
+  };
+
+  const createMarker = (myMap, coords, curzoom) => {
+    if (markerRef.current) {
+      myMap.geoObjects.remove(markerRef.current); // Önceki marker'ı kaldır
+    }
+    const newMarker = new ymaps.Placemark(coords, {
+      balloonContent: `Yeni Koordinatlar: ${coords[0]}, ${coords[1]}`,
+    });
+
+    myMap.geoObjects.add(newMarker);
+    markerRef.current = newMarker;
+    // myMap.setCenter(coords, curzoom);
+  };
+
+  const getAddress = (coords) => {
+    if (!onAddress) return;
+
+    ymaps.geocode(coords).then((res) => {
+      const firstGeoObject = res.geoObjects.get(0);
+
+      if (firstGeoObject) {
+        const address = firstGeoObject.getAddressLine();
+        onAddress(address);
+      }
+    });
+  };
+
+  const getAddressCoor = () => {
+    const geocodeUrl = `https://geocode-maps.yandex.ru/1.x/?geocode=${encodeURIComponent(address)}&format=json&apikey=${APIKEY}`;
+
+    fetch(geocodeUrl)
+      .then(response => response.json())
+      .then(data => {
+        if (data.response.GeoObjectCollection.featureMember.length > 0) {
+          const firstResult = data.response.GeoObjectCollection.featureMember[0].GeoObject;
+          const pos = firstResult.Point.pos.split(' ');
+
+          maps_load(parseFloat(pos[1]), parseFloat(pos[0]), 17)
+        }
+      })
+      .catch(err => {
+        setError(`Hata: ${err.message}`);
+      });
+  }
+
+  useEffect(() => {
+    if (addressSearch && !markerRef.current && address && address != "") {
+      getAddressCoor();
+    }
+  }, [addressSearch])
+
+  useEffect(() => {
+    if (onChange && loaded) {
+      onChange(position);
+    }
+  }, [position]);
+
+  const opened = () => {
+    currentLocation();
+
+    setTimeout(() => {
+      setLoaded(true);
+    }, 1000);
+  };
+
+  useEffect(() => {
+    if (loaded && value) {
+      maps_load(parseFloat(value.coords[0]), parseFloat(value.coords[1]), parseInt(value.zoom));
+    }
+  }, [value]);
+
+  useEffect(() => {
+    // if (loaded && value) {
+    //   maps_load(parseFloat(value.coords[0]), parseFloat(value.coords[1]), parseInt(value.zoom));
+    // }
+  }, [loaded]);
+
+  useEffect(() => {
+    if (!APIKEY) {
+      APIKEY = "0d21dc94-68eb-4245-871f-a56081b703b3";
+    }
+
+    loadYandexMapsAPI(APIKEY)
+      .then(() => {
+        opened(); // Harita işlevselliğinizi başlatın
+      })
+      .catch((err) => console.error("Yandex Maps API yüklenemedi", err));
+  }, []);
+
+
+  return <div id={"map" + componentKey} className={"w-full h-72 " + className} style={style}></div>;
+};
+
+export default YandexMap;

package/src/components/MyMenu/MenuItem.jsx

@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import styles from "./MyMenu.module.css"
+import { PiCaretDown, PiCaretUp } from 'react-icons/pi';
+import { GoDotFill } from 'react-icons/go';
+
+function MenuItem({ children = null, to = "", text = "", className = null, badge = null, icon = null, title = "", defaultOpen=false, defaultRoute = "", isShortMenu = false }) {
+  // let selected = window.location.pathname == to || (window.location.pathname == defaultRoute);
+
+
+  const [open, setOpen] = useState(defaultOpen);
+  const [selected, setSelected] = useState(false);
+
+  useEffect(() => {
+    setSelected(children ? false : (window.location.pathname == to || (window.location.pathname == defaultRoute || window.location.pathname.includes(to))));
+  }, [window.location.pathname]);
+
+
+  return (
+    <>
+      {children &&
+
+        <div className={styles.menuItemOwner}>
+          <div
+            className={
+              styles.menuItem + " " +
+              (className != null ? className : "") + " " +
+              (selected ? styles.selected : '') + " " +
+              (open ? styles.menuItemOpen : '') + " " +
+              (isShortMenu ? styles.menuItemShortMenu : '')
+            } title={title == "" ? text : title}
+            onClick={() => setOpen(!open)}
+          >
+            {icon && <div className={styles.menuItemIcon}>{icon}</div>}
+            <span className={styles.menuItemText + " " + (badge != null ? styles.menuItemTextBadge : '')}>
+              {text}
+              {badge != null && typeof badge !== 'object' ? <span className={styles.menuItemBadge}>{badge.toString()}</span> : badge}
+            </span>
+
+            {open &&
+              <PiCaretUp className={`font-bold text-2xl ${styles.menuItemIconSubMenu} ${open ? styles.menuItemIconSubMenuOpen : ''}`} />
+              ||
+              <PiCaretDown className={`font-bold text-2xl ${styles.menuItemIconSubMenu} ${open ? styles.menuItemIconSubMenuOpen : ''}`} />}
+          </div>
+
+          <div className={styles.menuItemChildren + " " + (open ? styles.menuItemChildrenOpen : '')}>
+            {children}
+          </div>
+        </div> ||
+        <Link to={to} className={styles.menuItem + " " + (className != null ? className : "") + " " + (selected ? styles.selected : '') + " " + (isShortMenu ? styles.menuItemShortMenu : '')} title={title == "" ? text : title}>
+          {icon && <div className={styles.menuItemIcon}>{icon}</div> || <GoDotFill />}
+          <span className={styles.menuItemText + " " + (badge != null ? styles.menuItemTextBadge : '')}>
+            {text}
+            {badge != null && typeof badge !== 'object' ? <span className={styles.menuItemBadge}>{badge.toString()}</span> : badge}
+          </span>
+        </Link>
+      }
+    </>
+  )
+}
+
+export default MenuItem