feat(listitem): add disabled and loading state to list item (#275)

Author: ehsan-github

src/components/dropdown-button/stories.tsx

@@ -19,6 +19,8 @@ export default {
         value: 'project_1',
         metadata: {},
         onClick: action('onClick'),
+        isLoading: true,
+        disabled: true,
       },
       {
         value: 'project_2',
@@ -31,6 +33,7 @@ export default {
         icon: IconName.plus,
         metadata: {},
         onClick: action('onClick'),
+        isLoading: true,
       },
     ],
   },

src/components/dropdown/index.tsx

@@ -8,6 +8,8 @@ import useOnClickOutside from '../../utils/useClickOutside';
 // Types
 import { DropdownItem } from './types';
 import { GetIcon } from '../icon';
+import Spinner from '../spinner';
+import { Flex } from 'rebass';
 
 export interface DropdownProps extends Omit<ListProps, 'css' | 'children'> {
   items: DropdownItem[];
@@ -31,16 +33,35 @@ const Dropdown: FC<DropdownProps> = ({
   return (
     <List {...props} ref={containerRef}>
       {items?.map((item) => {
-        const { value, id, icon, hasDivider, onClick } = item;
+        const { value, id, icon, hasDivider, onClick, isLoading, disabled } =
+          item;
 
         return (
           <ListItem
             hasDivider={hasDivider}
             key={id || value}
             onClick={() => onClick(item)}
+            disabled={disabled}
           >
-            {icon && <GetIcon icon={icon} size="sm" />}
-            {value}
+            <Flex width="100%">
+              <Flex flexGrow={1}>
+                {icon && (
+                  <GetIcon
+                    color={disabled ? 'gray' : 'black'}
+                    icon={icon}
+                    size="sm"
+                  />
+                )}
+                {value}
+              </Flex>
+              {isLoading && (
+                <Spinner
+                  size={16}
+                  ml="15px"
+                  color={disabled ? 'gray' : 'primary'}
+                />
+              )}
+            </Flex>
           </ListItem>
         );
       })}

src/components/dropdown/types.ts

@@ -7,4 +7,6 @@ export interface DropdownItem<Metadata = {}> {
   hasDivider?: boolean;
   metadata?: Metadata;
   onClick: (item: DropdownItem) => void;
+  isLoading?: boolean;
+  disabled?: boolean;
 }

src/components/list/item/index.tsx

@@ -22,6 +22,7 @@ const ListItem: FC<ListItemProps> = ({
   action,
   isActive = false,
   isRightAlignment,
+  disabled,
   ...props
 }: ListItemProps) => {
   const [actionTitle, actionCallback] = action || [];
@@ -33,7 +34,7 @@ const ListItem: FC<ListItemProps> = ({
       tx="variants.list.item"
       variant={variant}
       {...props}
-      sx={styles(isActive)}
+      sx={styles(isActive, disabled)}
       css={!hasDivider ? withoutBorder : undefined}
     >
       {children}

src/components/list/item/list-item.styles.ts

@@ -1,9 +1,10 @@
 export const withoutBorder = { borderBottomColor: 'transparent' };
 
-export default (isActive: boolean) => ({
+export default (isActive: boolean, disablde?: boolean) => ({
   height: '35px',
 
   bg: isActive ? 'grayShade3' : 'initial',
+  color: disablde ? 'gray' : 'initial',
 
   display: 'flex',
   alignItems: 'center',