Skip to content

Commit 498b99b

Browse files
RohitRaj011AbhishekA1509
RohitRaj011
authored and
AbhishekA1509
committed
feat: KeyValueTable - sorting bug fix, add support to disable entry in table
1 parent 27b0109 commit 498b99b

File tree

4 files changed

+62
-47
lines changed

4 files changed

+62
-47
lines changed

‎src/Common/CustomTagSelector/ResizableTagTextArea.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export const ResizableTagTextArea = ({
3232
dependentRef,
3333
dataTestId,
3434
handleKeyDown,
35+
disabled,
3536
disableOnBlurResizeToMinHeight,
3637
}: ResizableTagTextAreaProps) => {
3738
const [text, setText] = useState('')
@@ -98,6 +99,7 @@ export const ResizableTagTextArea = ({
9899
tabIndex={tabIndex}
99100
data-testid={dataTestId}
100101
onKeyDown={handleKeyDown}
102+
disabled={disabled}
101103
/>
102104
)
103105
}

‎src/Common/CustomTagSelector/Types.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,5 +85,6 @@ export interface ResizableTagTextAreaProps {
8585
dependentRef?: React.MutableRefObject<HTMLTextAreaElement>
8686
dataTestId?: string
8787
handleKeyDown?: any
88+
disabled?: boolean
8889
disableOnBlurResizeToMinHeight?: boolean
8990
}

‎src/Shared/Components/KeyValueTable/KeyValueTable.component.tsx

Lines changed: 49 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ export const KeyValueTable = <K extends string>({
4848
headerComponent,
4949
onChange,
5050
onDelete,
51+
isAdditionNotAllowed,
5152
}: KeyValueTableProps<K>) => {
5253
// CONSTANTS
5354
const { headers, rows } = config
@@ -82,13 +83,10 @@ export const KeyValueTable = <K extends string>({
8283

8384
useEffect(() => {
8485
const sortFn = (a: KeyValueRow<K>, b: KeyValueRow<K>) => {
85-
if (!a[sortBy].value && !b[sortBy].value) {
86-
return 0
87-
}
8886
if (sortOrder === SortingOrder.ASC) {
89-
return a[sortBy].value < b[sortBy].value ? 1 : -1
87+
return b.data[sortBy].value.localeCompare(a.data[sortBy].value)
9088
}
91-
return a[sortBy].value > b[sortBy].value ? 1 : -1
89+
return a.data[sortBy].value.localeCompare(b.data[sortBy].value)
9290
}
9391

9492
const sortedRows = [..._rows]
@@ -102,14 +100,14 @@ export const KeyValueTable = <K extends string>({
102100
setNewRowAdded(false)
103101

104102
if (
105-
!firstRow[secondHeaderKey].value &&
103+
!firstRow.data[secondHeaderKey].value &&
106104
keyTextAreaRef.current[0].current &&
107105
valueTextAreaRef.current[0].current
108106
) {
109107
keyTextAreaRef.current[0].current.focus()
110108
}
111109
if (
112-
!firstRow[firstHeaderKey].value &&
110+
!firstRow.data[firstHeaderKey].value &&
113111
valueTextAreaRef.current[0].current &&
114112
valueTextAreaRef.current[0].current
115113
) {
@@ -125,14 +123,17 @@ export const KeyValueTable = <K extends string>({
125123
const { value } = e.target
126124

127125
const data = {
128-
[firstHeaderKey]: {
129-
value: key === firstHeaderKey ? value : '',
130-
placeholder: 'Enter Key',
131-
},
132-
[secondHeaderKey]: {
133-
value: key === secondHeaderKey ? value : '',
134-
placeholder: 'Enter Value',
126+
data: {
127+
[firstHeaderKey]: {
128+
value: key === firstHeaderKey ? value : '',
129+
placeholder: 'Enter Key',
130+
},
131+
[secondHeaderKey]: {
132+
value: key === secondHeaderKey ? value : '',
133+
placeholder: 'Enter Value',
134+
},
135135
},
136+
id: Date.now() * Math.random(),
136137
} as KeyValueRow<K>
137138

138139
setNewRowAdded(true)
@@ -146,7 +147,7 @@ export const KeyValueTable = <K extends string>({
146147
const { value } = e.target
147148

148149
let newRows = []
149-
if (!value && !row[key === firstHeaderKey ? secondHeaderKey : firstHeaderKey].value) {
150+
if (!value && !row.data[key === firstHeaderKey ? secondHeaderKey : firstHeaderKey].value) {
150151
newRows = _rows.filter((_, idx) => idx !== rowIndex)
151152

152153
keyTextAreaRef.current = keyTextAreaRef.current.filter((_, idx) => idx !== rowIndex)
@@ -159,16 +160,19 @@ export const KeyValueTable = <K extends string>({
159160
..._rows.slice(0, rowIndex),
160161
{
161162
...row,
162-
[key]: {
163-
...row[key],
164-
value,
163+
data: {
164+
...row.data,
165+
[key]: {
166+
...row.data[key],
167+
value,
168+
},
165169
},
166170
},
167171
..._rows.slice(rowIndex + 1),
168172
]
169173
}
170174
setRows(newRows)
171-
onChange?.(rowIndex, key)
175+
onChange?.(rowIndex, key, value)
172176
}
173177

174178
return (
@@ -205,26 +209,28 @@ export const KeyValueTable = <K extends string>({
205209
)}
206210
{!!headerComponent && <div className="px-12">{headerComponent}</div>}
207211
</div>
208-
<div
209-
className="table-row flexbox dc__align-items-center dc__border-bottom"
210-
style={{ borderColor: 'var(--N100)' }}
211-
>
212-
{headers.map(({ key }) => (
213-
<div
214-
key={key}
215-
className={`cn-9 fs-13 lh-20 py-8 px-12 flex dc__overflow-auto ${key === firstHeaderKey ? 'head__key' : 'flex-grow-1'}`}
216-
>
217-
<textarea
218-
ref={key === firstHeaderKey ? inputRowRef : undefined}
219-
className="table-input table-input__text-area pt-8 pb-8 pl-10 pb-10 lh-20 fs-13 fw-4"
220-
value=""
221-
rows={1}
222-
placeholder={key === firstHeaderKey ? 'Enter Key' : 'Enter Value'}
223-
onChange={onNewRowEdit(key)}
224-
/>
225-
</div>
226-
))}
227-
</div>
212+
{!isAdditionNotAllowed && (
213+
<div
214+
className="table-row flexbox dc__align-items-center dc__border-bottom"
215+
style={{ borderColor: 'var(--N100)' }}
216+
>
217+
{headers.map(({ key }) => (
218+
<div
219+
key={key}
220+
className={`cn-9 fs-13 lh-20 py-8 px-12 flex dc__overflow-auto ${key === firstHeaderKey ? 'head__key' : 'flex-grow-1'}`}
221+
>
222+
<textarea
223+
ref={key === firstHeaderKey ? inputRowRef : undefined}
224+
className="table-input table-input__text-area pt-8 pb-8 pl-10 pb-10 lh-20 fs-13 fw-4"
225+
value=""
226+
rows={1}
227+
placeholder={key === firstHeaderKey ? 'Enter Key' : 'Enter Value'}
228+
onChange={onNewRowEdit(key)}
229+
/>
230+
</div>
231+
))}
232+
</div>
233+
)}
228234
{_rows?.map((row, index) => (
229235
<div
230236
key={`${index.toString()}`}
@@ -236,16 +242,16 @@ export const KeyValueTable = <K extends string>({
236242
key={`${index.toString()}-${i.toString()}`}
237243
className={`cn-9 fs-13 lh-20 py-8 px-12 dc__overflow-auto flexbox dc__align-items-center dc__gap-4 ${key === firstHeaderKey ? 'head__key' : 'flex-grow-1'}`}
238244
>
239-
{maskValue?.[key] && row[key].value ? (
245+
{maskValue?.[key] && row.data[key].value ? (
240246
'*****'
241247
) : (
242248
<>
243249
<ResizableTagTextArea
244-
{...row[key]}
250+
{...row.data[key]}
245251
className="table-input"
246252
minHeight={20}
247253
maxHeight={144}
248-
value={row[key].value}
254+
value={row.data[key].value}
249255
onChange={onRowDataEdit(row, key, index)}
250256
refVar={
251257
key === firstHeaderKey
@@ -259,7 +265,7 @@ export const KeyValueTable = <K extends string>({
259265
}
260266
disableOnBlurResizeToMinHeight
261267
/>
262-
{row[key].showAsterisk && (
268+
{row.data[key].showAsterisk && (
263269
<span className="cr-5 fs-16 dc__align-self-start px-6">*</span>
264270
)}
265271
</>

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

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,13 @@ export interface KeyValueHeader<K extends string> {
3636
* @template K - A string representing the key type.
3737
*/
3838
export type KeyValueRow<K extends string> = {
39-
[key in K]: ResizableTagTextAreaProps & {
40-
/** An optional boolean indicating if an asterisk should be shown. */
41-
showAsterisk?: boolean
39+
data: {
40+
[key in K]: ResizableTagTextAreaProps & {
41+
/** An optional boolean indicating if an asterisk should be shown. */
42+
showAsterisk?: boolean
43+
}
4244
}
45+
id: string | number
4346
}
4447

4548
/**
@@ -74,12 +77,15 @@ export interface KeyValueTableProps<K extends string> {
7477
isSortable?: boolean
7578
/** An optional React node for a custom header component. */
7679
headerComponent?: ReactNode
80+
/** When true, data addition field will not be shown */
81+
isAdditionNotAllowed?: boolean
7782
/**
7883
* An optional function to handle changes in the table rows.
7984
* @param rowIndex - The index of the row that changed.
8085
* @param headerKey - The key of the header that changed.
86+
* @param value - The value of the cell.
8187
*/
82-
onChange?: (rowIndex: number, headerKey: K) => void
88+
onChange?: (rowIndex: number, headerKey: K, value: string) => void
8389
/**
8490
* An optional function to handle row deletions.
8591
* @param e - The event triggered by the delete action.

0 commit comments

Comments
 (0)