Merge pull request #102 from devtron-labs/feat(key-value-list)/last-item

feat: itemClassName prop for key value list
devtron-labs · Feb 27, 2024 · 57cca5c · 57cca5c
2 parents ce24907 + 77ea76b
commit 57cca5c
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/src/Shared/Components/KeyValueList/KeyValueList.tsx b/src/Shared/Components/KeyValueList/KeyValueList.tsx
@@ -13,6 +13,7 @@ const KeyValueItem = ({
     keyPlaceholder,
     valuePlaceholder,
     index,
+    itemClassName,
 }: KeyValueItemProps) => {
     const handleKeyUpdate = (event: React.ChangeEvent<HTMLInputElement>) => {
         const data = {
@@ -40,7 +41,7 @@ const KeyValueItem = ({
     }
 
     return (
-        <div className="flexbox justify-space">
+        <div className={`flexbox justify-space ${itemClassName || ''}`}>
             <div className="pt-8 w-100">
                 <CustomInput
                     name="item-key"
@@ -84,6 +85,7 @@ const KeyValueList = ({
     handleKeyValueChange,
     isDisabled,
     disabledInfo,
+    itemClassName,
     addButtonText = TEXT_MESSAGES.ADD_BUTTON_TEXT,
     keyPlaceholder = TEXT_MESSAGES.DEFAULT_KEY_PLACEHOLDER,
     valuePlaceholder = TEXT_MESSAGES.DEFAULT_VALUE_PLACEHOLDER,
@@ -119,6 +121,7 @@ const KeyValueList = ({
                         keyPlaceholder={keyPlaceholder}
                         valuePlaceholder={valuePlaceholder}
                         index={index}
+                        itemClassName={itemClassName}
                     />
                 ))}
         </>

diff --git a/src/Shared/Components/KeyValueList/types.ts b/src/Shared/Components/KeyValueList/types.ts
@@ -44,6 +44,10 @@ export interface KeyValueListProps {
      * @default - Enter Value
      */
     valuePlaceholder?: string
+    /**
+     * to be applied on each item
+     */
+    itemClassName?: string
 }
 
 export interface KeyValueItemProps extends Omit<KeyValueListProps, 'addButtonText' | 'keyValueList' | 'disabledInfo'> {