@ludo.ninja/components 1.1.2 → 1.1.4

package/dist/system/Cards/CardMedia/CardVideo/index.jsx

@@ -1,96 +1,57 @@
 import React, { useEffect, useRef, useState } from 'react';
-
 import Skeleton from 'react-loading-skeleton';
-
 import StyledImg from '@/system/Cards/Styles/Image';
 import StyledVideo from '@/system/Cards/Styles/Video';
-
 import PauseIcon from '@/public/video/pause.svg';
 import PlayIcon from '@/public/video/play.svg';
-
 // Component
 var CardVideo = function (_a) {
-  var videoSrc = _a.videoSrc,
-    errorImg = _a.errorImg,
-    alt = _a.alt;
-  var _b = useState(null),
-    lVideoSrc = _b[0],
-    setLVideoSrc = _b[1];
-  var _c = useState(false),
-    isPlayIcon = _c[0],
-    setPlayIcon = _c[1];
-  var video = useRef();
-  useEffect(function () {
-    var video = document.createElement('video');
-    video.setAttribute('src', ''.concat(videoSrc));
-    video.addEventListener(
-      'canplay',
-      function () {
-        setLVideoSrc(videoSrc);
-        setPlayIcon(true);
-      },
-      false
-    );
-    video.addEventListener(
-      'error',
-      function () {
-        setLVideoSrc(null);
+    var videoSrc = _a.videoSrc, errorImg = _a.errorImg, alt = _a.alt;
+    var _b = useState(null), lVideoSrc = _b[0], setLVideoSrc = _b[1];
+    var _c = useState(false), isPlayIcon = _c[0], setPlayIcon = _c[1];
+    var video = useRef();
+    useEffect(function () {
+        var video = document.createElement('video');
+        video.setAttribute('src', "".concat(videoSrc));
+        video.addEventListener('canplay', function () {
+            setLVideoSrc(videoSrc);
+            setPlayIcon(true);
+        }, false);
+        video.addEventListener('error', function () {
+            setLVideoSrc(null);
+            setPlayIcon(false);
+        }, false);
+        return function () { return video.removeEventListener('canplay', function () { return setLVideoSrc(null); }); };
+    }, []);
+    var playVideo = function () {
+        var _a;
+        video.current && ((_a = video.current) === null || _a === void 0 ? void 0 : _a.play());
         setPlayIcon(false);
-      },
-      false
-    );
-    return function () {
-      return video.removeEventListener('canplay', function () {
-        return setLVideoSrc(null);
-      });
     };
-  }, []);
-  var playVideo = function () {
-    var _a;
-    video.current &&
-      ((_a = video.current) === null || _a === void 0 ? void 0 : _a.play());
-    setPlayIcon(false);
-  };
-  var pauseVideo = function () {
-    var _a;
-    video.current &&
-      ((_a = video.current) === null || _a === void 0 ? void 0 : _a.pause());
-    setPlayIcon(true);
-  };
-  var renderImage = function () {
-    return <StyledImg isLoading={false} src={errorImg} alt={alt} />;
-  };
-  if (!videoSrc) return renderImage();
-  return lVideoSrc ? (
-    <>
+    var pauseVideo = function () {
+        var _a;
+        video.current && ((_a = video.current) === null || _a === void 0 ? void 0 : _a.pause());
+        setPlayIcon(true);
+    };
+    var renderImage = function () { return (<StyledImg isLoading={false} src={errorImg} alt={alt}/>); };
+    if (!videoSrc)
+        return renderImage();
+    return lVideoSrc ? (<>
       <StyledVideo ref={video} muted loop playsInline preload={'false'}>
-        <source type="video/mp4" src={lVideoSrc} />
+        <source type="video/mp4" src={lVideoSrc}/>
         <p>{alt}</p>
       </StyledVideo>
       {lVideoSrc.length &&
-        (isPlayIcon ? (
-          <PlayIcon
-            className={'playIcon'}
-            onClick={function (e) {
-              e.preventDefault();
-              e.stopPropagation();
-              playVideo();
-            }}
-          />
-        ) : (
-          <PauseIcon
-            className={'pauseIcon'}
-            onClick={function (e) {
-              e.preventDefault();
-              e.stopPropagation();
-              pauseVideo();
-            }}
-          />
-        ))}
-    </>
-  ) : (
-    <Skeleton height={'100%'} width={'100%'} style={{ lineHeight: 'normal' }} />
-  );
+            (isPlayIcon ? (<PlayIcon className={'playIcon'} onClick={function (e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    playVideo();
+                }}/>) : (<PauseIcon className={'pauseIcon'} onClick={function (e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    pauseVideo();
+                }}/>))}
+    </>) : (<Skeleton height={'100%'} width={'100%'} style={{ lineHeight: 'normal' }}/>);
 };
 // Export
 export default CardVideo;

package/dist/system/Cards/CardRank/index.jsx

@@ -1,149 +1,33 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import React from 'react';
-
 import styled from 'styled-components';
-
 import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
 import { getRankColor } from '@ludo.ninja/utils';
-
 import { mediaQuery } from '@/styles/ScreenWidth';
 import { BlackColor, InactiveButtonColor, WhiteColor } from '@/styles/colors';
-
 import { Box, Flex } from '@system';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
 // Styles
-var StyledCardRank = styled.div(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      [
-        '\n  width: 64px;\n  height: 24px;\n  background-color: ',
-        ';\n  border-radius: 4px;\n  padding: 5px;\n\n  .rankText {\n    color: ',
-        ';\n    margin-right: 4px;\n    font-size: 1.3em;\n    font-weight: 600;\n  }\n\n  .smallText {\n    font-size: 1.2em;\n    letter-spacing: -0.5px;\n  }\n\n  ',
-        ' {\n    width: 43px;\n    height: 18px;\n  }\n\n  ',
-        ' {\n    width: ',
-        ';\n    height: ',
-        ';\n    border-radius: ',
-        ';\n    padding: ',
-        ';\n\n    .rankText {\n      font-size: ',
-        ';\n      margin-right: ',
-        ';\n    }\n\n    .smallText {\n      font-size: ',
-        ';\n      letter-spacing: ',
-        ';\n    }\n  }\n',
-      ],
-      [
-        '\n  width: 64px;\n  height: 24px;\n  background-color: ',
-        ';\n  border-radius: 4px;\n  padding: 5px;\n\n  .rankText {\n    color: ',
-        ';\n    margin-right: 4px;\n    font-size: 1.3em;\n    font-weight: 600;\n  }\n\n  .smallText {\n    font-size: 1.2em;\n    letter-spacing: -0.5px;\n  }\n\n  ',
-        ' {\n    width: 43px;\n    height: 18px;\n  }\n\n  ',
-        ' {\n    width: ',
-        ';\n    height: ',
-        ';\n    border-radius: ',
-        ';\n    padding: ',
-        ';\n\n    .rankText {\n      font-size: ',
-        ';\n      margin-right: ',
-        ';\n    }\n\n    .smallText {\n      font-size: ',
-        ';\n      letter-spacing: ',
-        ';\n    }\n  }\n',
-      ]
-    )),
-  WhiteColor,
-  BlackColor,
-  mediaQuery.phone,
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(64),
-  adaptiveValueCalc(24),
-  adaptiveValueCalc(4),
-  adaptiveValueCalc(5),
-  adaptiveValueCalc(13),
-  adaptiveValueCalc(4),
-  adaptiveValueCalc(12),
-  adaptiveValueCalc(-0.5)
-);
-var SBox = styled(Box)(
-  templateObject_2 ||
-    (templateObject_2 = __makeTemplateObject(
-      [
-        '\n  height: 10px;\n  width: 32px;\n  background: ',
-        ';\n\n  ',
-        ' {\n    height: ',
-        ';\n    width: ',
-        ';\n  }\n',
-      ],
-      [
-        '\n  height: 10px;\n  width: 32px;\n  background: ',
-        ';\n\n  ',
-        ' {\n    height: ',
-        ';\n    width: ',
-        ';\n  }\n',
-      ]
-    )),
-  InactiveButtonColor,
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(10),
-  adaptiveValueCalc(32)
-);
-var RangeValue = styled.div(
-  templateObject_3 ||
-    (templateObject_3 = __makeTemplateObject(
-      [
-        '\n  display: block;\n  background: ',
-        ';\n  height: 10px;\n  width: ',
-        ';\n  border-radius: 2px 0 0 2px;\n\n  ',
-        ' {\n    height: ',
-        ';\n    border-radius: ',
-        ' 0 0 ',
-        ';\n  }\n',
-      ],
-      [
-        '\n  display: block;\n  background: ',
-        ';\n  height: 10px;\n  width: ',
-        ';\n  border-radius: 2px 0 0 2px;\n\n  ',
-        ' {\n    height: ',
-        ';\n    border-radius: ',
-        ' 0 0 ',
-        ';\n  }\n',
-      ]
-    )),
-  function (props) {
-    return props.rankValue && getRankColor(props.rankValue);
-  },
-  function (props) {
-    return ''.concat(props.rankValue, '%');
-  },
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(10),
-  adaptiveValueCalc(2),
-  adaptiveValueCalc(2)
-);
+var StyledCardRank = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 64px;\n  height: 24px;\n  background-color: ", ";\n  border-radius: 4px;\n  padding: 5px;\n\n  .rankText {\n    color: ", ";\n    margin-right: 4px;\n    font-size: 1.3em;\n    font-weight: 600;\n  }\n\n  .smallText {\n    font-size: 1.2em;\n    letter-spacing: -0.5px;\n  }\n\n  ", " {\n    width: 43px;\n    height: 18px;\n  }\n\n  ", " {\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n    padding: ", ";\n\n    .rankText {\n      font-size: ", ";\n      margin-right: ", ";\n    }\n\n    .smallText {\n      font-size: ", ";\n      letter-spacing: ", ";\n    }\n  }\n"], ["\n  width: 64px;\n  height: 24px;\n  background-color: ", ";\n  border-radius: 4px;\n  padding: 5px;\n\n  .rankText {\n    color: ", ";\n    margin-right: 4px;\n    font-size: 1.3em;\n    font-weight: 600;\n  }\n\n  .smallText {\n    font-size: 1.2em;\n    letter-spacing: -0.5px;\n  }\n\n  ", " {\n    width: 43px;\n    height: 18px;\n  }\n\n  ", " {\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n    padding: ", ";\n\n    .rankText {\n      font-size: ", ";\n      margin-right: ", ";\n    }\n\n    .smallText {\n      font-size: ", ";\n      letter-spacing: ", ";\n    }\n  }\n"])), WhiteColor, BlackColor, mediaQuery.phone, mediaQuery.minWidthFourK, adaptiveValueCalc(64), adaptiveValueCalc(24), adaptiveValueCalc(4), adaptiveValueCalc(5), adaptiveValueCalc(13), adaptiveValueCalc(4), adaptiveValueCalc(12), adaptiveValueCalc(-0.5));
+var SBox = styled(Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 10px;\n  width: 32px;\n  background: ", ";\n\n  ", " {\n    height: ", ";\n    width: ", ";\n  }\n"], ["\n  height: 10px;\n  width: 32px;\n  background: ", ";\n\n  ", " {\n    height: ", ";\n    width: ", ";\n  }\n"])), InactiveButtonColor, mediaQuery.minWidthFourK, adaptiveValueCalc(10), adaptiveValueCalc(32));
+var RangeValue = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: block;\n  background: ", ";\n  height: 10px;\n  width: ", ";\n  border-radius: 2px 0 0 2px;\n\n  ", " {\n    height: ", ";\n    border-radius: ", " 0 0 ", ";\n  }\n"], ["\n  display: block;\n  background: ", ";\n  height: 10px;\n  width: ", ";\n  border-radius: 2px 0 0 2px;\n\n  ", " {\n    height: ", ";\n    border-radius: ", " 0 0 ", ";\n  }\n"])), function (props) { return props.rankValue && getRankColor(props.rankValue); }, function (props) { return "".concat(props.rankValue, "%"); }, mediaQuery.minWidthFourK, adaptiveValueCalc(10), adaptiveValueCalc(2), adaptiveValueCalc(2));
 // Component
 var CardRank = function (_a) {
-  var rank = _a.rank;
-  return (
-    <StyledCardRank>
+    var rank = _a.rank;
+    return (<StyledCardRank>
       <Flex alignItems={'center'} height={'100%'}>
         <Box>
-          <p className={'rankText '.concat(!rank && 'smallText')}>
+          <p className={"rankText ".concat(!rank && 'smallText')}>
             {rank ? rank : 'unknown'}
           </p>
         </Box>
-        {Boolean(rank) && (
-          <SBox>
-            <RangeValue rankValue={rank} />
-          </SBox>
-        )}
+        {Boolean(rank) && (<SBox>
+            <RangeValue rankValue={rank}/>
+          </SBox>)}
       </Flex>
-    </StyledCardRank>
-  );
+    </StyledCardRank>);
 };
 // Export
 export default CardRank;

package/dist/system/Cards/CardsGrid/index.jsx

@@ -1,122 +1,58 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import React, { useState } from 'react';
-
 import styled from 'styled-components';
-
 import { mediaQuery } from '@/styles/ScreenWidth';
-
-import {
-  // ProfileNetWorth,
-  ProfileInterests,
-  ProfileWallets,
-} from '@/components/profile';
-
+import { 
+// ProfileNetWorth,
+ProfileInterests, ProfileWallets, } from '@/components/profile';
 import MainButton from '@/system/Buttons/MainButton';
-
 import { isProd } from '@/utils/env';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
 // Styles
-var StyledCardsGrid = styled.div(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      [
-        '\n  margin: 24px 0;\n  display: flex;\n  justify-content: space-between;\n\n  .content {\n    display: grid;\n    grid-template-columns: ',
-        ';\n    gap: 24px;\n    width: ',
-        ';\n  }\n\n  .sidebar {\n    width: 100%;\n    margin-left: 32px;\n\n    ',
-        ' {\n      width: 156px;\n      margin-left: 24px;\n    }\n\n    ',
-        ' {\n      width: 244px;\n      margin-left: 0;\n    }\n\n    &OrganizeBtn {\n      margin-top: 16px;\n      display: block;\n      @media (min-width: 1200px) {\n        display: none;\n      }\n    }\n  }\n\n  @media (max-width: 1200px) {\n    .content {\n      gap: 16px;\n    }\n  }\n\n  @media (max-width: 767px) {\n    flex-direction: column-reverse;\n    .content {\n      gap: 12px;\n      grid-template-columns: ',
-        ';\n      width: 100%;\n      margin-top: 16px;\n    }\n\n    .sidebar {\n      width: 100%;\n      margin-left: 0;\n\n      &OrganizeBtn {\n        display: none;\n      }\n    }\n  }\n',
-      ],
-      [
-        '\n  margin: 24px 0;\n  display: flex;\n  justify-content: space-between;\n\n  .content {\n    display: grid;\n    grid-template-columns: ',
-        ';\n    gap: 24px;\n    width: ',
-        ';\n  }\n\n  .sidebar {\n    width: 100%;\n    margin-left: 32px;\n\n    ',
-        ' {\n      width: 156px;\n      margin-left: 24px;\n    }\n\n    ',
-        ' {\n      width: 244px;\n      margin-left: 0;\n    }\n\n    &OrganizeBtn {\n      margin-top: 16px;\n      display: block;\n      @media (min-width: 1200px) {\n        display: none;\n      }\n    }\n  }\n\n  @media (max-width: 1200px) {\n    .content {\n      gap: 16px;\n    }\n  }\n\n  @media (max-width: 767px) {\n    flex-direction: column-reverse;\n    .content {\n      gap: 12px;\n      grid-template-columns: ',
-        ';\n      width: 100%;\n      margin-top: 16px;\n    }\n\n    .sidebar {\n      width: 100%;\n      margin-left: 0;\n\n      &OrganizeBtn {\n        display: none;\n      }\n    }\n  }\n',
-      ]
-    )),
-  function (props) {
+var StyledCardsGrid = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: 24px 0;\n  display: flex;\n  justify-content: space-between;\n\n  .content {\n    display: grid;\n    grid-template-columns: ", ";\n    gap: 24px;\n    width: ", ";\n  }\n\n  .sidebar {\n    width: 100%;\n    margin-left: 32px;\n\n    ", " {\n      width: 156px;\n      margin-left: 24px;\n    }\n\n    ", " {\n      width: 244px;\n      margin-left: 0;\n    }\n\n    &OrganizeBtn {\n      margin-top: 16px;\n      display: block;\n      @media (min-width: 1200px) {\n        display: none;\n      }\n    }\n  }\n\n  @media (max-width: 1200px) {\n    .content {\n      gap: 16px;\n    }\n  }\n\n  @media (max-width: 767px) {\n    flex-direction: column-reverse;\n    .content {\n      gap: 12px;\n      grid-template-columns: ", ";\n      width: 100%;\n      margin-top: 16px;\n    }\n\n    .sidebar {\n      width: 100%;\n      margin-left: 0;\n\n      &OrganizeBtn {\n        display: none;\n      }\n    }\n  }\n"], ["\n  margin: 24px 0;\n  display: flex;\n  justify-content: space-between;\n\n  .content {\n    display: grid;\n    grid-template-columns: ", ";\n    gap: 24px;\n    width: ", ";\n  }\n\n  .sidebar {\n    width: 100%;\n    margin-left: 32px;\n\n    ", " {\n      width: 156px;\n      margin-left: 24px;\n    }\n\n    ", " {\n      width: 244px;\n      margin-left: 0;\n    }\n\n    &OrganizeBtn {\n      margin-top: 16px;\n      display: block;\n      @media (min-width: 1200px) {\n        display: none;\n      }\n    }\n  }\n\n  @media (max-width: 1200px) {\n    .content {\n      gap: 16px;\n    }\n  }\n\n  @media (max-width: 767px) {\n    flex-direction: column-reverse;\n    .content {\n      gap: 12px;\n      grid-template-columns: ", ";\n      width: 100%;\n      margin-top: 16px;\n    }\n\n    .sidebar {\n      width: 100%;\n      margin-left: 0;\n\n      &OrganizeBtn {\n        display: none;\n      }\n    }\n  }\n"])), function (props) {
     if (props.isEmptyGallery) {
-      return '1fr';
-    } else if (props.isTwoColumnLayout && !props.isForVirtualize) {
-      return '1fr 1fr 1fr';
-    } else if (props.isForVirtualize) {
-      return '1fr';
-    } else {
-      return '1fr 1fr 1fr 1fr';
+        return '1fr';
+    }
+    else if (props.isTwoColumnLayout && !props.isForVirtualize) {
+        return '1fr 1fr 1fr';
+    }
+    else if (props.isForVirtualize) {
+        return '1fr';
+    }
+    else {
+        return '1fr 1fr 1fr 1fr';
     }
-  },
-  function (props) {
-    return props.isTwoColumnLayout ? '74.5%' : '100%';
-  },
-  mediaQuery.minWidthTablet,
-  mediaQuery.minWidthDesktop,
-  function (props) {
+}, function (props) { return (props.isTwoColumnLayout ? '74.5%' : '100%'); }, mediaQuery.minWidthTablet, mediaQuery.minWidthDesktop, function (props) {
     if (props.isEmptyGallery || props.isForVirtualize) {
-      return '1fr';
+        return '1fr';
     }
     return '1fr 1fr';
-  }
-);
+});
 // Component
 var CardsGrid = function (_a) {
-  var children = _a.children,
-    isTwoColumnLayout = _a.isTwoColumnLayout,
+    var children = _a.children, isTwoColumnLayout = _a.isTwoColumnLayout, 
     // isNeedShowNetWorth = true,
-    addMethod = _a.addMethod,
-    creations = _a.creations,
-    isEmptyGallery = _a.isEmptyGallery,
-    isForVirtualize = _a.isForVirtualize,
-    tabsSlot = _a.tabsSlot;
-  var _b = useState(
-      Boolean(
-        creations === null || creations === void 0 ? void 0 : creations.length
-      )
-    ),
-    isNeedShowOrganizeBtn = _b[0],
-    setShowOrganizeBtn = _b[1];
-  var handleClick = function () {
-    setShowOrganizeBtn(false);
-    addMethod && addMethod();
-  };
-  return (
-    <StyledCardsGrid
-      isTwoColumnLayout={isTwoColumnLayout}
-      isEmptyGallery={isEmptyGallery}
-      isForVirtualize={isForVirtualize}
-    >
+    addMethod = _a.addMethod, creations = _a.creations, isEmptyGallery = _a.isEmptyGallery, isForVirtualize = _a.isForVirtualize, tabsSlot = _a.tabsSlot;
+    var _b = useState(Boolean(creations === null || creations === void 0 ? void 0 : creations.length)), isNeedShowOrganizeBtn = _b[0], setShowOrganizeBtn = _b[1];
+    var handleClick = function () {
+        setShowOrganizeBtn(false);
+        addMethod && addMethod();
+    };
+    return (<StyledCardsGrid isTwoColumnLayout={isTwoColumnLayout} isEmptyGallery={isEmptyGallery} isForVirtualize={isForVirtualize}>
       <div className="content">{children}</div>
       {tabsSlot}
-      {isTwoColumnLayout && (
-        <div className="sidebar">
+      {isTwoColumnLayout && (<div className="sidebar">
           {/*{isNeedShowNetWorth && <ProfileNetWorth />}*/}
           {/* // Todo ProfileInterests */}
           {!isProd() && <ProfileInterests />}
           <ProfileWallets />
-          {isNeedShowOrganizeBtn && (
-            <div className="sidebarOrganizeBtn">
-              <MainButton
-                onClick={handleClick}
-                variant="float"
-                text={'Organize'}
-              />
-            </div>
-          )}
-        </div>
-      )}
-    </StyledCardsGrid>
-  );
+          {isNeedShowOrganizeBtn && (<div className="sidebarOrganizeBtn">
+              <MainButton onClick={handleClick} variant="float" text={'Organize'}/>
+            </div>)}
+        </div>)}
+    </StyledCardsGrid>);
 };
 // Export
 export default CardsGrid;