selected menu option feature

livechat · Dec 11, 2023 · 47d4c9b · 47d4c9b
1 parent c0cc5a1
commit 47d4c9b
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 0 deletions.
diff --git a/packages/react-components/src/components/ActionMenu/ActionMenu.module.scss b/packages/react-components/src/components/ActionMenu/ActionMenu.module.scss
@@ -122,6 +122,14 @@ $base-class: 'action-menu';
           cursor: not-allowed;
         }
       }
+
+      &--selected {
+        background-color: var(--picker-list-option-background-active);
+      }
+
+      &__icon {
+        margin-left: var(--spacing-2);
+      }
     }
   }
 }
diff --git a/packages/react-components/src/components/ActionMenu/ActionMenu.stories.tsx b/packages/react-components/src/components/ActionMenu/ActionMenu.stories.tsx
@@ -143,3 +143,44 @@ export const KeepOpenOnItemClick = (): React.ReactElement => {
     </div>
   );
 };
+
+export const WithSelectedOptions = (): React.ReactElement => {
+  const [selectedOptions, setSelectedOptions] = React.useState(['one']);
+  const handleSelectOption = (key: string) => {
+    if (selectedOptions.includes(key)) {
+      return setSelectedOptions((s) => s.filter((o) => o !== key));
+    }
+
+    return setSelectedOptions((s) => [...s, key]);
+  };
+
+  return (
+    <div className="action-menu-preview">
+      <ActionMenu
+        selectedOptions={selectedOptions}
+        options={[
+          {
+            key: 'one',
+            element: <ActionMenuItem>Option one</ActionMenuItem>,
+            onClick: () => handleSelectOption('one'),
+          },
+          {
+            key: 'two',
+            element: <ActionMenuItem>Option two</ActionMenuItem>,
+            onClick: () => handleSelectOption('two'),
+          },
+          {
+            key: 'three',
+            element: <ActionMenuItem>Option three</ActionMenuItem>,
+            onClick: () => handleSelectOption('three'),
+          },
+        ]}
+        triggerRenderer={
+          <Button icon={<Icon source={MoreHoriz} kind="primary" />} />
+        }
+        openedOnInit
+        keepOpenOnClick
+      />
+    </div>
+  );
+};
diff --git a/packages/react-components/src/components/ActionMenu/ActionMenu.tsx b/packages/react-components/src/components/ActionMenu/ActionMenu.tsx
@@ -13,9 +13,11 @@ import {
   useTransitionStyles,
   Strategy,
 } from '@floating-ui/react';
+import { Check } from '@livechat/design-system-icons';
 import cx from 'clsx';
 
 import { KeyCodes } from '../../utils/keyCodes';
+import { Icon } from '../Icon';
 
 import { IActionMenuOption } from './types';
 
@@ -34,6 +36,10 @@ export interface ActionMenuProps {
    * Array of menu options
    */
   options: IActionMenuOption[];
+  /**
+   * Array of selected menu options keys
+   */
+  selectedOptions?: string[];
   /**
    * Trigger element
    */
@@ -88,6 +94,7 @@ export const ActionMenu: React.FC<ActionMenuProps> = ({
   onClose,
   onOpen,
   floatingStrategy,
+  selectedOptions,
   ...props
 }) => {
   const isControlled = visible !== undefined;
@@ -226,9 +233,16 @@ export const ActionMenu: React.FC<ActionMenuProps> = ({
             [styles[`${baseClass}__list__item--disabled`]]: option.disabled,
             [styles[`${baseClass}__list__item--with-divider`]]:
               option.withDivider,
+            [styles[`${baseClass}__list__item--selected`]]:
+              selectedOptions?.includes(option.key),
           })}
         >
           {option.element}
+          {selectedOptions?.includes(option.key) && (
+            <div className={styles[`${baseClass}__list__item__icon`]}>
+              <Icon source={Check} kind="action-primary" />
+            </div>
+          )}
         </button>
       </li>
     );