1- import { useMemo , useRef } from "react" ;
1+ import { useEffect , useMemo , useRef } from "react" ;
22import { useControl } from "../../hooks" ;
33import { ThemeProvider } from "@fluentui/react" ;
44import { datasetControlTranslations } from "./translations" ;
5- import { getDatasetControlStyles } from "./styles" ;
6- import { IDatasetControl } from "./interfaces" ;
7- import { QuickFind } from "./QuickFind/QuickFind" ;
85import { useRerender } from "@talxis/react-components" ;
9- import { Client } from "@talxis/client-libraries" ;
10- import { DatasetPaging } from "./Paging" ;
11-
12- const client = new Client ( ) ;
6+ import { DatasetControlModel } from "./DatasetControlModel" ;
7+ import { ModelContext } from "./useModel" ;
8+ import { Pagination } from "./Pagination/Pagination" ;
9+ import { getDatasetControlStyles } from "./styles" ;
10+ import { Header } from "./Header/Header" ;
11+ import { useEventEmitter } from "../../hooks/useEventEmitter" ;
12+ import { IDataProviderEventListeners } from "@talxis/client-libraries" ;
13+ import { IDatasetControlProps } from "./interfaces" ;
14+ import { IDatasetControlEvents } from "../../utils/dataset-control" ;
1315
14- export const DatasetControl = ( props : IDatasetControl ) => {
15- const { labels, theme } = useControl ( 'DatasetControl' , props , datasetControlTranslations ) ;
16- const rerender = useRerender ( ) ;
17- const dataset = props . parameters . Grid ;
18- const injectedContextRef = useRef ( props . context ) ;
19- const styles = useMemo ( ( ) => getDatasetControlStyles ( theme , props . parameters . Height ?. raw ) , [ ] ) ;
16+ export const DatasetControl = ( props : IDatasetControlProps ) => {
17+ const { labels, theme } = useControl ( 'DatasetControl' , {
18+ ...props ,
19+ context : props . onGetDatasetControlInstance ( ) . getPcfContext ( ) ,
20+ parameters : props . onGetDatasetControlInstance ( ) . getParameters ( ) ,
21+ } , datasetControlTranslations ) ;
22+
23+ const propsRef = useRef < IDatasetControlProps > ( props ) ;
24+ propsRef . current = props ;
25+ const datasetControl = propsRef . current . onGetDatasetControlInstance ( ) ;
26+ const model = useMemo ( ( ) => new DatasetControlModel ( {
27+ datasetControl : datasetControl ,
28+ getLabels : ( ) => labels ,
29+ } ) , [ ] ) ;
30+ useMemo ( ( ) => props . onGetDatasetControlInstance ( ) . init ( ) , [ ] ) ;
2031 const onOverrideComponentProps = props . onOverrideComponentProps ?? ( ( props ) => props ) ;
21- useMemo ( ( ) => {
22- if ( dataset . isVirtual ( ) || ! client . isTalxisPortal ( ) ) {
23- dataset . setInterceptor ( '__onRequestRender' , ( ) => rerender ( ) ) ;
24- }
25- } , [ ] ) ;
26-
27- //we need to have a way to customize the init behavior from above
28- const componentProps = onOverrideComponentProps ( {
29- onDatasetInit : ( ) => {
30- if ( dataset . isVirtual ( ) ) {
31- dataset . paging . loadExactPage ( dataset . paging . pageNumber ) ;
32- }
33- } ,
34- containerProps : {
35- theme : theme ,
36- className : styles . datasetControlRoot ,
37- } ,
32+ const rerender = useRerender ( ) ;
33+ const styles = useMemo ( ( ) => getDatasetControlStyles ( datasetControl . getHeight ( ) ) , [ datasetControl . getHeight ( ) ] ) ;
34+ const dataset = datasetControl . getDataset ( ) ;
3835
39- headerProps : {
40- headerContainerProps : {
41- className : styles . headerRoot
42- } ,
43- onRender : ( renderQuickFind ) => renderQuickFind ( ) ,
44- onGetQuickFindProps : ( props ) => props
45- } ,
46- onRenderPagination : ( props , renderPagination ) => renderPagination ( props )
47- } ) ;
36+ useEventEmitter < IDataProviderEventListeners > ( dataset , 'onNewDataLoaded' , rerender ) ;
37+ useEventEmitter < IDataProviderEventListeners > ( dataset , 'onRenderRequested' , rerender ) ;
38+ useEventEmitter < IDataProviderEventListeners > ( dataset , 'onBeforeNewDataLoaded' , rerender ) ;
4839
49- useMemo ( ( ) => {
50- //@ts -ignore - private property
51- injectedContextRef . current = dataset . _patchContext ( props . context ) ;
52- } , [ props . context ] ) ;
5340
54- useMemo ( ( ) => {
55- componentProps . onDatasetInit ( ) ;
56- } , [ ] ) ;
41+ const componentProps = onOverrideComponentProps ( {
42+ onRender : ( props , defaultRender ) => defaultRender ( props ) ,
43+ } )
5744
58- const isQuickFindEnabled = ( ) => {
59- if ( dataset . isVirtual ( ) && props . parameters . EnableQuickFind ?. raw ) {
60- return true ;
45+ const isFooterVisible = ( ) => {
46+ switch ( true ) {
47+ case datasetControl . isPaginationVisible ( ) :
48+ case datasetControl . isRecordCountVisible ( ) :
49+ case datasetControl . isPageSizeSwitcherVisible ( ) :
50+ return true ;
51+ default :
52+ return false ;
6153 }
62- return false ;
6354 }
6455
56+ const isPaginationVisible = ( ) => {
57+ return isFooterVisible ( ) ;
58+ }
59+
60+ useEffect ( ( ) => {
61+ return ( ) => {
62+ datasetControl . destroy ( ) ;
63+ }
64+ } , [ ] ) ;
65+
66+ return < ModelContext . Provider value = { model } >
67+ { componentProps . onRender ( {
68+ container : {
69+ theme : theme ,
70+ className : styles . datasetControlRoot
71+ } ,
72+ onRenderHeader : ( props , defaultRender ) => defaultRender ( props ) ,
73+ onRenderFooter : ( props , defaultRender ) => defaultRender ( props ) ,
74+ onRenderControlContainer : ( props , defaultRender ) => defaultRender ( props )
75+ } , ( props ) => {
76+ return < ThemeProvider { ...props . container } >
77+ < Header onRenderHeader = { props . onRenderHeader } />
78+ { props . onRenderControlContainer ( {
79+ controlContainerProps : {
80+ className : styles . controlContainer
81+ } ,
6582
66- return (
67- < ThemeProvider { ...componentProps . containerProps } >
68- { isQuickFindEnabled ( ) &&
69- < div { ...componentProps . headerProps . headerContainerProps } >
70- { componentProps . headerProps . onRender ( ( ) => {
71- return < >
72- { isQuickFindEnabled ( ) &&
73- < QuickFind
74- dataset = { dataset }
75- labels = { labels }
76- theme = { theme }
77- onGetQuickFindComponentProps = { ( props ) => componentProps . headerProps . onGetQuickFindProps ( props ) } />
78- }
79- </ >
80- } ) }
81- </ div >
82- }
83- { props . onGetControlComponent ( { ...props , context : injectedContextRef . current } ) }
84- { componentProps . onRenderPagination ( {
85- context : injectedContextRef . current , parameters : {
86- Dataset : dataset ,
87- EnablePagination : props . parameters . EnablePagination ,
88- EnablePageSizeSwitcher : props . parameters . EnablePageSizeSwitcher
89- }
90- } , ( paginationProps ) => < DatasetPaging { ...paginationProps } /> ) }
91- </ ThemeProvider >
92- )
83+ } , ( props ) => {
84+ const { onOverrideComponentProps, ...filteredProps } = propsRef . current ;
85+ return < div { ...props . controlContainerProps } >
86+ { propsRef . current . onGetControlComponent ( {
87+ ...filteredProps ,
88+ parameters : datasetControl . getParameters ( ) ,
89+ context : datasetControl . getPcfContext ( ) ,
90+ state : datasetControl . getState ( )
91+ } ) }
92+ </ div >
93+ } ) }
94+ { props . onRenderFooter ( {
95+ footerContainerProps : {
96+ className : styles . footer
97+ } ,
98+ onRenderPagination : ( props , defaultRender ) => defaultRender ( props )
99+ } , ( props ) => {
100+ if ( ! isFooterVisible ( ) ) {
101+ return < > </ >
102+ }
103+ return < div { ...props . footerContainerProps } >
104+ { isPaginationVisible ( ) &&
105+ < Pagination onRenderPagination = { props . onRenderPagination } />
106+ }
107+ </ div >
108+ } ) }
109+ </ ThemeProvider >
110+ } ) }
111+ </ ModelContext . Provider >
93112}
0 commit comments