From 1d15c7e5540d2b1b2cb456d2aceeb8ee4610beb5 Mon Sep 17 00:00:00 2001 From: rianmandala Date: Wed, 20 Aug 2025 10:14:40 +0700 Subject: [PATCH 1/5] chore: adjust dynamic list remove --- .../src/DynamicList/DynamicList.stories.tsx | 15 ++--------- .../src/DynamicList/DynamicList.styles.tsx | 7 +++++ packages/apsara-ui/src/DynamicList/index.tsx | 27 +++++++++++++------ 3 files changed, 28 insertions(+), 21 deletions(-) diff --git a/packages/apsara-ui/src/DynamicList/DynamicList.stories.tsx b/packages/apsara-ui/src/DynamicList/DynamicList.stories.tsx index f93894221..6acb36d74 100644 --- a/packages/apsara-ui/src/DynamicList/DynamicList.stories.tsx +++ b/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,6 @@ export const Form: FC = () => { const meta = { name: ["policies"], - disabled: (index: number) => { - return index === 0 || index === 2; - }, fields: [ { key: "account_type", @@ -72,21 +69,13 @@ export const Form: FC = () => { ], }; - const [updateDisable, setUpdateDisable] = React.useState(false); - - useEffect(() => { - setTimeout(() => { - setUpdateDisable(true); - }, 3000); - }, []); - const DynamicListContent = ({ form, meta }: any) => { return (
console.log("Remove clicked") }} addBtnText="Add another role" />
diff --git a/packages/apsara-ui/src/DynamicList/DynamicList.styles.tsx b/packages/apsara-ui/src/DynamicList/DynamicList.styles.tsx index 5e99fc56f..fe84a2d65 100644 --- a/packages/apsara-ui/src/DynamicList/DynamicList.styles.tsx +++ b/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; + } } `; diff --git a/packages/apsara-ui/src/DynamicList/index.tsx b/packages/apsara-ui/src/DynamicList/index.tsx index 244a76e94..ecbd72ef3 100644 --- a/packages/apsara-ui/src/DynamicList/index.tsx +++ b/packages/apsara-ui/src/DynamicList/index.tsx @@ -14,6 +14,7 @@ interface FormItemDynamicListProps { add: () => void; addBtnText: string; addBtnProps?: ButtonHTMLAttributes; + removeBtnProps?: ButtonHTMLAttributes; } interface DynamicListProps { @@ -21,6 +22,7 @@ interface DynamicListProps { meta: any; addBtnText?: string; addBtnProps?: ButtonHTMLAttributes; + removeBtnProps?: ButtonHTMLAttributes; } const FormItemDynamicList = ({ @@ -31,6 +33,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,14 +72,21 @@ const FormItemDynamicList = ({ return (
- !isDisabled && remove(field.name)} - /> + disabled={isDisabled || removeBtnProps?.disabled} + onClick={() => !isDisabled && !removeBtnProps?.disabled && remove(field.name)} + {...removeBtnProps} + > + +
); })} @@ -96,7 +106,7 @@ const FormItemDynamicList = ({ ); }; -export const DynamicList = ({ form, meta, addBtnText = "Add", addBtnProps }: DynamicListProps) => { +export const DynamicList = ({ form, meta, addBtnText = "Add", addBtnProps, removeBtnProps }: DynamicListProps) => { return ( {(formListfields, { add, remove }) => ( @@ -108,6 +118,7 @@ export const DynamicList = ({ form, meta, addBtnText = "Add", addBtnProps }: Dyn formListfields={formListfields} addBtnText={addBtnText} addBtnProps={addBtnProps} + removeBtnProps={removeBtnProps} /> )} From c217f0762cdb28e3771469457c5092262db3fafc Mon Sep 17 00:00:00 2001 From: rianmandala Date: Wed, 20 Aug 2025 10:44:10 +0700 Subject: [PATCH 2/5] chore: bump apsara version --- lerna.json | 2 +- packages/apsara-icons/package.json | 2 +- packages/apsara-ui/package.json | 2 +- packages/apsara-ui/src/DynamicList/DynamicList.stories.tsx | 1 + 4 files changed, 4 insertions(+), 3 deletions(-) diff --git a/lerna.json b/lerna.json index 621b01195..688eb39f2 100644 --- a/lerna.json +++ b/lerna.json @@ -2,7 +2,7 @@ "packages": ["packages/*"], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.11.9", + "version": "0.12.1-alpha.0", "command": { "version": { "message": "chore(release): publish %s" diff --git a/packages/apsara-icons/package.json b/packages/apsara-icons/package.json index 5e715f4bb..3bbdc2166 100644 --- a/packages/apsara-icons/package.json +++ b/packages/apsara-icons/package.json @@ -1,6 +1,6 @@ { "name": "@goto-company/icons", - "version": "0.11.9", + "version": "0.12.1-alpha.0", "description": "Apsara icons", "scripts": { "build": "node scripts/build.js", diff --git a/packages/apsara-ui/package.json b/packages/apsara-ui/package.json index 7ca5002f7..829ae9fcf 100644 --- a/packages/apsara-ui/package.json +++ b/packages/apsara-ui/package.json @@ -1,6 +1,6 @@ { "name": "@goto-company/apsara", - "version": "0.11.9", + "version": "0.12.1-alpha.0", "description": "A list of base components for apsara", "author": "Praveen Yadav ", "license": "Apache-2.0", diff --git a/packages/apsara-ui/src/DynamicList/DynamicList.stories.tsx b/packages/apsara-ui/src/DynamicList/DynamicList.stories.tsx index 6acb36d74..dc1c6626f 100644 --- a/packages/apsara-ui/src/DynamicList/DynamicList.stories.tsx +++ b/packages/apsara-ui/src/DynamicList/DynamicList.stories.tsx @@ -23,6 +23,7 @@ export const Form: FC = () => { const meta = { name: ["policies"], + disabled: () => true, fields: [ { key: "account_type", From 718883067bf7df501942e7e24664dffa51e19010 Mon Sep 17 00:00:00 2001 From: rianmandala Date: Wed, 20 Aug 2025 11:13:14 +0700 Subject: [PATCH 3/5] chore: bump apsara version --- lerna.json | 2 +- packages/apsara-icons/package.json | 2 +- packages/apsara-ui/package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/lerna.json b/lerna.json index 688eb39f2..034cb80a9 100644 --- a/lerna.json +++ b/lerna.json @@ -2,7 +2,7 @@ "packages": ["packages/*"], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.12.1-alpha.0", + "version": "0.13.0-alpha.0", "command": { "version": { "message": "chore(release): publish %s" diff --git a/packages/apsara-icons/package.json b/packages/apsara-icons/package.json index 3bbdc2166..6b1150a7a 100644 --- a/packages/apsara-icons/package.json +++ b/packages/apsara-icons/package.json @@ -1,6 +1,6 @@ { "name": "@goto-company/icons", - "version": "0.12.1-alpha.0", + "version": "0.13.0-alpha.0", "description": "Apsara icons", "scripts": { "build": "node scripts/build.js", diff --git a/packages/apsara-ui/package.json b/packages/apsara-ui/package.json index 829ae9fcf..4b0877fa1 100644 --- a/packages/apsara-ui/package.json +++ b/packages/apsara-ui/package.json @@ -1,6 +1,6 @@ { "name": "@goto-company/apsara", - "version": "0.12.1-alpha.0", + "version": "0.13.0-alpha.0", "description": "A list of base components for apsara", "author": "Praveen Yadav ", "license": "Apache-2.0", From 9a272dba62b7306438c01d4de0ed41981372b311 Mon Sep 17 00:00:00 2001 From: rianmandala Date: Wed, 20 Aug 2025 12:20:06 +0700 Subject: [PATCH 4/5] chore: add custom onClick remove --- packages/apsara-ui/src/DynamicList/index.tsx | 31 ++++++++++++++++---- 1 file changed, 25 insertions(+), 6 deletions(-) diff --git a/packages/apsara-ui/src/DynamicList/index.tsx b/packages/apsara-ui/src/DynamicList/index.tsx index ecbd72ef3..bf94adf8d 100644 --- a/packages/apsara-ui/src/DynamicList/index.tsx +++ b/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; + index?: number; +} + +type RemoveBtnProps = Omit, "onClick"> & { + onClick?: (props?: RemoveBtnOnClick) => void; +}; + interface FormItemDynamicListProps { form: any; meta: any; @@ -14,7 +23,7 @@ interface FormItemDynamicListProps { add: () => void; addBtnText: string; addBtnProps?: ButtonHTMLAttributes; - removeBtnProps?: ButtonHTMLAttributes; + removeBtnProps?: RemoveBtnProps; } interface DynamicListProps { @@ -22,7 +31,7 @@ interface DynamicListProps { meta: any; addBtnText?: string; addBtnProps?: ButtonHTMLAttributes; - removeBtnProps?: ButtonHTMLAttributes; + removeBtnProps?: RemoveBtnProps; } const FormItemDynamicList = ({ @@ -77,8 +86,15 @@ const FormItemDynamicList = ({ role="presentation" className="form-dynamic-list__btn-remove" disabled={isDisabled || removeBtnProps?.disabled} - onClick={() => !isDisabled && !removeBtnProps?.disabled && remove(field.name)} {...removeBtnProps} + onClick={(e) => { + if (!isDisabled && !removeBtnProps?.disabled) { + remove(field.name); + if (removeBtnProps?.onClick) { + removeBtnProps.onClick({ event: e, index }); + } + } + }} > { - add(); - }} className="form-dynamic-list__btn-add" {...addBtnProps} + onClick={(e) => { + add(); + if (addBtnProps?.onClick) { + addBtnProps.onClick(e); + } + }} > {addBtnText} From a95d25dd576b46d766ff5a39b8a99e6f2ebbe796 Mon Sep 17 00:00:00 2001 From: rianmandala Date: Wed, 20 Aug 2025 12:20:43 +0700 Subject: [PATCH 5/5] chore: bump apsara version --- lerna.json | 2 +- packages/apsara-icons/package.json | 2 +- packages/apsara-ui/package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/lerna.json b/lerna.json index 034cb80a9..e50e7114c 100644 --- a/lerna.json +++ b/lerna.json @@ -2,7 +2,7 @@ "packages": ["packages/*"], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.13.0-alpha.0", + "version": "0.13.0-alpha.1", "command": { "version": { "message": "chore(release): publish %s" diff --git a/packages/apsara-icons/package.json b/packages/apsara-icons/package.json index 6b1150a7a..395f80b76 100644 --- a/packages/apsara-icons/package.json +++ b/packages/apsara-icons/package.json @@ -1,6 +1,6 @@ { "name": "@goto-company/icons", - "version": "0.13.0-alpha.0", + "version": "0.13.0-alpha.1", "description": "Apsara icons", "scripts": { "build": "node scripts/build.js", diff --git a/packages/apsara-ui/package.json b/packages/apsara-ui/package.json index 4b0877fa1..0bb4272c6 100644 --- a/packages/apsara-ui/package.json +++ b/packages/apsara-ui/package.json @@ -1,6 +1,6 @@ { "name": "@goto-company/apsara", - "version": "0.13.0-alpha.0", + "version": "0.13.0-alpha.1", "description": "A list of base components for apsara", "author": "Praveen Yadav ", "license": "Apache-2.0",