Skip to content

Commit c808687

Browse files
RohitRaj011RohitRaj011
committed
refactor: improvements
1 parent bd9fcd1 commit c808687

File tree

15 files changed

+85
-98
lines changed

15 files changed

+85
-98
lines changed

‎src/Common/CustomTagSelector/ResizableTagTextArea.tsx

Lines changed: 35 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -24,54 +24,68 @@ export const ResizableTagTextArea = ({
2424
value,
2525
minHeight,
2626
maxHeight,
27-
dataTestId,
2827
onBlur,
2928
onFocus,
3029
refVar,
3130
dependentRef,
31+
dependentRefs,
3232
className = '',
3333
disableOnBlurResizeToMinHeight,
34-
...resProps
34+
id,
35+
...restProps
3536
}: ResizableTagTextAreaProps) => {
36-
const updateRefHeight = (height: number) => {
37-
const refElement = refVar?.current
37+
const updateDependentRefsHeight = (height: number) => {
38+
const refElement = dependentRef?.current
3839
if (refElement) {
3940
refElement.style.height = `${height}px`
4041
}
42+
43+
Object.values(dependentRefs || {}).forEach((ref) => {
44+
const dependentRefElement = ref?.current
45+
if (dependentRefElement) {
46+
dependentRefElement.style.height = `${height}px`
47+
}
48+
})
4149
}
4250

43-
const updateDependentRefsHeight = (height: number) => {
44-
if (dependentRef) {
45-
Object.values(Array.isArray(dependentRef) ? dependentRef : [dependentRef]).forEach((ref) => {
46-
const refElement = ref.current
47-
if (refElement) {
48-
refElement.style.height = `${height}px`
49-
}
50-
})
51+
const updateRefsHeight = (height: number) => {
52+
const refElement = refVar?.current
53+
if (refElement) {
54+
refElement.style.height = `${height}px`
5155
}
56+
updateDependentRefsHeight(height)
5257
}
5358

5459
const reInitHeight = () => {
55-
updateRefHeight(minHeight || 0)
56-
updateDependentRefsHeight(minHeight || 0)
60+
updateRefsHeight(minHeight || 0)
5761

5862
let nextHeight = refVar?.current?.scrollHeight || 0
63+
5964
if (dependentRef) {
60-
Object.values(Array.isArray(dependentRef) ? dependentRef : [dependentRef]).forEach((ref) => {
65+
const refElement = dependentRef.current
66+
if (refElement && refElement.scrollHeight > nextHeight) {
67+
nextHeight = refElement.scrollHeight
68+
}
69+
}
70+
71+
if (dependentRefs) {
72+
Object.values(dependentRefs).forEach((ref) => {
6173
const refElement = ref.current
6274
if (refElement && refElement.scrollHeight > nextHeight) {
6375
nextHeight = refElement.scrollHeight
6476
}
6577
})
6678
}
79+
6780
if (minHeight && nextHeight < minHeight) {
6881
nextHeight = minHeight
6982
}
83+
7084
if (maxHeight && nextHeight > maxHeight) {
7185
nextHeight = maxHeight
7286
}
73-
updateRefHeight(nextHeight)
74-
updateDependentRefsHeight(nextHeight)
87+
88+
updateRefsHeight(nextHeight)
7589
}
7690

7791
useEffect(() => {
@@ -82,8 +96,7 @@ export const ResizableTagTextArea = ({
8296

8397
const handleOnBlur = (event) => {
8498
if (!disableOnBlurResizeToMinHeight) {
85-
updateRefHeight(minHeight)
86-
updateDependentRefsHeight(minHeight)
99+
updateRefsHeight(minHeight)
87100
}
88101
onBlur?.(event)
89102
}
@@ -95,15 +108,16 @@ export const ResizableTagTextArea = ({
95108

96109
return (
97110
<textarea
98-
{...resProps}
111+
{...restProps}
112+
id={id}
113+
data-testid={id}
99114
rows={1}
100115
ref={refVar}
101116
value={value}
102117
className={`${className || ''} lh-20`}
103118
style={{ resize: 'none' }}
104119
onBlur={handleOnBlur}
105120
onFocus={handleOnFocus}
106-
data-testid={dataTestId}
107121
/>
108122
)
109123
}

‎src/Common/CustomTagSelector/TagLabelValueSelector.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -192,7 +192,7 @@ export const TagLabelValueSelector = ({
192192
tabIndex={tabIndex}
193193
refVar={refVar}
194194
dependentRef={dependentRef}
195-
dataTestId={`tag-${tagInputType === KEY_VALUE.KEY ? 'key' : 'value'}-${selectedTagIndex}`}
195+
id={`tag-${tagInputType === KEY_VALUE.KEY ? 'key' : 'value'}-${selectedTagIndex}`}
196196
/>
197197
</PopupMenu.Button>
198198
{popupMenuBody && (

‎src/Common/CustomTagSelector/Types.ts

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -80,9 +80,7 @@ export interface ResizableTagTextAreaProps
8080
maxHeight?: number
8181
value: string
8282
refVar?: MutableRefObject<HTMLTextAreaElement>
83-
dependentRef?:
84-
| MutableRefObject<HTMLTextAreaElement>
85-
| Record<string | number, MutableRefObject<HTMLTextAreaElement>>
86-
dataTestId?: string
83+
dependentRef?: MutableRefObject<HTMLTextAreaElement>
84+
dependentRefs?: Record<string | number, MutableRefObject<HTMLTextAreaElement>>
8785
disableOnBlurResizeToMinHeight?: boolean
8886
}

‎src/Shared/Components/DynamicDataTable/DynamicDataTableHeader.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@ export const DynamicDataTableHeader = <K extends string, CustomStateType = Recor
3434
const isActionButtonAtTheStart =
3535
getActionButtonPosition({ headers, actionButtonConfig }) === 0 && actionButtonConfig.position !== 'end'
3636

37+
const handleSorting = (key: K) => () => sortingConfig?.handleSorting(key)
38+
3739
// RENDERERS
3840
const renderHeaderCell = ({ key, label, isSortable }: DynamicDataTableHeaderType<K>) => (
3941
<div
@@ -44,7 +46,7 @@ export const DynamicDataTableHeader = <K extends string, CustomStateType = Recor
4446
<button
4547
type="button"
4648
className="cn-7 fs-12 lh-20-imp fw-6 flexbox dc__align-items-center dc__gap-2 dc__transparent"
47-
onClick={sortingConfig?.handleSorting}
49+
onClick={handleSorting(key)}
4850
>
4951
{label}
5052
<ICArrowDown
@@ -79,7 +81,7 @@ export const DynamicDataTableHeader = <K extends string, CustomStateType = Recor
7981
return (
8082
<div className={`bcn-2 p-1 ${hasRows ? 'dc__top-radius-4' : 'br-4'}`}>
8183
<div
82-
className="dynamic-data-table two-columns w-100 bcn-1 br-4"
84+
className="dynamic-data-table header-column w-100 bcn-1 br-4"
8385
style={{ gridTemplateColumns: headerGridTemplateColumn }}
8486
>
8587
<div className="dynamic-data-table__row">

‎src/Shared/Components/DynamicDataTable/DynamicDataTableRow.tsx

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { createElement, createRef, Fragment, ReactElement, RefObject, useEffect,
33
import { followCursor } from 'tippy.js'
44

55
import { ReactComponent as ICCross } from '@Icons/ic-cross.svg'
6-
import { DEFAULT_SECRET_PLACEHOLDER } from '@Shared/constants'
76
import { Tooltip } from '@Common/Tooltip'
87

98
import { ConditionalWrap } from '@Common/Helper'
@@ -36,7 +35,6 @@ const conditionalWrap =
3635
export const DynamicDataTableRow = <K extends string, CustomStateType = Record<string, unknown>>({
3736
rows = [],
3837
headers,
39-
maskValue,
4038
readOnly,
4139
isDeletionNotAllowed,
4240
validationSchema = () => ({ isValid: true, errorMessages: [] }),
@@ -131,6 +129,7 @@ export const DynamicDataTableRow = <K extends string, CustomStateType = Record<s
131129
<SelectPicker<string, false>
132130
{...row.data[key].props}
133131
inputId={`data-table-${row.id}-${key}-cell`}
132+
classNamePrefix="dynamic-data-table__cell__select-picker"
134133
variant={SelectPickerVariantType.BORDER_LESS}
135134
value={getSelectPickerOptionByValue(row.data[key].props?.options, row.data[key].value)}
136135
onChange={onChange(row, key)}
@@ -149,7 +148,10 @@ export const DynamicDataTableRow = <K extends string, CustomStateType = Record<s
149148
inputId={`data-table-${row.id}-${key}-cell`}
150149
disabled={isDisabled}
151150
refVar={cellRef?.current?.[row.id]?.[key]}
152-
dependentRef={cellRef?.current?.[row.id]}
151+
dependentRefs={cellRef?.current?.[row.id]}
152+
selectPickerProps={{
153+
classNamePrefix: 'dynamic-data-table__cell__select-picker',
154+
}}
153155
textAreaProps={{
154156
...row.data[key].props?.textAreaProps,
155157
className: 'dynamic-data-table__cell-input placeholder-cn5 py-8 pr-8 cn-9 fs-13 lh-20',
@@ -192,14 +194,15 @@ export const DynamicDataTableRow = <K extends string, CustomStateType = Record<s
192194
return (
193195
<ResizableTagTextArea
194196
{...row.data[key].props}
197+
id={`data-table-${row.id}-${key}-cell`}
195198
className={`dynamic-data-table__cell-input placeholder-cn5 p-8 cn-9 fs-13 lh-20 dc__align-self-start dc__no-border-radius ${isDisabled ? 'cursor-not-allowed' : ''}`}
196199
minHeight={20}
197200
maxHeight={160}
198201
value={row.data[key].value}
199202
onChange={onChange(row, key)}
200203
disabled={isDisabled}
201204
refVar={cellRef?.current?.[row.id]?.[key]}
202-
dependentRef={cellRef?.current?.[row.id]}
205+
dependentRefs={cellRef?.current?.[row.id]}
203206
disableOnBlurResizeToMinHeight
204207
/>
205208
)
@@ -261,17 +264,11 @@ export const DynamicDataTableRow = <K extends string, CustomStateType = Record<s
261264
<div
262265
className={`dynamic-data-table__cell bcn-0 flexbox dc__align-items-center dc__gap-4 dc__position-rel ${isDisabled ? 'cursor-not-allowed no-hover' : ''} ${showError && !isDisabled && !validationSchema(row.data[key].value, key, row).isValid ? 'dynamic-data-table__cell--error no-hover' : ''} ${!rowTypeHasInputField(row.data[key].type) ? 'no-hover no-focus' : ''}`}
263266
>
264-
{maskValue?.[key] && row.data[key].value ? (
265-
<div className="py-8 px-12 h-36 flex">{DEFAULT_SECRET_PLACEHOLDER}</div>
266-
) : (
267-
<>
268-
{renderCellIcon(row, key, true)}
269-
{renderCellContent(row, key)}
270-
{renderAsterisk(row, key)}
271-
{renderCellIcon(row, key)}
272-
{renderErrorMessages(row, key)}
273-
</>
274-
)}
267+
{renderCellIcon(row, key, true)}
268+
{renderCellContent(row, key)}
269+
{renderAsterisk(row, key)}
270+
{renderCellIcon(row, key)}
271+
{renderErrorMessages(row, key)}
275272
</div>
276273
</Tooltip>
277274
)
@@ -300,7 +297,7 @@ export const DynamicDataTableRow = <K extends string, CustomStateType = Record<s
300297
return hasRows ? (
301298
<div className="bcn-2 px-1 pb-1 dc__bottom-radius-4">
302299
<div
303-
className={`dynamic-data-table w-100 bcn-1 dc__bottom-radius-4 ${!readOnly ? 'three-columns' : 'two-columns'}`}
300+
className={`dynamic-data-table w-100 bcn-1 dc__bottom-radius-4 ${!readOnly ? 'row-colun' : 'header-column'}`}
304301
style={{
305302
gridTemplateColumns: rowGridTemplateColumn,
306303
}}

‎src/Shared/Components/DynamicDataTable/constants.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export const ACTION_BUTTON_DEFAULT_WIDTH = '33px'
2+
export const DELETE_BUTTON_WIDTH = '33px'

‎src/Shared/Components/DynamicDataTable/styles.scss

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,14 @@
1818
display: grid;
1919
gap: 1px;
2020

21-
&.two-columns {
22-
.dynamic-data-table__row:last-of-type {
23-
.dynamic-data-table__cell:first-child,
24-
.dynamic-data-table__cell-input:first-child {
25-
border-bottom-left-radius: 4px !important;
26-
}
21+
&__row:last-of-type {
22+
.dynamic-data-table__cell:first-child,
23+
.dynamic-data-table__cell-input:first-child {
24+
border-bottom-left-radius: 4px !important;
2725
}
26+
}
2827

28+
&.header-column {
2929
.dynamic-data-table__row:last-of-type {
3030
.dynamic-data-table__cell:last-child,
3131
.dynamic-data-table__cell-input:last-child {
@@ -34,14 +34,7 @@
3434
}
3535
}
3636

37-
&.three-columns {
38-
.dynamic-data-table__row:last-of-type {
39-
.dynamic-data-table__cell:first-child,
40-
.dynamic-data-table__cell-input:first-child {
41-
border-bottom-left-radius: 4px !important;
42-
}
43-
}
44-
37+
&.row-column {
4538
.dynamic-data-table__row:last-of-type {
4639
.dynamic-data-table__cell:last-child,
4740
.dynamic-data-table__row-delete-btn {
@@ -72,8 +65,9 @@
7265
&__cell {
7366
min-width: 0;
7467

75-
.select-picker-borderless-control {
76-
padding: 8px;
68+
&__select-picker__control {
69+
gap: 6px !important;
70+
padding: 8px !important;
7771
}
7872

7973
&:has(.select-picker-hidden) .dynamic-data-table__select-text-area {

‎src/Shared/Components/DynamicDataTable/types.ts

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@
1616

1717
import { DetailedHTMLProps, ReactElement, ReactNode } from 'react'
1818

19-
import { SortingOrder } from '@Common/Constants'
20-
2119
import { ResizableTagTextAreaProps } from '@Common/CustomTagSelector'
20+
import { UseStateFiltersReturnType } from '@Common/Hooks'
21+
2222
import { SelectPickerOptionType, SelectPickerProps } from '../SelectPicker'
2323
import { SelectTextAreaProps } from '../SelectTextArea'
2424
import { FileUploadProps } from '../FileUpload'
@@ -51,6 +51,7 @@ export enum DynamicDataTableRowDataType {
5151
export type DynamicDataTableCellPropsMap = {
5252
[DynamicDataTableRowDataType.TEXT]: Omit<
5353
ResizableTagTextAreaProps,
54+
| 'id'
5455
| 'className'
5556
| 'minHeight'
5657
| 'maxHeight'
@@ -109,10 +110,6 @@ export type DynamicDataTableRowType<K extends string, CustomStateType = Record<s
109110
disableDelete?: boolean
110111
}
111112

112-
type DynamicDataTableMask<K extends string> = {
113-
[key in K]?: boolean
114-
}
115-
116113
type DynamicDataTableCellIcon<K extends string, CustomStateType = Record<string, unknown>> = {
117114
[key in K]?: (row: DynamicDataTableRowType<K, CustomStateType>) => ReactNode
118115
}
@@ -132,13 +129,7 @@ export type DynamicDataTableProps<K extends string, CustomStateType = Record<str
132129
*/
133130
rows: DynamicDataTableRowType<K, CustomStateType>[]
134131
/** Optional configuration for sorting the table. */
135-
sortingConfig?: {
136-
sortBy: K
137-
sortOrder: SortingOrder
138-
handleSorting: () => void
139-
}
140-
/** An optional mask to hide the values of the cell. */
141-
maskValue?: DynamicDataTableMask<K>
132+
sortingConfig?: Pick<UseStateFiltersReturnType<K>, 'sortBy' | 'sortOrder' | 'handleSorting'>
142133
/** Optional configuration for displaying an icon in the leading position of a cell. */
143134
leadingCellIcon?: DynamicDataTableCellIcon<K, CustomStateType>
144135
/** Optional configuration for displaying an icon in the trailing position of a cell. */
@@ -190,7 +181,7 @@ export type DynamicDataTableProps<K extends string, CustomStateType = Record<str
190181
key: K
191182
/**
192183
* The width of the action button.
193-
* @default '32px'
184+
* @default '33px'
194185
*/
195186
width?: string
196187
/**
@@ -239,7 +230,6 @@ export interface DynamicDataTableRowProps<K extends string, CustomStateType = Re
239230
DynamicDataTableProps<K, CustomStateType>,
240231
| 'rows'
241232
| 'headers'
242-
| 'maskValue'
243233
| 'isAdditionNotAllowed'
244234
| 'isDeletionNotAllowed'
245235
| 'readOnly'

‎src/Shared/Components/DynamicDataTable/utils.ts

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { ACTION_BUTTON_DEFAULT_WIDTH, DELETE_BUTTON_WIDTH } from './constants'
12
import { DynamicDataTableHeaderType, DynamicDataTableProps, DynamicDataTableRowDataType } from './types'
23

34
export const getActionButtonPosition = <K extends string, CustomStateType = Record<string, unknown>>({
@@ -12,25 +13,25 @@ export const getHeaderGridTemplateColumn = <K extends string, CustomStateType =
1213
noDeleteBtn: boolean,
1314
) => {
1415
const actionButtonIndex = getActionButtonPosition({ headers, actionButtonConfig })
15-
const actionButtonWidth = actionButtonConfig?.width || '33px'
16+
const actionButtonWidth = actionButtonConfig?.width || ACTION_BUTTON_DEFAULT_WIDTH
1617
const isActionButtonAtTheStart = actionButtonIndex === 0 && actionButtonConfig.position !== 'end'
1718
const gridWidthRegex = /^\d+fr$/
1819

19-
const columns = headers.map(({ width }, index) => {
20+
const gridTemplateColumns = headers.map(({ width }, index) => {
2021
if (!isActionButtonAtTheStart && index === actionButtonIndex && !gridWidthRegex.test(width)) {
2122
return `calc(${width} + ${actionButtonWidth})`
2223
}
2324
if (!noDeleteBtn && index === headers.length - 1 && !gridWidthRegex.test(width)) {
24-
return `calc(${width} + 33px)`
25+
return `calc(${width} + ${DELETE_BUTTON_WIDTH})`
2526
}
2627
return width
2728
})
2829

2930
if (isActionButtonAtTheStart) {
30-
columns.unshift(actionButtonWidth)
31+
gridTemplateColumns.unshift(actionButtonWidth)
3132
}
3233

33-
return columns.join(' ').trim()
34+
return gridTemplateColumns.join(' ').trim()
3435
}
3536

3637
export const getRowGridTemplateColumn = <K extends string, CustomStateType = Record<string, unknown>>(

0 commit comments

Comments
 (0)