Refactor/new menu item (#1448)

* wip * finished * Added disabled * Fixed disabled * Finished cleaning * Minor fixes from merge * Added docs * Added PascalCase * Fix from review * Fixes from merge * Fix lint * Fixed storybook tests
2023-09-06 16:41:26 +02:00
parent 5c7660f588
commit 28ca9a9e49
96 changed files with 816 additions and 918 deletions
@@ -0,0 +1,51 @@
+import { ReactNode } from 'react';
+import styled from '@emotion/styled';
+
+import { Checkbox } from '@/ui/input/checkbox/components/Checkbox';
+
+import {
+  StyledMenuItemBase,
+  StyledMenuItemLabel,
+  StyledMenuItemLeftContent,
+} from '../internals/components/StyledMenuItemBase';
+
+const StyledLeftContentWithCheckboxContainer = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: ${({ theme }) => theme.spacing(2)};
+`;
+
+type OwnProps = {
+  avatar?: ReactNode;
+  selected: boolean;
+  text: string;
+  className?: string;
+  onSelectChange?: (selected: boolean) => void;
+};
+
+export function MenuItemMultiSelectAvatar({
+  avatar,
+  text,
+  selected,
+  className,
+  onSelectChange,
+}: OwnProps) {
+  function handleOnClick() {
+    onSelectChange?.(!selected);
+  }
+
+  return (
+    <StyledMenuItemBase className={className} onClick={handleOnClick}>
+      <StyledLeftContentWithCheckboxContainer>
+        <Checkbox checked={selected} />
+        <StyledMenuItemLeftContent>
+          {avatar}
+          <StyledMenuItemLabel hasLeftIcon={!!avatar}>
+            {text}
+          </StyledMenuItemLabel>
+        </StyledMenuItemLeftContent>
+      </StyledLeftContentWithCheckboxContainer>
+    </StyledMenuItemBase>
+  );
+}