px-react-ui-components 1.0.0

package/src/components/MyFileUpload/MyFileUpload.jsx

@@ -0,0 +1,373 @@
+import React, { useEffect, useState, useRef } from "react";
+import { PiCamera, PiFileArrowUpLight } from "react-icons/pi";
+import Resizer from "react-image-file-resizer";
+import Camera, { FACING_MODES, IMAGE_TYPES } from "react-html5-camera-photo";
+import "react-html5-camera-photo/build/css/index.css";
+import { useTranslation } from "../../context/TranslationContext";
+import MyWaiting from "../MyWaiting/MyWaiting";
+import { MyAlert, MyAlertType } from "../MyAlert/MyAlert";
+import styles from "./MyFileUpload.module.css"
+import MyModal from "../MyModal/MyModal";
+
+export const AcceptType = {
+    ALL: "all",
+    FILE: "file",
+    IMAGE: "image",
+    MEDIA: "media",
+    PDF: "pdf",
+    IMAGEPDF: "imagepdf",
+};
+
+Object.freeze(MyAlertType);
+
+export default function MyFileUpload({
+    multiple = false,
+    accept = AcceptType.ALL,
+    className = null,
+    camera = true,
+    maxSizeMB = 50,
+    onData,
+}) {
+    const { t } = useTranslation();
+
+    const [loading, setLoading] = useState(false);
+    const [accepttypes, setAccepttypes] = useState(AcceptType.ALL);
+    const [acceptlabel, setAcceptlabel] = useState(AcceptType.ALL);
+    const [cameraopen, setCameraopen] = useState(false);
+    const [cameraopened, setCameraopened] = useState(false);
+    const [devices, setDevices] = useState([]);
+    const [selectedDeviceId, setSelectedDeviceId] = useState("");
+
+    const fileInputRef = useRef(null);
+
+    let type_files = ".pdf,.rar,.zip,.doc,.docx,.xls,.xlsx,.ppt,.pptx,msword,msexcel,vnd.ms-excel,vnd.openxmlformats-officedocument.spreadsheetml.sheet,vnd.openxmlformats-officedocument.wordprocessingml.document";
+    let type_image = ".jpg,.jpeg,.png";
+    let type_media = ".mp3,.mp4,.avi,.wav";
+
+    useEffect(() => {
+        switch (accept) {
+            case AcceptType.ALL:
+                setAccepttypes(
+                    type_files + "," + type_image + "," + type_media
+                );
+                setAcceptlabel(
+                    "PNG, JPG, PDF, RAR, ZIP, MP3, MP4, AVI, WAV veya Word-Excel Dosyaları"
+                );
+                break;
+            case AcceptType.IMAGE:
+                setAccepttypes(type_image);
+                setAcceptlabel(t("PNG veya JPG Dosyaları"));
+                break;
+            case AcceptType.MEDIA:
+                setAccepttypes(type_media);
+                setAcceptlabel(t("MP3, MP4, AVI veya WAV Dosyaları"));
+                break;
+            case AcceptType.FILE:
+                setAccepttypes(type_files + "," + type_image);
+                setAcceptlabel(
+                    t("PDF, RAR, ZIP, PNG, JPG veya Word-Excel Dosyaları")
+                );
+                break;
+            case AcceptType.PDF:
+                setAccepttypes(".pdf");
+                setAcceptlabel(t("PDF Dosyaları"));
+                break;
+            case AcceptType.IMAGEPDF:
+                setAccepttypes(type_image + ",.pdf");
+                setAcceptlabel(t("PNG, JPG veya PDF Dosyaları"));
+                break;
+        }
+
+        navigator.mediaDevices.enumerateDevices().then((deviceInfos) => {
+            const videoDevices = deviceInfos.filter(
+                (device) => device.kind === "videoinput"
+            );
+            setDevices(videoDevices);
+            if (videoDevices.length > 0) {
+                setSelectedDeviceId(videoDevices[0].deviceId); // İlk kamerayı varsayılan olarak seç
+            }
+        });
+    }, []);
+
+    const responseData = (resdata, _error) => {
+        if (_error.length > 0) {
+            let message = _error.map((e, i) => {
+                return (
+                    i +
+                    1 +
+                    ".) <b><i>" +
+                    e.filename +
+                    "</i></b><br/>---- " +
+                    e.message +
+                    "<br/>"
+                );
+            });
+
+            MyAlert(
+                t("Aşağıdaki dosyalar eklenemedi!") +
+                "<br/><br/><div style='display: block;font-size:13px;width: 100%;text-align: left;'>" +
+                message +
+                "</div>",
+                MyAlertType.WARNING
+            );
+        }
+
+        if (onData && (
+            (Array.isArray(resdata) && resdata.length > 0) ||
+            (!Array.isArray(resdata) && resdata)
+        )
+        )
+            onData(resdata);
+
+        setLoading(false);
+    };
+
+    const getBase64 = (files, callback = null) => {
+        let response_files = [];
+        let _error = [];
+        let fileReaderCalc = 0;
+
+        setLoading(true);
+
+        for (let i = 0; i < files.length; i++) {
+            const file = files[i];
+            let filesize = parseInt(file.size) / 1024 / 1024; //MB
+
+            let file_ext = file.type.split("/");
+            file_ext = file_ext[file_ext.length - 1];
+
+            if (filesize > maxSizeMB || accepttypes.indexOf(file_ext) == -1) {
+                if (filesize > maxSizeMB) {
+                    _error.push({
+                        filename: file.name,
+                        message: t("Boyutu Max. Dosya Boyutundan büyük olamaz!") + ` <b>${maxSizeMB}MB</b>`,
+                    });
+                } else {
+                    _error.push({
+                        filename: file.name,
+                        message: t("Dosya türü desteklenmiyor!") + ` <b>${file_ext}</b>`,
+                    });
+                }
+
+                if (files.length == i + 1 && response_files.length == 0) {
+                    responseData(response_files, _error);
+
+                    if (callback) {
+                        callback();
+                    }
+                }
+
+                continue;
+            }
+
+            let extension_type = type_image.indexOf(file_ext) > -1 ? "image" : "file";
+
+            if (extension_type == "file") {
+                const reader = new FileReader();
+                reader.onload = function() {
+                    let fileitem = {
+                        base64: reader.result,
+                        extension: file_ext,
+                        extension_type: type_image.indexOf(file_ext) > -1 ? "image" : "file",
+                        file: file,
+                    };
+
+                    if (!multiple) {
+                        response_files = fileitem;
+                    } else {
+                        response_files.push(fileitem);
+                    }
+
+                    fileReaderCalc++;
+                    if (files.length == fileReaderCalc) {
+                        responseData(response_files, _error);
+
+                        if (callback) {
+                            callback();
+                        }
+                    }
+                };
+                reader.readAsDataURL(file);
+            } else {
+                let reader_param = {
+                    file: file,
+                    index: i,
+                    ext: file_ext,
+                    type_image: type_image,
+                };
+
+                Resizer.imageFileResizer(
+                    file,
+                    2600,
+                    2600,
+                    "JPEG",
+                    100,
+                    0,
+                    (uri) => {
+                        fileReaderCalc++;
+
+                        let fileitem = {
+                            base64: uri,
+                            extension: reader_param.ext,
+                            extension_type:
+                                reader_param.type_image.indexOf(reader_param.ext) >
+                                    -1
+                                    ? "image"
+                                    : "file",
+                            file: reader_param.file,
+                        };
+
+                        if (!multiple) {
+                            response_files = fileitem;
+                        } else {
+                            response_files.push(fileitem);
+                        }
+
+                        if (files.length == fileReaderCalc) {
+                            responseData(response_files, _error);
+
+                            if (callback) {
+                                callback();
+                            }
+                        }
+                    },
+                    "base64"
+                );
+            }
+        }
+
+        // responseData(response_files, _error);
+    };
+
+    useEffect(() => {
+        if (!cameraopen) {
+            setCameraopened(false);
+        }
+    }, [cameraopen]);
+
+    const handleFileInputChange = (e) => {
+        getBase64(e.target.files, () => {
+            if (fileInputRef.current) {
+                fileInputRef.current.value = '';
+                fileInputRef.current.files = null;
+            }
+        });
+    };
+
+    const handleDeviceChange = (event) => {
+        setSelectedDeviceId(event.target.value);
+    };
+    const handleTakePhoto = (dataUri) => {
+        let fileitem = {
+            base64: dataUri,
+            extension: "jpg",
+            extension_type: "image",
+            file: "",
+        };
+
+        responseData([fileitem], []);
+
+        setCameraopened(false);
+        setCameraopen(false);
+    };
+
+    const handleCameraError = () => {
+        // setCameraopened(false);
+        // setCameraopen(false);
+    };
+
+    const handleCameraStart = (stream) => {
+        setCameraopened(true);
+    };
+
+    const handleCameraStop = () => {
+        //  setCameraopened(false);
+    };
+
+    return (
+        <>
+            <MyWaiting show={loading} message="" />
+            <div className={className}>
+                <div className={styles.myFileUploadContainer}>
+                    <div className={styles.myFileUploadContainerItem}>
+                        <div className={styles.myFileUploadContainerItemIcon}>
+                            <PiFileArrowUpLight className={styles.Icon} />
+                            <h2 className={styles.myFileUploadContainerItemIconText}>
+                                {acceptlabel}
+                                <br /> {t("En fazla")} {maxSizeMB} MB
+                            </h2>
+                        </div>
+                        <div className={styles.myFileUploadContainerItemFile}>
+                            <input
+                                type="file"
+                                hidden
+                                ref={fileInputRef}
+                                onChange={handleFileInputChange}
+                                multiple={multiple}
+                                accept={accepttypes}
+                            />
+                            <div
+                                className={styles.myFileUploadButton}
+                                onClick={() => fileInputRef.current.click()}
+                            >
+                                {t("Dosya Seç")}
+                            </div>
+                        </div>
+                    </div>
+                    {camera && (
+                        <div className={styles.myFileUploadContainerItem}>
+                            <div className={styles.myFileUploadContainerItemIcon}>
+                                <PiCamera className={styles.Icon} />
+                                <div className={styles.myFileUploadContainerItemIconText}>
+                                    <span>
+                                        {t("Kameradan fotoğraf çekebilirsin.")}
+                                    </span>
+                                </div>
+                            </div>
+                            <div className={styles.myFileUploadContainerItemFile}>
+                                <button
+                                    type="button"
+                                    className={styles.myFileUploadButton}
+                                    onClick={() => setCameraopen(true)}
+                                >
+                                    {t("Fotoğraf Çek")}
+                                </button>
+                            </div>
+                        </div>
+                    )}
+                </div>
+            </div>
+            <MyModal show={cameraopen} onClose={() => setCameraopen(false)} title={t("Fotoğraf Çek")} closeOnEsc={false} closeOnBackdropClick={false}   >
+                <div>
+                    <Camera
+                        videoConstraints={{
+                            deviceId: selectedDeviceId
+                                ? { exact: selectedDeviceId }
+                                : undefined,
+                        }}
+                        onTakePhoto={(dataUri) => {
+                            console.log(dataUri);
+                            handleTakePhoto(dataUri);
+                        }}
+                        onCameraError={handleCameraError}
+                        onCameraStart={(stream) => {
+                            handleCameraStart(stream);
+                        }}
+                        onCameraStop={() => {
+                            handleCameraStop();
+                        }}
+                        idealFacingMode={FACING_MODES.ENVIRONMENT}
+                        idealResolution={{ width: 1024, height: 1024 }}
+                        imageType={IMAGE_TYPES.JPG}
+                        isMaxResolution={true}
+                        isImageMirror={false}
+                        isSilentMode={false}
+                        isDisplayStartCameraError={true}
+                        isFullscreen={false}
+                        sizeFactor={1}
+                    />
+                </div>
+            </MyModal>
+        </>
+    );
+}

package/src/components/MyFileUpload/MyFileUpload.module.css

@@ -0,0 +1,86 @@
+.myFileUploadContainer {
+    display: flex;
+    width: 100%;
+    flex-direction: row;
+    gap: 5px;
+}
+
+.myFileUploadContainer .myFileUploadContainerItem {
+    width: 100%;
+    padding: 5px;
+    background-color: #f0f0f0;
+    border-radius: 5px;
+    border: 1px dashed #ccc;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 3px;
+}
+
+.myFileUploadContainer
+    .myFileUploadContainerItem
+    .myFileUploadContainerItemIcon {
+    display: flex;
+    width: 100%;
+
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 1px;
+}
+
+.myFileUploadContainer
+    .myFileUploadContainerItem
+    .myFileUploadContainerItemIcon
+    .Icon {
+    font-size: 35px;
+    color: #17305b;
+}
+
+.myFileUploadContainer
+    .myFileUploadContainerItem
+    .myFileUploadContainerItemIcon
+    .myFileUploadContainerItemIconText {
+    width: 100%;
+
+    text-align: center;
+    font-weight: normal;
+    color: #636363;
+    font-size: 12px;
+    line-height: 1.3;
+}
+
+.myFileUploadContainer
+    .myFileUploadContainerItem
+    .myFileUploadContainerItemFile {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
+
+.myFileUploadContainer
+    .myFileUploadContainerItem
+    .myFileUploadContainerItemFile
+    .myFileUploadButton {
+    display: flex;
+    width: 200px;
+    height: 35px;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    flex-shrink: 0;
+    background-color: #334f7f;
+    color: #fff;
+    border-radius: 15px;
+    cursor: pointer;
+    font-size: 13px;
+}
+.myFileUploadContainer
+    .myFileUploadContainerItem
+    .myFileUploadContainerItemFile
+    .myFileUploadButton:hover {
+    background-color: #2a436a;
+}

package/src/components/MyImageCropper/MyImageCropper.jsx

@@ -0,0 +1,108 @@
+import React, { useState } from "react";
+import ReactCrop from "react-image-crop";
+import "react-image-crop/dist/ReactCrop.css";
+import MyImageZoom from "../MyZoomImage/MyZoomImage";
+
+const MyImageCropper = ({ image, style = null, onChange = null }) => {
+    const [crop, setCrop] = useState({
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+        aspect: 1,
+    });
+    // const [croppedImageUrl, setCroppedImageUrl] = useState(null);
+    const [imageRef, setImageRef] = useState(null);
+    const [zoom, setZoom] = useState({ scale: 1, positionX: 0, positionY: 0 }); // Zoom seviyesini saklamak için state
+    const [scaleFactor, setScaleFactor] = useState(1.5);
+
+    // Görüntü yüklendiğinde çağrılır
+    const handleImageLoad = (e) => {
+        setImageRef(e.currentTarget); // HTMLImageElement olarak kaydediyoruz
+    };
+
+    // Zoom değiştiğinde çağrılır
+    const handleZoomChange = (newZoom) => {
+        setZoom(newZoom);
+        setScaleFactor(newZoom.scale * 3);
+    };
+
+    // Kırpma tamamlandığında çağrılır
+    const onCropComplete = (newCrop) => {
+        if (imageRef && newCrop.width && newCrop.height) {
+            // Zoom oranını kullanarak yeni koordinatlar hesapla
+            const adjustedCrop = {
+                ...newCrop,
+                x: (newCrop.x - zoom.positionX) / zoom.scale,
+                y: (newCrop.y - zoom.positionY) / zoom.scale,
+                width: newCrop.width / zoom.scale,
+                height: newCrop.height / zoom.scale,
+            };
+
+            generateCroppedImage(imageRef, adjustedCrop);
+        }
+    };
+
+    // Kırpılmış görseli base64 formatında almak için
+    const generateCroppedImage = (image, crop) => {
+        if (!crop || !crop.width || !crop.height || crop.width === 0) {
+            console.warn("Geçersiz kırpma ölçüleri");
+            return;
+        }
+
+        const canvas = document.createElement("canvas");
+        const scaleX = image.naturalWidth / image.width;
+        const scaleY = image.naturalHeight / image.height;
+
+        // Kesim boyutlarını scaleFactor ile çarp
+        const outputWidth = crop.width * scaleFactor;
+        const outputHeight = crop.height * scaleFactor;
+
+        canvas.width = outputWidth;
+        canvas.height = outputHeight;
+        const ctx = canvas.getContext("2d");
+
+        ctx.drawImage(
+            image,
+            crop.x * scaleX,
+            crop.y * scaleY,
+            crop.width * scaleX,
+            crop.height * scaleY,
+            0,
+            0,
+            outputWidth,
+            outputHeight // Büyütülmüş boyutlar
+        );
+
+        const base64Image = canvas.toDataURL("image/jpeg");
+        // setCroppedImageUrl(base64Image);
+
+        if (onChange) {
+            onChange({ value: base64Image });
+        }
+    };
+
+    return (
+        <div style={style}>
+            {image && (
+                <ReactCrop
+                    crop={crop}
+                    onComplete={onCropComplete}
+                    onChange={(newCrop) => setCrop(newCrop)}
+                    style={style}
+                >
+                    <MyImageZoom onZoomChange={handleZoomChange}>
+                        <img
+                            src={image}
+                            alt="Crop preview"
+                            onLoad={handleImageLoad}
+                            className="rounded-e-md"
+                        />
+                    </MyImageZoom>
+                </ReactCrop>
+            )}
+        </div>
+    );
+};
+
+export default MyImageCropper;