datastake-daf 0.6.209 → 0.6.211

package/dist/components/index.js

@@ -21259,16 +21259,14 @@ function CustomArrowButton({
 }) {
   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
-      }
+  // 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;
+  }) : icon;
   return /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
     type: "default",
     shape: "circle",
@@ -21277,7 +21275,7 @@ function CustomArrowButton({
     style: {
       position: "absolute",
       right: !isLeft ? "40px" : "auto",
-      left: !isLeft ? "auto" : "40px",
+      left: isLeft ? "40px" : "auto",
       top: "58%",
       transform: "translateY(-50%)",
       zIndex: 10,
@@ -21300,19 +21298,29 @@ function CustomArrowButton({
     }
   });
 }
+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
+};
 
-dt.div`
+const StyledCarouselWrapper = dt.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;
   }
+
 `;
 
 const _excluded$d = ["title", "images", "height", "fallback", "activeDotColor", "inactiveDotColor", "arrowIconColor", "arrowHoverIconColor", "customArrows"];
@@ -21344,46 +21352,56 @@ function ImageCarousel(_ref) {
     (_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);
-            }
+    children: [/*#__PURE__*/jsxRuntime.jsxs(StyledCarouselWrapper, {
+      activeDotColor: activeDotColor,
+      inactiveDotColor: inactiveDotColor,
+      children: [/*#__PURE__*/jsxRuntime.jsx(CarouselWidget, {
+        title: title,
+        arrows: false,
+        ref: carouselRef,
+        afterChange: handleCarouselChange,
+        infinite: true,
+        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);
           })
-        }, 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
+        }))
+      }), 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: {
@@ -21412,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.209",
+	"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,10 +1,10 @@
 import React, { useState, useRef } from "react";
-import styled from "styled-components";
 import CarouselWidget from "../CarouselWidget/index.jsx";
-import { Image, Carousel, Button } from "antd";
+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
@@ -95,18 +95,19 @@ function ImageCarousel({
 
   return (
     <>
-      {/* <StyledCarouselWrapper 
+      <StyledCarouselWrapper 
         activeDotColor={activeDotColor}
         inactiveDotColor={inactiveDotColor}
-      > */}
+      >
         <CarouselWidget 
           title={title} 
-          {...rest} 
           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 =
@@ -134,6 +135,7 @@ function ImageCarousel({
               </div>
             );
           })}
+        </Carousel>
         </CarouselWidget>
         
         {customArrows && images && images.length > 1 && (
@@ -153,7 +155,7 @@ function ImageCarousel({
             />
           </>
         )}
-      {/* </StyledCarouselWrapper> */}
+      </StyledCarouselWrapper>
 
       <div style={{ display: "none" }}>
         <Image.PreviewGroup
@@ -182,4 +184,16 @@ function 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;
   }
+
 `;