px-react-ui-components 1.0.1 → 1.0.2

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

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

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

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