|
|
@ -1,17 +1,19 @@ |
|
|
|
import moment from 'moment'; |
|
|
|
import moment from 'moment'; |
|
|
|
import { useEffect, useState, useRef, useCallback } from 'react'; |
|
|
|
import { useEffect, useState, useRef, useCallback } from 'react'; |
|
|
|
import { useSelector } from 'react-redux'; |
|
|
|
import { useSelector } from 'react-redux'; |
|
|
|
|
|
|
|
import { Spinner } from 'reactstrap'; |
|
|
|
|
|
|
|
|
|
|
|
export const AnalysimuationInfo = props => { |
|
|
|
export const AnalysimuationInfo = props => { |
|
|
|
const [target, setTarget] = useState(null); |
|
|
|
const [target, setTarget] = useState(null); |
|
|
|
const [isLoading, setIsLoding] = useState(false); |
|
|
|
|
|
|
|
const bottomObserver = useRef(null); |
|
|
|
const { loading } = useSelector(state => state.loadingReducer); |
|
|
|
|
|
|
|
|
|
|
|
const onIntersect = useCallback( |
|
|
|
const onIntersect = useCallback( |
|
|
|
([entry], observer) => { |
|
|
|
([entry], observer) => { |
|
|
|
if (entry.isIntersecting) { |
|
|
|
if (entry.isIntersecting) { |
|
|
|
|
|
|
|
if (props.data?.filter(i => i === undefined).length <= 0) { |
|
|
|
props.handlerPageList(); |
|
|
|
props.handlerPageList(); |
|
|
|
// 데이터를 가져오는 부분
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
[props.handlerPageList] |
|
|
|
[props.handlerPageList] |
|
|
@ -20,11 +22,10 @@ export const AnalysimuationInfo = props => { |
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
let observer; |
|
|
|
let observer; |
|
|
|
if (target) { |
|
|
|
if (target) { |
|
|
|
// callback 함수, option
|
|
|
|
|
|
|
|
observer = new IntersectionObserver(onIntersect, { |
|
|
|
observer = new IntersectionObserver(onIntersect, { |
|
|
|
threshold: 0.4 |
|
|
|
threshold: 0.4 |
|
|
|
}); |
|
|
|
}); |
|
|
|
observer.observe(target); // 타겟 엘리먼트 지정
|
|
|
|
observer.observe(target); |
|
|
|
} |
|
|
|
} |
|
|
|
return () => observer && observer.disconnect(); |
|
|
|
return () => observer && observer.disconnect(); |
|
|
|
}, [target, props.handlerPageList]); |
|
|
|
}, [target, props.handlerPageList]); |
|
|
@ -35,7 +36,9 @@ export const AnalysimuationInfo = props => { |
|
|
|
<div className='no-dataTable'>표시할 데이터가 없습니다.</div> |
|
|
|
<div className='no-dataTable'>표시할 데이터가 없습니다.</div> |
|
|
|
) : ( |
|
|
|
) : ( |
|
|
|
<> |
|
|
|
<> |
|
|
|
{props.data?.map(item => { |
|
|
|
{props.data |
|
|
|
|
|
|
|
?.filter(i => i !== undefined) |
|
|
|
|
|
|
|
.map(item => { |
|
|
|
// item.idntfNum,
|
|
|
|
// item.idntfNum,
|
|
|
|
// ':::',
|
|
|
|
// ':::',
|
|
|
|
// item.idntfNum.indexOf(props.filterId)
|
|
|
|
// item.idntfNum.indexOf(props.filterId)
|
|
|
@ -80,6 +83,19 @@ export const AnalysimuationInfo = props => { |
|
|
|
); |
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|
})} |
|
|
|
})} |
|
|
|
|
|
|
|
{loading && ( |
|
|
|
|
|
|
|
<div |
|
|
|
|
|
|
|
style={{ |
|
|
|
|
|
|
|
display: 'flex', |
|
|
|
|
|
|
|
justifyContent: 'center', |
|
|
|
|
|
|
|
flexDirection: 'column', |
|
|
|
|
|
|
|
alignItems: 'center' |
|
|
|
|
|
|
|
}} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<Spinner color='primary' /> |
|
|
|
|
|
|
|
<span>Loading...</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
)} |
|
|
|
<div ref={setTarget} /> |
|
|
|
<div ref={setTarget} /> |
|
|
|
</> |
|
|
|
</> |
|
|
|
)} |
|
|
|
)} |
|
|
|