datastake-daf 0.6.209 → 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);
-    }
-  });
-}
-
-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,57 +21265,38 @@ 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();
-  };
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     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: imageSrc,
-            alt: imageAlt,
-            height: height,
-            width: "100%",
-            fallback: fallback,
-            loading: "lazy",
-            preview: {
-              visible: false
-            },
-            onClick: () => {
-              setCurrent(index);
-              setPreviewVisible(true);
-            }
-          })
-        }, imageSrc);
+      dots: false,
+      children: /*#__PURE__*/jsxRuntime.jsx(antd.Carousel, {
+        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: imageSrc,
+              alt: imageAlt,
+              height: height,
+              width: "100%",
+              fallback: fallback,
+              loading: "lazy",
+              preview: {
+                visible: false
+              },
+              onClick: () => {
+                setCurrent(index);
+                setPreviewVisible(true);
+              }
+            })
+          }, 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
-      })]
-    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+    })), /*#__PURE__*/jsxRuntime.jsx("div", {
       style: {
         display: "none"
       },
@@ -21395,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.209",
+	"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,11 +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 {boolean} [props.customArrows=false] - Whether to show custom navigation arrows
  * @param {Object} [props.rest] - Additional props passed to the underlying CarouselWidget component
  * 
  * @features
@@ -55,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
@@ -69,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);
@@ -84,29 +68,10 @@ function ImageCarousel({
     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
-        >
+      <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 =
@@ -134,26 +99,8 @@ function ImageCarousel({
               </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> */}
+        </Carousel>
+      </CarouselWidget>
 
       <div style={{ display: "none" }}>
         <Image.PreviewGroup
@@ -182,4 +129,4 @@ function ImageCarousel({
   );
 }
 
-export default ImageCarousel;
+export default ImageCarousel;