108 lines
3.6 KiB
JavaScript
108 lines
3.6 KiB
JavaScript
import React from 'react'
|
|
import { useCallback, useEffect, useMemo, useState } from 'react'
|
|
import { AgGridReact } from 'ag-grid-react'
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
|
|
import 'ag-grid-community/styles/ag-grid.css'
|
|
import 'ag-grid-community/styles/ag-theme-quartz.css'
|
|
|
|
export default function StuffQGrid(props) {
|
|
const { getMessage } = useMessage()
|
|
|
|
const { gridData, gridColumns, isPageable = true, count, gridRef } = props
|
|
/**
|
|
* 행 데이터를 설정할 때 useState을 사용하여 렌더링 전반에 걸쳐 일관된 배열 참조를 유지하는 것이 좋습니다
|
|
*/
|
|
const [rowData, setRowData] = useState(null)
|
|
|
|
/**
|
|
* Column Definitions를 설정할 때는 useMemo 또는 useState를 사용하여 렌더 간에 일관된 참조를 유지하십시오.
|
|
* 응용 프로그램이 Column Definitions를 동적으로 변경하는 경우에도 렌더링 간에 일관된 참조를 유지하려면 useMemo 또는 useState를 사용하십시오.
|
|
*/
|
|
const [colDefs, setColDefs] = useState(
|
|
gridColumns ?? [
|
|
{ field: 'mission', filter: true },
|
|
{ field: 'company' },
|
|
{ field: 'location' },
|
|
{ field: 'date' },
|
|
{ field: 'price', valueFormatter: (params) => `₩ ${params.value.toLocaleString()}` },
|
|
{ field: 'successful' },
|
|
{ field: 'rocket' },
|
|
],
|
|
)
|
|
|
|
/**
|
|
* defaultColDef 속성을 제공할 때 이 인라인 또는 구성 요소의 단순 개체로 정의하지 마십시오. 이렇게 하면 모든 렌더링에서 새 인스턴스가 생성됩니다.
|
|
* 대신 or useState 를 사용하여 useMemo 렌더 간에 일관된 참조가 유지되도록 합니다.
|
|
*/
|
|
const defaultColDef = useMemo(() => {
|
|
return {
|
|
filter: false,
|
|
flex: 1,
|
|
sortable: true,
|
|
suppressMovable: true,
|
|
resizable: true,
|
|
suppressSizeToFit: false,
|
|
}
|
|
}, [])
|
|
|
|
/**
|
|
* 단순 유형(string, boolean 및 number)의 속성은 렌더링 간에 값으로 비교되므로 후크를 사용할 필요가 없습니다.
|
|
*/
|
|
const rowBuffer = 100
|
|
|
|
/**
|
|
* 모든 렌더링에서 그리드 상태를 재설정하지 않도록 useCallback을 사용하는 것이 좋습니다.
|
|
* api데이타 해당 컬럼에 따라 로우 체크박스 체크 가능여부 등 컨트롤
|
|
*/
|
|
const isRowSelectable = useCallback(
|
|
(params) => {
|
|
return !!params.data
|
|
},
|
|
[count],
|
|
)
|
|
|
|
// 체크박스 체크시 체크박스 미사용
|
|
// const onSelectionChanged = useCallback((event) => {
|
|
// props.getSelectedRowdata(event.api.getSelectedRows())
|
|
// }, [])
|
|
|
|
//더블클릭
|
|
const onCellDoubleClicked = useCallback((event) => {
|
|
props.getCellDoubleClicked(event)
|
|
}, [])
|
|
|
|
// Fetch data & update rowData state
|
|
useEffect(() => {
|
|
gridData ? setRowData(gridData) : ''
|
|
}, [gridData])
|
|
|
|
// 임시는 row색깔 구분
|
|
const getRowClass = (row) => {
|
|
if (row.data.objectNo.substring(0, 1) === 'T') {
|
|
return 'important_row'
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="ag-theme-quartz" style={{ height: 500 }}>
|
|
<AgGridReact
|
|
ref={gridRef}
|
|
rowBuffer={rowBuffer}
|
|
rowData={rowData}
|
|
columnDefs={colDefs}
|
|
defaultColDef={defaultColDef}
|
|
isRowSelectable={isRowSelectable}
|
|
rowSelection={'multiple'}
|
|
suppressRowClickSelection={true}
|
|
// onSelectionChanged={onSelectionChanged}
|
|
onCellDoubleClicked={onCellDoubleClicked}
|
|
pagination={isPageable}
|
|
overlayNoRowsTemplate={`<span className="ag-overlay-loading-center">${getMessage('stuff.grid.noData')}</span>`}
|
|
getRowClass={getRowClass}
|
|
autoSizeAllColumns={true}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|