Merge pull request #42 from mjoyce91/tail-content

Add ability to pass content to tail

Author: afc163

src/Step.jsx

@@ -30,6 +30,7 @@ export default class Step extends React.Component {
       PropTypes.bool,
       PropTypes.func,
     ]),
+    tailContent: PropTypes.any,
   };
   renderIconNode() {
     const {
@@ -68,7 +69,8 @@ export default class Step extends React.Component {
       className, prefixCls, style, itemWidth,
       status = 'wait', iconPrefix, icon, wrapperStyle,
       adjustMarginRight, stepNumber,
-      description, title, progressDot, ...restProps,
+      description, title, progressDot, tailContent,
+      ...restProps,
     } = this.props;
 
     const classString = classNames(
@@ -90,7 +92,9 @@ export default class Step extends React.Component {
         className={classString}
         style={stepItemStyle}
       >
-        <div className={`${prefixCls}-item-tail`} />
+        <div className={`${prefixCls}-item-tail`}>
+          {tailContent}
+        </div>
         <div className={`${prefixCls}-item-icon`}>
           {this.renderIconNode()}
         </div>

tests/__snapshots__/index.test.js.snap

@@ -984,6 +984,143 @@ exports[`Steps render renders step with description and status 1`] = `
 </div>
 `;
 
+exports[`Steps render renders step with tailContent 1`] = `
+<div
+  class="rc-steps rc-steps-horizontal rc-steps-label-horizontal"
+>
+  <div
+    class="rc-steps-item rc-steps-item-process"
+  >
+    <div
+      class="rc-steps-item-tail"
+    >
+      text
+    </div>
+    <div
+      class="rc-steps-item-icon"
+    >
+      <span
+        class="rc-steps-icon"
+      >
+        1
+      </span>
+    </div>
+    <div
+      class="rc-steps-item-content"
+    >
+      <div
+        class="rc-steps-item-title"
+      >
+        已完成
+      </div>
+      <div
+        class="rc-steps-item-description"
+      >
+        xx
+      </div>
+    </div>
+  </div>
+  <div
+    class="rc-steps-item rc-steps-item-wait"
+  >
+    <div
+      class="rc-steps-item-tail"
+    >
+      <div>
+        content
+      </div>
+    </div>
+    <div
+      class="rc-steps-item-icon"
+    >
+      <span
+        class="rc-steps-icon"
+      >
+        2
+      </span>
+    </div>
+    <div
+      class="rc-steps-item-content"
+    >
+      <div
+        class="rc-steps-item-title"
+      >
+        进行中
+      </div>
+      <div
+        class="rc-steps-item-description"
+      >
+        xx
+      </div>
+    </div>
+  </div>
+  <div
+    class="rc-steps-item rc-steps-item-wait"
+  >
+    <div
+      class="rc-steps-item-tail"
+    >
+      3
+    </div>
+    <div
+      class="rc-steps-item-icon"
+    >
+      <span
+        class="rc-steps-icon"
+      >
+        3
+      </span>
+    </div>
+    <div
+      class="rc-steps-item-content"
+    >
+      <div
+        class="rc-steps-item-title"
+      >
+        待运行
+      </div>
+      <div
+        class="rc-steps-item-description"
+      >
+        xx
+      </div>
+    </div>
+  </div>
+  <div
+    class="rc-steps-item rc-steps-item-wait"
+  >
+    <div
+      class="rc-steps-item-tail"
+    >
+      text
+    </div>
+    <div
+      class="rc-steps-item-icon"
+    >
+      <span
+        class="rc-steps-icon"
+      >
+        4
+      </span>
+    </div>
+    <div
+      class="rc-steps-item-content"
+    >
+      <div
+        class="rc-steps-item-title"
+      >
+        待运行
+      </div>
+      <div
+        class="rc-steps-item-description"
+      >
+        xx
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Steps render renders vertical correctly 1`] = `
 <div
   class="rc-steps rc-steps-vertical"

tests/index.test.js

@@ -86,5 +86,17 @@ describe('Steps', () => {
       );
       expect(wrapper).toMatchSnapshot();
     });
+
+    it('renders step with tailContent', () => {
+      const wrapper = render(
+        <Steps>
+          <Step title="已完成" description="xx" tailContent="text" />
+          <Step title="进行中" description="xx" tailContent={<div>content</div>} />
+          <Step title="待运行" description="xx" tailContent={3} />
+          <Step title="待运行" description="xx" tailContent="text" />
+        </Steps>
+      );
+      expect(wrapper).toMatchSnapshot();
+    });
   });
 });