datastake-daf 0.6.210 → 0.6.211

package/dist/components/index.js

@@ -21250,13 +21250,91 @@ const CarouselWidget = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 });
 CarouselWidget.displayName = 'CarouselWidget';
 
-const _excluded$d = ["title", "images", "height", "fallback"];
+function CustomArrowButton({
+  icon,
+  onClick = () => {},
+  isLeft = false,
+  iconColor = "#666",
+  hoverIconColor = "#1890ff"
+}) {
+  const [isHovered, setIsHovered] = React.useState(false);
+
+  // Properly clone the icon and override color on hover
+  const styledIcon = icon && /*#__PURE__*/React__default["default"].isValidElement(icon) ? /*#__PURE__*/React__default["default"].cloneElement(icon, {
+    style: {
+      ...(icon.props.style || {}),
+      color: isHovered ? hoverIconColor : iconColor,
+      transition: "color 0.3s ease"
+    }
+  }) : icon;
+  return /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
+    type: "default",
+    shape: "circle",
+    icon: styledIcon,
+    onClick: onClick,
+    style: {
+      position: "absolute",
+      right: !isLeft ? "40px" : "auto",
+      left: isLeft ? "40px" : "auto",
+      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);
+    }
+  });
+}
+CustomArrowButton.propTypes = {
+  icon: PropTypes__default["default"].node.isRequired,
+  onClick: PropTypes__default["default"].func,
+  isLeft: PropTypes__default["default"].bool,
+  iconColor: PropTypes__default["default"].string,
+  hoverIconColor: PropTypes__default["default"].string
+};
+
+const StyledCarouselWrapper = dt.div`
+  position: relative;
+  
+  .ant-carousel .slick-dots li button {
+    background: ${props => props.inactiveDotColor} !important; 
+  }
+
+  .ant-carousel .slick-dots li.slick-active button {
+    background: ${props => props.activeDotColor} !important; 
+  }
+
+  .ant-carousel .slick-dots li.slick-active::after {
+    background: ${props => props.activeDotColor} !important;
+  }
+
+`;
+
+const _excluded$d = ["title", "images", "height", "fallback", "activeDotColor", "inactiveDotColor", "arrowIconColor", "arrowHoverIconColor", "customArrows"];
 function ImageCarousel(_ref) {
   let {
       title,
       images,
       height = 400,
-      fallback = "/assets/images/empty-box.svg"
+      fallback = "/assets/images/empty-box.svg",
+      activeDotColor = "#1890ff",
+      inactiveDotColor = "rgba(255, 255, 255, 0.3)",
+      arrowIconColor = "#666",
+      arrowHoverIconColor = "#1890ff",
+      customArrows = false
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded$d);
   const [previewVisible, setPreviewVisible] = React.useState(false);
@@ -21265,38 +21343,67 @@ 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), {}, {
-      dots: false,
-      children: /*#__PURE__*/jsxRuntime.jsx(antd.Carousel, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs(StyledCarouselWrapper, {
+      activeDotColor: activeDotColor,
+      inactiveDotColor: inactiveDotColor,
+      children: [/*#__PURE__*/jsxRuntime.jsx(CarouselWidget, {
+        title: title,
+        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);
-        })
-      })
-    })), /*#__PURE__*/jsxRuntime.jsx("div", {
+        dots: false,
+        children: /*#__PURE__*/jsxRuntime.jsx(antd.Carousel, _objectSpread2(_objectSpread2({
+          ref: carouselRef,
+          afterChange: handleCarouselChange
+        }, rest), {}, {
+          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", {
       style: {
         display: "none"
       },
@@ -21306,9 +21413,9 @@ function ImageCarousel(_ref) {
           current,
           onVisibleChange: vis => setPreviewVisible(vis),
           onChange: idx => {
-            var _carouselRef$current;
+            var _carouselRef$current3;
             setCurrent(idx);
-            (_carouselRef$current = carouselRef.current) === null || _carouselRef$current === void 0 || _carouselRef$current.goTo(idx);
+            (_carouselRef$current3 = carouselRef.current) === null || _carouselRef$current3 === void 0 || _carouselRef$current3.goTo(idx);
           }
         },
         children: images.map((image, index) => {
@@ -21323,6 +21430,17 @@ function ImageCarousel(_ref) {
     })]
   });
 }
+ImageCarousel.propTypes = {
+  title: PropTypes__default["default"].string.isRequired,
+  images: PropTypes__default["default"].array.isRequired,
+  height: PropTypes__default["default"].number,
+  fallback: PropTypes__default["default"].string,
+  activeDotColor: PropTypes__default["default"].string,
+  inactiveDotColor: PropTypes__default["default"].string,
+  arrowIconColor: PropTypes__default["default"].string,
+  arrowHoverIconColor: PropTypes__default["default"].string,
+  customArrows: PropTypes__default["default"].bool
+};
 
 var Style$w = dt.div`
   border: 1px solid var(--base-gray-40);

package/package.json

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

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

@@ -1,52 +1,68 @@
+import React, { useState } from "react";
 import { Button } from "antd";
-import { useState } from "react";
+import PropTypes from "prop-types";
 
 function CustomArrowButton({
-  icon, 
-  onClick = () => {}, 
-  isLeft = false, 
-  iconColor = "#666", 
-  hoverIconColor = "#1890ff"
+  icon,
+  onClick = () => {},
+  isLeft = false,
+  iconColor = "#666",
+  hoverIconColor = "#1890ff",
 }) {
   const [isHovered, setIsHovered] = 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;
+  // Properly clone the icon and override color on hover
+  const styledIcon =
+    icon && React.isValidElement(icon)
+      ? React.cloneElement(icon, {
+          style: {
+            ...(icon.props.style || {}),
+            color: isHovered ? hoverIconColor : iconColor,
+            transition: "color 0.3s ease",
+          },
+        })
+      : icon;
 
   return (
     <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);
-        }}
+      type="default"
+      shape="circle"
+      icon={styledIcon}
+      onClick={onClick}
+      style={{
+        position: "absolute",
+        right: !isLeft ? "40px" : "auto",
+        left: isLeft ? "40px" : "auto",
+        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);
+      }}
     />
-  )
+  );
 }
 
-export default CustomArrowButton
+CustomArrowButton.propTypes = {
+  icon: PropTypes.node.isRequired,
+  onClick: PropTypes.func,
+  isLeft: PropTypes.bool,
+  iconColor: PropTypes.string,
+  hoverIconColor: PropTypes.string,
+};
+
+export default CustomArrowButton;

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

@@ -1,6 +1,10 @@
 import React, { useState, useRef } from "react";
 import CarouselWidget from "../CarouselWidget/index.jsx";
 import { Image, Carousel } from "antd";
+import { LeftOutlined, RightOutlined } from "@ant-design/icons";
+import CustomArrowButton from "./components/CustomArrowButton/index.js";
+import { StyledCarouselWrapper } from "./style.js";
+import PropTypes from "prop-types";
 
 /**
  * @typedef {Object} ImageObject
@@ -36,6 +40,11 @@ import { Image, Carousel } from "antd";
  * @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
@@ -46,6 +55,8 @@ import { Image, Carousel } from "antd";
  * - ✅ 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
@@ -58,6 +69,11 @@ 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);
@@ -68,10 +84,30 @@ function ImageCarousel({
     setCurrent(index);
   };
 
+  const goToPrevious = () => {
+    carouselRef.current?.prev();
+  };
+
+  const goToNext = () => {
+    carouselRef.current?.next();
+  };
+
+
   return (
     <>
-      <CarouselWidget title={title} {...rest} dots={false}>
-        <Carousel ref={carouselRef} afterChange={handleCarouselChange} infinite>
+      <StyledCarouselWrapper 
+        activeDotColor={activeDotColor}
+        inactiveDotColor={inactiveDotColor}
+      >
+        <CarouselWidget 
+          title={title} 
+          arrows={false}
+          ref={carouselRef}
+          afterChange={handleCarouselChange}
+          infinite
+          dots={false}
+        >
+        <Carousel ref={carouselRef} afterChange={handleCarouselChange} {...rest}  infinite>
           {images.map((image, index) => {
             const imageSrc = typeof image === "string" ? image : image.src;
             const imageAlt =
@@ -100,7 +136,26 @@ function ImageCarousel({
             );
           })}
         </Carousel>
-      </CarouselWidget>
+        </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
@@ -129,4 +184,16 @@ function ImageCarousel({
   );
 }
 
-export default ImageCarousel;
+ImageCarousel.propTypes = {
+  title: PropTypes.string.isRequired,
+  images: PropTypes.array.isRequired,
+  height: PropTypes.number,
+  fallback: PropTypes.string,
+  activeDotColor: PropTypes.string,
+  inactiveDotColor: PropTypes.string,
+  arrowIconColor: PropTypes.string,
+  arrowHoverIconColor: PropTypes.string,
+  customArrows: PropTypes.bool,
+};
+
+export default ImageCarousel;

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

@@ -4,12 +4,15 @@ export const StyledCarouselWrapper = styled.div`
   position: relative;
   
   .ant-carousel .slick-dots li button {
-    background: ${props => props.inactiveDotColor} !important;
-    opacity: 1 !important;
+    background: ${props => props.inactiveDotColor} !important; 
   }
-  
+
   .ant-carousel .slick-dots li.slick-active button {
+    background: ${props => props.activeDotColor} !important; 
+  }
+
+  .ant-carousel .slick-dots li.slick-active::after {
     background: ${props => props.activeDotColor} !important;
-    opacity: 1 !important;
   }
+
 `;

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

@@ -1,185 +0,0 @@
-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;