@majoo-ui/react 1.55.23 → 1.55.24

package/components/skeleton/Skeleton.d.ts

@@ -6,6 +6,7 @@ interface SkeletonProps {
     variant?: 'group' | 'single';
     color?: 'primary' | 'secondary';
     width?: string | number;
+    patternCount?: number;
 }
 declare function Skeleton(props: SkeletonProps): JSX.Element;
 declare namespace Skeleton {

package/index.esm.js

@@ -32314,17 +32314,13 @@ function Skeleton(props) {
     css,
     variant,
     width,
-    color
+    color,
+    patternCount = 2
   } = props;
-  const isDesktop = useMediaQuery('(min-width: 767px)');
-  const renderGroup = () => jsxs(Container, Object.assign({
+  const renderGroup = count => jsx(Container, Object.assign({
     css: css
   }, {
-    children: [jsx(StyledSkeleton, {
-      size: "md",
-      color: "primary",
-      width: isDesktop ? '20%' : '30%'
-    }, void 0), jsx(Card, Object.assign({
+    children: jsx(Card, Object.assign({
       showBottomLine: false,
       css: {
         flex: 1,
@@ -32333,11 +32329,11 @@ function Skeleton(props) {
         boxShadow: '0px 7px 15px rgba(0, 0, 0, 0.07)'
       }
     }, {
-      children: jsxs(Grid, Object.assign({
+      children: jsx(Grid, Object.assign({
         columns: 6,
         gapY: 5
       }, {
-        children: [jsxs(GridItem, Object.assign({
+        children: new Array(count).fill('').map((_, index) => jsxs(GridItem, Object.assign({
           colSpan: 6
         }, {
           children: [jsx(StyledSkeleton, {
@@ -32352,29 +32348,14 @@ function Skeleton(props) {
               width: "30%"
             }, void 0)]
           }, void 0)]
-        }), void 0), jsxs(GridItem, Object.assign({
-          colSpan: 6
-        }, {
-          children: [jsx(StyledSkeleton, {
-            size: "md",
-            color: "primary"
-          }, void 0), jsx(Space, {
-            size: "md"
-          }, void 0), jsxs(Box, {
-            children: [jsx(StyledSkeleton, {
-              width: "70%"
-            }, void 0), jsx(Space, {}, void 0), jsx(StyledSkeleton, {
-              width: "30%"
-            }, void 0)]
-          }, void 0)]
-        }), void 0)]
+        }), index))
       }), void 0)
-    }), void 0)]
+    }), void 0)
   }), void 0);
   return variant === 'single' ? jsx(StyledSkeleton, {
     width: width,
     color: color
-  }, void 0) : renderGroup();
+  }, void 0) : renderGroup(patternCount);
 }
 Skeleton.defaultProps = {
   variant: 'group',

package/index.umd.js

@@ -32771,17 +32771,14 @@
     var css = props.css,
       variant = props.variant,
       width = props.width,
-      color = props.color;
-    var isDesktop = useMediaQuery('(min-width: 767px)');
-    var renderGroup = function renderGroup() {
-      return jsxRuntime.jsxs(Container, __assign({
+      color = props.color,
+      _a = props.patternCount,
+      patternCount = _a === void 0 ? 2 : _a;
+    var renderGroup = function renderGroup(count) {
+      return jsxRuntime.jsx(Container, __assign({
         css: css
       }, {
-        children: [jsxRuntime.jsx(StyledSkeleton, {
-          size: "md",
-          color: "primary",
-          width: isDesktop ? '20%' : '30%'
-        }, void 0), jsxRuntime.jsx(Card, __assign({
+        children: jsxRuntime.jsx(Card, __assign({
           showBottomLine: false,
           css: {
             flex: 1,
@@ -32790,49 +32787,36 @@
             boxShadow: '0px 7px 15px rgba(0, 0, 0, 0.07)'
           }
         }, {
-          children: jsxRuntime.jsxs(Grid, __assign({
+          children: jsxRuntime.jsx(Grid, __assign({
             columns: 6,
             gapY: 5
           }, {
-            children: [jsxRuntime.jsxs(GridItem, __assign({
-              colSpan: 6
-            }, {
-              children: [jsxRuntime.jsx(StyledSkeleton, {
-                size: "md",
-                color: "primary"
-              }, void 0), jsxRuntime.jsx(Space, {
-                size: "md"
-              }, void 0), jsxRuntime.jsxs(Box, {
-                children: [jsxRuntime.jsx(StyledSkeleton, {
-                  width: "70%"
-                }, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
-                  width: "30%"
-                }, void 0)]
-              }, void 0)]
-            }), void 0), jsxRuntime.jsxs(GridItem, __assign({
-              colSpan: 6
-            }, {
-              children: [jsxRuntime.jsx(StyledSkeleton, {
-                size: "md",
-                color: "primary"
-              }, void 0), jsxRuntime.jsx(Space, {
-                size: "md"
-              }, void 0), jsxRuntime.jsxs(Box, {
+            children: new Array(count).fill('').map(function (_, index) {
+              return jsxRuntime.jsxs(GridItem, __assign({
+                colSpan: 6
+              }, {
                 children: [jsxRuntime.jsx(StyledSkeleton, {
-                  width: "70%"
-                }, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
-                  width: "30%"
+                  size: "md",
+                  color: "primary"
+                }, void 0), jsxRuntime.jsx(Space, {
+                  size: "md"
+                }, void 0), jsxRuntime.jsxs(Box, {
+                  children: [jsxRuntime.jsx(StyledSkeleton, {
+                    width: "70%"
+                  }, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
+                    width: "30%"
+                  }, void 0)]
                 }, void 0)]
-              }, void 0)]
-            }), void 0)]
+              }), index);
+            })
           }), void 0)
-        }), void 0)]
+        }), void 0)
       }), void 0);
     };
     return variant === 'single' ? jsxRuntime.jsx(StyledSkeleton, {
       width: width,
       color: color
-    }, void 0) : renderGroup();
+    }, void 0) : renderGroup(patternCount);
   }
   Skeleton.defaultProps = {
     variant: 'group',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majoo-ui/react",
-  "version": "1.55.23",
+  "version": "1.55.24",
   "dependencies": {
     "@majoo-ui/core": "^1.31.3",
     "@majoo-ui/helpers": "^1.30.5",