@visns-studio/visns-components 4.7.0 → 4.7.2

package/components/cms/DropZone.jsx

@@ -1,349 +0,0 @@
-import React, { useEffect, useState, useCallback } from 'react';
-import { motion } from 'framer-motion';
-import { useDropzone } from 'react-dropzone';
-import { confirmAlert } from 'react-confirm-alert';
-import { CircleX, File, TrashCan } from 'akar-icons';
-import { toast } from 'react-toastify';
-import { arrayMoveImmutable } from 'array-move';
-import Popup from 'reactjs-popup';
-
-import 'react-confirm-alert/src/react-confirm-alert.css';
-
-import CustomFetch from '../crm/Fetch';
-import SortableList from './sorting/List';
-
-function VisnsDropZone({ fetchData, files, settings }) {
-    const [data, setData] = useState(files);
-
-    /** Modal States */
-    const [modalData, setModalData] = useState({
-        id: 0,
-        title: '',
-        description: '',
-    });
-    const [modalShow, setModalShow] = useState(false);
-
-    /** Modal Functions */
-    const modalOpen = () => {
-        setModalShow(true);
-    };
-
-    const modalClose = () => {
-        setModalShow(false);
-    };
-
-    const [loadingProgress, setLoadingProgress] = useState(0);
-
-    const onSortEnd = ({ oldIndex, newIndex }) => {
-        setData((prevItem) => arrayMoveImmutable(prevItem, oldIndex, newIndex));
-    };
-
-    const onDrop = useCallback((acceptedFiles) => {
-        acceptedFiles.forEach((a) => {
-            Vapor.store(a, {
-                progress: (progress) => {
-                    setLoadingProgress(progress * 100);
-                },
-            }).then((response) => {
-                setLoadingProgress(0);
-                CustomFetch(
-                    settings.url,
-                    settings.method,
-                    {
-                        uuid: response.uuid,
-                        key: response.key,
-                        bucket: response.bucket,
-                        filename: a.name,
-                        filesize: a.size,
-                        extension: response.extension,
-                        ...settings.data,
-                    },
-                    function (result) {
-                        if (result.error === '') {
-                            if (typeof fetchData === 'function') {
-                                fetchData();
-
-                                toast.success(
-                                    'File has been successfully uploaded.'
-                                );
-                            }
-                        } else {
-                            toast.error(String(result.error));
-                        }
-                    }
-                );
-            });
-        });
-    }, []);
-
-    const { getRootProps, getInputProps, isDragActive } = useDropzone({
-        onDrop,
-    });
-
-    const handleDownload = (id) => {
-        if (id && id > 0 && settings.model && settings.model !== '') {
-            window.open(`/ajax/files/download/${id}/${settings.model}`);
-        } else {
-            toast.warning('Issue with downloading the selected file.');
-        }
-    };
-
-    const handleChange = (e) => {
-        const { name, value } = e.target;
-
-        setModalData((prevState) => ({
-            ...prevState,
-            [name]: value,
-        }));
-    };
-
-    const handleEdit = async (fileData) => {
-        try {
-            const res = await CustomFetch(
-                `/ajax/files/${fileData.id}`,
-                'GET',
-                {}
-            );
-
-            setModalData((prevState) => ({
-                ...prevState,
-                id: res.data.id,
-                file_name: res.data.file_name,
-                title: res.data.file_title,
-                description: res.data.file_description,
-            }));
-
-            modalOpen();
-        } catch (error) {
-            console.info(error);
-        }
-    };
-
-    const handleDelete = (id, name) => {
-        if (id && id > 0) {
-            confirmAlert({
-                title: 'Confirm to Delete File',
-                message: 'Are you sure you want to delete ' + name,
-                buttons: [
-                    {
-                        label: 'Yes',
-                        onClick: () => {
-                            CustomFetch(
-                                `/ajax/files/delete`,
-                                'POST',
-                                {
-                                    file_id: id,
-                                },
-                                function (result) {
-                                    if (result.error === '') {
-                                        if (typeof fetchData === 'function') {
-                                            fetchData();
-                                        }
-                                    }
-                                }
-                            );
-                        },
-                    },
-                    {
-                        label: 'No',
-                        onClick: () => close(),
-                    },
-                ],
-            });
-        } else {
-            toast.error('Issue with deleting the selected file.');
-        }
-    };
-
-    const handleSubmit = async (e) => {
-        try {
-            if (e) {
-                e.preventDefault();
-            }
-
-            const res = await CustomFetch(
-                `/ajax/files/${modalData.id}`,
-                'PUT',
-                {
-                    file_name: modalData.file_name,
-                    file_title: modalData.title,
-                    file_description: modalData.description,
-                }
-            );
-
-            if (res.data.error === '') {
-                toast.success('File metadata has been successfully updated.');
-                modalClose();
-
-                if (typeof fetchData === 'function') {
-                    fetchData();
-                }
-            } else {
-                toast.error(res.data.error);
-            }
-        } catch (error) {
-            console.info(error);
-        }
-    };
-
-    useEffect(() => {
-        if (data?.length > 0) {
-            CustomFetch(
-                '/ajax/files/sort_update',
-                'POST',
-                {
-                    list: data,
-                },
-                function (result) {
-                    if (result.error === '') {
-                    } else {
-                        toast.error(String(result.error));
-                    }
-                }
-            );
-        }
-    }, [data]);
-
-    useEffect(() => {
-        setData(files);
-    }, [files]);
-
-    return (
-        <>
-            {settings.type === 'gallery' ? (
-                <div className="image-container">
-                    {data && data.length > 0 ? (
-                        <SortableList
-                            items={data}
-                            onSortEnd={onSortEnd}
-                            axis="xy"
-                            helperClass="dragitem"
-                            transitionDuration={250}
-                            handleDelete={handleDelete}
-                            handleEdit={handleEdit}
-                            useDragHandle
-                            showImage={true}
-                        />
-                    ) : null}
-                </div>
-            ) : null}
-            <div className="progress">
-                <motion.div
-                    className="progress__bar"
-                    initial={{ width: '0%' }}
-                    animate={{
-                        width: loadingProgress + '%',
-                    }}
-                    transition={{
-                        duration: 1,
-                        ease: [0.165, 0.84, 0.44, 1.0],
-                    }}
-                />
-            </div>
-            <section className="dropzone__container">
-                <div {...getRootProps()}>
-                    <input {...getInputProps()} />
-                    {isDragActive ? (
-                        <p>Drop the files here ...</p>
-                    ) : (
-                        <p>
-                            Drag 'n' drop some files here, or click to select
-                            files
-                        </p>
-                    )}
-                </div>
-                {settings.type !== 'gallery' ? (
-                    <ul className="dropzone__files">
-                        {data && data.length > 0
-                            ? data.map((a, b) => (
-                                  <li
-                                      onClick={() => {
-                                          handleDownload(a.id);
-                                      }}
-                                      key={'tf-' + b}
-                                  >
-                                      <File strokeWidth={2} size={18} />
-                                      {a.file_name}
-                                      <button
-                                          onClick={(e) => {
-                                              e.preventDefault();
-                                              e.stopPropagation();
-
-                                              handleDelete(a.id, a.file_name);
-                                          }}
-                                      >
-                                          <TrashCan strokeWidth={2} size={18} />
-                                      </button>
-                                  </li>
-                              ))
-                            : null}
-                    </ul>
-                ) : null}
-            </section>
-            <Popup
-                open={modalShow}
-                onClose={modalClose}
-                closeOnDocumentClick={false}
-            >
-                <div className="modalwrap top--modal">
-                    <div className="modal">
-                        <div className="modal__header">
-                            <h1>Update File Metadata</h1>
-                            <button
-                                className="modal__close"
-                                onClick={modalClose}
-                            >
-                                <CircleX strokeWidth={1} size={24} />
-                            </button>
-                        </div>
-                        <div className="modal__content">
-                            <div className="formcontainer">
-                                <form
-                                    className="modalForm"
-                                    onSubmit={handleSubmit}
-                                >
-                                    <div className="formItem fwItem">
-                                        <label className="fi__label">
-                                            <input
-                                                type="text"
-                                                name="title"
-                                                onChange={handleChange}
-                                                value={modalData.title}
-                                            />
-                                            <span className="fi__span">
-                                                Title
-                                            </span>
-                                        </label>
-                                    </div>
-                                    <div className="formItem fwItem">
-                                        <label className="fi__label">
-                                            <textarea
-                                                name="description"
-                                                rows="5"
-                                                onChange={handleChange}
-                                                value={modalData.description}
-                                            ></textarea>
-                                            <span className="fi__span">
-                                                Description
-                                            </span>
-                                        </label>
-                                    </div>
-                                    <div className="formItem fwItem lastItem">
-                                        <button
-                                            className="btn modalsave"
-                                            type="submit"
-                                        >
-                                            Save
-                                        </button>
-                                    </div>
-                                </form>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </Popup>
-        </>
-    );
-}
-
-export default VisnsDropZone;