@sendoutcards/quantum-design-ui 1.7.24 → 1.7.25

package/dist/index.es.js

@@ -5,7 +5,6 @@ import Color$1 from 'color';
 import { motion, useMotionValue, useTransform, animate, AnimatePresence, useElementScroll, AnimateSharedLayout } from 'framer-motion';
 import ReactDOM from 'react-dom';
 import fastDeepEqual from 'fast-deep-equal';
-import LazyLoad from 'react-lazyload';
 import useResizeObserver from 'use-resize-observer';
 import ContentLoader from 'react-content-loader';
 import InfiniteScroll from 'react-infinite-scroller';
@@ -7702,7 +7701,7 @@ var UserSuccess = function (_a) {
   }));
 };
 
-var Image$1 = function (_a) {
+var Image$2 = function (_a) {
   var primaryColor = _a.primaryColor,
       onClick = _a.onClick,
       size = _a.size,
@@ -10525,7 +10524,7 @@ var Icon = function (_a) {
       return jsx(UserSuccess, props);
 
     case 'image':
-      return jsx(Image$1, props);
+      return jsx(Image$2, props);
 
     case 'imageSwap':
       return jsx(ImageSwap, props);
@@ -14375,7 +14374,23 @@ var ImageLoader = function (_a) {
   }));
 };
 
-var Image = function (_a) {
+var useProgressiveImage = function (src) {
+  var _a = React.useState(null),
+      source = _a[0],
+      setSource = _a[1];
+
+  useEffect(function () {
+    var img = new Image();
+    img.src = src;
+
+    img.onload = function () {
+      return setSource(src);
+    };
+  }, [src]);
+  return source;
+};
+
+var Image$1 = function (_a) {
   var image = _a.image,
       _b = _a.activeFilter,
       activeFilter = _b === void 0 ? {
@@ -14390,37 +14405,20 @@ var Image = function (_a) {
       _c = _a.borderRadius,
       borderRadius = _c === void 0 ? 'default' : _c,
       onClick = _a.onClick,
-      lazyLoadOffset = _a.lazyLoadOffset,
-      _d = _a.shouldLoadOnce,
-      shouldLoadOnce = _d === void 0 ? true : _d,
-      _e = _a.backgroundSize,
-      backgroundSize = _e === void 0 ? 'cover' : _e,
-      lazyLoadOverflow = _a.lazyLoadOverflow;
-
-  var _f = useResizeObserver(),
-      ref = _f.ref,
-      width = _f.width,
-      height = _f.height;
+      _d = _a.backgroundSize,
+      backgroundSize = _d === void 0 ? 'cover' : _d;
+
+  var _e = useResizeObserver(),
+      ref = _e.ref,
+      width = _e.width,
+      height = _e.height;
 
   var loaderRadius = isBorderRadiusDirectionType(borderRadius) ? 'default' : borderRadius;
+  var src = useProgressiveImage(image.url);
   return jsx(Div, {
     css: styles$p.imageContainer(isActive, imageWidth, imageHeight),
     ref: ref
-  }, typeof width === 'number' && typeof height === 'number' && jsx(LazyLoad, {
-    style: {
-      width: '100%',
-      height: '100%'
-    },
-    offset: lazyLoadOffset,
-    once: shouldLoadOnce,
-    overflow: lazyLoadOverflow,
-    placeholder: jsx(ImageLoader, {
-      width: width,
-      height: height,
-      isActive: isActive,
-      borderRadius: loaderRadius
-    })
-  }, jsx(Div, {
+  }, typeof src === 'string' ? jsx(Div, {
     css: styles$p.imageCss(isActive),
     onClick: onClick && function () {
       return onClick();
@@ -14431,7 +14429,12 @@ var Image = function (_a) {
   }, jsx(Div, {
     backgroundSize: backgroundSize,
     css: styles$p.image(image.url)
-  })))), jsx(Text, {
+  }))) : typeof width === 'number' && typeof height === 'number' && jsx(ImageLoader, {
+    width: width,
+    height: height,
+    isActive: isActive,
+    borderRadius: loaderRadius
+  }), jsx(Text, {
     type: "body"
   }, title));
 };
@@ -17142,7 +17145,7 @@ var AwardCard = function (_a) {
     display: "flex",
     justifyContent: "center",
     alignItems: "center"
-  }, jsx(Image, {
+  }, jsx(Image$1, {
     isActive: true,
     image: {
       url: image
@@ -17276,7 +17279,7 @@ var ExpandedAwardCard = function (_a) {
       xSmall: typeof progress === 'number' ? progress === 100 ? '147px' : '145px' : progress.count > 0 ? '147px' : '145px',
       small: typeof progress === 'number' ? progress === 100 ? '207px' : '145px' : progress.count > 0 ? '207px' : '145px'
     }
-  }, jsx(Image, {
+  }, jsx(Image$1, {
     isActive: true,
     image: {
       url: image
@@ -19261,7 +19264,7 @@ var AnimatedGrid = function (_a) {
       height: "100%",
       width: "100%",
       borderRadius: "default"
-    }, jsx(Image, {
+    }, jsx(Image$1, {
       height: "100%",
       width: "100%",
       image: {
@@ -20683,7 +20686,7 @@ var FeatureAnnouncement = function (_a) {
   }), jsx(Card, {
     outset: "x1_5",
     backgroundColor: backgroundColor
-  }, jsx(Image, {
+  }, jsx(Image$1, {
     isActive: true,
     image: {
       url: imageURL
@@ -21160,7 +21163,7 @@ var ImageUploadWidget = function (_a) {
     }, jsx(Div, {
       width: "100%",
       height: "100%"
-    }, jsx(Image, {
+    }, jsx(Image$1, {
       onClick: image.onClick,
       isActive: true,
       height: "100%",
@@ -21405,7 +21408,7 @@ var ImageThumbnail = function (_a) {
   }, jsx(CloseButton, {
     onClose: onRemove,
     size: "xSmall"
-  })), jsx(React.Fragment, null, jsx(Image, {
+  })), jsx(React.Fragment, null, jsx(Image$1, {
     isActive: true,
     width: '100%',
     height: '100%',
@@ -22259,7 +22262,7 @@ var PaperTypeModal = function (_a) {
       key: index,
       title: option.title,
       description: option.description
-    }, jsx(Image, {
+    }, jsx(Image$1, {
       width: '100%',
       height: '100%',
       isActive: true,
@@ -22294,4 +22297,4 @@ var useColorSwatch = function () {
   };
 };
 
-export { Accordion, AccordionBody, AccordionHeading, AccountMenu, AffiliateShareWidget, AffiliateUpsalePromotionWidget, Anchor, AnimatedCheckMark, AnimatedGrid, ArticleCard, Aside, Avatar, AwardCard, AwardGroupLabel, Badge, Banner, Bar, BlockQuote, BulkSend, Button, ButtonWithMenu, Capsule, Card, CardEntryDialog, CardQuantitySlider, Checkbox, Circle, CircleMenu, Clipboard, CloseButton, ColorOption, ConfigurationCard, ConfirmDialog, Content, ContentPusher, ContextBar, CountdownTimer, Dialog, DisplayCard, Div, DownloadButton, DragBar, DragBox, Drawer, DropDownMenu, ExpandedAwardCard, FeatureAnnouncement, FeatureBadge, Flex, Grid, GridItem, HStack, Icon, IconLink, Image, ImageThumbnail, ImageUploadWidget, ImageUploader, IncrementSetting, InfiniteScroller, InfoBlock, Input, InviteCard, LinkColumn, List, ListItem, Loader, LoadingSpinner, Logo, MasonryGrid, Menu, MenuItem, MenuSection, Navigation, NavigationPill, Option, OrderCard, Overlay, Page, PaperTypeModal, PhoneInput, Pill, PinInput, PricingTile, Progress, PromotionWidget, QDSChrome, QuantitySlider, QuantumColorPicker, QuantumThemeWrapper, QuickLink, RadioOptionCard, RadioOptionList, ReleaseNote, ReleaseNoteDialog, RevealingContent, RowItem, Scrollable, ScrollingIndicator, Section, Select, SelectableCard, SelectableList, Separator, SettingInput, Sheet, Sidebar, Slider, SnapPoint, Spacer, Span, Sphere, StackedCards, StaticNavigation, Stepper, Stoplight, SubNavigation, Tab, Table, TableRow, Tabs, Text, TitledList, Todo, Toggle, Tooltip, Transition, UpsaleSheet, UserCard, UserCardLoader, VStack, VideoPlayer, Zoom, entities$5 as bellaCadaeuxTheme, entities$4 as blue42Theme, getSize, entities$6 as greenerStillTheme, entities$3 as promptingUTheme, entities as sendOutCardsTheme, entities$7 as sendogoTheme, entities$2 as streamMarketingTheme, entities$1 as streamVATheme, useColorSwatch };
+export { Accordion, AccordionBody, AccordionHeading, AccountMenu, AffiliateShareWidget, AffiliateUpsalePromotionWidget, Anchor, AnimatedCheckMark, AnimatedGrid, ArticleCard, Aside, Avatar, AwardCard, AwardGroupLabel, Badge, Banner, Bar, BlockQuote, BulkSend, Button, ButtonWithMenu, Capsule, Card, CardEntryDialog, CardQuantitySlider, Checkbox, Circle, CircleMenu, Clipboard, CloseButton, ColorOption, ConfigurationCard, ConfirmDialog, Content, ContentPusher, ContextBar, CountdownTimer, Dialog, DisplayCard, Div, DownloadButton, DragBar, DragBox, Drawer, DropDownMenu, ExpandedAwardCard, FeatureAnnouncement, FeatureBadge, Flex, Grid, GridItem, HStack, Icon, IconLink, Image$1 as Image, ImageThumbnail, ImageUploadWidget, ImageUploader, IncrementSetting, InfiniteScroller, InfoBlock, Input, InviteCard, LinkColumn, List, ListItem, Loader, LoadingSpinner, Logo, MasonryGrid, Menu, MenuItem, MenuSection, Navigation, NavigationPill, Option, OrderCard, Overlay, Page, PaperTypeModal, PhoneInput, Pill, PinInput, PricingTile, Progress, PromotionWidget, QDSChrome, QuantitySlider, QuantumColorPicker, QuantumThemeWrapper, QuickLink, RadioOptionCard, RadioOptionList, ReleaseNote, ReleaseNoteDialog, RevealingContent, RowItem, Scrollable, ScrollingIndicator, Section, Select, SelectableCard, SelectableList, Separator, SettingInput, Sheet, Sidebar, Slider, SnapPoint, Spacer, Span, Sphere, StackedCards, StaticNavigation, Stepper, Stoplight, SubNavigation, Tab, Table, TableRow, Tabs, Text, TitledList, Todo, Toggle, Tooltip, Transition, UpsaleSheet, UserCard, UserCardLoader, VStack, VideoPlayer, Zoom, entities$5 as bellaCadaeuxTheme, entities$4 as blue42Theme, getSize, entities$6 as greenerStillTheme, entities$3 as promptingUTheme, entities as sendOutCardsTheme, entities$7 as sendogoTheme, entities$2 as streamMarketingTheme, entities$1 as streamVATheme, useColorSwatch };

package/dist/src/hooks/useEntities.d.ts

@@ -447,6 +447,16 @@ export declare const useEntities: () => {
         hoverBoxShadow: string;
         hoverBottomDirectionShadow: string;
         defaultInset: string;
+        tab: {
+            dark: {
+                backgroundColor: string | undefined;
+                arrowColor: string;
+            };
+            light: {
+                backgroundColor: string;
+                arrowColor: string | undefined;
+            };
+        };
     };
     sheet: {
         mobileBorderRadius: string;

package/dist/src/hooks/useProgressiveImage.d.ts

@@ -0,0 +1 @@
+export declare const useProgressiveImage: (src: string) => string | null;

package/dist/src/molecules/image/image.d.ts

@@ -14,9 +14,6 @@ export declare type ImageProps = {
     title?: string;
     borderRadius?: BorderRadiusDirection | LiteralUnion<HOCBorderRadiusKeys>;
     onClick?: () => void;
-    lazyLoadOffset?: number | number[];
-    lazyLoadOverflow?: boolean;
-    shouldLoadOnce?: boolean;
     backgroundSize?: Responsive<BackgroundSize> | BackgroundSize;
 };
 export declare const Image: FC<ImageProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendoutcards/quantum-design-ui",
-  "version": "1.7.24",
+  "version": "1.7.25",
   "description": "UI component library for Quantum Design System",
   "module": "dist/index.es.js",
   "jsnext:main": "dist/index.es.js",
@@ -61,7 +61,6 @@
     "react-eyedrop": "^5.1.3",
     "react-infinite-scroll-component": "^6.1.0",
     "react-infinite-scroller": "^1.2.4",
-    "react-lazyload": "^3.1.1",
     "react-use-dimensions": "^1.2.1",
     "ttypescript": "^1.5.12",
     "use-callback-ref": "^1.2.4",