datastake-daf 0.6.208 → 0.6.210

package/dist/components/index.js

@@ -21250,83 +21250,13 @@ const CarouselWidget = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 });
 CarouselWidget.displayName = 'CarouselWidget';
 
-function CustomArrowButton({
-  icon,
-  onClick = () => {},
-  isLeft = false,
-  iconColor = "#666",
-  hoverIconColor = "#1890ff"
-}) {
-  const [isHovered, setIsHovered] = React.useState(false);
-
-  // Clone the icon and add color styling
-  const styledIcon = icon && typeof icon === 'object' ? {
-    ...icon,
-    props: {
-      ...icon.props,
-      style: {
-        color: isHovered ? hoverIconColor : iconColor
-      }
-    }
-  } : icon;
-  return /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
-    type: "default",
-    shape: "circle",
-    icon: styledIcon,
-    onClick: onClick,
-    style: {
-      position: "absolute",
-      right: !isLeft ? "40px" : "auto",
-      left: !isLeft ? "auto" : "40px",
-      top: "58%",
-      transform: "translateY(-50%)",
-      zIndex: 10,
-      backgroundColor: "rgba(255, 255, 255, 0.4)",
-      border: "1px solid rgba(0, 0, 0, 0.1)",
-      boxShadow: "0 2px 8px rgba(0, 0, 0, 0.2)",
-      width: "40px",
-      height: "40px",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center"
-    },
-    onMouseEnter: e => {
-      e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 1)";
-      setIsHovered(true);
-    },
-    onMouseLeave: e => {
-      e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.4)";
-      setIsHovered(false);
-    }
-  });
-}
-
-const StyledCarouselWrapper = dt.div`
-  position: relative;
-  
-  .ant-carousel .slick-dots li button {
-    background: ${props => props.inactiveDotColor} !important;
-    opacity: 1 !important;
-  }
-  
-  .ant-carousel .slick-dots li.slick-active button {
-    background: ${props => props.activeDotColor} !important;
-    opacity: 1 !important;
-  }
-`;
-
-const _excluded$d = ["title", "images", "height", "fallback", "activeDotColor", "inactiveDotColor", "arrowIconColor", "arrowHoverIconColor", "customArrows"];
+const _excluded$d = ["title", "images", "height", "fallback"];
 function ImageCarousel(_ref) {
   let {
       title,
       images,
       height = 400,
-      fallback = "/assets/images/empty-box.svg",
-      activeDotColor = "#1890ff",
-      inactiveDotColor = "rgba(255, 255, 255, 0.3)",
-      arrowIconColor = "#666",
-      arrowHoverIconColor = "#1890ff",
-      customArrows = false
+      fallback = "/assets/images/empty-box.svg"
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded$d);
   const [previewVisible, setPreviewVisible] = React.useState(false);
@@ -21335,30 +21265,16 @@ function ImageCarousel(_ref) {
   const handleCarouselChange = index => {
     setCurrent(index);
   };
-  const goToPrevious = () => {
-    var _carouselRef$current;
-    (_carouselRef$current = carouselRef.current) === null || _carouselRef$current === void 0 || _carouselRef$current.prev();
-  };
-  const goToNext = () => {
-    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,
+    children: [/*#__PURE__*/jsxRuntime.jsx(CarouselWidget, _objectSpread2(_objectSpread2({
+      title: title
+    }, rest), {}, {
+      dots: false,
+      children: /*#__PURE__*/jsxRuntime.jsx(antd.Carousel, {
         ref: carouselRef,
         afterChange: handleCarouselChange,
-        infinite: hasImages,
-        dots: hasImages,
-        children: hasImages ? images.map((image, index) => {
+        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", {
@@ -21378,37 +21294,9 @@ function ImageCarousel(_ref) {
               }
             })
           }, imageSrc);
-        }) :
-        /*#__PURE__*/
-        // No images - show placeholder
-        jsxRuntime.jsx("div", {
-          children: /*#__PURE__*/jsxRuntime.jsx(antd.Image, {
-            src: "/assets/images/no-image.svg",
-            alt: "No images available",
-            height: height,
-            width: "100%",
-            fallback: fallback,
-            preview: false,
-            style: {
-              objectFit: "contain"
-            }
-          })
         })
-      })), hasImages && customArrows && 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"
       },
@@ -21418,9 +21306,9 @@ function ImageCarousel(_ref) {
           current,
           onVisibleChange: vis => setPreviewVisible(vis),
           onChange: idx => {
-            var _carouselRef$current3;
+            var _carouselRef$current;
             setCurrent(idx);
-            (_carouselRef$current3 = carouselRef.current) === null || _carouselRef$current3 === void 0 || _carouselRef$current3.goTo(idx);
+            (_carouselRef$current = carouselRef.current) === null || _carouselRef$current === void 0 || _carouselRef$current.goTo(idx);
           }
         },
         children: images.map((image, index) => {

package/package.json

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

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

@@ -0,0 +1,185 @@
+import React, { useState, useRef } from "react";
+import styled from "styled-components";
+import CarouselWidget from "../CarouselWidget/index.jsx";
+import { Image, Carousel, Button } from "antd";
+import { LeftOutlined, RightOutlined } from "@ant-design/icons";
+import CustomArrowButton from "./components/CustomArrowButton/index.js";
+import { StyledCarouselWrapper } from "./style.js";
+
+/**
+ * @typedef {Object} ImageObject
+ * @property {string} src - The source URL of the image
+ * @property {string} alt - Alternative text for the image
+ */
+
+/**
+ * ImageCarousel Component - A responsive image carousel with preview functionality and keyboard navigation
+ * 
+ * @component
+ * @example
+ * // Basic usage with string URLs
+ * <ImageCarousel 
+ *   title="My Gallery" 
+ *   images={["image1.jpg", "image2.jpg"]} 
+ * />
+ * 
+ * @example
+ * // Advanced usage with image objects and custom height
+ * <ImageCarousel 
+ *   title="Nature Gallery"
+ *   images={[
+ *     { src: "landscape.jpg", alt: "Beautiful mountain landscape" },
+ *     { src: "forest.jpg", alt: "Dense forest path" }
+ *   ]}
+ *   height={300}
+ *   fallback="/custom-fallback.svg"
+ * />
+ * 
+ * @param {Object} props - Component props
+ * @param {string} props.title - The title displayed in the widget header
+ * @param {(string|ImageObject)[]} props.images - Array of image URLs (strings) or image objects with src and alt properties
+ * @param {number} [props.height=400] - Height of the carousel images in pixels
+ * @param {string} [props.fallback="/assets/images/empty-box.svg"] - Fallback image URL when original image fails to load
+ * @param {string} [props.activeDotColor="#1890ff"] - Color of the active dot
+ * @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
+ * - ✅ Responsive image display with lazy loading
+ * - ✅ Click-to-preview with full-screen image viewer
+ * - ✅ Keyboard navigation in preview mode (← → arrow keys)
+ * - ✅ Automatic fallback for broken images
+ * - ✅ Support for both string URLs and image objects with alt text
+ * - ✅ Synchronized carousel and preview navigation
+ * - ✅ Infinite scrolling in both carousel and preview modes
+ * - ✅ Placeholder image for empty image arrays (/assets/images/no-image.svg)
+ * - ✅ Customizable dot colors via props
+ * 
+ * @accessibility
+ * - Proper alt text support for screen readers
+ * - Keyboard navigation support
+ * - Focus management in preview mode
+ * 
+ */
+function ImageCarousel({
+  title,
+  images,
+  height = 400,
+  fallback = "/assets/images/empty-box.svg",
+  activeDotColor = "#1890ff",
+  inactiveDotColor = "rgba(255, 255, 255, 0.3)",
+  arrowIconColor = "#666",
+  arrowHoverIconColor = "#1890ff",
+  customArrows = false,
+  ...rest
+}) {
+  const [previewVisible, setPreviewVisible] = useState(false);
+  const [current, setCurrent] = useState(0);
+  const carouselRef = useRef(null);
+
+  const handleCarouselChange = (index) => {
+    setCurrent(index);
+  };
+
+  const goToPrevious = () => {
+    carouselRef.current?.prev();
+  };
+
+  const goToNext = () => {
+    carouselRef.current?.next();
+  };
+
+
+  return (
+    <>
+      {/* <StyledCarouselWrapper 
+        activeDotColor={activeDotColor}
+        inactiveDotColor={inactiveDotColor}
+      > */}
+        <CarouselWidget 
+          title={title} 
+          {...rest} 
+          arrows={false}
+          ref={carouselRef}
+          afterChange={handleCarouselChange}
+          infinite
+        >
+          {images.map((image, index) => {
+            const imageSrc = typeof image === "string" ? image : image.src;
+            const imageAlt =
+              typeof image === "string"
+                ? `${title} - Image ${index + 1}`
+                : image.alt;
+
+            return (
+              <div key={imageSrc}>
+                <Image
+                  src={imageSrc}
+                  alt={imageAlt}
+                  height={height}
+                  width="100%"
+                  fallback={fallback}
+                  loading="lazy"
+                  preview={{
+                    visible: false,
+                  }}
+                  onClick={() => {
+                    setCurrent(index);
+                    setPreviewVisible(true);
+                  }}
+                />
+              </div>
+            );
+          })}
+        </CarouselWidget>
+        
+        {customArrows && images && images.length > 1 && (
+          <>
+            <CustomArrowButton
+              icon={<LeftOutlined />}
+              onClick={goToPrevious}
+              isLeft={true}
+              iconColor={arrowIconColor}
+              hoverIconColor={arrowHoverIconColor}
+            />
+            <CustomArrowButton
+              icon={<RightOutlined />}
+              onClick={goToNext}
+              iconColor={arrowIconColor}
+              hoverIconColor={arrowHoverIconColor}
+            />
+          </>
+        )}
+      {/* </StyledCarouselWrapper> */}
+
+      <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"
+                ? `${title} - Image ${index + 1}`
+                : image.alt;
+
+            return <Image key={imageSrc} src={imageSrc} alt={imageAlt} />;
+          })}
+        </Image.PreviewGroup>
+      </div>
+    </>
+  );
+}
+
+export default ImageCarousel;

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

@@ -1,10 +1,6 @@
 import React, { useState, useRef } from "react";
-import styled from "styled-components";
 import CarouselWidget from "../CarouselWidget/index.jsx";
-import { Image, Carousel, Button } from "antd";
-import { LeftOutlined, RightOutlined } from "@ant-design/icons";
-import CustomArrowButton from "./components/CustomArrowButton/index.js";
-import { StyledCarouselWrapper } from "./style.js";
+import { Image, Carousel } from "antd";
 
 /**
  * @typedef {Object} ImageObject
@@ -40,10 +36,6 @@ import { StyledCarouselWrapper } from "./style.js";
  * @param {(string|ImageObject)[]} props.images - Array of image URLs (strings) or image objects with src and alt properties
  * @param {number} [props.height=400] - Height of the carousel images in pixels
  * @param {string} [props.fallback="/assets/images/empty-box.svg"] - Fallback image URL when original image fails to load
- * @param {string} [props.activeDotColor="#1890ff"] - Color of the active dot
- * @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 {Object} [props.rest] - Additional props passed to the underlying CarouselWidget component
  * 
  * @features
@@ -54,8 +46,6 @@ import { StyledCarouselWrapper } from "./style.js";
  * - ✅ Support for both string URLs and image objects with alt text
  * - ✅ Synchronized carousel and preview navigation
  * - ✅ Infinite scrolling in both carousel and preview modes
- * - ✅ Placeholder image for empty image arrays (/assets/images/no-image.svg)
- * - ✅ Customizable dot colors via props
  * 
  * @accessibility
  * - Proper alt text support for screen readers
@@ -68,11 +58,6 @@ function ImageCarousel({
   images,
   height = 400,
   fallback = "/assets/images/empty-box.svg",
-  activeDotColor = "#1890ff",
-  inactiveDotColor = "rgba(255, 255, 255, 0.3)",
-  arrowIconColor = "#666",
-  arrowHoverIconColor = "#1890ff",
-  customArrows = false,
   ...rest
 }) {
   const [previewVisible, setPreviewVisible] = useState(false);
@@ -83,33 +68,11 @@ function ImageCarousel({
     setCurrent(index);
   };
 
-  const goToPrevious = () => {
-    carouselRef.current?.prev();
-  };
-
-  const goToNext = () => {
-    carouselRef.current?.next();
-  };
-
-  // Check if images array is empty or invalid
-  const hasImages = images && images.length > 0;
-
   return (
     <>
-      <StyledCarouselWrapper 
-        activeDotColor={activeDotColor}
-        inactiveDotColor={inactiveDotColor}
-      >
-        <CarouselWidget 
-          title={title} 
-          {...rest} 
-          arrows={false}
-          ref={carouselRef}
-          afterChange={handleCarouselChange}
-          infinite={hasImages}
-          dots={hasImages}
-        >
-          {hasImages ? images.map((image, index) => {
+      <CarouselWidget title={title} {...rest} dots={false}>
+        <Carousel ref={carouselRef} afterChange={handleCarouselChange} infinite>
+          {images.map((image, index) => {
             const imageSrc = typeof image === "string" ? image : image.src;
             const imageAlt =
               typeof image === "string"
@@ -135,58 +98,23 @@ 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 && customArrows && images.length > 1) && (
-          <>
-            <CustomArrowButton
-              icon={<LeftOutlined />}
-              onClick={goToPrevious}
-              isLeft={true}
-              iconColor={arrowIconColor}
-              hoverIconColor={arrowHoverIconColor}
-            />
-            <CustomArrowButton
-              icon={<RightOutlined />}
-              onClick={goToNext}
-              iconColor={arrowIconColor}
-              hoverIconColor={arrowHoverIconColor}
-            />
-          </>
-        )}
-      </StyledCarouselWrapper>
+          })}
+        </Carousel>
+      </CarouselWidget>
 
-      {/* 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"
@@ -194,12 +122,11 @@ function ImageCarousel({
                 : image.alt;
 
             return <Image key={imageSrc} src={imageSrc} alt={imageAlt} />;
-            })}
-          </Image.PreviewGroup>
-        </div>
-      )}
+          })}
+        </Image.PreviewGroup>
+      </div>
     </>
   );
 }
 
-export default ImageCarousel;
+export default ImageCarousel;