#693 open calendar menu on mobile (#842)

Co-authored-by: lethemanh <lethemanh@lethemanhs-MacBook-Pro.local>
2026-04-28 21:09:21 +07:00
parent 234b4c3ae8
commit c910f3e3a9
4 changed files with 265 additions and 59 deletions
@@ -0,0 +1,66 @@
+import React from 'react'
+import {
+  styled,
+  SwipeableDrawer,
+  List,
+  ListItemButton,
+  ListItemText
+} from '@linagora/twake-mui'
+import { useI18n } from 'twake-i18n'
+
+const StyledSwipeableDrawer = styled(SwipeableDrawer)(({ theme }) => ({
+  zIndex: theme.zIndex.modal + 100
+}))
+
+interface CalendarSelectorMobileMenuProps {
+  open: boolean
+  onClose: () => void
+  onModify: () => void
+  onDelete: () => void
+  isDefault: boolean
+  isPersonal: boolean
+}
+
+export const CalendarSelectorMobileMenu: React.FC<
+  CalendarSelectorMobileMenuProps
+> = ({ open, onClose, onModify, onDelete, isDefault, isPersonal }) => {
+  const { t } = useI18n()
+
+  return (
+    <StyledSwipeableDrawer
+      anchor="bottom"
+      open={open}
+      onClose={onClose}
+      onOpen={() => {}}
+      disableAutoFocus
+    >
+      <List>
+        <ListItemButton
+          onClick={() => {
+            onModify()
+            onClose()
+          }}
+        >
+          <ListItemText primary={t('actions.modify')} />
+        </ListItemButton>
+        {!isDefault && (
+          <ListItemButton
+            onClick={() => {
+              onDelete()
+              onClose()
+            }}
+          >
+            <ListItemText
+              primary={isPersonal ? t('actions.delete') : t('actions.remove')}
+              slotProps={{
+                primary: {
+                  color: 'error.main'
+                }
+              }}
+            />
+          </ListItemButton>
+        )}
+      </List>
+    </StyledSwipeableDrawer>
+  )
+}