如何搭建一套公司内部的UI组件库

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

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;

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

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', () => {

    //测试基础加载

    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);

  });

});