px-react-ui-components 1.0.0

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

@@ -0,0 +1,162 @@
+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 /*#__PURE__*/React.createElement("div", {
+    id: "map" + componentKey,
+    className: "w-full h-72 " + className,
+    style: style
+  });
+};
+export default YandexMap;

package/dist/components/MyMenu/MenuItem.js

@@ -0,0 +1,55 @@
+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 /*#__PURE__*/React.createElement(React.Fragment, null, children && /*#__PURE__*/React.createElement("div", {
+    className: styles.menuItemOwner
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.menuItem + " " + (className != null ? className : "") + " " + (selected ? styles.selected : '') + " " + (open ? styles.menuItemOpen : '') + " " + (isShortMenu ? styles.menuItemShortMenu : ''),
+    title: title == "" ? text : title,
+    onClick: () => setOpen(!open)
+  }, icon && /*#__PURE__*/React.createElement("div", {
+    className: styles.menuItemIcon
+  }, icon), /*#__PURE__*/React.createElement("span", {
+    className: styles.menuItemText + " " + (badge != null ? styles.menuItemTextBadge : '')
+  }, text, badge != null && typeof badge !== 'object' ? /*#__PURE__*/React.createElement("span", {
+    className: styles.menuItemBadge
+  }, badge.toString()) : badge), open && /*#__PURE__*/React.createElement(PiCaretUp, {
+    className: `font-bold text-2xl ${styles.menuItemIconSubMenu} ${open ? styles.menuItemIconSubMenuOpen : ''}`
+  }) || /*#__PURE__*/React.createElement(PiCaretDown, {
+    className: `font-bold text-2xl ${styles.menuItemIconSubMenu} ${open ? styles.menuItemIconSubMenuOpen : ''}`
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles.menuItemChildren + " " + (open ? styles.menuItemChildrenOpen : '')
+  }, children)) || /*#__PURE__*/React.createElement(Link, {
+    to: to,
+    className: styles.menuItem + " " + (className != null ? className : "") + " " + (selected ? styles.selected : '') + " " + (isShortMenu ? styles.menuItemShortMenu : ''),
+    title: title == "" ? text : title
+  }, icon && /*#__PURE__*/React.createElement("div", {
+    className: styles.menuItemIcon
+  }, icon) || /*#__PURE__*/React.createElement(GoDotFill, null), /*#__PURE__*/React.createElement("span", {
+    className: styles.menuItemText + " " + (badge != null ? styles.menuItemTextBadge : '')
+  }, text, badge != null && typeof badge !== 'object' ? /*#__PURE__*/React.createElement("span", {
+    className: styles.menuItemBadge
+  }, badge.toString()) : badge)));
+}
+export default MenuItem;