datastake-daf 0.6.249 → 0.6.251

package/dist/components/index.js

@@ -20737,12 +20737,29 @@ const DAFSteps = _ref => {
   let {
     direction = "vertical",
     current = 0,
-    items = []
+    items = [],
+    scrollThreshold = 4
   } = _ref;
-  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: /*#__PURE__*/jsxRuntime.jsx(Widget, {
-      title: "Life Cycle",
-      className: "with-border-header",
+  const shouldScroll = items.length > scrollThreshold;
+  const scrollableStyles = shouldScroll ? _objectSpread2(_objectSpread2({}, direction === "vertical" ? {
+    maxHeight: "300px",
+    overflowY: "auto",
+    overflowX: "hidden"
+  } : {
+    maxWidth: "100%",
+    overflowX: "auto",
+    overflowY: "hidden",
+    whiteSpace: "nowrap"
+  }), {}, {
+    padding: "8px",
+    marginRight: direction === "vertical" ? "-8px" : "0",
+    paddingRight: direction === "vertical" ? "16px" : "8px"
+  }) : {};
+  return /*#__PURE__*/jsxRuntime.jsx(Widget, {
+    title: "Life Cycle",
+    className: "with-border-header",
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      style: scrollableStyles,
       children: /*#__PURE__*/jsxRuntime.jsx(antd.Steps, {
         direction: direction,
         current: current,
@@ -20757,12 +20774,14 @@ DAFSteps.propTypes = {
   items: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
     title: PropTypes__default["default"].string.isRequired,
     description: PropTypes__default["default"].string
-  }))
+  })),
+  scrollThreshold: PropTypes__default["default"].number
 };
 DAFSteps.defaultProps = {
   direction: "vertical",
   current: 0,
-  items: []
+  items: [],
+  scrollThreshold: 4
 };
 
 /**

package/package.json

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

package/src/@daf/core/components/Dashboard/Steps/Steps.stories.js

@@ -17,6 +17,11 @@ VerticalSteps.args = {
     { title: "Step 1", description: "This is the first step" },
     { title: "Step 2", description: "This is the second step" },
     { title: "Step 3", description: "This is the third step" },
+    { title: "Step 3", description: "This is the third step" },
+    { title: "Step 3", description: "This is the third step" },
+    { title: "Step 3", description: "This is the third step" },
+    { title: "Step 3", description: "This is the third step" },
+    { title: "Step 3", description: "This is the third step" },
   ],
 };
 

package/src/@daf/core/components/Dashboard/Steps/index.jsx

@@ -3,16 +3,35 @@ import { Steps } from "antd";
 import Widget from "../../Dashboard/Widget/index.jsx";
 import PropTypes from "prop-types";
 
-const DAFSteps = ({ direction = "vertical", current = 0, items = [] }) => {
+const DAFSteps = ({ direction = "vertical", current = 0, items = [], scrollThreshold = 4 }) => {
+  const shouldScroll = items.length > scrollThreshold;
+  
+  const scrollableStyles = shouldScroll ? {
+    ...(direction === "vertical" ? {
+      maxHeight: "300px",
+      overflowY: "auto",
+      overflowX: "hidden"
+    } : {
+      maxWidth: "100%",
+      overflowX: "auto",
+      overflowY: "hidden",
+      whiteSpace: "nowrap"
+    }),
+    padding: "8px",
+    marginRight: direction === "vertical" ? "-8px" : "0",
+    paddingRight: direction === "vertical" ? "16px" : "8px"
+  } : {};
+
   return (
-    <><Widget title="Life Cycle" className="with-border-header">
-      <Steps
-        direction={direction}
-        current={current}
-        items={items}
-      />
+    <Widget title="Life Cycle" className="with-border-header">
+      <div style={scrollableStyles}>
+        <Steps
+          direction={direction}
+          current={current}
+          items={items}
+        />
+      </div>
     </Widget>
-    </>
   );
 };
 
@@ -25,12 +44,14 @@ DAFSteps.propTypes = {
       description: PropTypes.string,
     })
   ),
+  scrollThreshold: PropTypes.number,
 };
 
 DAFSteps.defaultProps = {
   direction: "vertical",
   current: 0,
   items: [],
+  scrollThreshold: 4,
 };
 
 export default DAFSteps;