pav
/
pav-fe-kac
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

y 스크롤 기능 추가

master
sanguu516 2 months ago
parent
1f343dc1e0
commit
d5b4bc0dd6
2 changed files with 174 additions and 152 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 163
      src/components/flight/ControlApprovalsTable.js
  2. 163
      src/components/flight/OperationApprovalsTable.js

163
src/components/flight/ControlApprovalsTable.js
Unescape View File

@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState, useRef } from 'react';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import { Button, Card } from '@component/ui'; import { Button, Card } from '@component/ui';
import { openModal } from '@src/redux/features/comn/message/messageSlice'; import { openModal } from '@src/redux/features/comn/message/messageSlice';
@ -13,7 +13,7 @@ import {
updateLaancAprvReview updateLaancAprvReview
} from '@src/redux/features/laanc/laancThunk'; } from '@src/redux/features/laanc/laancThunk';
import { ERROR_MESSAGE, ERROR_TITLE } from '@src/configs/msgConst'; import { ERROR_MESSAGE, ERROR_TITLE } from '@src/configs/msgConst';
import { CgKey } from 'react-icons/cg'; import ScrollContainer from 'react-indiana-drag-scroll';
export default function ControlApprovalsTable(props) { export default function ControlApprovalsTable(props) {
const dispatch = useDispatch(); const dispatch = useDispatch();
@ -31,6 +31,8 @@ export default function ControlApprovalsTable(props) {
U: 0 U: 0
}); });
const scrollContainerRef = useRef(null);
// 확장된 행 키 // 확장된 행 키
const [expandedRowKeys, setExpandedRowKeys] = useState([]); const [expandedRowKeys, setExpandedRowKeys] = useState([]);
@ -1277,82 +1279,91 @@ export default function ControlApprovalsTable(props) {
</div> </div>
<div className='invoice-list-wrapper'> <div className='invoice-list-wrapper'>
<Card> <Card>
<div <div className='invoice-list-dataTable flight-approval'>
className='invoice-list-dataTable flight-approval'
style={{ width: '100%' }}
>
{laancAprvList?.length > 0 ? ( {laancAprvList?.length > 0 ? (
<Form form={form} component={false}> <Form form={form} component={false}>
<Table <ScrollContainer
components={{ className='scroll-container'
body: { ref={scrollContainerRef}
cell: EditableCell hideScrollbars={false}
} vertical={true}
}} horizontal={true}
dataSource={laancAprvList.map((item, index) => ({ activationDistance={10}
...item, >
key: `parent_${item.planSno}` <div style={{ width: '2000px' }}>
}))} <Table
columns={mergedColumns} components={{
rowClassName={record => { body: {
let className = ''; cell: EditableCell
if (record.areaList.length <= 1) { }
if (record?.areaList[0]?.approvalCd === 'S') { }}
className += 'flight-approval-row editable-row'; dataSource={laancAprvList.map((item, index) => ({
} else if (record.areaList[0].approvalCd === 'F') { ...item,
className += 'flight-not-approval-row editable-row'; key: `parent_${item.planSno}`
} else if (record.areaList[0].approvalCd === 'C') { }))}
className += columns={mergedColumns}
'flight-condition-approval-row editable-row'; rowClassName={record => {
} else className += 'editable-row'; let className = '';
} if (record.areaList.length <= 1) {
if ( if (record?.areaList[0]?.approvalCd === 'S') {
record.areaList.length <= 1 && className += 'flight-approval-row editable-row';
record.areaList[0].planAreaSno === props.selected } else if (record.areaList[0].approvalCd === 'F') {
) { className += 'flight-not-approval-row editable-row';
className += ' flight-approval-row-click'; } else if (record.areaList[0].approvalCd === 'C') {
} className +=
if (expandedRowKeys.includes(record.key)) { 'flight-condition-approval-row editable-row';
className += ' expanded-row'; } else className += 'editable-row';
} }
if (record.areaList.length > 1) { if (
className += 'expanded-tr'; record.areaList.length <= 1 &&
} record.areaList[0].planAreaSno === props.selected
return className; ) {
}} className += ' flight-approval-row-click';
rowSelection={{ }
...rowSelection if (expandedRowKeys.includes(record.key)) {
}} className += ' expanded-row';
onRow={record => ({ }
onClick: event => { if (record.areaList.length > 1) {
if (editingKey !== '') { className += 'expanded-tr';
return; // edit 상태면 이벤트 실행 안 함 }
} return className;
setSelectedRowKey(record.planAreaSno); }}
// 이벤트 버블링을 막기 위해 클릭된 요소가 'Edit' 버튼인지 확인 rowSelection={{
if ( ...rowSelection
event.target.tagName !== 'BUTTON' && }}
event.target.tagName !== 'A' && onRow={record => ({
!event.target.closest('.ant-input') && // input 요소를 감지 onClick: event => {
!event.target.closest('.ant-input-number') // inputNumber 요소를 감지 if (editingKey !== '') {
) { return; // edit 상태면 이벤트 실행 안 함
handleRowClick(record); }
} setSelectedRowKey(record.planAreaSno);
} // 이벤트 버블링을 막기 위해 클릭된 요소가 'Edit' 버튼인지 확인
})} if (
loading={laancAprvLoading} event.target.tagName !== 'BUTTON' &&
expandable={{ event.target.tagName !== 'A' &&
expandedRowRender, !event.target.closest('.ant-input') && // input 요소를 감지
expandedRowKeys: expandedRowKeys, !event.target.closest('.ant-input-number') // inputNumber 요소를 감지
onExpand: (expanded, record) => handleExpand(record.key), ) {
rowExpandable: record => record?.areaList?.length > 1 handleRowClick(record);
}} }
scroll={{ }
x: 1700 })}
}} loading={laancAprvLoading}
rowHoverable={false} expandable={{
expandIconColumnIndex={-1} expandedRowRender,
/> expandedRowKeys: expandedRowKeys,
onExpand: (expanded, record) =>
handleExpand(record.key),
rowExpandable: record => record?.areaList?.length > 1
}}
scroll={{
x: 1700
}}
rowHoverable={false}
expandIconColumnIndex={-1}
/>
</div>
</ScrollContainer>
</Form> </Form>
) : ( ) : (
<div <div

163
src/components/flight/OperationApprovalsTable.js
Unescape View File

@ -10,6 +10,7 @@ import {
} from '@src/redux/features/laanc/laancThunk'; } from '@src/redux/features/laanc/laancThunk';
import { ERROR_MESSAGE, ERROR_TITLE } from '@src/configs/msgConst'; import { ERROR_MESSAGE, ERROR_TITLE } from '@src/configs/msgConst';
import OperationModal from './OperationModal'; import OperationModal from './OperationModal';
import ScrollContainer from 'react-indiana-drag-scroll';
export default function OperationApprovalsTable(props) { export default function OperationApprovalsTable(props) {
const dispatch = useDispatch(); const dispatch = useDispatch();
@ -27,6 +28,8 @@ export default function OperationApprovalsTable(props) {
U: 0 U: 0
}); });
const scrollContainerRef = useRef(null);
// 확장된 행 키 // 확장된 행 키
const [expandedRowKeys, setExpandedRowKeys] = useState([]); const [expandedRowKeys, setExpandedRowKeys] = useState([]);
@ -1086,86 +1089,94 @@ export default function OperationApprovalsTable(props) {
</div> </div>
<div className='invoice-list-wrapper'> <div className='invoice-list-wrapper'>
<Card> <Card>
<div <div className='invoice-list-dataTable flight-approval'>
className='invoice-list-dataTable flight-approval'
style={{ width: '100%' }}
>
{laancAprvList?.length > 0 ? ( {laancAprvList?.length > 0 ? (
<Form form={form} component={false}> <Form form={form} component={false}>
<Table <ScrollContainer
components={{ className='scroll-container'
body: { ref={scrollContainerRef}
cell: EditableCell hideScrollbars={false}
} vertical={true}
}} horizontal={true}
dataSource={laancAprvList.map((item, index) => ({ activationDistance={10}
...item, >
key: <div style={{ width: '2000px' }}>
item.areaList.length >= 1 <Table
? `${item.planAreaSno}-${index}` components={{
: `${item.planAreaSno}` body: {
}))} cell: EditableCell
columns={mergedColumns} }
rowClassName={record => { }}
let className = ''; dataSource={laancAprvList.map((item, index) => ({
if (record.areaList.length <= 1) { ...item,
if (record?.areaList[0]?.approvalCd === 'S') { key:
className += 'flight-approval-row editable-row'; item.areaList.length >= 1
} else if (record.areaList[0].approvalCd === 'F') { ? `${item.planAreaSno}-${index}`
className += 'flight-not-approval-row editable-row'; : `${item.planAreaSno}`
} else if (record.areaList[0].approvalCd === 'C') { }))}
className += columns={mergedColumns}
'flight-condition-approval-row editable-row'; rowClassName={record => {
} else className += 'editable-row'; let className = '';
} if (record.areaList.length <= 1) {
if (record?.areaList[0]?.approvalCd === 'S') {
className += 'flight-approval-row editable-row';
} else if (record.areaList[0].approvalCd === 'F') {
className += 'flight-not-approval-row editable-row';
} else if (record.areaList[0].approvalCd === 'C') {
className +=
'flight-condition-approval-row editable-row';
} else className += 'editable-row';
}
if (props.selected?.length > 0) { if (props.selected?.length > 0) {
if ( if (
record.areaList.length <= 1 && record.areaList.length <= 1 &&
record.areaList[0].planAreaSno === props.selected[0] record.areaList[0].planAreaSno === props.selected[0]
) { ) {
className += ' flight-approval-row-click'; className += ' flight-approval-row-click';
} }
} }
if (expandedRowKeys.includes(record.key)) { if (expandedRowKeys.includes(record.key)) {
className += ' expanded-row'; className += ' expanded-row';
} }
if (record.areaList.length > 1) { if (record.areaList.length > 1) {
className += 'expanded-tr'; className += 'expanded-tr';
} }
return className; return className;
}} }}
onRow={record => ({ onRow={record => ({
onClick: event => { onClick: event => {
if (editingKey !== '') { if (editingKey !== '') {
return; // edit 상태면 이벤트 실행 안 함 return; // edit 상태면 이벤트 실행 안 함
} }
setSelectedRowKey(record.planAreaSno); setSelectedRowKey(record.planAreaSno);
// 이벤트 버블링을 막기 위해 클릭된 요소가 'Edit' 버튼인지 확인 // 이벤트 버블링을 막기 위해 클릭된 요소가 'Edit' 버튼인지 확인
if ( if (
event.target.tagName !== 'BUTTON' && event.target.tagName !== 'BUTTON' &&
event.target.tagName !== 'A' && event.target.tagName !== 'A' &&
!event.target.closest('.ant-input') && // input 요소를 감지 !event.target.closest('.ant-input') && // input 요소를 감지
!event.target.closest('.ant-input-number') // inputNumber 요소를 감지 !event.target.closest('.ant-input-number') // inputNumber 요소를 감지
) { ) {
handleRowClick(record); handleRowClick(record);
} }
} }
})} })}
loading={laancAprvLoading} loading={laancAprvLoading}
expandable={{ expandable={{
expandedRowRender, expandedRowRender,
expandedRowKeys: expandedRowKeys, expandedRowKeys: expandedRowKeys,
onExpand: (expanded, record) => handleExpand(record), onExpand: (expanded, record) => handleExpand(record),
rowExpandable: record => record?.areaList?.length > 1 rowExpandable: record => record?.areaList?.length > 1
}} }}
scroll={{ scroll={{
x: 1700 x: 1700
}} }}
rowHoverable={false} rowHoverable={false}
expandIconColumnIndex={-1} expandIconColumnIndex={-1}
/> />
</div>
</ScrollContainer>
</Form> </Form>
) : ( ) : (
<div <div

Write Preview
Loading…
Cancel
Save