datastake-daf 0.6.207 → 0.6.209

package/dist/components/index.js

@@ -21301,7 +21301,7 @@ function CustomArrowButton({
   });
 }
 
-const StyledCarouselWrapper = dt.div`
+dt.div`
   position: relative;
   
   .ant-carousel .slick-dots li button {
@@ -21315,7 +21315,7 @@ const StyledCarouselWrapper = dt.div`
   }
 `;
 
-const _excluded$d = ["title", "images", "height", "fallback", "activeDotColor", "inactiveDotColor", "arrowIconColor", "arrowHoverIconColor"];
+const _excluded$d = ["title", "images", "height", "fallback", "activeDotColor", "inactiveDotColor", "arrowIconColor", "arrowHoverIconColor", "customArrows"];
 function ImageCarousel(_ref) {
   let {
       title,
@@ -21325,7 +21325,8 @@ function ImageCarousel(_ref) {
       activeDotColor = "#1890ff",
       inactiveDotColor = "rgba(255, 255, 255, 0.3)",
       arrowIconColor = "#666",
-      arrowHoverIconColor = "#1890ff"
+      arrowHoverIconColor = "#1890ff",
+      customArrows = false
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded$d);
   const [previewVisible, setPreviewVisible] = React.useState(false);
@@ -21342,72 +21343,49 @@ function ImageCarousel(_ref) {
     var _carouselRef$current2;
     (_carouselRef$current2 = carouselRef.current) === null || _carouselRef$current2 === void 0 || _carouselRef$current2.next();
   };
-
-  // Check if images array is empty or invalid
-  const hasImages = images && images.length > 0;
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsxs(StyledCarouselWrapper, {
-      activeDotColor: activeDotColor,
-      inactiveDotColor: inactiveDotColor,
-      children: [/*#__PURE__*/jsxRuntime.jsx(CarouselWidget, _objectSpread2(_objectSpread2({
-        title: title
-      }, rest), {}, {
-        arrows: false,
-        ref: carouselRef,
-        afterChange: handleCarouselChange,
-        infinite: hasImages,
-        dots: hasImages,
-        children: hasImages ? images.map((image, index) => {
-          const imageSrc = typeof image === "string" ? image : image.src;
-          const imageAlt = typeof image === "string" ? "".concat(title, " - Image ").concat(index + 1) : image.alt;
-          return /*#__PURE__*/jsxRuntime.jsx("div", {
-            children: /*#__PURE__*/jsxRuntime.jsx(antd.Image, {
-              src: imageSrc,
-              alt: imageAlt,
-              height: height,
-              width: "100%",
-              fallback: fallback,
-              loading: "lazy",
-              preview: {
-                visible: false
-              },
-              onClick: () => {
-                setCurrent(index);
-                setPreviewVisible(true);
-              }
-            })
-          }, imageSrc);
-        }) :
-        /*#__PURE__*/
-        // No images - show placeholder
-        jsxRuntime.jsx("div", {
+    children: [/*#__PURE__*/jsxRuntime.jsx(CarouselWidget, _objectSpread2(_objectSpread2({
+      title: title
+    }, rest), {}, {
+      arrows: false,
+      ref: carouselRef,
+      afterChange: handleCarouselChange,
+      infinite: true,
+      children: images.map((image, index) => {
+        const imageSrc = typeof image === "string" ? image : image.src;
+        const imageAlt = typeof image === "string" ? "".concat(title, " - Image ").concat(index + 1) : image.alt;
+        return /*#__PURE__*/jsxRuntime.jsx("div", {
           children: /*#__PURE__*/jsxRuntime.jsx(antd.Image, {
-            src: "/assets/images/no-image.svg",
-            alt: "No images available",
+            src: imageSrc,
+            alt: imageAlt,
             height: height,
             width: "100%",
             fallback: fallback,
-            preview: false,
-            style: {
-              objectFit: "contain"
+            loading: "lazy",
+            preview: {
+              visible: false
+            },
+            onClick: () => {
+              setCurrent(index);
+              setPreviewVisible(true);
             }
           })
-        })
-      })), hasImages && images.length > 1 && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/jsxRuntime.jsx(CustomArrowButton, {
-          icon: /*#__PURE__*/jsxRuntime.jsx(Icons.LeftOutlined, {}),
-          onClick: goToPrevious,
-          isLeft: true,
-          iconColor: arrowIconColor,
-          hoverIconColor: arrowHoverIconColor
-        }), /*#__PURE__*/jsxRuntime.jsx(CustomArrowButton, {
-          icon: /*#__PURE__*/jsxRuntime.jsx(Icons.RightOutlined, {}),
-          onClick: goToNext,
-          iconColor: arrowIconColor,
-          hoverIconColor: arrowHoverIconColor
-        })]
+        }, imageSrc);
+      })
+    })), customArrows && images && images.length > 1 && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(CustomArrowButton, {
+        icon: /*#__PURE__*/jsxRuntime.jsx(Icons.LeftOutlined, {}),
+        onClick: goToPrevious,
+        isLeft: true,
+        iconColor: arrowIconColor,
+        hoverIconColor: arrowHoverIconColor
+      }), /*#__PURE__*/jsxRuntime.jsx(CustomArrowButton, {
+        icon: /*#__PURE__*/jsxRuntime.jsx(Icons.RightOutlined, {}),
+        onClick: goToNext,
+        iconColor: arrowIconColor,
+        hoverIconColor: arrowHoverIconColor
       })]
-    }), hasImages && /*#__PURE__*/jsxRuntime.jsx("div", {
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
       style: {
         display: "none"
       },

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.207",
+	"version": "0.6.209",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

package/src/@daf/core/components/Dashboard/Widget/ImageCarousel/ImageCarousel.stories.js

@@ -94,7 +94,7 @@ export const Primary = {
   args: {
     title: "Nature Gallery",
     height: 400,
-    arrows: true
+    customArrows: true
   },
 };
 

package/src/@daf/core/components/Dashboard/Widget/ImageCarousel/index.jsx

@@ -44,6 +44,7 @@ import { StyledCarouselWrapper } from "./style.js";
  * @param {string} [props.inactiveDotColor="rgba(255, 255, 255, 0.3)"] - Color of inactive dots
  * @param {string} [props.arrowIconColor="#666"] - Default color of arrow icons
  * @param {string} [props.arrowHoverIconColor="#1890ff"] - Color of arrow icons on hover
+ * @param {boolean} [props.customArrows=false] - Whether to show custom navigation arrows
  * @param {Object} [props.rest] - Additional props passed to the underlying CarouselWidget component
  * 
  * @features
@@ -72,6 +73,7 @@ function ImageCarousel({
   inactiveDotColor = "rgba(255, 255, 255, 0.3)",
   arrowIconColor = "#666",
   arrowHoverIconColor = "#1890ff",
+  customArrows = false,
   ...rest
 }) {
   const [previewVisible, setPreviewVisible] = useState(false);
@@ -90,25 +92,22 @@ function ImageCarousel({
     carouselRef.current?.next();
   };
 
-  // Check if images array is empty or invalid
-  const hasImages = images && images.length > 0;
 
   return (
     <>
-      <StyledCarouselWrapper 
+      {/* <StyledCarouselWrapper 
         activeDotColor={activeDotColor}
         inactiveDotColor={inactiveDotColor}
-      >
+      > */}
         <CarouselWidget 
           title={title} 
           {...rest} 
           arrows={false}
           ref={carouselRef}
           afterChange={handleCarouselChange}
-          infinite={hasImages}
-          dots={hasImages}
+          infinite
         >
-          {hasImages ? images.map((image, index) => {
+          {images.map((image, index) => {
             const imageSrc = typeof image === "string" ? image : image.src;
             const imageAlt =
               typeof image === "string"
@@ -134,25 +133,10 @@ function ImageCarousel({
                 />
               </div>
             );
-          }) : (
-            // No images - show placeholder
-            <div>
-              <Image
-                src="/assets/images/no-image.svg"
-                alt="No images available"
-                height={height}
-                width="100%"
-                fallback={fallback}
-                preview={false}
-                style={{
-                  objectFit: "contain",
-                }}
-              />
-            </div>
-          )}
+          })}
         </CarouselWidget>
         
-        {hasImages && images.length > 1 && (
+        {customArrows && images && images.length > 1 && (
           <>
             <CustomArrowButton
               icon={<LeftOutlined />}
@@ -169,23 +153,21 @@ function ImageCarousel({
             />
           </>
         )}
-      </StyledCarouselWrapper>
+      {/* </StyledCarouselWrapper> */}
 
-      {/* Preview functionality - only show if there are images */}
-      {hasImages && (
-        <div style={{ display: "none" }}>
-          <Image.PreviewGroup
-            preview={{
-              visible: previewVisible,
-              current,
-              onVisibleChange: (vis) => setPreviewVisible(vis),
-              onChange: (idx) => {
-                setCurrent(idx);
-                carouselRef.current?.goTo(idx);
-              },
-            }}
-          >
-            {images.map((image, index) => {
+      <div style={{ display: "none" }}>
+        <Image.PreviewGroup
+          preview={{
+            visible: previewVisible,
+            current,
+            onVisibleChange: (vis) => setPreviewVisible(vis),
+            onChange: (idx) => {
+              setCurrent(idx);
+              carouselRef.current?.goTo(idx);
+            },
+          }}
+        >
+          {images.map((image, index) => {
             const imageSrc = typeof image === "string" ? image : image.src;
             const imageAlt =
               typeof image === "string"
@@ -193,10 +175,9 @@ function ImageCarousel({
                 : image.alt;
 
             return <Image key={imageSrc} src={imageSrc} alt={imageAlt} />;
-            })}
-          </Image.PreviewGroup>
-        </div>
-      )}
+          })}
+        </Image.PreviewGroup>
+      </div>
     </>
   );
 }