feat: add 'horizontal-alternate'

Author: zombieJ

src/Step.tsx

@@ -5,6 +5,10 @@ import KeyCode from '@rc-component/util/lib/KeyCode';
 import type { Status, StepItem, StepsProps } from './Steps';
 import Rail from './Rail';
 
+function hasContent<T>(value: T) {
+  return value !== undefined && value !== null;
+}
+
 export interface StepProps {
   // style
   prefixCls?: string;
@@ -18,12 +22,6 @@ export interface StepProps {
   index: number;
   last: boolean;
 
-  // stepIndex?: number;
-  // stepNumber?: number;
-  // title?: React.ReactNode;
-  // subTitle?: React.ReactNode;
-  // description?: React.ReactNode;
-
   // render
   iconRender?: StepsProps['iconRender'];
   icon?: React.ReactNode;
@@ -115,29 +113,37 @@ export default function Step(props: StepProps) {
   // ========================= Render =========================
   const mergedStatus = status || 'wait';
 
+  const hasTitle = hasContent(title);
+  const hasSubTitle = hasContent(subTitle);
+
   const classString = cls(
     itemCls,
     `${itemCls}-${mergedStatus}`,
     {
       [`${itemCls}-custom`]: icon,
       [`${itemCls}-active`]: active,
       [`${itemCls}-disabled`]: disabled === true,
+      [`${itemCls}-empty-header`]: !hasTitle && !hasSubTitle,
     },
     className,
     classNames.item,
   );
 
+  // !hasContent(title) && !hasContent(subTitle) && `${itemCls}-header-empty`
+
   const wrapperNode = (
     <div className={cls(`${itemCls}-wrapper`, classNames.itemWrapper)} style={styles.itemWrapper}>
       <div className={cls(`${itemCls}-icon`, classNames.itemIcon)} style={styles.itemIcon}>
         {iconRender?.(renderInfo)}
       </div>
       <div className={cls(`${itemCls}-section`, classNames.itemSection)} style={styles.itemSection}>
         <div className={cls(`${itemCls}-header`, classNames.itemHeader)} style={styles.itemHeader}>
-          <div className={cls(`${itemCls}-title`, classNames.itemTitle)} style={styles.itemTitle}>
-            {title}
-          </div>
-          {subTitle && (
+          {hasTitle && (
+            <div className={cls(`${itemCls}-title`, classNames.itemTitle)} style={styles.itemTitle}>
+              {title}
+            </div>
+          )}
+          {hasSubTitle && (
             <div
               title={typeof subTitle === 'string' ? subTitle : undefined}
               className={cls(`${itemCls}-subtitle`, classNames.itemSubtitle)}
@@ -151,7 +157,7 @@ export default function Step(props: StepProps) {
             <Rail prefixCls={itemCls} classNames={classNames} styles={styles} status={nextStatus} />
           )}
         </div>
-        {mergedContent && (
+        {hasContent(mergedContent) && (
           <div
             className={cls(`${itemCls}-content`, classNames.itemContent)}
             style={styles.itemContent}

src/Steps.tsx

@@ -55,7 +55,7 @@ export interface StepsProps {
 
   // layout
   orientation?: 'horizontal' | 'vertical';
-  titlePlacement?: 'horizontal' | 'vertical';
+  titlePlacement?: 'horizontal' | 'vertical' | 'horizontal-alternate';
 
   // data
   status?: Status;
@@ -81,8 +81,8 @@ export default function Steps(props: StepsProps) {
     rootClassName,
 
     // layout
-    orientation = 'horizontal',
-    titlePlacement = 'horizontal',
+    orientation,
+    titlePlacement,
 
     // data
     status = 'process',
@@ -102,8 +102,17 @@ export default function Steps(props: StepsProps) {
   // ============================= layout =============================
   const isVertical = orientation === 'vertical';
   const mergedOrientation = isVertical ? 'vertical' : 'horizontal';
-  const mergeTitlePlacement =
-    !isVertical && titlePlacement === 'vertical' ? 'vertical' : 'horizontal';
+  const mergeTitlePlacement = React.useMemo(() => {
+    if (isVertical) {
+      return titlePlacement === 'horizontal' || titlePlacement === 'horizontal-alternate'
+        ? titlePlacement
+        : 'horizontal';
+    }
+
+    return titlePlacement === 'vertical' || titlePlacement === 'horizontal'
+      ? titlePlacement
+      : 'horizontal';
+  }, [isVertical, titlePlacement]);
 
   // ============================= styles =============================
   const classString = cls(

tests/alternate.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Steps from '../src';
+
+describe('Steps.alternate', () => {
+  it('should have empty className', () => {
+    const { container } = render(<Steps items={[{}]} />);
+
+    expect(container.querySelector('.rc-steps-item')).toHaveClass('rc-steps-item-empty-header');
+  });
+
+  it('', () => {
+    const { container } = render(
+      <Steps orientation="vertical" titlePlacement="horizontal-alternate" />,
+    );
+    expect(container.querySelector('.rc-steps')).toHaveClass('rc-steps-title-horizontal-alternate');
+  });
+});