1- import React , { useReducer , useLayoutEffect , useRef } from "react" ;
2- import TabList from "../tabList/tabList" ;
3- import PanelList from "../panelList/panelList.js" ;
4- import reducer from "../utils/stateManagement/reducer" ;
5- import Api from '../utils/api' ;
6- import { ApiContext , StateContext , ForceUpdateContext } from "../utils/context.js" ;
7- function useDynamicTabs ( options ) {
8- const ref = useRef ( null ) ;
9- if ( ref . current === null )
10- ref . current = { api : new ( Api ) ( { options } ) , TabListComponent : null , PanelListCompoent : null } ;
11- const { current : { api } } = ref
12- , _ref = ref . current
13- , [ state , dispatch ] = useReducer ( reducer , api . getInitialState ( ) ) ;
14- api . updateReducer ( state , dispatch ) ;
15- useLayoutEffect ( ( ) => {
16- api . trigger ( 'onLoad' ) ;
17- return ( ) => { api . trigger ( 'onDestroy' ) ; } ;
18- } , [ ] ) ;
19- useLayoutEffect ( ( ) => {
20- const oldState = api . getCopyPerviousData ( )
21- , [ openedTabsId , closedTabsId ] = api . helper . getArraysDiff ( state . openTabIDs , oldState . openTabIDs )
22- , isSwitched = oldState . selectedTabID !== state . selectedTabID ;
23- api . trigger ( 'onChange' , { newState : state , oldState, closedTabsId, openedTabsId, isSwitched } ) ;
24- } , [ state ] ) ;
25- if ( ! _ref . TabListComponent )
26- _ref . TabListComponent = ( props = { } ) => {
27- return (
28- < ApiContext . Provider value = { _ref . api } >
29- < StateContext . Provider value = { _ref . api . stateRef } >
30- < ForceUpdateContext . Provider value = { _ref . api . forceUpdateState } >
31- < TabList { ...props } > props.children</ TabList >
32- </ ForceUpdateContext . Provider >
33- </ StateContext . Provider >
34- </ ApiContext . Provider >
35- ) ;
36- } ;
37- if ( ! _ref . PanelListCompoent )
38- _ref . PanelListCompoent = props => (
39- < ApiContext . Provider value = { _ref . api } >
40- < StateContext . Provider value = { _ref . api . stateRef } >
41- < ForceUpdateContext . Provider value = { _ref . api . forceUpdateState } >
42- < PanelList { ...props } > props.children</ PanelList >
43- </ ForceUpdateContext . Provider >
44- </ StateContext . Provider >
45- </ ApiContext . Provider >
46- ) ;
47- return [ _ref . TabListComponent , _ref . PanelListCompoent , _ref . api . userProxy ] ;
48- }
49- useDynamicTabs . defaultOptions = { } ;
50- export default useDynamicTabs ;
1+ import useDynamicTabs from './useDynamicTabs.js' ;
2+ import CreateDefaultOptions from './createDefaultOptions.js' ;
3+ import DefaultTabInnerComponent from '../tab/defaulTabInner.js' ;
4+ new ( CreateDefaultOptions ) ( useDynamicTabs , DefaultTabInnerComponent ) ;
5+ export default useDynamicTabs ;
0 commit comments