React-View-UI組件庫封裝Loading加載中源碼

更新時間：2022年06月23日 14:54:19 作者：馮心心愛吃肉

這篇文章主要介紹了React-View-UI組件庫封裝Loading加載樣式,主要包括組件介紹，組件源碼及組件測試源碼，本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

組件介紹

Loading組件是日常開發(fā)用的很多的組件，這次封裝主要包含兩種狀態(tài)的Loading，旋轉(zhuǎn)、省略號，話不多說先看一下組件的文檔頁面吧：

Loading API能力

組件一共提供了如下的API能力，可以在使用時更靈活：

type表示loading類型，默認是default，當(dāng)用戶需要使用省略樣式，設(shè)置type=dot即可；
mask配置蒙層，可在loading時遮擋覆蓋內(nèi)容為半透明狀態(tài)，適用于內(nèi)容未加載時的遮蓋；
loadingText配置加載文字，在圖標(biāo)下顯示；
icon配置自定義圖標(biāo)，可配置自己所需要的Icon或svg圖標(biāo)；
width配置自定義寬度；
height配置自定義高度；
style配置loading整體自定義樣式；

組件源碼

index.tsx:

import React, { FC, useEffect, useRef, useState, Fragment, useMemo } from 'react';
import { LoadingProps } from './interface';
import './index.module.less';
const Loading: FC<LoadingProps> = (props) => {
  const {
    type = 'default',
    mask = false,
    loadingText,
    icon,
    width = '2em',
    height = '2em',
    style = {},
  } = props;
  const timer = useRef<any>(null);
  const [activeDotIndex, setActiveDotIndex] = useState(0);
  useEffect(() => {
    timer.current = setInterval(() => {
      setActiveDotIndex((old) => {
        if (old === 2) {
          old = 0;
        } else {
          old++;
        }
        return old;
      });
    }, 500);
    return () => {
      clearInterval(timer.current);
    };
  }, []);
  const loadingStyle = useMemo(() => {
    const returnStyle = style;
    returnStyle.width = width;
    returnStyle.height = height;
    return returnStyle;
  }, [width, height, style]);
  return (
    <Fragment>
      {mask && <div className="dialog" />}
      {type === 'default' ? (
        <div className="loading" style={loadingStyle}>
          <div className="loading-container">
            {icon || (
              <svg
                fill="none"
                stroke="currentColor"
                stroke-width="4"
                width={width}
                height={height}
                viewBox="0 0 48 48"
                aria-hidden="true"
                focusable="false"
              >
                <path d="M42 24c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6"></path>
              </svg>
            )}
          </div>
          {loadingText && <div className="text">{loadingText}</div>}
        </div>
      ) : (
        <div className="dot-loading">
          {new Array(3).fill('').map((item, index) => {
            return <div className={activeDotIndex === index ? 'dot-active' : 'dot'}>{item}</div>;
          })}
        </div>
      )}
    </Fragment>
  );
};
export default Loading;

組件測試源碼

loading.test.tsx:

import React from 'react';
import Loading from '../../Loading/index';
import Enzyme from '../setup';
import mountTest from '../mountTest';
import ReactDOM from 'react-dom';
const { mount } = Enzyme;
let container: HTMLDivElement | null;
mountTest(Loading);
describe('loading', () => {
  beforeEach(() => {
    container = document.createElement('div');
    document.body.appendChild(container);
  });
  afterEach(() => {
    document.body.removeChild(container as HTMLDivElement);
    container = null;
  });
  it('test loading show correctly', () => {
    //測試基礎(chǔ)加載
    const loading = mount(<Loading />);
    expect(loading.find('.loading .loading-container svg')).toHaveLength(1);
    expect(loading.find('.loading .text')).toHaveLength(0);
  });
  it('test dot loading show correctly', () => {
    //測試省略號加載
    const loading = mount(<Loading type="dot" />);
    expect(loading.find('.dot-loading')).toHaveLength(1);
  });
  it('test mask loading has dialog', () => {
    //測試加載蒙層
    const loading = mount(<Loading mask />);
    expect(loading.find('.dialog')).toHaveLength(1);
  });
  it('test mask loading has dialog', () => {
    //測試加載蒙層
    const loading = mount(<Loading loadingText="test loading" />);
    expect(loading.find('.loading .text').text()).toBe('test loading');
  });
  it('test diffenent size loading show correctly', () => {
    //測試不同大小loading、loading自定義樣式
    const component = <Loading width="3em" height="3em" style={{ marginLeft: '100px' }} />;
    ReactDOM.render(component, container);
    const loadingDom = container?.querySelector('.loading');
    expect(
      loadingDom?.getAttribute('style')?.includes('margin-left: 100px; width: 3em; height: 3em;'),
    );
    const svgDom = loadingDom?.querySelector('svg');
    expect(
      svgDom?.getAttribute('width') === '3em' && svgDom?.getAttribute('height') === '3em',
    ).toBe(true);
  });
});