From 66a4c0a299db42b596e6b90a1ce269161175bcb6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Arkadiusz=20Chrab=C4=85szczewski?= Date: Wed, 28 Feb 2024 11:34:10 +0100 Subject: [PATCH 1/5] feat: add optional checkbox press handled --- src/components/SelectionList/BaseListItem.tsx | 17 +++++++++++++++-- .../SelectionList/BaseSelectionList.tsx | 2 ++ src/components/SelectionList/TableListItem.tsx | 2 ++ src/components/SelectionList/types.ts | 6 ++++++ 4 files changed, 25 insertions(+), 2 deletions(-) diff --git a/src/components/SelectionList/BaseListItem.tsx b/src/components/SelectionList/BaseListItem.tsx index 2f853dc55839..824ad757cb38 100644 --- a/src/components/SelectionList/BaseListItem.tsx +++ b/src/components/SelectionList/BaseListItem.tsx @@ -19,6 +19,7 @@ function BaseListItem({ shouldPreventDefaultFocusOnSelectRow = false, canSelectMultiple = false, onSelectRow, + onCheckboxPress, onDismissError = () => {}, rightHandSideComponent, keyForList, @@ -43,6 +44,15 @@ function BaseListItem({ return rightHandSideComponent; }; + const handleCheckboxPress = () => { + if (onCheckboxPress) { + onCheckboxPress(item); + } else { + // If base list show checkbox, but there is no onCheckboxPress, then onSelectRow should be called as primary action for the entire row + onSelectRow(item); + } + }; + return ( onDismissError(item)} @@ -66,8 +76,11 @@ function BaseListItem({ <> {canSelectMultiple && ( - @@ -80,7 +93,7 @@ function BaseListItem({ /> )} - + )} {typeof children === 'function' ? children(hovered) : children} diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 1c69d00b3910..1e75aaeac93e 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -30,6 +30,7 @@ function BaseSelectionList( ListItem, canSelectMultiple = false, onSelectRow, + onCheckboxPress, onSelectAll, onDismissError, textInputLabel = '', @@ -289,6 +290,7 @@ function BaseSelectionList( showTooltip={showTooltip} canSelectMultiple={canSelectMultiple} onSelectRow={() => selectRow(item)} + onCheckboxPress={() => onCheckboxPress?.(item)} onDismissError={() => onDismissError?.(item)} shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow} rightHandSideComponent={rightHandSideComponent} diff --git a/src/components/SelectionList/TableListItem.tsx b/src/components/SelectionList/TableListItem.tsx index 922937c72219..2acad7f40f20 100644 --- a/src/components/SelectionList/TableListItem.tsx +++ b/src/components/SelectionList/TableListItem.tsx @@ -15,6 +15,7 @@ function TableListItem({ isDisabled, canSelectMultiple, onSelectRow, + onCheckboxPress, onDismissError, shouldPreventDefaultFocusOnSelectRow, rightHandSideComponent, @@ -37,6 +38,7 @@ function TableListItem({ showTooltip={showTooltip} canSelectMultiple={canSelectMultiple} onSelectRow={onSelectRow} + onCheckboxPress={onCheckboxPress} onDismissError={onDismissError} shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow} rightHandSideComponent={rightHandSideComponent} diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index 59f6b14cfb1f..b6cc0c786adb 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -23,6 +23,9 @@ type CommonListItemProps = { /** Callback to fire when the item is pressed */ onSelectRow: (item: TItem) => void; + /** Callback to fire when a checkbox is pressed */ + onCheckboxPress?: (item: TItem) => void; + /** Callback to fire when an error is dismissed */ onDismissError?: (item: TItem) => void; @@ -157,6 +160,9 @@ type BaseSelectionListProps = Partial & { /** Callback to fire when a row is pressed */ onSelectRow: (item: TItem) => void; + /** Optional callback function triggered upon pressing a checkbox. If undefined and the list displays checkboxes, checkbox interactions are managed by onSelectRow, allowing for pressing anywhere on the list. */ + onCheckboxPress?: (item: TItem) => void; + /** Callback to fire when "Select All" checkbox is pressed. Only use along with `canSelectMultiple` */ onSelectAll?: () => void; From ad6aa3811d4cf223a365a492d202bc64050014b2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Arkadiusz=20Chrab=C4=85szczewski?= Date: Wed, 28 Feb 2024 11:34:50 +0100 Subject: [PATCH 2/5] chore: temporary navigate to categories settings when pressing row --- src/pages/workspace/categories/WorkspaceCategoriesPage.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx index 7cd9972a6f57..721341073d72 100644 --- a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx +++ b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx @@ -129,7 +129,8 @@ function WorkspaceCategoriesPage({policyCategories, route}: WorkspaceCategoriesP Date: Wed, 28 Feb 2024 11:44:26 +0100 Subject: [PATCH 3/5] fix: pass undefined if onCheckboxPress is undefined --- src/components/SelectionList/BaseListItem.tsx | 2 -- src/components/SelectionList/BaseSelectionList.tsx | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/SelectionList/BaseListItem.tsx b/src/components/SelectionList/BaseListItem.tsx index 824ad757cb38..98b1999625ee 100644 --- a/src/components/SelectionList/BaseListItem.tsx +++ b/src/components/SelectionList/BaseListItem.tsx @@ -48,7 +48,6 @@ function BaseListItem({ if (onCheckboxPress) { onCheckboxPress(item); } else { - // If base list show checkbox, but there is no onCheckboxPress, then onSelectRow should be called as primary action for the entire row onSelectRow(item); } }; @@ -77,7 +76,6 @@ function BaseListItem({ {canSelectMultiple && ( ( showTooltip={showTooltip} canSelectMultiple={canSelectMultiple} onSelectRow={() => selectRow(item)} - onCheckboxPress={() => onCheckboxPress?.(item)} + onCheckboxPress={onCheckboxPress ? () => onCheckboxPress?.(item) : undefined} onDismissError={() => onDismissError?.(item)} shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow} rightHandSideComponent={rightHandSideComponent} From 645a1a402a9478af43a999d5404c2b4a39f9e3da Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Arkadiusz=20Chrab=C4=85szczewski?= Date: Wed, 28 Feb 2024 11:51:35 +0100 Subject: [PATCH 4/5] feat: add support for radio and user list item --- src/components/SelectionList/RadioListItem.tsx | 2 ++ src/components/SelectionList/UserListItem.tsx | 2 ++ 2 files changed, 4 insertions(+) diff --git a/src/components/SelectionList/RadioListItem.tsx b/src/components/SelectionList/RadioListItem.tsx index b3340a0faf7a..d56e0330de32 100644 --- a/src/components/SelectionList/RadioListItem.tsx +++ b/src/components/SelectionList/RadioListItem.tsx @@ -13,6 +13,7 @@ function RadioListItem({ isDisabled, canSelectMultiple, onSelectRow, + onCheckboxPress, onDismissError, shouldPreventDefaultFocusOnSelectRow, rightHandSideComponent, @@ -30,6 +31,7 @@ function RadioListItem({ showTooltip={showTooltip} canSelectMultiple={canSelectMultiple} onSelectRow={onSelectRow} + onCheckboxPress={onCheckboxPress} onDismissError={onDismissError} shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow} rightHandSideComponent={rightHandSideComponent} diff --git a/src/components/SelectionList/UserListItem.tsx b/src/components/SelectionList/UserListItem.tsx index 06d0f6452117..fc39bb4b1259 100644 --- a/src/components/SelectionList/UserListItem.tsx +++ b/src/components/SelectionList/UserListItem.tsx @@ -18,6 +18,7 @@ function UserListItem({ isDisabled, canSelectMultiple, onSelectRow, + onCheckboxPress, onDismissError, shouldPreventDefaultFocusOnSelectRow, rightHandSideComponent, @@ -41,6 +42,7 @@ function UserListItem({ showTooltip={showTooltip} canSelectMultiple={canSelectMultiple} onSelectRow={onSelectRow} + onCheckboxPress={onCheckboxPress} onDismissError={onDismissError} shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow} rightHandSideComponent={rightHandSideComponent} From 2e1472b152c8f9ea7984e17ad7f3fce4dc6f4f9d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Arkadiusz=20Chrab=C4=85szczewski?= Date: Wed, 28 Feb 2024 15:49:16 +0100 Subject: [PATCH 5/5] refactor: select all checkbox only in checkbox area --- .../SelectionList/BaseSelectionList.tsx | 16 +++------------- 1 file changed, 3 insertions(+), 13 deletions(-) diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index f0fd096a9d95..5b5a67dc1e28 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -8,7 +8,6 @@ import Button from '@components/Button'; import Checkbox from '@components/Checkbox'; import FixedFooter from '@components/FixedFooter'; import OptionsListSkeletonView from '@components/OptionsListSkeletonView'; -import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import SafeAreaConsumer from '@components/SafeAreaConsumer'; import SectionList from '@components/SectionList'; import Text from '@components/Text'; @@ -431,28 +430,19 @@ function BaseSelectionList( ) : ( <> {!headerMessage && canSelectMultiple && shouldShowSelectAll && ( - e.preventDefault() : undefined} - > + {customListHeader ?? ( {translate('workspace.people.selectAll')} )} - + )} {!headerMessage && !canSelectMultiple && customListHeader}