Merge pull request #466 from topotal/feature/disabled-list-item

Add Disabled Props to List component
topotal · Dec 6, 2024 · aef933f · aef933f
2 parents a43e894 + 791f6ed
commit aef933f
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 0 deletions.
diff --git a/packages/topotal-ui/src/components/List/components/Row/index.tsx b/packages/topotal-ui/src/components/List/components/Row/index.tsx
@@ -12,6 +12,7 @@ interface Props<T = any> {
   onHoverIn: (index: number) => void
   onHoverOut: (index: number) => void
   onPress?: (item: T) => void
+  itemDisabled?: (item: T) => boolean
 }
 
 export const Row = React.memo<Props>(({
@@ -21,14 +22,17 @@ export const Row = React.memo<Props>(({
   disabledChangeBackground = false,
   style,
   renderItem,
+  itemDisabled,
   onPress,
   onHoverIn,
   onHoverOut,
 }) => {
+  const disabled = itemDisabled?.(item) ?? false
   const { styles } = useStyles({
     firstItem: index === 0,
     hovered,
     pressable: !!onPress,
+    disabled,
   })
 
   const handlePress = useCallback(() => {
@@ -51,6 +55,7 @@ export const Row = React.memo<Props>(({
   return (
     <Pressable
       style={[styles.wrapper, style]}
+      disabled={disabled}
       onPress={handlePress}
       onHoverIn={handleHoverIn}
       onHoverOut={handleHoverOut}

diff --git a/packages/topotal-ui/src/components/List/components/Row/styles.ts b/packages/topotal-ui/src/components/List/components/Row/styles.ts
@@ -10,12 +10,15 @@ interface Props {
   firstItem: boolean
   hovered: boolean
   pressable: boolean
+  disabled: boolean
 }
 
+
 export const useStyles = ({
   firstItem,
   hovered,
   pressable,
+  disabled,
 }: Props) => {
   const { color } = useTheme()
 
@@ -24,8 +27,10 @@ export const useStyles = ({
       minHeight: 20,
       borderTopWidth: firstItem ? 0 : 1,
       borderColor: color.borderLight,
+      opacity: disabled ? 0.5 : 1,
       backgroundColor: hovered ? color.background : color.surface,
       cursor: pressable ? 'pointer' : 'default',
+      pointerEvents: disabled ? 'none' : 'auto',
     },
   }), [
     color.background,
@@ -34,6 +39,7 @@ export const useStyles = ({
     firstItem,
     hovered,
     pressable,
+    disabled,
   ])
 
   return {

diff --git a/packages/topotal-ui/src/components/List/index.stories.tsx b/packages/topotal-ui/src/components/List/index.stories.tsx
@@ -42,6 +42,12 @@ DisabledChangeBackground.args = {
   disabledChangeBackground: true,
 }
 
+export const ItemDisabled: Story<ListProps<Item>> = Template.bind({})
+ItemDisabled.args = {
+  ...defaultProps,
+  itemDisabled: (item) => item.name === 'item2',
+}
+
 export const DefaultEmptyView: Story<ListProps<Item>> = Template.bind({})
 DefaultEmptyView.args = {
   ...defaultProps,

diff --git a/packages/topotal-ui/src/components/List/index.tsx b/packages/topotal-ui/src/components/List/index.tsx
@@ -13,6 +13,7 @@ export interface Props<T> {
   disabledChangeBackground?: boolean
   keyExtractor?: (item: T, index: number) => string
   onPressItem?: (item: T) => void
+  itemDisabled?: (item: T) => boolean
   testID?: string
 }
 
@@ -22,6 +23,7 @@ export const List = <T, >({
   emptyView,
   disabledChangeBackground = false,
   renderItem,
+  itemDisabled,
   keyExtractor,
   onPressItem,
   testID,
@@ -49,6 +51,7 @@ export const List = <T, >({
               index={index}
               hovered={index === hoveredIndex}
               disabledChangeBackground={disabledChangeBackground}
+              itemDisabled={itemDisabled}
               renderItem={renderItem}
               onPress={onPressItem}
               onHoverIn={handleHoverInRow}