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

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

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

Write Preview
Loading…
Cancel
Save