feat: add value/index to every element

afeiship · Jul 12, 2024 · 6a6dcac · 6a6dcac
1 parent 1cd6edd
commit 6a6dcac
Showing 1 changed file with 15 additions and 6 deletions.
diff --git a/packages/lib/src/index.tsx b/packages/lib/src/index.tsx
@@ -1,5 +1,5 @@
 import cx from 'classnames';
-import React, { Component, HTMLAttributes, ReactNode } from 'react';
+import React, { Component, HTMLAttributes, ReactElement, Children, ReactNode } from 'react';
 import ReactList, { ReactListProps } from '@jswork/react-list';
 
 const CLASS_NAME = 'react-block-steps';
@@ -26,15 +26,24 @@ export default class ReactBlockSteps extends Component<ReactBlockStepsProps> {
 
   handleTemplate = ({ item, index }) => {
     const { value, activatedSection, deactivatedSection } = this.props;
-    const isActive = value >= item;
-    const children = isActive ? activatedSection : deactivatedSection;
-    return React.createElement(React.Fragment, { key: index }, children);
+    const active = value >= item;
+    const customProps = { 'data-value': value, 'data-index': index };
+    const children = active ? activatedSection : deactivatedSection;
+    const _children = Children.map(children, (child: ReactElement) =>
+      React.cloneElement(child, customProps)
+    );
+    return React.createElement(React.Fragment, { key: index }, _children);
   };
 
   render() {
-    const { className, value, listProps, size, activatedSection, deactivatedSection, ...rest } = this.props;
+    const { className, value, listProps, size, activatedSection, deactivatedSection, ...rest } =
+      this.props;
     return (
-      <div data-value={value} data-component={CLASS_NAME} className={cx(CLASS_NAME, className)} {...rest}>
+      <div
+        data-value={value}
+        data-component={CLASS_NAME}
+        className={cx(CLASS_NAME, className)}
+        {...rest}>
         <ReactList items={this.items} template={this.handleTemplate} {...listProps} />
       </div>
     );