欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React-View-UI組件庫(kù)封裝Loading加載中源碼

 更新時(shí)間:2022年06月23日 14:54:19   作者:馮心心愛(ài)吃肉  
這篇文章主要介紹了React-View-UI組件庫(kù)封裝Loading加載樣式,主要包括組件介紹,組件源碼及組件測(cè)試源碼,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

組件介紹

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

Loading API能力

組件一共提供了如下的API能力,可以在使用時(shí)更靈活:

  1. type表示loading類(lèi)型,默認(rèn)是default,當(dāng)用戶(hù)需要使用省略樣式,設(shè)置type=dot即可;
  2. mask配置蒙層,可在loading時(shí)遮擋覆蓋內(nèi)容為半透明狀態(tài),適用于內(nèi)容未加載時(shí)的遮蓋;
  3. loadingText配置加載文字,在圖標(biāo)下顯示;
  4. icon配置自定義圖標(biāo),可配置自己所需要的Icon或svg圖標(biāo);
  5. width配置自定義寬度;
  6. height配置自定義高度;
  7. 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;

組件測(cè)試源碼

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', () => {
    //測(cè)試基礎(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', () => {
    //測(cè)試省略號(hào)加載
    const loading = mount(<Loading type="dot" />);
    expect(loading.find('.dot-loading')).toHaveLength(1);
  });
  it('test mask loading has dialog', () => {
    //測(cè)試加載蒙層
    const loading = mount(<Loading mask />);
    expect(loading.find('.dialog')).toHaveLength(1);
  });
  it('test mask loading has dialog', () => {
    //測(cè)試加載蒙層
    const loading = mount(<Loading loadingText="test loading" />);
    expect(loading.find('.loading .text').text()).toBe('test loading');
  });
  it('test diffenent size loading show correctly', () => {
    //測(cè)試不同大小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);
  });
});

組件庫(kù)線(xiàn)上地址

React-View-UI組件庫(kù)線(xiàn)上鏈接:http://react-view-ui.com:92/#
github:https://github.com/fengxinhhh/React-View-UI-fs
npm:https://www.npmjs.com/package/react-view-ui

到此這篇關(guān)于React-View-UI組件庫(kù)封裝——Loading加載中的文章就介紹到這了,更多相關(guān)React-View-UI組件庫(kù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 在react中使用windicss的問(wèn)題

    在react中使用windicss的問(wèn)題

    這篇文章主要介紹了在react中使用windicss的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • React學(xué)習(xí)之JSX與react事件實(shí)例分析

    React學(xué)習(xí)之JSX與react事件實(shí)例分析

    這篇文章主要介紹了React學(xué)習(xí)之JSX與react事件,結(jié)合實(shí)例形式分析了React中JSX表達(dá)式、屬性、嵌套與react事件相關(guān)使用技巧,需要的朋友可以參考下
    2020-01-01
  • react-router-dom簡(jiǎn)介(推薦)

    react-router-dom簡(jiǎn)介(推薦)

    react-router包含三種類(lèi)型的組件:路由組件、路由匹配組件?、導(dǎo)航組件,在你使用這些組件的時(shí)候,都必須先從react-router-dom引入,這篇文章主要介紹了react-router-dom簡(jiǎn)介,需要的朋友可以參考下
    2022-12-12
  • react PropTypes校驗(yàn)傳遞的值操作示例

    react PropTypes校驗(yàn)傳遞的值操作示例

    這篇文章主要介紹了react PropTypes校驗(yàn)傳遞的值操作,結(jié)合實(shí)例形式分析了react PropTypes針對(duì)傳遞的值進(jìn)行校驗(yàn)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
    2020-04-04
  • React中的Props類(lèi)型校驗(yàn)和默認(rèn)值詳解

    React中的Props類(lèi)型校驗(yàn)和默認(rèn)值詳解

    這篇文章主要為大家詳細(xì)介紹了React中的Props類(lèi)型校驗(yàn)和默認(rèn)值,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助
    2022-03-03
  • 詳解在React項(xiàng)目中如何集成和使用web worker

    詳解在React項(xiàng)目中如何集成和使用web worker

    在復(fù)雜的React應(yīng)用中,某些計(jì)算密集型或耗時(shí)操作可能會(huì)阻塞主線(xiàn)程,導(dǎo)致用戶(hù)界面出現(xiàn)卡頓或響應(yīng)慢的現(xiàn)象,為了優(yōu)化用戶(hù)體驗(yàn),可以采用Web Worker來(lái)在后臺(tái)線(xiàn)程中執(zhí)行這些操作,本文將詳細(xì)介紹在React項(xiàng)目中如何集成和使用Web Worker來(lái)改善應(yīng)用性能,需要的朋友可以參考下
    2023-12-12
  • React報(bào)錯(cuò)Too many re-renders解決

    React報(bào)錯(cuò)Too many re-renders解決

    這篇文章主要為大家介紹了React報(bào)錯(cuò)Too many re-renders解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-12-12
  • React三大屬性之Refs的使用詳解

    React三大屬性之Refs的使用詳解

    這篇文章主要介紹了React三大屬性之Refs的使用詳解,幫助大家更好的理解和學(xué)習(xí)使用React,感興趣的朋友可以了解下
    2021-04-04
  • 使用useEffect模擬組件生命周期

    使用useEffect模擬組件生命周期

    這篇文章主要介紹了使用useEffect模擬組件生命周期,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • react獲取input輸入框的值的方法示例

    react獲取input輸入框的值的方法示例

    這篇文章主要介紹了react獲取input輸入框的值的方法示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2021-04-04

最新評(píng)論