datastake-daf 0.6.211 → 0.6.213

package/dist/components/index.js

@@ -21259,14 +21259,16 @@ function CustomArrowButton({
 }) {
   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"
+  // Clone the icon and add color styling
+  const styledIcon = icon && typeof icon === 'object' ? {
+    ...icon,
+    props: {
+      ...icon.props,
+      style: {
+        color: isHovered ? hoverIconColor : iconColor
+      }
     }
-  }) : icon;
+  } : icon;
   return /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
     type: "default",
     shape: "circle",
@@ -21275,7 +21277,7 @@ function CustomArrowButton({
     style: {
       position: "absolute",
       right: !isLeft ? "40px" : "auto",
-      left: isLeft ? "40px" : "auto",
+      left: !isLeft ? "auto" : "40px",
       top: "58%",
       transform: "translateY(-50%)",
       zIndex: 10,
@@ -21357,8 +21359,9 @@ function ImageCarousel(_ref) {
       inactiveDotColor: inactiveDotColor,
       children: [/*#__PURE__*/jsxRuntime.jsx(CarouselWidget, {
         title: title,
-        arrows: false,
-        ref: carouselRef,
+        arrows: false
+        // ref={carouselRef}
+        ,
         afterChange: handleCarouselChange,
         infinite: true,
         dots: false,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.211",
+	"version": "0.6.213",
 	"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,60 +1,54 @@
-import React, { useState } from "react";
+import React 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);
 
-  // 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;
+  // Clone the icon and add color styling
+  const styledIcon = icon && typeof icon === 'object' ? 
+    { ...icon, props: { ...icon.props, style: { color: isHovered ? hoverIconColor : iconColor } } } : 
+    icon;
 
   return (
     <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);
-      }}
+        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);
+        }}
     />
-  );
+  )
 }
 
 CustomArrowButton.propTypes = {
@@ -65,4 +59,5 @@ CustomArrowButton.propTypes = {
   hoverIconColor: PropTypes.string,
 };
 
-export default CustomArrowButton;
+
+export default CustomArrowButton

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

@@ -102,7 +102,7 @@ function ImageCarousel({
         <CarouselWidget 
           title={title} 
           arrows={false}
-          ref={carouselRef}
+          // ref={carouselRef}
           afterChange={handleCarouselChange}
           infinite
           dots={false}