1
- import React , { FunctionComponent } from 'react' ;
1
+ import React , { FunctionComponent , FC , PropsWithChildren } from 'react' ;
2
2
export type Callback = ( instance : Instance ) => void ;
3
3
/**
4
4
* - ready function accepts a callback as its parameter and executes it as soon as Tabs get mounted.
@@ -26,30 +26,36 @@ export interface TabComponentProps {
26
26
api : Instance ;
27
27
tabProps : TabProps ;
28
28
iconProps ?: IconProps ;
29
+ children : React . ReactNode ;
30
+ }
31
+ export interface PanelProps {
32
+ id : string ;
33
+ isSelected : boolean ;
34
+ api : Instance ;
29
35
}
30
36
export interface Options {
31
37
/** * default value is "ltr"*/
32
38
direction ?: 'rtl' | 'ltr' ;
33
- defaultPanelComponent ?: ( ) => FunctionComponent < { id : string , isSelected : boolean , api : Instance } > | null ;
34
- tabComponent ?: FunctionComponent < TabComponentProps > ;
39
+ defaultPanelComponent ?: React . ReactElement < any , any > | FunctionComponent < PanelProps > | React . ComponentClass < PanelProps > ;
40
+ tabComponent ?: React . ComponentClass < TabComponentProps > | ( ( props : TabComponentProps ) => JSX . Element ) ;
35
41
selectedTabID ?: string ;
36
42
tabs ?: Array < TabData > ;
37
43
/** * default value is true */
38
44
accessibility ?: boolean ;
39
45
/** * default value is false */
40
46
isVertical ?: boolean ;
41
- onLoad ?: ( ) => void ;
42
- onInit ?: ( ) => void ;
43
- onChange ?: ( { currentData, previousData, closedTabIDs, openedTabIDs } : { currentData : any , previousData : any , closedTabIDs : Array < string > , openedTabIDs : Array < string > } ) => void ;
47
+ onLoad ?( this : Instance ) : void ;
48
+ onInit ?( this : Instance ) : void ;
49
+ onChange ?( this : Instance , { currentData, previousData, closedTabIDs, openedTabIDs } : { currentData : CurrentData , previousData : CurrentData , closedTabIDs : Array < string > , openedTabIDs : Array < string > } ) : void ;
44
50
/** * defautl value function returns true */
45
- beforeSelect ?: ( e : React . MouseEvent < HTMLElement > , id : string ) => boolean ;
46
- onFirstSelect ?: ( { currentSelectedTabId, previousSelectedTabId } : { currentSelectedTabId : string , previousSelectedTabId : string } ) => void ;
47
- onSelect ?: ( { currentSelectedTabId, previousSelectedTabId } : { currentSelectedTabId : string , previousSelectedTabId : string } ) => void ;
48
- onOpen ?: ( openedTabIDs : Array < string > ) => void ;
51
+ beforeSelect ?( this : Instance , e : React . MouseEvent < HTMLElement > , id : string ) : boolean ;
52
+ onFirstSelect ?( this : Instance , { currentSelectedTabId, previousSelectedTabId } : { currentSelectedTabId : string , previousSelectedTabId : string } ) : void ;
53
+ onSelect ?( this : Instance , { currentSelectedTabId, previousSelectedTabId } : { currentSelectedTabId : string , previousSelectedTabId : string } ) : void ;
54
+ onOpen ?( this : Instance , openedTabIDs : Array < string > ) : void ;
49
55
/** * defautl value function returns true */
50
- beforeClose ?: ( e : React . MouseEvent < HTMLElement > , id : string ) => boolean ;
51
- onClose ?: ( closedTabIDs : Array < string > ) => void ;
52
- onDestroy ?: ( ) => void ;
56
+ beforeClose ?( this : Instance , e : React . MouseEvent < HTMLElement > , id : string ) : boolean ;
57
+ onClose ?( this : Instance , closedTabIDs : Array < string > ) : void ;
58
+ onDestroy ?( ) : void ;
53
59
}
54
60
export interface TabData {
55
61
id ?: string ;
@@ -62,37 +68,35 @@ export interface TabData {
62
68
iconClass ?: string ;
63
69
/** * default value is false */
64
70
disable ?: boolean ;
65
- panelComponent ?: React . ReactElement < any , any > | FunctionComponent < { id : string , isSelected : boolean , api : Instance } > | null ;
66
- [ x : string ] : unknown ;
71
+ panelComponent ?: React . ReactElement < any , any > | FunctionComponent < PanelProps > | React . ComponentClass < PanelProps > | null ;
72
+ [ x : string ] : any ;
67
73
}
68
74
export interface CurrentData {
69
75
openTabIDs : Array < string > ;
70
76
selectedTabID : string ;
71
77
}
72
78
export interface Instance {
73
- isOpen : ( tabID : string ) => boolean ;
74
- open : ( tabData : TabData ) => Promise < { currentData : CurrentData , instance : Instance } > ;
75
- isSelected : ( tabID : string ) => boolean ;
76
- select : ( tabID : string ) => Promise < { currentData : CurrentData , instance : Instance } > ;
79
+ isOpen ( tabID : string ) : boolean ;
80
+ open ( tabData : TabData ) : Promise < { currentData : CurrentData , instance : Instance } > ;
81
+ isSelected ( tabID : string ) : boolean ;
82
+ select ( tabID : string ) : Promise < { currentData : CurrentData , instance : Instance } > ;
77
83
/**
78
84
* - When switching parameter is true, it switches to previous selected tab
79
85
*/
80
- close : ( tabID : string , switching ?: boolean ) => Promise < { currentData : CurrentData , instance : Instance } > ;
81
- refresh : ( ) => Promise < { currentData : CurrentData , instance : Instance } > ;
82
- getOption : ( optionName : string ) => any ;
83
- setOption : ( optionName : string , optionValue : any ) => Instance ;
84
- getTab : ( tabID : string ) => TabData ;
85
- setTab : ( tabID : string , sourceObject : TabData ) => Instance ;
86
- on : ( eventName : string , handler : Function ) => Instance ;
87
- one : ( eventName : string , handler : Function ) => Instance ;
88
- off : ( eventName : string , handler : Function ) => Instance ;
89
- getData : ( ) => TabData ;
90
- getPreviousData : ( ) => TabData ;
91
- sort : ( tabIDs : Array < string > ) => Promise < { currentData : CurrentData , instance : Instance } > ;
86
+ close ( tabID : string , switching ?: boolean ) : Promise < { currentData : CurrentData , instance : Instance } > ;
87
+ refresh ( ) : Promise < { currentData : CurrentData , instance : Instance } > ;
88
+ getOption ( optionName : string ) : any ;
89
+ setOption ( optionName : string , optionValue : any ) : Instance ;
90
+ getTab ( tabID : string ) : TabData ;
91
+ setTab ( tabID : string , sourceObject : TabData ) : Instance ;
92
+ on ( eventName : string , handler : Function ) : Instance ;
93
+ one ( eventName : string , handler : Function ) : Instance ;
94
+ off ( eventName : string , handler : Function ) : Instance ;
95
+ getData ( ) : CurrentData ;
96
+ getPreviousData ( ) : CurrentData ;
97
+ sort ( tabIDs : Array < string > ) : Promise < { currentData : CurrentData , instance : Instance } > ;
92
98
}
93
- type Tablist = FunctionComponent < { } > ;
99
+ type Tablist = FC < PropsWithChildren < { } > > ;
94
100
type Panellist = FunctionComponent < { } > ;
95
- export const TabList : Tablist ;
96
- export const PanelList : Panellist ;
97
101
declare const useDynTabs : ( options ?: Options ) => [ Tablist , Panellist , Ready ] ;
98
102
export default useDynTabs ;
0 commit comments