@ludo.ninja/components 1.1.6 → 1.1.7

package/dist/components/editProfile/Cropper/index.jsx

@@ -1,88 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-import React, { useRef, useState } from 'react';
-import Cropper from 'react-cropper';
-import styled from 'styled-components';
-import MainButton from '@/system/Buttons/MainButton';
-var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n\n  .cropper-view-box {\n    border-radius: 50%;\n    outline: none;\n  }\n\n  .cropper-face {\n    background-color: transparent;\n  }\n"], ["\n  width: 100%;\n\n  .cropper-view-box {\n    border-radius: 50%;\n    outline: none;\n  }\n\n  .cropper-face {\n    background-color: transparent;\n  }\n"])));
-var StyledButtons = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin: 0 30px 40px 30px;\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin: 0 30px 40px 30px;\n"])));
-var BasicCropper = function (_a) {
-    var defaultSrc = _a.defaultSrc, cropperStyles = _a.cropperStyles, setFile = _a.setFile, 
-    // hideWithReset,
-    hide = _a.hide, setUserPic = _a.setUserPic, errorTypes = _a.errorTypes, setIsError = _a.setIsError;
-    var _b = useState(), cropper = _b[0], setCropper = _b[1];
-    var cropperRef = useRef(null);
-    var maxSizeInMb = 1024 * 10;
-    var getCropData = function () {
-        if (typeof cropper !== 'undefined') {
-            cropper.getCroppedCanvas({
-                imageSmoothingQuality: 'medium',
-            });
-            cropper.getCroppedCanvas().toBlob(function (blob) { return __awaiter(void 0, void 0, void 0, function () {
-                var filesizeInMb;
-                return __generator(this, function (_a) {
-                    filesizeInMb = Math.floor((blob === null || blob === void 0 ? void 0 : blob.size) / errorTypes.imageIsUpOfSize.size);
-                    if (filesizeInMb > maxSizeInMb) {
-                        hide();
-                        errorTypes.imageIsUpOfSize.currentMessage = "Current size ".concat(filesizeInMb, " KB");
-                        setIsError(errorTypes.imageIsUpOfSize);
-                    }
-                    setFile(new File([blob], 'userpic', { type: blob === null || blob === void 0 ? void 0 : blob.type }));
-                    setUserPic(cropper.getCroppedCanvas().toDataURL());
-                    hide();
-                    return [2 /*return*/];
-                });
-            }); });
-        }
-    };
-    return (<>
-      <Wrapper>
-        <Cropper style={cropperStyles} zoomTo={0.5} zoomOnWheel={true} zoomable={true} src={defaultSrc} aspectRatio={1} viewMode={2} background={false} autoCropArea={1} responsive={true} dragMode="move" checkOrientation={false} onInitialized={function (instance) {
-            setCropper(instance);
-        }} ref={cropperRef} guides={false}/>
-      </Wrapper>
-      <StyledButtons>
-        <MainButton onClick={getCropData} variant="primaryM" text={'Save'}/>
-      </StyledButtons>
-    </>);
-};
-export default BasicCropper;
-var templateObject_1, templateObject_2;

package/dist/components/editProfile/UserPicProfile/index.js

@@ -1,228 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import Dropzone from 'react-dropzone';
-import styled from 'styled-components';
-import { useUserStore } from '@/modules/user/store';
-import { useUiStore } from '@/store/ui';
-import useDeleteUserpic from '@/api/server-medias/mutations/useDeleteUserpic';
-import useUploadUserpic from '@/api/server-medias/mutations/useUploadUserpic';
-import { rotate } from '@/styles/animations';
-import { AccentColor, BorderColorLight, ErrorColor, TextGrayColor, } from '@/styles/colors';
-import NoSsr from '@/components/base/NoSSR';
-import MainButton from '@/system/Buttons/MainButton';
-import { H5 } from '@system';
-import BasicCropper from '../Cropper';
-var StyledUserpic = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-bottom: 1rem;\n\n  .userpic {\n    width: 100%;\n    cursor: pointer;\n    height: 100%;\n    filter: ", ";\n    text-indent: -20000px;\n    border-radius: 50%;\n\n    &_text {\n      color: #c1c8de;\n      font-size: 1.4em;\n      text-align: center;\n    }\n  }\n\n  .noImage {\n    cursor: pointer;\n    display: flex;\n    flex-direction: column;\n    width: 150px;\n    height: 150px;\n    background: #ffffff;\n    border: 1px solid ", ";\n    border-radius: 50%;\n    justify-content: center;\n    align-items: center;\n    text-align: center;\n  }\n\n  .loading {\n    position: absolute;\n    left: 35%;\n    top: 33%;\n    display: ", ";\n    width: 50px;\n    height: 50px;\n    border: 6px solid ", ";\n    border-radius: 50%;\n    border-top-color: transparent;\n    animation: ", " 1s ease-in-out infinite;\n  }\n\n  .acceptDecline_buttons {\n    display: flex;\n    gap: 40px;\n    max-width: 250px;\n    margin: 0 auto;\n    justify-content: space-around;\n\n    button {\n      width: 48px;\n      height: 48px;\n      border-radius: 50%;\n      outline: none;\n      border: none;\n      cursor: pointer;\n\n      :active {\n        outline: 1px blue solid;\n      }\n    }\n\n    .accept_btn {\n      background-image: url('/button_skin/accept.svg');\n      background-size: cover;\n    }\n\n    .decline_btn {\n      background-image: url('/button_skin/decline.svg');\n      background-size: cover;\n    }\n  }\n\n  .delete_button {\n    display: flex;\n    justify-content: center;\n  }\n\n  .flex {\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .content-wrapper {\n    position: relative;\n    width: 150px;\n    height: 150px;\n    border-radius: 50%;\n  }\n"], ["\n  padding-bottom: 1rem;\n\n  .userpic {\n    width: 100%;\n    cursor: pointer;\n    height: 100%;\n    filter: ", ";\n    text-indent: -20000px;\n    border-radius: 50%;\n\n    &_text {\n      color: #c1c8de;\n      font-size: 1.4em;\n      text-align: center;\n    }\n  }\n\n  .noImage {\n    cursor: pointer;\n    display: flex;\n    flex-direction: column;\n    width: 150px;\n    height: 150px;\n    background: #ffffff;\n    border: 1px solid ", ";\n    border-radius: 50%;\n    justify-content: center;\n    align-items: center;\n    text-align: center;\n  }\n\n  .loading {\n    position: absolute;\n    left: 35%;\n    top: 33%;\n    display: ", ";\n    width: 50px;\n    height: 50px;\n    border: 6px solid ", ";\n    border-radius: 50%;\n    border-top-color: transparent;\n    animation: ", " 1s ease-in-out infinite;\n  }\n\n  .acceptDecline_buttons {\n    display: flex;\n    gap: 40px;\n    max-width: 250px;\n    margin: 0 auto;\n    justify-content: space-around;\n\n    button {\n      width: 48px;\n      height: 48px;\n      border-radius: 50%;\n      outline: none;\n      border: none;\n      cursor: pointer;\n\n      :active {\n        outline: 1px blue solid;\n      }\n    }\n\n    .accept_btn {\n      background-image: url('/button_skin/accept.svg');\n      background-size: cover;\n    }\n\n    .decline_btn {\n      background-image: url('/button_skin/decline.svg');\n      background-size: cover;\n    }\n  }\n\n  .delete_button {\n    display: flex;\n    justify-content: center;\n  }\n\n  .flex {\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .content-wrapper {\n    position: relative;\n    width: 150px;\n    height: 150px;\n    border-radius: 50%;\n  }\n"])), function (props) { return (props.isLoading ? 'blur(4px)' : 'none'); }, BorderColorLight, function (props) { return (props.isLoading ? 'inline-block' : 'none'); }, AccentColor, rotate);
-var SWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  align-items: center;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  align-items: center;\n"])));
-var cropperStyles = {
-    height: 430,
-    width: '100%',
-    maxWidth: 721,
-    margin: '40px 0 20px 0',
-};
-var errorTypes = {
-    imageIsUpOfSize: {
-        isError: true,
-        size: 1024 * 10,
-        currentMessage: '',
-        message: 'Image size size over 10 MB',
-    },
-    imageIsUpOfDimensions: {
-        isError: true,
-        size: 20,
-        currentMessage: '',
-        message: '(Max 1200 px x 1200 px)',
-    },
-};
-var UserPicProfile = function (_a) {
-    var defaultImage = _a.defaultImage;
-    var _b = useState(null), imgFile = _b[0], setImgFile = _b[1];
-    var _c = useState(null), userpic = _c[0], setUserPic = _c[1];
-    var _d = useState(false), isDefaultImage = _d[0], setDefaultImage = _d[1];
-    var _e = useState(false), isImageLoading = _e[0], setImageLoading = _e[1];
-    var _f = useState(null), error = _f[0], setIsError = _f[1];
-    var _g = useUiStore(function (state) { return ({
-        openModal: state.openModal,
-        closeModal: state.closeModal,
-    }); }), openModal = _g.openModal, closeModal = _g.closeModal;
-    var uploadUserpic = useUploadUserpic().uploadUserpic;
-    var updateProfileData = useUserStore(function (state) { return ({
-        updateProfileData: state.updateProfileData,
-    }); }).updateProfileData;
-    useEffect(function () {
-        if (defaultImage && !defaultImage.includes('default_')) {
-            setUserPic(defaultImage);
-            setDefaultImage(true);
-        }
-    }, [defaultImage]);
-    var deleteUserpic = useDeleteUserpic().deleteUserpic;
-    var renderAcceptDeclineButtons = function () {
-        if (imgFile) {
-            return (_jsxs("div", { className: 'acceptDecline_buttons', children: [renderAcceptButton(), _jsx("button", { className: 'decline_btn', onClick: clearFiles })] }));
-        }
-    };
-    var renderDeleteBtn = function () {
-        if (isDefaultImage && userpic) {
-            return (_jsx("div", { className: 'delete_button', children: _jsx(MainButton, { onClick: deleteRequest, variant: "secondary", text: 'Delete' }) }));
-        }
-    };
-    var renderAcceptButton = function () {
-        if (!error) {
-            return _jsx("button", { className: 'accept_btn', onClick: uploadRequest });
-        }
-    };
-    var hideWithReset = function () {
-        clearFiles();
-        closeModal();
-    };
-    var clearFiles = function () {
-        setImgFile(null);
-        setUserPic(null);
-        setIsError(null);
-        setDefaultImage(false);
-    };
-    var deleteRequest = function () { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    setImageLoading(true);
-                    return [4 /*yield*/, deleteUserpic().then(function (res) {
-                            var data = res.data;
-                            if (data === null || data === void 0 ? void 0 : data.deleteUserpic) {
-                                setImageLoading(false);
-                                setDefaultImage(false);
-                                clearFiles();
-                            }
-                            else {
-                                setImageLoading(true);
-                            }
-                        })];
-                case 1:
-                    _a.sent();
-                    return [2 /*return*/];
-            }
-        });
-    }); };
-    var uploadRequest = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var result;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    setImageLoading(true);
-                    return [4 /*yield*/, uploadUserpic(imgFile)
-                            .catch(function (reason) {
-                            // console.log('reason', reason);
-                            setIsError({
-                                size: 20,
-                                currentMessage: reason.message,
-                            });
-                        })
-                            .finally(function () {
-                            setImgFile(null);
-                            setImageLoading(false);
-                            setDefaultImage(true);
-                        })];
-                case 1:
-                    result = _a.sent();
-                    if (result === null || result === void 0 ? void 0 : result.data.uploadUserpic) {
-                        updateProfileData({
-                            userpic: result.data.uploadUserpic,
-                        });
-                    }
-                    return [2 /*return*/];
-            }
-        });
-    }); };
-    var reader = new FileReader();
-    var onDropHandler = function (files) {
-        files.map(function (file) {
-            reader.readAsDataURL(file);
-        });
-    };
-    var imageContent = function () {
-        if (userpic) {
-            return (_jsxs(_Fragment, { children: [_jsx("img", { src: userpic, className: "userpic", alt: 'userpic', onError: function () { return setUserPic(null); } }), _jsx("div", { className: 'loading' })] }));
-        }
-        return (_jsxs("div", { className: "noImage", children: [_jsx("img", { style: { width: '25px', height: '25px', marginBottom: '15px' }, src: '/settings_page/upload.svg' }), _jsxs("span", { style: { color: TextGrayColor, fontSize: '13px', fontWeight: 400 }, children: ["Upload profile ", _jsx("br", {}), " picture"] })] }));
-    };
-    var renderUserPicText = function () {
-        if (!error) {
-            // if (imgFile || userpic) return;
-            return (_jsxs(H5, { color: TextGrayColor, style: { maxWidth: '275px', margin: '0 auto', textAlign: 'center' }, children: ["File types supported:", _jsx("br", {}), "SVG, JPG, PNG, GIF. ", _jsx("br", {}), "Up to 1 MB", _jsx("br", {}), "(Max 1200 px x 1200 px)"] }));
-        }
-        else {
-            return (_jsxs("p", { style: { color: ErrorColor }, children: [error.currentMessage, _jsx("br", {})] }));
-        }
-    };
-    return (_jsx(StyledUserpic, { isLoading: isImageLoading, children: _jsxs("div", { style: {
-                paddingBottom: '2rem',
-                display: 'flex',
-                flexDirection: 'column',
-                gap: 12,
-            }, children: [_jsx(Dropzone, { accept: { 'image/*': [] }, multiple: false, onDrop: function (files) { return __awaiter(void 0, void 0, void 0, function () {
-                        return __generator(this, function (_a) {
-                            onDropHandler(files);
-                            reader.onload = function (event) {
-                                var _a;
-                                openModal(_jsx(BasicCropper, { defaultSrc: (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.result, cropperStyles: cropperStyles, setFile: setImgFile, hide: closeModal, hideWithReset: hideWithReset, setUserPic: setUserPic, errorTypes: errorTypes, setIsError: setIsError }));
-                            };
-                            return [2 /*return*/];
-                        });
-                    }); }, children: function (_a) {
-                        var getRootProps = _a.getRootProps, getInputProps = _a.getInputProps;
-                        return (_jsxs(SWrapper, __assign({ style: { pointerEvents: userpic ? 'none' : 'auto' } }, getRootProps(), { children: [_jsx("input", __assign({}, getInputProps())), _jsx(NoSsr, { children: _jsx("div", { className: "content-wrapper", children: imageContent() }) })] })));
-                    } }), renderAcceptDeclineButtons(), renderDeleteBtn(), _jsx("div", { className: "userpic_text", children: renderUserPicText() })] }) }));
-};
-export default UserPicProfile;
-var templateObject_1, templateObject_2;

package/dist/components/editProfile/UserPicProfile/index.jsx

@@ -1,254 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-import React, { useEffect, useState } from 'react';
-import Dropzone from 'react-dropzone';
-import styled from 'styled-components';
-import { useUserStore } from '@/modules/user/store';
-import { useUiStore } from '@/store/ui';
-import useDeleteUserpic from '@/api/server-medias/mutations/useDeleteUserpic';
-import useUploadUserpic from '@/api/server-medias/mutations/useUploadUserpic';
-import { rotate } from '@/styles/animations';
-import { AccentColor, BorderColorLight, ErrorColor, TextGrayColor, } from '@/styles/colors';
-import NoSsr from '@/components/base/NoSSR';
-import MainButton from '@/system/Buttons/MainButton';
-import { H5 } from '@system';
-import BasicCropper from '../Cropper';
-var StyledUserpic = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-bottom: 1rem;\n\n  .userpic {\n    width: 100%;\n    cursor: pointer;\n    height: 100%;\n    filter: ", ";\n    text-indent: -20000px;\n    border-radius: 50%;\n\n    &_text {\n      color: #c1c8de;\n      font-size: 1.4em;\n      text-align: center;\n    }\n  }\n\n  .noImage {\n    cursor: pointer;\n    display: flex;\n    flex-direction: column;\n    width: 150px;\n    height: 150px;\n    background: #ffffff;\n    border: 1px solid ", ";\n    border-radius: 50%;\n    justify-content: center;\n    align-items: center;\n    text-align: center;\n  }\n\n  .loading {\n    position: absolute;\n    left: 35%;\n    top: 33%;\n    display: ", ";\n    width: 50px;\n    height: 50px;\n    border: 6px solid ", ";\n    border-radius: 50%;\n    border-top-color: transparent;\n    animation: ", " 1s ease-in-out infinite;\n  }\n\n  .acceptDecline_buttons {\n    display: flex;\n    gap: 40px;\n    max-width: 250px;\n    margin: 0 auto;\n    justify-content: space-around;\n\n    button {\n      width: 48px;\n      height: 48px;\n      border-radius: 50%;\n      outline: none;\n      border: none;\n      cursor: pointer;\n\n      :active {\n        outline: 1px blue solid;\n      }\n    }\n\n    .accept_btn {\n      background-image: url('/button_skin/accept.svg');\n      background-size: cover;\n    }\n\n    .decline_btn {\n      background-image: url('/button_skin/decline.svg');\n      background-size: cover;\n    }\n  }\n\n  .delete_button {\n    display: flex;\n    justify-content: center;\n  }\n\n  .flex {\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .content-wrapper {\n    position: relative;\n    width: 150px;\n    height: 150px;\n    border-radius: 50%;\n  }\n"], ["\n  padding-bottom: 1rem;\n\n  .userpic {\n    width: 100%;\n    cursor: pointer;\n    height: 100%;\n    filter: ", ";\n    text-indent: -20000px;\n    border-radius: 50%;\n\n    &_text {\n      color: #c1c8de;\n      font-size: 1.4em;\n      text-align: center;\n    }\n  }\n\n  .noImage {\n    cursor: pointer;\n    display: flex;\n    flex-direction: column;\n    width: 150px;\n    height: 150px;\n    background: #ffffff;\n    border: 1px solid ", ";\n    border-radius: 50%;\n    justify-content: center;\n    align-items: center;\n    text-align: center;\n  }\n\n  .loading {\n    position: absolute;\n    left: 35%;\n    top: 33%;\n    display: ", ";\n    width: 50px;\n    height: 50px;\n    border: 6px solid ", ";\n    border-radius: 50%;\n    border-top-color: transparent;\n    animation: ", " 1s ease-in-out infinite;\n  }\n\n  .acceptDecline_buttons {\n    display: flex;\n    gap: 40px;\n    max-width: 250px;\n    margin: 0 auto;\n    justify-content: space-around;\n\n    button {\n      width: 48px;\n      height: 48px;\n      border-radius: 50%;\n      outline: none;\n      border: none;\n      cursor: pointer;\n\n      :active {\n        outline: 1px blue solid;\n      }\n    }\n\n    .accept_btn {\n      background-image: url('/button_skin/accept.svg');\n      background-size: cover;\n    }\n\n    .decline_btn {\n      background-image: url('/button_skin/decline.svg');\n      background-size: cover;\n    }\n  }\n\n  .delete_button {\n    display: flex;\n    justify-content: center;\n  }\n\n  .flex {\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .content-wrapper {\n    position: relative;\n    width: 150px;\n    height: 150px;\n    border-radius: 50%;\n  }\n"])), function (props) { return (props.isLoading ? 'blur(4px)' : 'none'); }, BorderColorLight, function (props) { return (props.isLoading ? 'inline-block' : 'none'); }, AccentColor, rotate);
-var SWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  align-items: center;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  align-items: center;\n"])));
-var cropperStyles = {
-    height: 430,
-    width: '100%',
-    maxWidth: 721,
-    margin: '40px 0 20px 0',
-};
-var errorTypes = {
-    imageIsUpOfSize: {
-        isError: true,
-        size: 1024 * 10,
-        currentMessage: '',
-        message: 'Image size size over 10 MB',
-    },
-    imageIsUpOfDimensions: {
-        isError: true,
-        size: 20,
-        currentMessage: '',
-        message: '(Max 1200 px x 1200 px)',
-    },
-};
-var UserPicProfile = function (_a) {
-    var defaultImage = _a.defaultImage;
-    var _b = useState(null), imgFile = _b[0], setImgFile = _b[1];
-    var _c = useState(null), userpic = _c[0], setUserPic = _c[1];
-    var _d = useState(false), isDefaultImage = _d[0], setDefaultImage = _d[1];
-    var _e = useState(false), isImageLoading = _e[0], setImageLoading = _e[1];
-    var _f = useState(null), error = _f[0], setIsError = _f[1];
-    var _g = useUiStore(function (state) { return ({
-        openModal: state.openModal,
-        closeModal: state.closeModal,
-    }); }), openModal = _g.openModal, closeModal = _g.closeModal;
-    var uploadUserpic = useUploadUserpic().uploadUserpic;
-    var updateProfileData = useUserStore(function (state) { return ({
-        updateProfileData: state.updateProfileData,
-    }); }).updateProfileData;
-    useEffect(function () {
-        if (defaultImage && !defaultImage.includes('default_')) {
-            setUserPic(defaultImage);
-            setDefaultImage(true);
-        }
-    }, [defaultImage]);
-    var deleteUserpic = useDeleteUserpic().deleteUserpic;
-    var renderAcceptDeclineButtons = function () {
-        if (imgFile) {
-            return (<div className={'acceptDecline_buttons'}>
-          {renderAcceptButton()}
-          <button className={'decline_btn'} onClick={clearFiles}/>
-        </div>);
-        }
-    };
-    var renderDeleteBtn = function () {
-        if (isDefaultImage && userpic) {
-            return (<div className={'delete_button'}>
-          <MainButton onClick={deleteRequest} variant="secondary" text={'Delete'}/>
-        </div>);
-        }
-    };
-    var renderAcceptButton = function () {
-        if (!error) {
-            return <button className={'accept_btn'} onClick={uploadRequest}/>;
-        }
-    };
-    var hideWithReset = function () {
-        clearFiles();
-        closeModal();
-    };
-    var clearFiles = function () {
-        setImgFile(null);
-        setUserPic(null);
-        setIsError(null);
-        setDefaultImage(false);
-    };
-    var deleteRequest = function () { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    setImageLoading(true);
-                    return [4 /*yield*/, deleteUserpic().then(function (res) {
-                            var data = res.data;
-                            if (data === null || data === void 0 ? void 0 : data.deleteUserpic) {
-                                setImageLoading(false);
-                                setDefaultImage(false);
-                                clearFiles();
-                            }
-                            else {
-                                setImageLoading(true);
-                            }
-                        })];
-                case 1:
-                    _a.sent();
-                    return [2 /*return*/];
-            }
-        });
-    }); };
-    var uploadRequest = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var result;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    setImageLoading(true);
-                    return [4 /*yield*/, uploadUserpic(imgFile)
-                            .catch(function (reason) {
-                            // console.log('reason', reason);
-                            setIsError({
-                                size: 20,
-                                currentMessage: reason.message,
-                            });
-                        })
-                            .finally(function () {
-                            setImgFile(null);
-                            setImageLoading(false);
-                            setDefaultImage(true);
-                        })];
-                case 1:
-                    result = _a.sent();
-                    if (result === null || result === void 0 ? void 0 : result.data.uploadUserpic) {
-                        updateProfileData({
-                            userpic: result.data.uploadUserpic,
-                        });
-                    }
-                    return [2 /*return*/];
-            }
-        });
-    }); };
-    var reader = new FileReader();
-    var onDropHandler = function (files) {
-        files.map(function (file) {
-            reader.readAsDataURL(file);
-        });
-    };
-    var imageContent = function () {
-        if (userpic) {
-            return (<>
-          <img src={userpic} className="userpic" alt={'userpic'} onError={function () { return setUserPic(null); }}/>
-          <div className={'loading'}/>
-        </>);
-        }
-        return (<div className="noImage">
-        <img style={{ width: '25px', height: '25px', marginBottom: '15px' }} src={'/settings_page/upload.svg'}/>
-        <span style={{ color: TextGrayColor, fontSize: '13px', fontWeight: 400 }}>
-          Upload profile <br /> picture
-        </span>
-      </div>);
-    };
-    var renderUserPicText = function () {
-        if (!error) {
-            // if (imgFile || userpic) return;
-            return (<H5 color={TextGrayColor} style={{ maxWidth: '275px', margin: '0 auto', textAlign: 'center' }}>
-          File types supported:
-          <br />
-          SVG, JPG, PNG, GIF. <br />
-          Up to 1 MB
-          <br />
-          (Max 1200 px x 1200 px)
-        </H5>);
-        }
-        else {
-            return (<p style={{ color: ErrorColor }}>
-          {error.currentMessage}
-          <br />
-          {/*{error.message}*/}
-        </p>);
-        }
-    };
-    return (<StyledUserpic isLoading={isImageLoading}>
-      <div style={{
-            paddingBottom: '2rem',
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 12,
-        }}>
-        <Dropzone accept={{ 'image/*': [] }} multiple={false} onDrop={function (files) { return __awaiter(void 0, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                onDropHandler(files);
-                reader.onload = function (event) {
-                    var _a;
-                    openModal(<BasicCropper defaultSrc={(_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.result} cropperStyles={cropperStyles} setFile={setImgFile} hide={closeModal} hideWithReset={hideWithReset} setUserPic={setUserPic} errorTypes={errorTypes} setIsError={setIsError}/>);
-                };
-                return [2 /*return*/];
-            });
-        }); }}>
-          {function (_a) {
-            var getRootProps = _a.getRootProps, getInputProps = _a.getInputProps;
-            return (<SWrapper style={{ pointerEvents: userpic ? 'none' : 'auto' }} {...getRootProps()}>
-              <input {...getInputProps()}/>
-              <NoSsr>
-                <div className="content-wrapper">{imageContent()}</div>
-              </NoSsr>
-            </SWrapper>);
-        }}
-        </Dropzone>
-        {renderAcceptDeclineButtons()}
-        {renderDeleteBtn()}
-        <div className="userpic_text">{renderUserPicText()}</div>
-      </div>
-    </StyledUserpic>);
-};
-export default UserPicProfile;
-var templateObject_1, templateObject_2;

package/dist/components/favoriteList/add/addAssetToFavoriteList/index.js

@@ -1,67 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import ChooseGalleryItems from '@/modules/gallery/ui/chooseGalleryItems';
-import CreateGalleryForm from '@/modules/gallery/ui/createGalleryForm';
-import { useUiStore } from '@/store/ui';
-import { useAddAssetsToGalleryV2 } from '@/api/server-galleries/mutations/useAddAssetsToGallery';
-import { useCreateFavoriteListV2 } from '@/api/server-galleries/mutations/useCreateFavorites';
-// Component
-var AddAssetToFavoriteList = function (_a) {
-    var ids = _a.ids;
-    var _b = useState(false), isNeedAddFavList = _b[0], setAddFavList = _b[1];
-    var _c = useCreateFavoriteListV2(), createFavorites = _c.createFavorites, errorCreateFavorites = _c.errorCreateFavorites;
-    var _d = useAddAssetsToGalleryV2(), addAssetsToGallery = _d.addAssetsToGallery, isAdded = _d.isAdded, error = _d.error;
-    var closeModalSidebarPortal = useUiStore(function (state) { return state.closeModalSidebarPortal; });
-    var addMethod = function (galleryId, ids) { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0: return [4 /*yield*/, addAssetsToGallery({ galleryId: galleryId, assetIds: ids })];
-                case 1:
-                    _a.sent();
-                    setTimeout(function () { return closeModalSidebarPortal(); }, 500);
-                    return [2 /*return*/];
-            }
-        });
-    }); };
-    return (_jsx("div", { children: isNeedAddFavList ? (_jsx(CreateGalleryForm, { setAddGallery: setAddFavList, title: 'Create Favourite List', inputPlaceHolderText: 'List Name', 
-            // ids={ids}
-            createMethod: createFavorites, error: errorCreateFavorites })) : (_jsx(ChooseGalleryItems, { setAddGallery: setAddFavList, title: 'Add to Favourite List', titleBtn: '+ New Favourite List', ids: ids, addMethod: addMethod, isAdded: isAdded, error: error })) }));
-};
-// Export
-export default AddAssetToFavoriteList;