chore: adjust dynamic list remove

lerna.json

@@ -2,7 +2,7 @@
     "packages": ["packages/*"],
     "npmClient": "yarn",
     "useWorkspaces": true,
-    "version": "0.11.9",
+    "version": "0.13.0-alpha.1",
     "command": {
         "version": {
             "message": "chore(release): publish %s"

packages/apsara-icons/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@goto-company/icons",
-    "version": "0.11.9",
+    "version": "0.13.0-alpha.1",
     "description": "Apsara icons",
     "scripts": {
         "build": "node scripts/build.js",

packages/apsara-ui/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@goto-company/apsara",
-    "version": "0.11.9",
+    "version": "0.13.0-alpha.1",
     "description": "A list of base components for apsara",
     "author": "Praveen Yadav <[email protected]>",
     "license": "Apache-2.0",

packages/apsara-ui/src/DynamicList/DynamicList.stories.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect } from "react";
+import React, { FC } from "react";
 import DynamicList from "./index";
 import FormBuilder from "../FormBuilder";
 import Button from "../Button";
@@ -23,9 +23,7 @@ export const Form: FC = () => {
 
     const meta = {
         name: ["policies"],
-        disabled: (index: number) => {
-            return index === 0 || index === 2;
-        },
+        disabled: () => true,
         fields: [
             {
                 key: "account_type",
@@ -72,21 +70,13 @@ export const Form: FC = () => {
         ],
     };
 
-    const [updateDisable, setUpdateDisable] = React.useState(false);
-
-    useEffect(() => {
-        setTimeout(() => {
-            setUpdateDisable(true);
-        }, 3000);
-    }, []);
-
     const DynamicListContent = ({ form, meta }: any) => {
         return (
             <div>
                 <DynamicList
                     form={form}
                     meta={meta}
-                    addBtnProps={{ disabled: updateDisable }}
+                    removeBtnProps={{ onClick: () => console.log("Remove clicked") }}
                     addBtnText="Add another role"
                 />
             </div>

packages/apsara-ui/src/DynamicList/DynamicList.styles.tsx

@@ -28,8 +28,15 @@ export const DynamicListContainer = styled.div`
     }
 
     .form-dynamic-list__btn-remove {
+        background: none;
+        border: none;
+        padding: 0;
+        display: inline-flex;
         color: red;
         margin-left: 20px;
         ${baseButtonStyles}
+        :disabled {
+            opacity: 0.6;
+        }
     }
 `;

packages/apsara-ui/src/DynamicList/index.tsx

@@ -6,6 +6,15 @@ import { List } from "rc-field-form";
 import { Field, getFormListItemFields } from "./helper";
 import { DynamicListContainer } from "./DynamicList.styles";
 
+interface RemoveBtnOnClick {
+    event?: React.MouseEvent<HTMLButtonElement>;
+    index?: number;
+}
+
+type RemoveBtnProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> & {
+    onClick?: (props?: RemoveBtnOnClick) => void;
+};
+
 interface FormItemDynamicListProps {
     form: any;
     meta: any;
@@ -14,13 +23,15 @@ interface FormItemDynamicListProps {
     add: () => void;
     addBtnText: string;
     addBtnProps?: ButtonHTMLAttributes<HTMLButtonElement>;
+    removeBtnProps?: RemoveBtnProps;
 }
 
 interface DynamicListProps {
     form: any;
     meta: any;
     addBtnText?: string;
     addBtnProps?: ButtonHTMLAttributes<HTMLButtonElement>;
+    removeBtnProps?: RemoveBtnProps;
 }
 
 const FormItemDynamicList = ({
@@ -31,6 +42,7 @@ const FormItemDynamicList = ({
     formListfields,
     addBtnText,
     addBtnProps,
+    removeBtnProps,
 }: FormItemDynamicListProps) => {
     // ? We need to do this because we can't set value and initialValue for form.list items from config
     useEffect(() => {
@@ -69,25 +81,42 @@ const FormItemDynamicList = ({
                 return (
                     <div key={field.key} className="form-dynamic-list__item">
                         <FormBuilder.Items index={index} form={form} meta={{ ...meta, fields }} />
-                        <Icon
+                        <button
+                            type="button"
+                            role="presentation"
                             className="form-dynamic-list__btn-remove"
-                            name="remove"
-                            active
-                            color="#dc3545"
-                            disabled={isDisabled}
-                            onClick={() => !isDisabled && remove(field.name)}
-                        />
+                            disabled={isDisabled || removeBtnProps?.disabled}
+                            {...removeBtnProps}
+                            onClick={(e) => {
+                                if (!isDisabled && !removeBtnProps?.disabled) {
+                                    remove(field.name);
+                                    if (removeBtnProps?.onClick) {
+                                        removeBtnProps.onClick({ event: e, index });
+                                    }
+                                }
+                            }}
+                        >
+                            <Icon
+                                name="remove"
+                                active
+                                color="#dc3545"
+                                disabled={isDisabled || removeBtnProps?.disabled}
+                            />
+                        </button>
                     </div>
                 );
             })}
             <button
                 type="button"
                 role="presentation"
-                onClick={() => {
-                    add();
-                }}
                 className="form-dynamic-list__btn-add"
                 {...addBtnProps}
+                onClick={(e) => {
+                    add();
+                    if (addBtnProps?.onClick) {
+                        addBtnProps.onClick(e);
+                    }
+                }}
             >
                 <Icon name="add" active={!addBtnProps?.disabled} />
                 {addBtnText}
@@ -96,7 +125,7 @@ const FormItemDynamicList = ({
     );
 };
 
-export const DynamicList = ({ form, meta, addBtnText = "Add", addBtnProps }: DynamicListProps) => {
+export const DynamicList = ({ form, meta, addBtnText = "Add", addBtnProps, removeBtnProps }: DynamicListProps) => {
     return (
         <List name={meta.name}>
             {(formListfields, { add, remove }) => (
@@ -108,6 +137,7 @@ export const DynamicList = ({ form, meta, addBtnText = "Add", addBtnProps }: Dyn
                     formListfields={formListfields}
                     addBtnText={addBtnText}
                     addBtnProps={addBtnProps}
+                    removeBtnProps={removeBtnProps}
                 />
             )}
         </List>