React-View-UI組件庫(kù)封裝Loading加載中源碼
組件介紹
Loading組件是日常開(kāi)發(fā)用的很多的組件,這次封裝主要包含兩種狀態(tài)的Loading,旋轉(zhuǎn)、省略號(hào),話(huà)不多說(shuō)先看一下組件的文檔頁(yè)面吧:
Loading API能力
組件一共提供了如下的API能力,可以在使用時(shí)更靈活:
- type表示loading類(lèi)型,默認(rèn)是default,當(dāng)用戶(hù)需要使用省略樣式,設(shè)置type=dot即可;
- mask配置蒙層,可在loading時(shí)遮擋覆蓋內(nèi)容為半透明狀態(tài),適用于內(nèi)容未加載時(shí)的遮蓋;
- 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;
組件測(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學(xué)習(xí)之JSX與react事件實(shí)例分析
這篇文章主要介紹了React學(xué)習(xí)之JSX與react事件,結(jié)合實(shí)例形式分析了React中JSX表達(dá)式、屬性、嵌套與react事件相關(guān)使用技巧,需要的朋友可以參考下2020-01-01react PropTypes校驗(yàn)傳遞的值操作示例
這篇文章主要介紹了react PropTypes校驗(yàn)傳遞的值操作,結(jié)合實(shí)例形式分析了react PropTypes針對(duì)傳遞的值進(jìn)行校驗(yàn)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2020-04-04React中的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
在復(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-12React報(bào)錯(cuò)Too many re-renders解決
這篇文章主要為大家介紹了React報(bào)錯(cuò)Too many re-renders解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12