Concis组件库封装——Steps步骤条

sorryhc
1,236 阅读1分钟

您好，如果喜欢我的文章，可以关注我的公众号「量子前端」，将不定期关注推送前端好文~

前些时间有点忙...也是没来得及更新组件库，今天写了一个PC/Mobile兼容的步骤条组件，组件文档如下：

在这里插入图片描述 这个主要是一个UI组件，在业务中用的比较多的，源码如下： Steps外层组件：

import React, { FC, memo, useEffect, useCallback } from 'react';
import { CheckOutlined } from '@ant-design/icons';
import './index.module.less';

interface stepsProps {
  /**
   * @description 当前步骤下标
   * @default 1
   */
  current: number;
  /**
   * @description 步骤标题
   * @default ""
   */
  title?: string;
  /**
   * @description 步骤子标题
   * @default ""
   */
  subTitle?: string;
  /**
   * @description 步骤描述
   * @default ""
   */
  description?: string;
  children: any;
}

const Steps: FC<stepsProps> = (props) => {
  const { current, children } = props;

  useEffect(() => {
    console.log(children);
  }, []);

  const indexClassName = useCallback(
    (index: any): string => {
      if (index == current) {
        return 'active-index';
      } else if (index > current) {
        return 'after-index';
      } else if (index < current) {
        return 'before-index';
      }
      return 'before-index';
    },
    [current],
  );

  return (
    <div className="steps">
      <div className="step-content">
        {/* <div className="line" /> */}
        <div className="step-line">
          {children.map((step: any, index: number) => {
            return (
              <div className="step-box">
                {index + 1 < current ? (
                  <div className={indexClassName(index + 1)}>
                    <CheckOutlined />
                  </div>
                ) : (
                  <span className={indexClassName(index + 1)}>{index + 1}</span>
                )}

                <div className="sub-content">
                  <div className="top">
                    <span
                      className="title"
                      style={index + 1 > current ? { color: '#999999' } : { color: '#000000' }}
                    >
                      {step.props.title}
                    </span>
                    <span className="sub-title">{step.props.subTitle}</span>
                  </div>
                  <div
                    className="bottom"
                    style={index + 1 !== current ? { color: '#999999' } : { color: '#000000' }}
                  >
                    {step.props.description}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default memo(Steps);

Step内层子组件（每一个步骤）：

import React, { FC, memo } from 'react';

interface stepProps {
  /**
   * @description 步骤标题
   * @default ""
   */
  title: string;
  subTitle?: string;
  description?: string;
}
const Step: FC<stepProps> = (props) => {
  const { title } = props;
  return <div>{title}</div>;
};

export default memo(Step);
avatar
文章
阅读
粉丝